[9/30_To Do]
- UI 디자인 강의 수강
- 1강 - UI 디자인 핵심원리
- 2강 - UI 디자인 기본
1-1. 디자인 원칙
UI 디자인 핵심원리
- 사용자 이해
- 직관적인 디자인
- 버튼, 링크등 사용자의 행동 유도
- 픽토그램, 아이콘 등 정보를 시각적으로 표현
- 대비 높은 색상 조합 / 간단한 레이아웃 / 유연한 인터페이스 / 아이콘 및 픽토그램 사용
- 일관된 디자인
- 신뢰성 향상 / 업무 효율성 증대
- 디자인 시스템 구축 / 사용자 피드백
- 가독성을 고려한 디자인
- 여백 / 콘텐츠 그룹화 / 크기와 비율 / 계층 구조
- 명확한 피드백 제공
- 즉각적인 피드백 제공
- 명확한 피드백 제공
- 접근성을 고려한 디자인
- 텍스트 + 아이콘 / 입력필드 / 텍스트 콘텐츠 / 텍스트 + 라인
- 명도 대비(WCAG 권장에 따라 텍스트와 배경의 명도 대비는 4.5:1 이상이어야 함
1-2. 사용자 경험을 향상 시키는 방법
- 직관적인 네비게이션
- 예상 가능한 카테고리 / 일관된 메뉴 구조 / 메뉴 depth 최소화
- 픽토그램, 아이콘 사용 / 활성화 효과
- 다양한 디바이스 지원
- 디바이스 최적화 / 그리드 시스템
- 사용자 피드백 반영
- 사용자 VOC(Voice of Customer, 고객의 소리) 분석 / 사용자 설문 조사 / 사용자 인터뷰
HW. 숙제
디자인 핵심 원리가 잘 적용된 사례 찾아보기
1️⃣ 직관적인 디자인 사례 - 카카오뱅크
카카오뱅크의 경우, 사용자의 행동을 유도하는 컬러박스, 버튼 등을 사용하고 픽토그램을 같이 사용하여 사용자에게 직관적인 이해를 돕고 있었다. 또 다양한 픽토그램을 사용하는 만큼 레이아웃은 간결하게 유지하는 것을 확인할 수 있다.
2️⃣ 일관된 디자인 사례 - 왓챠
OTT 서비스인 왓챠의 경우, 휴대폰 화면부터 TV 스크린까지 다양한 디바이스에서 사용된다는 특징이 있는데 디바이스가 달라져도 같은 디자인 시스템을 사용하여 사용자에게 일관적인 경험을 제공해주고 있었다. 특히 클릭되어야하는 버튼들과 콘텐츠의 레이아웃을 일정하게 사용하여 평소 사용하던 디바이스가 아닌 다른 디바이스를 사용하더라도 사용자가 어렵지 않게 사용할 수 있을것이라고 생각된다.
3️⃣ 가독성을 고려한 디자인 사례 - ios App Store
앱 스토어의 경우 다양한 어플들을 잘 정리하는게 보여주는게 중요하다고 생각하는데, ios App Store는 계층 구조와 콘텐츠 그룹화를 메인 레이아웃으로 사용하여 사용자에게 전달하고 있었다. 가로 화면을 꽉 채우는 광고 베너를 상단에 사용하여 먼저 시선이 닿는 것을 유도하고, 그 다음 밑으로 스크롤 되어 나열된 콘텐츠 그룹을 제공하고 있다. 특히 여러 어플들을 카테고라이징하여 한 컨텐츠로 묶어 제공해주는 방식이 그냥 어플들을 나열해서 보여주는 방식보다 사용자에게 가독성 높게 다가올 것이다.
2-1. 컬러
- 컬러의 역할
- 중요한 정보 강조 - 계층구조(명도 차이), 컬러 차이로 강조
- 사용자의 행동 유도 - 컬러를 넣어 사용자가 누르고 싶도록 유도, 컬러의 의미를 활용(녹색: 출발, 빨간색: 멈춤)
- 상태(State) - 텍스트 필드 입력 / 버튼의 활성화와 비활성화 / 토글 / 탭
- 브랜드 아이덴티티 - 브랜드 이미지를 떠오르게 하는 강력한 전달 요소
- 컬러 비율
- 일반적으로 5(주색, 브랜드 컬러):25(보조색):70(배경색)의 비율 사용
- 강조영역 최소화. 주색 비율이 커지지 않는 것이 중요
- UI 컬러 구성
- Primary color: 주색, UI에서 가장 강조해야 하는 영역에 사용, 브랜드를 대표하는 컬러
- 브랜드 로고 / 앱 아이콘 / 스플래시(앱 로딩 첫 화면) / CTA 버튼 / 중요 정보 강조 에 사용됨
- Secondary color: 보조색, Primary color를 보완해주고 조화를 이루는 컬러
- 보색을 사용 / 유사색을 사용 / 브랜드 로고에 사용
- Neutral color: 중립의 컬러로 UI 디자인에서 지원 역할, 흰색에서 검은색까지 음영을 포함
- Semantic color: 시스템 컬러, UI 디자인에서 현재 시스템의 상태를 알려주며 상호작용을 보여주는 역할
- Primary color: 주색, UI에서 가장 강조해야 하는 영역에 사용, 브랜드를 대표하는 컬러
- 배경과 컬러
- 다크/라이트 모드에 따라 각 모드에 맞는 컬러의 사용
- 형태와 컬러
- 컬러는 상대적. 형태에 따라 영향을 받음
- 배경의 경우 면적이 넓기 때문에 가독성이 높음 / 텍스트의 경우 면적이 좁아 가독성이 낮음
2-2. 타이포그래피
- OS별 시스템 폰트
- IOS, Android 시스템 폰트
- 웹 폰트
- 주로 프리텐다드, 스포카 한 산스, 슈트 사용
- 폰트 사이즈
| 용도 | 폰트 사이즈 |
| Title 제목 | 18-32 |
| Body 본문 | 14-18 |
| Caption, Label 캡션, 레이블 | 10-12 |
| Minimal size 최소 사이즈 | IOS: 11 / Android: 12 / Web: 14 |
- 시각적 계층 구조
- 타이포그래피 활용(사이즈, 두께, 컬러 등) / 명확한 계층 구조(타이틀-서브타이틀-본문)
- 일관된 폰트 스타일
- 하나의 제품에는 동일한 폰트로 통일해서 사용하는 것을 권장
- 하나의 화면에서는 사이즈를 최소화. 다양한 폰트 사이즈를 지양
실습: 목록 화면 리디자인
1️⃣ 목록 텍스트 분석
2️⃣ 목록화면 리디자인
- 위의 분석을 바탕으로 텍스트 위계를 더 명확하게 하고, 위계 속에서도 정돈되어 보일 수 있도록 너무 많은 사이즈를 사용하지 않는 방향으로 리디자인을 진행
- 상품 카드의 크기가 작아질 경우 여러 위계가 더욱 복잡해보여 2단 그리드로 변경, 카드의 크기를 키움
- 색상으로 강조된 부분은 유지하고 시선이 위에서 아래로 흐르도록 순서를 조정하여 재배치
2-3. 아이콘
- 아이콘의 역할
- 복잡한 정보를 직관적이고 간결하게 표현
- 브랜드 아이덴티티를 표현할 수 있음
- 일관된 아이콘
- 아이콘 스타일 - Outllined, Filed, Colored, Image와 같은 다양한 스타일
- 두께(Stroke) - 두께에 따라 달라지는 분위기
- 곡률(Corner radius) - 아이콘의 통일성을 위해 모든 아이콘에 동일하게 적용
- 일관된 스타일 - 일관된 경험 제공을 위해 일관된 스타일을 제공해야 함
- 아이콘 시각 보정
- 시각 보정을 통해 균형 있는 아이콘을 제작
- 아이콘은 소숫점이 발생해도 괜찮음
- 아이콘 단순화
- 아이콘은 선과 면을 최소화하여 단순화하여 작업
- 레이아웃과 키라인
- 아이콘 영역
- ① 트림 영역: 일반적으로 24*24, 아이콘의 실제 사이즈
- ② 라이브 영역: 패딩 영역을 제외한 실질적 작업 영역, 일반적으로 20*20
- ③ 패딩: 일반적으로 상하좌우 2만큼의 영역, 여유 공간
- 아이콘 영역
- 아이콘 형태
- 정사각형 / 원형 / 가로로 긴 사각형 / 세로로 긴 사각형
- 같은 영역 안에서 가로로 긴 사각형 가로 너비와 세로로 긴 사각형 세로 너비를 동일하게 적용
- 아이콘 키 라인
- 아이콘을 일관되게 배치하기 위한 명확한 규칙
- 정사각형, 원형, 가로 직사각형, 세로 직사각형 모양이 포함
- 배율 설정
- 배수 설정하기: 일반적으로 4, 8의 배수 사용
- Scale 적용하기: 리사이징에 대응하기 위해 Scale을 꼭 적용
HW. 숙제1
Figma로 일관된 아이콘 세트 만들기
실습 완료
HW. 숙제2
컬러, 타이포그래피, 아이콘을 활용하여 다이얼로그 UI를 디자인
- 2개 타입의 다이얼로그 만들기
- A type: 타이틀 1줄, 본문 3줄 이상, 버튼 2개를 포함
- B type: 타이틀 1줄, 본문 3줄 이상, 아이콘 1개, 버튼 2개를 포함
실습 완료
'2025 내일배움캠프' 카테고리의 다른 글
| 디자인 시스템 제작으로 Toss App 클론하기 (0) | 2025.10.02 |
|---|---|
| UI 디자인 레이아웃과 그리드, 컴포넌트 제작 (0) | 2025.10.01 |
| Figma로 CGV App 클론하기 - 4(완료) (1) | 2025.09.29 |
| Figma로 CGV App 클론하기 - 3 (1) | 2025.09.26 |
| Figma로 CGV App 클론하기 - 2 (텍스트박스의 오토레이아웃과 리사이징) (1) | 2025.09.25 |