01
프로젝트 개요
- Next.js 16 기반 음악 브랜드 공식 홈페이지 제작
- Splash Intro와 시네마틱 Hero Music Slider 구성
- 최신 음악·인기 음악 콘텐츠 섹션 구성
- YouTube Data API 기반 영상 콘텐츠 연동
- Stories 콘텐츠와 브랜드 About 페이지 구성
- YouTube 구독 CTA와 협업 문의 동선 구성
- 반응형 UI와 검색엔진 기본 최적화 적용
https://goblin.aimfactory.kr
GOAL
고블린뮤직의 음악, 영상, 스토리와 브랜드 정체성을 하나의 웹사이트에서 보여주고 YouTube 콘텐츠와 협업 문의까지 자연스럽게 연결하는 것
STACK
Next.js 16TypeScriptTailwind CSSYouTube Data API
KEYWORDS
음악 홈페이지 제작뮤직 브랜드 홈페이지YouTube 연동 홈페이지아티스트 홈페이지 제작
PROJECT INTRO
프로젝트 소개
고블린뮤직 홈페이지는 한국의 이야기와 감성을 국악, 조선힙합, K-POP 등 현대적인 음악으로 재해석하는 음악 브랜드의 공식 웹사이트입니다. 단순히 YouTube 영상을 모아 보여주는 형태가 아니라 음악, 스토리, 영상, 브랜드 소개가 하나의 경험으로 이어지도록 구성했습니다.
02
해결해야 했던 문제
- YouTube 채널의 복제 화면처럼 보이지 않으면서 고블린뮤직만의 독립적인 브랜드 경험을 만들어야 했습니다.
- 음악과 영상 콘텐츠가 중심이지만 사이트 전체가 단순한 콘텐츠 목록처럼 보이지 않도록 흐름과 시각적 강약을 설계할 필요가 있었습니다.
- 국악과 한국적인 요소를 과하게 전통적으로 표현하지 않고 현대적인 음악 브랜드 이미지와 조화시켜야 했습니다.
- 새 영상이 추가될 때 홈페이지 운영 부담을 줄일 수 있도록 YouTube 콘텐츠 연동 구조가 필요했습니다.
03
에임팩토리의 작업 방향
- 블랙·차콜·딥 네이비 기반의 다크 시네마틱 UI에 레드 포인트를 적용해 음악 브랜드의 분위기를 구축했습니다.
- 현대적인 디자인을 중심으로 한국적 디테일을 제한적으로 사용해 고블린뮤직의 정체성을 표현했습니다.
- Hero, 최신 음악, 인기 음악, 영상, Stories를 서로 다른 리듬의 섹션으로 구성해 긴 페이지에서도 콘텐츠가 반복적으로 보이지 않도록 설계했습니다.
- YouTube Data API를 연동해 채널 콘텐츠를 홈페이지에서 활용할 수 있는 구조를 구성했습니다.
- About와 협업 문의 동선을 별도로 구성해 콘텐츠 감상 이후 브랜드 이해와 문의로 이어질 수 있도록 했습니다.
04
SEO · 전환 포인트
- 고블린뮤직 브랜드 검색에 대응하는 공식 홈페이지 구조
- 국악·조선힙합·K-POP 등 음악 장르와 브랜드 콘텐츠를 연결하는 메타 정보 구성
- Canonical, Open Graph, Twitter Card, robots, sitemap 적용
- WebSite·Organization JSON-LD 구조화 데이터 적용
- Stories와 About 페이지별 검색 메타 정보 구성
05
결과 및 활용 방향
- 고블린뮤직의 음악·영상·스토리를 통합한 공식 브랜드 채널 구축
- YouTube 콘텐츠와 독립적인 웹 브랜드 경험 연결
- 새 음악과 영상 콘텐츠를 지속적으로 확장할 수 있는 웹 구조 확보
- 브랜드 소개와 협업 문의까지 연결되는 공식 접점 마련
- 에임팩토리 자체 서버에서 운영 가능한 Next.js 서비스 구조 구축
이런 프로젝트에 적합합니다
음악 브랜드 홈페이지아티스트 공식 홈페이지YouTube 연동 홈페이지콘텐츠 크리에이터 홈페이지엔터테인먼트 브랜드 사이트미디어 콘텐츠 홈페이지
무단 복제 및 상업적 재사용 금지 안내
본 제작 사례의 기획, 문구, 화면 구성, 디자인 요소 및 코드 구조는 에임팩토리의 작업 결과물입니다. 무단 복제, 변형 사용, 유사 페이지 제작 및 상업적 재사용을 금지합니다. 침해가 확인될 경우 관련 법령에 따라 필요한 조치를 진행할 수 있습니다.
RELATED WORKS
전체보기관련 제작 사례
START A PROJECT비슷한 프로젝트를
비슷한 프로젝트를
준비하고 계신가요?
업종과 목적에 맞춰 제작형, SEO 월관리형, 고기능 개발형 중 어떤 방향이 맞는지 먼저 정리해드립니다.