이 회색이랑 저 회색, 뭐가 달라요?
[디자인 시스템 구축기] 1부:
1. 4개월, 5,000장의 화면, 그리고 남겨진 디자인 부채
작년 8월부터 12월까지, 5,000장이 넘는 화면을 갈아엎는 처절한 고민 끝에 38명의 테스터를 대상으로 베타 앱을 선보였습니다. 1분 1초의 시간도 아끼고자 스토어 심사 대신 APK를 직접 배포한 전투적 Lean의 현장 속에서 기획과 디자인, 코드를 동시에 엎는 초단기 재작업이 일상이었습니다.
기획 등 타 업무를 병행하며 1인 디자인 체제까지 오롯이 감당해야 했던 제게 디자인 시스템은 사치였죠. 시스템을 구축할 시간에 화면 하나라도 더 쳐내는 것이 곧 생존이라 믿었기에, 저는 시스템 대신 스포이드를 들었습니다. 자주 쓰이는 색상은 눈대중으로 찍어 바르고, 폰트 크기는 그저 화면마다 안정적으로 보이는 수치를 감각에 의존해 조절했습니다. 생산성을 위해 시스템을 저버린 순간, 거대한 부채의 스노우볼은 구르기 시작했습니다.
당시 작업 공간의 극히 일부를 공개합니다2. 가속화되는 생산성 저하와 'V0.1 시스템'의 긴급 수혈
하지만 제가 간과한 부분이 있었습니다.
디자인은 감각의 영역이었을지 몰라도, 구현은 철저한 규칙의 영역이라는 것이었습니다. 제가 간과한 이 엄중한 사실은 곧 개발팀의 병목 현상으로 나타났습니다. 제각각인 색상값과 폰트 규격, 정의되지 않은 컴포넌트의 상태값과 여백 규칙 사이에서 개발팀은 코드를 '개발'하는 것이 아니라 '눈대중으로 구현'해야 하는 당혹스러운 상황에 직면했습니다.
결국 속도를 위해 포기했던 것들이 역설적으로 우리의 발목을 잡고 있음을 깨달았습니다.
더 이상의 지체는 공멸이라는 판단 아래, 저는 이 악순환의 고리를 끊기로 했습니다. 당장 현장에 적용 가능한 핵심 요소 위주의 'V0.1 MVP 디자인 시스템'을 구축하고 전체 화면에 수혈하는 전면 재작업에 착수했습니다.
V0.1 MVP 디자인 시스템하지만 뒤늦은 수혈의 대가는 가혹했습니다. 시스템은 미래의 효율을 보장할 뿐, 과거의 부채를 지워주는 마법이 아니었습니다. 누적된 ‘QA 부채’는 상상 이상으로 비대했습니다. 폭주하는 일정 속에서 개발팀은 기존 레거시 코드를 수정할 리소스가 없었고, 신규 화면에서조차 디자인 시스템이 제대로 이식되고 있는지 모니터링하기 어려울 만큼 현장은 혼란스러웠습니다. 시스템 도입이라는 신규 과업이 기존의 파편화된 환경과 충돌하며 도리어 혼란을 가중시킨 것입니다. 결국 시스템 없는 질주 끝에 디자인 완성도는 백로그 후순위로 밀려났고, 서비스의 시각적 일관성은 통제를 벗어났습니다.
디자인 QA을 제외한 '임시' QA가 무려 147건+ 이었던 치열한 현장 3. 피그마에선 완벽했는데... 텍스트 스타일의 함정
가장 먼저 터진 문제는 텍스트 스타일이었습니다.
피그마에서는 분명 Title 1, 'Body 2 같은 이름으로 스타일을 묶어두었습니다. 여기엔 폰트 크기뿐만 아니라 자간, 행간, 굵기, 용도가 하나의 세트로 정의되어 있었죠. 저는 당연히 개발 환경에서도 이 세트가 그대로 구현될 거라 믿었습니다.
그러나 그것은 플랫폼 고유의 렌더링 방식과 단위에 대한 이해가 부족했던 저의 오해였습니다. 개발 환경에서는 폰트 크기만 스타일 변수로 관리되고 있었고, 자간이나 행간은 운영체제의 기본값으로 방치되어 있었습니다. 피그마의 수치가 코드로 치환될 때 발생하는 간극을 정의하지 않은 결과였습니다.
결과는 참담했습니다. 피그마에서 두 줄로 완벽하게 떨어지던 문장은 개발 화면에서 세 줄로 넘어가 오버플로우됐고, 벌어진 자간은 가독성을 현저히 떨어뜨렸습니다. 컴포넌트와 텍스트가 겹치는 문제까지 발생했죠. 이는 단순한 화면 요소의 색감이 조금 다른 심미성의 문제가 아니었습니다. 텍스트의 붕괴는 곧 정보 전달의 실패였고, 서비스의 첫인상을 결정짓는 고객 경험(UX)에 치명적인 균열을 내는 일이었습니다.
실제 현장에서 터진 UI 긴급 수혈 대화 내용 중 일부4. 베타테스터가 남긴 선물, 그리고 '살아있는 시스템'을 향한 여정
저는 뼈저리게 깨달았습니다. 초기에 시스템 구축 시간을 아낀 대가는 공짜가 아니었습니다. 그것은 결국 미래의 시간을 고금리로 가불해 수습에 쏟아붓는 더 큰 비용으로 돌아왔습니다. 무작정 빨리라는 속도의 역설 속에서, 저는 단순히 문서로만 존재하는 가이드가 아닌, 실무에서 ‘진짜 사용되는' 시스템의 절실함을 배웠습니다.
그리고 베타 앱에서의 이 처참한 실패와 레슨런이 선물이라고 생각했습니다. 본 앱 출시에서는 같은 시행착오를 반복하지 않을 기술적, 프로세스적 무기를 얻었기 때문입니다.
이제, 기획과 디자인을 동시에 소화하는 1인 '기자이너'로서, 제가 어떻게 진짜 사용되는 디자인 시스템을 구축했는지 그 내밀한 이야기를 시작해보려 합니다.
감이 아닌 수학으로 정의하는 HSL 컬러 시스템
실무 효율을 극대화하는 피그마 베리어블 활용법
개발팀과의 완벽한 핸드오프를 위한 스토리북 바이브코딩
그리고 1인 체제에서 가성비를 극대화하기 위해 적극적으로 사용한 플러그인과 클로드 코드 팁 등…
이 글은 작업 아카이빙을 목적으로 한 저의 일기장이지만, 또 어딘가에서 또 치열하게 고민하고 있는 기자이너에게 도움이 되었으면 합니다. 2부에서 만나요!