사진가 가로 배너 크롭, 첫 편집부터 모바일 검수까지

가로 배너는 사진을 넓게 자르는 일만으로 완성되지 않습니다. 제목이나 버튼이 올라갈 공간을 남기고, 작은 화면에서도 주제가 잘리지 않게 조정해야 합니다. 아래 순서대로 작업하면 원본을 보존하면서 크롭을 검수할 수 있습니다.

1. 배너의 역할과 화면 크기부터 정하기

먼저 배너가 무엇을 보여 주고 방문자에게 어떤 행동을 안내하는지 적습니다. 사진가 포트폴리오라면 대표 작업을 소개할지, 촬영 문의를 유도할지부터 정합니다. 그다음 사이트 편집 화면에서 실제 배너 영역의 비율과 데스크톱·모바일 표시 방식을 확인합니다. 정해진 크기가 있다면 그 규격을 따르고, 없다면 편집 화면에 표시된 프레임을 기준으로 삼으세요.

• 제목, 설명, 버튼이 놓일 위치를 표시합니다.
• 사진에서 반드시 보여야 할 주제를 하나 정합니다.
• 원본 파일은 별도로 보관하고 복사본으로 작업합니다.

**가상 예시:** 인물 사진가의 첫 화면 배너라면 인물의 표정과 촬영 분위기를 보여 주고, 왼쪽에는 ‘인물 촬영’ 제목과 문의 버튼을 둘 수 있습니다. 이 경우 얼굴을 프레임 가장자리나 글자 뒤에 두지 않습니다.

2. 쓸 사진을 고르고 원본을 살펴보기

배너 용도와 맞는 사진을 고릅니다. 피사체가 프레임 한쪽에 있는 사진은 반대쪽에 문구 공간을 만들기 쉽습니다. 피사체가 중앙에 있거나 가장자리까지 차 있는 사진은 크롭 뒤에 글자와 겹치거나 일부가 잘릴 수 있습니다. 편집 전 사진을 확대해 초점, 노출, 불필요한 배경 요소도 확인합니다.

TalkTalkMySite에서는 라이선스가 적용된 스톡 사진·영상 검색을 이용할 수 있습니다. 검색 결과를 고를 때는 주제뿐 아니라 배너 비율로 잘랐을 때도 구도가 유지되는지 확인하세요. 라이선스 조건과 사용 범위는 선택한 자산의 안내를 직접 확인합니다.

• 가로 프레임에 맞는 여백과 구도를 확인합니다.
• 문구가 놓일 자리에 복잡한 무늬나 중요한 디테일이 없는지 봅니다.
• 한 장으로 메시지를 전달하기 어려우면 다른 사진을 고릅니다.

3. 먼저 크롭하고 피사체의 초점을 맞추기

사진을 배너 영역에 넣고 프레임의 가로·세로 비율에 맞춰 크롭합니다. 편집기가 초점 또는 위치 조정을 제공하면, 피사체의 얼굴이나 핵심 작업물을 기준으로 배치합니다. 사진을 크게 확대해 빈 공간을 억지로 채우면 해상도가 부족해 보일 수 있으므로, 확대보다 다른 원본을 선택하는 편이 나을 수 있습니다.

• 피사체의 중요한 부분이 프레임 안에 남는지 확인합니다.
• 피사체가 글자나 버튼과 겹치지 않도록 사진 위치를 조정합니다.
• 제목 주변의 여백과 배경의 밝기·복잡도를 함께 살핍니다.

한 장의 크롭을 데스크톱과 모바일 모두에 쓰면 화면이 좁아질 때 일부가 더 잘릴 수 있습니다. 편집 화면에서 기기별 미리보기가 가능하면 각각 확인하고, 필요한 경우 프레임에 맞게 위치를 다시 조정합니다. 기기별 별도 이미지가 제공된다고 가정하지 말고 실제 편집 옵션을 확인하세요.

4. 문구와 사진의 겹침을 조정하기

크롭이 정해지면 제목과 버튼을 놓고 다시 사진을 살핍니다. 글자가 피사체를 가리거나 배경에 묻히면 문구 위치를 옮기거나 더 여백이 많은 사진을 선택합니다. 이미지 편집 도구에서 대비를 강하게 보정하기 전에 실제 배경에서 문구가 읽히는지 확인하세요. 필요한 경우 제목을 짧게 다듬어 사진을 덜 가리게 합니다.

TalkTalkMySite는 최대 다섯 장의 이미지로 히어로 슬라이더를 구성할 수 있습니다. 슬라이드를 여러 장 쓴다면 각 이미지에서 제목과 버튼이 비슷한 위치에 놓여도 읽히는지 확인합니다. 사진마다 주제 위치가 다르면 한 장만 유독 문구와 충돌할 수 있습니다. 슬라이드 수를 늘리는 것이 항상 더 나은 선택은 아닙니다.

5. 게시 전 데스크톱과 모바일 검수

편집기 미리보기에서 주요 화면 폭을 확인하고, 가능하면 게시된 페이지도 직접 열어 봅니다. 화면 크기에 따라 잘리는 영역이 달라질 수 있으므로 편집 화면의 프레임과 실제 표시를 함께 비교하세요.

• 얼굴, 손, 제품 등 핵심 주제가 잘리거나 왜곡되지 않았는지 확인합니다.
• 제목과 버튼이 배경에 묻히지 않고 눌러야 할 영역과 구분되는지 봅니다.
• 첫 화면이 로드된 뒤 배너가 의도한 순서로 보이는지 확인합니다.
• 슬라이더를 쓴다면 각 이미지와 문구 조합을 모두 확인합니다.

**가상 예시:** 풍경 촬영 포트폴리오에 산 능선 사진을 넣고 제목을 왼쪽에 둔다면, 모바일 미리보기에서 능선이 프레임 밖으로 밀리거나 제목이 가장 복잡한 나무 위에 놓이지 않는지 살핍니다. 문제가 보이면 제목 위치나 사진 크롭을 조정하고 다시 확인합니다.

6. 수정 범위를 기록하고 다음 행동 정하기

처음부터 여러 요소를 한꺼번에 바꾸기보다 한 번에 한 가지를 조정합니다. 예를 들어 먼저 크롭 위치를 바꾸고 확인한 다음, 필요할 때 제목 위치를 수정합니다. 어떤 화면에서 문제가 해결됐는지 간단히 기록하면 이전 상태와 비교하기 쉽습니다. 게시 후에도 크롭이 다르게 보이면 브라우저와 화면 크기를 확인하고 해당 조건에서 다시 검수합니다.

가장 유용한 다음 행동은 선택한 배너 사진을 편집기에 올리고, 문구가 들어갈 자리와 피사체 위치를 표시하는 것입니다. 그다음 데스크톱·모바일 미리보기를 각각 확인해, 주제가 온전히 보이고 제목과 버튼이 읽히는 크롭을 저장하세요.