컬러 시스템과 기본적인 디자인 요소

2023년 8월, 원티드 프리온보딩 디자인 챌린지 UI/UX 요약

 

UI 디자인을 위한 Color System

색상

구체적인 사물의 빛, 추상적인 개념이나 감정을 표현할 수 있다.

색상으로 정보를 직관적으로 전달할 수 있고, 그래픽/공간에서의 색상 연출이 가능해진다.

또한, 브랜드 정체성을 표현할 수 있다.

 

기능을 위한 색상

정보 위계 표현이 가능하다. (Elevation)

해동 유도가 가능하다. (Affordance)

피드백을 줄 수 있다. (Feedback)

 

서비스 정체성을 위한 색상

브랜드 컬러를 가질 수 있다.

예. 라인, 인스타그램, 스포티파이, 카카오택시

 

디자인 시스템에서 색상 정의

Color Palette

다양한 색상을 명도별로 나열한 색상 목록을 말한다.

목적에 따라 정의되기 보다는 색상 자체의 이름과 명도를 가지고 사용된다.

 

주로 신규 화면을 만들 때, 컬러에 대한 용도를 정의하기 어려울 때 사용된다.

어느 정도 화면을 구성하는 단계부터는 컬러 파레트에서 Semactic Color로 넘어가는 것이 좋다.

Palette 상태로 계속 사용하다 보면, 주요 색상이 변경될 때 또는 다크모드에 대응하기 어렵다.

Color

 

Semactic Color

사용되는 목적과 UI에 적용되는 상황에 따라 정의된 컬러를 말한다.

• 메인 컬러
  • Primary
  • Secondary
  • Main
  • Sub
• 보조 컬러
  • States
    • Alert
    • Error
    • Caution
    • Success
  • Accent
  • Tint
• 시스템 컬러
  • Background
  • Line
  • Fill
  • Label
  • Text
  • Elevation

 

컬러 시스템 만들기

• Color Palette 만들기
  • HSL 이용해서 색상 파레트 만들기
    • 직접 Palette를 만들면 좋지만, 피그마 커뮤니티에서 이미 만들어져 있는 색상 Palette를 사용해도 된다.
• Semactic Color 만들기
  • Primary/Secondary
  • Status
  • Text
  • Background
  • Line
  • White/Black
  • 컬러 시스템은 정답이 없으며, 본인이 맡고 있는 프로젝트에서 사용되는 요소들을 살펴보며 이름을 짓는다.
  • 처음부터 모든 Semactic Color를 세팅하지 말고, 처음에는 Color Palette만 만들어둔 채 파레트에서 가져다 사용하면서 하나씩 Semactic Color를 추가하는 것이 좋다.

팔레트 RGB

 

색상 대비 확인하기

웹 콘텐츠 접근성 가이드라인(WCAG)에서 가이드하는 색상의 최소 대비값을 확인하는 것이다.

• 최소 대비값, 3:1
• 권장 대비값, 4.5:1
• 최대, 7:1

 

명암비 수치 확인하기

글자가 배경색과 잘 분리되어 보일 수 있도록 명암을 주어야 한다.

Contrast Finder, 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합 검색

 

다크모드 대응하기

다크모드는 과연 필수일까? 결론적으로 필수는 아니다.

다크모드는 일시적응로 눈부심을 줄여주는 효과는 있지만, 장기적으로는 오히려 근시를 유발할 수 있다는 학술적 의견이 있다.

또한, 배터리 절감 효과를 극대화하기 위해서 "완전한 블랙(#000)" 색상을 활용해야 한다. 그러나, 여러가지 이유로 완전한 블랙을 사용하지 않는 경우도 있으며, 화면 내부에는 블랙 이외의 색상이 사용되기 때문에 배터리 절감 효과는 크지 않다.

다크모드에서 완전한 블랙을 사용하는 것은 주의가 필요하다. 흰색의 텍스트와 대비가 강해 눈의 피로도를 오히려 유발할 수 있기 때문이다. 다만, 애플에서는 배경에 순수한 블랙이 사용되는 경우가 많다.

Material Design에서는 블랙 대신 "#121212" 색상을 사용하는 것을 권장한다.

Dark Mode - Color

 

그리고 다크모드에서는 Shadow(그림자)와 Line(선) 표현이 어렵기 때문에 배경 색상으로만 계층 구조를 표현할 수 밖에 없다.

 

다크모드에서는 어두운 배경이 가장 뒤에 온다.

라이트모드에서는 디자인에 따라 유동적이고 경우에 따라 다크모드의 색상 위계와 명도/색상 기준으로 일치하지 않을 수 있다. 이는, Semactic Color를 사용하는 대표적인 이유이다.

 

에어비앤비나 아이폰의 설정은 비교적 자유로운 표현의 라이트모드를 가지고 있으니 참조하면 된다.

 

다크모드에서는 채도가 낮고, 명도가 높게 색상을 조정하여 사용한다.

라이트모드에서 사용되는 컬러를 다크모드에서도 일정 수준의 대비를 갖추어 표현해야 하기 때문이다.

 

Dark Mode

 

• Color Palette로 1:1 대응하기

Dark Mode 대응

 

• Semantic Color로 대응하기
  • 처음부터 다크모드의 모든 경우를 대비해서 컬러를 만들 수 없다.
  • 라이트모드에서 다크모드로 화면을 전환해보고 색상이 어색하게 표현되는 부분을 찾아 별도로 Semantic Color를 지정하며 작업할 수 있다.

다크 모드 적용기(2)

 

Themer로 다크모드 빠르게 전환하기

사전 준비

1. 라이트 테마와 화면 디자인 준비
2. 라이트 테마에 대응하는 다크테마 색상 준비
3. JSONBIN 계정 생성
   • 가입 후, API Keys => 마스터키 복사
   • API Keys를 공유해야 같은 Themer Setting 공유 가능
4. Plugin-Themer 설치 및 실행
   1. 설치
      • Plugin => Find more Plugin
      • Community 검색
   2. 실행
      • Settings에서 API Key 붙여넣기 후 저장
5. 피그마 파일 라이브러리로 Publish
   • 왼쪽 패널에서 Asserts 선택 후 책모양 버튼 클릭
   • Publish 클릭
   • 무료 계정이라면, Color만 선택 후 Publish

 

Themer로 적용하기

1. Themes => Create a Theme
2. Color Styles 선택
3. 테마별 Source 선택
   • 선택 후, Styles in current selection
   • 색상 선택 시, Shift + Command / Shift + Ctrl 누른 뒤 선택
4. 테마 지정
   • 이름에 "_" 사용하지 말 것
5. 화면에 적용 (Apply to Selection)

 

Component 개념 이해하기

"Component"는 프로그래밍에 있어서 재사용이 가능한 각각 독립된 모듈을 말한다.

즉, 재사용이 가능한 최소 단위이다.

 

"디자인 시스템에서 컴포넌트"는 재사용이 가능하게 구성된 최소 단위의 UI 구성요소이다.

예. 버튼, 텍스트 필드, 체크박스, 모달, 토스트, 내비게이션 등

 

컴포넌트의 필요성

• 자주 사용되는 요소들을 재사용할 수 있도록 규격화
• 제품 개발 효율성을 높여 리소스 절약

 

모든 UI 요소들을 등록된 컴포넌트로만 제작할까?

컴포넌트에 있는 요소 외에도 필요에 따라 재사용 빈도수가 떨어지는 요소를 충분히 만들어 사용할 수 있다. 등록된 컴포넌트만 사용해야 할 경우에는 서비스 화면 구성에 제약이 생기고, 또는 지나치게 단조로운 화면을 구성하게 될 수 있다.

 

새로운 요소들도 매번 컴포넌트로 정의하고 등록해야 할까?

재사용 빈도수를 고려하지 않고 무분별하게 컴포넌트를 만들어 나간다면 비효율적이다. 많은 화면에서 자주 사용되는 요소들만 컴포넌트로 정의해야 한다. 처음에는 그냥 사용하다가 빈도수가 많아질 때 개발팀과 협업하여 컴포넌트로 관리해야 한다.

 

정리하자면, 각자의 업무 환경에 맞추어 가장 자주 쓰이는 최소한의 요소부터 시작해 만들어가야 한다.

 

기본적인 요소들

서비스 형태, 기기환경에 상관없이 활용이 가능하고 정형화된 형태로 한 번 정의하면 다른 형태의 UI 요소가 필요한 상황이 비교적 적어진다.

 

컴포넌트와 관련된 정보들은 어도비의 컴포넌트 카테고리에서 확인할 수 있다.

• Button

버튼

• Input Form

Input - 1

Input - 2

Input - 3

• Toast
• Tooltip
• Modal
• Bottom Navigation
• Tabs

Spectrum, Adobe’s design system

 

그려낼 필요없는 Icon 라이브러리 활용하기

아이콘을 직접 모두 그려서 사용해야 할까? 아니다!

 

Icon Library

• 일관성 있는 디자인의 아이콘 Package
• Line/Solid 등 스타일 다양화
• CSS Icon 형태라면, 폰트처럼 아이콘 사용 가능
  • 웹의 경우에는 Asset 관리에 효율적

 

알아두면 매우 쓸모있는 아이콘 라이브러리

• Material (무료)
  • 매우 강력한 무료 아이콘을 제공하며, CSS 지원, 피그마 플러그인 지원
• Fontawesome
  • 일부 아이콘을 무료 제공하며, CSS 및 전체 이용 유료, 유료 모델 사용 시 폰트로 피그마에서 사용 가능
• Streamline
  • 일부 아이콘 무료 다운로드가 가능하며, 전체 및 피그마 플러그언 사용 유료
• CSS.gg (무료)
  • 오픈소스 CSS Icon, 피그마 디자인 파일 사용 가능
• HeroIcons
  • Tailwind CSS에서 배포하는 무료 아이콘, 피그마 파일도 사용 가능
• Untitled UI
  • 일부 아이콘 무료 제공하며, 피그마 파일 사용은 유료