디자인시스템과 AI를 결합해 Figma에서 마크업을 자동 생성한 사례

요약

네이버파이낸셜 FE 팀이 디자인시스템(토큰·컴포넌트) 인프라에 Code Connect와 instruction을 더해 디자인 → 마크업 자동화를 실험. 사전 준비를 잘 갖추면 FE 개발 가능한 수준까지 나오지만 결과 품질 편차와 한계도 함께 확인.

내용

FE 개발에서 디자인 → 마크업 변환은 같은 패턴이 반복되는 영역. AI에 단순히 Figma 화면을 넘기면 일관성 없는 마크업이 나오기 쉬움. 네이버파이낸셜은 이미 디자인 토큰과 컴포넌트 체계가 잡힌 디자인시스템을 운영 중이라, AI에게 우리 시스템의 컴포넌트와 사용 규칙을 명시적으로 알려주면 결과가 달라진다고 보고 그 가설을 직접 시도.

해결 / 접근

• 디자인시스템 인프라: 디자인 토큰 + 디자인 시스템 컴포넌트 체계가 자동화의 출발점
• Code Connect: Figma 디자인 컴포넌트와 코드 컴포넌트를 매핑 — AI가 어떤 코드 컴포넌트로 변환할지 알 수 있는 다리
• instruction: AI에게 컴포넌트 사용 규칙·제약을 별도 지시문으로 전달
• 결과: 사전 준비(Code Connect + instruction)를 갖추면 FE 개발자가 이어받을 수 있는 수준의 마크업 생성

결과 / 참고

• 마크업 자동 생성 후 실제 개발 경험 공유 — 품질 편차와 아쉬운 점 동반
• 현실 개발 환경에서 적용 방법론은 추가 논의 필요
• NAVER ENGINEERING DAY 2025 (10월) 세션
• 발표 영상: https://d2.naver.com/helloworld/3442203
• 대상: AI를 이용한 마크업·디자인 자동화에 관심 있는 FE 개발자