디자인 시스템

배경

모노레포에는 Firstage의 Journey 앱과 홈페이지, 사내 Dashboard, 블로그, 대회 운영 서비스 ROUND 같은 여러 앱이 있습니다. 한국어, 영어, 일본어 문구는 390px 화면에서도 잘리지 않아야 하고, 접근성 기준이 앱마다 달라져서도 안 됩니다. 앱마다 스타일을 따로 만들면 이런 기준이 금방 흩어지기 때문에, 모든 앱이 소비하는 패키지 하나로 모았습니다.

결정과 구현

• 토큰은 원시, 시멘틱, 컴포넌트 3계층으로 나누고 색은 OKLCH로 정의했습니다. 상호작용 요소는 시멘틱 토큰만 읽기 때문에, 앱은 밝은 모드와 어두운 모드의 시멘틱 역할을 바꾸는 것으로 테마를 정합니다.
• 변형은 intent, size, variant 세 축으로만 표현합니다. 새 경우가 생겨도 임의 스타일 대신 이 축 안에서 풀고, className은 배치에만 써서 색, 높이, 여백을 덧칠하지 못하게 했습니다. 변형 규칙과 공개 prop의 JSDoc은 린트로 검사합니다.
• Radix 프리미티브 위에 tailwind-variants로 스타일을 입히고, 복합 컴포넌트는 Root와 Part를 따로 내보내 조립하게 했습니다.
• 번역된 문구, locale, 시간대, 글쓰기 방향, 글꼴은 앱이 넘겨줍니다. 컴포넌트가 브라우저에서 언어나 시간대를 추측하지 않으므로, 같은 컴포넌트를 앱마다 다른 정책으로 쓸 수 있습니다.
• 화면은 390px에서 시작해 넓혀 가고, 보이는 포커스, 의미 있는 레이블, 터치 환경에서 44px 이상의 터치 영역을 하한으로 둡니다. Storybook에는 axe 접근성 검사를 붙였습니다.

현재 상태

모노레포의 모든 앱이 이 패키지를 쓰고, Storybook 스토리는 189개입니다. 아직 1.0 이전 베타 버전이며, axe 검사 범위를 넓히는 일과 Journey 화면의 시각 회귀 테스트가 남아 있습니다.