[10/21_To Do]
- UI 디자인 Chepter 2. UI 설계와 정보 구조
- UI 디자인 Chepter 3. 컴포넌트 설계
- UI 디자인 Chepter 4. 프로토타입과 제품 설계
UI 디자인 Chepter 2. UI 설계와 정보 구조
와이어프레임(Wireframe)
디자인하기 전, 와이어프레임으로 제품을 논리적으로 설계할 수 있음
와이어프레임을 그리는 순서
- 사용자 목적과 화면의 역할 정의
- 필요한 정보와 우선순위 정하기
- 사용자 흐름과 행동 유도 점검
와어프레임 설계 실전 팁
- UI가 아니라, 화면의 맥락부터
- 덩어리부터 크게 접근
- 컴포넌트의 역할을 정확히 명시
- 여백과 정렬은 정확하지 않아도 됨
[실습] 와이어프레임 설계하기
☑️ "새벽 배송으로 우유 구매" 플로우 차트로 와이어프레임 설계
전략적 UI 사고 훈련
화면의 목적에 따라 전략적으로 구조를 바꾸는 사고 전환
- 상품 구매 중심: 메인 이미지 → 제목 및 가격 → 후기 → CTA로 구매 유도
- 구독 신청 중심: 서비스 제목 → 구독 혜택 → 가격 및 비교 포인트 강조 → CTA로 구독 유도
- 정보 전달 중심: 제목 → 관련 정보 → 보조 정보 및 기능 안내
화면을 그리기 전에 생각해봐야할 것
- 이 화면이 설득하고자 하는 건 무엇인가요?
- 구매 / 구독 / 정보 탐색 / 행동 유도
- 사용자의 목적은 무엇인가요?
- 빠른 결정 / 여러 옵션 탐색 / 신뢰 확보
- 비즈니스 목표는 무엇인가요?
- 전환율 / 체류 시간 / 유입 분산
[실습] 목적에 맞는 UI 구조 설계
목적: 온라인 강의 선택과 수강
강의 선택 중심: 강의 썸네일 → 강의 제목 → 강의 정보 → 별점 → 강의 시간
- 강의 카드가 먼저 보일 수 있도록 상단에 배치
- 검색바와 검색 카테고리는 같은 분류로 같이 묶어서 배치
- 타이틀이 더 잘 보일 수 있도록 텍스트 크기 수정
- 강의 썸네일이 카테고리 썸네일보다 눈에 띄도록 이미지 색 조절
UI 디자인 Chepter 3. 컴포넌트 설계
좋은 컴포넌트의 기준
- 재사용성(Reusability)
- 유연성(Flexibility)
- 확장성(Scalability)
- 일관성(Consistency)
- 협업 친화성(Collaboration-friendly)
[실습] 컴포넌트 리뷰
☑️ 화면에서 반복되는 패턴이거나 의미 있는 구조를 가진 UI 요소를 골라 컴포넌트로 만들고 분석
- 선택 요소: CTA 버튼
- 컴포넌트로 만든 이유: 사용자의 행동이 필요한 화면에서 반복해서 사용됨
- 상태 고려: 사용자 행동 유도에 따른 텍스트, 중요도에 따른 컬러
- 재사용 구조화 방법: 텍스트 속성 변경, 중요도에 따른 컬러 속성 변경 가능하게 설계
실무 컴포넌트 네이밍 컨벤션
컴포넌트 네이밍: 구성 요소와 속성의 구조를 설명하는 도구
네이밍 구성 예시
- Component Type: 어떤 UI 요소인지 카테고리를 나타냄
- Style: 위계나 스타일을 알려줌
- State: 인터랙션이 있거나 상태가 바뀌는 경우를 나타냄
- Size: 크기가 다른 경우를 나타냄
→ 이걸 모두 조합하면 이렇게 이름을 지을 수 있음 - Button/Primary/Default/Medium
컴포넌트 네이밍 실전 팁
- 예외 상항도 구조를 유지한 채 명확히 처리
- 검색에 강한 구조로 예측 가능한 순서를 유지
[실습] 컴포넌트 네이밍 컨벤션 작성
☑️ 컴포넌트들을 관찰하고 네이밍 컨벤션을 설계, 적용
(기존에 진행하였던 토스 클론 디자인의 컴포넌트를 활용)
- card 컴포넌트의 경우 "card/style name"으로 네이밍
- banner 컴포넌트의 경우 "banner/size/예외"로 네이밍
- 전체적으로 "Component Type/스타일/사이즈"로 네이밍하여 일관성을 유지하였다.
실무 배리언츠 & 프로퍼티 전략
실무에서 해결하는 일반적인 방법
| 속성 유형 | 가장 적절한 구조 방식 |
| On/Off 여부만 존재 | ✅ Boolean |
| 복수 선택지 (2개 이상) | ✅ Variant |
| 이미지나 컴포넌트 교체 | ✅ Instance Swap |
트레이드오프(Trade-off)
- 어떤 것을 얻기 위해 다른 것을 포기하는 '상호 교환의 선택'
- UI 디자이너는 어느 정도를 포기하고 어느 정도까지 챙길 것인지 판단해야 함
[실습] UI 상태 흐름 재설계
☑️ 사용자 흐름에서 발생할 수 있는 모든 상황을 고려하여 설계
(기존에 진행하였던 CGV 클론 디자인 씨네톡 화면을 활용)
씨네톡 화면에서 사용자가 겪을 수 있는 다양한 경우와 인터랙션 작성
디자인 시스템과 컴포넌트 고도화
디자인 시스템 운용 전략
- 모든 컴포넌틀를 구조화할 필욘 없음
- 재사용 가능성이 높은 요소부터 차근차근 구조화
- 배리언츠로 굳이 만들지 않아도 기본적인 UI를 갖출 수 있음
- 처음부터 완성된 시스템을 가지려고 하지 말 것
- 의도와 맥락을 이름이 담아야 함
- 컴포넌트에 네이밍을 잘 하는 것만으로도 충분한 정보를 담을 수 있음
일관성 있는 UI를 위한 관리 전략
- 무조건 Auto Layout을 쓰지 않아도 됨
- 색상, 텍스트 스타일은 3~5개로 시작해도 됨
- 컴포넌트 상태는 '의미' 중심으로 구분
UI 디자인 Chepter 4. 프로토타입과 제품 설계
프로토타입의 목적
- 사용자의 목적에 맞는 흐름인지 검증하는 과정
- 프로토타입은 디자인 결과물이 아님
- 내가 디자인한 제품이 실제로 사용자의 목적에 부합하는지 확인하는 실험 도구
프로토타입 설계의 핵심 질문
- 이 흐름은 사용자 목적을 충실히 따라가고 있나요?
- 어떤 화면이 꼭 필요한가요? 어떤 화면은 과잉인가요?
- 중간에 사용자가 헤매거나 벗어날 여지는 없나요?
⚠️ 디자인 결과물로써의 완성도 < 디자인의 목적과 흐름의 연결성
[실습] 생각해보기
지금 제품의 프로토타입은...
- 사용자의 목적이 흐름 전체에 걸쳐 ‘한 줄’로 꿰어져 있나요?
- 만약 사용자가 도중에 나가거나 실패한다면, 어떤 지점에서일까요?
- 다른 사람도 이 흐름이 어떤 목적을 위해 설계된 것인지 명확하게 이해할 수 있을까요?
프로토타입과 사용자 흐름 설계
사용자 흐름의 3가지 종류
- Happy Path: 우리가 바라는 이상적인 사용자 흐름
- Edge Case: 예상치 못한 상황에서 발생하는 예외적인 흐름
- Alternate Path: 같은 목적을 다른 방법으로 도달하는 흐름
프로토타입 실전 설계 팁
- 해피패스를 먼저 정리한 후, 여기서 문제가 생기면 어떻게 될지 계속 질문
- 사용자가 다르게 행동할 수 있는 지점(입장 방식, 검색 방식 등)을 표시
- 각 흐름을 플로우차트로 간단히 그려놓으면, 놓치는 흐름 없이 설계 가능
실전에서 고려해야 할 흐름 설계 시나리오
| 상황 | 설계 시 체크포인트 |
| 회원가입 중간에 나가는 경우 | 재방문 시 어디부터 다시 시작하게 할 것인가? |
| 입력값 오류 발생 | 사용자가 원인을 쉽게 이해하고 수정할 수 있도록 돕고 있는가? |
| 조건 분기 | 유저 상태(예: 로그인 여부)에 따라 다른 흐름이 구현되고 있는가? |
| 중단 이후 재시작 | 임시 저장, 복구, 또는 다음 행동으로 자연스럽게 유도하는가? |
사용자 흐름 구조적으로 정리하기
- 플로우 차트(Flowchart)
- 시나리오 플로우(와이어프레임, 사용자 여정 지도)
- 피그마 프로토타입 + 설명 텍스트
[실습] 3가지 흐름 설계하기
- 이전에 만든 디자인을 보고, 사용자의 흐름을 만들어 보세요
- ex) 회원가입 → 홈 → 상품 리스트 → 상품 상세 → 결제
- 다음 항목을 중심으로 사용자 흐름 점검 및 설계 개선을 진행해 보세요
- Happy Path 점검: 이상적인 사용자의 흐름, 어떤 경로로 시작해 어떤 목적에 달성하는지
- Edge Case 대응: 중간에 사용자가 멈추거나 실패할 수 있는 지점(인증 실패, 검색 결과 없음, 결제 오류, 인터넷 끊김 등)
- Alternate Path 설계: 같은 목적에 도달할 수 있는 다른 경로 화면 고려(검색으로 진입, 추천 상품 선택, 카테고리 탐색 등)
프로토타입과 UX 설계 고도화
사용자가 멈추지 않게 만드는 UI 전략 5가지
1. Dead-end(막다른 길) 제거하기
- 빈 상태(Empty State) : 빈 곳에 도달했을 때, 막다른 길처럼 느껴지지 않게
- 리디렉션(Redirection) : 정상 흐름에서 벗어난 사용자에게 자연스럽게 다른 행동을 제안, 제시
2. Affordance(어포던스)를 확실히 전달하기
- 어포던스는 행동유도성으로 사용자에게 가능한 행동을 시각적으로 암시, 유도하는 UI 성질을 말함
3. Nudging(넛징)으로 부드럽게 다음 행동 유도하기
- 강요하지 않고도 원하는 방향으로 유도하는 UI 전략
4. Hierarchy Back vs. History Back
| 용어 | 의미 | 예시 |
| History Back (히스토리 복귀) | 사용자의 방문 이력을 ‘시간 순으로’ 되돌아감 | A → B → C → B |
| Hierarchy Back (계층 복귀) |
기능·계층 구조상 ‘상위 단계’로 이동 | A(홈) → A.1(리스트) → A.1.1(상세) → A.1(리스트) |
→ '뒤로가기' 버튼을 눌렀을 때 사용자가 누른 의도를 파악해서 둘 중 적합한 것으로 제시해줘야 함
→ '뒤로가기' 행동에서 많은 이탈이 일어날 수 있으니, 이를 유의하는 것이 중요
5. 터치 영역은 '보이는 것'보다 커야 함
- 애플 휴면 인터페이스 가이드라인: 최소 44px
- 구글 머티리얼 디자인: 최소 48px
[실습] 사용자 흐름 UX 리디자인
☑️ 위의 UX 고도화 전략 5가지를 적용해 사용자 흐름을 개선
☑️ 적용 전후의 흐름이 어떻게 개선됐는지 분석
프로토타입 점검하기
"이 흐름이 정말 사용자에게 의미 있는 흐름일까?" 질문하기
프로토타입 점검 체크리스트
- 이 화면에서 사용자가 해야 할 '행동'이 단 하나로 잘 보이나요?
- 흐름에 꼭 필요한 화면만 포함되어 있나요?
- 사용자가 중간에 멈출 만한 지점이 있진 않나요?
- 화면 구성은 목적과 지표에 부합하나요?
- 상태에 따라 흐름이 잘 분기되나요?
- 시선 흐름이나 시각적 위계가 잘 반영됐나요?
[실습] 프로토타입 점검 및 재설계
1️⃣ 주어진 화면의 프로토타입을 연결하고, 흐름을 점검
→ 주어진 화면에선 '상세화면 동작 화면 / 장바구니 화면 / 결제하기 버튼 / 결제 완료 화면'이 추가로 필요했음
2️⃣ 필요한 화면 추가 설계
→ 기존의 화면에서 사용자가 목적에 달성하는데에 필요한 화면들과 요소들을 추가
3️⃣ 프로토타입으로 플로우 확인
프로토타입으로 협업하기
실무 프로토타입 활용 사례
- 디자인 리뷰
- 기획, 개발과 스펙 협의
- 유저 테스트(UT) 시나리오 구성
- 그 외 활용법
[실습] 프로토타입 리뷰하기
☑️ 프로토타입을 객관적인 시선에서 리뷰하기
- 이 프로토타입은 어떤 사용자 흐름을 검증하기 위해 만들어졌나요?
- 이 프로토타입을 보면 추가 설명 없이 '왜 이렇게 설계했는지' 이해할 수 있나요?
- 팀원들이 피드백을 주기 쉬운 구조인가요?
- 이 프로토타입은 유저 테스트나 리뷰에 적합한 형태인가요?
'2025 내일배움캠프' 카테고리의 다른 글
| [MVP UI/Prototype 설계] 2. 사용자 목표 설정과 IA, 와이어프레임 제작 (0) | 2025.10.23 |
|---|---|
| [MVP UI/Prototype 설계] 1. 중고거래 앱 분석 (0) | 2025.10.22 |
| UI 디자인 실무 설계와 정보 구조 (0) | 2025.10.20 |
| UXUI 실무 프로세스와 디자인 툴 (2) | 2025.10.17 |
| 음식 배달 시장 문제 아이디어 구체화, 와이어프레임 제작하기 (2) | 2025.10.16 |