모든 프로젝트는 문제에서 시작됩니다

대부분의 발명품이나 아이디어가 그렇듯, 저의 프로젝트 또한 하나의 문제에서 시작되었습니다.

저에게 그 문제는 바로 헬스장에서 발생했습니다.

저는 여러 가지 이유로 — 어떤 것은 제 통제 범위를 완전히 벗어난 이유로 — 운동을 이따금씩 거르게 되는 자신을 자주 발견했습니다. 그 부분은 정상입니다. 삶을 살다 보면 그런 일이 생기기 마련이니까요.

제가 어려움을 겪었던 부분은 그것으로부터 어떻게 **회복(recover)**할지를 결정하는 것이었습니다.

대부분의 사람들은 단순히 이렇게 말할 것입니다:

"등 운동(Back Day)을 놓쳤다면, 그냥 내일 하세요."

네, 그것도 방법입니다.

하지만 저는 항상 특정 날에 특정 운동을 하는 것을 좋아해 왔습니다. '월요일은 언제나 나의 가슴 운동(Chest Day) 날이다' 😤

그때 아이디어가 떠올랐습니다.

만약 제가 운동을 놓칠 때마다 남은 일주일의 일정을 지능적으로 재구성할 수 있는 **헬스장 스케줄러(Gym Scheduler)**를 만든다면 어떨까?

장기적인 비전은 궁극적으로 AI를 통합하여 사용자의 목표, 일정, 그리고 놓친 세션에 따라 개인화된 운동 조정을 생성할 수 있도록 하는 것입니다.

그리고 이 문제가 저 개인에게 영향을 미치기 때문에, 이것은 만들기에 완벽한 프로젝트처럼 느껴졌습니다.

코드를 작성하기 전, 우리는 계획을 세웠습니다

저의 코딩 멘토가 가르쳐준 가장 가치 있는 교훈 중 하나는 이것이었습니다:

"만들기 전에 항상 계획을 세워라."

키보드에 손을 대기 전에 상황을 충분히 생각하는 것만으로도 놀라울 정도로 많은 개발 문제들을 피할 수 있습니다.

이 점은 Claude Code와 같은 강력한 도구와 함께 작업할 때 더욱 중요해졌습니다.

저의 초기 프롬프트는 대략 다음과 같았습니다:

"헬스장 스케줄러(Gym Scheduler) 앱을 만들고 싶어. 먼저 아이디어를 브레인스토밍해 보자. 나에게 질문을 많이 던져주고, 우리가 모든 것을 정리할 수 있는 계획 파일(planning file)을 만들어줘."

그리고 정확히 그렇게 진행되었습니다.

단순한 아이디어로 시작된 것이 빠르게 다음과 같은 내용을 다루는 **방대한 계획 문서(massive planning document)**가 되었습니다:

• 아키텍처 (Architecture)
• 인증 (Authentication)
• 데이터베이스 구조 (Database structure)
• API 경로 (API routes)
• 기능 (Features)
• 배포 전략 (Deployment strategy)
• 빌드 단계 (Build phases)

단 한 줄의 코드도 작성되기 전에, 프로젝트 전체의 로드맵이 완성되었습니다.

Planning.md screenshot

솔직히 말해서, 계획 파일이 이렇게 커질 줄은 몰랐습니다 😅

Claude가 나의 프로젝트 매니저가 되었습니다 😅

저는 아직 배울 것이 많은 학생 개발자이기 때문에, Claude가 단순히 저를 대신해 코드를 작성해 주는 것만을 원하지 않았습니다.

저는 Claude가 저를 가르쳐 주기를 원했습니다.

몇몇 지점에서는 Claude에게 무엇을 하고 있는지, 그리고 왜 그렇게 하고 있는지 설명해 달라고 요청하기도 했습니다.

이 프로젝트의 목표 중 하나는 다음 사항들을 더 잘 이해하는 것이었습니다:

• 객체 지향 프로그래밍 (Object-Oriented Programming, OOP)
• SOLID 원칙 (SOLID Principles)
• 애플리케이션 아키텍처 (Application architecture)

Claude는 다음과 같은 스택을 제안했습니다:

하지만 제안을 맹목적으로 받아들이는 대신, 저는 모든 선택에 대한 근거를 제시해 달라고 요청했습니다.

왜 React인가? 왜 MongoDB인가? 왜 다른 것은 안 되는가?

결과적으로 이 과정은 프로젝트에서 가장 교육적인 부분 중 하나가 되었습니다. 단순히 무엇을 사용할지가 아니라, 언제 그것을 사용해야 하는지를 이해하는 데 도움이 되었습니다.

단계별 빌드 (Building It Phase by Phase)

계획이 완료된 후, 우리는 마침내 빌드를 시작했습니다.

제가 Claude에게 특별히 요청한 것 중 하나는 애플리케이션 전체를 한 번에 생성하지 말 것이었습니다.

대신, 단계별로 (phase by phase) 빌드하기를 원했습니다.

Claude code terminal

이것은 프로젝트 전체를 통틀어 가장 잘한 결정 중 하나가 되었습니다.

저에게 주는 이점:

• 학습하기 더 쉬움
• 이해하기 더 쉬움
• 디버깅 (debug)하기 더 쉬움

Claude에게 주는 이점:

• 더 작은 작업 단위
• 더 적은 실수
• 더 나은 코드 리뷰 (code reviews)

한때는 모든 것을 멈추고 다음과 같이 질문하기도 했습니다:

"모델 (model)이란 정확히 무엇인가요?"

그러자 Claude는 저에게 코드를 던져주는 대신, 개념을 설명해 주고 그것이 프로젝트에 어떻게 부합하는지 알려주었습니다.

model explanation screenshot

AI가 아무리 강력해지더라도 학습 과정은 언제나 중요합니다.

앱이 살아 움직이는 과정을 지켜보기 ✨

처음에는 React-Vite 로고가 떠 있는 빈 페이지뿐이었습니다.

그다지 흥미롭지는 않았죠 😭

그러다 점차 기능들이 하나씩 추가되면서 앱의 형태가 갖춰지기 시작했습니다:

• 로그인 시스템이 나타났습니다
• 운동 스케줄이 올바르게 표시되기 시작했습니다
• 운동 항목을 추가하거나 삭제할 수 있게 되었습니다
• 페이지들이 서로 연결되기 시작했습니다

그리고 갑자기, 계획 문서 안에만 존재하던 무언가가 **실제 애플리케이션 (Application)**이 되어가고 있었습니다.

이전 프로젝트들과 비교했을 때 개발 프로세스가 얼마나 빨라졌는지 정말 믿기지 않을 정도였습니다.

예를 들어, 이전 프로젝트에서 간단한 로그인 시스템을 구축할 때는 다음과 같은 과정이 필요했습니다:

1. 1시간짜리 YouTube 튜토리얼 시청
2. Firebase 문서 읽기
3. ChatGPT에게 도움 요청하기
4. 더 많은 에러 마주하기 😭

이번에는 완전히 다르게 느껴졌습니다.

물론... 모든 것이 완벽하게 진행된 것은 아니었습니다.

"내 컴퓨터에서는 잘 되는데" 모먼트 😭

마침내 로컬 (Local) 환경에서 모든 것을 작동시킨 후, 애플리케이션을 배포했습니다.

그러자 즉시 다음과 같은 상황을 맞닥뜨렸습니다:

Google Auth error screenshot

제 컴퓨터에서는 모든 것이 완벽하게 작동했습니다. 하지만 프로덕션 (Production) 환경은 다른 계획을 가지고 있었나 봅니다.

몇 시간 동안 문제를 조사한 끝에, 원인이 Google Cloud Console 안에 숨어 있다는 것을 발견했습니다.

제 콜백 URI (Callback URI)가 localhost로만 설정되어 있었고, 배포된 Render URL이 누락되어 있었던 것입니다.

아주 작은 설정 실수 하나 때문에 몇 시간 동안 디버깅 (Debugging)을 해야 했습니다. 전형적인 개발자의 경험이죠 😭

하지만 결국 설정을 업데이트하고 재배포 (Redeploying)한 후에야 모든 것이 마침내 작동하기 시작했습니다.

첫 번째 버전은 예쁘지 않았습니다... 하지만 작동했습니다 💪

처음으로 작동한 버전은 제가 현재 사용하는 버전과는 전혀 달랐습니다.

UI of Gym Scheduler

화려한 도구도, 고급 기능도, 다듬어진 UX (User Experience)도, AI 스케줄링 (AI Scheduling)도 없었습니다.

그저 기본적인 기능뿐이었습니다:

• ✅ 운동 추가
• ✅ 운동 삭제
• ✅ 운동 분할 (Workout splits) 이름 변경
• ✅ 일정 저장

그리고 솔직히 말해서? 그것만으로 충분했습니다.

왜냐하면 작동했으니까요.

처음으로 제가 개인적으로 직면했던 실제 문제를 해결하는 기능적인 애플리케이션을 갖게 된 것입니다.

그리고 그 기분은 정말 최고였습니다.

다음 단계는?

첫 번째 버전은 기능적이었지만, 동시에 매우 거칠었습니다.

Part 2에서는 다음과 같은 기능들을 추가하여 단순한 스케줄러를 훨씬 더 세련된 결과물로 어떻게 변화시켰는지에 대해 이야기하겠습니다:

• 여러 프로그램
• 운동 순서 변경
• 현재 날짜 강조
• BMI 계산기
• 칼로리 계산기
• 더 나은 UI/UX
• 그리고 몇 가지 재미있는 헬스장 특화 요소들 😎

불행히도... 저를 기다리고 있었던 것은 지금까지의 프로젝트 전체를 통틀어 **가장 좌절스러운 버그 (Bug)**였습니다 😭🙏

다음 글에서 만나요 🚀