카페 가로 배너 사진 크롭, 처음 만드는 운영자의 편집 순서

카페 가로 배너는 사진이 보기 좋은지만으로 완성되지 않습니다. 넓은 화면과 좁은 모바일 화면에서 피사체가 유지되는지, 문구를 얹을 공간이 있는지 함께 확인해야 합니다. 아래 순서대로 하면 사진을 고르고 자르는 단계부터 게시 전 점검까지 차근차근 진행할 수 있습니다.

1. 배너의 목적과 핵심 피사체를 정하기

먼저 배너가 무엇을 알릴지 한 문장으로 정합니다. 예를 들어 “이번 주말 딸기 라테를 소개한다”처럼 방문자가 알아야 할 내용을 구체적으로 적습니다. 그다음 사진에서 반드시 보여야 할 대상을 하나 고릅니다. 음료 사진이라면 컵 전체나 음료 표면의 특징이 핵심일 수 있습니다.

문구와 버튼을 함께 넣을 예정이라면 사진의 주인공과 텍스트가 서로 겹치지 않게 배치할 여백도 정합니다. 화면 한가운데에 중요한 피사체와 문구를 모두 몰아넣기보다, 사진에서 비어 있는 쪽에 문구를 놓을 수 있는지 살펴보세요.

• 배너의 목적을 한 문장으로 적습니다.
• 꼭 보여야 할 피사체를 하나 정합니다.
• 문구를 넣을 위치와 비워 둘 공간을 정합니다.

**가상 예시:** 신메뉴 소개 배너라면 컵의 윗부분과 색이 잘 보이는 면을 핵심으로 정하고, 짧은 메뉴명을 사진의 어두운 벽면 쪽에 놓는 구성을 검토합니다.

2. 사진을 고르고 원본의 여유 확인하기

카페 분위기와 맞는 사진을 고른 뒤, 크롭하기 전에 원본을 살펴봅니다. 피사체가 이미 화면 가장자리에 붙어 있거나 배경에 글자처럼 보이는 물체가 많으면 가로 비율로 자를 때 선택지가 줄어듭니다. 가능하면 피사체 주변에 배경이 조금 더 담긴 사진을 고르세요.

TalkTalkMySite에서는 라이선스가 있는 스톡 이미지와 동영상을 검색할 수 있습니다. 검색 결과를 사용할 때도 배너의 목적에 맞는 장면인지 확인하고, 실제 매장 사진처럼 오해하게 만드는 표현은 피하세요. 사용할 사진의 적절성이나 사용 조건은 선택한 자료와 상황에 따라 별도로 확인해야 합니다.

• 원본에서 컵, 음식, 사람의 얼굴 등 핵심 대상이 충분히 보이는지 확인합니다.
• 가장자리 가까이에 잘리면 안 되는 대상이 있는지 살핍니다.
• 사진에 문구를 놓을 만한 단순한 여백이 있는지 확인합니다.

3. 가로 비율에서 크롭하고 문구 배치하기

편집기에서 배너 사진을 넣고 가로 영역에 맞춰 크롭합니다. 먼저 사진을 프레임에 맞춘 다음, 핵심 피사체를 화면의 한가운데에 무조건 고정하기보다 목적과 여백에 따라 위치를 조절합니다. 메뉴 이름이나 짧은 안내 문구가 들어간다면 글자가 피사체를 가리거나 사진 가장자리에 너무 가까워지지 않는지 확인합니다.

사진 위 글자는 배경과 구분되어야 합니다. 사진의 밝은 부분 위에 밝은 글자를 놓으면 읽기 어려울 수 있으므로, 문구 위치를 옮기거나 배경이 단순한 사진을 택해 봅니다. 배너를 보기 좋게 만들기 위해 중요한 사진 부분을 과하게 확대하지 마세요. 확대하면 피사체가 프레임 밖으로 잘릴 수 있습니다.

TalkTalkMySite의 시각 편집에서 배너 구성을 조정하고, 제목에 쓸 수 있는 OFL 한글 폰트 6종은 라이브 미리보기로 비교할 수 있습니다. 폰트를 바꾸더라도 글자가 사진을 가리지 않는지 다시 확인합니다.

• 피사체와 문구가 겹치지 않도록 위치를 조절합니다.
• 문구를 실제 크기로 읽어 보고 배경과 충분히 구분되는지 확인합니다.
• 확대 후 컵 가장자리나 음식의 특징이 잘리지 않았는지 확인합니다.

4. 모바일 화면에서 다시 크롭 점검하기

가로 배너는 화면 폭이 달라지면 보이는 영역도 달라질 수 있습니다. 편집기에서 모바일 미리보기를 열고, 데스크톱에서 괜찮아 보였던 사진이 좁은 화면에서 어떻게 보이는지 확인합니다. 피사체가 잘리거나 문구가 두 줄로 바뀌어 사진을 덮는다면 크롭 위치나 문구 길이를 다시 조정합니다.

배너 슬라이더를 사용한다면 TalkTalkMySite에서는 이미지를 최대 5장까지 설정할 수 있습니다. 여러 장을 쓸 때는 각 사진에서 피사체가 보이는 위치와 문구 배치가 일관적인지 차례로 확인합니다. 슬라이드마다 사진이 바뀌어도 중요한 대상이 가려지지 않는지 미리보기로 살펴보세요.

• 모바일 미리보기에서 피사체의 핵심 부분이 보이는지 확인합니다.
• 문구가 사진을 덮거나 화면 밖으로 밀려나지 않는지 확인합니다.
• 슬라이더를 쓴다면 설정한 이미지마다 동일한 검사를 합니다.

5. 게시 화면에서 최종 확인하고 수정하기

저장한 뒤 실제 게시 화면에서 배너가 의도한 대로 보이는지 확인합니다. 편집기 미리보기만으로 끝내지 말고, 데스크톱과 모바일에서 문구·사진·버튼의 위치와 읽기 쉬운 정도를 확인합니다. 수정할 때는 한 번에 크롭 위치나 문구 길이처럼 한 요소씩 바꾸면 무엇이 나아졌는지 판단하기 쉽습니다.

크롭을 바꿔도 피사체와 문구가 계속 충돌한다면 다른 사진을 선택하는 것이 더 나은 해결책일 수 있습니다. 모든 화면에서 완벽하게 같은 구도가 유지된다고 가정하지 말고, 실제로 공개된 화면을 점검하세요.

• 게시된 페이지에서 배너가 정상적으로 표시되는지 확인합니다.
• 모바일과 데스크톱에서 피사체, 문구, 버튼을 각각 점검합니다.
• 문제가 생기면 크롭 위치, 문구 길이, 사진 선택 순으로 다시 검토합니다.

**다음 행동:** 배너에 쓸 사진 한 장을 고르고, 핵심 피사체와 문구를 놓을 위치를 메모한 다음 데스크톱·모바일 미리보기에서 각각 크롭을 확인해 보세요.