플러스프로젝트 배경
Dolby Atmos 기반의 오디오 편집 도구는
대부분 데스크톱 설치형 프로그램으로 제공되며, 높은 사양 요구, 복잡한 초기 설정,
장비 의존도가 높아 일반 사용자·크리에이터가 접근하기 어렵다는 문제가 존재했습니다.
특히 음원 분리(Stem Separation)나 멀티채널 믹싱은 연산 성능과 서버 인프라가 중요해
웹에서 구현하기 어려운 분야로 인식되어 왔습니다. 이로 인해 간단한 편집부터 공간 오디오 제작까지
모두 전문 설치형 툴에 의존해야 했습니다.
이 문제를 해결하기 위해, 설치 없이 브라우저에서 바로 실행되며
음원 분리 · 믹싱 · Dolby Atmos 포지셔닝까지 가능한 웹 기반 실시간 오디오 스튜디오를
목표로 프로젝트를 진행했습니다.
장비나 환경에 구애받지 않고 즉시 편집을 할 수 있으며,
프로젝트 자산 관리까지 웹에서 일괄 처리할 수 있는 오디오 플랫폼을 구축했습니다.
대부분 데스크톱 설치형 프로그램으로 제공되며, 높은 사양 요구, 복잡한 초기 설정,
장비 의존도가 높아 일반 사용자·크리에이터가 접근하기 어렵다는 문제가 존재했습니다.
특히 음원 분리(Stem Separation)나 멀티채널 믹싱은 연산 성능과 서버 인프라가 중요해
웹에서 구현하기 어려운 분야로 인식되어 왔습니다. 이로 인해 간단한 편집부터 공간 오디오 제작까지
모두 전문 설치형 툴에 의존해야 했습니다.
이 문제를 해결하기 위해, 설치 없이 브라우저에서 바로 실행되며
음원 분리 · 믹싱 · Dolby Atmos 포지셔닝까지 가능한 웹 기반 실시간 오디오 스튜디오를
목표로 프로젝트를 진행했습니다.
장비나 환경에 구애받지 않고 즉시 편집을 할 수 있으며,
프로젝트 자산 관리까지 웹에서 일괄 처리할 수 있는 오디오 플랫폼을 구축했습니다.
프로젝트 성과
웹 환경에서 실시간 음원 분리 및 믹싱 엔진 구현
설치형 프로그램에서만 가능하던 음원 분리·믹싱 기능을 웹에서 즉시 실행할 수 있도록 구현하여,
사용자는 별도의 설치나 설정 없이 브라우저만으로 전문적인 오디오 작업을 수행할 수 있게 되었습니다.
사용자는 별도의 설치나 설정 없이 브라우저만으로 전문적인 오디오 작업을 수행할 수 있게 되었습니다.
오디오 파형 시각화를 통한 편집 정확도 향상
트랙별 오디오 파형을 직관적으로 시각화하여,
사용자가 구간 편집·볼륨 조절·재생 위치 확인 등을 보다 정밀하게 수행할 수 있도록 개선했습니다.
사용자가 구간 편집·볼륨 조절·재생 위치 확인 등을 보다 정밀하게 수행할 수 있도록 개선했습니다.
음원 로딩 속도 단축
CDN을 적용해 음원 파일의 전송 지연을 최소화하고,
스튜디오 내 트랙 로딩 시간을 크게 단축했습니다.
스튜디오 내 트랙 로딩 시간을 크게 단축했습니다.
핵심 기능
AI 기반 음원 분리 및 믹싱
웹 브라우저에서 AI로 분리된 각 음원 세션을, 실시간으로 분리하고 믹싱할 수 있습니다.
분리된 음원을 듣고, 음원이 배치될 공간을 편집할 수 있는 기능이 포함되어 있습니다.
분리된 음원을 듣고, 음원이 배치될 공간을 편집할 수 있는 기능이 포함되어 있습니다.
음원 믹싱 및 관리
분리된 음원을 개별적으로 듣고 DAW 수준으로 편집할 수 있습니다.
최종 제작한 음원을 체계적으로 관리할 수 있습니다.
최종 제작한 음원을 체계적으로 관리할 수 있습니다.
멤버십 관리 및 결제
더 많은 서비스 혜택을 위한 정기 결제 멤버십을 제공합니다.
프로젝트 상세
설치형 프로그램이 가진 진입장벽을 낮추고,
브라우저만으로 전문적인 오디오 편집을 수행할 수 있는 환경을 제공하는 데 목적을 두었습니다.
IA 기반 서비스 구조 설계부터 UI/UX 디자인, 프론트엔드 개발까지 전 과정을 구현했습니다.
1) 작업 범위
(1) 서비스 기획
• 서비스 IA 구성 및 UX 흐름 정의
• 오디오 작업 플로우에 맞는 화면 구조 설계
• 프로젝트 관리·멤버십·음원자산관리 등 전체 기능 맵 설계
(2) UI/UX 디자인
• 오디오 편집에 최적화된 다크 기반 UI 설계
• 엔지니어·크리에이터 워크플로우 기반으로 편집 화면 UX 구성
• 멤버십 화면, 음원 관리 화면, 프로젝트 리스트 레이아웃 제작
(3) 프론트엔드 개발
• 스튜디오 UI 전면 구현(트랙 UI, waveform 표시, 포지셔닝 UI 등)
• 프로젝트 리스트 및 재생·다운로드 인터페이스 구현
• 멤버십 및 결제 화면 개발
• API 연동 기반의 상태 관리 및 음원 로딩 구조 구현
• 미리듣기·재생 컨트롤러 개발
• Dolby Atmos 변환 프로세스와 연동되는 UI 로직 구현
(4) 기타 개발 지원
• AI 기반 음원 분리(Stem Separation) 기능과의 인터페이스 연계
• CDN 기반 음원 로딩 성능 최적화(로딩 지연 감소)
2) 주요 기능
• 실시간 음원 분리(Stem Separation) UI 제공
• Dolby Atmos 변환을 위한 포지셔닝 편집 화면(Top/Rear View)
• 각 트랙별 재생·음량·위치 조절 인터페이스
• 프로젝트 기반 파일 관리(최근 목록 / 전체 목록)
• 구독형 멤버십 관리 및 결제 히스토리 제공
• 프로젝트 저장·불러오기 기능
• 파일 다운로드 및 미리듣기 기능
3) 주안점
설치 없이, 바로 사용할 수 있는 오디오 스튜디오를 목표로 하며
기존의 무거운 데스크탑 프로그램을 웹에서 자연스럽게 대체하는 UI/UX를 구현하도록 집중했습니다.
• 복잡한 오디오 편집 과정을 최대한 단순하게 시각화
• 실시간 반응 속도를 고려한 경량 UI 설계
• Dolby Atmos 편집 방식에 맞는 공간적 편집 인터페이스 구성
• 사용자 재사용성을 높이기 위한 음원자산관리·멤버십 구조 설계
결과적으로 사용자들은 설치 과정 없이 바로 편집을 시작하고,
트랙 구성부터 멀티채널 배치까지 웹 브라우저에서 빠르게 작업할 수 있는 환경을 갖추게 되었습니다.
브라우저만으로 전문적인 오디오 편집을 수행할 수 있는 환경을 제공하는 데 목적을 두었습니다.
IA 기반 서비스 구조 설계부터 UI/UX 디자인, 프론트엔드 개발까지 전 과정을 구현했습니다.
1) 작업 범위
(1) 서비스 기획
• 서비스 IA 구성 및 UX 흐름 정의
• 오디오 작업 플로우에 맞는 화면 구조 설계
• 프로젝트 관리·멤버십·음원자산관리 등 전체 기능 맵 설계
(2) UI/UX 디자인
• 오디오 편집에 최적화된 다크 기반 UI 설계
• 엔지니어·크리에이터 워크플로우 기반으로 편집 화면 UX 구성
• 멤버십 화면, 음원 관리 화면, 프로젝트 리스트 레이아웃 제작
(3) 프론트엔드 개발
• 스튜디오 UI 전면 구현(트랙 UI, waveform 표시, 포지셔닝 UI 등)
• 프로젝트 리스트 및 재생·다운로드 인터페이스 구현
• 멤버십 및 결제 화면 개발
• API 연동 기반의 상태 관리 및 음원 로딩 구조 구현
• 미리듣기·재생 컨트롤러 개발
• Dolby Atmos 변환 프로세스와 연동되는 UI 로직 구현
(4) 기타 개발 지원
• AI 기반 음원 분리(Stem Separation) 기능과의 인터페이스 연계
• CDN 기반 음원 로딩 성능 최적화(로딩 지연 감소)
2) 주요 기능
• 실시간 음원 분리(Stem Separation) UI 제공
• Dolby Atmos 변환을 위한 포지셔닝 편집 화면(Top/Rear View)
• 각 트랙별 재생·음량·위치 조절 인터페이스
• 프로젝트 기반 파일 관리(최근 목록 / 전체 목록)
• 구독형 멤버십 관리 및 결제 히스토리 제공
• 프로젝트 저장·불러오기 기능
• 파일 다운로드 및 미리듣기 기능
3) 주안점
설치 없이, 바로 사용할 수 있는 오디오 스튜디오를 목표로 하며
기존의 무거운 데스크탑 프로그램을 웹에서 자연스럽게 대체하는 UI/UX를 구현하도록 집중했습니다.
• 복잡한 오디오 편집 과정을 최대한 단순하게 시각화
• 실시간 반응 속도를 고려한 경량 UI 설계
• Dolby Atmos 편집 방식에 맞는 공간적 편집 인터페이스 구성
• 사용자 재사용성을 높이기 위한 음원자산관리·멤버십 구조 설계
결과적으로 사용자들은 설치 과정 없이 바로 편집을 시작하고,
트랙 구성부터 멀티채널 배치까지 웹 브라우저에서 빠르게 작업할 수 있는 환경을 갖추게 되었습니다.
