code-connect

디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화 (새 탭에서 열림)

디자인 시스템과 AI의 결합은 단순한 도구의 조합을 넘어 프론트엔드(FE) 개발의 마크업 작업 방식을 근본적으로 혁신하고 있습니다. 네이버파이낸셜은 체계적으로 구축된 디자인 시스템을 기반으로 AI를 활용해 마크업 과정을 자동화함으로써 반복적인 코딩 시간을 단축하고 개발 효율성을 극대화했습니다. 다만, AI가 생성한 결과물을 실무에 즉시 투입하기 위해서는 디자인 토큰의 정교한 관리와 개발자의 세밀한 조정 작업이 반드시 병행되어야 한다는 점을 시사합니다. **네이버파이낸셜 디자인시스템의 근간: 토큰과 컴포넌트** * 디자인 시스템의 핵심인 '디자인 토큰'을 통해 색상, 간격, 폰트 등의 시각적 요소를 정의하고 디자이너와 개발자가 동일한 언어를 사용하도록 환경을 구축했습니다. * 재사용 가능한 UI 컴포넌트 단위를 명확히 정의하여, AI가 일관성 있는 코드를 생성할 수 있는 구조적 토대를 마련했습니다. * 단순한 UI 라이브러리를 넘어, 디자인 시스템 자체가 AI가 학습하고 참조할 수 있는 '신뢰할 수 있는 단일 소스(Single Source of Truth)' 역할을 수행합니다. **AI 마크업 효율을 극대화하는 Code Connect와 인스트럭션** * Figma의 'Code Connect' 기능을 활용해 디자인 도구 내의 컴포넌트와 실제 리액트(React) 코드를 직접 연결하여 AI가 맥락에 맞는 코드를 제안하도록 설계했습니다. * 디자인 시스템의 고유한 규칙과 코딩 컨벤션을 담은 상세한 '인스트럭션(Instruction)'을 AI에게 제공함으로써, 범용적인 코드가 아닌 팀의 표준에 부합하는 결과물을 얻어냈습니다. * 이 과정을 통해 개발자는 빈 화면에서 시작하는 대신, AI가 생성한 초안을 바탕으로 비즈니스 로직 구현에 더 집중할 수 있게 되었습니다. **현실적인 개발 도입 과정에서의 한계와 극복** * AI가 존재하지 않는 컴포넌트를 만들어내거나 잘못된 속성을 사용하는 '할루시네이션(환각)' 현상이 여전히 발생하여 개발자의 검토 과정이 필수적입니다. * 복잡한 레이아웃이나 고도의 인터랙션이 포함된 화면의 경우, AI가 단번에 완벽한 마크업을 생성하기 어렵다는 점을 확인했습니다. * 마크업 자동화가 성공하기 위해서는 단순히 AI 툴을 쓰는 것을 넘어, 디자인 시스템의 코드 품질과 문서화 수준이 먼저 뒷받침되어야 함을 실증했습니다. **마크업 자동화 이후의 FE 개발자 역할 변화** * 과거에 직접 태그를 입력하고 스타일을 잡던 수동적인 마크업 작업의 비중이 줄어들고, 생성된 코드를 조립하고 검증하는 '오케스트레이터'로서의 역할이 강조됩니다. * 단순 반복 작업에서 벗어나 더 복잡한 비즈니스 문제 해결과 사용자 경험(UX) 고도화에 개발 자원을 투입할 수 있는 환경이 조성되었습니다. * 결과적으로 AI는 개발자의 대체제가 아니라, 디자인 시스템이라는 약속된 규칙 위에서 함께 협업하는 강력한 동료로서 기능하게 됩니다. 성공적인 AI 기반 개발 환경을 구축하려면 디자인 시스템을 단순한 가이드가 아니라 **AI가 읽을 수 있는 데이터 구조**로 정교화하는 선행 작업이 가장 중요합니다. AI에게 맡길 영역과 개발자가 직접 제어할 영역을 명확히 구분하고, 코드 리뷰 단계를 강화하여 코드 품질을 유지하는 전략이 권장됩니다.

크런치롤이 개발자 (새 탭에서 열림)

글로벌 애니메이션 스트리밍 서비스인 크런치롤(Crunchyroll)은 15개의 플랫폼과 12개의 언어를 지원하는 복잡한 환경 속에서 디자인 일관성을 유지하기 위해 '유니버설 디자인 시스템(Universal Design System)'과 피그마의 '개발 모드(Dev Mode)'를 적극 도입했습니다. 과거 인수합병 과정에서 쌓인 파편화된 워크플로우와 기술 부채를 정리함으로써, 디자이너와 엔지니어 간의 협업 효율을 극대화하고 사용자에게 통일된 브랜드 경험을 제공하게 되었습니다. 이번 전환은 단순히 도구를 바꾼 것을 넘어, 복잡한 다중 플랫폼 환경에서 제품의 출시 속도와 품질을 동시에 잡는 전략적 선택이었습니다. **다중 플랫폼 환경에서의 복잡성과 레거시 문제** * 크런치롤은 웹, 모바일뿐만 아니라 게임 콘솔, 스마트 TV 등 9개의 거실용 기기를 포함해 총 15개의 플랫폼을 지원하며, 1,500만 명 이상의 글로벌 팬들에게 서비스를 제공합니다. * 과거에는 각 플랫폼별로 개별적인 디자인 시스템(iOS, Android, tvOS 등)을 운영했으며, 이는 협업 과정에서 심각한 불일치와 혼선을 초래했습니다. * 기존 워크플로우는 Jira 트리거와 Zeplin에 의존했으나, 아트보드 로딩에만 4~5분이 소요되거나 시차 문제로 인해 최신 디자인 사양을 실시간으로 공유하기 어려운 구조였습니다. **디자인 시스템을 통한 효율성 극대화: "식재료 준비(Meal Prepping)"** * 디자인 시스템을 '식재료 미리 준비하기'에 비유하여, 매번 새로운 기능을 만들 때마다 처음부터 설계하는 것이 아니라 준비된 컴포넌트를 재사용하여 리소스를 절약합니다. * 엔지니어링의 DRY(Don't Repeat Yourself) 원칙을 디자인에도 적용하여 중복 컴포넌트를 제거하고 일관된 타이포그래피, 그리드, 간격 시스템을 구축했습니다. * 이러한 표준화는 사용자의 인지 부하를 줄여 구독 전환율을 높이는 동시에, 제품 관리자가 아이디어를 빠르게 검증할 수 있는 속도 경쟁력을 제공합니다. **개발 모드(Dev Mode)를 활용한 협업 프로세스의 혁신** * 개발자가 피그마 링크를 통해 '개발 준비 완료(Ready for development)' 페이지에 접속하면, 수많은 아이데이션 과정은 생략하고 오직 구현에 필요한 최신 스펙과 코드 값만 바로 확인할 수 있습니다. * 기존에 5분씩 걸리던 데이터 파싱 속도가 획기적으로 개선되어, 엔지니어가 특정 결제 플로우나 컴포넌트의 상세 정보를 찾는 데 드는 시간을 대폭 단축했습니다. * 코드 커넥트(Code Connect) 베타 버전을 통합하여 디자인 시스템의 컴포넌트와 실제 코드를 더 밀접하게 연결함으로써 디자인과 코드 간의 괴리를 좁히고 있습니다. **디자인 시스템 운영의 철학과 변화 관리** * 디자인 시스템은 팀을 지원하기 위한 도구일 뿐, 프로세스의 포로가 되어서는 안 된다는 철학 아래 지속적인 교육과 온보딩 워크숍을 진행했습니다. * 과거의 복잡한 QA 단계나 불필요한 태그 시스템을 과감히 삭제하고, 개발자가 필요한 정보에 직접 접근할 수 있는 자율적인 환경을 조성했습니다. * 전문화된 디자인 원칙(계층 구조, 그리드 등)을 준수하는 '좋아 보이는 디자인'과 엣지 케이스까지 고려한 '잘 작동하는 디자인'을 디자인 성공의 핵심 지표로 삼고 있습니다. 디자인 시스템은 한 번 구축하고 끝나는 것이 아니라 팀의 성장에 맞춰 계속 진화해야 합니다. 크런치롤의 사례처럼 도구의 기능을 활용해 불필요한 단계를 제거하고, 개발자와 디자이너가 동일한 언어로 소통할 수 있는 환경을 만드는 것이 복잡한 글로벌 서비스를 운영하는 핵심 전략입니다.