휴대폰 브라우저의 뒤로가기와 입력 흐름을 고려한 파트너 웹앱
2026.10.04 · 2분
개요
| 항목 | 내용 |
|---|---|
| 유형 | 모바일 웹 사용성 설계·구현·검수 |
| 시점 | 파트너 웹앱 개발 과정 |
| 상태 | 모바일 사용성을 고려한 개발, Android·iOS 테스트 폰 검증 |
| 관련 영역 | 브라우저 히스토리, 바텀시트, 다단계 입력, 작성 중 이탈, 모바일 화면 조작 |
| 나의 역할 | 파트너 웹앱 개발, Android·iOS 실기기 테스트·검증 |
1. 상황과 제약
파트너 웹앱은 제휴사가 에코야얼스 서비스를 제공할 때 쓰는 웹이고, 휴대폰 브라우저로 들어옵니다. 고객 앱 안의 콘텐츠 WebView와는 사용 환경이 다릅니다.
모바일 브라우저에서도 앱처럼 쓸 수 있게 만들려고 했습니다. 바텀시트가 열린 채 뒤로가기를 누르거나, 여러 단계에 걸쳐 입력하거나, 작성하다 화면을 떠나는 경우에는 화면 상태와 브라우저 이동을 함께 맞춰야 했습니다.
2. 검토와 판단
요구사항을 보고 화면 동작을 미리 설계했습니다. 뒤로가기가 화면 상태와 맞물리도록 바텀시트와 입력 단계를 쿼리·히스토리로 관리했고, 작성 중인 내용이 있으면 떠나기 전에 확인을 받았습니다.
| 고려한 상황 | 적용한 구성 |
|---|---|
| 바텀시트가 열린 상태에서 뒤로가기 | 시트 열기를 modal 쿼리·히스토리에 연결하고, 뒤로가기 시 시트를 닫도록 처리 |
| 시트를 직접 닫거나 중첩 시트에서 이동 | 직접 닫기와 뒤로가기를 구분하고 중첩 시트·닫기 확인 처리 |
| 여러 단계에 걸친 입력 | step 쿼리로 단계를 관리하고, 선행 데이터 없이 진입한 경우 이동을 교정 |
| 완료 또는 탭 이동 | 히스토리의 replace를 사용해 이동 처리 |
| 작성 중 이탈 | 작성 상태에 따라 화면 이동 확인과 브라우저 문서 이탈 경고 등록 |
3. 실행과 조율
바텀시트와 입력 단계를 브라우저 이동에 연결하는 것과 함께, 휴대폰에서 조작하고 콘텐츠를 탐색하는 부분도 손봤습니다.
| 영역 | 구현 내용 |
|---|---|
| 선택과 입력 | 바텀시트 선택 UI, 숫자 키패드 입력 힌트 |
| 터치 조작 | 눌림 피드백과 스와이프 |
| 화면 배치 | 고정 헤더·하단 영역과 본문 여백 |
| 목록 탐색 | 스크롤 복원과 무한 스크롤 |
| 이미지 업로드 | 클라이언트 이미지 압축 |
| 진행 상태 표시 | 로딩과 시트 전환 표시 |
개발을 마친 뒤 Android·iOS 테스트 폰으로 휴대폰 브라우저용 파트너 웹을 직접 테스트했습니다.
4. 결과와 확인
바텀시트의 열림·닫힘을 브라우저 히스토리와 연결해 뒤로가기로 시트를 닫을 수 있게 했습니다. 다단계 입력은 URL의 단계 정보와 선행 데이터에 맞춰 이동하도록 구성했고, 작성 중인 내용이 있으면 화면을 떠나기 전에 확인하도록 처리했습니다.
Android와 iOS 테스트 폰에서 파트너 웹앱을 직접 사용하며 모바일 브라우저에서의 동작을 검증했습니다.