처음에는 PC에서 도면이 작게 보인다는 요청이 있었다. 크기를 키운 뒤에는 너무 커서 평형 선택과 도면을 한 화면에서 보기 힘들다는 요청이 돌아왔다. 서로 반대처럼 보이는 말이지만 사용 목적은 같았다. 방문자가 타입을 고르고, 그 선택의 결과를 편하게 읽을 수 있어야 했다.

내가 다시 계산해야 했던 것은 도면의 최대 크기만이 아니었다. 헤더, 상담바, 제목과 선택 버튼을 제외하고 남은 공간이었다. 당시 수정 기록과 마지막 보완 코드는 이 영역들의 실제 높이를 읽어 PC 도면의 표시 높이를 정하는 방향을 남긴다. 화면을 채우는 목표를 선택과 읽기가 함께 성립하는 목표로 바꾼 것이다.

화면 높이 전부가 도면의 자리는 아니다

브라우저의 높이가 같아도 제목이 두 줄이 되거나 고정 상담바가 커지면 실제 도면 자리는 줄어든다. 고정 헤더가 차지하는 위치도 단순한 이미지 너비 계산에 들어 있지 않다. 도면을 화면 높이만큼 설정하면 선택 버튼이나 중요한 내용이 아래로 밀릴 수 있다. 그래서 필요한 조작부가 차지하는 공간을 먼저 계산했다.

보완 소스에는 헤더 영역과 하단 고정 영역, 제목과 위아래 선택부, 상세 링크 높이를 읽는 코드가 있다. 숨은 요소는 보이는 요소처럼 높이를 더하지 않도록 구별한다. 해당 구조의 여유 간격과 최소 높이도 함께 둔다. 이 수치는 그 페이지에 맞춘 값이지 모든 홈페이지에 적용할 고정 공식은 아니다.

전체를 보이는 것과 자세히 읽는 경로를 함께 둔다

도면을 한 화면 안에 맞추려면 작은 글자가 줄어들 수 있다. 그렇다고 도면의 아래쪽을 잘라 중요한 정보를 잃게 해서는 안 된다. 수정 기록은 자르지 않는 전체 표시와 원본 확대 링크를 함께 남겼다. 전체 구성을 비교하는 보기와 세부 내용을 읽는 보기를 나누어, 하나의 크기 설정에 모든 목적을 맡기지 않았다.

여러 보조 도면이 있는 경우도 첫 그림만 맞춰서는 끝나지 않는다. 각 그림과 선택부의 관계, 면적 안내처럼 별도 공간을 쓰는 자료를 확인해야 한다. 큰 이미지 하나를 맞춘 성공을 모든 도면의 성공으로 넓히지 않는다. 실제 자료의 길이와 역할에 따라 읽는 경로를 유지한다.

높이는 한 번 계산한 뒤 고정하지 않는다

화면을 줄이거나 자료가 늦게 로드되면 처음 잰 높이가 달라진다. 마지막 보완 코드에는 창 크기 변경, 페이지 로드, 이미지 로드, 선택 변경을 계기로 다시 계산하는 연결이 있다. 일부 조작부에는 ResizeObserver도 연결한다. 이벤트가 여러 번 와도 한 프레임의 계산 예약으로 모으는 구조를 사용한다.

나는 이 코드를 읽어 재계산의 조건을 확인했다. 원래 운영 페이지의 모든 글꼴과 이미지 로딩 조합을 이번에 실화면으로 시험한 것은 아니다. 실제 적용에서는 제목 줄 수가 바뀌는 경우, 브라우저 높이가 낮은 경우, 선택한 자료의 비율이 다른 경우를 넣어 결과를 본다. 리사이즈 연결이 있다는 사실과 매번 알맞게 보인다는 관찰은 구별한다.

상세 진입의 도착점에도 선택부를 포함한다

상세 페이지로 이동할 때 도면만 위로 올리면 그 위의 선택 버튼이 화면 밖에 남을 수 있다. 당시 기록은 도면 영역만이 아니라 선택 영역의 시작으로 도착점을 조정했다고 적었다. 잘 보이는 이미지를 만들었어도 다른 타입으로 바꾸는 방법이 사라지면 비교의 흐름이 끊긴다. 스크롤 위치도 자료의 사용 방법에 속한다.

PC와 모바일의 선택부 구성은 같을 필요가 없다. 작은 화면에서는 상단 한 곳만 남기기로 했으므로 그 조작부와 도면의 연결이 중요하다. PC의 큰 영역을 모바일에 그대로 축소해 붙이는 대신, 실제로 남아 있는 조작 위치를 기준으로 확인한다. 화면 크기마다 무엇을 고정하고 무엇을 줄일지 구별해야 한다.

한 화면이라는 목표의 조건을 설명한다

당시 기록의 PC 기준은 너비가 일정 범위 이상인 화면에 대한 계산이었다. 높이가 아주 낮거나 제목과 조작부가 과도하게 늘어나면 최소 높이 때문에 스크롤이 필요할 수 있다. 코드의 최소값이 있다고 임의의 화면에서 모든 내용이 한 번에 들어간다고 약속하지 않는다. 화면 조건과 자료 조건을 함께 설명하는 편이 정확하다.

이 글의 근거는 요청과 보완 코드, 당시 로컬 연결 기록이다. 해당 단계의 기록은 서버 미배포와 사용자 화면 검수 책임도 따로 적고 있으므로, 모든 실제 화면의 검수가 끝났다는 의미로 쓰지 않는다. 독자에게는 도면을 무조건 크게 하라는 숫자보다, 선택부와 정보의 자리부터 계산하는 방법을 남기고 싶다.