규로롱
06

쉼, 바다

눈을 감으면 도착하는 바다. 편지와 함께 링크 하나로 선물한다

concept

  • 절차적 오디오procedural audio

    오디오 파일이 한 개도 없다. 파도도 갈매기도 브라우저가 그 자리에서 합성한다. 받을 게 없으니 켜자마자 소리가 나고, 열 시간을 틀어도 데이터가 늘지 않는다. 길이가 정해진 녹음이 아니라서 반복되는 지점도 없다.

  • 링크에 상태 담기state in the URL

    받는 사람 이름과 편지, 지금 듣고 있는 믹스를 통째로 압축해 주소에 넣는다. 서버에 저장하는 게 없으니 DB 도 만료도 없고, 링크를 받은 사람은 아무것도 설치하지 않고 내가 듣던 바다를 그대로 연다.

파도·갈매기·바람·모닥불 같은 소리 열두 가지를 섞어서 듣는다. 오디오 파일은 한 개도 없다. 전부 브라우저가 그 자리에서 합성한다 — 받을 게 없으니 켜자마자 소리가 나고, 얼마를 틀어도 데이터가 늘지 않는다.

켜두고 쓰는 것들

  • 수면 타이머 — 끝날 때 뚝 끊지 않고 천천히 잦아든다
  • 호흡 가이드 — 파도가 밀려오는 리듬에 맞춰 들숨과 날숨을 잡아준다
  • 오늘의 바다 — 날짜마다 다른 해변이 뜬다. 고를 필요가 없다
  • 화면 어둡게 — 머리맡에 두고 자도 되게

듣는 것보다 보내는 것

만들다 보니 이건 혼자 듣는 것보다 보내는 것에 가깝다는 생각이 들었다. 받는 사람 이름과 편지, 지금 듣고 있는 믹스를 통째로 압축해 링크 하나로 만든다.

{ 이름, 편지, 믹스 } → JSON → 압축 → 주소 뒤 #g=… 

서버에는 아무것도 저장되지 않는다. 편지도 이름도 전부 주소 안에 들어가서, 링크를 지우면 그걸로 끝이다. 받은 사람은 바다에 들어와 달을 세 번 두드리면 편지를 연다.

이렇게 시켰습니다

쉼, 바다을 지금 다시 만든다면 AI에게 이렇게 넘기겠습니다. 그대로 복사해서 붙여넣고, 마음에 안 드는 부분만 바꾸세요.

파도 소리를 들려주는 웹앱을 만들어줘. 자기 전에 머리맡에 두고 켜둘 물건이야.

소리가 핵심인데, 조건이 하나 있어:
- 오디오 파일을 하나도 쓰지 마. 전부 브라우저가 그 자리에서 합성해야 해 (Web Audio API)
- 받을 게 없으니 켜자마자 소리가 나고, 몇 시간을 틀어도 데이터가 안 늘어나야 한다
- 파도, 갈매기, 바람, 비, 모닥불 같은 걸 열 가지 정도 만들고 각각 볼륨을 따로 조절
- 파도는 밀려오고 빠지는 주기가 있어야 해. 그냥 노이즈를 틀면 파도로 안 들린다

같이 넣을 것:
- 수면 타이머 — 시간이 끝날 때 뚝 끊지 말고 몇 분에 걸쳐 천천히 잦아들게
- 호흡 가이드 — 파도 리듬에 맞춰 들숨/날숨을 잡아주는 원
- 오늘의 바다 — 날짜마다 다른 조합이 자동으로 뜬다 (고르는 것도 일이라서)
- 화면 어둡게 하는 모드

그리고 이건 꼭:
- 지금 듣고 있는 믹스에 받는 사람 이름과 짧은 편지를 붙여서 링크 하나로 만들 수 있게 해줘
- 서버에 저장하지 마. 이름도 편지도 믹스 설정도 전부 JSON으로 만들어 압축해서
  주소 뒤 해시(#)에 넣어줘. 링크를 지우면 그걸로 끝나야 한다
- 받은 사람은 그 링크를 열면 편지부터 보고, 닫으면 그 믹스가 재생된다

PWA로 만들어서 홈 화면에 추가되게 해줘.

여기 적힌 시간은 쓸 만한 게 처음 돌아가기까지입니다. 그 뒤에 디테일을 잡는 데 보통 하루 이틀이 더 들고, 지금도 필요할 때 업데이트 하고 있습니다.

처음이라면 — 뭘 깔고 어디에 붙여넣나

저는 Claude Code를 씁니다. 하지만 위 프롬프트는 특정 도구용이 아니라서 아무 데나 붙여넣어도 됩니다. 셋 중 편한 걸로 시작하세요.

  1. 1. 설치 없이 — 브라우저 챗봇
    쓰던 챗봇에 붙여넣고 “하나의 HTML 파일로 만들어줘”를 덧붙이세요. 나온 코드를 저장해 더블클릭하면 그 자리에서 돌아갑니다. 5분, 무료.
  2. 2. 제대로 — 터미널에서 CLI
    파일을 여러 개 만들고 스스로 고쳐가며 돌려보는 건 이쪽만 됩니다. 여기 있는 것들은 전부 이 방식으로 만들었습니다. 30분.
  3. 3. 남한테 맡기고 — 웹 빌더
    v0, Bolt, Lovable 같은 데에 붙여넣으면 화면까지 알아서 띄워줍니다. 빠른 대신 나중에 손대기가 답답해집니다.

어느 쪽이든 한 번에 완성될 거라고 기대하지 마세요. 저는 대충 돌아가는 걸 먼저 받고, 거슬리는 걸 하나씩 말해서 고칩니다. 에러가 뜨면 읽으려 하지 말고 통째로 복사해서 그대로 붙여넣으면 됩니다. 저도 1년 동안 그렇게만 했습니다.

터미널을 한 번도 안 열어보셨다면 설치부터 순서대로 적어둔 곳이 따로 있습니다. 맥·윈도우 명령어와 막혔을 때 할 일까지 있습니다.

만드는 과정