케이팝 퍼블리싱 회사 사이트 — jyppub.com

인트로부터 달랐다

2021년 1월, JYP 계열 퍼블리싱 회사 사이트 작업을 시작했습니다. 레이어의 슬키, 김주황과 함께했습니다. JYP 측 담당자와 레이어, 이온디가 한 채팅방에서 소통하는 구조였습니다.

처음부터 명확했습니다. 이 사이트는 인터랙션이 핵심이었습니다.

사이트에 처음 진입하면 JYP 로고가 나타나고, 오른쪽 텍스트 세 줄이 간격을 두고 스르륵 등장합니다. 그런 뒤에야 메인으로 들어가는 방식이었습니다. 단순한 로딩 화면이 아니라, 브랜드의 첫인상을 만드는 인트로였습니다.

커버플로우와 애니메이션

페이지 구성은 다음과 같았습니다:

• 인트로 (진입 애니메이션)
• 메인 페이지
• 크리에이터(아티스트) 상세 페이지
• 뮤직 상세 페이지
• 사이트맵

뮤직 목록은 커버플로우 방식으로 가로 스크롤되도록 구성했습니다. jQuery 기반 커버플로우를 브라우저 호환성에 맞게 테스트하고 구현했습니다.

햄버거 메뉴도 그냥 열리고 닫히는 방식이 아니었습니다. 클릭 시 그 자리에서 애니메이션으로 X 버튼으로 변환되는 방식이었습니다. 레이어에서 레퍼런스 사이트를 공유하면서 방향을 맞춰갔습니다.

뮤직 상세 페이지에서는 스크롤하면 앨범명 위치가 자동으로 이동하는 스크롤 연동 기능도 들어갔습니다.

디자인 컨펌을 기다리며

이 프로젝트에서 가장 힘들었던 부분은 기술이 아니었습니다. 디자인 컨펌이 지연되는 상황에서 개발을 진행해야 했던 것이었습니다.

PC 버전 디자인이 완료됐다는 말을 듣고 개발에 들어갔는데, 작업을 시작해보니 기획서에 빠진 부분들이 계속 나왔습니다. 추가 확인을 요청했지만 회신에 시간이 걸렸습니다. 퍼블리싱이 마지막 단계인 상황에서 2월, 3월을 넘기며 작업이 이어졌습니다.

그 경험에서 하나를 배웠습니다. 디자인이 확정된 페이지부터 순서대로 개발에 들어가고, 변경 가능성이 있는 부분은 나중에 처리하는 것이 효율적이라는 것이었습니다. 지금도 레이어와 작업할 때 이 방식을 따릅니다.

결과

JYP라는 브랜드에 걸맞게, 화면 곳곳에 인터랙션이 있는 사이트가 완성됐습니다. 레이어의 디자인 감각과 이온디의 개발이 맞물린 결과물이었습니다.

레이어(lllayer.com)와 협업한 프로젝트입니다.