클로드 코드와 함께 Tech Stack 부터 선정하기

Claude Code와 함께 Tech Stack부터 선정해서 만든 기온별 옷차림 | 오늘 뭐 입지?

Cluade Code와 함께 Tech Stack 부터 설계하고 진행하니까 Claude Code가 여러가지 의존성 설치들을 진행해주고 라이브러리를 설치해주는 것부터 시작했다. 의존성, 라이브러리 설치 이런 것들 정말 Claude Code가 아니었으면 여기서부터 막혀서 포기했을 것이다. 개발자가 아닌 직군에게 이런 것들은 너무 어려운 것.. 확실히 예전보다 무언가를 만드는 비용과 장벽이 엄청나게 낮아진 것 같다. 그래서 이제 어떻게 만드냐는 AI가 다 해주고, 사람은 무엇을 만드느냐에 집중을 해야 한다는 생각이 들었다.

Tech Stack 설계할 때 UI 라이브러리를 어떤 것을 쓸지 좀 고민했다. Shadcn UI/UX는 이미 이력서 사이트에서 한번 쓰기도 했고, 좀 더 SaaS에 특화된 UI 라이브러리로 알고 있어서 기온별 옷차림 서비스에는 적합하지 않겠다 싶었다. 클로드와 함께 또 이것저것 검색해보면서 Daisy UI로 골라서 진행했다. 사실 큰 이유는 없고, 이름이 말랑말랑해서 맘에 들었달까. 그리고 무료로 쓸 수 있는게 아마 많았었나 그랬을 거다. 이걸 고르고 난 후에 “나중에 만약 내가 UI 다른 라이브러리 쓰고 싶으면 어떡하지?” 이런 걱정이 들어서 클로드한테 물어보니까 UI 라이브러리 나중에 바꾸면 되니까 일단 그 고민 그만 하고 일단 만들기부터 하자더라. 참 맞는 말 기분 안나쁘게 잘 해서 기분이 좋더라.

프론트는 TypeScript에 Tailwind CSS 쓰고, 백엔드는 Vercel의 Next.js API Routes를 사용해서 별도 DB 없이 구현했다. 호스팅은 Vercel로 하고. 이렇게 쓰긴 썼는데 아직도 각 기술들과 역할을 모두 다 완전히 외우지는 못해서 여전히 어렵다. 사실 DB가 있어야 하나 생각을 했고, 만약 DB를 쓴다면 Supabase를 쓸려고도 했는데 사실 지금 단계에서는 로그인도 없어서 DB가 아예 필요가 없어서 DB는 별도 구현하지 않았다. 이력서도 DB가 없는 프로젝트라서, DB를 쓰는 프로젝트도 한번 해봐야겠다.

날씨 정보에 관한건 공공 API 포털에서 기상청 API와 에어코리아 API를 사용했다. 공공 데이터 포털에서 자꾸 크롬으로 로그인 주소를 못찾길래, 사파리로 들어가서 했더니 겨우 찾아지긴 했는데, 암튼 이것 때문에 이상한 삽질을 좀 했다. 공공 데이터 포털도 UI나 설명이 좀 어려워서 뭘 신청해야 하는지 헤맸는데 이거 역시 클로드 코드와 함께 해결했다. 거의 뭐 클로드 코드 찬양자가 되었다. 그만큼 100% 활용하고 있는지는 모르겠지만. 아예 쓸 줄 모르던 것에 비하면 장족의 발전 아닐까.

API 연동도 하고 그러면서 어떻게 최소한으로 기온이 나오고, 기온에 따른 옷차림을 추천해주는 서비스를 만들었다. 사실 여기서부터가 시작이었다. 여기서부터 해결해야 할 문제들이 계속 나타나기 시작했다.

지금 현재 있는 기온별 옷차림 서비스는 초반과 아주 아주 다르다. 하나씩 문제를 해결해 나가면서 지금의 기온별 옷차림 서비스가 나왔다. 물론 지금도 계속해서 문제 해결하고 업데이트 하는 중이다.