목 차
•
Sprint Link
Context
프로젝트 개요
현재 R&D 본부의 제품 제작 프로세스에는 여러 가지 효율 저해 요인이 존재합니다.
그중 핵심적인 문제는 디자인 시스템을 효과적으로 활용하기 어렵다는 점입니다. 디자인 시스템의 활용이 어려워 일원화되어야 할 컴포넌트 제작 공정이 명확한 기준 없이 진행되면서 품질, 효율성, 그리고 협업에도 부정적인 영향을 미치고 있습니다.”
Figma 디자인 시스템의 학습 비용이 높음.
•
Figma 디자인 시스템의 방대한 분량과 프로퍼티 설정을 위한 배리언트가 많아 학습 및 유지 관리 비용이 큽니다.
•
현재 컨텍스트 목차의 경우 링크가 유실되는 등 유지보수가 필요한 구석이 많음
프론트엔드 디자인 시스템인 Storybook을 시각적으로 파악하기 어려움
•
Storybook에서 컴포넌트를 코드로만 식별해야 하므로 정확성이 떨어지고, 시각적으로 탐색할 수 없으니 제작 시간이 증가합니다.
프론트 작업자가 기능을 제작하는 시간이 증가함 (비효율적인 컴포넌트의 발생)
•
유사한 기능을 반복적으로 제작하면서 생산성이 저하되고 관리 부담이 커집니다.
[기능 수정 시에는 공수가 배로 들어가는 중입니다.]
해결 방안
디자인 토큰 정의
1.
현재 디자인 토큰은 재각각 정의되어 있습니다. Foundation으로 가장 기초적으로 사용할 수 있는 디자인 토큰을 정의합니다.
Figma DS 개선
1.
가이드라인 수립
•
방대한 Figma 디자인 시스템의 문제는 한눈에 컴포넌트를 확인할 수 있는 Docs가 없다는 점입니다.
이를 해결하기 위해 누구나 쉽게 정보를 파악할 수 있도록 명확한 사용 가이드와 컴포넌트 Docs를 제작하여 시스템을 설정합니다.
2.
노후화된 컴포넌트 수리
•
현재 제작된 컴포넌트들은 레거시와 신규 제작 컴포넌트가 혼재되어 있습니다. 이로인해 디자이너는 UI를 조형하는데 있어서 매번 불필요한 작업들을 진행합니다. (ex. 레거시 컬러 변경 / UI 가이드 임의 수정)
•
레거시 컴포넌트의 구조로 인해 프론트엔드 작업자가 시안과 다르게 임의 수정 작업을 진행하는 경우가 빈번합니다. (ex. 레거시 리스트에 삽입되어 있는 체크 박스의 영역 가이드)
3.
스토리북 적재를 위한 일원화된 정리 방식
•
스토리북을 구축하기 위해서는 Figma의 DS 정리 방식이 프론트 엔드와 동일하게 변경되어야 합니다.
아
Graphic Library 구축
1.
제작 가이드라인 수립
•
현재 내부 그래픽 제작 로직은 제대로 확립된 것이 없습니다. 기준이 될 수 있는 가이드라인 문서를 제작합니다.
2.
에셋 카테고리 제작
•
그래픽 에셋은 액션을 기준으로 분류될 수 있도록 체계를 수립합니다.
StoryBook 구축
1.
디자인 시스템 컴포넌트 적재하기
•
Figma DS(IDS)를 기준으로 구조, 분류 체계를 계승하여 스토리북에 그대로 적재합니다.
2.
컴포넌트 파악 프로세스 구축 (프론트엔드 팀)
목표 수립
Figma DS 전체 개선
그래픽 라이브러리 구축
스토리북 구축
기대효과
1.
개발 시간 단축 및 폭발적인 생산성 향상
• 같은 기능의 중복 제작이 줄어들어 개발 시간과 비용이 절감됩니다.
• 중복된 유사 기능의 별도 수정이 필요 없으므로 유지보수와 관리가 용이해지고, 관리 부채가 감소합니다.
2.
디자인 시스템 이해도 향상
• Figma와 Storybook 간의 통합적 이해가 쉬워져, 팀의 전반적인 디자인 시스템 파악 시간이 줄어듭니다.
• 디자이너와 개발자 간의 소통이 원활해져 디자인과 개발의 일관성을 유지할 수 있습니다.
3.
시각적 접근성 개선
• Storybook을 시각적으로 파악할 수 있게 되어, 코드에 의존하지 않고도 컴포넌트의 상태와 스타일을 명확히 확인할 수 있습니다.
• 이를 통해 개발자는 더 빠르고 쉽게 컴포넌트를 식별하고 사용할 수 있습니다.
4.
일관성 있는 기능 구현
• 유사한 기능을 하나의 일관된 컴포넌트로 재사용함으로써 디자인과 기능의 일관성이 높아집니다.
• 코드의 통합 및 표준화로 기능의 품질이 개선되고, 최종 사용자에게 더 나은 사용자 경험을 제공합니다.
5.
팀 협업 향상
• 디자이너와 개발자 간의 협업이 용이해지며, 공통의 디자인 언어와 시각적 자산을 공유함으로써 더 원활한 커뮤니케이션이 가능해집니다.
• 반복적인 업무가 줄어들고 팀 전체의 효율성이 향상되어 프로젝트 진행 속도가 빨라집니다.
Epic Board
진행 현황
Search