아티스트를 옮겨 다니기 쉬운 홈페이지를 만들고 싶었다. 그렇다고 탐색 메뉴가 영상과 글보다 큰 자리를 차지해서는 안 됐다. K-POP PULSE의 초기 요청에는 어디를 다니더라도 같은 메뉴를 만나게 하되 크기는 작아야 한다는 조건이 있었다. 본창이 중요하다는 말이 그 기준이었다.
당시 대화에서는 모바일 메뉴를 모든 페이지의 상단에 두고, 본문을 읽기 시작하면 함께 위로 올라가는 선택도 받아들였다. 어느 페이지에나 있는 것과 스크롤 중에도 계속 붙어 있는 것은 다르다. 나는 이 두 약속을 나누어 화면에 필요한 공간을 다시 읽었다.
메뉴가 유지한다는 것이 무엇인지 먼저 정한다
공통 메뉴는 다음 대상의 위치를 새로 배우지 않게 한다. 화면에 붙는 메뉴는 지금 읽는 중에도 다음 대상으로 갈 수 있게 한다. 두 역할은 연결되지만 화면을 쓰는 비용은 다르다. 모바일에서 상단 메뉴가 사라진다고 공통 탐색이 없어졌다고 해석할 필요는 없다.
나는 고정이라는 요청을 받으면 페이지 이동, 본문 스크롤, 목록 안의 스크롤을 각각 따라가 보려 한다. 무엇이 남아 있어야 하는지 먼저 정해야 표시 위치와 저장할 상태를 고를 수 있다. 버튼을 항상 보이게 한 뒤 본문이 가려지는 문제를 따로 수습하는 순서로 만들지 않는다.
작게 만드는 일은 본문 여백과 함께 진행됐다
7월 30일 CSS 수정에는 데스크톱 메뉴 폭을 56픽셀에서 48픽셀로, 아바타를 42픽셀에서 36픽셀로 줄인 기록이 있다. 동시에 본문의 왼쪽 확보 공간도 66픽셀에서 56픽셀로 바꾸었다. 메뉴의 모양만 줄이고 본문에 이전 공간을 남겨 두는 선택은 아니었다.
이 숫자는 당시 화면의 값이지 모든 사이트에 적용할 권장 크기가 아니다. 클릭할 대상의 구분, 이름을 읽을 통로, 확대와 포커스, 실제 입력 동작을 함께 확인해야 한다. 더 작은 시각 요소가 곧 더 편한 조작을 뜻하지 않으므로 원본의 값을 일반적인 접근성 보증으로 사용하지 않는다.
모바일은 위에서 만나고 읽는 공간을 내준다
초기 모바일 바는 로고 중심의 가로 목록으로 정리했다. CSS의 간격과 아바타 크기를 줄이고 선택한 대상을 표시하는 테두리를 붙였다. 데스크톱의 왼쪽 고정 레일과 달리 모바일 바에는 화면 고정 위치를 주지 않는 방향이었다. 크기와 지속 노출을 같은 결론으로 정하지 않았다.
내가 가져갈 질문은 독자가 지금 목록을 고르는 중인지 내용을 읽는 중인지다. 메뉴를 펼칠 수 있게 하는 것, 일부만 먼저 보여 주는 것, 읽는 동안 위로 보내는 것 중 사이트에 맞는 선택을 할 수 있다. 좁은 폭이라고 모든 메뉴를 같은 방식으로 숨기는 규칙도 미리 정하지 않는다.
초기 두 벌의 메뉴는 이후 한 벌로 바뀌었다
이 초기 코드에는 모바일 바와 데스크톱 독이 각각 있었다. 8월 6일에는 같은 목록을 한 벌의 레일로 합치고 CSS가 방향을 바꾸게 하는 수정이 이어졌다. 작은 메뉴라는 목적과 목록을 출력하는 구조는 다른 판단이어서, 처음의 모습이 최종 정본인 것처럼 고정해서 설명하지 않는다.
별도로 공유한 새 단일 메뉴 모듈은 이 후속 판단에서 발전한 코드다. 현재 라우트의 대상과 방향별 위치를 구별하고 저장 실패도 처리한다. 아래 파일은 원본 CSS를 복원한 것이 아니며, 실제 적용에서는 자신의 본문·메뉴 크기·페이지 이동 흐름을 함께 검사해야 한다.
본문을 읽는 한 장면으로 검수한다
내가 직접 대조한 것은 당시 요청, CSS 변경과 성공 응답, 후속 단일 레일 기록이다. 현재 공개 화면의 메뉴 관찰도 있지만 지금 원본 사이트의 모든 작은 폭·입력 방식을 다시 검사한 결과는 아니다. 과거 검사 기록을 오늘의 휴대폰 검수로 바꾸어 말하지 않는다.
적용 후에는 메뉴에서 대상을 고르고 영상이나 본문으로 내려가 다시 다른 대상을 찾는 흐름을 이어 본다. 메뉴가 덮는 줄, 남겨 둔 빈 공간, 선택 표시와 키보드 포커스, 메뉴의 끝에 도달하는 길을 확인한다. 나는 본문을 편하게 읽을 수 있는지를 메뉴를 잘 만들었다는 판단의 한 부분으로 남기려 한다.