학습 리워드 퀴즈 앱 UI/UX 리뉴얼·온보딩 재설계
본 프로젝트의 요구사항(가입 후 첫 퀴즈까지 이어지는 온보딩, 홈 화면, 퀴즈 풀이 화면, 광고 노출 영역 UX)을 기반으로 직접 구현한 프로젝트입니다.
프로젝트 개요
본 프로젝트의 요구사항(가입 후 첫 퀴즈까지 이어지는 온보딩, 홈 화면, 퀴즈 풀이 화면, 광고 노출 영역 UX)을 기반으로 직접 구현한 프로젝트입니다. React Native 앱에 그대로 이식할 수 있는 화면 구조와 공통 컴포넌트를 모바일 화면 프레임으로 보여주며.
작업 범위
- 온보딩 플로우 재설계: 가입 완료 직후 인트로, 학습 관심사 선택, 튜토리얼을 거쳐 첫 퀴즈 풀이까지 한 흐름으로 이어지는 단계형 온보딩 화면입니다
- 홈 화면 UI 개선: 오늘의 퀴즈, 리워드 현황, 이어 풀기 카드를 한눈에 보여주는 홈 화면으로 정보 우선순위를 재정리합니다
- 퀴즈 풀이 화면 UI 개선: 문항 진행 표시, 선택지 상호작용, 정답·오답 피드백 애니메이션, 결과 화면을 개선한 퀴즈 풀이 화면입니다
- 광고 노출 영역 UX 개선: 기존 광고 SDK는 그대로 유지하고 홈과 퀴즈 풀이 화면의 광고 배치, 로딩 상태, 빈 상태 표시를 개선합니다
주요 업무
- 온보딩 플로우 재설계 화면: 스텝퍼와 단계별 본문, 우측 요약 영역으로 구성하고 단계 상태를 한곳에서 관리하여 중간 이탈 후 재진입 시 이어서 진행하도록 설계합니다
- 홈 화면 UI 개선 화면: 상단 리워드 요약, 중앙 오늘의 퀴즈 카드, 하단 학습 기록 섹션의 위계를 정리하고 카드 컴포넌트를 공통화합니다
- 퀴즈 풀이 화면 UI 개선 화면: 진행 바와 남은 문항 표시, 선택 상태 전환 애니메이션, 결과 요약과 리워드 지급 안내까지 하나의 흐름으로 설계합니다
- 광고 노출 영역 UX 개선 화면: 광고 영역을 슬롯 컴포넌트로 감싸 로딩 자리표시, 불러오기 실패 시 대체 영역, 화면 레이아웃 흔들림 방지를 처리합니다
프로젝트 핵심 과제
기존 앱 코드와 발주사 저장소 브랜치 구조 안에서 화면 단위로 안전하게 교체하기 위한 점진 적용 방식 설계
가입 직후 첫 퀴즈까지 단계 수를 줄이면서도 필수 정보 수집 단계를 유지하는 온보딩 흐름 균형 설계
광고 SDK 응답 시점이 불규칙하여 슬롯 로딩 중 레이아웃 흔들림을 막는 고정 영역 설계
iOS와 Android 간 애니메이션·햅틱 동작 차이를 줄이는 플랫폼별 분기 전략
핵심 기능 상세
온보딩 플로우 재설계
가입 완료 직후 인트로, 학습 관심사 선택, 튜토리얼을 거쳐 첫 퀴즈 풀이까지 한 흐름으로 이어지는 단계형 온보딩 화면입니다.
- React Navigation 스택 구조로 가입 완료 → 인트로 → 관심사 선택 → 첫 퀴즈 라우팅 설계
- Zustand 기반 온보딩 단계 상태 저장과 앱 재실행 시 진행 지점 복원 구조 구현
- 단계 진입·완료 이벤트를 NestJS 이벤트 수집 API로 전송하는 계측 레이어 설계
단계 정의를 설정 객체로 분리하여 화면 순서 변경과 단계 추가가 코드 수정 없이 가능한 온보딩 엔진 구조를 구현합니다.
홈 화면 UI 개선
오늘의 퀴즈, 리워드 현황, 이어 풀기 카드를 한눈에 보여주는 홈 화면으로 정보 우선순위를 재정리합니다.
- FlatList 가상화와 섹션 단위 지연 렌더링으로 긴 홈 피드 구성
- React Query의 staleTime·cacheTime 분리로 리워드 현황과 퀴즈 목록 캐싱 전략 설계
- 스켈레톤 UI와 새로고침 제스처(pull-to-refresh) 패턴 적용
홈 섹션을 독립 컴포넌트로 분리하여 섹션 순서와 노출 여부를 서버 설정으로 바꿀 수 있는 구조를 설계합니다.
퀴즈 풀이 화면 UI 개선
문항 진행 표시, 선택지 상호작용, 정답·오답 피드백 애니메이션, 결과 화면을 개선한 퀴즈 풀이 화면입니다.
- React Native Reanimated로 선택지 눌림·정답 표시·진행 바 애니메이션 구현
- 문항 상태(대기·선택·확정·결과)를 상태 머신 패턴으로 정의하여 상호작용 일관성 확보
- 햅틱 피드백과 접근성 라벨(accessibilityLabel) 적용 구조 설계
문항 유형이 늘어나도 선택지 컴포넌트와 피드백 규칙을 재사용하는 퀴즈 렌더러 구조를 구현합니다.
광고 노출 영역 UX 개선
기존 광고 SDK는 그대로 유지하고 홈과 퀴즈 풀이 화면의 광고 배치, 로딩 상태, 빈 상태 표시를 개선합니다.
- 고정 높이 슬롯과 자리표시(placeholder)로 광고 로딩 중 레이아웃 흔들림 방지
- 광고 불러오기 성공·실패·빈 응답 상태를 분기하는 래퍼 컴포넌트 설계
- 화면별 슬롯 위치 설정을 JSON 설정으로 분리하여 배치 실험이 가능한 구조 구현
SDK 호출부는 수정하지 않고 UI 래퍼 레이어만 추가하여 기존 광고 연동과의 충돌 위험을 줄이는 구조를 설계합니다.
프로젝트 진행 단계
현행 앱 화면 분석 및 온보딩 흐름 설계 · 2026.10
가입부터 첫 퀴즈까지 화면 흐름도 작성, 단계별 진입 조건과 이벤트 정의
토큰·온보딩·홈 화면 React Native 구현 · 2026.10
색·간격 토큰 정의, React Navigation 기반 온보딩 단계 엔진과 홈 섹션 컴포넌트 구현
퀴즈 풀이·광고 슬롯 UX 구현 · 2026.10
Reanimated 피드백 애니메이션과 광고 슬롯 래퍼 로딩·빈 상태 처리 구현
화면 설계서 작성 및 결과 정리 · 2026.10
화면별 설계서와 작업 내역, 화면 캡처를 포함한 결과보고서 작성
개발 결과
기술적 주안점
- 단계 정의를 설정 객체로 분리하여 화면 순서 변경과 단계 추가가 코드 수정 없이 가능한 온보딩 엔진 구조를 구현합니다
- 홈 섹션을 독립 컴포넌트로 분리하여 섹션 순서와 노출 여부를 서버 설정으로 바꿀 수 있는 구조를 설계합니다
- 문항 유형이 늘어나도 선택지 컴포넌트와 피드백 규칙을 재사용하는 퀴즈 렌더러 구조를 구현합니다
