새벽에 시작해서 아침에 끝낸 LIKE WONI TOP 100 제작기
바이브코딩 개발: Codex, Claude Code
“솔로 곡 이름이 뭐죠?”
“like WONI요.”
안원잘부 「원이 근황」 중에서
영상에서 나온 이 노래를 팬들이 진짜로 만들고 있더라고요.
이걸 모아서 들으면 좋겠다 싶어 LIKE WONI TOP 100을 만들었습니다.
새벽 3시 반에 만들어야겠다 싶어서 시작했는데, 7시 반에 완성했습니다.
이번에는 코덱스와 클로드 코드로 작업해봤습니다.
03:30 시작 → 약 4시간 → 07:30 첫 완성
LIKE WONI TOP 100 사이트 만들었습니다.
1. 이번에는 노래 차트를 만들어봤습니다
지난번에 선태박람회를 만들고 제작기를 올렸었는데, 이번에도 팬사이트를 하나 만들었습니다. 이름은 LIKE WONI TOP 100입니다.
새벽 3시 반쯤 만들어야겠다 싶어서 시작했습니다. 모아둔 자료를 읽히고, 초안을 만들고, 화면 보면서 이것저것 고쳤습니다. 그러고 나니 아침 7시 반이더군요. 첫 완성까지 대략 네 시간 걸렸습니다.
선태박람회 때는 OpenClaw로 수집하고, GPT에서 문서를 만들고, 그걸 Cursor로 가져가 작업했습니다. 이번에는 코덱스(Codex)와 클로드 코드(Claude Code)를 썼습니다.
선태박람회 때보다 훨씬 간단하게 작업했어요. 코덱스에서 자료 분석부터 초안까지 만들고, 클로드 코드에 그걸 보여주면서 디자인을 고쳤습니다.
6달 사이에 개발 방식이 말도 안되게 바꼈습니다.
2. 팬들이 노래를 만들고 있더라고요
리센느와 안원잘부를 보시는 분들은 아실 텐데, 「원이 근황」 영상에서 10년 뒤 미래 얘기를 하다가 LIKE WONI라는 노래 제목이 나옵니다.
그런데 팬들이 그 노래를 실제로 만들고 있더라고요. 같은 LIKE WONI인데 장르도 다르고, 분위기도 다르고요. 이걸 유튜브에서 하나씩 찾아 듣는 것도 재미있지만, 한곳에 모아놓고 들을 수 있으면 좋겠다는 생각이 들었습니다.
팬들이 노래를 만들고 있으니 저는 차트를 만들면 되겠더라고요. 처음에는 멜론 TOP 100 같은 걸 떠올렸고, 그래서 이름도 LIKE WONI TOP 100으로 정했습니다. 화면은 특정 사이트를 그대로 따라 하지 않고 여러 음악 사이트를 참고하기로 했습니다.
오전 4:36. 일단 왜 이걸 만들려는지부터 설명했습니다. 눌러서 크게 볼 수 있습니다.
처음부터 이 얘기를 잘 해줬어야 했는데, 기본 개발 작업부터 시키다 보니 나중에 다시 설명하게 됐습니다. 그냥 원이 관련 영상을 모으는 사이트로 만들면 제가 생각한 것과 달라지니까요.
3. 코덱스에 일단 자료부터 읽혔습니다
명세와 수집해둔 HTML이 있어서 코덱스에 먼저 읽어보라고 했습니다. Node.js 기반으로 만들고, Supabase도 선태박람회 때 쓰던 프로젝트를 같이 쓰기로 했습니다. 서비스 데이터는 따로 나누고요.
대화를 다시 보니 대략 이런 순서로 진행했더군요.
03:43 · “의존성 설치해줘”
기존 명세를 보고 필요한 설치와 기본 작업부터 해달라고 했습니다.
이때 대화 보기
선태박람회 때 쓰던 환경을 참고해서 시작했습니다.
04:22 · 명세와 수집 자료 읽히기
제가 “98개 사이트”라고 했는데, 열어보니 98은 HTML 안의 썸네일 수였습니다. 영상 기록은 관련 영상 86개와 검토 후보 13개였고요. 일단 뭘 모아둔 건지부터 다시 확인했습니다.
자료 분석한 대화 보기
모아놓은 자료에 노래 말고도 여러 영상이 섞여 있었습니다.
05:01 · 회원가입이나 자체 댓글은 빼기로 했습니다
노래 하나 들으러 왔는데 굳이 여기서 또 가입할 필요는 없을 것 같았습니다. 이미 유튜브에서 다들 놀고 있으니, 여기서는 찾아 듣고 댓글이나 좋아요는 유튜브에서 남기면 되겠더라고요. 불필요하게 개인정보를 받을 일도 줄고요.
기능을 정한 대화 보기
선태박람회처럼 별도 커뮤니티 없이, 원래 사람들이 있는 곳으로 연결하기로 했습니다.
06:03 · “그렇게 초안 만들어줘”
여기까지 얘기하고 일단 만들어달라고 했습니다. 화면이 나와야 뭐가 괜찮고 뭐가 별로인지 얘기하기 편하니까요.
초안 만들 때는 이렇게 한 줄로 요청했습니다.
처음 나온 초안에는 영상이 18개만 들어 있었습니다. 그래서 왜 18개냐, 나머지도 가져오고 Shorts도 따로 보여달라고 했습니다. 영상은 클릭하면 임베드로 재생되게 하고, 제작자 프로필 이미지와 좋아요 수, 댓글 수도 붙여달라고 했고요.
이런 건 한 번에 다 정해놓기보다 화면을 보면서 계속 얘기했습니다. “이거 넣어줘”, “이건 왜 이렇게 나와?” 하면서 고치는 식이었습니다.
처음 초안이 나왔을 때
18개 영상으로 나온 첫 초안. 검색, 장르 필터, 곡 상세까지 붙어 있었습니다.
관련 근거: 수집 자료 분석 대화 · 초안 완료 기록
4. 디자인은 클로드 코드에 다시 맡겼습니다
코덱스가 만든 초안은 밝은 배경에 코럴 색을 쓴 화면이었습니다. 기능은 확인할 수 있었는데, 팬사이트라고 하기에는 좀 평범했습니다.
그래서 클로드 코드에 초안을 보여주고 이렇게 얘기했습니다.
컨셉과 디자인이 좀 평범해. 네가 팬사이트 느낌을 살려서 디자인을 제안하고 수정해줘.
클로드 코드가 제안한 이름은 MIDNIGHT FANCLUB 2036이었습니다. 어두운 배경에 네온 색을 쓰고, 위에는 응원 문구가 지나가고, 추천곡은 포토카드처럼 보이게 바꿨습니다.
색상이나 CSS를 제가 하나씩 정해준 건 아닙니다. 초안이 너무 평범하니 팬사이트 느낌을 살려달라고 했고, 기존 파일을 읽어서 수정해줬습니다. 그러면 저는 브라우저에서 보고 다시 얘기하면 됐고요.
기존 화면을 읽고 디자인을 바꾸는 중. 수정하고 나서 테스트와 빌드도 돌렸습니다.
코덱스가 만든 첫 초안
코덱스가 제안한 디자인입니다.
지금 공개된 사이트
디자인을 바꾸고, 이후에 문구와 영상 목록 등을 더 손본 현재 화면입니다.
첫 초안과 지금 화면을 나란히 놓고 보니 꽤 달라졌네요.
디자인이 바뀌었다고 끝은 아니었습니다. “2036년의 히트곡을, 팬들이 먼저 만들었습니다” 같은 문구도 들어 있었는데, 너무 AI가 쓴 말 같아서 빼달라고 했습니다.
차트에 어떤 영상을 넣을지도 다시 잡았습니다. 원이와 관련된 영상 전체가 아니라 LIKE WONI 노래 차트여야 하니까요. 롱폼을 메인으로 두고 Shorts는 따로 나눴습니다. 원본이나 반응 영상은 노래 순위에 섞이지 않도록 했습니다.
디자인을 바꾸던 중간 화면도 남겨둡니다
이때는 아직 관련 영상이 추천 영역에 올라와 있었습니다. 노래만 차트에 들어가도록 더 정리해야 했습니다.
디자인 수정 후 남긴 기록입니다. 테스트 20개와 빌드, 모바일 화면과 임베드 재생까지 확인했습니다.
5. 지금은 이렇게 볼 수 있습니다
들어가면 LIKE WONI 롱폼 차트가 먼저 나옵니다. Shorts는 따로 볼 수 있고, 곡을 누르면 유튜브 플레이어가 열립니다. 제작자 프로필과 조회수, 좋아요 수, 댓글 수도 같이 볼 수 있습니다.
주요 댓글 몇 개는 사이트에서 보여주고, 더 읽거나 직접 댓글을 쓰려면 원본 유튜브로 가면 됩니다. 따로 회원가입할 필요는 없습니다. 쭉 듣고 싶은 분들을 위해 유튜브 재생목록도 만들어뒀습니다.
재생목록은 컴퓨터 유즈로 만들었습니다. 크롬 창을 띄우고 유튜브에서 곡들을 재생목록에 담는 작업까지 맡겼는데, 이것도 손쉽게 되더라고요. 사이트 만들고 나서 재생목록 정리까지 이어서 할 수 있어서 편했습니다.
롱폼 영상: 88개
Shorts 영상: 41개
재생목록 수록곡: 85개
9월 3일 기준입니다. 재생목록은 따로 갱신해서 차트와 개수가 조금 다릅니다.
처음에는 조회수, 좋아요, 댓글 수를 합쳐서 순위를 내볼까 했는데, 현재는 조회수순으로 보여줍니다. 나머지 숫자는 곡을 볼 때 참고할 수 있게 같이 붙여뒀습니다.
처음 만든 뒤에도 새 영상을 더 넣고, 삭제된 영상을 빼고, 곡 이동이나 재생목록을 고쳤습니다. 네 시간은 일단 첫 완성본을 만든 시간이고, 그 뒤로도 조금씩 손보고 있습니다.
6. 선태박람회 때보다 훨씬 편했습니다
선태박람회 때는 GPT에서 정리한 문서를 Cursor로 가져가고, 다시 검토한 내용을 GPT에 넣고, 정리되면 구현하는 식으로 작업했습니다. OpenClaw 쪽에서 수집하고 분류한 결과도 챙겨야 했고요.
이번에는 코덱스가 프로젝트 파일과 자료를 읽고 초안을 만들었습니다. 클로드 코드는 그 파일을 이어서 읽고 디자인을 고쳤습니다. 중간에 제가 문서를 옮기고 같은 설명을 다시 해야 하는 일이 줄어서 편했습니다.
선태박람회 때 쓰던 환경이 있었고, 영상 자료도 미리 모아놨으니 처음부터 전부 새로 한 건 아닙니다. 댓글 수만 개를 분류하던 작업과 이번 사이트는 할 일도 다르고요. 그래도 직접 써보니 이번 조합으로 작업하는 게 훨씬 간단하게 느껴졌습니다.
제가 계속 한 얘기는 이런 것들이었습니다. “일단 이걸 왜 만드는지부터 이해해줘.” “로그인은 필요 없어.” “디자인이 너무 평범해.” “관련 영상 전체 말고 LIKE WONI 노래만 모아야 돼.” 이런 얘기를 하면 실제 파일을 고쳐주니 화면을 보면서 다음 얘기를 이어가기 좋았습니다.
새벽에 만들어야겠다고 생각한 걸 아침에 볼 수 있게 만들었다는 게 좋았습니다. 팬들이 만든 노래도 많으니 한번 들어보셔도 좋을 것 같아요. 마음에 드는 곡이 있으면 원본 유튜브에 댓글이나 좋아요도 남겨주시고요.
선태박람회에 이어 이번에도 재미있게 만들었습니다. 긴 글 읽어주셔서 감사합니다.