메인 페이지 리뉴얼
메인 페이지의 소개 문구와 레이아웃을 새롭게 정리했습니다.
- •소개 문구를 더 읽기 쉽게 정리
- •핵심 차별점 3가지로 간결하게 재구성
튜너 피치 감지 정확도 개선
기타 튜너의 피치 감지 알고리즘을 개선하여 약한 신호에서도 음을 잘 잡고, 옥타브 오인식을 방지합니다.
- •NSDF 신뢰 임계값 조정으로 저주파(E2) 감지율 향상
- •서브하모닉 방지 로직 추가 — 옥타브 오인식 해결
- •안정화 필터 반응 속도 향상 (히스토리 5→3, 허용 오차 조정)
연습 기록 & 성장 그래프
메트로놈 연습 세션을 자동으로 기록하고, 시간에 따른 실력 변화를 차트로 확인할 수 있습니다.
- •연습 시작/정지 자동 감지 및 세션 기록
- •일별 연습량과 정확도 변화를 보여주는 성장 그래프
- •세션별 상세 기록 조회 및 삭제
네비게이션과 가이드 UX 개선
상단 메뉴에 업데이트 페이지를 추가하고, 가이드를 더 쉽게 찾을 수 있게 개편했습니다. 처음 방문자도 제품 기능을 한눈에 파악할 수 있도록 요약을 제공합니다.
- •상단 네비게이션에 ‘업데이트’ 메뉴 추가
- •가이드 진입 동선 정리 및 접근성 개선
- •제품 요약 페이지로 핵심 기능 빠르게 확인
모바일 UX 대규모 개선
모바일에서 메트로놈과 DAW 시퀀서를 편하게 사용할 수 있도록 터치 최적화, 광고 정리, DAW 모바일 전용 뷰를 추가했습니다.
- •모바일 300ms 탭 딜레이 제거 (touch-action: manipulation 전역 적용)
- •메트로놈/튜너/리듬연습 페이지에서 팝업 광고 제거 — 도구 사용 중 방해 없음
- •모바일 DAW: 트랙 탭 선택 → 1트랙 큰 그리드로 편집 (데스크톱은 기존 5트랙 유지)
- •DAW 셀 최소 크기 보장 — 32분음표 이상에서도 손가락으로 터치 가능
- •DAW 재생 중 커서를 따라 자동 스크롤 — 긴 시퀀스에서도 현재 위치 추적
- •DAW 커서와 오디오 재생 타이밍 정밀 동기화
SEO 콘텐츠 대규모 확장
연습 팁 페이지 신규 추가, 가이드 허브 리뉴얼, 콘텐츠 페이지 간 내부 링크 강화, 기타 튜닝 가이드 확장을 진행했습니다.
- •연습 팁 7가지 가이드 페이지 신규 (/practice-tips)
- •가이드 허브 페이지 리뉴얼 — 서브 가이드 카드 추가
- •기타 튜닝 가이드 — 새 섹션 4개 + FAQ 5개 추가
시계열 차트 개선
타이밍 시각화 차트에 줌 인/아웃, 과거 기록 스크롤, 차트 이미지 다운로드 기능을 추가했습니다.
- •시간 윈도우 줌 인/아웃 (2초/4초/8초)
- •과거 기록 스크롤로 이전 타이밍 확인
- •차트를 PNG 이미지로 다운로드
디자인 리뉴얼
브랜드 컬러 Indigo 도입 및 전체 UI를 깔끔한 플랫 디자인으로 리뉴얼했습니다. 네비게이션 구조를 정리하고 메트로놈 제어판 레이아웃을 개선했습니다.
- •브랜드 컬러 Indigo(#6366f1) 도입 — 버튼, 강세, 포커스 링 등 전반 적용
- •네비게이션 8개 → 5개 + 가이드 드롭다운으로 정리
- •메트로놈 제어판: BPM/Play/Tap 핵심 영역 강조, 세부 설정 접힘 처리
- •DAW 시퀀서 그리드 대비 강화 및 터치 영역 확대
- •Glass-morphism/Neumorphism → 깔끔한 플랫 디자인 전환
비트 정확도 측정
스페이스바나 화면 탭으로 리듬을 맞추면 Perfect/Great/Good/Miss로 실시간 판정합니다. Web Audio API 기반 정밀 타이밍으로 실제 소리와의 편차를 측정합니다.
- •Perfect/Great/Good/Miss 4단계 실시간 판정
- •시계열 차트에 편차 틱 오버레이 (±ms 표시)
- •세션 통계 — 정확도%, 평균 편차, 판정 분포 바
- •AudioContext.currentTime 기반 정밀 타이밍 동기화
MIDI / WAV 내보내기
리듬 패턴을 MIDI 또는 WAV 파일로 내보내는 기능을 추가했습니다. 뮤트/솔로 설정이 반영되며, 클라이언트에서 완전히 동작합니다.
- •MIDI 파일 내보내기 (GM 드럼 맵 지원)
- •WAV 파일 내보내기 (오프라인 렌더링)
- •뮤트/솔로 설정이 내보내기에 반영
- •서버 없이 브라우저에서 완전히 동작
사일런트 바 모드
N마디 소리 → M마디 무음 반복으로 내면 리듬감을 훈련하는 연습 시스템을 추가했습니다. 카운트인, 프리셋, 점진적 난이도를 지원합니다.
- •소리/무음 마디 반복 사이클 연습
- •카운트인 (1~2마디) 후 사이클 시작
- •프리셋 4종 (표준/입문/도전/고급) + 커스텀
- •점진적 난이도: 사이클 반복 후 자동 난이도 상승
- •무음 구간에서도 비트 애니메이션 유지 (시각 가이드)
웹 성능 개선
Next.js 프레임워크로 전환하여 페이지 로딩 속도와 SEO 성능을 개선했습니다.
- •서버 사이드 렌더링으로 초기 로딩 속도 개선
- •페이지 전환 속도 향상
리듬 소리 다양화
시퀀스 타임라인에 5트랙 드럼(킥/스네어/하이햇/탐/클랩)을 지원하고, 메트로놈에 4가지 음색(림샷/하이햇/카우벨/클라베스)을 추가했습니다.
- •5트랙 드럼 지원 (킥, 스네어, 하이햇, 탐, 클랩)
- •메트로놈 4가지 음색 추가 (림샷, 하이햇, 카우벨, 클라베스)
- •Web Audio API 기반 실시간 사운드 합성
- •트랙별 볼륨 밸런스 최적화
박수 감지 알고리즘 개선 (V2)
피크 감지 기반의 새로운 박수 감지 알고리즘을 적용하여 마이크 입력의 정확도를 개선했습니다.
- •피크 감지 방식으로 박수 인식 정확도 향상
- •스펙트럼 분석으로 박수와 음성/잡음 구별
- •비트 감지 시 즉시 UI 반영 (지연 제거)
- •적응형 노이즈 플로어로 다양한 환경 지원
튜너 음 유지 시간 개선
기타 튜너의 음 감지 안정성을 개선했습니다. 음 유지 시간(Hold Time)과 페이드 효과를 추가했습니다.
- •음 유지 시간 (Hold Time) 기능 추가
- •음 표시 페이드 효과
- •음 감지 안정성 향상
기타 튜너 기능
마이크를 사용하여 기타 튜닝을 할 수 있는 기능을 추가했습니다. 크로매틱 모드와 기타 표준 튜닝을 지원합니다.
- •크로매틱 튜너 모드 지원
- •기타 표준 튜닝 (E2-A2-D3-G3-B3-E4)
- •실시간 피치 감지 (YIN 알고리즘)
- •튜닝 상태 실시간 시각화
- •한국어/영어 다국어 지원
리듬 패턴 저장 기능
리듬 연습에서 만든 패턴을 저장하고 불러올 수 있습니다. localStorage를 활용하여 브라우저를 닫아도 패턴이 유지됩니다.
- •나만의 리듬 패턴 저장
- •저장된 패턴 불러오기
- •패턴 삭제 기능
- •브라우저 로컬 저장소 영구 저장
- •온보딩 튜토리얼 가이드 추가
BPM 점진적 증가 기능
시작 BPM에서 목표 BPM까지 점진적으로 템포를 증가시킬 수 있습니다. 연습 난이도를 자연스럽게 높일 수 있습니다.
- •시작 BPM → 목표 BPM 자동 증가
- •증가 단계 (BPM) 설정
- •마디 단위 진행 표시
메트로놈 자동 정지
다른 페이지로 이동할 때 메트로놈이 자동으로 정지됩니다.
- •페이지 이동 시 자동 정지
온보딩 튜토리얼
처음 사용자를 위한 단계별 튜토리얼을 추가했습니다. Intro.js를 활용하여 주요 기능을 안내합니다.
- •Intro.js 기반 튜토리얼
- •메트로놈 사용법 안내
- •리듬 연습 사용법 안내
시퀀스 타임라인
리듬 패턴을 시각적으로 편집할 수 있는 타임라인 UI를 추가했습니다.
- •5트랙 (킥/스네어/하이햇/탐/클랩) 편집
- •드래그 앤 드롭 비트 이동
- •그리드 스냅 기능
- •실시간 편집 및 재생
연습 타이머
연습 시간을 설정하고 추적할 수 있는 타이머 기능을 추가했습니다.
- •카운트다운 타이머
- •세션별 연습 시간 추적
- •정확한 타이밍 (requestAnimationFrame)
프리셋 시스템
메트로놈 설정을 프리셋으로 저장하고 불러올 수 있습니다.
- •현재 설정 프리셋 저장
- •저장된 프리셋 불러오기
- •Zustand persist 미들웨어 활용
마이크로 인터랙션 개선
버튼 클릭, 호버 등의 인터랙션 효과를 개선했습니다.
- •버튼 클릭 애니메이션
- •호버 효과 개선
- •BPM 변경 시 애니메이션
다크 모드
눈의 피로를 줄이는 다크 모드를 지원합니다. 시스템 설정을 따르거나 수동으로 전환할 수 있습니다.
- •시스템 테마 자동 감지
- •수동 전환 토글
- •설정 영구 저장