SYSTEM BLUEPRINT

기존 화면은 유지하고
네이티브만 React Native로 옮깁니다

로그인, 하단 탭, 웹뷰, 마이페이지를 내부 React 인력이 이어받을 수 있도록 흐름과 상태를 함께 보여줍니다.

로그인 전환 시나리오

기존 계정이 그대로 이어지는 로그인 흐름

앱 첫 진입에서 가장 중요한 재현 포인트를 먼저 고정합니다.

진입 상태 확인

앱 시작과 스플래시가 기존 앱과 같은지 확인합니다.

아이디와 비밀번호 입력

로그인 폼과 세션 유지 흐름을 그대로 묶습니다.

성공 후 계정 연결

로그인 직후 마이페이지로 이어지는 흐름을 보여줍니다.

예외 상태 점검

입력 실패나 지연 같은 예외를 함께 확인합니다.

재진입 확인

다시 들어와도 같은 계정이 유지되는지 봅니다.

로그인 전환 | 화면 01

기존 계정 유지 진입

app://launch/login
앱 시작
기존 계정 유지 진입
대기
앱 시작 시각
09:41
대기
기존 계정
홍길동
완료
최근 로그인
2026.08.27 09:12
완료
API 응답
180ms
진행중
진입 경로
스플래시 → 로그인
대기
예약
웹뷰
설정

[화면 개요 및 목적]

앱을 처음 열었을 때 기존 계정이 끊기지 않고 로그인 흐름으로 이어지는지 보여주는 화면입니다.

[핵심 기능 로직]

스플래시, 계정 기억, 응답 상태를 한 화면에서 묶어 전환 안정성을 보여줍니다.

  • 재현 대상
    로그인, 스플래시, 기존 계정 흐름
  • 검증 포인트
    동작 차이와 실패 케이스 확인
로그인 전환 | 화면 02

로그인 입력과 세션 유지

app://login/form
로그인 폼
동일 계정 로그인
진행중
아이디
waste_user
완료
비밀번호 상태
입력 완료
완료
잠금 해제 수단
휴대폰 인증
완료
로그인 성공률
100%
진행중
계정 유지
세션 유지 24시간
대기
예약
웹뷰
설정

[화면 개요 및 목적]

아이디와 비밀번호가 같은 규칙으로 처리되고 세션이 유지되는지를 확인하는 화면입니다.

[핵심 기능 로직]

비밀번호 입력, 인증 수단, 성공률 표시를 함께 배치해 기존 사용자 체감을 지킵니다.

  • 재현 대상
    로그인, 스플래시, 기존 계정 흐름
  • 검증 포인트
    동작 차이와 실패 케이스 확인
로그인 전환 | 화면 03

로그인 후 설정 연결

app://login/success
성공 후 이동
설정 화면 연결
완료
마이페이지 이름
홍길동 님
완료
연결된 휴대폰
010-1234-5678
완료
알림 상태
켜짐
완료
저장 완료
설정 유지
완료
전환 결과
기존 동작 그대로
완료
예약
웹뷰
설정

[화면 개요 및 목적]

로그인 후 마이페이지로 자연스럽게 이어져야 전환된 앱의 맥락이 깨지지 않습니다.

[핵심 기능 로직]

계정명, 연락처, 알림 상태, 저장 결과를 한 번에 보여 주어 내부 인계 기준을 명확히 합니다.

  • 재현 대상
    로그인, 스플래시, 기존 계정 흐름
  • 검증 포인트
    동작 차이와 실패 케이스 확인
탭과 웹뷰 시나리오

하단 탭과 웹뷰가 같은 규칙으로 이어지는 흐름

앱의 뼈대와 기존 화면 호출이 그대로 유지되는지를 증명합니다.

홈 탭 진입

하단 탭과 홈 상태가 기존 앱과 같은지 보여줍니다.

예약 상세 웹뷰

웹뷰로 띄우는 기존 화면이 같은 주소와 상태를 유지하는지 확인합니다.

탭 간 이동

예약, 웹뷰, 설정이 같은 규칙으로 왔다 갔다 하는지 증명합니다.

동기화 상태

탭 전환 뒤에도 데이터가 동일한 상태로 남는지 봅니다.

이동 결과 확인

사용자가 눌렀던 위치로 다시 돌아올 수 있는지를 확인합니다.

탭과 웹뷰 | 화면 01

탭 전환 대시보드

app://home/tabs
하단 탭 유지
탭 전환 대시보드
진행중
실행 화면
실제 데이터
수거 예약
12건
배차 대기
3건
오늘 수거
17건
동기화
100%
핵심 상태
수거 예약
2026.08.28 기준
완료
배차 대기
3건이 대기 중
진행중
오늘 수거
17건이 처리됨
완료
실패 알림
0건
완료
예약
웹뷰
설정

[화면 개요 및 목적]

하단 탭을 누를 때마다 같은 앱 구조 안에서 화면이 바뀌는지를 보여주는 대표 화면입니다.

[핵심 기능 로직]

예약 건수, 배차 대기, 오늘 수거 수치를 배치해 실제 운영 화면처럼 보이게 만듭니다.

  • 재현 대상
    하단 탭, 웹뷰 호출, 이동 규칙
  • 검증 포인트
    같은 탭에서 같은 화면이 열리는지 확인
탭과 웹뷰 | 화면 02

웹뷰 상세 화면

app://webview/detail
기존 웹 화면 호출
웹뷰 상세 화면
진행중
실행 화면
실제 데이터
웹뷰 수
2개
새로고침
1회
응답 시간
180ms
상태
정상
핵심 상태
웹뷰 주소
service.waste.co.kr
완료
예약 상세
2026.08.28 14:00
진행중
재시도
1회
대기
연결 상태
API 정상
완료
예약
웹뷰
설정

[화면 개요 및 목적]

기존 웹 화면이 새 앱 안에서 그대로 열리고 주소와 상태가 유지되는지 보여줍니다.

[핵심 기능 로직]

웹뷰 주소, 새로고침, 응답 시간, 연결 상태를 노출해 전환 기준을 설명합니다.

  • 재현 대상
    하단 탭, 웹뷰 호출, 이동 규칙
  • 검증 포인트
    같은 탭에서 같은 화면이 열리는지 확인
탭과 웹뷰 | 화면 03

탭과 설정 연결

app://tabs/settings
탭 전환
화면 간 이동 유지
완료
수거 현황
완료
예약
12건
완료
웹뷰
기존 화면
완료
설정
마이페이지 연결
완료
전환 기준
같은 탭은 같은 화면
완료
예약
웹뷰
설정

[화면 개요 및 목적]

마이페이지와 다른 탭으로 왔다 갔다 하더라도 같은 정보와 같은 규칙이 유지되는지 확인합니다.

[핵심 기능 로직]

하단 탭의 상태와 현재 위치를 함께 보여 주어 내부 React 인력이 수정할 지점을 쉽게 찾게 합니다.

  • 재현 대상
    하단 탭, 웹뷰 호출, 이동 규칙
  • 검증 포인트
    같은 탭에서 같은 화면이 열리는지 확인
마이페이지와 운영 시나리오

설정과 QA, 인수인계로 이어지는 흐름

전환 후 내부 팀이 직접 운영할 수 있도록 마무리 기준을 보여줍니다.

마이페이지 설정

설정 화면이 기존 사용자 데이터와 함께 유지되는지 확인합니다.

QA 체크리스트

전환 뒤 무엇을 비교해야 하는지 항목별로 적습니다.

문서와 배포

배포와 인수인계가 실제로 이어지는지 확인합니다.

운영 안정성

크래시 대응과 회귀 확인이 남아 있는지 보여줍니다.

내부 인계 완료

사내 React 인력이 바로 읽고 운영할 수 있는 형태로 닫습니다.

마이페이지와 운영 | 화면 01

마이페이지 설정

app://mypage/settings
설정 화면
사용자 설정 유지
진행중
사용자명
홍길동 님
완료
주소 수
3개
완료
알림 설정
켜짐
완료
문의 수
2건
진행중
저장 상태
최근 저장 2026.08.27
완료
예약
웹뷰
설정

[화면 개요 및 목적]

사용자 설정이 그대로 유지되고 내부 팀이 수정할 위치를 바로 찾을 수 있는 화면입니다.

[핵심 기능 로직]

이름, 연락처, 알림, 주소 수, 저장 시점을 실제 데이터처럼 배치합니다.

  • 재현 대상
    마이페이지, 저장, 설정 변경
  • 검증 포인트
    인수인계 문서와 배포 절차까지 연결
마이페이지와 운영 | 화면 02

QA 체크리스트

app://qa/checklist
회귀 확인
QA 체크리스트
진행중
실행 화면
실제 데이터
체크 항목
16개
통과
12개
실패
0개
잔여
4개
핵심 상태
로그인
기존 계정 유지
완료
탭 이동
화면 전환 동일
완료
웹뷰 호출
기존 URL 노출
진행중
설정 저장
값 유지
대기
예약
웹뷰
설정

[화면 개요 및 목적]

전환 후 무엇이 제대로 맞는지 항목별로 검증할 수 있는 화면입니다.

[핵심 기능 로직]

로그인, 탭 이동, 웹뷰, 저장, 배포 상태를 한 번에 적어 회귀를 막습니다.

  • 재현 대상
    마이페이지, 저장, 설정 변경
  • 검증 포인트
    인수인계 문서와 배포 절차까지 연결
마이페이지와 운영 | 화면 03

배포와 인수인계 문서

app://handoff/release
배포와 운영
인수인계 문서
완료
실행 화면
실제 데이터
문서 수
6개
배포
1회
크래시
0건
인계
완료
핵심 상태
프로젝트 개요
전환 범위와 제외 범위
완료
구조 설명
폴더와 화면 규칙
완료
배포 절차
스토어 업데이트
완료
FAQ
예상 질문 정리
완료
예약
웹뷰
설정

[화면 개요 및 목적]

스토어 배포와 문서 정리가 실제로 끝났는지 보여 주는 마감 화면입니다.

[핵심 기능 로직]

배포 횟수, 크래시 수, 인계 완료 상태를 함께 보여 주어 운영 책임을 명확히 합니다.

  • 재현 대상
    마이페이지, 저장, 설정 변경
  • 검증 포인트
    인수인계 문서와 배포 절차까지 연결