← 전체 사례  ·  CASE #01  ·  재직 중 · Startup

애드포터 모바일
핵심 플로우·WebView UI

분산돼 있던 지도·검색·매체 상세·등록 UI를 공통 모바일 흐름과 Expo WebView 경로로 연결했습니다. 공통 상태·다크 지도·하단 독바를 정비해 모바일 웹과 Google Play 앱 출시를 완료했고, 출시 이후 UI 고도화를 이어가고 있습니다.

모바일 웹 · Google Play 출시 완료 재직 중 · 고도화 진행 React UI · PL/PO 지원 Hybrid WebView UI Validation
MOBILE UI FLOW
flow/
├── map · search/
├── media detail/
└── register/
shared/
├── filters · results/
└── WebView routes/
// type-check · build · visual QA
결과
Verified Results
  • 모바일 웹 · Google Play 앱 출시 완료
  • 지도·검색·매체 상세·등록 모바일 핵심 플로우 연결
  • 공통 필터·결과·바텀시트·온보딩 UI 구현
  • 공통 상태 화면·다크 지도·글래스 하단 독바 정비
  • type-check · Vite build · 정적 검사 · 브라우저 렌더 QA
Scope Boundary

출시 완료는 제품 상태이며, 이번 사례에서 설명하는 본인 담당 범위는 React UI·mock 상태·WebView 라우팅·시각 검증입니다.

백엔드 API, RN native 동작과 실제 위치 기능은 완료 성과에 포함하지 않았습니다.

문제

지도·검색·매체 상세·등록 화면과 앱 셸의 진입 경로가 분산돼 모바일 사용자 흐름을 연속적으로 확인하기 어려웠습니다.

지도 다크 모드, 찜 상태, 공통 오류·점검 화면과 WebView 배경·오버스크롤 기준도 화면별로 달라질 수 있는 상태였습니다.

역할
React UI 구현과 공통 UI 구조 정리, mock·WebView 라우팅 연결 및 정적·시각 검증을 담당했습니다.
  • 고정·이동 매체 지도와 검색·필터·정렬·바텀시트 상태 구현
  • 지도·검색·매체 상세·등록 화면의 Expo WebView 경로 연결
  • 다크 지도·찜 상태·403·404·500·점검 화면 UI 정비
  • click·press·drag·reduced-motion을 포함한 글래스 하단 독바 구현
  • type-check·build·정적 검사·headless Chrome 렌더 기반 검증
공개 범위: 회사 내부 코드·PR·화면은 노출하지 않고, 사용자 문제와 본인 구현 범위 및 검증 방식만 정리했습니다.
핵심 판단 접기

연결된 화면보다 중요한 것은 연결된 상태 규칙입니다.

지도·검색·상세·등록을 각각 구현하는 것만으로는 모바일 경험이 완성되지 않습니다. 선택 해제, 바텀시트 단계, 다크 모드와 오류 상태가 같은 기준으로 움직여야 합니다.

그래서 화면 구현과 함께 공통 상태·검증 기준·후속 개발 경계를 문서화했습니다.

Next Case
S사 엔지니어링 MAP
복합 Admin UI 구조를 전담 설계한 프로젝트입니다.
다음 케이스 보기 →
Now
애드포터 — 현재 재직 중
모바일 웹과 Google Play 앱 출시 이후 UI 플로우와 화면 정책·검증 기준을 고도화하고 있습니다.
현재 역할 보기 →
Next Conversation
이어서 대화하고 싶으시면 연락 주세요.
yoonkp0233@gmail.com
이력서 보기 →