🍎 오늘의 진도
● 실전! UI 디자인 2강
🍎 오늘의 학습
● 정보 구조화 -> 정보를 목적에 따라 정리 / 화면 안의 필요한 것들을 의도적으로 보이게 배치
- 사용자에게 보여줄 정보의 순서를 먼저 고민해야 함
● 정보 구조를 짜기 위한 UI 설계 -> 사용자의 목적과 행동이 정보 우선순위를 결정한다는 뜻
- 사용자는 필요 기능을 쓰기 위해 앱을 사용하므로 체계나 기준을 정하고 디자인해야 함
ex) 중고거래 서비스의 정보 구조 예시
● 클러스터링(Clustering) -> 모여있는 것
ex) 클러스터링, 메뉴판
▼ 게스탈튜 원리 중 근접성의 원리와 유사
- 정보 클러스터링, 콘텐츠 블록화
- 시선의 자연스러운 이동을 만들고, 더 쉽게 읽히게 함
▼ 정보의 친한 정도
- 중복 관계) 어머니 : 엄마 : 모친
- 인접 관계) 밥 : 진지 , 꼬리 : 꽁지 , 이 : 이빨
- 상하 관계) 사람 : 아이 : 소년 , 사람 : 노인 : 노파
● 시각적 위계와 시선 흐름 -> 사람이 화면을 인식하는 순서
- 강조를 하여도 위계로 나눔
*우리는 UI 안에서 사용자가 어떻게 움직이게 만들 것인가를 설계해야 함*
● 시선 흐름을 만드는 3가지 요소
▼ 타이포그래피 -> 글자의 크기(3~4개/4px씩 차이) , 굵기 , 문장의 간격 등을 조정하여 읽는 순서 만들기
- 타이포 스타일로 흐름 만들기
- 타이포스타일 이름짓기(네이밍 컨벤션 Naming Convention)→이름을 짓는 규칙
- 협업과 유지 보수의 효율성
+ 타이포 추가 정보
Display : 가장 큰 제목 (ex. 브랜드 메세지 , 메인 타이틀 등)
Title : 일반적인 타이틀 텍스트 (ex. 카드나 페이지의 제목)
Subtitle : 부제목 또는 보조 타이틀 (ex. 짧은 설명 , 서브 섹션 헤드라인 등)
Body : 일반적인 본문 텍스트
Caption : 날짜 , 태그 , 설명 등 작은 보조 정보
▼ 색상 채도 및 명도 -> 강조할 정보는 선명한 컬러 or 거절, 승인 등에 사용
- 같은 컬러여도 밝기 위계를 줄 수 있음
- 덜 중요하면 회색으로 처리하면 자연스러운 위계 생김
▼ 정렬과 여백
- UI의 질서를 시작적으로 보여주는 핵심 요소
- 정보 덩어리의 구분이 명확해짐
- 왼쪽 정렬을 하는 것이 좋음
● 플랫폼과 레이아웃 -> 사용자 맥락을 고려하여, 사용자 기기에 따라 달라져야 함
▼ 모바일 -> 사용자의 이동이 간편함 , 한 손 조작 , 빠른 탐색이 중요
- 화면 너비가 좁아 콘텐츠를 수직으로 나열
- 인터랙션은 엄지손가락이 중심
- 화면 내에 많은 정보를 넣기 보단 단순한 흐름을 설계 중요
▼ 데스크탑 -> 넓은 화면으로 복잡한 정보 구조를 한 번에 보여줌
- 정보량이 많아도 괜찮음 , 여러 컬럼으로 나누기 가능
- 세밀한 정보 제시와 조작이 가능함
- 한 화면 안에서 탐색과 입력을 동시에 처리하는 구조도 적합함
▼ 태블릿 -> 모바일과 데스크탑 사이에 위치함 , 양 손 조작 , 가로/세로 화면 전환 고려해야 함
- 화면 너비가 넓음 , 회전이 가능
- 양 손 조작과 터치 기반 입력을 동시에 고려해야 함
- 복잡한 인터랙션은 피해야 함
● 플랫폼별 레이아웃 전략
☑️콘텐츠 구조
- 모바일) 한 줄 흐름 , 수직 스크롤 중심 -> 정보는 '단계적으로'
- 데스크톱) 병렬 배치 , 섹션 분리 -> 정보는 '한눈에'
☑️네비게이션 전략
- 모바일) 상단 또는 하단에 최소한의 탐색 기능을 둬야 화면을 가리지 않음
- 데스크톱) 사이드바나 전체 메뉴 구조를 함께 보여줘도 괜찮음
☑️시선의 집중 영역
- 모바일) 화면 상단 또는 하단에 시선이 먼저 닿음
- 데스크톱) 화면 왼쪽 상단 -> 오른쪽 -> 아래 순으로 자연스럽게 시선이 흐름
● 반응형 레이아웃에서 유의할 점
⚠️실수 -> 모바일에 모든 콘텐츠를 그대로 넣으려 함
*작은 화면은 선택과 집중이 필요함*
⚠️실수 -> 콘텐츠의 흐름이 디바이스마다 바뀌지 않음
*수직 스크롤이 편한 모바일과, 병렬 탐색이 자연스러운 데스크롭의 사용 흐름은 다름*
⚠️실수 -> 시선 흐름이 고려되지 않은 배치
*화면마다 눈이 먼저 가는 영역이 다름*
● UI 평가 요소 7가지
1) 정렬 (Alignment) -> 같은 타입의 콘텐츠는 같은 라인에 정렬 , 왼쪽 정렬
Q. 왼쪽에서 아쉬운 점 찾아보기
2) 공간감(Spacing) -> 같은 정보끼리 가깝게, 다른 정보는 멀리 배치
3) 정보 밀도(Densety) -> 정렬과 배치에 영향을 받음
💡3~5개의 정보 덩어리로 구성
4) 시선의 무게중심(Visual Weight) -> 가장 먼저 시선이 닿으면서, 화면의 중심적 역할을 하는 요소
5) 시각적 위계(Visual Hierarchy) -> 무엇을 먼저 보고, 어떤 순서로 행동할 것인가를 설계
6) 정보 흐름(Flow) -> 위계 정리되어 있어도, 자연스럽게 연결되어야 함
7) 목적 적합성(Fit for Purpose) -> 사용자 목적을 찾는 것과 가까움
● MVP(Minimum Viable Product) 디자인의 목적 -> 최소 가치 제품이라는 뜻
- 정보구조도(IA)
- 플로우차트(화면흐름도) -> 제품의 전체적인 구조와 흐름을 파악할 때 효율적인 도구
☑️정보구조도(IA) VS 플로우차트(화면흐름도)
ex) 층별 안내도 VS ex) 오시는 길
▼ 플로우차트의 역할 -> 기획을 디자인으로 옮기는 방법
- 사용자가 어떤 의사결정 경로를 따라갈지 예측
- 서비스에 필요한 화면 간 이동 구조를 시각화
- MVP의 범위를 정의하고, 불필요한 화면 설계를 방지해 비용을 절약
💭플로우차트를 만들기 전 생각할 것
- 사용자의 목적은 무엇?
- 그 목적을 달성하기 위해 어떤 단계를 걸쳐?
- 그 중 '가장 최소한의 행동'은 어떤 흐름이야?
● 와이어프레임(Wireframe) -> 사용자 경험의 뼈대를 만들 때
- 시각적 표현 없어도 사용자 목적이 충족되는지 검토 가능
▼ 와이어프레임 그리는 기본 순서 -> *작성 시 꼭 메모 남기기*
1) 사용자 목적과 화면의 역할 정의
2) 필요 정보와 우선순위 정하기
3) 사용자 흐름과 행동 유도 점검
💡와이어프레임 설계 실전 팁
1) 화면의 맥락부터 정하기
2) 덩어리부터 크게 접근하기 -> 큰 레이아웃 단위부터 ~
3) 컴포넌트의 역할을 정확히 명시
4) 여백과 정렬은 정확하지 않아도 괜찮음
● 전략적 UI 사고 훈련 -> 화면의 목적에 따라 전략적으로 구조를 바꾸는 사고 전환
- CTA는 '위치' 보다 '전략'이 더 중요함
● 화면목적에 따른 전략적 예시
🛒상품 구매 중심 (미국 베스트바이 커머스 앱)
메인 이미지 → 제목 및 가격 → 후기 → CTA로 구매 유도
🔔구독 신청 중심 (챗 gpt 구독)
서비스 제목 → 구독 혜택 → 가격 및 비교 포인트 강조→ CTA로 구독 유도
ℹ️정보 전달 중심 (구글맵)
제목 → 관련 정보 → 보조 정보 및 기능 안내
🍎 오늘의 과제 - 2강
[실습] 클러스터링 주어진 정보를 알맞게 덩어리로 나눠보기
[실습] 시각적 위계 설계하기
[실습] 플랫폼 별 레이아웃 전략
[실습] 최소한의 여정 도출하기 (2-5)
진행 중
[실습] 와이어프레임 설계하기 (2-6)
[실습] 목적에 맞는 UI 구조 설계 (2-7)
🍎 느낀점 & 내일 할 일
오늘..집중을 평소보다 못 한 건지 강의에 대해 TIL 하는데 분량이 많다고 느껴졌다. 아니면 생각을 요하는 과정이라서 더 그렇게 느낄 수 있겠다. 오늘 시간상 과제는 다 못할 것 같아서 강의를 미리 들었고 내일 할 일에 강의 3-2강 부터 4강까지 완강을 달릴 것이다. 그리고 강의 내 과제도 마칠 것이다. 개인과제(3)도 얼른 맛보는 시간을 가지고 싶다. 열심히 달려보자 -!!
그리고 새로운 팀원 4조와 이틀째 보내는 하루다. 팀장님이 몸이 안좋으셔서 걱정이고 얼른 쾌차하셨으면 좋겠다ㅜㅜ 그래도 일일팀장님의 활약 덕분에 마무리를 잘 보내었다. 아! 카메라 인증샷때, 손모양을 별모양처럼 만들어 합을 맞춰 보았는데 너무너무 귀엽고 잘 맞았다!! 팀워크가 상당히 좋은 것 같아서 앞으로도 기대 된다😆