소개
장장 3주를 매달린 프로젝트인데 아직 마음에 드는 수준의 결과물이 나오지 않았습니다. 하지만 이대로 프로젝트에만 매달리다가 사례글을 못쓸까 봐 작업 하는 중간 과정도 기록할 겸 발표 전까지 진행 과정을 업데이트 하면서 글을 작성하겠습니다.
이전 글 참고
https://www.gpters.org/wealth/post/challenger-plan-little-distracted-PAB7Zj4h6LMk1K1
https://www.gpters.org/wealth/post/making-mental-rehabilitation-planner-AKIo5QSJ8M2EQPm
진행 방법
익숙해서 생각없이 선택했던 구글 시트 DB의 배신
로그를 보니 난리가 났다고 하자 '정말 난리가 났다'며 따뜻하게 공감해주는 Replit...
너덜너덜한 흔적들...
테스트로 생성했다가 안보여서 또 만들고 그 과정에서 오류로 무의미한 데이터들이 기록되는 과정이 반복된 끝에 이렇게 되었습니다.
눈에 보이지도 않는 DB 설계가 뭐가 그렇게 중요할까, 대충 기록만 남아있으면 되지라는 안일한 판단이 가져온 대참사였습니다. 하나를 고치면 다른 문제가 생기고...DB를 손대지 않고 시도할 수 있는 거의 마지막까지 가봤고 결국 이대로는 진행이 어렵겠다는 결론을 내렸습니다.
그래도 이거 하면서 ngrok, 구글 서비스 계정 설정, 터미널 명령어 몇가지 등등 배웠으니까. 언젠가 또 쓰이겠죠?
DB는 supabase로 정했습니다. 데이터에 대해 전혀 모르지만 supabase MCP가 그렇게 좋다고 들어서요. 지난 계절학기에 MCP를 들어두길 잘했습니다. 구글 시트는 ai agent에게 필요하면 시트나 헤더를 바꿔도 된다고 이야기해도 본인은 그럴 권한이 없다며 안해줘서 필요하다고 하는 시트와 헤더를 하나하나 직접 만들어야 했습니다. supabase MCP를 쓰면 그건 알아서 해준다길래 모르지만 일단 시작했습니다.
스터디 톡방에서 jin님이 ai를 갈궈서 데이터 DB 스키마를 만드는 과정을 보여주신 적이 있는데요. 그대로 따라하면서 DB 기술 문서를 작성했습니다.
작년에 옵시디언 어벤져스 스터디도 참여 했었는데 한동안 옵시디언을 안쓰다 이번에 프로젝트 하면서 다시 좀 쓰고 있습니다. 역시 배운 건 어디에선가는 쓰이네요.
만들어진 기술 문서를 클로드에 넣습니다.
확실하게 하기 위해 모델은 opus 썼습니다. 금방 한도를 찍어버리는 군요 ㅜㅜ
MCP는 이번에 정말 제대로 써본 것 같습니다. 그동안은 배워 놓고 근데 이거 딱히 써먹을 때가 없는데...라고 생각했는데요.
로그에 list_tables, apply_migration 같은 게 클로드가 MCP 툴을 쓰고 있다는 겁니다. 뭔가 뚝딱뚝딱 하더니
아 opus 너무 멋져. 이렇게 DB를 생성해주었습니다. 뭔지는 모르지만 일단 깔끔하고 관계도 잘 보이고. 그리고 잘 모르니까 구조를 설명해보라하니까 이해 되게 설명도 해주었습니다. 이제 여기에 프론트엔드를 붙여야 하는데 그건 커서에서 할거라
커서에게 넘겨줄 DB 설명서를 작성하라고 시켰고, 이제 하면 됩니다.
시켜놓고 저는 다른 일들을 하고 있었는데요.
일단 그래도 스터디 마지막 날인데 뭔가 결과물 하나는 내놓고 싶어서 중단했지만 원래 만들던거 어설프게라도 돌아가도록 replit을 갈구고 있고.
jin님이 지난 스터디에서 알려주신 것 중에 이미 만들어져 있는 template 활용해서 개발하는 걸 꼭 해보고 싶었거든요. https://vercel.com/templates
supabase 기반으로 아이디 생성/로그인 기능이 구현되어 있는 template 입니다. 직접 ai 갈궈서 만드는 것보다 훨씬 정확하고 시간과 크레딧을 덜 소모해서 기능 추가가 가능하겠죠?
시키는 대로 구현해보면
웹에 이런 흔히 보던 로그인 창이 만들어지고
sign up 하면 고맙다고 표시도 되고
이메일로 confirm하라는 익숙한 기능도 구현해주고
로그인 하면 보이는 창입니다. 오른쪽 위를 보면 로그인 되어 있다고도 나오고 로그아웃 버튼도 있네요.
template이 상당히 친절해서 화면을 보면 다음 단계에 뭐하면 좋을지도 추천해주네요. 공부하려고 마음 먹으면 정말 친절한 컨텐츠들이 많 은 것 같습니다.
그리고 스터디장님의 추천은 이걸 가지고 가서 ai에게 로그인 기능 제외하고 불필요한 건 모두 지우라고 한다음 그걸 프로젝트에 잘 연결하면 손쉽게 가입/로그인 기능 완성!으로 기억하고 있고요.
그래서 이런 패기 넘치는 헛소리를 하게 됩니다.
...하지만 현실은 메인 프로젝트가 무너지면서 가입/로그인 기능은 손도 못댔네요. 지금 주요 기능도 데이터 DB만 완성된 상태고 프론트엔드는 손도 못 댔습니다.
일단 가르쳐 주신대로 템플릿에서 불필요한 부분 파악해서 삭제해달라고 하고
잘했다!커서!역시 명확한 task를 전달하니 확실하게 해내는 군요.
욕심을 좀 더 내봅니다. Dashboard 템플릿도 있거든요. 어차피 발표까지 몇시간 안남았는데 성공 못해도 좋으니 하고 싶었던 것들 다 해보자라는 심정으로 이것도 동일한 방식으로 파일 정리합니다.
드디어 커서와 마주하는 시간이 왔습니다. 이제 힘든 부분 시작이라는 걸 알아서 아주 꼼꼼하게 사전에 준비한 걸 모두 넣어줍니다. reference에 지난번에 실패했던 프로젝트파일 전체를 넣고 참조하라는 것도 스터디장님께서 알려주신 건데 도움이 되었으면 좋겠습니다. 500MB가까이로 불어나있네요.
과연 발표 전까지 얼마나 진행할 수 있을까요...
...는 역시 무리. 지금도 만들고 있지만 시연할 수 있는게 없네요. 언젠가 보여드릴 기회가 있으면 좋겠습니다.
결과와 배운 점
이번 스터디를 참여하면서 정말 오랜만에 열심히 공부한 것 같습니다. 학생 때로 돌아간 기분이네요. '해줘' 코딩이라는게 잠깐 몇번 프롬프트 넣어보고 '오, 이런 것도 되네.' 하고 말면 사실 별로 배우는 건 없는 것 같습니다. ai가 혼자 뭔가 하는데 뭐하는지는 모르니까요. 하지만 진짜 product를 하나 만들고자 하면 어느 순간 마음대로 안되는 부분들을 마주하게 되고 그걸 해결해 나가는 과정에서 많은 것들을 배우는 것 같습니다.