ViewUp
Native App

출발점은 이미 운영 중이던 웹 서비스를 네이티브 앱으로 옮기는 일이었습니다. 홈, 포인트, 퀘스트, 출석체크, 장소미션, 응모, 마이페이지와 클릭뷰잉·오토뷰잉·포스팅 같은 기존 적립 기능을 모바일 환경으로 이관하고, 카카오 로그인·소셜 회원가입·계정 연동·SNS 계정 관리·인앱 알림과 푸시까지 연결해야 했습니다.

스토어 출시 이후에도 디자인 개정과 웹·앱의 API 계약 변경이 계속됐습니다. 스토어 심사와 OTA 배포를 구분해 운영하고, 사용자가 겪는 오류를 실제 요청과 Backend trace까지 따라갈 수 있어야 했습니다. 이 변경에 대응할 수 있도록 공용 UI, 리뷰 환경, 배포 규칙과 오류 추적 체계를 함께 구성했습니다.

담당 범위는 앱 화면과 API 연결, 공용 UI 구조, 인증 안정성, 릴리즈 체계, 오류 추적과 Storybook 기반 협업이었습니다. AI 개발 워크플로우에도 같은 테스트와 리뷰 기준을 적용했습니다.

ViewUp 2.1 개편에서는 Figma 개정본을 기준으로 화면군을 다시 구현하면서 기존 구현과 디자인 사이의 드리프트를 정리했습니다. 이때 화면마다 스타일을 다시 맞추기보다 디자인 토큰과 공용 컴포넌트를 먼저 분리했습니다. Pretendard와 공용 Text/TextInput 래퍼를 배선해 OS별 한글 폰트·줄바꿈 차이도 공용 계층에서 다뤘습니다.

모달은 여러 화면에서 동시에 present/dismiss가 발생하며 닫히는 중 빈 카드가 보이는 경합이 있었습니다. 이를 Promise 기반 호스트에서 직렬화해 각 화면에서 조건문을 덧붙이는 대신 공용 레이어가 상태 전이를 책임하게 했습니다. 데스크톱 리뷰와 실제 앱 폭의 차이는 440px 앱 프레임을 두어 리뷰 surface와 실행 결과의 차이를 줄였습니다.

인증 실패를 로그아웃으로 굳히지 않기

운영 중 일시적인 refresh 실패가 영구 로그아웃으로 이어지는 클라이언트 경로를 확인했습니다. 재시도가 필요한 실패와 실제 인증 종료를 구분하도록 세 개의 경로를 수정해 사용자 세션이 불필요하게 종료되는 문제를 막았습니다.

AI가 구현을 맡는 비중이 커지면서 반복되는 코드 검토에 시간이 들었습니다. 테스트로 작업 경계와 완료 조건을 먼저 정하고, 반복되는 코드 규칙과 작업 Context를 Skill·Test·Agent workflow에 담았습니다.

Storybook을 화면 단위 User Flow QA 카탈로그로 재구성했습니다. 디자이너가 UI Picker로 수정 대상을 직접 지정하고 같은 Storybook 화면에서 결과를 다시 확인할 수 있게 했습니다. Picker가 복사하는 결과도 Markdown 링크로 바꿔 수정 위치를 읽고 해당 화면으로 바로 이동할 수 있게 했습니다.

MSW를 붙여 Backend가 실제 API를 바꾸기 전 응답 변화가 UI에 미치는 영향을 확인할 수 있게 했고, Figma Frame Link와 Layout Verification도 같은 review surface에 넣었습니다. 결과적으로 구현 중간부터 디자인·백엔드·프론트가 같은 화면을 기준으로 이야기할 수 있는 구조가 됐습니다.

Figma를 AI 설명의 원문으로 사용

디자인 변경을 사람이 다시 자연어로 해석해 AI에 설명하는 반복 Context Transfer도 줄였습니다. 공식 Figma MCP로 Agent가 디자인 구조를 직접 읽고, 공식 MCP가 제공하지 못하는 Comment는 별도 Comment MCP로 보완했습니다. Figma 링크 자체가 구현 Context의 entry point가 되고, revision과 comment도 같은 source를 다시 읽어 후속 작업을 이어가는 입력이 됐습니다.

EAS 배포 티어는 development(로컬), preview(TestFlight·APK), production으로 정리했습니다. 정식 릴리즈에서 runtimeVersion이 바뀌면 OTA baseline도 함께 갱신하고, 핫픽스 이후에는 main → develop 백머지 PR을 자동 생성하게 했습니다. production 승격 시 prerelease SDK가 들어가지 않도록 gate를 두고, OTA 즉시 적용·수동 업데이트·서버 지시 앱 업데이트 경로를 구현했습니다.

스토어 운영에서는 iOS의 미사용 권한 문구와 광고 식별자 수집 관련 심사 거절도 대응했습니다. Android release 빌드에서는 R8 코드·리소스 축소를 적용하고, iOS bundle id를 prod/dev로 분리해 환경 간 충돌을 줄였습니다.

관측 측면에서는 Next.js와 Expo 양쪽에 SigNoz Error Reporting SDK를 구축했습니다. 기존에는 프론트에서 발생한 사용자 오류와 Backend trace 사이의 인과관계가 끊겨 있었는데, 요청에 traceparent를 전파하고 리포트 body의 주요 값을 attribute로 승격해 사용자 오류 → API 응답 → Backend trace를 하나의 탐색 흐름으로 연결했습니다.