4주차 학습 보고서 — 프로토타입 제작 & 사용자 테스트 준비

학습 기간: 2025.10.27 ~ 2025.11.01
총 소요 시간: 10시간 (평일 1.5~2시간 × 5일 + 주말 테스트 준비 2시간)

---

학습 목표

이번 주의 목표는 3주차에 완성한 홈, 검색, 장바구니 와이어프레임을 실제 사용 가능한 프로토타입으로 발전시키는 것이었다.
특히 로그인부터 탐색, 결제까지 이어지는 핵심 사용자 흐름을 완성하고, 사용자 테스트에 활용할 수 있도록 시나리오와 검증 항목을 구체적으로 설계하는 것을 중점으로 진행했다.
또한 내부 셀프 테스트를 통해 UI·UX 개선 포인트를 도출하고, 수정 이력을 문서화하는 것을 목표로 했다.

---

주요 학습 내용

1. 프로토타입 제작 (Figma Interactive Flow)

3주차에서 완성한 와이어프레임을 기반으로, Figma의 프로토타입 기능을 활용해 각 화면을 실제 앱처럼 연결했다.
홈 화면에서 검색, 검색에서 상세, 상세에서 장바구니, 그리고 결제 완료까지 이어지는 전체 플로우를 설계하며 사용자 여정을 구체화했다.
화면 전환 시 자연스러운 리듬감을 주기 위해 트랜지션 속도를 조정했고, 클릭 시 부드러운 페이드 효과를 적용하여 몰입감을 높였다.
단순히 화면을 연결하는 데 그치지 않고, 유저가 실제로 앱을 조작하듯이 느낄 수 있는 인터랙션을 설계하는 데 집중했다.

예를 들어 장바구니에서 결제 버튼을 누르면, 0.3초 정도의 페이드인 효과를 주어 ‘다음 단계로 이동한다’는 인식이 명확히 전달되도록 했다.
이를 통해 UX 전환 시 불연속적인 느낌을 줄이고, 전체 플로우가 하나의 경험처럼 이어지도록 구성했다.

---

2. 사용자 테스트 시나리오 작성

프로토타입을 완성한 후, 실제 사용자 테스트를 염두에 두고 총 다섯 가지 테스트 시나리오를 작성했다.
테스트 대상은 “모바일 게임 커뮤니티 내에서 아이템을 탐색하고 구매하는 20~30대 게이머”를 가정했다.

첫 번째 시나리오는 홈 화면에서 인기 아이템을 탐색하는 과정으로, 사용자가 배너나 탭 구조를 얼마나 직관적으로 인식하는지를 관찰하는 것이 목표였다.

두 번째 시나리오는 검색 기능 활용 단계로, 자동완성 기능을 얼마나 빠르게 인식하고 원하는 결과를 도출하는지 확인했다.

세 번째 시나리오는 장바구니 담기와 결제 흐름으로, CTA(결제하기 버튼)를 명확히 인식하고 클릭 횟수 3회 이내로 결제 완료까지 도달할 수 있는지를 검증했다.

네 번째 시나리오는 결제 완료 후 보상 확인 단계로, 완료 메시지가 충분히 명확하게 전달되는지를 중점적으로 보았다.

마지막 시나리오는 결제 실패 후 재시도 플로우로, 에러 메시지의 이해도와 재시도 행동 유도 여부를 검증했다.

사용자 테스트 시, 관찰 포인트는 “탐색 직관성”, “피드백 명확성”, “CTA 인식률”, “재시도 행동 유도” 등이었다.

---

3. UI·UX 개선 포인트 도출 (셀프 테스트)

셀프 테스트를 진행하면서, 실제 사용 플로우에서 불편하거나 혼동을 줄 수 있는 구간을 구체적으로 확인했다.

홈 화면에서는 상단 배너가 콘텐츠 영역을 가려 시선이 분산되는 문제가 발견되어, 배너를 고정된 한 장으로 변경하고 추천 상품 영역을 카드형 리스트로 개선했다.

또한 CTA 버튼의 컬러 대비를 강화해 클릭 의도를 명확히 전달하도록 수정했다.

검색 화면에서는 자동완성 문구가 너무 길어 시각적 피로를 유발하는 점이 확인되어, 문구를 최대 두 줄로 제한하고 Fade 효과를 적용했다.

필터 버튼 크기를 키워 접근성을 개선하고, 시각적으로 더 눈에 띄게 조정했다.

장바구니 화면에서는 결제 버튼이 하단에 묻혀 잘 보이지 않았기 때문에, 고정된 하단 영역으로 이동시켰고, 버튼에 그림자 효과를 적용해 시각적 강조를 강화했다.

또한 예상 결제 금액을 실시간으로 갱신하도록 수정해, 사용자가 불확실성을 느끼지 않도록 했다.

결제 화면에서는 완료 피드백 문구를 단순한 문장에서 좀 더 명확하고 행동 유도적인 문장으로 변경했다.

기존의 “결제가 완료되었습니다.”라는 문구는 정보만 전달했기 때문에, 이를 “결제가 성공적으로 완료되었습니다. 보상은 인벤토리에서 확인하세요.”로 수정하여 다음 행동까지 유도하도록 했다.

---

4. 프로토타입 버전 관리 및 개선 문서화

프로토타입은 V1.0에서 시작해 V1.2까지 수정 이력을 관리했다.
각 변경 사항은 ‘문제 발견 근거’, ‘개선 조치’, ‘기대 효과’의 세 가지 항목으로 정리했다.

예를 들어, 검색 결과 화면의 CTA 간 간격이 좁아 사용자가 잘못 클릭하는 문제가 있었는데, 이를 Auto Layout으로 재구성하고 패딩 값을 조정하여 클릭 오류를 줄였다.
그 결과 터치 정확도가 약 15% 향상될 것으로 예상된다.
이러한 수정 사항은 모두 개선 이력 문서에 기록하고, 향후 테스트 단계에서 검증할 예정이다.

---

실습 산출물

• 홈부터 결제까지 총 5개 화면을 연결한 Figma 프로토타입
• 사용자 테스트 시나리오 5종 (목표, 관찰 포인트, 피드백 문항 포함)
• 개선 이력 문서 (V1.0~V1.2 변경사항 총 12건 정리)
• UX 검증용 피드백 폼 (Google Form으로 구성)

---

학습 포인트

이번 주는 단순히 눈에 보이는 UI를 완성하는 단계가 아니라, 사용자가 실제로 조작하며 느끼는 UX의 흐름을 설계하고 검증하는 과정이었다.
특히 클릭 가능한 프로토타입을 직접 만들어보며, 기획 단계에서 간과하기 쉬운 세부적인 마이크로 인터랙션의 중요성을 체감했다.
또한 “생각한 대로 동작하지 않는 구간”의 원인을 UI 요소의 위치, 문구의 톤, 버튼의 크기 등 구체적인 수준으로 분석할 수 있었다.

이 과정을 통해 기획자는 단순히 ‘디자인을 검토하는 역할’이 아니라, ‘사용자의 행동을 유도하고 검증하는 실험자’라는 사실을 다시금 느꼈다.
UX는 디자인의 결과물이 아니라, ‘의도한 행동이 실제로 발생하는가’를 측정하고 개선해가는 실험의 과정임을 실감했다.

---

1–4주차 회고

4주 동안의 학습을 통해 서비스 기획자가 UX를 설계하고 검증하는 전 과정을 체계적으로 경험할 수 있었다.
초기에는 단순히 와이어프레임을 그리는 법을 배우는 수준이었지만, 시간이 지나면서 UI 요소와 사용자 행동, 그리고 데이터 지표(KPI)를 하나의 논리 흐름으로 연결해 설명할 수 있게 되었다.

특히, 디자인이 ‘예쁘다’보다 ‘이해된다’는 피드백을 받았을 때 진정한 UX의 가치를 느꼈다.
다음 단계에서는 이번에 설계한 프로토타입을 실제 사용자에게 테스트하고, 테스트 결과를 정량·정성 데이터로 분석하여 UX 개선 효과를 수치로 검증하는 보고서를 작성할 계획이다.

이 과정을 통해 단순한 이론이 아닌, 실무 중심의 ‘검증 가능한 기획 역량’을 완성하는 것이 목표다.