1. 오늘 학습 키워드
- 컬러 스타일(Color Style)
- 폰트 스타일(Typography)
- 시각적 계층 구조(Visual Hierarchy)
- 디자인 시스템
- 사용자 경험(UX)
2. 오늘 학습 내용을 나만의 언어로 정리하기
오늘은 UI 디자인에서 중요한
컬러 스타일과 폰트 스타일에 대해 학습했다.
이전에는 디자인을 할 때
- 예쁜 색
- 보기 좋은 폰트
를 기준으로 선택했다.
하지만 이번에 알게 된 것은
👉 디자인은 “취향”이 아니라
👉 사용자의 이해를 돕는 도구라는 점이다.
즉,
컬러와 폰트는 꾸미기 요소가 아니라
정보 전달과 행동 유도를 위한 설계 요소다.
3. 컬러 스타일 (Color Style)
① 컬러의 역할
컬러는 단순한 시각 요소가 아니라
- 정보 구분
- 상태 표현
- 행동 유도
를 담당한다.
예
- Primary (메인 색상) → 주요 버튼
- Secondary → 보조 요소
- Error → 오류 상태
👉 WHY
사용자는 색을 통해
👉 어디를 눌러야 하는지 / 무엇이 중요한지 빠르게 판단한다.
② 컬러 사용 원칙
✔ 일관성 유지
✔ 의미 기반 사용
✔ 대비 확보
예
- 버튼은 항상 같은 색
- 에러는 항상 빨간색
👉 WHY
일관성이 없으면
👉 사용자가 혼란을 느낀다.
③ 인사이트
컬러는 감성이 아니라
👉 행동을 유도하는 신호다.
4. 폰트 스타일 (Typography)
① 폰트의 역할
폰트는 단순히 글자를 보여주는 것이 아니라
- 정보 전달
- 가독성
- 중요도 표현
을 담당한다.
② 시각적 계층 구조
폰트는 크기와 두께로 계층을 만든다.
예
- 제목 (크고 굵게)
- 본문 (중간 크기)
- 보조 텍스트 (작게)
👉 WHY
사용자는 글을 읽는 것이 아니라
👉 훑어본다. (Scan)
그래서 구조가 중요하다.
③ 폰트 사용 원칙
✔ 폰트 종류 최소화 (보통 1~2개)
✔ 크기 체계화
✔ 줄 간격 / 자간 고려
👉 WHY
복잡한 폰트는
👉 가독성을 떨어뜨린다.
④ 인사이트
폰트는 디자인 요소가 아니라
👉 정보 구조를 만드는 도구다.
5. 학습하며 겪었던 문제점 & 에러
문제 정의
처음에는
👉 예쁜 디자인을 만드는 데 집중했다.
그래서
- 컬러가 많고
- 폰트가 다양했다.
내가 한 시도
- 컬러를 역할 기준으로 나누기
- 폰트 크기 규칙 만들기
해결 방법
👉 “이 요소는 왜 이 색인가?”
👉 “이 텍스트는 왜 이 크기인가?”
이 질문을 기준으로 디자인했다.
새롭게 알게 된 점
좋은 디자인은
👉 예쁜 것이 아니라
👉 이해하기 쉬운 것이다.