HYEONSEIM.

앱 안에서 고객이 만나는 화면을 계속 다뤘어요. 제품 진입부터 멤버십, 포인트, 로그인과 결제까지 기능마다 앱과 웹뷰를 어떻게 연결할지 확인했어요.

제품 간 진입

외부 서비스에서 앱 안의 다른 제품으로 이어지는 웹뷰 허브를 만들고, 연결 대상에 따라 안내 문구를 나눴어요.

포인트와 멤버십

멤버십 구매 화면의 목록과 설명을 정리했어요. 포인트 화면을 개편할 때는 기존 내역 경로와 국·영문 표시도 함께 다뤘어요.

로그인과 결제

로그인·본인확인 화면 변경에 참여했어요. 이후에는 포인트 충전의 결제 위젯과 결과 복귀 화면까지 웹뷰 흐름을 다뤘어요.

• WebView
• React
• TypeScript
• 앱 브릿지

운영자가 매일 쓰는 화면에서는 한 메뉴의 변경이 다른 업무에 미치는 영향까지 살폈어요.

세션과 메뉴 상태

로그인 후 사용자 정보와 메뉴가 갱신되는 순서를 다루고, 세션 만료와 이전 화면 복귀 때 생기는 UI 문제를 수정했어요.

파트너 정산 조회

파트너 정산 요약과 정산서별 운행 내역을 찾고 조회하는 화면을 구현했어요.

운영 도구 정리

기존 JavaScript·MUI 기능을 TypeScript·Ant Design 기반으로 옮기고, 도메인별 Admin 분리와 모노레포 통합에 참여했어요.

• 운영 Admin
• React
• TypeScript
• 상태 관리

SWAP에서는 초기 웹·웹뷰·Admin 구축부터 상품 탐색, 첫 주문, 결제 정보와 사업자 포털까지 여러 고객 접점을 맡았어요.

주문과 결제 표시

첫 주문에서 액세서리 구매와 구독 입력을 나눴어요. 영수증 화면은 서버 조회 결과와 연결하고 가격 표시 경로를 조정했어요.

로그인 계약 전환

팀과 함께 자전거 고객 로그인을 새 OAuth2 계약에 맞춰 옮겼어요. 로그인 직후의 토큰 상태 경합과 가입·동의 흐름도 정리했어요.

상품 탐색과 사업자 포털

영문 상품 상세와 빠른 주문 경로를 연결했어요. 사업자가 구독·납부 상태와 결제수단을 다루는 화면에서는 접근 확인과 결제 후 복귀 경로를 맡았어요.

브릿지 호출 방식

기존 Android·iOS 호출에 Flutter의 callHandler와 JavaScriptChannel.postMessage 경로를 추가했어요. 채널에 따라 객체 전달과 JSON 직렬화를 나누고, 호출 중 동기 예외가 나면 다음 방식을 시도하게 했어요. 호출 성공과 네이티브 처리 완료는 구분했어요.

• React
• TypeScript
• SWR
• Zustand
• Flutter WebView

음성 AI를 고객 접점에 연결하기 위해 벤더와 제품 흐름, CX 시나리오를 함께 검토했어요.

도입 범위 검토

미납 안내와 해피콜의 PoC 범위, 비용, 연동 요건을 비교하고 CX 팀과 안내 시나리오를 조율했어요.

제품 안의 진입점

반납형 구독 완료 화면에서 계약 안내로 들어가고, 전화 앱에서 돌아오는 흐름을 연결했어요.

운영 확인

연동 이후 사용량과 비용을 추적했어요. 통화 건수를 상담 완료나 문제 해결 건수로 보지는 않아요.

• 제품 연동
• CX 협업
• WebView

통화량을 상담 성공이나 문제 해결 건수로 해석하지 않아요.

AI 보조 개발을 프로젝트 구조와 검증 기준에 맞춰 쓰는 방법을 정리해 FE 팀에 공유했어요.

저장소별 규칙

프로젝트마다 다른 코드 구조와 작업 절차를 반영해 개발 스킬을 구성하고 개선했어요.

검증 방식

SWAP 모노레포의 의존 경계 검사, 변경 범위에 따른 확인 절차, 설정 백업·복구 방법을 안내했어요.

생성 코드 검토

AI가 만든 코드도 구조와 복잡도를 직접 살피고 필요한 범위만 반영하는 판단을 공유했어요.

• 개발 방식
• 코드 검토
• 팀 공유

팀 생산성 향상률은 측정하지 않았어요.

로컬이나 스테이지 웹서비스를 iOS·Android WebView 안에서 확인할 수 있도록 만든 공개 QA 도구예요.

실제 웹뷰 환경

iOS WKWebView와 Android WebView에서 화면을 열고 안전 영역과 네비게이션 동작을 확인할 수 있도록 셸을 구성했어요.

점검 패널

웹 콘솔에 뷰포트, 스토리지, 로그 등의 확인 기능을 모았어요.

• React Native
• WebView
• QA 도구

공유모빌리티 인수 서비스의 인수인계와 유지보수에 참여했어요.

인수 서비스 유지보수

기존 서비스의 운영 맥락을 이어받아 프론트엔드 유지보수에 참여했어요.

• 인수 서비스
• 유지보수

Japan TF에서 홈페이지·백오피스·웹뷰를 개발하고 일본 서비스에 맞는 화면과 앱 연결을 다뤘어요.

일본어 화면

일본 서비스 웹뷰의 UI 문구를 현지화했어요.

앱 브릿지

웹뷰에서 네이티브 기능을 호출하는 WebKit 브릿지 연결에 기여했어요.

• 해외 서비스
• WebView
• 앱 브릿지

공항 콜밴 인수 서비스의 홈페이지와 백오피스 재개발에 참여했어요.

고객·운영 화면

서비스 인수 후 고객 홈페이지와 운영용 백오피스의 프론트엔드 재개발에 참여했어요.

• 인수 서비스
• 고객 웹
• 백오피스

공개 라이브러리에서 옵션 변경에 따른 동기화 오류를 수정했어요.

동적 옵션 변경

react-wheel-picker의 옵션이 바뀔 때 선택 값의 위치가 따라오지 않는 오류를 한 줄 수정으로 해결했어요. 기여 PR은 2025년 6월 30일 병합됐어요.

• 오픈소스
• React
• 버그 수정