살아있는 디자인 시스템 구축의 실패
서비스를 만들어 가며 디자인 시스템 구축하는법
한윤석 (두블링 DOBLING, UI/UX 디자이너)
안녕하세요, 오랜만에 글을 작성합니다.
그동안 글이 뜸했네요 ㅠ 우선순위에서 밀리다가 안쓰다보니 계속 안쓰기 되었던 것 같습니다.
이제는 조금 뒤면 4년차 디자이너가 되는 한윤석입니다. 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 제가 경험한 디자인 인사이트를 업로드 합니다.
회사에서 서비스 초기에 구축할때 컬러와 폰트만 간략하게 피그마로 가이드를 잡아놓고 시작했는데요.
폰트는 PureWhite부터 Gray900 Black까지 설정하고 폰트도 사용하는 폰트들을 다양하게 설정해놓았습니다.
약간의 컴포넌트들도 정의해 놓고 시작하였습니다.
하지만 여러명의 디자이너가 워크 프로세스나 가이드 없이 폰트가 변경되거나 다양한 작업을 하며 새로운 컴포넌트가 추가되고 컴포넌트가 바뀌고 하다보면 디자인 시스템이 뒤죽박죽이 되거나 현재 서비스 프로덕션에 맞춰서 가이드가 완성되지 않더라구요.
일종의 시스템 구축의 실패를 겪은거죠!
그래서 실제 코드에서 디자이너들이 설정한 컴포넌트와 토큰화에 맞게 공통컴포넌트가 설정되지 않은 경우가 있고 빵꾸가 많게 됩니다.
그래서 처음에 워크프로세스를 잘 정의하고 가이드를 계속 작업마다 업데이트해가며 추가하는게 중요한데요.
속도냐, 시스템이냐? 개발자와 함께 디자인 시스템 구축하기 (실무 가이드)
실제 서비스를 만들며 서비스가 생존하고 이게 맞는 서비스인지 검증이 필요합니다. 오래갈 서비스를 만들지도 않는데 많은 에너지를 들여서 디자인 시스템을 구축하고 서비스를 만드는건 비효율적입니다.
그래서 애자일 하게 개발하더라도 그 과정 해서 시스템을 추가하며 구축해나가는게 중요합니다. 그래야 나중에 유지보수도 편해집니다.
"당장 출시해야 하는데 언제 시스템을 만드냐?"라는 질문에 대한 답은 '점진적 도입 전략'과 '개발자와의 소통'에 있습니다.
디자인 시스템은 완벽하게 완성된 문서가 아니라, 디자이너와 개발자가 함께 만들어가는 '살아있는 약속'입니다.
1. 현실적인 접근: 뼈대부터 세우기
서비스 초기에는 속도가 중요합니다. 처음부터 완벽한 시스템을 구축하려다 출시가 늦어지면 의미가 없습니다. 다음 순서로 시작해 보세요.
최소한의 약속 (필수): 첫 주에 폰트(Text/Body 등)와 컬러(Color/Primary 등)의 Semantic 토큰 이름만이라도 정의하고 개발자와 공유합니다. 이 부분이 서비스 전체에 가장 많이 사용되므로, 나중에 갈아엎는 비용이 가장 큽니다.
작업하며 쌓아가기 (점진적): 모든 컴포넌트를 미리 만들지 마세요. 오늘 '로그인 버튼'을 만들었다면, 피그마에서 바로 [Component]로 등록하고 개발자에게 "이거 공통으로 빼주세요"라고 요청합니다. "두 번 이상 쓰이면 시스템화한다"는 규칙을 만드세요.
2. 개발자와의 동기화: 약속된 언어 사용
디자인 시스템 구축의 핵심은 피그마의 '이름'과 개발자의 '코드 변수 이름'을 일치시키는 것입니다.
네이밍 컨벤션 통일: 디자이너는 Btn/Primary, 개발자는 btnPrimary 식으로 규칙을 정하고 철저히 지킵니다.
상태(Variants) 공유: 컴포넌트를 정의할 때 Default, Hover, Disabled, Focus 같은 상태(Variants)를 명확히 보여줘야 개발자가 코드를 한 번에 구현할 수 있습니다.
Dev Mode 활용: 피그마의 Dev Mode나 Variables2Code 같은 플러그인을 활용하여, 말 대신 데이터로 소통합니다. "토큰 업데이트했으니 코드 당겨가세요" 한마디로 끝내는 것이죠.
3. 시스템은 '문화'입니다
결국 디자인 시스템은 기술적인 문제 이전에 팀의 문화 문제입니다.
매 작업마다 "이번에 새로 추가된 공통 컴포넌트는 이거예요", "이 네이밍으로 등록했어요"라고 소통하는 번거로운 과정을 거쳐야 합니다. 이 과정은 '추가 업무'가 아니라 '미래의 유지보수 비용을 줄이는 투자'입니다.
이 과정을 통해 서비스가 성장했을 때, 디자이너는 단순 반복 작업이 아닌 더 큰 비즈니스 문제 해결에 집중할 수 있게 됩니다.
다음글에는 디자인 시스템 중 폰트에 대해서 다뤄보도록 하겠습니다.
