안녕하세요. LINE Plus ABC Studio에서 일본 음식 배달 서비스 Demaecan(出前館, 이하 데마에칸)의 디자인을 담당하고 있고, 사용자의 다양한 목소리를 담을 수 있는 ABC User Feedback도 함께 만들고 있는 오관식입니다. 이번 글에서는 디자이너와 웹 프런트엔드 엔지니어 간의 디자인 리소스 관리를 일원화하기 위해 디자인 시스템을 만들어서 코드에까지 연결한 작업을 소개하고, 그 결과물을 ABC User Feedback에서 어떻게 활용하고 있는지 말씀드리고자 합니다.
ABC User Feedback 프로덕트의 일반적인 소개는 앞서 발행된 사용자의 피드백을 잘 관리하고 활용하기 위한 서비스, ABC User Feedback을 참고하시기 바랍니다.이 글이 특히 규모가 작은 조직이나 MVP(minimum viable product)를 빠르게 검증해야 하는 프로덕트 메이커 분들에게 도움이 되길 바라며 시작하겠습니다.
디자인 시스템의 정의와 도입하기 어려운 이유
디자인 시스템은 디자인 원칙과 규격, 재사용 가능한 UI 패턴과 컴포넌트, 코드 등을 전체적으로 포괄하는 집합체를 말합니다. 조직의 운영 스타일이나 방향에 따라 다르게 적용될 수 있어서 단순히 스타일 가이드나 패턴 라이브러리로서의 역할만 담당할 수도 있습니다.
디자인 시스템의 주 목적은 제품을 만들 때 디자인 관점에서의 표준 규칙을 설정해 작업을 보다 효율적이고 일관적으로 수행할 수 있도록 지원하는 것입니다. 이를 통해 보다 쉽고 빠르게 프로젝트를 확장할 수 있으며 각 조직의 목표에 맞게 제품 디자인을 쉽게 조정할 수 있습니다.
그동안 디자이너의 관점에서 현실적으로 디자인 시스템을 도입하기 어려웠던 이유는 아래와 같습니다.
- 개발과의 단절: 개발 팀이 여럿인 경우 디자인 관점에서는 통일할 수 있지만 각 팀의 코드는 달라서 디자인 시스템을 도입해도 전체 효율은 그다지 올라가지 않는 경우가 있습니다.
- 초기 설정의 어려움: 프로덕트의 방향이나 목적에 따라 필요한 사양이 달라지기 때문에 디자인 시스템 구축 시 기본 컴포넌트의 범위를 어디까지 정해야 할지 어렵습니다.
- 유지 보수: 디자인 시스템에 너무 많은 컴포넌트를 포함할 경우 갱신이나 수정 시 많은 리소스가 필요합니다.
이번 글에서는 위 문제 중 '개발과의 단절'과 '유지 보수' 관점에서의 어려움을 어떻게 해결했는지 살펴보고, 그 결과물인 3단계 디자인 시스템과 적용 사례를 소개하겠습니다.
(디자이너 한 명과 웹 개발자 두 명으로 가능한) 디자인 시스템 개발 방향 설정
디자인 시스템은 장점이 충분한 시스템이지만 리소스는 늘 한정돼 있기에 디자인 시스템 구축에는 항상 어려움이 따릅니다. 제 경우 두 명의 프런트엔드 엔지니어와 한 명의 디자이너라는 최소한의 리소스만 활용할 수 있었는데요. 이 정도의 리소스로 디자인 시스템을 만든다면 어떤 방향으로 제작하면 좋을지 고민했고, 논의 결과 최소한의 핵심 컴포넌트 위주로 빠르게 검증할 수 있는 디자인 시스템을 만들자는 결론이 나왔습니다.
Figma, Storybook과 이 둘을 연계하는 토큰으로 구축하는 디자인 시스템
저희는 디자인부터 개발에 이르기까지 리소스를 일관적으로 관리할 수 있도록 Figma와 Storybook을 도입한 뒤 이 둘을 연계하기 위한 토큰을 설계했습니다.
여기서 토큰이란 디자인의 핵심 스타일 속성을 추상화해 코드로 표현한 기본 단위를 말합니다. 이 토큰을 이용해 컴포넌트의 색상과 글꼴 크기, 여백, 그림자와 같은 디자인 속성을 통일하고 일관적으로 관리할 수 있습니다(디자인 토큰에 대
English (US) · 