소액결제 앱
신용카드 없이 휴대폰 소액결제로 값을 치르고, 결제 대금은 다음 달 휴대폰 요금에 합산되는 통신사 결제 서비스의 앱을 맡았습니다. 투입했을 때 코드는 얽혀 있고 쓰지 않는 코드가 섞여 있어, 화면 · 결제 · 알림 · 배포 코드부터 파악하고 정리했습니다. 그 위에 매장에서 쓰는 바코드 결제와, 홈 화면 위젯에서 바로 결제로 들어가는 기능을 더했습니다. 결제 앱은 사용자가 성공 · 실패 · 진행 중 상태를 잘못 읽으면 결제가 됐는지조차 헷갈리게 되므로, 상태 표시와 오류 처리를 함께 점검했습니다.
카드 등록 없이 휴대폰 요금으로 내는 매장 바코드 결제
통신사 소액결제는 가입자가 카드를 따로 등록하지 않고, 소액결제 한도 안에서 휴대폰 요금에 합산해 결제하는 서비스입니다. 결제한 금액은 다음 달 휴대폰 요금에 함께 청구되고, 매장에서는 통신사 멤버십 할인과 결제가 한 번에 적용됩니다. 편의점, 빵집, 식당 같은 매장에서 쓰는 바코드 결제를 새로 넣었습니다. 결제 화면으로 들어가 바코드를 띄우고, 지금 결제할 수 있는 상태인지 보여 주고, 안 될 때 안내하는 데까지 매장 계산대에서 빨리 끝나도록 흐름을 짰습니다.
앱을 열지 않고 위젯에서 시작하는 결제 진입
결제 앱은 꺼내서 결제 화면이 뜨기까지의 단계가 짧을수록 좋습니다. 홈 화면 위젯을 만들어, 앱을 직접 열지 않고도 위젯에서 결제 화면으로 바로 들어가게 했습니다. 위젯에서 결제 진입까지 거치는 단계를 줄이는 데 집중했습니다.
성공 · 실패 · 진행 중이 갈리는 결제 상태 표시
소액결제 앱에서 사용자가 결제 상태를 잘못 읽으면, 결제가 됐는지 안 됐는지 알 수 없게 됩니다. 성공, 실패, 진행 중이 화면에서 분명히 갈리도록 화면 흐름과 예외 경우를 함께 점검했습니다. 알림은 전송 경로가 두 가지라, 경로마다 다른 처리와 운영 중 생길 수 있는 예외를 확인하며 알림 수신, 기기 등록, 오류 경우를 검증했습니다.
얽힌 코드 정리와 테스트 배포 · 오류 추적 환경
소액결제 앱의 코드는 투입 초기에 복잡하게 얽혀 있었고 쓰지 않는 코드가 섞여 있었습니다. 유지보수와 기능 추가가 되는 상태로 만들려고 화면 · 결제 · 알림 · 배포 관련 코드를 먼저 파악하고 정리했습니다. 그다음 테스트 배포와 오류 추적이 되는 환경을 마련해, 개발과 검수 단계에서 시험판을 나눠 주고 오류를 확인하는 흐름을 만들었습니다.
이 작업의 포인트
얽힌 코드를 정리해 기능을 더할 수 있는 상태로
매장 바코드 결제와 홈 화면 위젯 결제 진입
알림 수신 · 기기 등록 검증과 테스트 배포 · 오류 추적 환경
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…