관제 화면에는 필요한 도구가 많았어요. 상태 안내, 화면 전환 탭, 상세 확인, 각종 운영 기능이 상단에 모여 있었어요. 하나씩 추가할 때는 모두 이유가 있었지만 함께 놓고 보니 실제 상태를 읽는 본문이 아래로 밀리고 있었어요. 좁은 화면에서는 이 문제가 더 크게 드러났어요.
문제는 도구의 개수만이 아니었어요. 데이터를 새로 읽을 때 나타나는 안내가 본문 앞에 생겼다가 사라지며 사용자가 읽던 위치도 움직였어요. 무엇이 새로 바뀌었는지 보기도 전에 화면 자체가 흔들리는 흐름이었어요.
항상 볼 정보와 필요할 때 볼 도구를 나눴어요
먼저 서비스 전체를 옮겨 다니는 탭과 특정 영역의 도구를 구분했어요. 세 가지 주요 화면을 바꾸는 탭은 한곳에서 유지하고, 같은 진입점이 다른 줄에도 반복되지 않도록 정리했어요. 어떤 화면에 있든 다음 화면을 찾는 위치가 같아야 했어요.
운영 도구는 메뉴 안으로 묶었어요. 사용자가 매 순간 읽어야 하는 현재 상태와 필요할 때 실행하는 조작을 같은 크기로 나열하지 않았어요. 테마 전환이나 로그아웃처럼 자주 찾을 수 있는 행동은 접근할 수 있도록 남겼어요.
갱신 안내에는 늘 같은 자리를 줬어요. 갱신 중인지, 정상인지, 확인이 필요한지가 그 자리 안에서 바뀌고 자세한 내용은 메뉴에서 읽도록 했어요. 데이터를 읽을 때마다 본문에 새 행을 끼워 넣는 흐름을 줄인 거예요. 상태가 바뀌어도 사용자가 보고 있던 내용은 같은 위치에 있어야 했어요.
실제 화면에서는 메뉴를 열기 전후의 높이와 본문의 위치를 비교했어요. 메뉴 안 목록이 길어지는 것과 화면 전체가 밀리는 것은 구분했어요. 상단을 정리했다는 설명보다 사용자가 읽던 행이 제자리에 남아 있는지가 더 중요한 확인이었어요.
상단을 줄이는 과정에서 도구의 존재를 숨기는 것과 필요할 때 찾게 하는 것은 구분했어요. 메뉴를 닫았을 때 본문이 넓어져도 열어서 필요한 일을 할 수 있어야 해요. 열기와 닫기의 공간, 현재 위치를 읽는 상태를 함께 확인한 이유예요.
테마 수정의 경우도 같은 원칙이었어요. 밝게 보이는 화면에서 검은 선이 남았다고 전체 배치를 다시 만드는 대신 실제로 그 선을 만드는 요소를 확인했어요. 작게 보이는 문제에서 출발해 불필요하게 큰 변경을 하지 않도록 범위를 좁혔어요.
다른 화면 크기에 미친 영향은 성공 사례에 덧붙일 사소한 예외가 아니었어요. 모바일 요청을 넓은 화면까지 적용한 오류가 드러났고 그 범위를 다시 나눴어요. 개발 과정의 기록에는 잘된 선택뿐 아니라 요구를 잘못 해석한 뒤 어떻게 돌아왔는지도 남아야 했어요.
모바일을 고치다가 데스크톱까지 바꾼 적도 있었어요
이 과정이 한 번에 맞게 끝나지는 않았어요. 모바일에서는 질문을 중심으로 보고 문서는 필요할 때 열도록 요청받았는데, 그 흐름을 넓은 화면까지 적용한 적이 있었어요. 큰 화면에서는 문서와 분석을 나란히 읽을 수 있어야 했는데 작업 공간이 함께 줄어든 거예요.
처음 되돌렸다는 설명도 충분하지 않았어요. 상단만 복원하고 본문이 여전히 모바일의 읽는 방식이면 사용자 요구를 회복한 것이 아니었어요. 화면 크기별로 어떤 작업을 해야 하는지 다시 정리하고 본문 구조까지 분리해 확인했어요.
테마도 하나의 정답으로 고정하지 않았어요. 첫 진입 기본값을 바꾼 기록과 후속 변경을 구분하고, 사용자가 다른 테마로 전환할 수 있는지는 별도로 유지했어요. 라이트 화면에서 검은 경계처럼 보인 요소는 실제로 스크롤 영역의 색이 맞지 않은 문제였어요. 겉모습이 비슷하다고 여백이나 카드 테두리부터 바꾸지는 않았어요.
이 글은 상단을 다듬은 여러 차례의 같은 작업 흐름을 묶은 기록이에요. 주요 메뉴 정리와 일부 후속 수정은 배포까지 확인했지만, 모든 중간 시안이 운영에 반영된 것은 아니었어요. 태블릿의 높은 상단과 일부 좁은 폭의 읽기 밀도도 계속 살펴볼 부분으로 남았어요.
상단을 줄이는 일은 정보를 덜 주는 일과 같지 않았어요. 늘 필요한 상태는 움직이지 않게 두고, 필요할 때 찾는 도구는 그때 열도록 만드는 일이었어요. 사용자가 화면의 구조보다 지금 처리할 문제를 먼저 볼 수 있도록 우선순위를 다시 정했어요.
