본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
디자인 시스템을 구축할 때 가장 먼저 정리해야 할 요소는 컬러와 텍스트 스타일이다.
이번 강의에서는 실제 디자인 시스템 파일을 기준으로 컬러와 텍스트 스타일을 효율적으로 정리하는 방법을 실습했다.
컬러와 컴포넌트를 정리할 때는 Figma 플러그인인 Design System Organizer를 활용했다.
레이어를 그룹화하고, 이름을 일괄 변경하며, 필요 시 위치를 한 번에 이동시킬 수 있어 생산성이 높아졌다.
45일 무료 체험이 가능하며, 가격도 합리적인 수준이라 실무에서 활용하기 좋았다.
https://www.figma.com/community/plugin/802579985985331070/design-system-organizer
이번 실습을 통해 디자인 시스템의 기초라 할 수 있는 컬러와 텍스트 스타일을 체계적으로 정리할 수 있었다.
이러한 기본 요소가 잘 정리되어 있으면, 전체 디자인 품질은 물론 개발 협업과 유지보수 효율성도 크게 향상된다.
디자인 시스템 구축은 어렵지 않다. 작고 단순한 정리부터 시작해보면 된다.
디자인 시스템 구축 실습 (컬러 & 텍스트 스타일)
1. 디자인 시스템 준비 상태 확인
- 메일 앱 디자인 시스템 파일과 실제 앱 디자인 파일 두 개로 구성됨
- 기존 컴포넌트는 대부분 디자인 시스템에서 불러온 상태
- 디자인 시스템 내 컬러와 컴포넌트 중심으로 구조화 필요
2. 디자인 시스템 플러그인 활용
- 추천 툴: Design System Organizer
- 기능:
- 레이어 구조 자동 정리
- 이름 변경 시 전체 자동 반영
- 다중 선택 후 이동 가능
- 작업 능률 향상
- 무료 15일 체험 후 유료 (비싸지 않음)
- 기능:
3. 컬러 정리 작업
- 컬러 카테고리: Black, White, Blue, Orange, Yellow, Gray 등
- Gray 계열 통일 작업:
- 기존 명칭 → 숫자 기반 이름 변경 (예: Light Gray → Gray100, Gray200 등)
- 필요 시 그룹화(Gray로 묶고 하위 번호 붙이기)
- 컬러 프레임 구성:
- 프레임 명: Color
- 텍스트 정렬: SF Pro, 20pt
- 컬러 구분 안되는 White는 Border를 Gray300으로 추가하여 가시성 확보
4. 텍스트 스타일 정리
아이콘 및 컴포넌트 정리
- 사용하지 않는 아이콘/컴포넌트 정리
- Navigation, Title Bar, Indicator 등 구조 분류
텍스트 스타일 분류 및 네이밍
- 기준: Apple iOS 네이밍 사용
- Large Title → 라지 타이틀
- Title → 타이틀
- Subtitle → 서브헤드
- Caption, Footnote 등도 포함 가능
- 스타일 예시:
- Large Title: Apple Sandol Gothic Neo, 32pt
- Title: SF Pro, 30pt
- Subhead: SF Pro, 15pt
- 전체 텍스트는 SF Pro로 통일 (혼합 사용 제거)
텍스트 스타일 정리 방법
- 텍스트 추가 → 스타일 등록 → 텍스트 파일에 복사 → 페이지 배치
- 필요한 경우 스타일별 그룹화도 가능 (예: Caption 1/2 함께 정리)
5. 시스템 반영 및 퍼블리싱
- 텍스트 크기 변경은 디자인 시스템 내 스타일에서 조정
- 예: 라지 타이틀이 너무 크면 시스템에서 30pt로 조정
- 퍼블리싱 후 전체 페이지에 자동 반영됨
6. 최종 정리
- 컬러와 텍스트 스타일이 디자인 시스템 내에서 일관되게 정리됨
- 모든 컴포넌트 및 페이지에 연결되어 있어 유지보수 효율성 높음
- 추후 퍼블리싱 시 전체 시스템에 반영 가능
학습 인증샷
패스트캠퍼스, 환급챌린지, 패스트캠퍼스후기, 습관형성, 직장인자기계발, 오공완
