금융 학습 사이트 만들기 (금융 문맹 퇴치!!)

나만의 메모앱 만들기 이후로도 클로드 코드를 이용해서 여러 가지를 계속 끄적였다. godot 기반 게임도 몇 번 만들었다가 지웠다가 하고... 일단 계속해서 만들어 보는 것에 의미를 두고 있다.

이번에는 금융 문맹 퇴치! 라는 목적으로 서비스를 하나 만들어보게 되었다.

왜 만들었나

월급을 처음 받았을 때가 생각난다. 4대 보험이 어떻게 적용되고, 소득세는 뭔지, 연말정산은 어떤 건지... 솔직히 정확하게 알지 못했다. 검색해봐도 어려운 말투성이라 몇 줄 읽다가 끄게 된다.

돈 얘기는 누구한테나 중요한데, 배울 곳은 이상하게 마땅치 않다. 학교에서도 안 가르쳐줬고, 유튜브에는 물론 좋은 정보가 많지만 내가 궁금해질 때마다 들어가야 해서 뭔가 좀 그렇고...

그래서 듀오링고처럼 짧고 가볍게, 대신 내 월급 얘기로 금융을 배우는 앱이 있으면 좋겠다고 생각했다. 그리고 항상 헷갈리는 소득공제와 세액공제, 그 외에 여러 금융 지식들을 가볍게 들러서 배워가는 서비스가 있으면 어떨까 싶었다.

어떤 서비스인가

한 줄로 하면 "경제 문맹 퇴치용 금융 학습 웹앱"이다.

• 가입 없이 바로 시작. 첫 화면에서 30초면 첫 문제를 맞힌다. 진도는 일단 localStorage에 저장돼서 로그인이 필요 없다. -> 이건 추후 DB 구성 후 회원제를 개발해야 하나 고민이다.
• 한 화면에 한 문제. OX, 객관식, 빈칸 채우기로 짧게 끊어서 푼다.
• 배운 걸 바로 써먹는 계산기. 실수령액, 복리, 연금저축 세액공제, 전세 vs 월세, 세금 시뮬레이터까지. 결과 옆엔 항상 "이 숫자가 왜 나왔는지" 설명이 붙는다.
• 콘텐츠가 핵심. 돈의 기초부터 세금·공제, 투자 첫걸음, 전세·월세까지 15개 레벨. 어려운 용어는 그 자리에서 밑줄 치고 탭하면 보여준다.

종목 추천이나 투자 조언은 절대 안 한다. 원리를 이해하는 데까지만. 계산기도 전부 "추정치예요, 정확한 건 국세청에 확인하세요"를 달아뒀다. 돈 얘기에서 이 선을 넘으면 안 된다고 봤다.

홈 화면

홈 화면 레이아웃을 어떻게 구성해야 하나 가장 고민이 많아서 계속 고쳤던 것 같다. 경제 뉴스는 네이버 검색 API를 사용했다.

모의고사 기능

연말정산 시뮬레이터

학습 경로

금융 관련 여러 퀴즈들을 풀어볼 수 있게 했다.

클로드 코드랑 어떻게 작업했나

이번엔 처음부터 좀 다르게 접근했다. 코드를 바로 짜게 시키는 대신, 로드맵 문서를 먼저 같이 만들었다.

PROJECT.md 파일에 제품 원칙, 폴더 구조, 데이터 모델, 그리고 할 일을 "한 번에 하나씩 시킬 수 있는 크기"로 잘게 쪼개 정리했다. 예를 들면 "레슨 플레이어 만들기", "실수령액 계산기 만들기" 이런 식으로 작성했다. 각 작업엔 완료 기준도 붙였다.

그 다음부턴 이 문서를 위에서부터 하나씩 수행하게 했다. 클로드가 작업을 끝내면 완료 기준을 확인하고 다음으로 넘어가고, 막히면 그 작업만 다시 쪼갰다. 스택은 Next.js에 타입스크립트, Tailwind 정도였고 백엔드 없이 전부 브라우저에서 돌아가게 했다.

이 방식이 생각보다 잘 먹혔다. 한 번에 "금융 앱 만들어줘"라고 던졌으면 아마 산으로 갔을 것이다. 이건 예전에 메모앱 만들기할 때도 느꼈던 점이다. 여전히 작업은 쪼개서 요청해야 잘 돌아간다.
디자인 톤이나 말투 같은 것도 가이드 파일로 따로 빼두고 계속 참조하게 했더니 일정하게 결과가 나왔다.

만들면서 느낀 점

며칠 만에 대략적인 형태가 갖춰진 모습까지 왔다. 특히 금융 관련 콘텐츠나 학습 문제 등도 클로드가 알아서 채워 주었는데 생각보다 퀄리티도 좋았다.

하지만 결국 제품의 질을 가르는 건 기능이 아니라 콘텐츠의 말투, 난이도, 그리고 유저를 붙잡을 수 있는 피처 기능인데... 이건 여전히 내가 붙잡고 다듬어야 했다. 뭘 만들지와 왜 만드는지는 여전히 내 몫이었던 것 같다.

초창기 커밋을 실행해 보면 아래 모습인데... 클로드 코드가 만들어 준듯한 특유의 스타일과, 마스코트라고 만들어진 모양이 아무래도 좀 어색하다. 무언가 AI스러운 스타일을 줄이기 위해 내가 좋아하는 픽셀아트풍 캐릭터나 아이콘들을 많이 활용했다.

앞으로

지금은 진도가 브라우저에만 저장되는 MVP 단계다. 다음엔 계정을 붙여서 기기 간 동기화를 하고, 회원제를 도입해 보면 좋겠다는 생각을 하고 있다. 그리고 매일 들러서 확인할 수 있는 핵심 기능도 계속 고민해야 할 문제다.

돈 공부는 원래 재미없다고들 하는데, 적어도 여기서는 안 그랬으면 좋겠다는 생각이다. 만드는 나부터 계산기 돌려보면서 "아 이래서 이만큼 떼가는구나" 하고 몇 번 깨달았으니 반은 성공했다.