건반 리듬게임의 가장 큰 매력 중 하나는 커뮤니티가 직접 만든 방대한 채보 풀입니다. 지난 15년 넘게 osu!mania 커뮤니티에서는 수많은 장르에 걸쳐 수만 곡의 완성도 높은 비트맵이 축적되었습니다.
Rhythmio를 만들면서 이미 손에 익은 비트맵들을 웹에서도 그대로 칠 수 있게 만들고 싶었습니다.
Rhythmio에는 클라이언트 사이드에서 바로 동작하는 osu!mania 패키지(.osz) 파서가 들어가 있습니다. 소장하고 있는 곡 파일을 브라우저 창 위로 끌어다 놓기만 하면, 외부 서버로 파일을 업로드하지 않고도 내 컴퓨터 안에서 즉시 압축을 풀고 플레이할 수 있습니다.
1. .osz 파일 가져오기 동작 원리
.osz 파일은 확장자만 다를 뿐 사실 일반 ZIP 압축 파일입니다:
- 난이도와 키 수별로 작성된
.osu채보 텍스트 파일 - 배경음악 오디오 파일 (
audio.mp3또는audio.ogg) - 곡 자켓과 배경 이미지
브라우저 내부 처리 과정:
- 드래그 앤 드롭 감지: 브라우저 창에 파일을 놓으면 HTML5 File API가 파일 스트림을 전달받습니다.
- 메모리 압축 해제: 백그라운드 웹 워커(Web Worker)가 브라우저 메모리 안에서 스트리밍 방식으로 빠르게 ZIP을 풉니다.
- 채보 텍스트 파싱:
.osu포맷의 메타데이터와 노트 좌표를 Rhythmio 내부 채보 형식으로 변환합니다:[General]: 오디오 파일명과 모드 정보[Difficulty]: CircleSize(키 수)와 OverallDifficulty(판정 기준)[TimingPoints]: BPM 변경점과 박자 오프셋[HitObjects]: 건반 라인 배치, 타격 시점, 롱노트 길이
파일이 브라우저 밖 외부 서버로 전송되지 않고 내 컴퓨터 로컬 환경에서만 풀리기 때문에, 몇 초도 걸리지 않고 바로 플레이할 수 있습니다.
2. 브라우저 로컬 저장과 캐싱 (IndexedDB)
15MB짜리 비트맵을 추가했을 때, 창을 새로고침할 때마다 매번 다시 드래그해야 할까요? 그렇지 않습니다.
Rhythmio는 풀린 비트맵 데이터를 브라우저 내장 데이터베이스인 IndexedDB에 저장합니다:
- 디코딩된 오디오 데이터와 채보 정보가 브라우저 로컬 스토리지에 캐싱됩니다.
- 나중에 다시 Rhythmio에 들어오면 내 컴퓨터 디스크에서 바로 라이브러리를 불러오므로 네트워크 데이터를 쓰지 않습니다.
- 인게임 곡 선택 창에서 가져온 곡들을 제목으로 검색하거나 별점 난이도로 정렬하고, 불필요한 곡은 클릭 한 번으로 삭제할 수 있습니다.
3. 지원 키 모드와 세부 호환성
Rhythmio는 표준 건반 모드를 폭넓게 지원합니다:
- 지원 키 모드: 4K, 5K, 6K, 7K 채보를 지원합니다. (8K 이상이나 타 모드 전용 채보는 목록에서 자동으로 제외됩니다).
- 변속(Scroll Velocity) 지원: 곡 중간에 노트 속도가 달라지는 상속 타이밍 포인트(Inherited Timing Points)도 재현되어 채보 제작자의 연출을 그대로 살려줍니다.
- 오디오 코덱: MP3, OGG Vorbis, WAV 형식을 지원합니다.
4. 플레이 방법 3단계
- 컴퓨터에 있는
.osz파일을 찾습니다. - 크롬, 사파리, 엣지 등 원하는 브라우저에서 Rhythmio를 엽니다.
- 곡 선택 화면 위로
.osz파일을 드래그해서 놓습니다. - 목록에 추가된 곡을 골라 바로 플레이하면 됩니다!
정리하며
기존에 즐겨 치던 osu!mania 곡들을 설치 없이 브라우저에서 바로 즐길 수 있도록 파이프라인을 다듬었습니다.
총 10편의 공식 블로그 시리즈를 읽어주셔서 감사합니다. 방 링크 하나로 친구를 초대해 1:1 대결을 펼치거나, 좋아하는 비트맵을 직접 올려 손맛을 확인해 보세요!
작성자
Rhythmio Team
Rhythmio 개발팀 — 업데이트 노트, 기술 아키텍처 및 게임플레이 디자인 이야기.
