저는 취미로 건반을 치고 있어요.
입시 경험도 없고 오래된 취미도 아닌지라 성인 취미생의 한계를 느끼며,
낯선 악보를 독학해야할 땐 도대체 이 리듬이 어떤 리듬인지 손발을 다 써가며 추측해야만 했죠.
메트로놈 앱은 수천개가 있고, 기본에 충실한 훌륭한 앱이 많지만
정해져있는 비트를 세주는게 아니라 내가 입력한 한 마디의 음표들의 리듬을 표시해주는 어플은 없을까? 🤔
열심히 찾아보다가, 직접 만드는게 낫겠다는 판단을 했어요.
그래서 템포와 박자표를 설정하고, 한 마디에 들어갈 음표를 클릭해서 넣고 CTA 버튼을 누르면 소리와 시각적 요소를 통해 진행 리듬을 직관적으로 확인할 수 있는 앱을 만들었습니다.
이름하여,
Rhythm Helper
입력한 리듬을 직관적으로 보고 들을 수 있도록 도와주는 Rhythm Helper
프로토타입 ux와 음표를 입력하고 재생하는 핵심 기능까지 개발을 완료했어요.
사용 기술
사용한 기술은 다음과 같습니다.
- TypeScript
- Vite + React
- Tailwindcss
- Zustand
- Web Audio API
배포는 빠르고 편하게 보여주기 위해 Vercel 을 통해 간단하게 진행했습니다.
위 기술들을 사용한 이유는 다음과 같아요.
TypeScript, React: 제가 현업에서 메인으로 사용하고 있는 언어가 JS이고, 웹 뷰는 React.js 라이브러리를 사용하고 있기 때문입니다. 현업 환경에서는 TS 대신 jsdoc 을 이용해 함수 등에 주석을 달아주고 있는데, 이번 기회에 TS로 타입지정을 해보고 싶어서 사용했습니다.
Vite: 이번에 만드는 앱에서 많은 리소스를 요구하지 않기 때문에 간편한 빌드 툴인 vite 를 통해 프로젝트를 생성했습니다.
Zustand: 사실 가능하면 이렇게 간단한 앱은 useState hook 으로 처리해도 되는데, 전역 상태가 필요하게 돼서 추가했습니다. Jotai 와 비슷하게 보일러플레이트가 거의 없는 직관적인 사용이 좋은 상태관리 도구였습니다. Store 단위로 묶어서 사용하는 점이 마음에 들었습니다.
Web Audio API: 처음에는 어떤 샘플 보이스를 하나 찾아서 출력시키려고 했는데, 찾아보니 웹 오디오 API 라는게 있고 신디사이저 이론을 알고 있다면 원하는 클릭음을 생성하는게 가능해 보였어요. 구체적인 방법은 AI 도움을 받았고, 다행히 얼마전에 신디사이저 공부를 좀 해둔 덕에 금방 적용할 수 있었어요. (취미의 도움을 받는 순간...!)
작업 과정
5년 전 취직준비하던 시절 이후로 기획부터 스스로 스케쥴을 짜는게 너무 오랜만이라, 재미도 있었지만 막막하기도 했어요.
핵심 기능 정의
맨 처음에는 핵심 기능부터 정의했습니다.
- 박자표, 템포 선택
- 음표를 선택하면 마디에 추가
- 시작버튼(CTA)를 누르면 마디에 등록된 음표를 박자표와 템포에 맞춰 시각적, 청각적으로 출력
- 32분음표, 한 마디까지 제한
- 추후 마디를 추가하거나 저장할 수 있는 기능을 염두하여 개발
이 정도로 정리하고 나니까 어떤 시나리오로 작동할지, 어떤 ux 를 제공해야할지 머리에 그려졌어요.
컴포넌트 구성
UI 단위 컴포넌트를 구성하는건 원래 하던 일이라 쉽게 정리가 됐어요.
- 박자 선택 버튼
- 템포 선택 버튼
- 마디 영역
- 음표 선택 버튼 영역
- CTA (Start/Pause)
- rollback 버튼
- reset 버튼
이벤트 및 상태관리 처리
마디 영역에 들어가는 데이터는 음표/쉼표 여부와 전체 마디에서 점유하는 길이 값을 가진 객체의 배열로 설정했습니다.
그래야 출력시 정확한 속도와 소리를 낼 수 있었어요.
구조를 정하면 각 버튼에 대한 이벤트 핸들러를 등록하고,
현재 재생중 여부와 마디 데이터를 전역상태로 설정하여 재생 중일 경우 출력 효과를 setTimeout 을 활용한 hook 으로 보여주었어요.
추후 과제
퇴근 후 제작해야 했기에 시간적인 제약은 있었지만, 완성하기 까지 일주일도 채 걸리지 않았어요.
제가 원하는 방향으로 컴포넌트를 리팩터링하거나 간단한 수정사항은 Claude Code 를 활용했기 때문에 생산성이 많이 향상 되었던 것 같아요.
모든걸 일임하지 않고 정확히 원하는 바를 프롬포트로 입력해서 주문한 다음, 완성한 코드를 꼼꼼히 확인 하는 방향으로 확인했는데, 이 정도로 의지했을때 AI와 좋은 관계가 형성(?) 되는 것 같았습니다.
최소 기능까지는 구현했는데,
확장하고 싶은 부분과 지인들을 통해 받은 피드백을 통한 수정사항들이 있습니다.
- 마디에 있는 노트를 클릭할 수 있게 하고, 대체하거나 지울 수 있도록 할 것
- 마디를 더 추가할 수 있게 할 것 (예상했던 부분)
- 최근 작업한 마디를 저장할 수 있게 할 것 (localStorage를 통해 바로 구현 가능)
- 셋잇단 음표의 구현 (하려고 했던 부분)
- 이음줄의 구현
(으악! 복잡해진다!) - 마디 UI 에서 8분, 16분, 32분음표가 잇달아 저장되어있는 경우 클래식 악보처럼 묶어 표현되도록 처리 (하려고 했던 부분)
1번이나 5번은 상정하지 못했던 부분이라 기술적, ux적으로 많이 고민해봐야하겠습니다.
그 외에도 디자이너의 부재로 더듬더듬 만든 디자인을 디벨롭 하고,
모바일 버전으로 최적화한 다음 스토어에 배포하겠다는 목표도 있습니다. (음악에 관심 있는 좋은 디자이너 분을 만나야겠죠...)
올해는 연말 정기공연이 있으니,
공연이 마무리되면 후속 작업에 박차를 가하고 다듬어 볼 예정입니다!
