
Background
디자인 시스템은 대기업이나 디자인 리소스가 풍부한 팀에서만 필요한 걸까요?
저는 라이클컴퍼니에서 디자인 시스템 ‘LYTEM’을 구축하며, 오히려 빠르게 달리는 스타트업일수록 ‘시스템’이 더 절실하다는 걸 느꼈습니다.
제가 왜 디자인 시스템을 만들기로 했는지, 어떤 과정을 거쳐 구축했는지, 그리고 그 과정에서 어떤 문제들을 마주했는지를 정리했습니다.

초기 디자인의 UI 파편화 사례 또는 컴포넌트 중복 예시
왜 디자인 시스템을 구축하기로 했을까?
라이클에 합류했을 때, 팀은 빠르게 성장하고 있었고 디자이너도 하나둘 늘어나고 있었습니다. 하지만 작업 방식은 여전히 각자의 손에 맡겨진 상태였습니다. 디자인 파일은 디자이너마다 스타일이 달랐고, 같은 UI라도 매번 새롭게 만들어야 했습니다.
어떤 버튼은 둥글고, 어떤 버튼은 그림자가 없었고, 어떤 버튼은 아예 Figma 컴포넌트가 아니었습니다. 이렇게 쌓인 ‘작은 차이들’은 협업 과정에서 반복적인 피드백과 수정을 낳았고, 그 과정에서 디자이너는 번아웃에 가까워졌고, 개발자와의 커뮤니케이션도 점점 피로해졌습니다.
무엇보다도, 제품을 사용하는 사람에게 전달되는 경험은 매 페이지마다 달라지고 있었습니다.
기존 작업 과정에서 겪어야 했던 경험 차이
Goal
저에게는 가장 중요한 2가지의 목표가 있엇습니다.
디자인 시스템은 단지 컴포넌트 정리를 위한 도구가 아니라,
팀 전체가 같은 기준으로 일하고, 더 빠르게 실험하고, 불필요한 커뮤니케이션을 줄여주는 기반 구조라고 생각했습니다.
Process
1. 리서치 및 이해 (Research & Understand)
가장 먼저 한 일은 ‘우리가 지금 무엇을 만들고 있는지’를 이해하는 것이었습니다.
기존 UI를 전부 점검하고, 중복된 요소들과 자주 쓰이는 패턴들을 하나씩 정리했습니다.
그리고 비슷한 B2C SaaS 제품들의 디자인 시스템을 살펴보며, 우리가 놓치고 있던 기준들을 체크했습니다.
2. 디자인 원칙 수립 (Establish Design Principles)
컴포넌트를 만들기에 앞서, 우리가 어떤 기준을 따라야 할지부터 정했습니다. LYTEM은 아래 세 가지를 가장 중요한 원칙으로 삼았습니다.
라이템 디자인 원칙
3. 기본 스타일 정의 (Define Basic Necessities)
타이포그래피, 컬러 토큰, 아이콘, 레이아웃 시스템 등, 모든 화면에 공통으로 적용되는 스타일 요소들을 먼저 정리했습니다. 디자인 시스템의 ‘파운데이션’이자, 일관성을 만드는 가장 중요한 뼈대라고 생각했습니다.

라이템 기본 스타일 정의
4. 우선순위 기반 컴포넌트 정리 (Organize Components with Prioritization)
버튼, 입력창, 모달 등 가장 자주 쓰이는 컴포넌트부터 정리했습니다. 일단 필요한 것부터 만들고, 점차 확장하는 방식으로 접근했습니다. 중요한 건 모든 컴포넌트가 다양한 상황에서도 ‘예측 가능하게’ 동작하는 것이었습니다.

컴포넌트 정리
5. 품질 검수 및 컴포넌트 점검 (Review)
디자인 시스템은 예쁘게 정리하는 게 목적이 아니라, 실제로 잘 작동해야 합니다.
그래서 만든 컴포넌트들이 Auto layout이나 Variants 설정에서 문제없이 동작하는지, 마스터/인스턴스 관계가 잘 유지되는지, 스타일 토큰이 바뀌었을 때 전체에 반영되는지를 꼼꼼히 점검했습니다.

패이지 레벨에서의 컴포넌트
6. 개발 연동 및 반복 개선 (Handoff & Continuous Iteration)
엔지니어링 팀과 협업하여 Storybook 상 적용 여부 확인
실제 프로덕트 화면에서 사용되며 발생한 피드백을 기준으로 개선
디자인 시스템은 문서화 후 Notion 및 Figma 라이브러리로 배포해 팀원 전체가 쉽게 활용 가능하게 했습니다

피그마 및 노션 문서화 작업
LYTEM: 라이클 디자인 시스템

Foundation

Input components

Display components

Feedback components

Navigation components
정리하며
스타트업에서 디자인 시스템을 구축하는 건 ‘정리’가 목적이 아닙니다. 혼란을 줄이고, 협업을 더 빠르게 만들고, 무엇보다 사용자에게 더 좋은 경험을 주기 위한 팀의 공통 언어를 만드는 일이라고 생각합니다.
LYTEM을 만들면서 팀의 속도는 더 빨라졌고, 새로운 기능이 나올 때마다 디자인과 개발이 더 빠르게 맞춰갈 수 있었습니다. 무엇보다, 제품 전반에서 브랜드 경험의 일관성이 눈에 띄게 좋아졌습니다. 스타트업일수록 시스템은 사치가 아니라 생존을 위한 도구입니다.
LYTEM은 그걸 증명한 좋은 사례라고 생각합니다.