스마트폰으로 노래방을 완벽 제어하는 VKara
유튜브(YouTube)의 한계를 극복하고 친구들과 함께 노래방을 즐기기 위한 브라우저 기반 앱(Browser-based App) VKara 개발
TV/노트북은 재생 화면, 스마트폰은 리모컨으로 활용하는 역할 분담 아키텍처(Role-based Architecture) 설계
Bun Workspace 모노레포(Monorepo) 전환 및 공유 타입(Shared Types) 관리로 개발 생산성 및 유지보수성 향상
실시간 동기화(Real-time Sync) 및 사용자 경험(UX) 개선에 집중하여 안정적인 노래방 환경 구축
모노레포(Monorepo) 전환을 통한 개발 효율성 증대
VKara는 기존 프론트엔드(Frontend)와 백엔드(Backend) 레포지토리 분리로 인한 코드 변경의 위험성과 관리의 어려움을 겪었다. 이를 해결하기 위해 Bun Workspace 기반의 모노레포(Monorepo)로 통합하며 개발 프로세스를 개선했다.
코드 공유 용이성: `packages/shared-types`와 `packages/shared-utils`를 통해 API 계약 및 헬퍼 함수를 중앙 관리하여 중복 코드 작성 방지
변경 사항 통합 관리: 프론트엔드와 백엔드 코드 변경을 동일한 커밋(Commit)에서 검증하여 일관성 유지 및 통합 테스트(Integration Test) 용이성 확보
개발 경험 향상: 단일 저장소(Single Repository)에서 프로젝트 전체를 파악하고 수정할 수 있어 러닝 커브(Learning Curve) 감소 및 개발 속도 향상
이러한 모노레포 구조는 실시간 동기화(Real-time Sync) 로직과 같이 복잡한 상호작용이 필요한 애플리케이션에서 특히 빛을 발한다.
역할 기반 아키텍처(Role-based Architecture) 설계
기존 웹 앱의 반응형 디자인 접근 방식에서 벗어나, VKara는 TV/노트북(재생 화면)과 스마트폰(리모컨)의 역할 분담을 명확히 하는 아키텍처로 재설계되었다.
TV/노트북 역할: 단순 비디오 재생 및 최소한의 제어 기능 제공으로 복잡성 최소화. 사용자는 비디오 재생에만 집중 가능.
스마트폰 역할: 노래 검색, 큐(Queue) 추가, 재생/일시정지/건너뛰기 등 모든 제어 기능을 전담하여 사용자 경험(User Experience) 극대화.
WebSocket 기반 실시간 통신: 두 역할 간의 상태 동기화 및 명령 전달을 위해 WebSocket 프로토콜(WebSocket Protocol)을 적극 활용하여 즉각적인 피드백 제공.
이러한 역할 분담은 사용자 인터페이스(UI)의 복잡성을 줄이고 각 기기의 본질적인 기능에 집중하게 함으로써, 직관적인 노래방 경험을 제공한다.
실시간 동기화(Real-time Sync) 및 재연결(Reconnect) 로직 강화
VKara는 여러 사용자가 동시에 노래방 방을 제어하는 실시간 협업(Real-time Collaboration) 환경을 제공하므로, 안정적인 상태 동기화와 빠른 재연결 로직이 필수적이다.
상태 관리: Zustand 스토어(Zustand Store)를 활용한 클라이언트 상태 관리와 WebSocket을 통한 서버 상태 동기화를 결합하여 데이터 일관성(Data Consistency) 확보.
재연결 처리: 네트워크 불안정이나 앱 종료 후에도 빠르게 방 상태를 복구하고 동기화하여 사용자 이탈 방지.
재생 동기화: 여러 사용자가 조작해도 비디오 재생 상태(Playback Sync)를 정확하게 맞추는 로직을 구현하여 끊김 없는 경험 제공.
이러한 백엔드(Backend) 및 프론트엔드(Frontend)의 견고한 실시간 처리 능력은 사용자가 '버튼을 눌렀을 때 방이 반응하는' 당연하지만 중요한 경험을 보장한다.
GitHub Copilot을 활용한 개발 생산성 향상 전략
개발자는 GitHub Copilot을 단순 코드 생성 도구를 넘어 '마무리 파트너(Finishing Partner)'로 활용하여 개발 프로세스를 개선했다.
Ask Mode 활용: 프로젝트 재이해 및 기존 데이터 흐름(Data Flow) 파악을 위해 질문 형태로 활용하여 잘못된 레이어 수정 방지.
Plan Mode 활용: 모호한 리팩토링(Refactoring) 요구사항을 구체적인 마이그레이션 계획으로 전환하여 안전하고 체계적인 작업 수행.
오류 및 로그 분석: TypeScript 오류 메시지나 Docker 로그를 직접 붙여넣어 정확하고 빠른 버그 수정 지원.
이처럼 GitHub Copilot을 탐색, 비교, 계획, 리팩토링, 검증 등 개발 라이프사이클 전반에 걸쳐 활용함으로써, 코드의 신뢰도를 높이고 실제 사용자에게 중요한 문제 해결에 집중할 수 있었다.
YouTube API 활용 및 제약 사항
VKara는 기존 YouTube의 방대한 노래 라이브러리를 활용하지만, YouTube 자체의 제약 사항으로 인해 VKara만의 기능이 필요했다.
기능적 차이: YouTube는 비디오 재생에 최적화되어 있으나, 여러 사용자의 동시 곡 선정 및 재생 제어와 같은 노래방 환경 관리에 특화되지 않음.
API 활용: VKara는 YouTube API를 통해 비디오 검색, 메타데이터(Metadata) 확보 등에 의존하지만, 실시간 재생 제어 기능은 직접 구현해야 함.
제한된 리소스: 데모 버전은 개인 학생 계정의 제한된 리소스로 운영되어 성능 저하가 발생할 수 있으며, 이는 향후 확장 시 고려해야 할 사항임.
결론적으로 VKara는 YouTube를 대체하는 것이 아니라, YouTube가 제공하지 못하는 '함께 즐기는 노래방 경험'이라는 틈새 시장을 공략한다.
