프론트엔드
디자인 시스템을 만들때 마주하는 고민사항 23가지와 32개 팁.
두줄요약
Figma 기반 디자인 시스템의 레거시 정리와 구축 과정을 실무 관점에서 정리했습니다. 네이밍, Variant·Property, 텍스트·색상 스타일 관리 팁을 제시합니다.
구조와 흐름
- 이해관계자 인터뷰와 AS-IS UI 업무 방식 점검부터 타사 사례 분석, 시스템 제작, 핸드오프, 개선으로 이어지는 구축 프로세스
- 레거시 컴포넌트를 모아 볼륨과 공통점을 파악하는 Bottom Up과 규칙을 적용하는 Top Down의 병행
- Figma의 Auto Layout, Variant, Property, 텍스트·색상 스타일 기반의 화면·컴포넌트 관리
선택 이유
- 간격·서체·색상 값 탐색과 화면별 수작업 수정 감소
- 신규 서비스와 기존 서비스의 UI를 동시에 제작하기 위한 재사용 가능한 컴포넌트 기반
- 팀 확장과 개발 협업을 고려한 이해 가능한 파일·컴포넌트 구조
주의할 점
- 레이어·마스터 컴포넌트 이름의 과도한
/사용으로 인한 불필요한 폴더 중첩 - 스타일 속성까지 Property로 표현하는 복잡성 대신 자주 구분하는 상태·크기·유형 중심 속성
- 운영 디자인 시스템 내부의 실험적 텍스트 스타일 변경 방지와 별도 Playground 활용
적용해볼 점
- Property의 대응 상태를 on/off 또는 Yes/No, True/False 토글로 구성
- 텍스트 스타일을 크기와 굵기 중심으로 명명하고 다국어·플랫폼별 접두어로 분류
- 4px 단위 컴포넌트와 정렬되는 line-height 설정 및 폰트별 x-height 차이의 팀 단위 검토
