디자인 시스템 구현 및 전면 적용
Overview
담당자 변경과 디자인 리뉴얼이 겹치면서 페이지와 컴포넌트마다 적용된 스타일 기준이 달랐습니다. 디자인 측이 정의한 토큰 체계를 코드로 구현하고, 따로 마크업돼 있던 요소를 공용 컴포넌트로 대체한 뒤, 정합 규칙을 만들어 이후에도 디자인 시스템을 지키며 유지보수할 수 있게 했습니다.
3가지 문제가 있었습니다. 이전 기준과 현행 기준으로 만든 화면이 함께 남아 있었고, 공용 컴포넌트가 일부에서만 쓰이고 나머지는 같은 요소를 따로 마크업해 구현돼 있었고, 색은 의미 토큰 대신 프리미티브 팔레트를 직접 참조하고 있었습니다. 담당자 변경과 디자인 리뉴얼이 겹치면서 적용이 일부에만 이뤄진 채 누적된 상태였습니다. 디자인 측이 정리한 역할 기반 토큰 체계를 코드로 구현해 전체 페이지에 적용하고, 따로 마크업돼 있던 요소를 공용 컴포넌트로 대체했습니다. 이후에도 기준을 따라갈 수 있도록 정합 규칙을 코드베이스에 남겼습니다.
Structure
Challenges & Solutions
이전 기준과 현행 기준이 함께 남아 있음
담당자 변경과 디자인 리뉴얼이 겹쳐, 이전 기준으로 만든 화면과 현행 기준으로 만든 화면이 코드에 함께 남아 있는 상태
- 현행 기준을 단일 기준으로 확정하고, 남아 있던 레거시 스타일 호출부를 전체 페이지에서 정리
- 브랜드 색 교체와 신규 로고 반영도 같은 작업에서 함께 진행
공용 컴포넌트가 일부에만 쓰이고 나머지는 따로 마크업
버튼·탭·입력·체크박스·뱃지 공용 컴포넌트가 있었지만 일부에서만 사용하고, 나머지는 같은 요소를 화면마다 따로 마크업해 구현한 상태
- 따로 마크업돼 있던 요소를 공용 컴포넌트 호출로 대체 (버튼·카테고리 버튼·탭·셀렉트·라디오·체크박스·뱃지)
- 상품 카드는 크기 × 방향 × 상태 조합을 하나의 컴포넌트로 묶고, 상태 판정 로직은 별도 모듈로 분리해 단위 테스트를 작성
색을 의미 토큰이 아니라 팔레트에서 직접 참조
- 색상 팔레트 목록은 있었지만 역할별 의미 토큰이 코드에 반영돼 있지 않았음
- 그래서 화면에서는 팔레트 값이나 색상 코드를 직접 지정하고 있었음
- 디자인 측이 정의한 역할별 토큰 체계를 CSS 변수로 구현하고 Tailwind에 매핑
- 같은 토큰을 투명도만 바꿔 쓸 수 있도록 값 형식을 맞춰 정의
- 화면에 남아 있던 팔레트 값·색상 코드 직접 지정을 의미 토큰 호출로 전환
- 타이포도 정해진 체계로 마이그레이션
적용 이후 따라갈 기준이 코드베이스에 없음
화면을 다 맞춰도, 이후 UI 수정에서 어떤 컴포넌트와 어떤 토큰을 써야 하는지 코드베이스에 명시된 기준이 없는 상태
- UI 수정 시 따라야 할 정합 규칙을 코드베이스 문서에 명시 — 공용 컴포넌트 우선 재사용, 의미 토큰 우선, 팔레트·색상 코드 직접 지정 금지, 타이포는 정해진 체계 사용
- 토큰 정의 위치와 Tailwind 매핑 위치를 함께 적어 찾아갈 수 있게 함
Impact
토큰 전환
팔레트 직접 참조 → 의미 토큰
디자인 측이 정의한 토큰 체계를 CSS 변수·Tailwind로 구현
컴포넌트 대체
따로 마크업 → 공용 컴포넌트
전체 페이지에 적용
유지보수 기준
정합 규칙 문서화
이후 UI 수정도 디자인 시스템을 지키며 진행