Minerva - 미네르바

프로젝트 배경

Minerva는 음악 큐레이션 채널 네트워크와 브랜드 캠페인을 연결하는 광고주 리드 중심 웹사이트입니다.

단순히 보유 채널을 나열하는 소개 페이지가 아니라, 광고주가 “이 네트워크가 우리 캠페인과 맞는가”를 빠르게 판단하고 문의까지 이어질 수 있도록 설계했습니다. 동시에 음악 크리에이터가 네트워크에 합류할 수 있는 지원 흐름과, 내부 운영자가 문의를 관리할 수 있는 어드민 구조까지 포함했습니다.

핵심 과제는 세 가지였습니다.

• 광고주 문의 전환을 가장 우선순위에 둔 정보 구조 설계

• 보유 음악 채널의 감도와 신뢰도를 시각적으로 전달

• 다크하고 시네마틱한 브랜드 무드 안에서 LP, 턴테이블, 메탈릭 레드라는 상징을 일관되게 사용하는 것

UX 설계 철학 — 신뢰에서 문의까지 이어지는 전환 흐름

Minerva의 사용자 여정은 광고주가 브랜드를 처음 인지하고, 보유 계정을 확인한 뒤, 문의를 남기는 흐름에 집중해 설계했습니다.

불필요한 브랜드 설명이나 장식적인 섹션을 줄이고, 첫 화면부터 음악 큐레이션 네트워크라는 정체성이 바로 느껴지도록 구성했습니다.

1단계: 랜딩 — 브랜드 무드 진입

첫 화면은 풀스크린 턴테이블 이미지를 중심으로 구성했습니다.

LP 그루브와 바늘의 질감이 보이는 어두운 장면을 배경으로 사용해, Minerva가 다루는 영역이 단순 광고 매체가 아니라 음악적 감도와 큐레이션이라는 점을 직관적으로 전달합니다.

메인 카피는 짧게 유지하고, 광고주 문의와 보유 계정 보기 두 가지 CTA만 배치해 사용자의 다음 행동을 명확하게 만들었습니다.

2단계: 보유 계정 — 채널 신뢰 확보

보유 계정 페이지는 플랫폼 탭과 계정 카드 그리드로 구성했습니다.

각 계정은 일반 프로필 카드가 아니라 앨범 커버와 LP 오브젝트가 겹쳐진 형태로 표현했습니다. 이를 통해 계정 목록 자체가 음악 컬렉션처럼 보이도록 설계했습니다.

카드 클릭 시 실제 YouTube 또는 Instagram 채널로 이동하게 하여, 광고주가 네트워크의 실체를 직접 확인할 수 있게 했습니다.

3단계: 문의 — 목적별 리드 수집

문의 흐름은 광고주 문의와 크리에이터 지원으로 분리했습니다.

광고주 문의는 브랜드/제품 광고, 음원 광고, 기타 문의 등 캠페인 목적을 세분화했고, 각 기타 항목에는 직접 입력란을 붙여 실제 문의 상황에 대응할 수 있게 했습니다.

크리에이터 지원은 이름, 채널명, 플랫폼, 채널 링크, 자기소개, 합류 이유 등 네트워크 합류 판단에 필요한 항목 중심으로 구성했습니다.

4단계: 어드민 — 내부 운영 준비

문의 데이터 관리를 위한 어드민 화면도 함께 설계했습니다.

초기에는 프로토타입용 로컬 관리 구조였지만, 이후 Vercel 서버리스 API 기반의 어드민 인증 구조로 개선했습니다. 관리자 비밀번호를 클라이언트 코드에서 제거하고, 서버 환경변수 기반 해시 검증과 HttpOnly 세션 쿠키를 사용하는 방식으로 보안 수준을 높였습니다.

디자인 시스템

다크 시네마틱 테마

Minerva는 전체적으로 near-black 기반의 다크 테마를 사용했습니다.

음악, 밤, 레코드, 스튜디오, 턴테이블 같은 이미지를 자연스럽게 떠올리게 하는 방향입니다. 밝은 배경의 일반적인 SaaS 사이트보다 더 감각적이고, 음악 큐레이션 브랜드에 가까운 인상을 주도록 설계했습니다.

메탈릭 레드 포인트

메인 포인트 컬러는 메탈릭 레드 계열로 설정했습니다.

CTA 버튼, 브랜드 마크, 활성 상태, 핵심 강조 요소에만 제한적으로 사용해 과한 장식성을 피했습니다. Ferrari 레퍼런스의 날카로운 고급감은 차용하되, 자동차 브랜드처럼 보이지 않도록 LP와 턴테이블 질감으로 재해석했습니다.

LP 오브젝트 기반 카드 시스템

보유 계정 카드는 앨범 커버와 LP판을 결합한 구조로 설계했습니다.

프로필 이미지를 단순 원형 아바타로 쓰지 않고, 음악 오브젝트처럼 보이게 만들어 사이트의 핵심 정체성과 연결했습니다.

핵심 성과

Minerva는 광고주 전환, 크리에이터 지원, 내부 운영이라는 세 가지 목적을 하나의 흐름 안에 담은 웹사이트입니다.

• 풀스크린 턴테이블 히어로로 브랜드의 음악적 무드를 첫 화면에서 즉시 전달했습니다.

• 보유 계정 목록을 앨범/LP 모티프로 구성해 음악 큐레이션 네트워크의 정체성을 시각화했습니다.

• 광고주와 크리에이터 문의 흐름을 분리해 목적별 리드 수집이 가능하도록 설계했습니다.

• 모바일과 데스크톱 모두에서 폼, 계정 카드, 푸터 구조가 안정적으로 보이도록 반응형 레이아웃을 정리했습니다.

• Vercel 배포를 고려해 서버리스 어드민 인증, 보안 헤더, 환경변수 기반 설정 구조를 준비했습니다.

• React/Vite 기반으로 빠르게 로딩되는 경량 프론트엔드를 구현하고, 향후 Supabase 연동이 가능하도록 데이터 구조를 정리했습니다.