차계부 앱을 직접 만들다

내 자동차를 하나의 유기체로 본다면, 반려 자동차를 기르는 것과 같다고 표현할 수 있다. 아주 기본적인 주유부터 시작해서, 엔진오일 교체, 타이어 관리, 보험, 세금 납부, 세차 등... 주기적으로 관리해 줘야 하는 항목이 굉장히 많다. 그리고 이런 것들을 제때 기록해 놓지 않으면 '아 지난번에 엔진오일 교체 언제 했더라' 하고 결제 내역을 뒤지고 카카오톡 메시지 히스토리를 검색하는 상황이 반복된다.

그래서 자동차에 애정이 있는 많은 분들은 이미 '차계부'라는 것을 작성하고 있다. 차계부는 말 그대로 '차량 가계부'인데, 자동차와 관련된 여러 관리 항목을 정리해 놓는 노트이다. 그리고 차계부 작성을 쉽게 할 수 있도록 도와주는 좋은 앱도 시중에 많이 출시되어 있다.

구글 플레이 스토어에 '차계부'를 검색해 보았다.

그런데 왜 직접 차계부 앱 만들기에 도전했냐 하면, 내 손에 딱 맞건는 차계부 앱이 없어서이다.

아무래도 직업이 디자이너이다 보니 차계부를 쓰더라도 깔끔하고 예쁜 디자인의 앱을 사용하고 싶다. 그런데 앱 디자인이 괜찮다 싶으면 로그인, 불필요한 부가 기능, 광고성 알림 등이 너무 많았고, 딱 필요한 기능만 제공하는 좋은 앱을 발견하면 디자인이 마음에 들지 않았다.

직접 만들어 보자

최근 Claude Code를 활용한 바이브 코딩으로 간단한 웹 페이지 정도를 만들 수 있게 되면서, 개발 언어를 몰라도 실제 동작하는 웹 서비스를 배포까지 할 수 있게 되었다. (물론 랜딩페이지나 타이머, 이모지 생성기 등 아주 간단한 서비스였다.) 서당 개 3년이라고… 개발 교육 회사에서 수년간 개발자분들 옆에서 이것저것 주워듣다 보니 웹 개발의 전반적인 흐름과 용어를 알게 된 덕분에 수월했던 것도 있다.

서당 개는 알고 있다. Java, Kotlin과 같은 앱 개발 언어를 사용하지 않아도 '웹앱'이라는 것을 만들 수 있다는 것을! (물론 네이티브 앱에 비해 기능적인 한계는 있다. 하지만 차계부 정도라면 충분하지 않을까?) Claude Code와 함께라면 이번 프로젝트도 충분히 웹앱으로 만들 수 있겠다 싶었다. 그게 이번 도전의 시작이었다.

차계부 앱 ‘가라지로그’ 기술 스택

(사실 이번이 앱 개발을 처음 도전하는 것은 아니다. 과거에 React Native로 앱 만들기를 시도한 적이 있는데, 어이없게도 Android Studio 에뮬레이터 설치에서 막혀서 포기했었다. 그때는 문제를 해결하기 위해 구글 개발자 블로그와 스택오버플로 등 고수 개발자분들의 포스팅을 찾아보며 헤맸던 기억이 있다.)

나만의 학습 사이클

무엇인가를 배울 때 나름의 학습 방식이 있다. 학습 의지가 생기면 시작부터 출시까지 최대한 빠르게 경험하는 것을 목표로 삼는다.

기획 → 디자인 → 개발 → 출시까지, 속도가 핵심이다. 중간에 모르는 키워드가 생기면 일단 수집하고 스킵 한다. 키워드 하나하나에 브레이크 걸고 공부할 시간은 제쳐두고, '출시'라는 목표만 보고 달려간다. 출시가 끝나면 다시 처음으로 돌아간다. 이번에는 첫 번째 사이클에서 몰랐던 키워드들을 하나씩 채우면서 새로운 기능도 탐구하고, 다시 출시까지. 그렇게 반복하면서 학습이 쌓인다.

AI 도구가 발전하면서 이 학습 프로세스를 처음부터 끝까지 경험할 수 있는 시간이 확 단축되었다. 이번 앱 출시 도전의 경우 일요일 오전에 시작해 구글 플레이 개발자 콘솔에 업로드하고 세팅을 완료하기까지 딱 일주일 걸렸다.

Claude와 기획 부터 시작하다

어떤 기능이 필요한지, 타겟은 누구인지, 경쟁 앱과의 차별점은 무엇인지... Claude와 대화를 거듭하면서 MVP 기획이 구체화됐고 마크다운 문서로 정리했다. (이 문서는 추후 Claude Code로 바이브 코딩을 시작할 때 가이드가 되었다.)

MVP에 넣은 것들

• 차고 (차량 등록 및 캐릭터 선택)
• 차량 관리 (정비 · 세차 · 튜닝 기록)
• 주유 관리 (달력 · 차트)
• 행정 관리 (보험 · 자동차세 등)
• 관리 알림 (km · 날짜 기준)
• 지출 대시보드
• 데이터 백업 · 복원 · 엑셀 내보내기

기록, 알림, 조회. 이 세 가지만 잘 되면 충분했다. 서비스 핵심 가치는 '광고 없음 · 로그인 없음 · 내 폰에만 저장 · 필요한 기능만'. 군더더기 없이 꼭 필요한 기능만 담는다는 게 처음부터 끝까지 기준이었다.

앱 디자인은 Google Stitch AI

구글에서 개발하고 있는 UIUX 디자인 AI 도구 스티치 (Stitch: https://stitch.withgoogle.com/)%EB%A5%BC) 를 활용해 디자인 초안을 잡을 계획이었다.

1. 우선 Claude에게 앱 기획에 맞는 다이어그램 생성을 요청한다. Google Stitch에 프롬프트를 작성할 때 '어떤 페이지에 어떤 기능이 들어갈지' 한눈에 파악하기 위함이었다.

Claude가 제작한 다이어그램

2. Claude에게 Google Stitch용 프롬프트 작성을 요청했다.

3. Google Stitch에 해당 프롬프트를 그대로 입력하니, UIUX 디자인 초안이 생성되었다. (색상이나 폰트 등이 마음에 들지 않지만, UI 구조와 전체적인 흐름이 아주 괜찮다. 최대한 그대로 사용하되 기본적인 디자인 시스템만 조정하면 될 것 같았다.)

4. Stitch의 '내보내기' 기능을 활용해 디자인을 .zip 파일로 저장하였고, Claude Code로 개발할 때 초안으로 활용하였다.

이름하여 ‘가라지로그’

그나저나 앱 이름은 내가 지은 것이 아니다. Stitch가 만들어 준 디자인 초안에서 앱 이름이 '가라지로그'라고 적혀있었다. 가라지로그(GarageLog) = Garage(차고) + Log(기록) 합성어를 한국어 발음 그대로 표현한 듯한데… 발음도 자연스럽고 컨셉이랑 딱 맞아서 그대로 쓰기로 했다. 올드한 감성도 있어서 좋았다.

2편에서는 바이브 코딩으로 실제 개발한 과정을 공유하겠다.