Claude Code를 이용한 바이브 코딩 짧은 후기 - 방통대 수업 트래커 만들기

이번에는 나만의 서비스를 Claude code를 이용한 바이브 코딩한 절차와 교훈에 대해서 작성해봅니다. 늘 나만의 서비스를 하나씩 만들고 싶었는데 좋은 핑계(?)가 생겨서 하루 이틀 반짝해서 만들어봤습니다. 이게 되네?라고 느끼는 프로젝트였고 웹개발을 직접 핸즈온으로 배우고 구현하는 재미가 있어서 좋은 경험이였습니다. 이 글을 읽고 덜 시행착오를 겪으시고 결과를 만드시길 바랍니다. 

---

1. 문제 정의

커리어의 목표를 위해서 방송통신대에 통계.데이터학과에 25년 2학기에 입학했습니다! 자연스럽게 3학년 편입이라 전공과목을 4학기만에 수강해야하는 상황입니다. 더해서 추후 CS 대학원을 목표로 하고 있어서 컴퓨터과 과목도 넣게되었습니다. 그러다 보니 한학기에 5과목씩 전공을 듣게 되었네요. 많이 듣는건 좋은데  일도 해야하고, 방통대 특성상 자유롭게 들을 수 있는 인강 형태라 미루다가 강의 폭탄 맞을 것 같아서 대책이 필요 했습니다.

한 강좌당 15개가 존재하며 데드라인은 3개월 남짓이다!

 

제가 해결하고 싶은 문제는 꾸준히 수업을 들을 수 있는 시스템을 만들자에 집중했습니다.

 

2. 해결 방법 1 - 노션으로 대시보드 만들기

제일 좋은 방법은 수업이 같거나 비슷한 학우들을 모아서 서로의 진척 사항을 공유하는 것입니다. 그래서 노션의 데이터베이스 기능을 이용하려했습니다. 요구사항은 다음과 같습니다.

• 랜딩 페이지는 학생마다 수강률에 대한 친적사항이 프로그레스바로 보여줄 것
• 수강기록 페이지는 손쉽게 접근할 수 있는 체크박스형태로 만들 것

그래서 다음과 같은 템플릿을 만들었습니다.

전체 과목의 진척사항 확인

개별 강의의 수강 체크

노션에서는 "관계형"이라는 컬럼이 존재합니다. 두 테이블을 관계로 묶고,  수강현황판의 한행은 수강기록 N개의 강의와  1:N 관계이기 때문에 수강기록 데이터베이스 페이지 하나가 수강현황판을 참조하는 식으로 구성했습니다. 또한, 수강현황판에서 수강완료는 "롤업"이라는 컬럼으로 수강기록의 체크박스의 수를 기록하는 형식입니다. 마지막으로 수강 현황판의 "진행률"은 같은 행의 수강완료 / 전체 강의 수의 비율을 시각적으로 나타내었습니다.

반나절정도 노션 데이터베이스를 레퍼런스를 찾고 만들었는데, 생각보다 이 만드는 과정에 "노션식 관계형"에 대한 이해가 없으면 많이 허덕이는 부분입니다. 그래서 동영상으로 소개 영상을 만들었습니다. 맨 밑에 링크 남겨놓겠습니다. 

하지만 노션은 신규등록자 입장에서 되게 불편했습니다. 가이드 영상을 고사하더라도, 나의 새로운 과목을 추가할때 15개씩 수강기록을 남겨야했고(자동화를 통해 1~15회차가 자동으로 만들어지지만) 체크박스 하나씩 클릭하자고 수강기록을 만드는 것도 썩 맘에 들지 않았습니다. 그래서 그냥 웹서비스를 하나 만들자라는 결론에 도달했습니다.

 

3. KNOU Tracker 사이트

4가지 세부 페이지를 구상했습니다.

• 대시보드: 수업 진행 현황을 볼 수 있는 랜딩페이지
• 개인 현황: 수업 진행률을 체크할 개인 페이지
• 신규 등록: 신규 진입자를 위한 등록 페이지
• 관리 

 

 

이렇게 하여 신규사용자가 스스로 자신을 등록하고 기록을하며 전체 진척사항을 서로 공유하여 동기부여를 얻을 수 있는 서비스가 만들어졌습니다.

 

4. 시행착오들

4.1. PRD 문서 작성

개발쪽에서는 PRD라는 문서가 있다는 걸 알게되었습니다. Claude에게 PRD를 만들기 위한 방법으로 질의응답으로 나에게 질문을 해달라고 부탁했고 개발하기전 LLM에게 해당 사항을 읽고 구현하라고 시켰습니다. 나중에 README.md 에 작성하기에도 좋으니 사전에 설정해놓으면 사전 준비작업이 빨라집니다.

README.md 일부

 

4.2. 스택 선택

Claude code를 요즘 간단한 개발할 때 잘 쓰고 있었습니다. 그래서 다양한 조합을 Claude에게 물어봤습니다.

1. Python Only(streamlit)
2. Vanillia Javascript 
3. React,Vue 등 최신 프론트 스택

사실 웹 개발, 특히 프론트쪽은 잘 모르기에 유지보수에 대한 걱정으로 Streamlit을 추구했습니다.

 

하지만 반나절 정도 해보니 내가 원하는 디자인이 계속 나오지 않았습니다. 특히 좌측 한바닥을 차치하는 세부 페이지 드롭다운,  핵심 페이지의 공간 비효율성이 마음에 들지 않았습니다. 그래서 그냥 빠르게 접었습니다. 3번은 투머치였고, 그냥 Vanilla Js로 하기로 결정하고 만들었습니다. 또한 Github Pages로 배포를, 데이터베이스는 요즘 유명하다는 Superbase를 사용했습니다.

4.2. Claude Code 사용

Claude Code Pro 요금제를 사용하고 있어서 웹개발을 계속 시키면 거의 2시간 만에 토큰이 모두 소모됩니다. 시간이 지나면 다시 한도가 돌아가는 시스템인데 Claude-monitor 를 이용해 중간에 개발하다가 끊키는 일이 없도록 했습니다. 한 3번정도 iteration 끝에 웹페이지를 만든 것 같습니다. Claude-monitor 링크는 하단에 넣어놓겠습니다.

 

여기서보면 정확히는 Token과 Message 한도가 있는데, Token은 100%가 도달하면 얄짤 없이 더이상 프롬프팅이 불가능한 반면 Message는 100%가 도달 해도 어느정도 명령을 수행해줍니다.  초반에는 Limit이 걸리면 그냥 손놓고 있었는데 요즘 Gemini CLI이나 Codex CLI 라는 대체 툴도 많아서, 손놓고 놀지말고 도구를 바꿔서 사용하면 연속성있게 사용할 수 있을 것 같습ㄴ다.

 

4.3. 추후 개선할 기능들

빠른 결과를 추구하다보니 비 필수적이 기능들을 아직 구현하지 못했습니다. 차차 구현해볼 생각입니다.

• 크롬 확장 브라우저를 통한 자동 연동    -> 사실 이게 젤 하고 싶습니다. 근데 지식이 전무해서 찾아봐야하는...
• 오픈 서비스로 만들기 위한 로그인 기능
• 사용자의 분석을 위한 로그시스템
• 버그 리포팅

5. 후기

처음만 해도 이정도의 퀄리티가 하루 반나절만에 나오리라고 생각하지 못했습니다. 간단한 개발은 확실히 접근성이 좋아진 것 같습니다. 하지만 그럼에도 개발을 위한 몇가지 사전 지식이 필요하다는걸 깨달았습니다.

• 명확한 요구사항

PRD같은 문서의 존재를 아는 것도 중요하지만 내가 정확히 어떤 프로덕트를 만들고 싶은지 소구하는 것이 중요했습니다. 모호한 목표는 모호한 결과물을 만들기 마련이니까요.

• 백엔드에 대한 기본적인 지식

 배포시에 데이터베이스를 만들어야한다는 개념은 아는데 이걸 Superbase에서 어떻게 연결해야하는지는 스스로 공부해야하고, 찾아낼 줄 알아야합니다. 이번에 LocalStorage가 브라우저에 내장될 수 있다는 걸 처음 알았습니다. 

• 웹개발에 대한 기본지식

직접 github 블로그를 만들어서 알았던 부분이여서 완전히 모르는 상태로하진 않았지만 index.html을 비롯한 html에 대한 이해, 웹브라우저에서 개발자도구 - 콘솔의 오류를 체크하는 부분을 몰랐다면 시행착오를 많이 겪었을 것 같습니다. 물론 Claude Code에게 물어보면 방법을 알려주긴 하지만 전혀 개발 생태계를 모른다면 이런 점이 병목이 될 것 같습니다.

• CLI  AI Assitant는 신이다.

저는 연동하는 방법을 찾지 못해서 Github 배포도, Superbase MCP 설정도 못하고 일일히 손으로 했지만 앞으로는 이런것들이 기본 기능으로 들어오면서 정말 손쉽게 결과물을 만들어낼 것 같습니다. 결국 기술은 발전할 것이니 빠르게 Proto Typing하고 기획하는것 그리고 이런 프로세스를 지속 가능한 시스템으로 내재화하는 것이 중요하겠구나 깨달은 프로젝트 였습니다.

 

6. 참고링크

Youtube - 방통대 트래커 노션 사용법 안내

Notion - 방통대 트래커 노션 템플릿

방통대 수업 트래커 | Notion

Github - 방통대 트래커 웹서비스

GitHub - ggplab/knou_tracking2

Github - Claude-code Moinitor

GitHub - Maciek-roboblog/Claude-Code-Usage-Monitor: Real-time Claude Code usage monitor with predictions and warnings

Youtube - 생활코딩 Supabase