똑똑한개발자 디자인시스템 개선기
'우리한테 디자인 시스템이 있었다고?' 라는 충격적인 답변에서 시작합니다
똑똑한개발자 디자인 시스템, 어떻게 하면 잘 쓸 수 있을까?
안녕하세요. 사랑받는 IT 프로덕트의 첫걸음, 똑똑한개발자 입니다.
오늘은 상반기 전체 타운홀에서 진행된 AKA. 똑개 디자인 시스템, 이대로 괜찮은가? 세션 내용을 공유하려고 합니다.
손 빠르고 센스 있는 디자이너 찬호님께서 멋지게 발표해주신 이야기를 지금부터 시작합니다!!
(충격실화) '똑개에 디자인 시스템이 있었어요?'
얼마 전, 저희 시스템팀에서 전사 설문을 진행했어요.
주제는 바로 '디자인 시스템 사용 현황'이었는데요.
똑개팀이 오랜 시간 공들여 만들고 다듬어온 시스템이라, 당연히 모두 잘 활용하고 있을 거라고 생각했어요.
그런데 설문 결과를 열어본 순간, 예상치 못한 답변들이 쏟아져 나왔어요..
개발팀이 디자인 시스템을 활용하는 방법
똑개 개발자의 디자인 시스템 사용 방법
개발자들의 경우, 주로 *똑토큰을 이용해 프로젝트 초기 세팅을 진행하고,
단순한 컬러나 타이포 수정 요청이 오면 역시 똑토큰을 통해 작업한다고 했어요.
그렇다 보니, 정작 디자인 시스템 전체를 활용하는 빈도는 매우 낮았고,
심지어 “디자인 시스템이 있었어요?”라는 충격적인 답변까지 나왔습니다. (이건 꿈이야)
*똑토큰에 대한 내용은 다음 편에서 더욱 자세히 다루겠습니다!
디자인팀이 디자인 시스템을 활용하는 방법
똑개 디자이너의 디자인 시스템 사용 방법
디자이너분들도 라이도, 체크박스, 버튼 등 아주 기본적인 단위 정도만 가져와 활용하고 있었어요.
컬러나 타이포 정도만 참고하고, 컴포넌트는 그때그때 새로 만들어 사용하는 경우가 많았죠.
또는 문제가 없었던 프로젝트의 시스템을 그대로 복사해 활용하기도 한다고 했어요.
한마디로, 똑개의 디자인 시스템은 시스템이라기보다 ‘샘플 모음’에 가까웠어요.
시스템이 존재하는데도 실제 프로젝트에서 활용되지 않고 있다면,
그 안에는 분명 근본적인 문제가 숨어 있다는 뜻이었죠.
디자인시스템이 더 불편해요!
직접 사용해보니, 불편할 수밖에 없는 이유가 있더라고요.
물론 디자인 시스템이 있으면,
심리적·물리적 부담 없이 신규 프로젝트를 시작할 수 있고
프로젝트 컬러나 타이포 수정 요청이 왔을 때 빠르게 대응할 수 있다는 장점이 있는데요.
그런데도 왜 실제로 잘 활용되지 않았을까요?
설문 결과를 통해 이유를 고민해보니, 그 답은 아주 명확하게 세 가지로 추릴 수 있었어요.
1. 쓸 수 있는 컴포넌트가 너무 적어요.
버튼, 체크박스, 컬러 세팅 등 최소 단위만 제공되다 보니, 실제 프로젝트에서 그대로 활용할 수 있는 범위가 너무 좁았습니다.
예를 들어 네비게이션 바가 필요할 때는 그냥 새로 만드는 게 더 빠르다는 의견이 많았어요.
2. 이름이 제각각이라 헷갈려요.
같은 컴포넌트를 디자인팀과 개발팀이 각기 다른 이름으로 부르고 있었는데요..!
어떤 분은 ‘라디오 버튼’이라고 검색했지만, 시스템에는 ‘선택 토글’이라고 적혀 있어 검색조차 되지 않는 상황이었죠.
개인이 부르는 이름도 제각각이고, 직무별로 통일되지 않은 언어 사용 때문에 혼란이 더 깊어졌어요.
3. 어디까지 바꿔도 되는지 기준이 없어요.
커스터마이징 범위가 명확하지 않아, 조금만 다른 요구사항이 생겨도 새로 만드는 일이 빈번했어요.
그 결과, 프로젝트마다 스타일이 미묘하게 달라지고 일관성이 깨지는 문제가 발생했어요.
이렇게 살펴보니,
단순히 시스템이 없어서가 아니라 시스템이 있어도 불편해서 안 쓰는 상황이었어요.
게다가 퍼포먼스 컴포넌트가 있더라도, 스타일 불일치로 인해 새로 만드는 일이 반복되면서 결국 시스템의 존재감은 점점 옅어지고 있었죠...
무너지지마.. 시스템쿤..
일관성? 유연성? 뭐가 먼저일까
이제 문제를 해결하려면 방향부터 정해야 했는데요.
"일관성을 극대화할까, 아니면 유연성을 보장할까?"라는 두가지 갈래길에 놓였어요.
설문 결과를 보면, 실무자분들 대부분이 일관성에 조금 더 무게를 두고 있었어요.
디자인시스템, 일관성 vs 유연성일관성 중시파의 주장
개발과 디자인이 1:1로 딱 맞아떨어져야 함
그래야 작업 효율이 오르고, 예측 가능성이 높아지며, 커뮤니케이션 비용도 줄어듦
특히 반복되는 작업에서는 많은 시간을 절약할 수 있음
유연성 중시파의 주장
에이전시 특성상, 프로젝트마다 클라이언트 요구가 모두 다름
모든 것을 고정해 버리면 창의성과 완성도가 떨어질 수 있음
변형할 여지를 남겨둬야 현장의 다양한 요구에 대응할 수 있음
여러분은 어떻게 생각하시나요?
양쪽 주장이 모두 매우 일리가 있었기 때문에,
어느 한쪽으로 결정을 내리는 과정이 더욱 어려웠어요.
앞으로 어떻게 개선하면 좋을지 고민한 끝에,
결론은 지금 당장 실무에 도움이 되는 방향으로 모아졌는데요.
모두를 만족시키는 완벽한 방법은 세상에 존재하지 않으니 ㅎㅎ
똑개팀은 실무 능률을 최대치로 끌어올리는 이원화 전략을 선택하게 됐어요.
디자인시스템의 이원화 전략이란?
먼저, 컴포넌트를 최소 단위와 최대 단위 두 가지로 나누는 것부터 시작했어요.
타이포그래피, 컬러, 버튼, 인풋 필드, 오버레이와 모달 등, 방대한 커스터마이징이 필요 없는 요소들을 하나로 묶었어요.
또, 로그인 폼, 페이지, 상품 카드처럼 클라이언트 요구에 따라 결과물이 천차만별인 컴포넌트들을 하나로 묶었어요.
하지만 헤더, 검색 기능, 오버레이와 모달 등
깔끔하게 이분화하기 어려운 컴포넌트에 대한 고민도 계속 이어졌는데요.
어디까지가 ‘보편적’ 컴포넌트일지, 수정 가능한 범위는 어디까지인지, 또 다양하게 디자인이 변형될 수 있는 사례를 개발자에게 어떻게 쉽게 전달할지에 대한 고민도 계속 이어졌죠.
결국, 빠른 실무 적용이라는 목표를 중심으로,
컴포넌트를 흔들리지 않는 뼈대와 현장에 맞게 바꿀 수 있는 살로 나누어 다음과 같은 전략을 모색했어요.
변형이 거의 없는 기초·중간 단위 컴포넌트: 철저하게 일관성 유지
변형 가능성이 큰 고급·페이지 단위 컴포넌트: 유연한 가이드 제공
지금 당장 할 수 있는것 부터 시작하자
방향이 정해졌으니, 이제 남은 것은 실행뿐!
개선 작업은 시급성과 난이도를 기준으로 나누어 세 단계로 진행하기로 했어요.
① 지금 바로 진행할 일
Figma 컴포넌트 다양성 확보 : 헤더/네비게이션, 캘린더, 검색 폼 등 요청이 많았던 컴포넌트를 추가하기
아이콘 라이브러리 통일: 명확한 아이콘 컴포넌트 정리와 Phosphor Icon으로 지정하여 중복과 혼란을 최소화하기
불필요한 페이지 정리: 예시 페이지는 필요한 것만 남기고 다이어트 중하기
상태별 속성 누락 방지: 활성·비활성, 에러 상태 등 놓치기 쉬운 속성을 기본 포함시키기
② 개발팀과 협력할 일
똑똑한개발자는 프로젝트 착수 단계부터 디자인팀과 개발팀이 협력하는 구조로 일하고 있기 때문에,
이번 디자인 시스템 개선도 개발팀과 함께 진행하고 있는데요!
반복 UX 패턴 시스템화: 로그인·회원가입 등 반복되는 UX 패턴을 시스템화하기
커스터마이징 가능 범위 정의: 디자이너와 개발자 간 수정 가능 범위를 문서로 명확히 정리하기
공용 용어 정리 및 검색 편의성 강화: 용어를 통일하고 검색 기능을 개선하기
③ 장기적인 디자인 시스템 계획
주요 UX 패턴 모듈화: 결제, 상품 카드 등 핵심 UX 패턴을 모듈화하기
온보딩용 문서·가이드 제작: 신규 구성원이나 현장 담당자가 쉽게 이해하고 활용할 수 있도록 문서화하기
분기별 패턴 업데이트 프로세스 구축: 정기적으로 패턴을 점검하고 업데이트 프로세스를 체계화하기
시스템은 ‘만드는 것’보다 ‘쓰이는 것’이 더 중요하다.
이번 디자인 시스템 회고와 발표를 한마디로 정리하면,
일관성과 유연성 사이에서 균형 잡기라고 할 수 있을 것 같은데요.
이번 설문과 논의를 통해 깨달은 점은,
아무리 훌륭한 시스템이어도 '완성도'보다 '활용도'가 더 중요하다는 것을 제대로 느꼈습니다 ㅎㅎ
반대로 조금 미흡하더라도, 현장에서 꾸준히 쓰이고 발전한다면 그게 진짜 살아있는 시스템이라는 생각을 했는데요, 똑똑한개발자의 디자인 시스템은 앞으로도 꾸준한 개선 작업을 이어갈 예정!
앞으로의 여정도 함께 지켜봐 주세요!
혹시 똑똑한개발자의 디자인 시스템 문서가 궁금하시다면, 아래 링크로 확인이 가능합니다 :)
홈페이지 - 좌측 하단 햄버거 버튼 - DESIGN SYSTEM 클릭
감사합니다!!!
