제로베이스 69일차 학습노트이다.
오늘은 디자인 시스템과 스타일 가이드의 개념 중에서도 구체적인 분류와 원칙들에 대해 배웠다. 디자인을 단순히 ‘보이는 것’이 아니라, 체계적이고 일관되게 유지해야 할 일종의 언어라는 점에서 인상 깊은 수업이었다.
오늘의 강의 내용
1. 디자인 시스템의 유형
디자인 시스템은 조직이나 브랜드의 디지털 제품 전반에 걸쳐 일관된 디자인을 유지하기 위한 도구이다. 대표적인 유형으로는 스타일 가이드 중심형, 컴포넌트 중심형, 완전한 시스템형으로 나뉜다.
스타일 가이드 중심형은 폰트, 컬러, 여백 등의 기본 시각 요소만을 다루는 단순한 구조이고, 컴포넌트 중심형은 버튼, 카드, 입력창 등 UI 구성 요소까지 포함된다. 완전한 시스템형은 문서화, 코드화된 컴포넌트, 버전 관리 등을 포함한 대규모 협업 기반의 디자인 시스템이다.
2. 모바일 환경의 이해
모바일 디자인은 화면이 작고 터치 기반이기 때문에, 사용성과 접근성을 고려한 UI 설계가 중요하다. 예를 들어 터치 영역은 최소 44px 이상이 되어야 하며, 시각적 혼란을 줄이기 위해 명확한 위계와 간결한 구성으로 화면을 설계해야 한다.
또한 iOS와 Android의 플랫폼 차이, 디바이스 해상도, UI 가이드라인(Material, Human Interface 등)에 대한 이해도 필수이다.
특히 이동 중이거나 한 손으로 조작하는 등 동적인 사용자 상황을 고려하여 명도 대비, 텍스트 크기, 버튼 명확성을 확보하는 것이 중요하다. 이는 정보 인지 속도와 조작 정확도에 직결된다.
3. 디자인 랭귀지(Design Language)
디자인 랭귀지는 브랜드의 시각적 정체성을 표현하는 고유한 시각적 언어이다. 색상, 타이포그래피, 레이아웃, 애니메이션 등 모든 UI 요소에 담긴 일관된 원칙을 뜻한다.
대표적인 디자인 랭귀지로는
- 스큐어모픽 디자인: 실물과 유사하게 표현하여 직관성을 강조하는 방식. 예전 iOS에서 많이 사용되었으며 현실감을 중요시함.
- 플랫 디자인: 그림자, 질감 등 시각적 장식을 배제한 단순하고 평면적인 스타일. 가독성과 성능 최적화에 유리하며, Windows 8, 초기 Android UI에서 주로 사용됨.
- 머티리얼 디자인(Material Design): Google이 제안한 디자인 랭귀지로, 플랫 디자인 기반에 물리적 속성과 애니메이션을 더해 계층 구조, 동작, 시각적 피드백을 강조한다.
디자인 랭귀지를 잘 정의하면 여러 디자이너가 작업해도 결과물에 일관된 감성과 브랜드 경험을 담을 수 있으며, 사용자에게도 명확하고 친숙한 인상을 줄 수 있다.
4. 엘리베이션(Elevation)
엘리베이션은 UI 요소가 화면에서 얼마나 위로 떠 있는지를 표현하는 깊이의 개념이다. 주로 **그림자(Shadow)**를 통해 표현되며, 계층 구조를 명확히 하거나 인터랙션 대상임을 시각적으로 알려주는 데 활용된다.
Material Design에서는 엘리베이션을 수치화하여 구성 요소별 기본 높이를 지정하고 있으며, 사용자로 하여금 어떤 요소가 눌릴 수 있는지, 어떤 것이 상위 레이어인지 직관적으로 파악하게 한다.
디자인 시스템은 결국 일관성과 효율성, 사용자 경험의 질을 높이기 위한 기반이라는 점을 다시 느꼈다. 특히 모바일 환경에서는 작은 화면과 다양한 사용자 상황을 고려한 설계가 중요하고, 디자인 랭귀지는 브랜드의 감성을 일관되게 전달하는 데 큰 역할을 한다는 점이 인상 깊었다. 디자인이 곧 소통이고 전략이라는 말이 와닿는 수업이었다.
이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.