K-POP PULSE를 만들던 기록에는 아티스트 페이지가 해당 아티스트의 전용 홈페이지처럼 느껴져야 한다는 요구가 남아 있다. 이름과 사진을 바꾸는 정도로는 그 요구를 다 설명할 수 없다. 내가 보고 있는 대상의 새 소식, 볼거리, 다음 일정과 지난 기록이 이곳에 모여 있다는 맥락이 필요했다.

나는 이 페이지를 디렉터리에서 잠깐 읽고 나가는 소개 카드보다, 관심 있는 대상을 계속 찾아올 수 있는 목적지로 생각했다. 당시의 기획·수정 기록과 지금 공개 HTML의 구성 항목을 대조하면서, 그 느낌을 만들기 위해 정보와 탐색을 어떻게 나누었는지 설명해 보려 한다. 독자의 실제 반응이나 재방문 성과를 측정했다는 이야기는 아니다.

소개 카드와 목적지 페이지는 해결할 질문이 다르다

디렉터리에서는 내가 찾는 대상이 맞는지 확인하고 다음 화면으로 이동하면 된다. 대상의 페이지에서는 그 뒤에 이어질 질문을 해결해야 한다. 무엇이 새로 나왔는지, 지금 볼 영상은 무엇인지, 앞으로 어떤 일정이 있는지, 처음이라면 무엇부터 이해할지까지 질문이 늘어난다.

그래서 나는 대상의 이름 아래에 같은 소개문만 반복하는 구조로 생각하지 않았다. 페이지를 들어온 이유에 맞는 정보가 연결되어야 했다. 다른 업종에서도 제품 목록의 카드와 특정 제품의 사용·업데이트·지원 내용을 모은 페이지는 역할이 다르다. 카드가 자세해졌다는 이유만으로 목적지의 역할까지 완성되는 것은 아니다.

공통 사이트 안에서 지금 보고 있는 대상을 계속 알려 준다

전체 사이트의 메뉴는 다른 소식이나 아티스트로 옮겨 가는 통로다. 대상 페이지의 제목과 맥락은 지금 어느 공간을 읽고 있는지 알려 준다. 둘 중 하나를 없애면 사이트 전체를 탐색하기 어렵거나, 내부 메뉴를 누르는 동안 현재 대상의 맥락이 흐려질 수 있다.

나는 모든 페이지를 서로 다른 홈페이지 파일로 따로 만드는 대신 공통 탐색과 대상별 내용을 함께 두는 방향을 택했다. 데이터와 공통 구조를 쓰되 지금 선택한 대상은 제목·정보 묶음·메뉴 표시에서 읽히게 한다. 이름을 크게 쓰는 일과 그 이름에 해당하는 자료가 실제로 연결되는 일을 같이 봐야 한다.

하나의 대상 안에도 정보의 시간이 여러 개다

지금 공개된 대상 페이지의 HTML에서는 공식 영상, 쇼츠, 관련 출연, 최신 소식, 확정 일정, 지난 영상과 기록, 입문 가이드 같은 구성 항목을 확인했다. 이 항목들은 모두 같은 대상을 설명하지만 방문자가 찾는 시점은 다르다. 최신 항목은 지금을, 일정은 앞으로를, 아카이브는 지난 작업을, 가이드는 이해의 출발점을 담당한다.

이것을 하나의 최신순 목록에만 넣으면 일정이 기사 사이에 묻히거나 오래된 설명이 쓸모없는 옛글처럼 보일 수 있다. 반대로 모든 정보를 첫 화면에 크게 펼치면 목적지에 도착하자마자 방향을 잃기 쉽다. 나는 시간과 역할이 다른 자료를 별도의 읽기 자리로 나누는 것이 중요하다고 본다.

처음 온 독자와 이미 아는 독자가 같은 길을 걸을 필요는 없다

대상을 이미 아는 사람은 새 영상과 변화만 빨리 찾고 싶을 수 있다. 처음 방문한 사람은 낯선 표기와 활동 방식부터 이해해야 할 수 있다. 최신 소식 옆에 입문 설명이 있다고 두 독자의 질문이 저절로 해결되는 것은 아니지만, 한쪽이 다른 쪽의 읽기를 대신하지 않도록 통로를 남길 수 있다.

대상 페이지에서 입문 가이드를 별도로 연결하는 판단은 이런 차이에서 읽을 수 있다. 홈페이지를 만들려는 사람에게도 같은 질문을 하고 싶다. 처음 보는 고객에게 필요한 설명과 이미 사용 중인 고객에게 필요한 변경·지원 정보를 어디서 나눌 것인가? 제품과 서비스의 이름이 같아도 들어온 이유는 다를 수 있다.

공통 템플릿은 개별 공간의 반대말이 아니다

프로젝트의 당시 최적화 기준에는 아티스트가 같게 대우받아야 한다는 조건이 남아 있다. 트래픽이 적은 대상을 성능 개선이라는 이유로 덜 그리는 방향으로 가지 않겠다는 기준이다. 같은 틀을 유지하는 것은 유지보수의 선택이면서 대상을 다루는 태도이기도 했다.

대상마다 화면을 따로 복제하면 한 페이지에만 수정이 들어가거나 같은 필드가 다른 뜻으로 쓰일 수 있다. 나는 공통으로 고칠 구조와 대상의 실제 데이터로 달라질 내용을 나누는 쪽을 선호한다. 데이터가 적은 페이지를 그럴듯하게 채우기 위해 확인되지 않은 소식이나 숫자를 만드는 일은 하지 않는다.

다른 홈페이지에 적용한다면 구조부터 가져간다

아래는 이 판단을 설명하려고 새로 적은 HTML 골격이다. 당시 프로젝트의 템플릿을 복원한 코드가 아니며 영상 재생이나 데이터를 가져오는 기능도 없다. 대상의 이름, 최신 변화, 예정 정보, 지난 기록, 입문 설명의 역할을 분리하는 출발점으로 쓸 수 있다.

음악 아티스트를 제품이나 장소, 서비스로 바꾸어도 질문은 남는다. 사용 설명이 중요한 제품은 입문 안내를 더 앞에 둘 수 있고, 일정이 없는 대상이라면 예정 영역을 생략할 수 있다. 공통 틀을 가져간다는 말은 빈 칸까지 모두 채우라는 뜻이 아니다. 실제로 필요한 항목과 자료가 있는 항목을 함께 판단해야 한다.

코드와 구현 살펴보기

새 설명용 HTML 골격. 실제 데이터·재생·상태 저장은 포함하지 않는다.

<article class="entity-home">
  <header><p>Artist / Product / Place</p><h1>One destination</h1></header>
  <section aria-labelledby="latest"><h2 id="latest">The latest update</h2></section>
  <section aria-labelledby="upcoming"><h2 id="upcoming">Upcoming dates</h2></section>
  <section aria-labelledby="archive"><h2 id="archive">Past work and records</h2></section>
  <section aria-labelledby="start"><h2 id="start">New here? Start with a guide</h2></section>
</article>

페이지가 생긴 것과 그 공간이 잘 작동하는 것은 다르다

이번 대조에서는 공개 HTML에 어떤 항목이 있고 탐색 목록이 어떻게 출력되어 있는지를 확인했다. 현재 모든 영상의 재생, 작은 화면에서의 고정 영역, 실제 사용자 반응까지 새로 검사한 것은 아니다. 이런 동작을 확인할 때는 페이지 제목만 보지 말고 자료가 있는 대상과 적은 대상을 함께 골라야 한다.

나는 실제 적용 후 대상 바꾸기, 일정 확인, 오래된 기록 찾기, 입문 설명으로 이동하기를 각각 해 보는 순서를 권한다. 작은 화면에서도 현재 대상을 잃지 않는지, 빈 영역이 약속하지 않은 정보를 암시하는지도 본다. 전용 홈페이지 같은 느낌은 개별 장식보다 이 질문들을 한 공간에서 이어서 해결할 수 있는가에서 시작한다.