회원가입 | 고객센터 |
DESIGNONEX
디자인원엑스
DX서비스N
Q&A
지식공유
DX마켓
쇼핑몰
통계
공지사항
로그인 회원가입
고객센터
SPA

DX STUDIO SPA 뮤직 플레이어

D DX관리자
2026.10.07 23:56(수정됨) 4 0 1

 

DX Studio

DX Studio는 DXCMS 위에서 제작한 음악 스튜디오형 서비스입니다.
 

단순히 음악을 재생하는 테마를 만드는 것이 아니라, DXCMS의 게시판과 회원 시스템을 기반으로 음악 콘텐츠를 구성하고, SPA(Single Page Application) 구조를 적용하여 실제 음악 서비스처럼 동작하도록 구현했습니다.
 

유튜브(YouTube) 링크를 등록하면 음악 콘텐츠로 사용할 수 있으며, 차트와 플레이리스트, 검색, 회원별 음악 관리 등 음악 서비스에 필요한 기능을 하나의 화면 흐름 안에서 사용할 수 있습니다.
 

무엇보다 DX Studio에서 가장 중요하게 생각한 부분은 음악이 재생되는 동안 사용자가 사이트의 다른 기능을 이용하더라도 음악이 끊기지 않는 것입니다.
 

일반적인 웹사이트는 메뉴를 이동할 때마다 새로운 페이지를 불러옵니다. 페이지가 새롭게 로드되면서 기존 JavaScript 상태와 음악 플레이어 역시 초기화될 수 있습니다.
 

DX Studio는 이 부분을 SPA 방식으로 해결했습니다.


SPA(Single Page Application)

DX Studio는 전체 페이지를 계속 새로 불러오는 방식이 아니라, 하나의 페이지를 유지하면서 필요한 데이터만 서버에서 받아 화면을 변경합니다.
 

사용자가 홈에서 음악을 재생한 상태로 차트로 이동하거나, 최신 음악을 확인하고, 게시판을 열고, 검색을 하더라도 페이지 전체를 다시 로드하지 않습니다.
 

필요한 데이터만 JSON 형태로 받아 현재 화면에 필요한 부분을 갱신합니다.

따라서 화면은 계속 변화하지만 음악 플레이어는 동일한 페이지 안에서 유지됩니다.

메뉴 이동과 음악 재생을 분리한 것입니다.
 

이것이 DX Studio에 SPA를 적용한 가장 큰 이유입니다.

단순히 SPA라는 기술을 사용하기 위한 것이 아니라, 음악 서비스에서 가장 중요한 끊김 없는 재생 경험을 만들기 위해 SPA 구조를 선택했습니다.
 

DXCMS 위에서 새로운 서비스를 만들다

DX Studio는 별도의 CMS를 새롭게 만든 것이 아닙니다.

DXCMS가 제공하는 게시판, 회원, 검색, 페이지 등의 기본 기능을 그대로 활용하면서 그 위에 음악 서비스에 필요한 기능을 추가했습니다.
 

즉, DXCMS의 기본적인 CMS 기능을 그대로 사용하면서도 서비스의 목적에 맞게 전혀 다른 형태의 서비스를 만들어낼 수 있다는 것을 보여주는 프로젝트입니다.
 

게시판은 단순한 게시판으로 끝나지 않습니다.

게시판에 등록된 유튜브 콘텐츠를 음악 데이터로 활용하고, 이를 차트와 플레이리스트로 연결하며, 회원별 음악 관리 기능까지 확장했습니다.
 

하나의 CMS가 콘텐츠 관리에만 머무르는 것이 아니라 서비스의 기반 프레임워크로 활용될 수 있다는 것을 보여주는 사례이기도 합니다.
 

음악 서비스에 필요한 기능

DX Studio에는 음악 서비스의 특성에 맞춰 다양한 기능을 구성했습니다.

유튜브 링크를 기반으로 음악을 등록하고 전용 플레이어에서 재생할 수 있으며, 최신 음악과 전체 음악을 확인할 수 있습니다.

주간·월간·전체 및 좋아요 기반의 차트 시스템을 구성하고, 회원별 플레이리스트를 관리할 수 있도록 했습니다.

또한 기존 게시판에 등록되어 있는 음악 콘텐츠를 가져와 별도의 음악 데이터로 활용할 수 있도록 구성했습니다.

다크 모드와 라이트 모드를 지원하며, 사용자가 선택한 환경도 유지할 수 있도록 했습니다.
 

이러한 기능들은 각각 독립적으로 존재하는 것이 아니라 SPA 구조를 통해 하나의 서비스 안에서 유기적으로 연결됩니다.
 

핵심은 기술이 아니라 경험입니다

SPA라는 기술 자체가 특별한 것은 아닙니다.

중요한 것은 그 기술을 어디에 어떻게 사용하는가입니다.
 

DX Studio에서는 SPA를 이용해 음악 플레이어가 사이트 전체의 이동과 별개로 계속 유지되도록 만들었습니다.

사용자는 메뉴를 클릭하고 게시판을 확인하고 검색을 하면서도 음악을 계속 들을 수 있습니다.

페이지가 이동하는 것이 아니라 서비스 안에서 화면이 전환되는 느낌을 만들었습니다.

이러한 구조를 통해 일반적인 CMS 홈페이지와는 다른 사용자 경험을 구현할 수 있었습니다.


DX Studio가 보여주는 것

DX Studio는 DXCMS의 가능성을 보여주기 위한 하나의 실제 프로젝트입니다.

DXCMS는 단순히 게시판을 설치하고 홈페이지를 만드는 용도로만 사용할 수 있는 CMS가 아닙니다.
 

게시판과 회원 시스템을 기반으로 필요한 기능을 확장하고, SPA와 같은 웹 애플리케이션 구조를 적용하여 하나의 독립적인 서비스를 만들어낼 수 있습니다.
 

이번 DX Studio에서는 그 가능성을 음악 서비스라는 형태로 구현했습니다.

DXCMS + SPA + Music Service
 

그리고 그 결과물이 바로 DX Studio입니다.

단순한 테마의 데모가 아니라, DXCMS 위에서 실제 서비스를 구현할 수 있다는 것을 보여주는 포트폴리오입니다.

댓글1

D
DX관리자 2026.10.07 23:59

DX Studio 사용자 매뉴얼

DX Studio는 DXCMS를 기반으로 제작된 음악 스튜디오형 서비스입니다.

YouTube 음악을 이용하여 음악을 재생하고, 원하는 곡을 재생목록에 담거나 개인 플레이리스트를 만들 수 있습니다. 차트와 장르, 아티스트, 검색 기능을 이용하여 음악을 탐색할 수도 있습니다.

무엇보다 DX Studio는 음악을 재생한 상태에서 사이트의 다른 메뉴를 이용하더라도 음악이 계속 재생되는 것이 특징입니다.



1. DX Studio 시작하기

DX Studio에 접속하면 음악을 탐색할 수 있는 홈 화면이 나타납니다.

홈 화면에서는 이퀄라이저가 적용된 음악 스테이지와 함께 최신 음악, 음악 목록, 게시글 등의 콘텐츠를 확인할 수 있습니다.

음악을 재생하려면 원하는 음악을 선택하면 됩니다.

음악이 재생되면 화면 하단에 플레이어가 나타나며, 이후 다른 메뉴로 이동하더라도 음악은 계속 재생됩니다.

즉, 음악을 틀어놓은 상태에서 차트를 확인하거나 게시판을 이용하고 검색을 하더라도 음악을 중단할 필요가 없습니다.



2. 음악 플레이어 사용하기

DX Studio의 음악 플레이어는 화면 하단에 고정되어 있습니다.

플레이어에서는 현재 재생 중인 음악을 확인하고 재생, 일시정지, 이전 곡, 다음 곡, 셔플, 반복, 음량 등을 조절할 수 있습니다.


재생 / 일시정지

▶ 버튼을 누르면 음악을 재생하거나 일시정지할 수 있습니다.


이전 곡 / 다음 곡

◀◀ 버튼을 누르면 이전 음악으로 이동하고, ▶▶ 버튼을 누르면 다음 음악으로 이동합니다.


셔플

🔀 버튼을 이용하면 재생목록의 음악을 무작위 순서로 재생할 수 있습니다.


반복

🔁 버튼을 누르면 반복 재생 방식을 변경할 수 있습니다.

반복하지 않기, 전체 반복, 현재 곡 반복 순서로 변경됩니다.


음량 조절

🔊 버튼을 이용하여 음소거하거나 원하는 음량으로 조절할 수 있습니다.


재생 위치 이동

플레이어의 진행 바를 클릭하거나 드래그하면 원하는 재생 위치로 바로 이동할 수 있습니다.



3. 재생목록 사용하기

현재 듣고 싶은 음악을 모아 하나의 재생목록으로 만들 수 있습니다.

음악 목록에서 원하는 곡을 선택하고 재생목록에 추가하면 됩니다.

플레이어의 앨범아트 또는 목록 버튼을 클릭하면 재생목록 패널을 열 수 있습니다.

재생목록에는 최대 3,000곡을 담을 수 있으며 브라우저에 저장됩니다.

재생목록 패널에서는 다음과 같은 기능을 사용할 수 있습니다.

  • 현재 재생목록 확인

  • 음악 추가

  • 재생목록 안에서 음악 검색

  • 현재 재생목록 저장

  • 재생목록 전체 삭제

현재 재생목록을 저장하면 나중에 다시 사용할 수 있는 개인 플레이리스트로 관리할 수 있습니다.



4. 음악 이어듣기

DX Studio는 마지막으로 듣던 음악과 재생 위치를 기억합니다.

음악을 듣다가 브라우저를 닫더라도 다음에 다시 접속하면 마지막으로 듣던 곡과 재생 위치를 복원할 수 있습니다.

로그인하지 않은 상태에서도 사용할 수 있습니다.

따라서 별도의 회원가입을 하지 않아도 음악을 이어서 감상할 수 있습니다.



5. 내 플레이리스트 만들기

로그인한 회원은 자신만의 플레이리스트를 만들 수 있습니다.

상단 메뉴에서 내 음악으로 이동한 다음 플레이리스트 만들기를 선택합니다.

플레이리스트의 이름과 설명을 입력하고 원하는 유형과 공개 여부를 설정한 뒤 저장하면 됩니다.

공개 플레이리스트로 설정하면 다른 사용자에게도 공개할 수 있습니다.


음악 추가하기

음악 카드나 음악 목록에서 ⋯ 더보기 버튼을 누른 후 플레이리스트에 추가를 선택하면 원하는 플레이리스트에 음악을 넣을 수 있습니다.

현재 재생목록에 여러 곡을 담아 놓은 경우에는 재생목록의 저장 기능을 이용하여 한 번에 플레이리스트로 저장할 수도 있습니다.



6. 음악 찾기

DX Studio에서는 여러 가지 방법으로 원하는 음악을 찾을 수 있습니다.


최신 음악

최근 등록된 음악을 확인할 수 있습니다.

새롭게 추가된 음악을 가장 빠르게 확인하고 싶을 때 이용하면 됩니다.


전체 곡

DX Studio에 등록된 전체 음악을 확인할 수 있습니다.

정렬, 장르 필터, 검색 등을 이용하여 원하는 음악을 찾을 수 있으며 음악이 많아져도 목록을 계속 탐색할 수 있도록 구성되어 있습니다.


아티스트

특정 아티스트를 선택하면 해당 아티스트의 음악을 모아서 확인할 수 있습니다.


장르

댄스, 발라드, 힙합 등 원하는 장르를 선택하여 음악을 찾아볼 수 있습니다.


검색

검색 기능을 이용하면 곡 제목, 아티스트, 장르를 한 번에 검색할 수 있습니다.



7. 차트 이용하기

DX Studio에서는 다양한 기준으로 음악 차트를 확인할 수 있습니다.

차트 메뉴에서 원하는 차트를 선택하면 됩니다.


주간 차트

최근 7일 동안 많이 재생된 음악을 확인할 수 있습니다.


월간 차트

최근 30일 동안 많이 재생된 음악을 확인할 수 있습니다.


전체 차트

누적 재생 횟수를 기준으로 음악을 확인할 수 있습니다.


좋아요 차트

회원들의 좋아요를 기준으로 인기 음악을 확인할 수 있습니다.


최신 차트

최근 등록된 음악을 기준으로 확인할 수 있습니다.

재생 횟수는 동일 사용자가 같은 음악을 짧은 시간 동안 반복해서 재생하는 경우를 그대로 집계하지 않도록 제한되어 있습니다.



8. 음악 상세 보기

음악 카드를 클릭하면 해당 음악의 상세 화면으로 이동합니다.

음악 상세 화면에서는 다양한 정보를 확인할 수 있습니다.

  • YouTube 영상

  • 좋아요

  • 별점

  • 한 줄 평가

  • 가사

  • 관련 음악

별점은 1점부터 5점까지 평가할 수 있으며, 등록된 음악에 가사가 있다면 가사도 함께 확인할 수 있습니다.

좋아요와 평가 기능은 회원으로 로그인한 상태에서 사용할 수 있습니다.



9. 보관함 이용하기

보관함에서는 내가 좋아요한 음악과 최근 재생한 음악을 확인할 수 있습니다.

자주 듣는 음악을 다시 찾거나 최근에 들었던 음악을 다시 재생하고 싶을 때 편리하게 사용할 수 있습니다.

보관함 기능은 로그인한 회원에게 제공됩니다.



10. 게시판 이용하기

DX Studio는 음악뿐만 아니라 DXCMS의 기존 게시판 기능도 함께 사용할 수 있습니다.

게시판을 클릭하여 글을 읽거나 글을 작성하고 댓글을 이용할 수 있습니다.

좋아요와 신고 등의 게시판 기능도 기존 DXCMS의 회원 권한에 따라 사용할 수 있습니다.

특히 DX Studio에서는 음악을 재생하면서 게시판을 이용할 수 있습니다.

게시판으로 이동하더라도 전체 페이지를 다시 불러오지 않기 때문에 현재 재생 중인 음악은 계속 이어집니다.

음악을 들으면서 게시판을 이용하는 것.

이것이 DX Studio가 일반적인 게시판형 사이트와 다른 부분입니다.



11. 다크 모드와 라이트 모드

DX Studio는 다크 모드와 라이트 모드를 지원합니다.

화면의 모드 전환 버튼을 이용하여 원하는 화면 환경을 선택할 수 있습니다.

선택한 모드는 기억되기 때문에 다음에 다시 접속하더라도 원하는 화면 환경을 유지할 수 있습니다.



12. 모바일에서도 사용하기

DX Studio는 모바일 환경에서도 사용할 수 있습니다.

음악을 재생한 상태에서 다른 화면으로 이동할 수 있으며 하단 플레이어를 통해 음악을 계속 제어할 수 있습니다.

모바일 환경에서도 재생, 일시정지, 다음 곡, 이전 곡, 반복, 셔플, 음량 조절 등의 주요 기능을 이용할 수 있습니다.



13. DX Studio의 가장 큰 특징

DX Studio의 가장 큰 특징은 음악을 재생하면서 사이트 전체를 이용할 수 있다는 것입니다.

일반적인 웹사이트에서는 페이지를 이동할 때마다 화면 전체가 새롭게 로드되면서 음악이 중단될 수 있습니다.

DX Studio는 SPA(Single Page Application) 구조를 적용하여 화면의 필요한 부분만 변경합니다.

따라서 음악을 재생한 상태에서

홈 → 차트 → 음악 상세 → 검색 → 게시판 → 내 음악

순서로 이동하더라도 음악 플레이어는 계속 유지됩니다.

사용자는 여러 페이지를 이동하는 것처럼 느끼지만, 실제로는 하나의 서비스 안에서 화면만 자연스럽게 전환됩니다.

이러한 구조를 통해 DX Studio는 음악 감상과 웹사이트 이용을 하나의 경험으로 연결했습니다.



14. 처음 사용하는 분들을 위한 추천 방법

DX Studio를 처음 이용한다면 다음과 같은 순서로 사용해 보시는 것을 권장합니다.


① 홈에서 음악 선택

원하는 음악을 선택하여 재생합니다.

② 재생목록에 음악 추가

마음에 드는 음악을 재생목록에 추가합니다.

③ 여러 음악을 담아보기

원하는 음악을 계속 추가하여 나만의 재생목록을 만들어 봅니다.

④ 플레이리스트 저장

현재 재생목록을 하나의 플레이리스트로 저장합니다.

⑤ 차트 둘러보기

주간, 월간, 전체, 좋아요 차트를 이용하여 인기 음악을 찾아봅니다.

⑥ 검색과 장르 이용

원하는 음악이나 아티스트를 검색하고 장르별 음악도 탐색해 봅니다.

⑦ 음악을 들으면서 게시판 이용

음악을 그대로 재생해 놓은 상태에서 게시판과 다른 메뉴를 이용해 봅니다.


DX Studio의 핵심 기능을 가장 쉽게 경험할 수 있는 방법입니다.



DX Studio

DX Studio는 단순한 음악 테마가 아닙니다.

DXCMS의 게시판과 회원 시스템을 기반으로 음악 서비스에 필요한 기능을 결합하고, SPA 기술을 적용하여 실제 음악 서비스와 같은 사용자 경험을 구현한 프로젝트입니다.

음악을 듣고, 찾고, 저장하고, 공유하고, 다시 듣는 모든 과정을 하나의 서비스 안에서 자연스럽게 연결했습니다.

음악을 틀어놓고 사이트를 자유롭게 이용해 보세요.

그것이 DX Studio를 가장 제대로 경험하는 방법입니다.

로그인 후 댓글을 작성할 수 있습니다.
51
전체 회원
1,556
전체 게시글
3,077
전체 댓글
1
오늘 방문
55,644
전체 방문
0
현재 접속
인기글 7일 이내
최신글
최신댓글
내 플레이리스트
플레이리스트가 비어있습니다
스튜디오 게시판에서
플레이리스트에 담기 버튼을
눌러보세요
목록 로그인
목록