AI로 웹을 앱으로 옮길 때, 화면보다 먼저 맞춰야 할 것
목차 · 원하는 부분으로 이동
화면보다 사용자 행동 하나를 먼저 검증한다. 정상 처리와 실패 처리의 결과를 웹과 앱에서 비교한다. 이 기준으로 첫 배포 범위를 정한다.
알림을 누르면 올바른 주문이 열려야 한다. 뒤로 가거나 앱을 다시 열 때 저장 상태도 분명해야 한다.
요즘IT는 Next.js 모바일 웹의 앱 전환 사례를 소개했다. 화면 구현 뒤에도 실제 로직과 모바일 기능 검증이 남았다. 아래 순서는 개발 속도나 일정을 보장하지 않는다.
공유 규칙과 화면의 경계
웹과 앱이 같은 상품을 다루면 업무 규칙부터 맞춘다. 가격 계산, 입력 검증, 오류 코드가 같은 뜻이어야 한다. 전화번호 형식과 주문 취소 조건도 먼저 정한다.
버튼 배치, 키보드가 뜬 화면, 뒤로 가기를 따로 살핀다. 코드 공유를 위해 모든 화면을 묶지는 않는다.
React Native는 플랫폼별 구현을 나누는 방법을 제공한다. Platform 모듈과 플랫폼별 파일을 사용할 수 있다.
사용자 행동 하나의 검증
화면 수보다 사용자가 자주 끝내야 할 일을 기준으로 고른다. 주문 확인은 목록 → 상세 → 변경 → 결과 확인까지 옮긴다.
세션 만료는 로그인 상태의 유효 기간이 끝난 경우다.
주문 변경을 예로 들면 다음 항목을 검증한다.
- 정상 처리: 목록과 상세 화면에 같은 값이 보이는지 확인한다.
- 입력 오류: 잘못된 값의 처리 이유를 확인한다.
- 통신 실패: 재시도할 때 요청이 중복 처리되지 않는지 본다.
- 세션 만료: 다시 로그인하면 원래 작업으로 돌아오는지 본다.
- 화면 이탈: 뒤로 가거나 앱을 다시 열어 저장 상태를 확인한다.
화면 사진으로는 배치를 확인할 수 있다. 업무 완료 여부는 저장된 값과 서버 응답으로 확인한다.
알림과 로그인 뒤의 이동
푸시 알림은 서비스가 기기로 보내는 알림이다. 알림이 앱 전환의 목적이라면 설정을 미루지 않는다.
푸시 토큰은 알림을 보낼 대상을 구분하는 값이다.
- 사용자의 알림 허용
- 푸시 토큰과 알림 처리 코드
- Android·iOS 자격 증명 설정
- 열린 상태·백그라운드·종료 상태에서 각각 누른다.
- 로그인 전이라면 로그인 뒤 목적지를 확인한다.
- 접근할 수 없는 주문이면 안내가 적절한지 확인한다.
Expo는 iOS 자격 증명 생성에 유료 계정이 필요하다고 안내한다. Apple Developer 계정을 준비해야 한다. 계정 준비 시간도 일정에 넣는다.
AI 작업의 완료 근거
AI에게 다음 완료 근거를 요구한다.
- 바꾼 파일과 공유 규칙에 미친 영향
- 정상·오류·재시도 흐름의 검증 결과
- 기대 동작과 실제 화면의 차이
- 확인하지 못한 기기·권한·네트워크 조건
완료 여부는 직접 실행한 결과로 판단한다. 실행하지 못한 검증은 미검증으로 남긴다. 화면 캡처만으로 로그인·알림·저장을 통과 처리하지 않는다.
정리
- 가장 중요한 사용자 행동 하나를 고른다.
- 공통 업무 규칙을 맞추고 화면은 환경에 맞게 만든다.
- 정상 처리와 실패 처리를 웹과 앱에서 각각 검증한다.
- 알림을 받은 뒤 로그인과 목적지 이동까지 확인한다.
- 같은 의미로 작업을 끝내는 범위를 첫 배포로 정한다.