next.js(app router) react typeScriptreact-querytailwindCSSVercelReact Native(expo)프론트 1명, 백엔드 2명, 디자이너 2명
기여한 부분 : 프론트엔드 Next.js 웹 + React Native 앱을 모두 담당하였습니다.
WebView 기반 페이지의 바텀 네비게이션 없는 전체 화면 몰입형 UI를 구현하는 과정에서, 네이티브 제스처 기반의 스택 네비게이션이 필요했습니다. 초기에는 URL 변화에 따라 새로운 WebView 스크린을 쌓는 방식을 시도했으나, React Query 캐싱 동기화 문제, 브릿지 기반 라우팅 제어 필요성, WebView 로딩 지연 등으로 인해 유지보수성과 사용자 경험 모두 저하되는 한계가 드러났습니다.
이를 해결하기 위해 iOS Safari의 네이티브 제스처 동작에 착안하여 allowsBackForwardNavigationGestures 속성을 적용했습니다. 별도의 스택 네비게이션 구현 없이도 좌측 스와이프를 통한 자연스러운 뒤로 가기가 가능해져, 성능 저하 없이 네이티브와 유사한 탐색 경험을 제공할 수 있었습니다.
벙(모임) 생성 시 사용자가 입력한 시간을 저장하는 과정에서, 로컬 환경에서는 정상적으로 오후 10시 5분(KST)로 표시되었지만 배포 환경에서는 오전 1시 5분(UTC)로 잘못 표시되는 문제가 발생했습니다. 이는 클라이언트에서 입력받은 시간 값을 Date.toISOString()으로 변환해 UTC로 저장한 뒤, 표시 과정에서 환경별 타임존 처리 방식이 달라 불일치가 생긴 것이 원인이었습니다. 특히 서버 컴포넌트와 클라이언트 컴포넌트가 혼재된 구조에서, API 응답 직후 변환을 적용하면 화면마다 다른 시간대가 노출되는 문제가 심화되었습니다.
이를 해결하기 위해 시간 변환 책임을 최종 출력 단계(클라이언트)로 일원화했습니다. 모든 시간 표기 컴포넌트를 클라이언트 컴포넌트로 통일하고, 실제 화면에 노출되는 시점에 Intl.DateTimeFormat이나 date-fns-tz 등을 활용해 UTC → 로컬 시간 변환을 수행하도록 변경함으로써, 다국가 환경에서도 일관된 사용자 경험을 제공할 수 있었습니다.
Web2에서 OAuth(email 기반) 로그인 방식을 사용하다가, 서비스 성격이 블록체인 중심으로 바뀌면서 유저 식별 키를 이메일이 아닌 코인베이스 월렛의 address로 전환하게 되었습니다. 웹에서는 wagmi와 @coinbase/onchainkit을 활용해 Smart Wallet 로그인 플로우를 구현했고, 브라우저 팝업을 통한 로그인은 정상적으로 동작했습니다.
그러나 동일한 로직을 React Native WebView에서 실행했을 때는 문제가 발생했습니다. iOS에서는 Smart Wallet 연결 단계에서 timeout이 발생했고, Android에서는 아예 팝업조차 뜨지 않았습니다. 원인을 분석해보니, WebView로 띄운 웹은 네이티브 환경에서 동작하는 Smart Wallet 프로토콜과 직접적으로 연동되지 못한다는 한계가 있었습니다. 즉, 웹과 앱은 완전히 같은 방식으로 Web3 로그인을 처리할 수 없었습니다.
따라서 React Native 프로젝트에서는 웹에서 사용한 wagmi 로직을 그대로 재사용할 수 없으며, 앱 환경에 맞게 별도의 wagmi 설치 및 Web3 로그인 로직을 구성해야 했습니다. 이는 앱이 단순히 웹을 감싼 구조가 아니라, 네이티브 환경에서 월렛 프로토콜을 직접 처리해야 하는 특성 때문입니다.