"통장, 카드 사용 내역 확인해보려면 은행마다 일일이 인증서로 로그인해야 해서 너무 불편해요. 한꺼번에 다 모아서 볼 수 있었으면 좋겠어요."
지인의 이 한마디가 발단이었습니다. 약 1주일 전, 구글 앱스 스크립트(GAS)를 이용해 구글 시트에 입출금 내역을 자동으로 기록하는 시스템을 완성했을 때만 해도 다 끝난 줄 알았습니다. 하지만 "PC 말고 모바일로 아무 데서나 보고 싶다"는 요청은 또 다른 도전을 시작하게 했습니다. AI와 함께 개발한 Smart Wallet 웹 앱을 소개합니다.
추진 배경
시중의 통합 자산 관리 앱들은 편리하지만, 늘 두 가지 찜찜함이 남았습니다. 첫째는 내 민감한 금융 정보가 다른 기업의 서버에 저장된다는 점이고, 둘째는 단순히 내역만 보고 싶어도 광고와 복잡한 메뉴들이 시야를 가린다는 점이었습니다.
내가 직접 통제할 수 있는 안전한 환경에서, 오직 나만 볼 수 있는 미니멀한 조회 도구가 필요해서 기존 자동화 앱을 모바일 웹 앱으로 개선, 발전시키게 되었습니다.
목표
100% 프라이버시: 은행 ID/PW는 물론 자산정보까지도 서버에 절대 저장하지 않고 사용자 기기에만 보관하는 구조
서버리스 아키텍처: 별도의 서버 비용 없이 사용자 소유의 구글 인프라(GAS)를 100% 활용.
모바일 퍼스트: 언제 어디서나 스마트폰으로 간편하게 확인하는 세련된 반응형 UI.
사용자 편의성: 복잡한 설정 없이 누구나 쉽게 구축하고 사용할 수 있는 앱
개발과정
1. Flutter에서 웹 표준으로의 선회
처음에는 멋진 네이티브 앱을 만들고 싶어 플러터(Flutter)로 개발을 시작했습니다. 하지만 예상치 못한 곳에서 발목을 잡혔습니다. 프로젝트 폴더 경로에 포함된 '한글'이 빌드 과정에서 계속 에러를 일으킨 것입니다. 경로를 바꾸는 대신, 저는 더 범용적이고 배포가 쉬운 웹 표준 반응형(하이브리드 방식) 개발로 과감히 방향을 틀었습니다.
2. 암호화의 걸림돌 CODEF API
금융 데이터를 가져오는 핵심 엔진인 CODEF API 연동은 풀리지 않는 매듭 같았습니다. 샌드박스(테스트) 환경까지는 순탄했지만, 실제 데이터를 다루는 데모 버전으로 넘어가자 보안 규정이라는 거대한 벽이 나타났습니다. 비밀번호 암호화를 위해 RSA.gs를 추가하고, 암복호화 로직을 맞추는 과정에서 수많은 디버깅 시간이 소요되었습니다.
3. AI 페어 프로그래밍의 교체
이 과정에서 Claude Code 세션 리밋을 세 번이나 겪어야 했습니다. 최근에는 코딩이 갈수록 늘어서 소진 속도도 많이 짧아짐을 느끼고 있습니다. 세번 때 세션 리밋을 겪은 다음부터는 앤티그래비티(Antigravity)로 개발 도구를 전환하기로 하고 이전의 맥락도 잘 전달할 수 있었습니다. 그 덕에 UI/UX의 디테일도 어렵지 않게 잡혔고, 향후의 유지보수를 고려해 파이썬 기반으로 프레임웍도 선회하여 프로젝트를 마무리할 수 있게 해 줬습니다.
개발 과정에서의 시행착오
1. Flutter 빌드 실패
상황: 플러터 개발 중 프로젝트 경로 내 한글 폴더명 때문에 빌드 도구가 계속 충돌함.
AI 요청: "플러터 빌드 시 경로 에러가 발생해. 한글 폴더명이 문제인 것 같은데, 이를 피하면서 모바일 앱을 만들 수 있는 대안을 계획해봐"
플러터 빌드 실패 원인: (1) Dart 컴파일러가 한글 경로에서 임시파일 생성 불가. (2) Shader 컴파일러가 한글 경로를 지원하지 않음
결과: AI의 제안에 따라 GAS 웹 앱 배포가 용이한 HTML5/CSS3/JS 기반의 반응형 웹 앱으로 전환.
2. 샌드박스는 통과, 데모는 거부
상황: CODEF 데모 API 호출 시 비밀번호가 평문이라며 거절당함. CODEF 개발자 매뉴얼에는 데모버전부터는 RSA 암호화가 필수라고 함.
AI 요청: "CODEF 데모 API는 RSA 암호화를 요구해. GAS 환경에서도 사용할 수 있는 RSA 라이브러리를 찾아줘., Perblic key를 암호화하는 함수를 추가해야 하는 건가?."
핵심적인 원인: CODEF의 성공 코드는 0이 아니라 CF-00000이며, 응답 데이터의 필드명도 CODEF 표준 규격을 따르는 데, 앱스스크립트 편집기에서 직접 실행하면 인자가 전달되지 않고 undefined가 전송됨
결과: RSA.gs 모듈을 프로젝트에 통합하고, encryptPassword 함수를 구현하여 어렵 게 보안규정 통과
3. CORS라는 보이지 않는 장벽
상황: 브라우저에서 GAS 웹 앱 URL로 데이터를 요청할 때 통신이 차단됨.
AI 요청: "프런트엔드에서 GAS로 POST 요청을 보낼 때 CORS 에러가 발생해. GAS의 특성을 고려해서 이 문제를 우회할 수 있는 fetch 옵션을 알려줘."
결과: Content-Type을 text/plain으로 설정하여 Simple Request로 인식하게 함으로써 사전 검사(Preflight) 없이 통신 성공.
4. 데이터의 저장과 보안 사이의 갈등
상황: 구글 시트에 데이터를 저장하거나 서버를 두자니 중복 필터링, 보안 등의 장치를 또 마련해야 함
AI 요청: "사용자의 데이터 보안을 위해 시트에 저장하지 않는 방식으로 가면 어때?. 사용자가 조회 기간을 직접 설정해서 가져온 데이터도 메모리에 있는 동안만 처리해서 보여주는 구조는 어떤가 하는거야."
결과: 저장 로직을 과감히 삭제하고, UI에 날짜 선택기(Date Picker)를 도입하여 '실시간 휘발성 조회' 모델 완성. 서버리스의 원칙을 고수.
5. 데이터의 정렬
상황: 여러 은행과 계좌의 데이터가 섞여 들어와 리스트가 엉망으로 표시됨.
AI 요청: "조회된 데이터를 은행명별, 계좌번호별로 그룹화하고, 각 그룹 내에서는 날짜와 시간 기준 내림차순으로 정렬하는 로직으로 짜줘."
결과: 다중 레벨 정렬 알고리즘을 적용 하여 사용자가 가장 보기 편한 리스트 UI 구현.
6. 사라지지 않는 로그인 화면
상황: 로그인 후 대시보드로 넘어갔음에도 로그인 화면이 남아 있거나 깜빡이는 현상 발생.
AI 요청: "로그인이 성공했거나 세션이 계속되는 중이면, 로그인 페이지를 없애고 대시보드만 깔끔하게 보여줘야지."
결과: display: none과 active 클래스를 명확히 분리하고 초기 체크로직을 강화하여 매끄러운 UX 확보.
7. 은행 선택의 한계
상황: 처음엔 6개 은행만 지원했으나, 지인들의 다양한 주거래 은행을 대응하기엔 부족했음.
AI 요청: "사용자들은 시중은행 뿐만 아니라 인터넷 은행(카카오, 토스 등)도 사용할텐데? 은행을 더 확장해줘야 가치가 있을 것 같애."
결과: 국내 대부분의 금융기관(19개)을 선택할 수 있도록 확장, 구현.
결과물
Smart Wallet Web App: 설치가 필요 없는 고성능 반응형 모바일 애플리케이션.
프라이빗 보안 아키텍처: 계좌 정보는 사용자 기기에만, 데이터 처리는 사용자 구글 계정에서만 이루어지는 구조.
통합 사용 매뉴얼: 컴맹도 따라 할 수 있도록 앱 설치부터 은행 설정까지의 가이드 작성.
배운점
AI는 최고의 페어 프로그래머: 단순 코딩을 넘어 보안전략 수립과 아키텍처 변경 과정에서 AI 플래닝 모드는 믿을만 했습니다. 특히 클로드 코드에서 앤티그래비티로 이어지는 협업은 AI 도구마다의 특성과 강점을 경험하는 계기가 되었습니다.
본질에 집중하기: 화려한 기능보다 "사용자가 정말로 안심하고 쓸 수 있는가?"라는 본질에 집중했을 때 더 나은 제품 방향(저장형 -> 조회형)이 결정되었습니다.
앞으로의 계획
향후 지인들을 시작으로 공개적인 웹 배포까지 확대할 것을 고려하고 있지만, 여전히 두 가지 숙제가 남아 있습니다.
보안의 지속성: 사용자 자산 데이터가 브라우저 로컬 스토리지에 남는 방식은 편리하지만, 개인용이 아닌 기업용으로도 적용할 수 있을까? 유무료의 경계는 어디까지가 적정할까? 사용자나 기업이 더 높은 수준의 보안(암호화 저장 등)을 요구하면 어떻게 대응할까?
UX의 단순화: 개발 지식이 없는 일반 사용자가 CODEF API 키를 발급받고 GAS를 배포하는 과정을 쉽게 받아들이고 잘 사용할 수 있을까.
이런 장벽을 넘고 장기적으로 살아남는 앱으로 남도록 더 고민해볼 예정입니다.
참조 (Reference)
CODEF 개발자 매뉴얼
