디자인 시스템 도입기

왜 디자인 시스템을 도입했을까?

우리 팀은 POS, 키오스크, 모바일 오더, 관리자 페이지 등 다양한 제품군을 동시에 운영하고 있었습니다.
문제는 제품별로 UI 패턴이 제각각이다 보니, 다음과 같은 상황이 자주 발생했어요.

• 버튼 스타일이 서비스마다 달라 사용자 혼란 발생

• 신규 기능 개발 시 매번 UI 가이드를 새로 정리해야 하는 비효율

• 디자이너마다 사용하는 컴포넌트가 달라 QA 과정에서 오류 증가

일관된 사용자 경험과 효율적인 협업 체계를 위해 디자인 시스템 도입은 필수였습니다.

도입 절차

1. 문제 정의

   각 제품에서 사용 중인 컴포넌트를 모두 수집 → 겹치거나 불필요한 요소 파악
   
   

2. 원칙 수립

   브랜드 컬러, 타이포그래피, 아이콘 스타일 등 비주얼 가이드라인 확립
   
   

3. 컴포넌트 설계

   버튼, 입력창, 카드, 모달 등 핵심 UI를 모듈화
   상태(활성/비활성, hover 등)를 모두 정의
   
   

4. 디자인 툴 세팅

   Figma에 컴포넌트 라이브러리 구축
   개발팀과 협의해 코드 컴포넌트(React 기반)도 병행
   
   

5. 파일럿 적용

   신규 기능 하나에만 먼저 적용 → 디자인-개발 협업 속도 비교
   
   

6. 전사 확산

   효과 확인 후 POS → 키오스크 → 모바일 오더 순으로 확산

   
   

도입 과정에서의 어려움

• 기존 레거시 디자인과의 충돌
  -> 한 번에 전체 교체가 불가능해, 구버전과 신버전이 공존하는 상황 발생

• 개발팀 리소스 부족
  -> 디자인 시스템을 코드로 옮기는 과정에서 개발팀과의 협의가 지연

• 팀원들의 적응 속도 차이
  -> 일부 디자이너는 새 방식에 금방 적응했지만, 기존 습관을 고수하는 경우도 많았음
  
  

문제 파악 & 해결 방법

1. 레거시 충돌

   문제: 버튼/폼 스타일이 프로젝트별로 다름
   해결: Bridge Guideline 문서를 만들어, 신/구 버전 혼용 시 어떤 스타일을 우선 적용할지 정리
   
   

2. 개발 리소스 부족

   문제: 코드 컴포넌트 제작 속도가 더딤
   해결: 우선순위를 재조정 → 공통성이 높은 컴포넌트(버튼, 인풋, 모달)부터 개발

   
   

3. 팀원 적응 차이

   문제: 툴 사용법 불일치로 협업 품질 저하
   해결: 내부 워크숍 + 실습 세션 진행 → 직접 사용하면서 자연스럽게 적응
   
   

도입 후 효과

• 일관성 강화: POS, 키오스크, 모바일 오더 UI가 한눈에 같은 브랜드임을 인식

• 속도 향상: 신규 디자인 화면 -> 30% 이상 시간 단축

• 협업 개선: 디자이너-개발자 간 핸드오프 시 에러 감소

마치며

디자인 시스템은 단순히 UI 툴킷이 아니라, 팀의 협업 문화와 사용자 경험을 동시에 개선하는 체계였습니다.
처음엔 낯설고 힘들었지만, 지금은 "이제는 디자인 시스템 없이는 못 돌아간다"라는 말을 팀원 모두가 할 정도입니다.

앞으로는 컴포넌트 확장을 넘어, 애니메이션과 톤앤매너까지 포함한 브랜드 경험 시스템으로 발전시킬 계획입니다.