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