UI/UX Color와 Typography에 대해 알아봅니다.

---

▶UI/UX Color

색상 모델

1. CMYK

• cyan, magenta, yellow, black
• 감산 혼합 색상 모델; 색을 더하면 어두워짐
• 주로 인쇄에서 사용
  
  
  

2. RGB

• 빨강, 녹색, 파랑 (빛의 3원색)
• 가산 혼합 색상 모델; 색을 더하면 밝아짐
• 주로 디지털 디스플레이에서 사용
• 단점: 기기마다 색상이 달라보일 수 있음
  
  
  

3. RGBA

• 빨강, 녹색, 파랑, 알파
• 알파는 투명도로 0-1사이의 값 (1로 갈수록 불투명)
  
  

4. Hex Code

• RGB 색상을 16진수로 표현한 색상코드
• RGB와 같이 디지털 환경에서 주로 사용
• ex) #00000
  
  

Rule of Color

• 색상마다 관례적인 의미가 있음

• Red: 위험, 경고, 열정, 사랑
• Orange: 주의, 경고, 따뜻, 활력
• Yellow: 주의, 경고, 따뜻, 긍정, 행복
• Green: 긍정, 진행, 자연, 생명, 안정
• Blue: 신뢰, 차가움, 안정, 평온
• Violet: 신비, 창의성
  
  

색의 사용과 용도

• 강조: 사용자의 주의를 끌기 위해 색채를 사용
• 암시: 색상에는 상징적 의미가 있어 요소의 의미를 암시
• 상호작용: 클릭 가능한 버튼, 링크 등 사용자가 이용 가능한 기능을 암시
• 상태: 비활성화, 입력창 사용 여부 등 사용자의 상태를 직관적으로 나타냄
  
  

UI/UX 색채 구성

• 메인 컬러, 포인트 컬러, 서브컬러, 아이콘 컬러, 텍스트 컬러, 배경 컬러
• 모든 색들은 서로 조화로워야 함
  
  

▶Typography

Typography란

• 글자의 모양, 크기, 간격, 색상 등을 조절하여 정보 전달의 효과를 높이는 작업
• 문자에 의미와 감성을 부여하고 정보의 전달력을 극대화하는 시각적 디자인 기술
• 글자를 디자인 하는 것이 아니라 의미를 디자인 하는 것
  
  

Typography 요소

• 요소들은 모두 상호작용하며 사용자 경험에 영향을 미침

1. 글꼴 (폰트)

• 특정 디자인 스타일을 가진 글자 세트
  

✔️Serif

• 장식선 있음
• 고전전, 전통적, classic 느낌
• 긴 text에서 가독성 좋음 → 인쇄물, 기사에서 많이 사용

✔️San-serif

• 장식선 없음
• 깔끔, 현대적 modern
• 짧은 text에서 가독성 좋음 → 디지털 환경에서 많이 사용

2. 글자 크기

• 정보의 계층구조를 나타내는 요소
• 크기를 달리하여 정보를 단계적으로 전달

3. 줄 간격

• 각 줄 사이의 공간
• 너무 좁거나 넓으면 가독성 떨어짐

4. 자간

• 글자들 사이의 간격
• 가독성에 영향을 미침
• 텍스트의 시각적 균형을 조절하는데 중요함

5. 정렬

• 좌측 정렬, 우측 정렬, 가운데 정력, 양쪽 정렬
• 정렬 방식은 문서의 흐름과 독자의 시각적 움직임을 관리
• 여백이 좁은 쪽으로 문서의 흐름이 있다. 세로 요소들의 여백을 좁게 만들면 가로로 읽지 않고 세로로 무리 없이 읽게 할 수 있다.

6. 색상

Typography의 역할

: 사용자 경험 측면에서 정보 전달 도구의 역할 + 사용자와 인터페이스 간의 상호작용을 강화함

• 가독성 ← 줄간격, 자간
• 계층구조 ← 크기, 굵기, 색상
• 브랜드 정체성; 브랜드마다 고유의 글꼴이 있음 (예> 배민)
• 감정적 반응; 느끼는 것으로 브랜드의 이미지와 관련 있음