작은 조직을 위한 효과적인 디자인 시스템 | 인프콘2024

디자인 컴포넌트의 다양성과 커스터마이징, React 지원, 번들 크기와 브라우저 호환성을 비교해 균형이 좋은 Mantine을 선택했다. 공식 Figma 키트가 없었지만 Storybook을 불러오는 도구를 사용하고 브랜드 컬러·radius·state 같은 프로퍼티를 제품에 필요한 범위로 줄였다. 만 개가 넘던 조합을 약 600개로 정리해 2주 안에 자주 쓰는 컴포넌트 수십 개를 만들고, 나머지는 실제 프로젝트를 진행하며 보완했다.

빠르게 구축하는 동안 디자이너마다 프로퍼티 이름과 대소문자, 순서가 달라져 사용성과 개발 핸드오프에 추가 확인 비용이 생겼다. 정기 디자인 시스템 회의에서 규칙을 합의하고 개발 코드의 프로퍼티와 같은 형태로 맞춰 단일한 언어를 만들었다. 사용량이 높은 컴포넌트부터 Figma Code Connect를 연결하면 개발자가 생성 코드를 복사해 사용할 수 있어 반복 입력과 어노테이션, QA 수정 시간을 줄일 수 있다.

Mantine에 아이콘이 없어 Font Awesome을 도입했지만 매번 SVG를 내려받아 Figma와 리소스 서버에 올리고 이름과 속성을 맞추는 과정이 복잡했다. Font Awesome의 대체 글리프 방식을 활용해 클래스명을 텍스트 프로퍼티로 입력하면 크기·스타일·색상에 맞는 아이콘이 나타나는 컴포넌트를 만들었다. 디자이너와 개발자 모두 파일 이동 없이 같은 클래스명을 사용하게 됐고, 이 기초 컴포넌트의 개선은 버튼·입력·배지 등 중첩된 여러 요소에도 전파됐다.

전문 UX 라이터가 없는 환경에서 인터페이스가 일관된 목소리로 사용자와 대화하도록 기존 문구와 외부 AI를 결합했다. 모달·알림·오류 등 약 300개의 실제 문구를 아카이빙하고 따뜻한 랜선 사수라는 제품 보이스톤과 컴포넌트별 작성 규칙을 정의했다. 이 자료를 참조하는 맞춤 GPT가 기존 표현을 재사용한 여러 문구를 제안하게 한 뒤 먼저 배포하고 피드백으로 다듬어, 작은 조직의 라이팅 시간을 줄였다.