[제로베이스 UIUX 파트타임 스쿨] 학습일지 - 5

 

①  5주차 수강한 분량

Chapter 5. 디자인 컨셉과 정보구조

Chapter 6. 인터랙션 디자인

Chapter 7. 디자인 평가 및 테스트

Chapter 8.  UX 디자이너 되기

---

 

② 각 강의별 학습하며 새롭게 알게된 점

🎨 5-1. 디자인 컨셉 (Design Concept)

디자인 컨셉은 서비스나 제품이 궁극적으로 전달하고자 하는 핵심 아이디어를 시각적으로 표현하는 것이다. 스케치, 이미지, 키워드, 텍스트 등의 다양한 매체를 통해 표현된다.

왜 중요한가?

사용자와의 첫 접점에서 전달되는 인상은 매우 중요하다. 컨셉이 정리되어 있어야 디자이너뿐 아니라 기획자, 개발자 등 다양한 직군이 하나의 방향성을 가지고 작업할 수 있다.

구성 요소

• 목표: 이 제품이 해결하고자 하는 문제는 무엇인가?
• 범위: 이 컨셉이 적용될 범위는 어디까지인가?
• 정황(문맥): 사용자가 이 제품을 어떤 상황에서, 어떤 기기로 사용할 것인가?
• 전략: 어떤 방법으로 목표를 달성할 것인가? (예: 미니멀, 감성 자극, 실용 중심 등)

1. concept idea	2. development	3. design concept
concept idea	make a detail	service structure
keywords	technical review	design scope
kep value	business review	key actor/feature(ujm or stroy mapping)

 

 

🧭 5-2. 정보 구조 설계 (Information Architecture Design)

**정보 구조(IA)**는 웹사이트나 앱에서 정보와 기능이 어떤 흐름과 관계를 가지는지를 체계적으로 정리하는 과정이다. 사용자가 정보를 쉽게 찾고, 이해하고, 탐색할 수 있도록 하는 설계다.

설계 시 고려할 점

• Context (문맥): 비즈니스 목적, 운영 환경
• Content (내용): 정보의 종류, 양, 형태
• User (사용자): 과업의 난이도, 특성, 사용 환경

카드 소팅

사용자에게 카드로 정보 항목을 주고 분류하게 하여, 멘탈 모델을 파악하는 방식. 유저 친화적인 구조로 개선할 수 있는 단초를 제공한다.

 

🧩 6-1. UI 컴포넌트와 레이아웃

**UI (User Interface)**는 사용자가 시스템과 상호작용하기 위한 모든 시각적 요소를 의미한다. 텍스트 필드, 버튼, 탭, 슬라이더 등 다양한 컴포넌트를 포함한다.

참고할 디자인 가이드

• Apple Human Interface Guideline
• Google Material Design

UI 디자인은 단순히 보기 좋음이 아니라, 일관성과 직관성, 사용 편의성을 모두 고려해야 한다.

🧱 6-2. 디자인 환경과 제약

디자인은 그 자체만으로 존재하지 않는다. 항상 기술적·환경적 제약 조건 내에서 구현된다.

제약 요소 예시

• iOS/Android 각각의 플랫폼 UI 규칙
• 접근성 관련 법적 기준
• 성능 이슈(저사양 기기 지원 등)

이러한 제약을 이해하는 것이 실무 UX/UI 디자이너로서 매우 중요하다.

 

🛤️ 6-3. 인터페이스 디자인: 프로세스와 요구사항 정의

UI/UX 디자인 프로세스는 사용자의 니즈와 비즈니스 목표를 바탕으로 제품의 흐름과 기능 요구사항을 구체화하는 단계다. 디자이너가 단순히 예쁜 화면을 만드는 것을 넘어, 사용자와 시스템 간의 상호작용 구조를 체계적으로 설계하는 출발점이다.

핵심 요소

• 요구사항 수집
  사용자 인터뷰, VOC(Voice of Customer), 이해관계자 미팅 등을 통해 요구사항을 수집한다. 이때는 ‘사용자가 무엇을 하길 원하는가?’와 ‘시스템이 어떤 기능을 제공해야 하는가?’를 동시에 고려해야 한다.
• Use Case 도출
  실제 사용자 시나리오를 기반으로 기능 흐름을 설계한다. 예: "로그인 후 마이페이지에서 주문 내역 확인하기"
• Task Flow & User Flow 설계
  사용자의 행동 경로를 시각화하여 전체 사용 흐름을 정리한다. 복잡한 화면 이동이나 예외 상황도 포함되어야 한다.
• 시스템 요구사항 정리
  프론트/백엔드 개발과 연결되는 기술 요구사항이나, 보안, 반응성, 플랫폼 제약 조건 등을 함께 정의한다.

목적

이 단계에서의 결과물은 디자이너뿐 아니라 기획자, 개발자, PO와 공유될 수 있는 기준점이 되며, 이후 UI 설계와 프로토타이핑의 기반이 된다.

 

🎨 6-4. 인터페이스 디자인: UI 디자인

UI 디자인 단계는 앞서 정의된 요구사항과 정보 구조를 바탕으로, 실제 화면 구성 요소들을 시각적으로 설계하는 과정이다. 단순한 그래픽 작업이 아니라, 사용자의 행동 흐름을 고려한 인터랙션 중심의 시각화다.

주요 작업 내용

• 와이어프레임 제작
  각 페이지 또는 화면의 구조와 콘텐츠 배치, 기능 흐름을 단순한 회색톤(또는 기본 형태)으로 설계한다. 실제 콘텐츠는 없지만 기능의 배치와 논리 구조를 파악할 수 있다.
• 비주얼 디자인 적용
  브랜드 아이덴티티에 맞춰 색상, 폰트, 여백, 아이콘 등을 입힌다. 이때 디자인 시스템이나 스타일 가이드를 참고하여 일관성을 유지한다.
• UI 컴포넌트 설계
  버튼, 탭, 입력창, 토글 등 사용자와 직접 상호작용하는 요소를 설계한다. 각 컴포넌트는 반복 재사용되므로 일관된 규칙이 중요하다.
• 인터랙션(상호작용) 설계
  클릭, 터치, 호버, 전환 효과 등의 반응을 설계한다. 사용자의 행동에 어떤 피드백이 주어질지를 정의하는 과정이다. 피그마, 프레이머 등으로 시뮬레이션 제작도 가능하다.

결과물

UI 디자인의 최종 산출물은 개발자가 실제 구현할 수 있도록 구성된 디자인 시안 + 가이드 문서이다. 이는 개발과 QA 과정에서도 기준점이 된다.

 

📝 6-5. UI 디자인 프로세스

• 요구사항 정의: 사용자 니즈, 비즈니스 목표 분석
• UI 설계: 와이어프레임, 스타일가이드, 인터랙션 설계
• UI 리뷰: 사용성 검토, 예외 케이스 대응

UI 디자인은 ‘정보 구조’ 위에 쌓아 올리는 실제 화면 설계이자, 유저와의 첫 접점이다.

copyright. https://www.protopie.io/blog/low-fidelity-vs-high-fidelity-prototyping

 

🧪 7-1. 프로토타입이란?

프로토타입은 제품 완성 전, 구조와 흐름을 테스트할 수 있도록 시뮬레이션한 결과물이다.

• Lo-fi: 종이, 스케치, 흑백 와이어프레임 등 단순한 형태
• Hi-fi: 실제와 거의 유사한 UI, 인터랙션 포함

아이디어를 현실적으로 검증하고, 빠르게 피드백을 받기 위한 수단이다.

 

🛠️ 7-2. 프로토타입 제작 흐름

1. 제작 목적 정의: 내부 리뷰용인지, 외부 테스트용인지 구분
2. 시나리오 기반 제작 범위 설정
3. 툴 선택(Figma, Protopie 등)
4. 화면 구성 및 이동 설계
5. 공유 및 피드백 수렴

이 과정은 개발 전 UI 흐름을 검증하고 오류를 줄이는 데 핵심적이다.

 

🚀 7-3. MVP (Minimum Viable Product)

MVP는 ‘최소 기능 제품’을 뜻하며, 핵심 기능만 담아 빠르게 사용자 반응을 확인하는 방식이다. 출시 전 시장성과 사용성을 검증할 수 있다.

실무에서의 사용 예

• 쇼핑몰 MVP: 회원가입 + 장바구니 기능만 우선 구현
• SNS 앱 MVP: 글쓰기 + 피드 보기만 우선 개발

 

👀 7-4. 사용성 평가 (Usability Testing)

사용성 평가는 실제 사용자가 서비스를 불편 없이 사용할 수 있는지를 검증하는 과정이다.

평가 방식

• 인하우스 테스트: 팀 내부에서 직접 사용
• 유저 테스트: 외부 사용자 대상 인터뷰 또는 행동 관찰
• 전문가 리뷰: UX 전문가의 기준 기반 분석

분석 지표

• Happy Path
• Task Time
• 문제 해결 능력

 

📊 7-5. 사용성 평가 분석

사용성 평가 보고서에는 다음이 포함되어야 한다:

• 테스트 개요
• 테스트 참가자 정보
• 발견된 이슈 및 사용자 반응
• 설문 결과
• 개선점 도출 및 우선순위

HEART 지표 (by Google)

• Happiness: 만족도
• Engagement: 사용 빈도
• Adoption: 신규 사용자 증가
• Retention: 재방문율
• Task Success: 과업 완료율

 

🎓 8-1~2. UX 디자이너 기본 개념

주요 개념 정리

• A/B Test: 실험 설계로 두 안 비교
• GOMS: 목표 기반 행동 분석 모델
• Affordance: 기능을 직관적으로 드러내는 UI
• Metaphor: 현실과 연결된 상징 (예: 휴지통 아이콘)
• Heuristic Evaluation: 사용성 평가 기준 10가지

인지 부하 & 법칙

• Fitts’s Law: 도달 거리 & 크기 = 접근성 영향
• Hick’s Law: 선택지 수 ↑ = 반응 시간 ↑
• 인지부하 관리: 간결하고 익숙한 UI로 감축

 

📁 포트폴리오 구성 팁

1. 프로젝트 개요
2. 나의 역할 (R&R)
3. 리서치 및 사용자 조사
4. 페인포인트 정의
5. 문제 재정의 (How Might We)
6. UX 시나리오 및 유저 저니맵
7. 정보 구조, 와이어프레임, 디자인 결과물
8. 프로토타입 & 결과 요약

 

---

 

✨ ③ 수강하면서 흥미로웠던 부분

정보 구조(IA)를 설계하고 사용자 흐름을 시각화하는 과정이 특히 흥미로웠다. 막연하게 웹사이트를 만든다고 생각했을 때는 화면 디자인이 전부라고 생각했지만, 실제로는 사용자의 행동 흐름과 콘텐츠 구조를 먼저 설계해야 한다는 점이 인상 깊었다.

또한 카드 소팅이나 유저 저니맵 같은 방법론을 통해 사용자의 ‘생각 방식’을 구체화할 수 있다는 것이 매우 흥미로웠고, 단순히 예쁜 화면을 만드는 작업을 넘어서 사용자의 경험을 설계한다는 UX의 본질적인 접근에 매력을 느꼈다.

 

⚠️ ④ 수강하면서 어려웠던 부분

인터페이스 디자인에서 UI 요소를 구체적으로 구성하는 과정이 가장 어려웠다. 특히 버튼, 입력창, 피드백 메시지 등 각각의 컴포넌트를 단순히 ‘모양’이 아닌 ‘상황별 기능과 맥락’을 고려해서 설계하는 것이 쉽지 않았다.

또한 피그마에서 인터랙션을 구현하거나 컴포넌트를 재사용하는 방식에 익숙해지기까지 시간이 걸렸다. 시각적으로 보기 좋은 디자인과 실제 사용하기 좋은 디자인이 다를 수 있다는 점에서 균형을 맞추는 감각이 아직 부족하다고 느꼈다.

 

📚 ⑤ 다음 학습 계획

• 피그마 실습 강화: Auto Layout, 컴포넌트, 인터랙션 기능을 반복 실습하여 실제 프로젝트에서 빠르게 사용할 수 있도록 숙련도 높이기
• 사용성 테스트 방법 정리: 시나리오 작성, 테스트 설계, 피드백 분석 방식 학습 후 작은 개인 프로젝트에 직접 적용해보기
• 포트폴리오 기획 시작: 지금까지 학습한 내용을 정리하고 간단한 UX 과제를 포트폴리오 형태로 구성하기 시작
• 모바일 UI 사례 분석: 배달 앱, 커머스 앱 등을 분석해 UI 흐름과 마이크로 인터랙션을 관찰하고 정리