카페 대문 배너 이미지 사이즈가 자꾸 잘리는 이유는?

카페 대문에 공들여 만든 배너를 올렸는데 모바일에서는 양옆이 잘리거나 글자가 안 보이는 경험, 한 번씩은 겪어 보셨을 겁니다. 단순히 사이즈를 키운다고 해결되지 않는 이유가 있습니다.

왜 PC와 모바일에서 다르게 보이나요?

네이버 카페는 PC와 모바일에서 서로 다른 비율로 배너를 잘라 보여줍니다. PC는 가로형(약 1080×200), 모바일은 정사각에 가까운 영역에 맞춰 자동 크롭됩니다. 핵심은 두 비율 모두에서 핵심 메시지가 살아남도록 '안전 영역'을 가운데 두고 디자인하는 것입니다.

그러면 어떤 사이즈로 만들어야 하나요?

권장은 1080×400px PNG·JPG입니다. 가운데 600×300 영역 안에 로고와 핵심 카피를 배치하고, 바깥쪽은 배경 그라데이션이나 패턴으로만 채워 잘려도 무방하게 처리합니다. 텍스트는 최소 28pt 이상이어야 모바일에서 읽힙니다.

글자가 흐릿하게 보이는 건 왜 그런가요?

네이버는 업로드된 이미지를 자동 압축합니다. 원본을 1.5~2배 크게 만들어 올리면 압축 후에도 선명도가 유지됩니다. 단 파일 용량은 1MB를 넘기지 않는 편이 모바일 로딩 속도에 유리합니다.

마치며

배너 한 장이 첫인상의 80%를 결정합니다. 안전 영역 + 충분한 폰트 크기 + 적정 압축, 이 세 가지만 지켜도 잘림 사고는 거의 사라집니다.