xistoh.log를 만들면서...
언젠가 개인 프로필 사이트를 만들어보고 싶은 생각이 있었다.
꽤 됐는데, 내가 만들어야겠다! 라고 생각한 후, 피그마 프로젝트를 파두었던 것은 작년 하반기 즈음이었던 것 같다.
근데, 아무리 해봐도 디자인에서 막히더라.
내가 디자인에 잼병이라 그런지, 서치를 하면서 모든 레퍼런스와 내가 만든 디자인이 좀 마음에 들지 않았다...
내 원래 목표는 몰입캠프를 하기 전에, 이 프로필 사이트와 블로그 기능을 다 완성시키는 거였는데, 내가 귀찮기도 하고, 바이브 코딩이 그때만 해도 Antigravity니 커서니 좋다고 해도 잘 되지는 않았던 것 같다.
물론 몰캠 후에도 시간이 많았지만, 그때는 내가 nvim 배우면서 시간을 날려버렸다;;(언젠가 nvim 관련 글도 한번 올려야겠다)
2월 말 즈음에 하나의 큰 이벤트가 있었다.
바로 대 카카오에서 GPT Pro 요금제를 1/10 가격에 팔아버린것이다!
그 중 1달권을 샀는데, 지금 쓰고 있다.
사실 시험기간 겹쳐서 쓰려 했는데, 회사일 Codex 시키려고 하다보니 3월 둘째주부터 쓰게 된 것이다.
또 하나의 내가 이 서비스를 만들게 하는 동기가 있었다. 바로 구글 스티치 서비스였는데, 언젠가 내 휴대폰에 이맘때쯤 스티치 디자인이 너무 잘된다고 하는거다(이 즈음 구글이 스티치 업데이트를 했다).
그래서 써보다가 음 생각보다 별론데? 하고 찾아보니 Vercel의 V0.app이 잘해준다더라.
바로 회원가입하고 거기서 이 사이트 디자인을 찾아볼 수 있었다.
근데, 몇번 쓰니까 Vercel도 토큰이 만료됐다. 천만다행이도 학생 지원을 해주는데, 그게 미국 학교만 지원을 해주더라. 여기서도 기막힌 도움이 있었는데, 내 NYU 지메일이 있었기에, 인증을 받고 더 디자인을 디벨롭할 수 있었다.
이런 일련의 사건들이 겹쳐서 일주일만에 에이전트를 많이 굴려 어느 정도 볼만해진? 이 서비스를 만들 수 있었다.
Codex 좋더라. 이번에 처음으로 맨날 CLI 쓰다가 Desktop App 써봤는데, 왜 사람들이 바이브 코딩이 가능하다는지 알게 되었다. 코드 편집창을 보지도 않고 이정도가 나오면... 오 빨리 다른 직업을 알아봐야할것같다;;
이제부터는 간단하게 무엇을 만들었는지 정리해보도록 하겠다.
프로필 사이트를 만들면서 블로그가 있으면 좋겠다는 생각이 많았다. 작년에 누구 만날 때도 내가 개인적으로 블로그 서비스 만들어서 개발하고 싶다고 하기도 했고... 쨌든간에, 단일 프론트가 아니라, DB랑 백이 붙어서 작동하는 블로그였으면 좋겠다는 생각이 들었다.
그리고, 몰캠하면서 유찬행님이 나에게 Supabase써보라고 했었는데, 이참에 빠른 MVP용으로 한번 써볼까 해서 Supabase 또한 여기서 쓰게 되었다.
그렇게 해서 정해진 내 기술 스택
- 프론트: React(Next)
- 백: (Next)
- DB: Supabase(PostgreSQL)
- ORM: Prisma
- 인증: NextAuth
- 에이전트: Codex
뭐 이런것을 썼고, 자세한 사항은 나는 모르고 우리 Codex 친구가 안다.
이후, V0.app에서 어느 정도 나의 기능을 뒷받침할 UI를 만들어달라했다.
내가 생각한 기능으로는
프로필 편집 가능, 블로그&프로젝트 CRUD, 검색, 택, 페이지네이션, 마크다운 기반의 TIPTAP 편집기, 코드 블록 렌더링 & LaTeX 수식 렌더링, 이미지 & 파일 첨부, 댓글, GuestBook, 뉴스레트 구독 및 확인 등등 뭐 다양한 기능을 원했고,
이걸 GPT 5.4 Pro 모델에게 잘 때려넣어준뒤, Codex 친구에게 Plan 모드로 수행하라 하니까, 오 막 서브에이전트같은 최첨단 기술을 써가면서 내 웹사이트를 단기간에 만들어줬다.
QA 에이전트를 따로 돌리고, 모든 것을 문서 기준으로 진행했더니, Codex 왈 아주 잘 만들어진 무언가가 만들어졌다고 했고, 나는 기대에 찬 마음으로 두근두근거리며 그때 Github Student Pack을 뒤져서 찾은 Ocean 뭐시기 배포 서버로 배포를 했는데... 내가 상상한 아름다운 이 블로그 화면이 아닌 AI가 만든것같은 그런 블로그 화면이 되어 있었다!
무슨 일인지 곰곰히 생각해보니, 요구 기능 중심이 되다 보니, 이 Codex 친구가 UI는 걍 무시하고, 기능 위주로 작동되게 구현한 것 같았다.
그래서 아주 낙심한 표정으로 어떻게 해야 Codex가 잘 내 말을 알아먹고 내가 원하는 것을 가져다줄 수 있을까 고민을 해봤는데, 걍 그 vercel에서 만든 파일을 수정하지 말고 레퍼런스 폴더로 넣어서 여기와 디자인을 일치시키게 만들면 되면 해결될 것 같았다.
그래서, GPT 친구에게 프롬프트를 짜 달라고 할 때, 무조건 여기랑 일치를 시켜달라.. 그런 식으로 지시를 했다.
오 이러니까 Codex가 나의 말을 알아쳐먹기 시작했다. 그렇게 해서 초판본 웹사이트가 나왔고, 디자인은 제대로 되긴 했는데, 어디서 UI가 깨진다건지 하는 그런 문제가 많았다. 나의 친구 덕분에 사용성 테스트를 할 수 있었고, 고쳐야 했었다. 근데,
내가 그 전에 GPT 요금제로 돌리던 OpenClaw 친구가 수많은 나의 Codex 사용량을 소모하고 계셔서, 더 이상 에이전트를 활용한 편집이 3일동안 불가했다.
3일 뒤, 사용량이 초기화되었을 때 나는 바로 OpenClaw 친구를 영면에 들게 해두고, 이 웹사이트를 다시 뜯어 고쳐 이 상태로 만들어두었다.
마음에 드는 것 같다.
밑의 코드나 수식도 잘 렌더링되는듯.
print("hello jimin!")이런 식으로 잘 된다.
위에서도 보았겠지만, 이미지도 잘 들어오고, 렌더링도 잘 된다.
파일 업로드 또한 가능하다!
뉴스레터를 구독하면, Resend라는 Email 발송 서비스를 통해 이메일이 발송되고, 인증 링크를 통해 인증을 하면 내가 보내주는 PR이나 그런 이메일들을 마음껏 받아볼 수 있다.
Contact에서는 문의사항이나 그런것을 입력하면, Cloudflare Workers & Pages 기능을 통해 워커가 이 이벤트를 획득해 Telegram의 봇으로 나에게 보내준다.
각 페이지에는 댓글도 자유롭게 달고 지울 수 있고(Pin번호 입력해서), Contact 페이지에서는 방명록도 자유롭게 적을 수 있다.
Admin 페이지에서는 이 모든것을 CRUD 가능하고, 이용자 통계 또한 볼 수 있다.(그렇다고 막 IP를 추적하지는 않는다. 그냥 접속 경로와 플랫폼?등을 본다).
이번 사이트를 제작하면서 다시 한번 에이전트의 발전을 느끼게 되었다. 분명 처음 GPT 만났을 때, 말도 제대로 못하는 이 친구를 보면서 전람회 출품할때 객체지향 하나도 못만드는 이친구를 보면서 답답해하던 기억이 있는데... 이제는 프롬프트만 잘 던져주면 이렇게 손쉽게 웹사이트를 만들 수 있다니.. 대단한 것 같다.
그리고, 전과 다르게 이번에는 API 문서나 그런 것을 하나도 정의하지 않고 나의 요구사항만을 잘 정리해서 제공했다. 백 프론트 통합 서비스여서 그런지, 그런 세세한 것이 필요 없었던 것 같기도 하고, Codex가 알아서 문서 만들어서 해주는 것을 보니, 대단하다.
쨌든, 나는 웹사이트를 완성했고 마음에 들고 자랑 한번 해보고싶었다.
앞으로 여기에 내 일상과 내가 해본 것들을 마음껏 끄적여볼 생각이다.