3주차 학습 보고서 — UI 컴포넌트 & 화면 리디자인 실습

학습 기간: 2025.09.05 ~ 2025.09.12
총 소요 시간: 9시간 (평일 1.5~2시간 × 5일 + 주말 실습 1.5시간)

학습 목표

• 모바일 UI 기본 컴포넌트(Button, Modal, Tab, Toast 등) 이해 및 가이드라인 정리
• Figma 실습을 통해 Auto Layout, Component, Style 활용 능력 확보
• 2주차 사용자 여정 & IA 기반으로 홈/검색/장바구니 화면 리디자인
• UI 개선 아이디어 → UX 효과 → KPI 가설 연결

화면 단위 리디자인

1. 대상 화면

• 홈(Home)
• 검색(Search)
• 장바구니(Cart)

2. 리디자인 전 문제점 (2주차 분석 기반)

• 홈: 상품 정보 노출이 한눈에 안 들어옴, CTA 버튼 위치 불명확
• 검색: 검색창이 화면 상단 고정되지 않아 탐색 불편
• 장바구니: 결제 버튼이 하단에 묻혀있어 시각적으로 덜 강조됨

3. 개선 설계
3.1 홈(Home)

• 최상단에 검색창 고정 → 탐색 진입 장벽 최소화
• 추천 상품 영역을 카드형 리스트로 변경 → CTA 버튼(“담기”) 명확화
• 상단 배너는 슬라이드가 아닌 1장 고정 → 시선 분산 방지

3.2 검색(Search)

• 검색창 상단 고정 → 스크롤 시에도 항상 노출
• 최근 검색어 / 자동완성 기능 추가 → 탐색 시간 단축
• 결과 리스트에 “필터” 버튼 강조 → 상품 선택 효율성 강화

3.3 장바구니(Cart)

• 결제 CTA 버튼을 고정 하단 배치 + Primary Color 적용
• 상품 정보는 이미지·가격·수량 조정 버튼을 한 줄에 정리 → 정보 가독성 개선
• 배송비, 예상 결제 금액 실시간 표시 → 불확실성 감소

개선 기대 효과
탐색 시간 단축(20%), 장바구니→결제 전환율 상승(+10%)

4. 실습 산출물

• UI Design System 초안 (버튼, 입력폼, Modal, Toast, Tab)
• 홈/검색/장바구니 와이어프레임 (리디자인 버전)
• Flow 연결도 (홈 → 검색 → 상세 → 장바구니 → 결제까지 UX 시뮬레이션)

---

UI 컴포넌트 학습

• Button: 기본, 강조(Primary), 비활성(Disabled), 크기별 사용 규칙 정리
• Modal: 확인/취소 유형, 단일 CTA vs 복수 CTA 케이스 정리
• Tab Navigation: Bottom Tab vs Top Tab 비교, 서비스 성격에 따른 적용 사례
• Toast: 피드백 메시지 노출 원칙 (간단, 일시적, 동작 방해 X)
• Form 요소: 입력폼 에러 처리, placeholder와 helper text 차이점

학습 포인트
단순 시각적 요소가 아니라, 사용자 행동 유도와 피드백 제공의 UX 역할까지 분석

---

Day 1 – 이론 학습 및 준비

• 와이어프레임의 정의와 목적을 다시 정리했다. 단순히 ‘UI 그림 그리기’가 아니라 서비스 기능 요구사항을 검증하는 도구라는 점을 학습했다.
• 로우파이(낮은 충실도) 와이어프레임과 하이파이(높은 충실도) 와이어프레임의 차이를 비교하며 각각의 장단점을 기록했다.
• 대표 툴(Figma, Sketch, XD)을 비교한 후, 협업 및 버전 관리 측면에서 가장 적합한 툴은 Figma라는 결론을 내렸다.
• 이번 주의 목표는 ‘핵심 화면 와이어프레임 제작 → 프로토타입 연결 → 피드백 반영’으로 확정했다.

Day 2 – 화면 흐름 정리 및 핵심 화면 도출

• 지난 2주차에 정리한 사용자 시나리오를 다시 검토하고, 서비스의 진입 동선(회원가입 → 로그인 → 메인 홈 → 게임 상세 → 결제 → 완료)을 기준으로 5개의 핵심 화면을 도출했다.
• 각 화면의 주요 기능을 텍스트로 우선 정리한 후, 종이에 스케치하며 로우파이 와이어프레임을 작성했다.
• 화면 간 이동 경로를 화살표로 표시하면서, 사용자가 자연스럽게 이동할 수 있는지 직접 손으로 그려보며 검증했다.

Day 3 – 와이어프레임 디지털화 (Figma 실습)

• 종이 스케치 기반으로 Figma에서 로우파이 와이어프레임을 제작했다.
• 버튼, 입력창, 이미지 placeholder 등을 기본 컴포넌트로 배치하며, 서비스 기획 단계에서 꼭 필요한 기능 요소들이 누락되지 않았는지 점검했다.
• 디자인적인 디테일보다는 기능 구조와 정보의 위계에 집중했다. 예를 들어, 로그인 화면에서는 ‘로그인’ 버튼보다 ‘회원가입’ CTA가 덜 강조되면 신규 유저가 진입에 어려움을 겪을 수 있음을 인식했다.

Day 4 – 프로토타입 제작

• Figma의 인터랙션 기능을 활용해 화면 간 연결을 구성했다.
• 클릭 가능한 프로토타입을 만들어 실제 유저 플로우처럼 동작하도록 설정했다.
• 로그인 → 메인 홈 → 게임 상세 → 결제 → 완료 화면으로 이동하면서, 불필요한 클릭이나 동선이 발생하지 않는지 테스트했다.

Day 5 – 피드백 및 수정

셀프 리뷰?

직접 프로토타입을 여러 차례 테스트하며 “내가 처음 접하는 사용자라면 어디서 막힐까?”라는 관점으로 점검했다.

발견된 문제?

• 로그인 화면에서 회원가입 버튼 위치가 비직관적 → 상단 우측 대신 로그인 버튼 하단으로 이동
• 결제 화면에서 결제 수단 선택이 스크롤 하단에 위치 → 주요 CTA 근처로 올려 접근성을 높임
• 문제점과 개선안을 문서화하여 다음 단계(사용자 테스트)에서 검증할 준비를 마쳤다.

---

1-3주차 회고

이번 주는 단순한 이론 학습을 넘어, 실제 기획자가 겪는 “화면을 만들어가는 과정”을 체험할 수 있었다.

기능 정의서로만 존재하던 서비스 플로우를 실제 화면으로 구현해보면서, 문서만으로는 발견하기 어려운 UX 문제를 스스로 찾아낼 수 있었다.

또한, 기획자 입장에서 Figma를 다뤄보니 디자이너와 협업할 때 필요한 언어와 워크플로우를 이해하게 되었다.

디자인 퀄리티를 신경 쓰지 않으려 했음에도 불구하고, 시각적으로 “덜 예쁜” 화면이 신경 쓰여 제작 속도가 느려진 점이 있었다. 기획자는 기능적 완결성과 사용자 흐름 검증에 집중해야 한다는 점을 다시 상기할 필요가 있었다.

4주차에는 이번에 제작한 프로토타입을 실제 사용자에게 테스트하여, 내가 놓친 사용성 문제를 더 구체적으로 발견하고 개선 방향을 정리해보는 것을 목표로 한다.