Project Overview
볼빨간사춘기 팬사이트로 기획·디자인·프론트엔드·백엔드를 모두 담당했습니다. 앨범·뮤직비디오·화보·소식과 팬 참여 공간까지 아티스트의 활동이 늘어날수록 콘텐츠가 함께 쌓이는 사이트를 처음부터 끝까지 만들었습니다.
Key Contributions
1. 콘텐츠가 많은 팬사이트의 정보 구조 기획
Problem앨범, 뮤직비디오, 화보, 공지, 팬 게시판이 늘어나면서 원하는 콘텐츠에 닿는 경로가 길어졌고, 활동 시기마다 메인이 어수선해졌습니다.
Solution콘텐츠 유형별 섹션과 공통 목록 컴포넌트를 정의하고, 메인은 최신 앨범·영상·소식으로 바로 진입하는 구조로 배치했습니다. 활동 시기에는 컴백 콘텐츠가 자연스럽게 앞으로 나오고, 비활동기에는 아카이브가 중심이 되도록 메인의 우선순위를 콘텐츠 상태에 따라 바꿀 수 있게 기획했습니다.
Result콘텐츠가 늘어나도 구조를 바꾸지 않고 담을 수 있는 정보 설계를 만들었습니다.
2. 앨범과 영상 페이지 디자인
Task아트워크와 영상이 주인공이 되는 상세 페이지
Insight밴드의 앨범은 저마다 색이 뚜렷합니다. 앨범 상세는 아트워크의 색을 배경에 반영해 앨범마다 다른 분위기를 내고, 트랙리스트와 감상 링크를 정리해 듣는 행동으로 바로 이어지게 했습니다. 영상 페이지는 재생을 방해하는 요소를 걷어낸 단순한 구성으로 만들었습니다.
Result같은 템플릿을 쓰면서도 앨범마다 다른 표정을 가진 상세 페이지가 되었습니다.
3. 팬 참여 공간과 커뮤니티
Description팬들이 응원 메시지를 남기고 소식을 나누는 참여 공간을 설계했습니다.
Approach게시판 형태는 익숙하게 유지하되 아티스트 콘텐츠와 팬 콘텐츠의 시각적 구분을 분명히 해, 공식 정보와 팬의 목소리가 섞이지 않게 했습니다. 운영자가 관리해야 하는 글은 관리자에서 바로 처리할 수 있게 연결했습니다.
4. 관리 기능과 반응형 구현
Solution앨범·영상·소식·사진을 관리자에서 등록하면 사이트에 같은 디자인으로 반영되는 백엔드와, 모바일 우선 반응형 프론트엔드를 직접 구축했습니다. 팬사이트 방문의 대부분이 모바일이라는 점을 감안해 작은 화면에서의 이미지 크기와 터치 영역을 먼저 설계하고 데스크톱으로 확장했습니다.
Process
와이어프레임으로 정보 구조를 합의한 뒤 디자인과 개발을 순서대로 진행했습니다. 발매 일정에 맞춰 운영자가 콘텐츠를 올리는 흐름을 관리자에서 먼저 검증했고, 운영 방법을 정리해 전달하며 마무리했습니다.
Outcome
기획부터 백엔드까지 하나로 이어 팬의 요구를 풀어낸 프로젝트입니다.
from SEOUL, 