모바일 UX 대규모 개선
모바일에서 메트로놈과 DAW 시퀀서를 편하게 사용할 수 있도록 터치 최적화, 광고 정리, DAW 모바일 전용 뷰를 추가했습니다.
- •모바일 300ms 탭 딜레이 제거 (touch-action: manipulation 전역 적용)
- •메트로놈/튜너/리듬연습 페이지에서 팝업 광고 제거 — 도구 사용 중 방해 없음
- •모바일 DAW: 트랙 탭 선택 → 1트랙 큰 그리드로 편집 (데스크톱은 기존 5트랙 유지)
- •DAW 셀 최소 크기 보장 — 32분음표 이상에서도 손가락으로 터치 가능
- •DAW 재생 중 커서를 따라 자동 스크롤 — 긴 시퀀스에서도 현재 위치 추적
- •DAW 커서와 오디오 재생 타이밍 정밀 동기화
SEO 콘텐츠 대규모 확장
연습 팁 페이지 신규 추가, 가이드 허브 리뉴얼, 콘텐츠 페이지 간 내부 링크 강화, 기타 튜닝 가이드 확장을 진행했습니다.
- •연습 팁 7가지 가이드 페이지 신규 (/practice-tips)
- •가이드 허브 페이지 리뉴얼 — 서브 가이드 카드 추가
- •콘텐츠 페이지 간 상호 링크 4개 이상으로 강화
- •기타 튜닝 가이드 — 새 섹션 4개 + FAQ 5개 추가
- •hreflang 절대경로 수정으로 검색엔진 색인 개선
방문 데이터 수집 개선
Google Analytics Consent Mode v2를 적용하여 쿠키 동의 전에도 기본 데이터를 수집할 수 있게 개선했습니다. 쿠키 배너도 작게 변경했습니다.
- •GA4 Consent Mode v2 적용 — 동의 전 기본 데이터 수집
- •쿠키 배너를 좌측 하단 미니 카드로 변경
- •쿠키 없이 페이지뷰, 세션 수 등 기본 데이터 모델링
시계열 차트 개선
타이밍 시각화 차트에 줌 인/아웃, 과거 기록 스크롤, 차트 이미지 다운로드 기능을 추가했습니다.
- •시간 윈도우 줌 인/아웃 (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종 (표준/입문/도전/고급) + 커스텀
- •점진적 난이도: 사이클 반복 후 자동 난이도 상승
- •무음 구간에서도 비트 애니메이션 유지 (시각 가이드)
검색 최적화 개선
검색엔진 노출을 위한 메타 태그, 구조화 데이터, 리다이렉트를 개선했습니다.
- •OG 이미지 및 Twitter Card 메타 태그 추가
- •검색엔진 친화적 구조화 데이터 적용
- •페이지별 BreadcrumbList 구조화 데이터 추가
웹 성능 개선
Next.js 프레임워크로 전환하여 페이지 로딩 속도와 SEO 성능을 개선했습니다.
- •서버 사이드 렌더링으로 초기 로딩 속도 개선
- •페이지 전환 속도 향상
리듬 소리 다양화
시퀀스 타임라인에 5트랙 드럼(킥/스네어/하이햇/탐/클랩)을 지원하고, 메트로놈에 4가지 음색(림샷/하이햇/카우벨/클라베스)을 추가했습니다.
- •5트랙 드럼 지원 (킥, 스네어, 하이햇, 탐, 클랩)
- •메트로놈 4가지 음색 추가 (림샷, 하이햇, 카우벨, 클라베스)
- •Web Audio API 기반 실시간 사운드 합성
- •트랙별 볼륨 밸런스 최적화
박수 감지 알고리즘 개선 (V2)
피크 감지 기반의 새로운 박수 감지 알고리즘을 적용하여 마이크 입력의 정확도를 개선했습니다.
- •피크 감지 방식으로 박수 인식 정확도 향상
- •스펙트럼 분석으로 박수와 음성/잡음 구별
- •비트 감지 시 즉시 UI 반영 (지연 제거)
- •적응형 노이즈 플로어로 다양한 환경 지원
SEO 동적 URL noindex 처리
쿼리 파라미터가 포함된 동적 URL에 noindex 메타태그를 추가하여 Google/Naver 색인 문제를 해결했습니다.
- •동적 URL에 noindex 메타태그 추가
- •hreflang에서 ?lang=en 파라미터 제거
- •robots.txt에 ?beats= 패턴 차단 추가
튜너 음 유지 시간 개선
기타 튜너의 음 감지 안정성을 개선했습니다. 음 유지 시간(Hold Time)과 페이드 효과를 추가했습니다.
- •음 유지 시간 (Hold Time) 기능 추가
- •음 표시 페이드 효과
- •음 감지 안정성 향상
기타 튜너 기능
마이크를 사용하여 기타 튜닝을 할 수 있는 기능을 추가했습니다. 크로매틱 모드와 기타 표준 튜닝을 지원합니다.
- •크로매틱 튜너 모드 지원
- •기타 표준 튜닝 (E2-A2-D3-G3-B3-E4)
- •실시간 피치 감지 (YIN 알고리즘)
- •튜닝 상태 실시간 시각화
- •한국어/영어 다국어 지원
SEO 동적 URL 크롤링 차단
Google Search Console 색인 문제를 해결하기 위해 robots.txt에 동적 URL 크롤링 차단 규칙을 추가했습니다.
- •robots.txt 자동 생성 스크립트 업데이트
- •동적 URL 파라미터 크롤링 차단
- •삭제된 레거시 페이지 크롤링 차단
리듬 패턴 저장 기능
리듬 연습에서 만든 패턴을 저장하고 불러올 수 있습니다. localStorage를 활용하여 브라우저를 닫아도 패턴이 유지됩니다.
- •나만의 리듬 패턴 저장
- •저장된 패턴 불러오기
- •패턴 삭제 기능
- •브라우저 로컬 저장소 영구 저장
- •온보딩 튜토리얼 가이드 추가
BPM 점진적 증가 기능
시작 BPM에서 목표 BPM까지 점진적으로 템포를 증가시킬 수 있습니다. 연습 난이도를 자연스럽게 높일 수 있습니다.
- •시작 BPM → 목표 BPM 자동 증가
- •증가 단계 (BPM) 설정
- •마디 단위 진행 표시
메트로놈 자동 정지
다른 페이지로 이동할 때 메트로놈이 자동으로 정지됩니다.
- •페이지 이동 시 자동 정지
온보딩 튜토리얼
처음 사용자를 위한 단계별 튜토리얼을 추가했습니다. Intro.js를 활용하여 주요 기능을 안내합니다.
- •Intro.js 기반 튜토리얼
- •메트로놈 사용법 안내
- •리듬 연습 사용법 안내
시퀀스 타임라인
리듬 패턴을 시각적으로 편집할 수 있는 타임라인 UI를 추가했습니다.
- •5트랙 (킥/스네어/하이햇/탐/클랩) 편집
- •드래그 앤 드롭 비트 이동
- •그리드 스냅 기능
- •실시간 편집 및 재생
연습 타이머
연습 시간을 설정하고 추적할 수 있는 타이머 기능을 추가했습니다.
- •카운트다운 타이머
- •세션별 연습 시간 추적
- •정확한 타이밍 (requestAnimationFrame)
프리셋 시스템
메트로놈 설정을 프리셋으로 저장하고 불러올 수 있습니다.
- •현재 설정 프리셋 저장
- •저장된 프리셋 불러오기
- •Zustand persist 미들웨어 활용
마이크로 인터랙션 개선
버튼 클릭, 호버 등의 인터랙션 효과를 개선했습니다.
- •버튼 클릭 애니메이션
- •호버 효과 개선
- •BPM 변경 시 애니메이션
다크 모드
눈의 피로를 줄이는 다크 모드를 지원합니다. 시스템 설정을 따르거나 수동으로 전환할 수 있습니다.
- •시스템 테마 자동 감지
- •수동 전환 토글
- •설정 영구 저장