[내일배움캠프] Day 21 - UI 디자인 기본
[수업 목표]
- 목적에 맞는 컬러를 사용할 수 있다.
- 타이포그래피의 계층 구조를 이해하고 적용할 수 있다.
- 일관된 스타일로 아이콘을 만들 수 있다.
🎨 컬러의 의미
컬러는 사람이 사물을 볼 때 가장 먼저 인지하는 요소
브랜드의 이미지를 기억하고 인지시키는 중요한 역할을 함
🌈 컬러가 전달하는 의미
- 🔴 빨강 : 에너지, 열정적, 위험, 정지, 부정, 경고, 에러
- 🟠 주황 : 친근함, 에너지, 보류, 경고
- 🟡 노랑 : 활기찬, 즐거운, 희망적, 낙천적
- 🟢 녹색 : 자연, 균형, 긍정, 진행, 승인, 성공
- 🔵 파랑 : 안정감, 신뢰, 성공, 비전, 정보
- 🟣 보라 : 고급스러움, 고귀함, 예술, 창조
- ⚫ 검은색 : 세련됨, 권위, 강렬함
- ⚪ 흰색 : 깨끗함, 심플함, 정직함, 투명함
🎯 컬러의 역할
컬러는 정보를 강조하고 사용자의 행동을 유도하는 중요한 요소
🔥 중요한 정보 강조
✅ 정보의 중요도에 따라 채도와 명도를 조절하여 주요 요소와 보조 요소를 구분
1️⃣ 계층 구조 : 타이포그래피와 함께 사용하면 더욱 효과적
2️⃣ 강조 : 특정 정보를 강조하되, 너무 많은 요소를 강조하면 가독성이 떨어짐
👆 사용자의 행동 유도
✅ 버튼이나 링크에 컬러를 적용하여 사용자가 다음 단계로 이동하도록 유도
1️⃣ 클릭하고 싶은 버튼 : 브랜드 컬러를 적용하여 행동을 유도
2️⃣ 의미 전달: 예를 들어, 녹색은 시작, 빨강은 종료를 의미
🔄 상태(State) 표시
✅ 사용자와 상호작용하며 즉각적인 피드백을 제공
- 입력 필드 상태 (예: 활성화, 오류)
- 버튼 상태 (활성화, 비활성화)
- 토글 상태 (ON/OFF)
- 탭 활성 상태
🎭 브랜드 아이덴티티
✅ 브랜드 컬러를 지속적으로 사용하여 브랜드를 각인시킴
🏷️ 브랜드를 대표하는 컬러
💡 코카콜라는 빨간색으로 열정과 에너지를, 네이버는 녹색으로 신뢰와 중립성을 전달
🎨 컬러 비율 (5:25:70)
✅ 5% 주색 (브랜드 컬러), 25% 보조색, 70% 배경색을 사용
📌 스타벅스는 초록색(5%), 갈색(25%), 아이보리(70%)를 활용
🖥️ UI 컬러 구성
✅ UI 디자인에서는 다음과 같은 컬러 시스템을 사용
1️⃣ Primary Color : 브랜드를 대표하는 컬러 (예: 유튜브의 빨간색, 네이버의 녹색)
2️⃣ Secondary Color : Primary Color를 보완하는 컬러 (보색 또는 유사색 활용)
3️⃣ Neutral Color : 텍스트 및 배경에 사용되는 중립적인 컬러
4️⃣ Semantic Color : 시스템 상태를 나타내는 컬러 (빨강=경고, 녹색=승인, 노랑=주의)
🎨 배경과 컬러
✅ 컬러는 주변 환경(배경색)에 따라 영향을 받음
💡 다크/라이트 모드에 따라 배경색을 반전시켜야 가독성이 유지됨
🖍️ 형태와 컬러
✅ 컬러는 면적에 따라 가독성이 달라짐
💡 배경색이 넓으면 가독성이 높아지지만, 텍스트에는 명암 대비를 높여야 함
🚫 과도한 컬러 사용 피하기
✅ 너무 많은 컬러를 사용하면 사용자가 혼란스러울 수 있음
- 불필요한 컬러는 배제하기
- 강조할 정보만 컬러를 활용하기
- 텍스트와 배경 컬러 대비를 높여 가독성을 확보하기
✍️ 타이포그래피
📱 OS별 시스템 폰트
✅ 각 OS에서는 최적화된 시스템 폰트를 사용
- iOS : San Francisco
- Android : Roboto
- 웹 폰트: 프리텐다드, 스포카 한 산스, 슈트 등
💡 시스템 폰트는 다국어 지원, 다양한 사이즈와 굵기 제공, 경량화, 무료 사용 및 상업적 활용이 가능
🔠 Serif 와 Sans-Serif
✅ Serif : 글자 획의 끝부분이 도출된 형태로 신문, 책 등의 인쇄물에서 주로 사용. 예 : 명조체, 바탕체
✅ Sans-Serif : 글자 획의 끝부분이 돌출되지 않은 반듯한 형태로 가독성이 뛰어나며 현대적인 느낌을 줌. 예 : 고딕체
📌 세리프 vs 산세리프 차이점
- 세리프 : 글자 획의 굵기가 다르고 전통적인 느낌
- 산세리프 : 글자 획이 일정하고 직관적이며 가독성이 좋음
🔢 폰트 사이즈 가이드
✅ 모바일 디자인에서 사용자의 환경을 고려한 적절한 폰트 사이즈를 설정해야 함
| 용도 | 폰트 사이즈 (px) |
| Title (제목) | 18-32 |
| Body (본문) | 14-18 |
| Caption (캡션, 레이블) | 10-12 |
| Minimal Size (최소 크기) | iOS: 11 / Android: 12 / Web: 14 |
💡 디자인 작업은 PC에서 확대하여 작업하지만 실제 디바이스에서 확인하는 것이 중요
📏 시각적 계층 구조
✅ 타이틀, 서브 타이틀, 본문 순으로 구조화하여 가독성을 높임
✅ 폰트 크기, 두께, 컬러, 위치, 여백을 활용하여 시선을 유도하고 가독성을 확보
📌 계층 구조 활용법
- 타이틀(제목): 가장 강조해야 할 부분으로 크기와 두께를 조절
- 서브 타이틀(소제목): 타이틀보다 작고 본문보다 큰 크기 적용
- 본문: 자연스럽게 읽히도록 가독성 유지
💡 모든 텍스트를 강조하면 오히려 가독성이 낮아질 수 있음
🔠 일관된 폰트 스타일 유지
✅ 브랜드 이미지에 맞는 폰트를 선택하고 통일감 있는 디자인을 유지
✅ 다양한 폰트를 사용하지 말고, 같은 폰트 내에서 사이즈와 굵기를 조절하는 것이 좋음
📌 폰트 스타일 유지 가이드
- 한 페이지에 다양한 폰트를 사용하지 않기
- 동일한 폰트를 유지하여 일관성을 확보하기
- 강조할 부분에만 크기 및 두께 조절 적용
📏 여백과 정렬
✅ 가독성을 높이기 위해 자간(Letter Spacing)과 행간(Line Height)을 적절히 조정
✅ 타이틀, 서브 타이틀, 본문 간 여백을 활용하여 정보를 명확하게 전달
📌 여백과 정렬 가이드
- 자간: 글자가 커질수록 자간을 줄이고, 글자가 작아질수록 자간을 늘려 가독성 확보
- 행간: 타이틀과 서브 타이틀에는 1.2~1.5배, 본문에는 1.6~2.0배 적용
- 정렬: 타이틀, 서브 타이틀, 본문의 위치와 간격을 유지하여 가독성을 높임
💡 자간과 행간 설정에 따라 사용자의 가독성 경험이 크게 달라질 수 있음
🎨 브랜드 아이덴티티
✅ 브랜드를 대표하는 폰트를 활용하여 브랜드 인지도를 높임
📌 브랜드별 전용 폰트 활용 사례
1️⃣ 현대카드
- 기업 전용 서체인 YouandiNewKr를 개발하여 브랜드 아이덴티티를 강화
- 온·오프라인, 카드 디자인, 웹 등 다양한 채널에서 일관되게 적용
2️⃣ 배달의 민족
- 2012년부터 사용자에게 무료 폰트를 배포하여 브랜드 인지도를 높임
- 대표적인 폰트: 한나체, 주아체, 도현체, 을지로체 등 지속적으로 개발
- 서체 기반의 브랜딩 전략을 통해 효과적인 마케팅을 수행
🎨 아이콘 가이드
🏷️ 아이콘의 역할
✅ 아이콘은 복잡한 정보를 직관적이고 간결하게 표현하여 사용자의 상호작용을 도움
- 명확한 의미 전달 : 텍스트 없이도 직관적인 이해 가능
- 공간 절약 : 좁은 공간에서도 정보 제공
- 브랜드 아이덴티티 강화 : 브랜드의 성격과 이미지를 반영하여 사용자 기억에 오래 남음
🎯 일관된 아이콘 스타일
✅ 스타일을 통일하여 사용자 경험을 향상시키기
1️⃣ Outlined & Filled : 기본적인 형태로 가장 많이 사용됨
2️⃣ Colored : 피드백 제공 및 행동 유도에 활용
3️⃣ Image : 높은 주목도가 필요할 때 사용
📌 Stroke 두께 : 일정한 두께를 유지하여 통일성 확보 (예: 2px, 4px)
📌 Corner Radius: 아이콘 분위기에 따라 적절한 곡률 설정 (둥글수록 부드러운 느낌)
🧐 아이콘 시각 보정
✅ 사람의 눈은 착시로 인해 불균형한 이미지를 인식할 수 있음
📌 재생 버튼 정렬 : 무게 중심을 고려하여 시각적으로 중앙에 배치
📌 도형 크기 조절 : 원과 사각형의 시각적 균형을 맞추기 위해 원의 크기를 약 1.12배 확대
💡 아이콘이 너무 커 보이거나 작아 보일 경우 시각적 보정을 통해 균형 맞추기
✨ 아이콘 단순화
✅ 모바일 환경에서는 작은 크기로 표시되므로 선과 면을 최소화하여 가독성을 높이기
📌 세밀한 표현 줄이기 : 디테일한 디자인은 작은 크기에서 알아보기 어려움
📌 핵심 요소만 강조 : 불필요한 요소를 제거하여 직관적인 디자인 유지
💡 과도한 단순화로 인해 의미 전달이 어려워지지 않도록 주의
📐 레이아웃과 키라인
✅ 아이콘을 정렬하고 일관성을 유지하기 위해 구조적인 가이드가 필요
📌 트림 영역 (Trim Area) : 24x24px 기본 크기 유지
📌 라이브 영역 (Live Area) : 실질적 디자인 공간 (20x20px)
📌 패딩 (Padding) : 아이콘 여백 확보 (2px)
💡 키라인을 활용하여 아이콘 크기와 비율을 균일하게 유지
📏 배율 설정
✅ 모든 해상도에서 명확하고 일관되게 보이도록 배율을 설정
📌 배수 적용: 4, 8의 배수를 기준으로 아이콘 크기 조정 (예: 16, 24, 32, 48px)
📌 Constraints Scale 적용: 해상도별 자동 리사이징을 위해 필수 설정
💡 Scale을 적용하지 않으면 아이콘이 올바르게 리사이징되지 않을 수 있음
[과제]
과제1) Figma로 일관된 아이콘 세트를 만들어주세요.
과제2) 컬러, 타이포그래피, 아이콘을 활용하여 다이얼로그 UI를 디자인해주세요.
[마무리]
아이콘 만드는 과제할 때 일러스트 처음 배우던 때가 생각나서 재밌었다
그 때도 하트때문에 고생했는데ㅋㅋㅋ
뭔가 다른 것들 할 때보다 아이콘만들 때 더 즐겁게 피그마를 하고 있는 느낌이 든다
캠프 일정에 변동이 생겨서 발제를 듣고 왔는데 아니 세상에... 9일이나 연장이라니...
이게 왠 날벼락이람
아무래도 조기 수료를 해야할 것 같은데 뭔가 불이익이 생길것 같아 불안하다
일단 매니저님이 활동의 퀄리티는 똑같을 거라고 하시니 안심해야지
다음 과제 고!