콘서트 끝나고 제일 아쉬운 게 뭐냐면 방금 들은 곡 순서가 금방 흐려진다는 거거든요. 오늘 만들 건 Setlist Spotify 페이지입니다. 공연장 밖에서 찍은 셋리스트 사진 한 장을 Claude Code에 넣으면 노래 목록이 정리되고, 각 곡 옆에 Spotify 검색 버튼이 붙은 한 페이지가 바로 나옵니다. 지난 편이 일본 eSIM 가격 비교였다면 이번엔 완전히 놀이 쪽이에요. 근데 이런 게 더 자주 열게 되더라구요.
준비물은 하나만
Claude Code만 있으면 됩니다. 공식 문서에 나온 것처럼 Claude Code는 파일을 직접 만들고, /plan으로 먼저 구조만 잡아둘 수 있구요. Anthropic 문서 쪽엔 이미지 입력이 따로 정리돼 있는데, 셋리스트 사진처럼 글자가 섞인 이미지도 바로 읽힙니다. Codex 쓰는 분도 흐름은 같아요. 이미지 넣고 한 파일만 만들라고 시키면 됩니다. 다만 이번 편은 Claude Code 기준으로 갈게요.
공연장 바닥에서 바로 뽑는 흐름
1
바닥부터 깔기
AI에게 보낸 프롬프트
지금 폴더에 index.html 하나로 모바일 우선 페이지를 만들 거야. 기능은 3개만 먼저 넣어줘. 1) 공연 셋리스트를 위에서 아래 순서로 보여주기 2) 각 곡마다 Spotify 검색 버튼 넣기 3) 맨 위에 공연명과 날짜를 적는 칸 만들기. 아직 디자인 욕심내지 말고 한 파일로만 시작해. 작업 전에 /plan으로 짧게 구조부터 보여줘.
왜 이렇게 시켰나: 첫 프롬프트에서 욕심내면 레이아웃이 먼저 흔들립니다. 우리한텐 5분 안에 첫 결과가 더 중요하거든요.
이렇게 나오면 OK. Claude가 섹션 구조를 먼저 적고, index.html 하나로 가겠다고 말하면 됩니다.
⚠여기서 이렇게 하면 안 돼요. 처음부터 재생 API 연동, 저장 기능, 공유 기능까지 한 번에 넣지 마세요. 그럼 첫 화면이 늦어집니다.
2
사진 넣고 곡 순서 뽑기
AI에게 보낸 프롬프트
이제 셋리스트 사진을 읽어서 방금 만든 index.html에 실제 곡 목록을 채워줘. 곡명은 사진 순서대로 넣고, 읽기 애매한 글자는 별표 표시 대신 후보 2개를 괄호로 보여줘. 각 곡 버튼은 Spotify에서 곡명을 검색하는 링크로 연결해줘. 결과는 한국어 안내문 없이 바로 화면으로 보여줘.
왜 이렇게 시켰나: 이 한 줄이 핵심임. 애매한 글자를 억지로 단정하면 나중에 한 곡씩 다시 잡아야 하거든요.
이렇게 나오면 OK. 노래 목록이 세로로 뜨고, 버튼 누르면 Spotify 검색으로 넘어가면 끝입니다. 이거 진짜 첫 결과 보면 좀 허무할 수도 있어요. 방금 찍은 흔들린 사진인데도 곡 순서가 거의 맞게 나옵니다.
⚠여기서 이렇게 하면 안 돼요. 사진을 두 장 넣었으면 어느 사진이 앞인지 말 안 하고 던지면 곡 순서가 섞일 수 있습니다.
3
앙코르랑 최애곡 표시 붙이기
AI에게 보낸 프롬프트
좋아. 이제 기능 2개만 더 붙여줘. 1) 앙코르 구간이 있으면 배경을 살짝 다르게 보여주기 2) 내가 체크한 곡은 카드 상단으로 모아보는 토글 추가하기. 모바일에서 손가락으로 누르기 쉽게 버튼 간격 넓혀줘.
왜 이렇게 시켰나: 여기서부터 Setlist Spotify 페이지가 그냥 목록이 아니라 진짜 다시 쓰는 페이지가 됩니다. 집 가는 지하철에서 최애곡만 바로 다시 찾기 좋거든요.
이렇게 나오면 OK. 앙코르가 눈에 띄고, 체크한 곡만 따로 모아볼 수 있으면 됩니다.
⚠여기서 이렇게 하면 안 돼요. 색을 너무 많이 쓰라고 하면 공연 페이지보다 게임 UI처럼 보일 때가 많습니다.
4
오타만 콕 집어서 고치기
AI에게 보낸 프롬프트
곡명 오타가 있는지 다시 봐줘. 의심되는 곡만 표로 보여주고, 내가 고를 수 있게 index.html 상단에 작은 수정 칸을 넣어줘. 전체를 다시 갈아엎지 말고 텍스트 수정 흐름만 추가해줘.
왜 이렇게 시켰나: AI가 만든 결과를 믿되, 의심되는 줄만 잡는 게 제일 빠릅니다. 공연 끝나고 배터리 12퍼 남은 상태에서 이게 꽤 중요해요.
이렇게 나오면 OK. 애매한 곡 몇 개만 직접 바꾸면 페이지가 바로 살아납니다.
⚠여기서 이렇게 하면 안 돼요. 전체 디자인까지 다시 손보라고 하면 멀쩡하던 버튼 위치가 같이 흔들립니다.
5
마지막으로 화면 점검
AI에게 보낸 프롬프트
마지막 검수만 해줘. 모바일 화면에서 제목 줄바꿈이 어색한지, 버튼이 너무 붙었는지, 곡명이 긴 카드가 깨지는지 확인하고 필요한 CSS만 최소 수정해줘. 설명은 짧게, 수정은 바로 파일에 반영해줘.
왜 이렇게 시켰나: 공식 문서에 나온 파일 편집 흐름을 여기서 잘 쓰는 겁니다. 말만 길게 듣는 것보다 바로 고쳐지는 게 훨씬 낫죠.
이렇게 나오면 OK. 스크롤 한 번 내려보면 카드가 다 읽히고 버튼이 눌리면 끝입니다. 여기까지 했으면 거의 다 끝난 거예요.
여기서 이렇게 하면 안 돼요. 검수 단계에서 새 기능을 또 추가하지 마세요. 그러면 마지막 2분이 20분 됩니다.
여기서 막히면
첫째, 곡명이 두세 개 이상 틀리게 나오는 경우가 있습니다. 원인은 사진이 너무 멀거나 조명이 번져서 줄 경계가 무너졌기 때문입니다. 이때는 원본 한 장만 다시 넣지 말고, 상단 절반과 하단 절반으로 잘라 두 장으로 넣은 다음 1번 사진 뒤에 2번 사진이 이어진다고 적어주면 훨씬 잘 맞습니다.
둘째, Spotify 버튼을 눌렀는데 라이브 버전이나 다른 가수가 먼저 뜰 수 있습니다. 원인은 곡명만 검색해서 동명이곡이 섞였기 때문이죠. 해결은 간단합니다. 프롬프트에 아티스트명도 같이 넣게 바꿔달라고 하고, 버튼 링크를 곡명과 아티스트명 검색으로 다시 만들면 됩니다.
셋째, 페이지는 예쁜데 모바일에서 버튼이 너무 작게 느껴질 수 있습니다. 원인은 Claude가 데스크톱 비율로 간격을 잡았기 때문입니다. 몰라도 괜찮아 그냥 붙여넣어. 버튼 높이 48px 이상, 카드 간격 12px 이상으로만 다시 맞춰줘라고 한 줄 보내면 바로 잡힙니다.
다음엔 여기 하나만 더
한 걸음 더
다음엔 이 Setlist Spotify 페이지에 YouTube 라이브 영상 검색 버튼 하나만 붙여도 꽤 재밌어집니다. 공연 끝나고 집 와서 다시 듣는 속도가 달라지거든요.
