비트웨이브 초기 개발기: 듣던 음악을 두 엄지로 플레이하기

이 글의 준비·심사 상태는 당시 개발 기록입니다. 이후 이용 경로는 비트웨이브 소개 페이지에서 확인할 수 있습니다.

초기 개발 기록 · 2026년 9월 11일
이후 비트웨이브는 원스토어에 출시했습니다. 출시 과정은 원스토어 출시 이야기에 따로 정리했습니다. 아래의 곡 수·화면·출시 계획은 초기 웹 테스트 당시 내용입니다.

비트웨이브는 제가 Suno로 만든 음악에서 출발했습니다. 듣던 곡을 손으로 누르며 플레이할 수 있게 옮기는 작업이었습니다. 음악 파일을 넣는 것보다, 두 엄지가 실제로 누를 수 있는 노트 배치를 만드는 데 별도의 규칙이 필요했습니다.

2026년 9월 11일 웹 테스트에는 27곡을 넣었습니다. 아래는 그때의 기록입니다. 이후 출시 버전과 초기 테스트 화면을 섞지 않도록, 당시 손본 채보·음원 구간·입력 문제를 중심으로 남겼습니다.

비트웨이브 웹 테스트 플레이하기 ↗

한 곡을 짧게 플레이할 수 있게 만들었다

먼저, 음악을 좋아하고 잠깐의 여유에 한 곡씩 플레이하고 싶은 분입니다. 게임용 음원은 대략 45~90초로 편집해 한 판의 부담을 줄였습니다. 곡을 고를 때는 LP를 넘기듯 표지를 움직이며 미리 들어볼 수 있습니다.

리듬게임이 익숙하지 않은 분은 4키·이지·연습 모드부터 시작할 수 있습니다. 이지는 여유 있는 단타 중심이며, 연습 모드에서는 게이지가 떨어져도 곡 끝까지 이어집니다. 노트를 읽는 속도에 맞춰 낙하 속도를 조절하고, 손에 익으면 키 수와 난이도를 올리는 방식입니다.

기록을 조금씩 개선하는 재미를 좋아하는 분도 생각했습니다. 4~8키와 이지·노멀·하드를 고를 수 있고, 곡별 최고 별점을 쌓으면 다음 곡이 열립니다. 클리어한 곡을 앨범에 모아 원곡으로 다시 듣는 흐름도 넣었습니다. 좋아하는 곡을 찾고, 연습하고, 더 좋은 기록을 남기는 과정이 이어졌으면 합니다.

곡 선택에서 플레이, 최고 별점 기록, 클리어한 곡을 다시 듣는 앨범으로 이어지는 흐름
초기 개발기에서 설명한 플레이 흐름을 새로 그렸습니다. 특정 버전의 앱 화면 캡처는 아닙니다. 그림을 누르면 크게 볼 수 있습니다.

제가 만든 음악에서 출발했습니다

수록 음악은 제가 Suno로 제작한 곡들입니다. 음악을 듣는 경험을 손으로 연주하듯 참여하는 경험으로 넓혀 보고 싶었습니다. 곡별 표지와 미리듣기, 앨범 감상 기능을 함께 만든 이유도 여기에 있습니다.

음악 파일을 넣는 것만으로 리듬게임이 완성되지는 않았습니다. 음원에서 타격 시점을 분석해 노트 배치인 ‘채보’를 만들고, 휴대폰을 양손으로 잡았을 때 두 엄지가 움직일 수 있는지 규칙을 따로 다듬었습니다. 같은 엄지로 여러 칸을 동시에 누르거나, 긴 노트를 누르는 동안 다른 칸을 누르도록 요구하는 배치를 막는 식입니다.

게임은 React·TypeScript·Vite로 만들고, Codex와 함께 구현과 자동 검사를 반복하고 있습니다. 음악과 입력 판정의 시간 기준을 맞추고, 일시정지에서 돌아왔을 때 소리가 겹치지 않는지, 업데이트 뒤에도 기존 기록이 이어지는지 확인하는 데 시간을 쓰고 있습니다.

작은 불편을 고치는 일이 제작의 큰 부분입니다

최근에는 곡 순서가 뒤로 갈수록 이지와 노멀, 하드의 차이가 흐려지는 문제가 있었습니다. 이지는 단타 중심, 노멀은 더 촘촘한 박자와 긴 노트, 하드는 빠른 연타와 양손 동시 입력으로 각 난이도의 역할을 다시 나눴습니다.

짧게 편집한 음악이 가사 중간에서 시작하는 문제도 있었습니다. 원곡의 엔딩은 살리면서 소절 앞에서 시작하도록 일부 곡의 시작점을 다시 골랐습니다. 음성 분석을 참고했지만, 시작과 끝이 자연스럽게 들리는지는 계속 귀로 확인해야 할 부분입니다.

화면 역시 한 번에 완성되지 않았습니다. 휴대폰에서 설정 내용이 접히거나 버튼이 밀리는 문제를 고쳤고, 지금은 플레이·앨범·꾸미기·기록을 하단 탭으로 묶었습니다. 곡 선택 화면에는 LP와 플레이 버튼을 중심에 두고, 상세 설정은 옵션으로 옮겼습니다.

그래픽도 음악을 누르는 느낌에 맞춰

시작 화면의 입체 리듬 콘솔은 Blender에서 모델링하고 렌더링한 이미지입니다. 금속 프레임과 유리 레인, 라임색·보라색 노트를 만들고 웹에서 쓸 수 있는 이미지로 적용했습니다. 곡별 표지에는 AI 생성 이미지를 활용했습니다.

실제 플레이 화면에서는 곡 표지 위에 어두운 반투명 무대를 깔고, 판정선과 눌린 건반에 빛을 더했습니다. 노트를 누른 순간이 눈과 귀에 함께 전달되도록 타격음도 조정하고 있습니다. 효과의 강도와 타격음 볼륨은 각자 편한 쪽으로 바꿀 수 있게 했습니다.

9월 11일에는 웹 테스트 다음 단계를 준비했다

당시 공개한 주소는 웹 플레이테스트였습니다. 토스나 앱스토어에 정식 출시한 버전은 아니며, 출시 날짜도 아직 정하지 않았습니다. 준비 순서는 다음과 같습니다.

  1. 웹 테스트에서 노트 타이밍, 난이도, 화면 구성에 대한 피드백을 모읍니다. 특히 실제 Android와 iPhone에서 오디오 지연, 멀티터치, 앱을 나갔다 돌아왔을 때의 동작을 확인합니다.
  2. 음원의 생성·다운로드 기록과 게임 배포에 필요한 사용 조건을 정리하고, 최신 게임 내용을 반영한 Android 출시용 빌드를 준비합니다.
  3. 원스토어 등록과 게임 등급분류 절차를 먼저 진행한 뒤, 토스 미니앱 검수와 출시를 이어갈 계획입니다.

광고와 꾸미기 소액결제는 검토 중인 수익 모델입니다. 당시 웹 테스트에는 실제 광고나 결제가 연결되어 있지 않았습니다. 도전권이 부족할 때 보이는 ‘테스트 충전’도 개발 버전에서 플레이를 이어 가기 위한 임시 기능입니다.

한두 곡 플레이해 보고 알려주세요

가장 알고 싶은 것은 실제로 손이 편한지, 음악과 노트가 잘 맞는지, 한 판이 끝났을 때 다시 누르고 싶은지입니다. 자동 검사와 별개로 휴대폰에서의 손맛은 플레이 피드백으로 계속 다듬어야 합니다.

4키·이지·연습 모드로 한 곡부터 시작해 보세요. 이어폰으로 음악을 들으며 플레이해 보시고, 박자가 어긋나거나 조작이 불편하다면 휴대폰 기종·브라우저·곡 이름·문제가 생긴 구간을 댓글로 남겨 주세요. 당시 웹 테스트 기록은 사용한 브라우저에 저장됐고 기기 간 동기화는 지원하지 않았습니다.

비트웨이브 플레이하기 ↗ · 게임 소개 보기

개발과 음악 제작 · James K
이 글은 2026년 9월 11일 웹 테스트 버전을 기준으로 작성했습니다.

댓글 남기기