[제로베이스 UI/UX 파트타임 스쿨] 11주차 - (월) 컬러시스템, 타이포그래피 시스템, 아이코노 그래피

제로베이스 71일차 학습노트이다.
오늘은 디자인 시스템 내에서도 실제 디자인을 일관성 있게 구현하기 위한 디자인 스타일 가이드의 구성 요소들 중, 컬러 시스템과 타이포그래피 시스템, 아이코노그래피에 대해 배웠다. 각각이 시각적인 인상을 결정하는 중요한 요소로, 모든 UI의 기반이 되는 기준점이라는 점이 인상 깊었다.

---

오늘의 강의 내용

1. 컬러 시스템
컬러 시스템은 제품이나 서비스의 정체성을 시각적으로 표현하는 데 핵심적인 역할을 한다. 보통 Primary Color, Secondary Color, 그리고 Accent / Supporting Color로 나뉘며, 명도·채도·톤의 다양성을 확보한 색상 팔레트를 구성한다.
또한 텍스트, 아이콘, 배경 등에 적절히 사용할 수 있도록 각 색상에 대한 용도를 명확히 정의하고, 명암 대비(Contrast Ratio)를 고려해 접근성과 가독성도 함께 반영한다. 일반적으로 UI에서는 상태값(성공, 경고, 에러 등)에 대응하는 상태 컬러도 함께 포함된다.

 

2. 타이포그래피 시스템
타이포그래피 시스템은 사용자의 정보 인지를 돕고, 계층 구조를 드러내는 데 중요한 역할을 한다. 일반적으로 폰트 패밀리, 폰트 사이즈, 폰트 웨이트, 라인 하이트, 자간(letter spacing) 등을 체계적으로 정리한다.
예를 들어, Headline 1~6, Subtitle, Body, Caption 등의 역할에 따라 서로 다른 크기와 스타일을 적용해 위계와 구조를 만든다. 이렇게 정리된 타이포그래피 시스템은 디자이너와 개발자 간의 커뮤니케이션 기준이 되고, 다양한 화면에 일관된 텍스트 스타일을 유지할 수 있게 한다.

 

3. 아이코노그래피
아이코노그래피는 UI 상에서 기능을 직관적으로 이해시키기 위해 사용하는 아이콘 시스템을 의미한다. 디자인 스타일 가이드에서는 아이콘의 크기, 라인 굵기, 모서리 처리, 색상 등 시각적 규칙을 통일한다.
아이콘은 보통 24px, 32px 등 규격화된 사이즈를 기준으로 제작되며, 단순성과 명확성을 갖춘 벡터 형태로 표현된다. 이 시스템을 통해 어떤 기능이든 통일된 형태로 전달되며, 사용자 경험의 혼란을 줄일 수 있다.

---

오늘 배운 세 가지 요소는 앞으로 디자인 시스템을 직접 제작하거나 기존 시스템을 적용해 UI를 설계할 때 실질적인 기준으로 작동할 수 있다. 컬러는 접근성과 브랜드 아이덴티티에, 타이포그래피는 정보 전달과 계층 구조에, 아이콘은 기능 인지와 직관성 확보에 중요한 역할을 하므로, 각 요소를 명확히 정의하고 적용하는 것이 완성도 높은 제품 디자인의 핵심이 된다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.