베이커리 가로 배너 사진, 크롭부터 검수까지 실제 편집 순서

베이커리 가로 배너는 사진이 예쁘다는 이유만으로 고르면 곤란합니다. 넓고 낮은 화면에서는 빵이 작아지거나, 문구를 얹을 자리가 부족하거나, 모바일에서 핵심 장면이 잘릴 수 있습니다. 아래 순서는 TalkTalkMySite에서 처음 배너를 편집하는 운영자가 사진 선택부터 게시 전 확인까지 차례로 진행할 수 있도록 구성했습니다.

1. 배너의 역할과 문구 자리를 먼저 정합니다

편집기를 열기 전에 이 배너가 무엇을 보여 줄지 한 문장으로 정하세요. 예를 들어 “오늘 구운 식빵을 매장에서 만날 수 있다”가 목적이라면, 사진은 식빵의 결을 보여 주고 문구는 제품과 방문 행동을 짧게 안내하면 됩니다. 한 화면에 제품, 매장 소개, 모든 메뉴를 다 담으려 하지 마세요.

사진에서 주제가 놓일 영역과 문구가 놓일 영역도 대략 정합니다. 왼쪽에 문구를 배치할 계획이라면 오른쪽에 빵이 보이는 사진이 편집하기 쉽습니다. 배너의 실제 비율을 확인하고, 사진의 중요한 부분이 화면 가장자리 가까이에 있지 않은지도 살펴보세요.

• 배너의 목적을 한 문장으로 적습니다.
• 사진에서 제품이 놓일 쪽과 문구가 놓일 쪽을 정합니다.
• 로고나 버튼이 들어갈 공간을 남기고, 사진에 글자를 미리 합성하지 않습니다.

2. 사용할 원본 사진을 고릅니다

가로로 넓게 잘라도 제품을 알아볼 수 있는 사진을 우선 선택하세요. 빵 한 개를 아주 가까이 찍은 사진은 크롭할 여지가 적을 수 있고, 여러 제품이 지나치게 빽빽한 사진은 축소했을 때 복잡해 보일 수 있습니다. 제품의 모양과 질감이 보이며, 배너 비율에 맞춰 잘라도 중요한 부분이 남는지가 핵심입니다.

직접 촬영한 사진을 쓰거나, TalkTalkMySite의 라이선스가 있는 스톡 이미지·영상 검색에서 적절한 이미지를 찾아볼 수 있습니다. 스톡 이미지도 베이커리의 실제 상품과 다를 수 있으므로, 특정 제품을 실제 판매 사진처럼 오해하게 만들지 않는지 확인하세요. 이미지 선택만으로 방문이나 판매가 보장되는 것은 아닙니다.

• 전체 화면을 가득 채웠을 때 제품이 알아보이는 원본을 고릅니다.
• 밝은 부분과 어두운 부분이 한쪽에만 몰려 문구를 읽기 어려워지지 않는지 봅니다.
• 실제 판매 제품을 소개한다면 사진이 그 제품을 정확히 나타내는지 확인합니다.

**가상 예시:** 동네 베이커리가 사워도우를 소개한다고 가정합니다. 빵 여러 개가 화면 전체를 빽빽하게 채운 사진보다, 한 덩이의 단면이 선명하고 옆에 여백이 있는 사진이 문구와 제품을 함께 보여 주기 쉬울 수 있습니다.

3. 편집기에서 사진을 넣고 크롭합니다

TalkTalkMySite에서 배너 영역을 열어 이미지를 배치한 뒤, 사진의 확대·이동 조절 기능으로 보이는 범위를 맞춥니다. 먼저 배너의 실제 표시 비율에 맞춘 상태에서 사진을 조정하세요. 사진을 화면에 맞춰 채우면 원본의 일부가 잘릴 수 있으므로, 원본 전체가 그대로 보일 것이라고 가정하지 않습니다.

중요한 제품 부분을 배너 가운데에 무조건 놓기보다, 문구와 겹치지 않는 위치를 찾습니다. 문구를 왼쪽에 두기로 했다면 빵은 오른쪽에 두되, 가장자리와 너무 가깝지 않게 여유를 둡니다. 사진을 과하게 확대하면 빵의 형태가 잘리거나 질감이 지나치게 크게 보일 수 있습니다. 반대로 너무 축소하면 제품이 작아질 수 있습니다.

• 배너에서 실제로 보이는 크기와 비율을 기준으로 조정합니다.
• 주요 제품과 문구가 서로 겹치지 않는지 확인합니다.
• 가장자리 쪽의 빵, 접시, 손이 잘려 의미가 달라지지 않는지 봅니다.

4. 문구와 글꼴을 사진 위에서 확인합니다

사진을 정한 다음 제목과 짧은 안내 문구를 올려 읽히는지 확인합니다. 밝은 밀가루나 조명이 비치는 곳 위에 흰 글자를 놓으면 흐려질 수 있습니다. 그럴 때는 문구 위치를 옮기거나, 편집기에서 제공되는 텍스트 표현 조절을 사용해 가독성을 점검하세요. 문구를 읽히게 하려고 제품을 가리는 배치를 선택하지는 않습니다.

TalkTalkMySite는 한국어 OFL 글꼴 6종의 실시간 미리보기를 제공합니다. 배너에 어울리는 글꼴을 미리 비교하고, 실제 문구를 넣은 상태에서 획이 뭉치거나 크기가 과하게 보이지 않는지 확인하세요. 작은 안내를 길게 넣기보다 제목과 행동 안내를 구분해 간결하게 구성하는 편이 좋습니다.

• 실제 문구를 넣고 사진 위에서 읽히는지 확인합니다.
• 글꼴 미리보기를 비교하고 제목과 보조 문구의 차이를 살핍니다.
• 문구를 바꿨다면 버튼이나 다른 화면 요소와 겹치지 않는지도 다시 봅니다.

5. 모바일과 슬라이드 상태를 점검합니다

편집 화면의 넓은 미리보기만 보고 끝내지 마세요. 모바일처럼 폭이 좁은 화면에서 배너가 어떻게 보이는지 확인하고, 제품이 계속 알아볼 수 있는지, 제목이나 버튼이 잘리지 않는지 살핍니다. 화면에 따라 보이는 영역이 달라질 수 있으므로 한 번 맞춘 크롭이 모든 화면에서 완벽하다고 단정하지 않습니다.

배너 슬라이더를 사용한다면 최대 5장의 이미지를 넣을 수 있습니다. 여러 장을 넣을 때는 각 사진의 제품 위치와 문구 대비를 따로 확인하세요. 한 장에서 확보한 여백이 다른 사진에서는 사라질 수 있습니다. 배너 이미지가 바뀌어도 문구가 해당 사진에 어울리는지도 점검합니다.

• 좁은 화면에서 제품과 문구가 잘리지 않는지 확인합니다.
• 슬라이더의 각 이미지를 차례로 보고 크롭과 가독성을 점검합니다.
• 사진 여러 장이 꼭 필요한지 판단하고, 목적이 불분명한 장은 빼 둡니다.

6. 게시 결과를 확인하고 다음 편집을 정합니다

저장 또는 게시한 뒤 실제 공개 화면을 열어 배너의 크롭, 문구, 버튼 표시를 확인하세요. 편집기 미리보기와 게시 화면에서 차이가 보이면 게시 화면을 기준으로 다시 조정합니다. 사진만 바꿨더라도 제목이 배경에 묻히지 않는지, 모바일에서 주요 제품이 남아 있는지 재확인합니다.

검색 설정은 배너 크롭과 별개의 작업입니다. TalkTalkMySite의 Basic은 공통 SEO를 지원하고, Standard는 페이지별 SEO와 스토어를 지원하며, Premium은 다국어 스토어를 지원합니다. 게시된 사이트에서는 HEAD 메타 태그가 작동하지만, 사용자 지정 스크립트는 연결된 고객 도메인에서만 실행됩니다. 이런 설정은 사진 크롭 결과를 개선하거나 검색 순위를 보장하지 않습니다.

• 공개 페이지를 데스크톱과 모바일에서 다시 확인합니다.
• 수정할 점을 “제품이 잘림”, “문구 대비 부족”처럼 구체적으로 기록합니다.
• 한 번에 여러 요소를 바꾸기보다 크롭을 먼저 고치고 다시 확인합니다.

**다음 행동:** 사용할 사진 한 장을 정하고, 배너 목적·제품 위치·문구 위치를 메모한 다음 편집기에서 크롭을 맞춰 보세요. 저장 후에는 모바일 공개 화면에서 제품과 안내 문구가 모두 읽히는지 확인합니다.