글과 이미지가 함께 있는 글에서 사진 크기와 위치를 정하는 방법

사진의 역할부터 파악하기

사진을 옮기거나 크기를 조정하기 전에, 독자가 그 사진에서 무엇을 얻어야 하는지 결정하세요. 자세히 살펴봐야 할 근거인가요, 글의 내용을 더 쉽게 떠올릴 수 있게 돕는 예시인가요, 아니면 단순한 장식인가요? 이러한 구분이 미리 정해진 이미지 너비로 시작하는 것보다 훨씬 유용합니다.

사진에 글에 없는 정보가 담겨 있다면 관련 세부 사항을 쉽게 읽을 수 있도록 충분한 공간을 확보하세요. 문서, 물체 또는 과정을 담은 작은 이미지는 독자가 자세히 살펴볼 수 없다면 본래의 주요 역할을 다하지 못할 수 있습니다. 사진이 단순히 본문에서 이미 설명한 내용을 보여주기만 한다면 크기가 작아도 충분하며, 혹은 아예 필요하지 않을 수도 있습니다. 이는 사진의 목적에서 도출된 실용적인 디자인 규칙일 뿐, 보편적인 크기 표준은 아닙니다. GOV.UK 디자인 시스템의 이미지 가이드라인 역시 이미지는 실제 사용자의 필요를 충족하고 시각적 보조 자료 역할을 해야 하며, 필수 정보는 글로 제공되어야 한다고 설명합니다. 해당 권장 사항은 정부 온라인 서비스를 위해 작성된 것이므로 모든 유형의 글에 적용되는 절대적인 규칙이라기보다는 유용한 참고 자료로 활용하세요.

유용한 판단 기준 중 하나는 각 사진에 '자세히 보기(inspect)', '설명 보조(illustrate)', '장식(ornament)'이라는 세 가지 역할 중 하나를 부여하는 것입니다. '자세히 보기'는 대개 더 큰 디스플레이 크기와 관련 세부 사항으로 시선을 이끄는 설명이나 캡션을 필요로 합니다. '설명 보조'는 해당 사진이 뒷받침하는 문단 근처에 적당한 크기로 배치하는 경우가 많습니다. '장식'은 정보 전달의 역할이 없으므로 생략하거나 시각적으로 눈에 띄지 않게 유지하는 것을 고려하세요. 이 분류는 실용적인 편집 도구일 뿐, 출처에서 규정한 공식 용어는 아닙니다.

중요도와 여유 공간에 따라 크기 선택하기

글의 본문 텍스트 열(column)을 시작 경계로 삼으세요. 열 전체 너비에 걸쳐 있는 사진은 눈에 잘 띄고 세부 내용에 더 많은 공간을 제공합니다. 이러한 처리는 시각적 멈춤을 정당화할 만큼 중요한 이미지에만 적용하세요. 열에 맞춰 정렬된 더 작은 사진은 제목이나 본문과 시각적으로 경쟁하지 않으면서 인접한 내용을 뒷받침할 수 있습니다. 원본 파일이 크다는 이유만으로 크기를 크게 설정하지 마세요. 화면에 표시되는 크기는 레이아웃과 독자가 확인해야 하는 정보에 적합해야 합니다.

이것은 검증된 템플릿이 아니라 이해를 돕기 위한 예시입니다. 700픽셀 너비의 본문 열에 두 부분으로 나뉜 물체의 사진이 포함되어 있고 그 차이점이 글의 핵심 내용이라고 가정해 보겠습니다. 이 경우 전체 열 너비에 가깝게 표시하면 비교하기가 더 쉬워질 수 있습니다. 반면 동일한 사진이 전반적인 분위기만 보여주고 문단에 상세한 설명이 담겨 있다면, 폭을 더 좁게 표시하는 것이 텍스트의 강조점을 유지하는 데 유리할 수 있습니다. 700픽셀이라는 수치는 단지 열 너비의 한 예시일 뿐 권장 표준이 아닙니다.

넓은 화면에서 사진이 텍스트 옆에 배치될 때는 두 요소를 하나의 짝으로 다루세요. 이미지에는 피사체를 보여줄 수 있는 충분한 너비를 주고, 텍스트에는 편안하게 읽을 수 있는 충분한 공간을 확보해야 합니다. 둘 중 하나라도 비좁아진다면, 사진을 무리하게 줄이고 텍스트를 좁은 띠 형태로 밀어 넣는 대신 두 요소를 위아래로 쌓아 배치하세요. 작은 화면에서는 단일 열 배치가 가장 명확한 경우가 많습니다. 텍스트, 관련 사진, 그다음 본문 순서로 이어지는 방식입니다. W3C의 WCAG 2.2 리플로우(Reflow) 설명에서는 많은 기사 페이지가 단일 열에 어떻게 적응할 수 있는지 설명하며, 일반적인 텍스트 콘텐츠에서 양방향 스크롤을 방지하는 것을 목표로 제시합니다. 또한 의미나 사용상 2차원 레이아웃이 반드시 필요한 콘텐츠에 대한 예외도 언급합니다. 글 레이아웃에서의 핵심은 이미지와 텍스트의 조합 때문에 독자가 글을 읽기 위해 화면을 좌우로 스크롤하지 않도록 만드는 것입니다.

연관성이 명확한 위치에 각 사진 배치하기

사진이 왜 그곳에 있는지 설명해 주는 문장이나 문단 근처에 사진을 배치하세요. 독자가 이미지를 찾기 위해 관련 없는 여러 문단을 지나쳐 스크롤해야 한다면 연관성이 모호해질 수 있습니다. 마찬가지로 한 문장의 논리적 흐름 중간에 큰 사진이 들어가면 흐름이 끊길 수 있습니다. 깔끔한 배치는 대개 주제를 소개하는 첫 문단 바로 뒤나, 이미지가 필요한 단계 바로 앞입니다.

캡션은 구체적인 내용을 덧붙일 수 있을 때 사용하세요. 대상을 식별하거나, 세부 사항을 짚어주거나, 이미지가 중요한 이유를 설명하는 식입니다. 주변 문장을 그대로 토씨 하나 안 틀리고 반복하는 용도로 캡션을 쓰지 마세요. 사진을 자세히 살펴볼 필요가 있다면 캡션뿐만 아니라 주변 텍스트에서도 무엇을 보아야 하는지 명시하세요. 독자가 단순히 사진의 위치만 보고 의도를 추측하게 해서는 안 됩니다.

사진과 텍스트의 관계는 시각 장애가 있는 사용자의 읽기 환경에서도 중요합니다. W3C의 이미지 튜토리얼에 따르면, 정보를 담고 있는 이미지는 필수 정보를 전달하는 대체 텍스트가 필요하며, 장식용 이미지는 보조 기술이 건너뛸 수 있도록 빈 대체 텍스트를 사용할 수 있습니다. W3C의 정보 전달 이미지 가이드라인은 대체 텍스트가 단순히 눈에 보이는 사물을 나열하는 것이 아니라 맥락 속에서 이미지의 의미를 표현해야 한다고 강조합니다. 실질적인 점검 방법으로 스스로에게 질문해 보세요. 누군가 이 사진을 볼 수 없다면 어떤 정보를 놓치게 될까요? 필수 정보는 본문 텍스트에 포함하고, 이미지에는 적절한 대체 텍스트를 제공하세요. 이미지가 인접한 텍스트 이상의 새로운 내용을 담고 있지 않다면, 설명을 중복해서 적을 필요는 없습니다.

사진의 유용한 형태 유지하기

사진의 가로세로 비율(종횡비)은 사진이 차지하는 공간과 화면에 보이는 내용에 영향을 미칩니다. 먼저 선택한 영역 안에 전체 사진을 맞춰 넣는 것부터 시작하세요. 피사체가 여전히 명확하고 독자에게 필요한 세부 사항이 잘려 나가지 않는 경우에만 크롭(자르기)을 적용하세요. 가로 방향 크롭은 넓은 리드 이미지에 적합할 수 있고, 세로 방향 이미지는 열 내에서 더 좁은 너비로 배치할 때 더 효과적일 수 있습니다. 이는 구도에 따른 선택이며 정해진 규칙은 아닙니다.

크롭으로 인해 맥락이 사라지거나 원래의 의미가 왜곡되거나 글에서 다루는 세부 사항이 가려진다면, 크롭 방식을 바꾸거나 원래 비율대로 표시하세요. 도표, 라벨, 문서의 경우 최종 표시 크기를 꼼꼼히 확인하세요. 사진 속에 포함된 텍스트가 너무 작아져 읽기 어려워질 수 있습니다. GOV.UK 이미지 가이드라인은 일반적으로 이미지 안에 텍스트를 넣지 말 것을 권장합니다. 화면 판독기로 읽거나 복사, 크기 조절, 접근하기가 어려울 수 있기 때문입니다. 텍스트가 이미지에 필수적인 경우라면 주변 본문 글에도 해당 의미를 함께 제공하세요.

독자가 실제로 보는 크기로 레이아웃 확인하기

넓은 데스크톱 화면 너비와 좁은 모바일 화면 너비에서 글을 미리 확인하세요. 사진이 본문 열을 벗어나지 않는지, 다른 콘텐츠를 가리지 않는지, 옆에 있는 텍스트가 너무 좁게 찌그러지지 않는지 점검하세요. 제목에서 문단, 사진으로 이어지는 읽기 순서를 따라가 보세요. 레이아웃이 세로로 쌓일 때도 이미지는 여전히 설명 대상인 본문 근처에 나타나야 합니다. 또한 실제로 표시되는 크기에서 캡션과 이미지 속 중요 세부 사항이 잘 보이는지도 확인하세요.

웹 페이지의 경우 화면에 표시되는 크기와 파일 크기는 별개의 결정 사항입니다. 큰 화면으로 볼 때는 고해상도 원본 파일이 필요할 수 있지만, 작은 화면에 불필요하게 큰 이미지 파일을 전송하면 데이터가 낭비될 수 있습니다. Google의 web.dev 반응형 이미지 가이드는 브라우저가 다양한 디스플레이 환경에 맞춰 최적의 이미지 크기를 선택하는 방법을 설명하며, 적절한 이미지 버전의 개수에 정답은 없다고 언급합니다. 이는 웹 퍼블리싱을 위한 구현 가이드이며, 기사 내에서 이미지가 들어갈 위치를 결정하는 것은 아닙니다.

빠른 의사결정 단계

역할을 규정하세요. 사진이 자세히 살펴보아야 할 대상인가요, 글을 설명하기 위한 예시인가요, 아니면 단순히 페이지를 꾸미기 위한 장식인가요?

기준점을 찾으세요. 사진을 소개하거나 사진에 의존하는 본문을 찾은 다음, 해당 본문 바로 옆에 사진을 배치하세요.

표시 너비를 설정하세요. 핵심적인 근거에는 충분한 공간을 주고, 세부 묘사가 필수적이지 않은 보조 사진은 공간을 덜 차지하도록 하세요.

크롭 상태를 점검하세요. 피사체와 관련된 모든 맥락이 잘 보이는지 확인하세요.

순서대로 레이아웃을 소리 내어 읽어보세요. 좁은 화면에서도 텍스트와 사진이 논리적인 순서로 나타나고 글을 편안하게 읽을 수 있는지 확인하세요.

정보를 설명하세요. 도움이 될 때는 캡션을 추가하고, 이미지의 역할에 맞는 대체 텍스트를 제공하세요.

실용적인 원칙은 간단합니다. 중요도에 따라 눈에 띄는 정도를 결정하고, 관련 텍스트에 따라 위치를 정하며, 좁은 화면 미리보기를 통해 레이아웃이 여전히 잘 작동하는지 확인하는 것입니다. 선택한 크기에서 사진을 이해하기 어렵다면 크기를 키우거나, 크롭을 단순화하거나, 관련된 세부 내용을 본문 텍스트에서 설명하세요.

이 주제 더 살펴보기