프로젝트 / 모바일·디바이스
모바일·디바이스시니어 UXPWAAndroid TWA결제 연동실기기 E2E
시니어 국내여행 예약 앱
60~80대를 위한 여행 상품 예약·결제·환불·후기·관리자까지, 웹과 안드로이드 앱을 코드 하나로
- 기간
- 2026.10
- 형태
- 의뢰 프로젝트
- 상태
- 동작 확인
- 역할
- 요구 분석·레퍼런스 실측·풀스택 개발·실기기 QA·제안 패키지 제작
24/24건서버 테스트(환불 경계값·좌석·포인트 등)
28/28건배포 주소 E2E(콘솔 오류 0)
29/29건폴더블 실기기 E2E(커버 14 · 펼침 15)
1.4~1.6배일반 여행 앱 대비 글자 크기
문제
60~80대 시니어를 대상으로 국내 여행 상품을 파는 여행사를 준비하던 고객은 회원가입·상품·예약·결제·후기·관리자 기능을 갖춘 앱을 원했고, «직관성»을 최우선 조건으로 꼽았습니다. 시니어 사용자는 작은 글자와 복잡한 단계에서 쉽게 이탈하고, 가족이 대신 예약하는 경우도 많습니다.
또한 고객이 제시한 영업일 기준 환불 규칙(기간별 전액 환불·70% 환불 또는 포인트·포인트 전환만·불가)이 결제 흐름과 정확히 맞물려야 했고, PC와 모바일, 앱까지 함께 보여줘야 했습니다.
접근
- 일반적인 여행 앱의 홈·상세 화면 구성을 분석해 정보 배치의 기준을 잡고, 시니어가 읽기 쉽도록 글자를 1.4~1.6배로 키우고 간격을 다시 설계했습니다.
- 하나의 웹 코드를 PWA로 서비스하고, 주소창 없는 안드로이드 TWA 셸로 감싸 웹과 앱을 함께 제공했습니다.
- 환불 규칙을 서버 함수로 구현하고 경계값을 단위 테스트로 고정했습니다.
- 배포 주소 E2E와 폴더블 실기기의 커버·펼친 화면 E2E를 각각 자동화했습니다.
- 로고·사진·문구는 모두 새로 만들었고, 이미지 자산은 생성해 썼습니다.
구조
탐색홈 배너·카테고리·인기 상품·테마 묶음에서 상품을 고릅니다.
상세 확인후기 요약·일정·포함 사항·환불 기준을 봅니다.
예약날짜(잔여석) → 인원·본인 또는 가족 대신 예약 → 확인 단계로 진행합니다.
결제테스트 결제 또는 무통장 입금을 선택하고 포인트를 사용합니다.
관리대표가 예약 현황·입금 확인·상품 등록·출발일 추가를 처리합니다.
주요 기능
시니어용 화면카드 글자 15~20px, 카테고리 4열, 하단 5탭에 전화 버튼 상시, «글자 크게» 토글을 제공합니다.
가족 대신 예약«누가 가시나요» 단계에서 여행자 정보를 따로 받아 대리 예약을 지원합니다.
영업일 환불 계산취소 시 남은 영업일로 환불 금액과 포인트 전환을 미리 보여주고, 포인트 결제분은 포인트로 돌려줍니다.
결제·무통장 흐름테스트 결제 승인과 부분·전액 취소, 무통장 입금의 관리자 확인과 포인트 전환까지 연결했습니다.
사진 후기·찜지난 여행에 사진 첨부 후기를 쓰고 관심 상품을 찜합니다.
관리자 화면예약 현황, 입금 확인, 상품 등록, 출발일 추가, 사진 교체를 한 곳에서 처리합니다.
결과
- 서버 테스트 24건, 배포 주소 E2E 28건을 모두 통과했습니다.
- 폴더블 실기기에서 커버 화면 14/14, 펼친 화면 15/15 E2E를 통과했고 최소 글자 13.5px·예약 버튼 높이 58px를 확인했습니다.
- 360·390·1280 폭에서 가로 넘침이 없음을 확인했습니다.
- 소개 영상과 12쪽 사용 가이드를 만들었습니다. 소셜 로그인과 문자 발송은 모의 구현 상태입니다.
포인트
화면 구조를 «비슷하게»가 아니라 측정값 기준으로 잡은 것이 설계 속도를 높였습니다. 정보 배치는 익숙한 구조를 따르고 글자 배율만 시니어 기준으로 조정하니, 디자인 논의가 «무엇을 키울지»로 좁혀졌습니다.
실기기 테스트에서는 에뮬레이터로 보이지 않던 문제가 나왔습니다. 화면 키보드가 다음 버튼을 덮거나, 펼친 화면에서 카드 하나가 혼자 남는 배치는 실제 기기에서 드러났고, 이를 고친 뒤 자동화 스크립트에도 반영했습니다.
기술
Cloudflare WorkersHonoCloudflare D1Cloudflare R2PWAAndroid TWAPlaywrightChrome DevTools ProtocolvitestGPT Image
상단 영상은 실제 화면이 아니라 구조를 보여 주는 재구성 목업입니다. 고객 정보는 익명화했습니다.