'만드는 중' 2시간 반 뒤, 알렉사에 '내 스포티파이'
클로드로 앱 만들기: '만드는 중' 2시간 반 뒤 완성된 '내 스포티파이', 크롬에서 도는 내 음악 주크박스
2026년 10월 22일 올림 · 10월 21일 확인
1단계: 대화창에 이 지시문 붙여 넣기
[ ] 안은 장르 폴더 예시예요. 내 폴더 이름(예: 출근길·운동·잠들 때)으로 바꿔도 되고 그대로 둬도 돼요 — 저희가 받은 코드는 고른 폴더 안의 폴더 이름을 그대로 읽어 장르 버튼으로 만들었어요. 나머지 글자는 그대로 두세요. 저희는 클로드 오퍼스 5.5(유료)로 돌렸어요. 무료 요금제는 소넷·하이쿠를 써요(claude.com/pricing, 2026-10-19 확인). 무료 모델로 같은 결과가 나오는지는 직접 확인 못 했어요. 계정이 없으면 claude.ai에서 먼저 가입해요. 유료라면 입력 칸 아래 모델 이름을 눌러 'Opus 5.5'를 고르고(이 메뉴 위치는 저희가 직접 확인 못 했어요), 무료라면 고르지 말고 기본값 그대로 두면 돼요.
내 컴퓨터에 [커피재즈·보사노바·로파이]처럼 폴더별로 나눠 둔 MP3를 트는 '나만의 주크박스'를 HTML 파일 한 장으로 만들어 줘. 버튼을 눌러 음악 폴더를 고르면 안쪽 폴더 이름을 장르 버튼으로 보여 주고, 장르를 누르면 그 안의 곡을 섞어서 끝까지 이어 틀어 줘. 화면엔 큰 장르 버튼, 지금 나오는 곡 이름, 다음 곡·멈춤 버튼만. 설치·서버·로그인 없이 크롬에서 파일을 열기만 하면 돌아가고, 음악 파일은 내 컴퓨터 밖으로 보내지 마. 화면 글자는 한국어로.
순서: claude.ai 접속·로그인 → 왼쪽 위 '새 채팅' → 아래 지시문 붙여 넣기 → (원하면) [ ] 안을 내 폴더 이름으로 바꾸기 → Enter. 답에 <!doctype html>로 시작해 </html>로 끝나는 코드가 나오거나, 오른쪽 미리보기 창(아티팩트)에 '나만의 주크박스' 화면이 뜨면 성공이에요(저희 답은 코드 10,498자 + 사용 방법 설명). 저희는 대화창이 아니라 claude -p로 돌려서 대화창 화면과 미리보기 창 버튼은 직접 확인 못 했어요. 미리보기 창 안에서 폴더 고르기가 되는지도 확인 못 했으니, 2단계처럼 파일로 저장해 크롬에서 여세요.
이렇게 나와요
[ ] 안은 레벨스와 같은 [커피재즈·보사노바·로파이] 그대로 두고, claude.ai 대화창이 아니라 클로드 코드의 한 번 답하기 명령(claude -p)으로 돌렸어요. 모델 클로드 오퍼스 5.5, 빈 폴더에서 파일·명령·웹 검색 도구와 저희 설정을 모두 끄고, 대화창처럼 지시문만 넣었어요. 대화창에서는 답 모양이 조금 다를 수 있어요.
2026-10-21 20:16:01 시작, 20:17:18 끝, 약 1분 17초. 답은 '아래 코드를 메모장이나 텍스트 편집기에 붙여 넣고 주크박스.html 같은 이름으로 저장하세요'로 시작해 HTML 전체와 사용 방법을 줬어요(답 원문): '페이지에 보안 설정(CSP)을 넣어서 외부 서버, 글꼴, 인터넷 주소에 연결하는 것 자체를 막아 두었어요', '장르 폴더에 넣지 않고 상위 폴더에 바로 둔 MP3는 기타 버튼으로 묶여요', '마지막 곡이 끝나면 멈춥니다'. 코드를 고치지 않고 저장해 창 없는 크롬으로 열고, 장르 폴더 3개에 6초짜리 시험용 소리 파일 9개를 넣은 폴더를 고르자 '로파이 3곡·보사노바 3곡·커피재즈 3곡' 버튼이 생겼고, 커피재즈를 누르자 바로 재생됐어요(화면 '커피재즈 · 1 / 3'). 곡이 끝나자 손대지 않아도 다음 곡으로 넘어갔고, '다음 곡'·다른 장르·'멈춤'(버튼이 '▶ 계속 듣기'로 바뀜)도 됐어요.
시험 음악은 저희가 만든 단순한 소리 파일이었어요(진짜 노래 아님). 크롬의 폴더 고르기 창은 창 없는 시험 브라우저에서 띄울 수 없어서, 답 코드에 함께 들어 있는 예비 방법('다른 방법으로 폴더 고르기' 칸)으로 넣었어요. 그래서 그림에 그 글자가 보여요. 여러분 크롬에서는 '🎵 음악 폴더 고르기'를 누르면 폴더 고르기 창이 뜰 거고 '파일을 볼 수 있도록 허용할까요?'라고 물을 수 있대요(답 원문). 이 창은 저희가 직접 확인 못 했어요. 휴대폰 브라우저에서는 확인 못 했어요. 시험 크롬은 녹화를 위해 '소리 자동 재생 제한'을 끈 상태였어요(장르 버튼은 사람처럼 눌러서 시험).
- 이런 분께
- 내 컴퓨터에 모아 둔 음악을 장르별로 틀어 주는 나만의 플레이어를 만들어 보고 싶은 사람(코딩 몰라도 됨)
- 끝나면 손에 남는 것
- 클로드 대화창에 붙여 넣기만 하면 되는 한국어 지시문 1개([ ] 안만 내 폴더 이름으로)와 저희가 돌려 본 결과 화면, 레벨스가 알렉사에 연결하려고 한 일 4가지(설치·계정 필요, 둘째로)
- 걸리는 시간
- 저희 실험 기준 답 1분 17초(클로드 오퍼스 5.5) · 저장하고 열기 2분
Claude · 읽는 데 10분어떻게 했는지, 짧게
준비물: 컴퓨터의 크롬(휴대폰 브라우저는 저희가 확인 못 했어요), claude.ai 계정(무료도 가입 가능), 컴퓨터에 파일로 있는 내 음악(MP3 등). 스트리밍 앱에서 받은 곡은 보호돼 있어 안 될 수 있는데, 저희는 확인하지 못했어요.
레벨스는 X에 'I vibecoded my own Spotify that works with Amazon Alexa and plays all my own MP3 music files'라고 썼어요(2026-10-21 새벽 1시 47분 한국 시각, 2026-10-21 20:27 기준 조회 103,017). 직접 산 커피 재즈 MP3를 클라우드 저장소(R2)에 두고, 클로드 코드의 도움으로 알렉사 스킬을 만들어 "알렉사, 커피 재즈" 하면 틀게 했대요. '만드는 중' 글(밤 11시 22분)과 '됐다' 글 사이는 2시간 25분이고, 처음 손댄 시각은 밝히지 않았어요. 두 시간쯤 뒤엔 BBC 월드서비스·블룸버그 같은 인터넷 라디오도 틀게 고쳤어요. 글 끝은 'So I guess I can cancel Spotify now too'(이제 스포티파이도 끊어도 되겠네요).
12단계: 답의 코드를 .html 파일로 저장해 크롬으로 열기(마지막 단계)
클로드가 만든 건 설치하는 앱이 아니라 크롬에서 열리는 웹 페이지 한 장이에요. 저장해서 열면 그게 곧 내 음악 플레이어예요.
- 코드 칸 오른쪽 위 복사 단추로 코드 전체를 복사해요. 코드 위아래 설명 글은 넣지 않아요. 미리보기 창(아티팩트)이 떴다면 창 위쪽 메뉴의 내려받기로 바로 저장해도 돼요(이 버튼 이름은 저희가 직접 확인 못 했어요).
- 윈도우: 메모장 열기 → 붙여 넣기 → 파일 → 다른 이름으로 저장 → 파일 형식 '모든 파일(*.*)', 인코딩 'UTF-8', 파일 이름 '주크박스.html' → 저장. 맥: 텍스트 편집기 열기 → 새로운 문서 → 메뉴 '포맷 → 일반 텍스트로 만들기' → 붙여 넣기 → 저장할 때 이름을 '주크박스.html'로. 맥에서 '.html을 사용할까요?' 하고 물으면 '.html 사용'을 눌러요.
- 음악을 장르별 폴더로 나눠 한 폴더 안에 모아요. 예: '내음악' 폴더 안에 '커피재즈'·'보사노바'·'로파이' 폴더, 그 안에 MP3. 안쪽 폴더 이름이 그대로 장르 버튼 이름이 돼요.
- 저장한 주크박스.html을 크롬으로 열어(크롬 창에 끌어다 놓기) '🎵 음악 폴더 고르기' → '내음악' 폴더 선택 → 크롬이 허용을 물으면 허용. 큰 장르 버튼(곡 수와 함께)이 뜨면 성공이에요. 버튼을 누르면 그 안의 곡을 섞어서 마지막 곡까지 이어 틀고, '⏭ 다음 곡'·'⏸ 멈춤'으로 조작해요. 페이지를 새로 고치면 폴더를 다시 골라야 해요(답 원문).
나머지는 회원만 볼 수 있어요
무료 가입하면 이 가이드 끝까지, 프롬프트 복사, 파일 받기까지 다 돼요.
10초면 끝나요.
