Root 홈의 상단 메뉴는 처음부터 끝까지 같은 틀로 남아 있었어요. 탐색 위치는 분명했지만, 첫 장면을 보는 순간과 아래 내용을 읽는 순간이 같은 화면처럼 이어졌어요. 브랜드를 소개하는 큰 장면과 이동을 돕는 작은 메뉴가 서로 다른 역할을 가져야 하는지 다시 살폈어요.
이 작업에는 바닥 영역의 정렬을 고친 기록도 함께 있어요. 두 변경은 같은 홈의 위와 아래를 다뤘지만 서로 다른 문제였어요. 하나는 스크롤하며 메뉴가 남는 방식이었고, 다른 하나는 문구의 여백을 줄이다 정보 영역 전체의 기준까지 사라진 일이었어요.
홈에만 필요한 변화였어요
상단은 첫 장면 위에 놓이는 상태와 내용을 읽을 때 떠 있는 상태로 나누었어요. 홈에서 시작한 변화를 모든 관리 화면에 적용하지 않았어요. 내부 작업을 하는 곳에서는 익숙한 메뉴가 안정적으로 남는 것이 더 중요할 수 있기 때문이에요. 같은 헤더를 쓴다고 모든 페이지가 같은 장면 전환을 필요로 하지는 않아요.
기준은 화면을 얼마나 내렸는지라는 임의의 숫자보다 첫 장면이 아직 보이는지에 맞췄어요. 큰 화면과 작은 화면은 처음 장면의 높이가 다르고, 이미 내려간 위치에서 다시 열릴 수도 있어요. 방문자가 어느 장면을 읽는지에 맞춰 메뉴의 역할을 바꾸려는 선택이었어요.
다만 동작을 구현하고 운영 화면에 관련 구조가 들어갔다는 확인과 실제 스크롤의 시각적 자연스러움은 달랐어요. 당시에는 모든 전환 장면을 캡처해 비교하지 못했어요. 떠 있는 메뉴의 농도와 간격, 계정 표시가 첫 장면을 방해하지 않는지는 후속으로 볼 일이었어요.
화면의 한 부분을 고칠 때는 요청된 차이를 먼저 작게 설명할 필요가 있었어요. 첫 장면에서 메뉴가 어떻게 보일지 바꾸는 것과 모든 페이지의 상단을 개편하는 것은 다르고, 왼쪽 문구의 여백을 줄이는 것과 전체 정보 폭을 해제하는 것도 달랐어요. 비슷한 모양의 변경을 같은 범위로 보면 예상하지 못한 결과가 생겨요.
특히 푸터는 정보와 시각적 마무리가 함께 있는 곳이었어요. 링크를 읽는 영역에는 일정한 정렬이 필요했지만 브랜드 표식은 다른 규모의 장면으로 사용할 수 있었어요. 두 부분을 하나의 규칙으로 맞추는 것보다 각각이 읽히는 목적을 분리하는 것이 문제를 더 정확하게 다뤘어요.
여기서 최종 시각 확인을 남긴 이유는 구조의 정상과 인상의 균형이 다른 확인이기 때문이에요. 운영에 의도한 구조가 반영됐다는 근거는 있지만, 실제 화면에서 내려 읽는 순간의 농도와 간격까지 같은 수준으로 판단된 것은 아니었어요.
여백을 줄이는 것과 틀을 없애는 것은 달랐어요
푸터에서는 왼쪽 문구의 시작 위치를 조정하려다 정보 전체의 최대 폭과 가운데 정렬까지 사라진 상태를 발견했어요. 여백 하나를 없애는 요청이 정보의 틀을 바꾸는 수정으로 넓어진 거예요. 방문자가 읽을 링크와 크게 보이는 브랜드 표식은 같은 폭 규칙을 가질 필요가 없었어요.
그래서 정보 영역의 정렬을 되돌리고, 큰 표식이 놓이는 무대와 다른 기준을 사용하도록 구분했어요. 화면의 모든 왼쪽 끝을 맞추는 것보다 각 부분이 어떤 일을 하는지 봐야 했어요. 링크를 읽는 폭과 마지막 이미지를 보는 폭이 다르다는 이유만으로 불일치라고 볼 수는 없었어요.
두 변경 모두 코드와 운영 화면의 구조를 확인했지만 큰 화면과 휴대폰에서 최종 균형을 사람이 승인한 상태는 아니었어요. 이 글의 결과는 홈의 첫 장면과 읽기 장면을 나누고, 푸터의 정보 정렬이 의도치 않게 풀린 부분을 복구한 데까지예요.
홈을 다듬는 일은 모든 부분을 한 모양으로 만드는 것과 달랐어요. 처음 볼 때는 내용의 인상이, 내려 읽을 때는 탐색이, 끝에서는 다음 연결이 중요했어요. 각각의 순간을 나눠 보니 바꿀 상태와 지킬 틀도 달라졌어요.
