① 3주차 수강한 분량
- 5-5 레이아웃 그리드
- Chapter 6. 컴포넌트와 베리언트
- Chapter 7. 프로토타입
- Chapter 8. 공유와 협업
- UX 이론 / 기초 1_ Chapter 1. UX 디자인의 기본개념
- Chapter 2. 사용자 조사
② 각 강의별 학습하며 새롭게 알게된 점
5-5. 레이아웃과 그리드
🔸 그리드 설정 실습
- 그리드 계산기 활용
Grid Calculator를 활용해 웹/앱 디자인 시 균형 잡힌 그리드 시스템 구성
→ 가로 폭, 칼럼 수, Gutter 값을 설정하면 자동 계산 - Gutter는 짝수로 설정
→ 요소 간 여백(Gutter)은 짝수 값이 가독성과 일관성 확보에 유리 - Margin에 부족한 여백 넣기
→ 전체 폭에서 남는 값은 좌우 마진으로 처리해 정렬감 유지
6-1. 컴포넌트와 인스턴스
🔸 개념 이해
- 컴포넌트(Component)
반복되는 요소(버튼, 카드, 헤더 등)를 한 번 정의해 여러 화면에서 재사용 가능한 형태
아이콘: 다이아몬드 - 인스턴스(Instance)
컴포넌트를 불러와 사용하는 복제본
아이콘: 빈 다이아몬드
→ 컴포넌트 수정 시 인스턴스도 자동 반영됨 (일괄 관리 가능) - 단축키
Ctrl + Alt + K (C + A + K) : 선택한 요소를 컴포넌트로 등록
8-1. 에셋 내보내기 시 규칙
🔸 레이어 명명 규칙
- 소문자 사용
- 첫 글자에 숫자 사용 금지
- 띄어쓰기 금지 ( _ 또는 - 사용)
- 가능하면 축약
- 명명 규칙 만들기
예: type_name_01 형식으로 정리
UX 이론 / 기초 1_ Chapter 1. UX 디자인의 기본개념
1-1. UX 디자인이란?
- 정의: 사용자가 제품을 사용하는 ‘경험’을 설계하는 일
- 목표: 유용성과 사용 편의성(Usability)을 바탕으로 만족스러운 경험 제공
- 결과: 고객의 충성도, 만족도 향상
📌 사용자 경험(UX)은 서비스, 제품, 시스템과 사용자의 ‘모든 접점’에서의 경험을 포함
1-2. UX 디자인의 구성 요소
- Usability (사용성): 내비게이션, 피드백, 시각적 명확성 등
- Utility (유용성): 필요한 기능을 제공함
- Usefulness = Utility + Usability
🔸 UX vs UI
| 항목 | UX | UI |
| 의미 | 사용자 경험 전체 | 사용자 인터페이스 시각 디자인 |
| 핵심 활동 | 사용자 조사, 리서치 분석, 컨셉 도출 | 디자인 시안 제작, 시각적 구현 |
| 예시 | 사용자의 감정 흐름 이해 / 문제점 도출 | 버튼 크기, 컬러, 폰트, 정렬 등 시각 요소 |
UX vs UI
UI : Interface Design / Design Specs / Execution(구현)
UX : User Research / Research Analysis / Design Ideation / Execution
🔸 UX 디자인의 요소들
- User Experience (UX)
제품 또는 서비스와 사용자의 모든 접점을 포함한 총체적인 ‘경험’ - Usability (사용성)
제품이 얼마나 쉽게, 효율적으로 사용될 수 있는지를 평가하는 요소
→ 세부 항목:- 내비게이션
- 친숙도
- 일관성
- 에러 예방
- 피드백
- 시각적 명료성
- 유연성
- 효용성
- Utility (유용성)
사용자가 필요로 하는 기능을 제대로 제공하는가? - Usefulness = Utility + Usability
필요한 기능이 있고, 그것이 잘 작동하고 사용하기 쉬울 때 비로소 유용한 제품이라 할 수 있음
🔸 UX 디자인 관련 주요 개념 키워드
- Human Factors: 인간의 신체적/심리적 특성을 반영한 설계
- Accessibility: 장애 유무에 관계없이 누구나 접근 가능한 설계
- HCI (Human-Computer Interaction): 인간과 시스템의 상호작용 연구
- Marketing: 사용자 니즈와 시장 상황을 함께 고려
- Interaction: 사용자의 행동 흐름과 반응
- Prototyping: 시제품을 통해 반복 설계 및 테스트
- Experience: 전체적인 사용자 인상과 만족도
1-3. UX 디자인 프로세스
Listen → Analyze → Design → Test
- Listen
- 사용자 관찰 및 인터뷰
- 사용자 니즈, 감정, 맥락 수집
- Analyze
- 수집한 데이터를 정리/분석
- 인사이트 도출 및 핵심 문제 정의
- Design
- 아이디어 발산 및 컨셉 수립
- 와이어프레임/프로토타입 제작
- Test
- 사용자 테스트를 통한 검증
- 반복적인 개선 (iteration)
1. 확산
- 내가 무엇을 모르는지를 모른다는 상태에서 시작
- 현재 사용자 행태/제품의 특성/트랜드에 대한 이해
- 현존하는 문제점 및 기회 요인의 파악
- 제한을 두지 않고 가능한 한 넓은 범위의 리서치를 진행
2. 수렴
- Raw 데이터를 분석하여 인사이트 Insight / 키팩터 Ket factor 도출
- 리서치 결과 시각화(모델링)
- 팀 리뷰를 통해 기회요인 Opportunity과 문제점 Pain point 정의
- HMW(How might we...) 질문. 즉, 가정
- 디자인 컨셉 및 전략 수립
3. 확산
- 아이데이션 ideation을 통해 문제해결에 대한 솔루션 도출
- 아이디어 평가를 통한 구체화
- 가설 수립 및 평가를 통한 다양한 가능성 탐구
4. 수렴
- 프로토타입을 이용한 가설 및 구현 안정성 검증
- 테스트와 개선의 반복 iteration 프로세스
- 개발 및 출시
1-4 사용자 중심 디자인 (UCD)
사용자
우리의 제품을 사용하는 사람 + 사용할 사람
User Centered Design(UCD) : 사용자 중심 디자인
Analysis → Design → Evaluation → Implementation
1. Business) 우리가 만들고 싶은 것
2. User) 사용자가 갖고 싶은 것
3. Problems) 사용자가 느끼는 어려움
4. Motives) 사용자의 동기
5. Fears) 사용자가 우려하는 것
6. Solution) 우리가 제시할 해결방안
7. Alternatives) 우리 서비스를 사용하지 않고 어떻게 할 수 있나
8. Competitive Advantages) 그럼에도 불구하고, 사용자가 우리 서비스를 사용할 이유
9. Unique value proposition) 우리 서비스만의 강점
※ 사용자와 함께 검증 필요 / 추가 조사가 필요한 사항 연구 / connect user facter to business factor
2-1 사용자 조사 방법
🔸 사용자 조사의 목적
- 사용자의 행동, 맥락, 니즈, 불편함 등을 파악하여
더 나은 사용자 경험(UX)을 설계하기 위한 기초 자료 확보
참고) 이해관계자(서비스 제작자)
→ 일반 사용자의 이해도와 차이가 있음
사용자 조사의 정의
1. 언어적 정보
2. 행동(비언어적) 정보 → 관찰을 통해 얻어낼 수 있는 정보
사용자 조사 방법의 종류
1) 사용자의 행동에 개입하지 않고 관찰만 하는 법 = 정성적 방법
→ 가능한 순수한 형태의 데이터를 얻고자 하는 것
대표적 방법
Town watching 높은 곳에서 구경하는 형식으로 관찰
Contextual inquiry 사용자가 있는 곳으로 가서 직접 보고 궁금한 점을 별도로 물어보는 법
Photo diary 사용자에게 질문 → 답 요구
장점 : 순수한 형태의 데이터
단점 : 필요없는 데이터까지도 얻을 수 있고 데이터 양이 많아 분류해내기 어려움, 자칫하면 필요한 데이터 못얻을 수도 있음
사용자에 대한 이해도(지식)이 있어야 함
2) 정확하게 세팅해 놓은 상태에서 하는 조사 = 정량적
대표적 방법
Usabiliy test 실험환경에서 실행되는 사용성 평가
Card sorting 멘탈 모델을 연구할 때 사용
A/B test 2~4개 시안을 주고 선호도 평가
장점 : 우리가 원하는 깊이 있는 데이터를 얻을 수 있음
단점 : 답을 놓칠 수도 있음
※ 두 가지 방법은 상호보완적으로 적절히 조합하여 적절한 방법을 사용해야 함.
→ 정성적 조사로 인사이트를 얻고 / 정량적 조사로 그 인사이트를 검증하면 가장 효과적
📌 분류 설명 대표 방법 요약
| 분류 | 설명 | 대표방법 | 특징 |
| 정성적 조사 | 행동과 맥락을 ‘관찰’을 통해 이해 | 타운와칭, 컨텍스추얼 인쿼리, 포토다이어리 | 생생한 데이터 확보, 분석 어려움 |
| 정량적 조사 | 세팅된 환경에서 수치 기반 분석 | A/B 테스트, 카드소팅, 사용성 테스트 | 수치 기반의 명확한 데이터 수집 |
2-2 사용자 조사 준비
🔸 Contextual Inquiry (현장 조사)
✅ 정의
실제 사용자가 제품이나 서비스를 사용하는 **현장(context)**에서
자연스럽게 관찰하고 대화(inquiry)하며, 사용자 행동의 진짜 이유를 파악하는 방법
✅ 기본 원칙
In context, do inquiry
→ 사용자의 환경에 들어가서, 행동과 생각을 함께 이해한다
🔸 진행 프로세스
- 조사 목적 정의 – 어떤 정보가 필요한가?
- 조사 대상 및 범위 설정 – 어떤 사용자를 얼마나?
- User Screening 가이드 작성 – 참여자 조건(나이, 경력 등)
- 사용자 모집 – 스크리닝에 따라 선별
- 파일럿 테스트 – 사전 점검
- 조사 설계 보완
- 본 조사 실행 – 현장에서 대화 및 관찰
- 분석 및 인사이트 도출
🔸 유의사항
- 사용자 공간에서 진행할 것
- 정해진 질문을 줄이고, 사용자가 말하도록 유도
- 전문가는 사용자다! → 우리는 배우는 입장
- 가이드하지 않는다 (자연스럽게 관찰)
- 목적을 먼저 정하고 ‘왜·어떻게’에 집중
- 불만/아이디어를 직접 묻기보다, 상황에서 유추
- 중립적인 자세 유지
- 사용자가 누구와 상호작용하는지 함께 관찰
🔸 조사 준비 단계
- 조사 목적 정의 – 무엇을 알고 싶은가?
- 조사 범위 정의 – 시간, 예산 등 리소스 고려
- 조사 방법 선택 – 정성 / 정량 결정
- 대상자 기준 설정 – 나이, 직무, 경험 등
- 대상자 모집 – 기준에 맞게 스크리닝
- 파일럿 테스트 – 사전 연습
- 조사 실행 – 역할 분담 (모더레이터, 노트테이커 등)
- 결과 분석 – 주요 인사이트 정리
🔸 사용자 조사 설계 시 체크리스트
- 조사 배경 및 목적
- 알고자 하는 구체적인 정보
- 일정
- 조사 방법
- 조사 대상 및 구성
- 예상 비용
파일럿 테스트가 중요한 이유
- 드레스 리허설 – 실제처럼 연습
- 시간 체크 – 예측 시간 조정
- 변수 발견 – 질문의 모호함, 사용자 반응 확인
- 기술 점검 – 녹음/기록/화면 캡처 등 장비 확인
2-3 사용자 조사결과 분석 및 모델링
사용자 조사로 얻을 수 있는 것
- 도메인에 대한 깊이 있는 이해
- 숨겨진 니즈 & 불편함 파악
- 감정 흐름 분석 (시퀀스 흐름)
- 심성 모델 이해 – 사용자의 머릿속 구조 파악
- 학습 수준 파악
- 작업 동기와 실제 사용 과정 파악
활용 포인트
- 사용자에 대한 공감 기반 설계 가능
- 서비스 진입 장벽 이해
- 디자인 컨셉/가설 검증에 활용
- “모르고 있었던 사용자 문제”를 발견 (Shed light on users)
사용자 조사 결과 분석하기
Step 1. 녹취록 만들기 (Transcription)
🔹 목적
- 조사 내용을 정확히 재현하고 분석의 근거로 활용하기 위함
- 녹취 → 텍스트로 변환하여 이후 그룹핑, 인사이트 도출의 기반이 됨
📌 중요 이유
- 인간의 기억은 왜곡될 수 있으므로 객관적인 기록 필요
- 분석 대상이 ‘주관적 발언’이므로 원문 보존이 중요
Step 2. 정보 구조화: Affinity Diagram (어피니티 다이어그램)
수많은 발언과 데이터를 의미 있는 그룹으로 묶어 인사이트를 도출하는 시각화 도구
🔹 분석 절차
📍 Step 1: 1차 그룹핑
- 유사한 내용을 포스트잇 또는 카드 형태로 묶음(Clustering)
- → 팀원들과 함께 리뷰하며 다시 묶기도 함 (Re-grouping)
📍 Step 2: 이름 붙이기
- 각 그룹에 의미 있는 명칭 부여 (예: "초기 진입 장벽", "혼란스러운 UI", 등)
- 더 넓은 의미에서 상위 그룹 카테고리로 구조화
💡 효과
- 산발적인 데이터를 계층 구조로 정리
- 사용자 니즈 / 문제점 / 패턴을 도출하기 쉬움
- 팀 내 공감대 형성 및 아이디어 발산에 유리
Step 3. Artifact Model (아티팩트 모델)
사용자가 특정 과업을 수행하면서 무엇과 상호작용(interaction) 하는지를 도식화한 모델
🔹 주요 개념
- Artifact = 사용자가 실제로 다루는 도구, 장비, 앱 등 모든 매개체
- 행동의 시작 원인, 흐름, 불편 요소 등을 파악할 수 있음
✏️ 활용 포인트
- 사용자의 행동 흐름에 영향을 주는 요소들 시각화
- 예: 안내문, 태블릿, 계산대 등
- 사용자가 어떤 도구와, 어떤 순서로 상호작용하는지 파악
- 사용성 개선의 단서
- 문제가 발생하는 지점 또는 환경적 장애 요소 발견
- 예: 버튼이 작아서 반복 실수 → UI 재설계 필요
- 도구 사용 전/후 변화 이해
- 도구의 효과성을 판단하는 지표
③ 수강하면서 흥미로웠던 부분
UX 디자인에 대한 이론을 체계적으로 배울 수 있어 매우 흥미로웠습니다.
특히, 사용자 중심 디자인(User-Centered Design)이나 어피니티 다이어그램과 같은 분석 방법을 접하며,
디자인의 배경에 있는 논리적 사고와 문제 해결 방식에 대해 깊이 이해할 수 있었습니다.
👉 실습 링크
④ 수강하면서 어려웠던 부분
각 이론과 도구(Affinity Diagram, User Journey Map 등)를 실제 사례와 함께 병행해보지 못한 점이 아쉬웠습니다.
실무 사례나 성공적인 UX 분석 사례를 직접 비교하며 연습한다면, 이론의 이해도를 더 높일 수 있을 것 같습니다.
다음에는 이론만 보는 것이 아니라 실제 화면 기획서나 사용자 리서치 결과와 함께 분석하는 방식이 도움이 될 것 같습니다.
⑤ 다음 학습 계획
UX 디자인 이론을 기반으로 다양한 실제 사례들을 분석해보며 강의를 완주할 예정입니다.
특히 사용자 조사 결과를 기반으로 한 모델링, 페르소나 설정, 여정 맵핑 등의 도구를 직접 활용해보는 것을 목표로 하고 있습니다.
또한, 학습 내용을 바탕으로 실제 프로젝트에 적용 가능한 UI/UX 결과물을 만들어보고 싶습니다.
※ 이 글은 제로베이스 UIUX 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.
'제로베이스 UIUX 디자인' 카테고리의 다른 글
| [제로베이스 UIUX 파트타임 스쿨] 학습일지 - 6 (0) | 2025.07.20 |
|---|---|
| [제로베이스 UIUX 파트타임 스쿨] 학습일지 - 5 (3) | 2025.07.20 |
| [제로베이스 UIUX 파트타임 스쿨] 학습일지 - 4 (4) | 2025.07.05 |
| [제로베이스 UIUX 파트타임 스쿨] 학습일지 - 2 (1) | 2025.06.23 |
| [제로베이스 UIUX 파트타임 스쿨] 학습일지 - 1 (0) | 2025.06.14 |
