한 작업에서는 건물 사진 위쪽이 잘렸으니 전체가 보이게 해 달라는 요청을 받았다. 얼마 뒤에는 메인 맨 위 사진의 위아래가 검게 남으니 가운데를 기준으로 크게 채워 달라는 요청도 있었다. 두 말을 하나의 이미지 크기 규칙으로 묶으면 어느 쪽은 다시 잘못 보인다. 사진이 놓인 자리와 방문자가 그 자리에서 읽어야 할 내용이 달랐다.
당시 공통 수정안은 맨 위 배경 사진에는 화면을 채우는 규칙을, 아래 건물 사진에는 전체 구성을 보이는 규칙을 따로 남겼다. 도면과 지도는 또 다른 사실 자료였다. 나는 이미지 확장자를 기준으로 묶는 대신 그 자료의 역할과 놓일 영역을 기준으로 맞춤 방식을 정하게 되었다.
첫 화면의 배경은 화면 비율과 함께 달라진다
메인 배경에는 cover와 가운데 위치를 쓰는 소스가 있다. 창 비율이 바뀌어도 배경 영역을 채우는 대신 가장자리가 일부 잘릴 수 있는 선택이다. 이것을 쓰려면 사진의 중요한 피사체가 어디에 있는지 먼저 알아야 한다. 채워졌다는 결과만 확인하고 건물 꼭대기나 필요한 문구가 잘리는 것을 놓치면 목적을 달성하지 못한다.
공통 사용안내는 가로 사진과 모바일용 세로 사진을 따로 준비하고 중요한 내용이 잘리는지 확인하도록 했다. 같은 사진을 가운데 놓았다고 모든 화면이 좋아지는 것은 아니다. 사진의 초점 위치와 화면의 비율을 함께 살핀다. 여백을 줄이는 목표가 사실 내용을 보존하는 목표보다 항상 우선하는 것은 아니다.
전체를 보여야 할 사진은 표시 영역을 먼저 맞춘다
아래쪽 건물 사진에는 원본 비율을 기록하고 contain으로 전체를 보이게 하는 코드가 남아 있다. 화면을 채우기 위해 확대해 잘라내는 방식과 달리, 원본 구성을 남기는 선택이다. 사진 안에 건물 전체가 들어 있다는 것이 설명에 중요하다면 일부만 크게 보이는 것보다 전체를 이해할 수 있는 편이 낫다.
다만 contain이라는 단어만 넣는다고 여백과 읽기 크기의 문제가 모두 해결되지는 않는다. 표시 상자의 비율이 원본과 너무 다르면 빈 공간이 커지고 중요한 내용이 작아진다. 그래서 상자의 비율과 높이도 함께 정해야 한다. 파일의 비율을 읽고 해당 영역에 기록한 이유는 같은 규칙 아래에서도 자료마다 다른 조건을 보존하기 위해서였다.
도면과 지도는 꾸미는 사진의 규칙에서 분리한다
공통 자료 안내는 도면과 지도처럼 글자와 위치 정보가 있는 자료를 전체 표시 대상으로 다룬다. 가장자리의 표나 설명이 없어지면 자료의 의미도 달라진다. 홈 카드의 확대 효과가 멋있게 보이더라도 이런 자료에는 그대로 적용하지 않는다. 방문자가 읽어야 하는 내용을 장식 효과가 가리지 않아야 한다.
공식 자료가 흐리거나 슬롯 비율과 맞지 않는다는 이유로 새 도면을 만들어 채우지도 않는다. 원본을 볼 수 있는 경로와 더 큰 표시 영역을 검토한다. 연출용 사진의 새 제작과 실제 공간을 설명하는 자료의 교체를 별도 책임으로 둔다. 같은 이미지 목록에 있다는 이유로 같은 편집 권한이 생기는 것은 아니다.
같은 CSS를 적용해도 자료별 확인은 남는다
이번에 나는 공통 CSS의 메인 배경 채움, 아래 사진 전체 표시와 도면 contain 규칙을 각각 읽었다. 이는 코드에 어떤 의도를 연결했는지 확인한 것이다. 제공된 묶음에는 원래 첨부 이미지의 픽셀이 없으므로, 모든 원래 사진의 가장자리가 지금 실제 화면에서 보이는지 재검수한 결과는 아니다. 당시 문서의 사용자 화면 검수 책임도 완료 증명으로 바꾸지 않는다.
적용 후에는 화면을 넓고 좁게 바꾸고, 각 자료의 중요한 경계가 남는지 본다. 제목과 선택 버튼 때문에 실제 표시 영역이 작아지는 경우도 확인한다. 전체 표시와 세부 확대 경로를 함께 제공할 수 있지만, 중요한 글자가 너무 작아 읽히지 않는다면 추가 구성이 필요하다. 이미지 맞춤 설정은 확인의 출발점이다.
의뢰자가 말할 수 있는 두 가지 요구
이미지를 크게 해 달라는 말에는 화면을 채우고 싶은 뜻과 내용을 읽기 쉽게 하고 싶은 뜻이 함께 들어갈 수 있다. 나는 먼저 어느 쪽이 필요한지 질문을 나눈다. 첫 장면의 인상을 만드는 배경인지, 전체 건물이나 공간 관계를 확인하는 자료인지 알면 수정 방향이 분명해진다. 서로 다른 자리에 다른 기준을 써도 홈페이지의 일관성을 잃는 것은 아니다.
자료 장부에는 역할, 원본 비율, 중요한 피사체와 표시 방식을 함께 남긴다. 다른 작업자도 그 기록을 읽고 잘라도 되는 경계와 남겨야 할 정보를 이해할 수 있다. 이 작업에서 얻은 노하우는 cover나 contain 중 하나를 정답으로 고르는 일이 아니라, 고객이 그 이미지로 무엇을 판단하는지를 코드의 조건으로 옮기는 일이었다.