세로 도면을 자르지 않고 끝까지 보여주기

이미지가 들어갈 칸을 먼저 정하면 모든 사진을 그 칸에 꽉 채우고 싶어진다. 하지만 세로로 긴 도면이나 안내 자료는 분위기 사진과 역할이 다르다. 위아래의 작은 설명까지 읽어야 하는 자료를 잘라내면 화면은 깔끔해 보여도 정보는 불완전해진다.

내 템플릿 작업의 검수 기록에는 세로 도면과 다음 슬라이드가 겹치던 문제를 고친 과정이 남아 있다. 나는 이미지 한 장의 맞춤 방식만 바꾸는 대신, 자료의 역할과 주변 슬라이드의 높이를 함께 확인했다. 이 글의 예시는 고객 자료를 옮긴 것이 아니라 그 판단을 설명하기 위해 새로 만든 작은 모듈이다.

작은 화면으로 살펴보기

이 예시는 구조를 설명하는 분리된 데모다. 실제 화면·동작을 검증한 범위는 본문에 남긴다.

먼저 이 이미지가 설명인지 분위기인지 묻는다

메인에 쓰는 분위기 사진은 일부를 잘라도 목적이 유지될 수 있다. 사진을 꽉 채우는 cover는 그런 선택에 쓸 수 있다. 하지만 도면, 지도, 가격표나 사용 안내는 이미지의 바깥쪽에도 의미가 있다. 같은 규칙을 적용하면 방 이름이나 범례, 단위와 조건이 사라질 수 있다.

그래서 자료를 넣을 때 종류를 함께 기록했다. 정보 이미지에는 전체가 들어오는 contain을 기본으로 정하고, 도면을 cover로 배포하려 하면 빌드가 거부하도록 했다. 이는 CSS 취향을 고르는 일이 아니라 보여줄 정보의 범위를 지키는 규칙이었다.

전체를 보이는 것과 크게 읽히는 것은 따로 확인한다

contain을 넣었다고 문제가 모두 해결되는 것은 아니다. 너무 낮은 칸에 긴 도면을 넣으면 잘리지는 않아도 읽을 수 없을 만큼 작아진다. 나는 전체 자료를 보여주는 첫 단계와 크게 살펴보는 다음 단계를 나누어 생각한다. 모바일에서는 특히 확대하거나 원본을 살펴볼 경로가 필요할 수 있다.

도면을 꼭 사진 카드의 비율에 맞출 이유도 없다. 문서 영역이라면 이미지의 원래 비율을 살리고 높이를 자연스럽게 늘릴 수 있다. 슬라이드 안이라면 화면에서 쓸 수 있는 높이를 정하되, 그 선택 때문에 글자 크기가 얼마나 줄어드는지 확인해야 한다. 정보가 보이는 것과 읽히는 것은 같은 검사 항목이 아니다.

내가 고친 것은 이미지와 그 주변의 관계였다

실제 수정 소스에는 전체 도면용 영역의 고정 비율과 높이를 풀고, 이미지를 원래 비율로 배치하는 규칙이 있다. 홈 슬라이드에는 별도로 높이를 둔 영역에서 contain으로 자료를 맞추는 규칙을 넣었다. 두 위치가 같은 역할을 하지 않기 때문에 하나의 CSS 값으로 억지로 통일하지 않았다.

겹침은 이미지 자체만의 문제가 아닐 수 있다. 고정 높이, 절대 위치, 슬라이드의 전환 방식, 활성화되지 않은 항목의 크기가 함께 영향을 준다. 나는 도면의 위아래가 보이는지와 다음 슬라이드가 함께 비치는지를 다른 질문으로 확인했다. 이 방식은 설명 자료를 담는 카드나 제품 규격표에도 적용할 수 있다.

독립적으로 가져다 쓸 수 있는 기본 구조

아래 코드는 실제 고객 도면과 특정 사이트 클래스를 제외하고 새로 작성한 기본형이다. 문서가 자연스럽게 늘어나는 영역과 높이가 제한된 미리보기를 각각 보여준다. 크기와 여백은 넣을 자료와 실제 읽는 환경에 맞춰 조정한다.

문서의 원본을 링크한다면 사용 권한과 공개 범위를 먼저 확인한다. 공개할 수 없는 자료를 이미지로 바꾸었다고 공개해도 되는 것은 아니다. 이번 작은 예시에는 외부 주소나 다른 사이트의 파일을 넣지 않았다.

코드와 구현 살펴보기

HTML과 CSS · 자연스러운 문서 영역과 높이 제한 미리보기

<figure class="document-sheet">
  <img src="/media/document-image.svg"
       alt="내용을 설명하는 도면" width="600" height="1000">
  <figcaption>전체 내용을 먼저 확인합니다.</figcaption>
</figure>

<style>
.document-sheet { margin: 0; min-width: 0; }
.document-sheet img {
  display: block; width: 100%; height: auto;
  object-fit: contain;
}
.document-preview {
  display: grid; place-items: center; min-width: 0;
  height: clamp(260px, 52vh, 580px);
}
.document-preview img {
  width: 100%; height: 100%; object-fit: contain;
}
</style>

코드로 막는 실수와 화면에서 봐야 할 차이

이번 집필 때 도면을 cover로 지정하면 빌드가 거부하는 관련 검사를 다시 실행했고 통과했다. 과거 검수에는 PC 세로 도면의 위아래, 다음 슬라이드의 겹침 수정, 모바일의 비율 유지와 가로 넘침 확인이 기록되어 있다. 이것은 해당 자료와 화면을 확인한 기록이지 모든 세로 이미지의 읽기를 보장하는 결과는 아니다.

새로 정리한 모듈의 실제 화면과 키보드 흐름은 적용 환경에서 확인해야 한다. 자동으로 도면 크롭을 거부하는 검사와 사용자가 글자를 읽을 수 있는지는 다르다. 화면 검수에서는 작아진 글자, 확대 뒤 되돌아오는 길, 탭 전환 뒤 남는 이미지까지 살펴본다.

이미지의 위·아래·왼쪽·오른쪽에 필요한 정보가 모두 남는가.
한 칸에 들어왔다는 이유로 작은 설명이 읽히지 않는 것은 아닌가.
모바일에서 페이지 전체가 가로로 밀리지 않는가.
다음 슬라이드나 숨은 이미지가 현재 자료 위에 겹치지 않는가.
이미지를 못 읽는 상황에서도 제목·대체 설명·본문이 의미를 전하는가.

나는 빈 여백을 실패라고 판단하지 않는다

긴 도면을 전체로 보이면 옆에 여백이 남을 수 있다. 그 여백을 없애려고 자료를 자르는 것보다, 자료의 목적을 지키는 쪽을 선택했다. 여백이 어색하면 설명의 위치나 영역의 높이를 조절할 수 있다. 필요한 정보가 사라지는 것은 그런 미관의 조정과 다른 문제다.

홈페이지를 만들 때 정보 이미지와 분위기 사진을 같은 규칙으로 처리하지 않는 것만으로도 많은 혼란을 줄일 수 있다. 나는 보기 좋은 한 장보다 고객이 끝까지 읽을 수 있는 자료를 남기고 싶다.