AI로 플레이리스트 분석기 만들기, 이번엔 이걸 해봅니다. 멜론이든 스포티파이든 좋아하는 곡 제목 몇 개만 넣으면 내 취향을 짧게 읽어주고, 분위기 카드까지 뽑아주는 페이지예요. 지난 편에서 입력하자마자 결과가 뜨는 맛을 봤다면, 이번엔 그걸 음악 쪽으로 옮기는 셈이구요. 첫 화면은 5분 안에 뜹니다.
둘 중 하나만 켜면 됨
Claude Code나 Codex 둘 중 하나만 있으면 됩니다. Claude Code 쓰는 분은 Plan mode로 뼈대만 먼저 보고, 괜찮으면 accept edits로 넘기세요. Codex 쓰는 분은 폴더 안에 AGENTS.md 한 장 만들고 바로 시작하면 됩니다. 둘 다 파일 만들고 고치는 건 알아서 해주니까, 우리는 뭘 원하나만 잘 말하면 돼요. AI로 플레이리스트 분석기 만들기 할 때 제일 좋은 점도 여기 있어요. 곡 제목만 있어도 첫 결과가 금방 나옵니다.
플레이리스트 분석기 바닥부터 깔기
1
첫 화면부터 띄우기
AI에게 보낸 프롬프트
새 폴더에 index.html 하나로 시작해줘. 제목은 플레이리스트 분석기. 사용자가 곡 제목을 최대 10개까지 줄바꿈으로 넣을 수 있게 하고, 분석 버튼을 누르면 분위기 3개, 어울리는 시간대 1개, 취향 설명 2문장, 추천 한 줄을 카드 형태로 보여줘. 모바일에서 예쁘게 보이게 해줘. 샘플 곡 목록도 기본값으로 넣어줘. AGENTS.md도 같이 만들고, 말투는 가볍게, 오버 금지, 이모지 금지라고 적어줘.
왜 이렇게 시켰나: 첫 결과가 늦어지면 바로 지치거든요. 한 파일로 시작해야 진짜 빨리 나옵니다.
이렇게 나오면 OK: 입력칸 하나, 버튼 하나, 결과 카드 3~4장이 바로 보이면 됩니다.
⚠여기서 이렇게 하면 안 돼요: 로그인, 서버, 회원가입부터 넣어달라고 하면 첫 화면이 늦어져요.
2
결과를 덜 뻔하게 만들기
AI에게 보낸 프롬프트
방금 만든 플레이리스트 분석기에 분석 규칙을 더해줘. 곡 제목에서 계절감, 밤, 새벽, 드라이브, 운동 같은 분위기 단서를 읽어서 결과 카드가 매번 조금씩 달라지게 해줘. 장르 태그 3개도 같이 보여줘. 결과 문구는 친구한테 보여줘도 덜 민망한 톤으로 써줘.
왜 이렇게 시켰나: 이 한 줄을 빼면 결과가 너무 똑같아집니다.
이렇게 나오면 OK: 잔잔한 곡 10개 넣었을 때랑 신나는 곡 10개 넣었을 때 카드 톤이 달라야 해요.
여기서 이렇게 하면 안 돼요: 곡 제목을 못 읽었다고 바로 포기하게 두면 안 됩니다. 모르는 곡이 섞여도 결과는 나와야 해요.
3
다시 쓰고 싶게 다듬기
AI에게 보낸 프롬프트
최근 분석 5개를 브라우저에 저장해줘. 결과 카드 아래에 복사 버튼을 넣고, 내 취향 한 줄 소개를 바로 복사할 수 있게 해줘. 빈칸, 중복 곡, 10개 초과 입력은 친절하게 막아줘. 첫 화면 아래에는 샘플 플레이리스트 3개 버튼도 넣어줘.
왜 이렇게 시켰나: 여기부터 진짜 쓰기 시작합니다. 복사 버튼이 있어야 카톡으로 보내보기 좋거든요.
이렇게 나오면 OK: 새로고침해도 방금 돌린 결과가 남아 있고, 샘플 버튼 누르면 바로 카드가 바뀌면 됩니다.
⚠여기서 이렇게 하면 안 돼요: 기능을 한 번에 더 붙여달라면서 색, 폰트, 문구, 저장 방식을 다 같이 바꾸면 자꾸 엇나가요.
4
읽기만 시켜서 검수하기
AI에게 보낸 프롬프트
이 폴더를 읽기 전용으로 보고 플레이리스트 분석기 문구만 검수해줘. 어색한 한국어, 너무 과장된 표현, 모바일에서 길어질 카드 문장을 찾아서 고칠 문장만 5개 이내로 제안해줘. 파일은 아직 수정하지 말아줘.
왜 이렇게 시켰나: 마지막엔 손대지 말고 읽기만 시켜야 어디가 어색한지 잘 보입니다.
이렇게 나오면 OK: 고칠 문장 몇 개만 딱 찍어주면 됩니다. 많아도 5개면 충분해요.
⚠여기서 이렇게 하면 안 돼요: 완전히 다시 써달라고 하면 예쁜데 낯선 문장으로 갈아엎어버립니다.
이거 안 되면 십중팔구 여기
버튼을 눌러도 카드가 안 뜨는 경우가 있어요. 대부분 곡 제목 입력칸 id랑 스크립트에서 찾는 id가 다를 때 생깁니다. 브라우저에서 아무 반응이 없으면 AI에게 입력칸 id와 버튼 클릭 함수 이름이 같은지 먼저 확인해달라고 하세요.
결과 문구가 너무 오글거리게 나오는 경우도 많습니다. 원인은 대개 AGENTS.md에 톤 규칙이 약해서 그래요. AGENTS.md에 금지어를 직접 적으면 빨리 잡힙니다. 예를 들면 과몰입, 영혼의 플레이리스트, 운명 같은 말은 빼달라고 적어두면 됩니다.
모바일에서 카드가 길게 깨지면 CSS보다 문장 길이부터 줄이는 게 빠릅니다. 한 카드에 두 문장 넘기지 말고, 한 줄 소개는 18자 안쪽으로 제한해달라고 다시 시키세요. Claude Code를 쓰는 분은 체크포인트로 한 번 되돌렸다가 다시 붙이는 쪽이 덜 꼬이구요. Codex를 쓰는 분은 직전 작업 로그 보고 마지막 수정만 다시 시키면 됩니다.
다음엔 친구 거랑 붙여보자
한 걸음 더
이번에 만든 플레이리스트 분석기에 다음엔 두 사람 곡 목록을 나란히 넣고 궁합 카드만 붙여보세요. AI로 플레이리스트 분석기 만들기 여기까지 해두면, 다음 편에서 MBTI 카드 게임 쪽으로 넘어가도 감이 바로 옵니다.
