첫 화면에 무엇을 크게 놓을지 정하는 일은 콘텐츠를 많이 보여 주는 것과 다른 판단이었다. K-POP PULSE 공개 홈에는 큰 영상 영역, Trending Now와 Comeback Watch, 쇼츠, 최신 소식과 해설 연결이 함께 있다. 나는 이 화면을 서로 다른 질문이 만나는 입구로 읽는다.

처음 온 사람이 무엇을 볼지와 관심 있는 사람이 어떤 일정을 확인할지는 다를 수 있다. 같은 크기와 같은 순서로 모두 펼치면 우선순위가 흐려진다. 이번 글에서는 실제로 확인한 화면의 구성과 초기 요청을 바탕으로 그 정보의 역할을 설명한다.

주목할 콘텐츠와 계속 참고할 정보를 나눈다

큰 영상 영역은 지금 주목할 내용을 보여 주는 자리로 읽을 수 있다. 일정 영역은 다음 날짜를 확인할 때 계속 참고하는 역할이다. 둘을 함께 두는 것과 둘을 같은 목적으로 다루는 것은 다르다. 영상이 바뀌어도 다가오는 일정은 필요할 수 있다.

나는 첫 화면에서 화면을 크게 차지할 항목과 작아도 반복해서 찾는 항목을 함께 판단한다. 크기만으로 중요성을 정하면 조용하지만 유용한 정보가 사라질 수 있다. 반대로 모든 정보를 크게 펼치면 먼저 읽어야 할 일이 보이지 않을 수 있다.

최근 소식과 앞으로의 날짜는 다른 시간을 읽는다

최신 소식은 게시된 시점으로 읽지만 컴백 일정은 앞으로 일어날 시점이 중요하다. 오래전에 발표한 일정이라도 아직 다가오고 있다면 입구에 남아 있을 이유가 있다. 나는 정보의 시간을 한 가지 정렬로 합치지 않는 판단이 필요하다고 본다.

제품 사이트에서도 새 공지와 예약 일정, 서비스 변경과 신청 마감은 다르다. 동일한 대상의 정보라도 방문자가 당장 필요한 질문에 따라 자리가 달라질 수 있다. 날짜의 역할과 표시 상태를 함께 정하면 오래된 발표가 여전히 유용한 이유를 설명하기 쉽다.

영상의 표시와 실제 재생을 별도로 확인한다

검수한 화면에는 큰 영상 영역과 소리를 켜는 안내가 있었다. 그 표시를 관찰했다는 사실만으로 영상 재생과 소리, 다음 영상 전환이 모두 작동한다고 말할 수는 없다. 나는 화면의 약속과 실제 실행의 확인을 나누어 기록한다.

다른 홈페이지에 영상을 놓는다면 재생 전 어떤 정보를 읽을 수 있는지, 사용자가 소리를 선택할 수 있는지, 재생이 되지 않아도 다음 자료로 갈 수 있는지 확인해야 한다. 이 글에서는 현재 원본 사이트의 모든 재생 환경을 새로 시험한 결과로 소개하지 않는다.

인기 영역의 이름이 알고리즘의 증거는 아니다

Trending Now라는 영역이 있다는 것은 화면의 표시 근거다. 어떤 기간과 수치로 순위를 정하는지, 실제 방문자가 무엇을 더 보는지는 다른 자료가 필요하다. 표시된 이름만으로 인기가 검증됐거나 전환이 좋아졌다고 설명하지 않는다.

나는 이런 영역을 만들 때 데이터가 무엇을 의미하는지 관리 기록에 남기기를 권한다. 최신 상태를 읽지 못했을 때 이전 값을 그대로 최신처럼 보여 주는지도 확인한다. 첫 화면의 설득력과 수치의 확인 조건이 어긋나지 않게 하는 작업이다.

입문 설명으로 이어질 통로도 남겼다

공개 홈에서 확인한 해설 연결은 소식을 더 읽는 것과 다른 목적을 가진다. 낯선 개념을 모르는 사람이 영상과 제목만 지나치지 않도록 설명으로 들어갈 통로를 남긴다. 최신 정보와 입문 안내를 함께 두는 이유는 읽는 사람의 출발점이 다르기 때문이다.

아래는 이 역할을 다른 사이트에서 생각해 보기 위한 새 HTML 골격이다. 실제 재생·추천·일정 데이터가 들어 있는 원본 템플릿은 아니다. 정보의 이름과 관계를 먼저 정하고 실제 자료와 폭에 맞게 배치하는 출발점으로 사용할 수 있다.

코드와 구현 살펴보기

새 설명용 HTML 골격. 원본 템플릿이나 재생·추천 프로그램이 아니다.

<main class="home-content">
  <section aria-labelledby="lead"><h2 id="lead">Focus of the moment</h2></section>
  <aside aria-label="Useful next information">
    <section aria-labelledby="upcoming"><h2 id="upcoming">Upcoming dates</h2></section>
  </aside>
  <section aria-labelledby="updates"><h2 id="updates">Latest updates</h2></section>
  <section aria-labelledby="guides"><h2 id="guides">A place to understand</h2></section>
</main>

작은 화면에서는 무엇을 먼저 읽게 할지 다시 본다

큰 화면에서 곁에 두었던 일정이 작은 화면에서는 영상 다음에 놓일 수 있다. 코드의 항목 순서와 실제 화면의 읽기 순서가 어떻게 바뀌는지 확인해야 한다. 같은 내용을 유지한다는 이유로 PC의 크기와 여백을 그대로 줄이기만 해서는 질문의 순서가 유지되지 않을 수 있다.

이번 근거는 초기 배치 요청과 실제 공개 홈 관찰이다. 새로 모든 작은 화면을 검수한 결과는 아니다. 실제 적용 후에는 첫 콘텐츠를 이해하고, 일정으로 가고, 최신 소식과 설명을 찾는 동작을 이어서 확인한다. 나는 그 과정에서 우선순위가 유지되는지 보며 첫 화면을 계속 고치고 싶다.