이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.
핵심 요약
AI 마크업 자동화의 성공은 고도화된 디자인 시스템과 이를 AI가 이해할 수 있게 연결하는 기술적 장치(Code Connect, MCP)에 달려 있다. 단순한 코드 생성을 넘어 디자인 의도를 정확히 반영하기 위한 상세 지시문(Instruction) 설계가 필수적이다.
배경
프론트엔드 개발 과정에서 마크업 작업과 FE 개발의 분업화로 발생하는 커뮤니케이션 비용을 줄이기 위해 AI를 활용한 자동화가 시도되고 있다.
대상 독자
프론트엔드 개발자, UI/UX 디자이너, AI 자동화에 관심 있는 기술 결정자
의미 / 영향
이 프로세스는 FE 개발자가 반복적인 마크업 작업에서 벗어나 비즈니스 로직 설계에 더 집중할 수 있는 환경을 조성한다. 디자인 시스템과 AI의 결합은 디자인과 개발 사이의 기술적 간극을 메우고 전체 제품 개발 주기를 획기적으로 단축할 것으로 기대된다.
챕터별 상세
00:00
FE 개발 패러다임의 변화와 AI의 역할
네이버의 UI 개발 방식은 마크업과 FE 업무가 분리되어 운영되며, 이는 전문성을 높이지만 필연적으로 커뮤니케이션 비용을 발생시킨다. AI를 도입하여 피그마 링크를 입력하면 즉시 마크업 코드가 생성되는 환경을 구축함으로써 이러한 프로세스 공정을 단축하고자 했다. AI는 박학다식하지만 상황 파악 능력이 부족하고 결과가 가변적인 특성이 있어, 이를 제어하기 위한 디자인 시스템과의 결합이 핵심이다.
- •분업화로 인한 커뮤니케이션 비용을 AI 자동화로 해결 시도
- •AI의 컨텍스트 부재와 변덕스러운 특성을 제어할 장치 필요
- •디자인 시스템을 AI의 지식 베이스로 활용하는 전략 수립
02:30
네이버파이낸셜 디자인 시스템 'deFign'의 구조
네이버파이낸셜은 2023년부터 'deFign'이라는 디자인 시스템을 구축하여 운영 중이다. 디자인 토큰을 통해 색상, 타이포그래피, 아이콘 등을 코드화하여 자동화된 워크플로를 갖추었으며, 이를 바탕으로 반응형 레이아웃과 에러 케이스를 포함한 완성도 높은 컴포넌트를 제공한다. 이러한 재사용 가능한 디자인 산출물은 AI가 참조할 수 있는 표준화된 데이터 세트가 된다.
- •디자인 토큰을 활용한 속성값의 표준화 및 코드화 완료
- •80개 이상의 컴포넌트와 240개 이상의 아이콘으로 구성된 라이브러리
- •AI 자동화를 위한 기초 인프라로서의 디자인 시스템 중요성
10:00
AI 마크업 자동화를 위한 기술 아키텍처
VS Code 환경에서 GitHub Copilot과 Claude 3.5 Sonnet을 기반으로 자동화 시스템을 구성했다. Figma Dev Mode의 MCP(Model Context Protocol) 서버를 통해 AI가 피그마 디자인 데이터에 직접 접근하도록 설정했다. 특히 Figma Code Connect를 적용하여 피그마 상의 컴포넌트와 실제 UI 라이브러리 코드를 1:1로 매핑함으로써 AI가 임의로 코드를 생성하지 않고 정의된 컴포넌트를 사용하도록 강제했다.
- •Figma MCP 서버를 통한 실시간 디자인 컨텍스트 주입
- •Code Connect를 이용한 디자인-코드 간의 명확한 매핑
- •LLM이 디자인 시스템 규칙을 준수하도록 아키텍처 설계
18:50
LLM 최적화를 위한 상세 Instruction 설계
AI의 결과물을 안정화하기 위해 매우 상세한 지시문(Instruction)을 작성했다. 디자인 시스템 패키지 사용 우선순위, 레이아웃 구성 규칙, 반응형 대응 방식 등을 명시했다. 또한 '추측 금지', '임의의 마진 사용 금지'와 같은 강력한 제약 사항을 포함했다. 작업 효율을 높이기 위해 전체 레이아웃 구조를 먼저 잡고 세부 섹션을 구현하는 단계적 작업 분할 방식을 채택했다.
- •디자인 시스템 준수를 강제하는 상세 Instruction 작성
- •AI의 환각(Hallucination)을 방지하기 위한 금지 사항 명시
- •레이아웃 구조화와 컴포넌트 구현의 단계적 작업 분할
typescript
import { Button } from "@defign/ui";
/**
* @figma-component-id 123:456
*/
export const ButtonPreview = () => (
<Button
variant="primary"
size="medium"
label="확인"
/>
);Figma Code Connect를 사용하여 피그마 컴포넌트와 실제 UI 라이브러리 코드를 연결하는 예시
25:30
실무 적용 결과 및 한계점 분석
자동화 프로세스 적용 결과, 디자인 시스템을 충실히 따른 영역에서는 매우 높은 수준의 마크업이 생성되었다. 하지만 피그마 설계 시 시각적으로만 표현되고 실제 코드에는 불필요한 레이어가 포함되거나, 오토 레이아웃(Auto Layout)을 사용하지 않은 경우 간격 불일치가 발생했다. 또한 디자인 시스템을 사용하지 않고 임의로 그려진 요소들은 AI가 정확하게 처리하기 어려웠다.
- •디자인 시스템 준수 여부에 따른 코드 품질의 극명한 차이
- •피그마 설계 품질(오토 레이아웃 등)이 AI 결과물에 직접적 영향
- •불필요한 레이어 제거 등 디자인 산출물의 정제 필요성 확인
text
# 마크업 작업 기본 원칙
1. @defign/ui, @defign/icon 패키지를 최우선으로 사용한다.
2. Code Connect 매핑 정보를 기반으로 코드를 생성한다.
3. 임의의 마진이나 패딩을 추측하지 말고 디자인 토큰을 활용한다.
4. 레이아웃은 FlexibleLayout 컴포넌트를 기준으로 구성한다.GitHub Copilot에 적용하는 마크업 자동화 전용 Instruction 구성 예시
실무 Takeaway
- AI 마크업 자동화의 성공을 위해서는 디자인 시스템 구축이 선택이 아닌 필수적인 전제 조건이다.
- Figma Code Connect를 통해 디자인 컴포넌트와 실제 코드를 연결해야 AI가 일관된 UI 코드를 생성할 수 있다.
- LLM에게 한 번에 전체를 요청하기보다 레이아웃 구조와 세부 컴포넌트를 나누어 요청하는 작업 분할이 정확도를 높인다.
- 디자인 설계 단계에서 오토 레이아웃과 명확한 프레임 명명을 준수해야 AI가 의도에 맞는 마진과 패딩을 계산할 수 있다.
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2025. 12. 09.수집 2026. 02. 21.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.