💡 일반 이미지 블록은 디스플레이 환경(브라우저의 가로 길이)이 바뀌어도 같은 비율로 이미지 크기가 조정됩니다. 그러나, 배너 블록의 이미지는 아래와 같은 특성을 가집니다.
배너 이미지의 권장 사이즈는 1920px * 560px입니다.
배너 이미지는 배경의 역할을 하며 가로가 꽉 찬 상태로 유지되는 성격을 가지고 있습니다.
1920px * 560px을 기준으로 세로 높이는 유지되고 가로 길이가 변합니다.
1920px을 기준으로 브라우저의 가로 길이가 줄면, 이미지의 좌우가 잘립니다.
1920px보다 가로 길이가 긴 브라우저 환경에서는 확대됩니다.
⠀
⠀
1. 배너 이미지 Safe Area 안내
1) 일반적인 환경에서의 배너 블록 이미지
⠀
⠀
1920px * 1080px 모니터 전체화면에서의 배너 이미지입니다. 이미지의 주요 부분인 “We are 9hire” 부분이 중앙에 있든, 왼쪽으로 치우쳐 있든 상관없이 모두 잘 보입니다. ("We are 9hire / 당신을 위한 서비스, 구하이어"를 포함한 전체가 이미지입니다.)
⠀
⠀
⠀
2) 가로가 짧은 브라우저 환경에서의 배너 블록 이미지
⠀
그러나 위 이미지 가로 길이가 1920px보다 짧은 브라우저 환경이나 모바일에서는 위 이미지처럼 배너 이미지의 경우 세로 높이는 유지되지만 가로 길이가 짧아지기 때문에 주요 이미지가 한쪽으로 치우쳐 있다면 일정 부분이 잘린 상태로 노출될 수 있습니다.
⠀
이러한 이유로 배너 블록 이미지의 Safe Area를 아래에서 안내합니다.
⠀
⠀
⠀
3) 배너 블록 이미지의 Safe Area
⠀
기본적으로 데스크톱 환경에서 배너 블록의 이미지는 1920x560 사이즈가 권장됩니다. 그 중 중앙을 기준으로 560px * 560px은 Safe Area로 설정되어 있습니다.
즉, 중앙부의 560px * 560px은 디스플레이 환경이 변하더라도 잘리지 않고 노출됩니다. 이를 참고하여 이미지를 제작하여 첨부해 주실 것을 권합니다.
⠀
⠀
⠀
⠀
2. 배너 이미지 추천 사용 방법
⠀
배너 블록을 사용할 때는 이미지 자체로 컨텐츠를 전달하는 것보다는 배너 이미지를 배경으로 하고, 텍스트를 추가해서 사용하는 것을 추천합니다.
⠀
위 이미지에서 볼 수 있듯, 배너에 텍스트를 추가하면 텍스트의 위치와 상관없이 모바일 환경에서도 추가된 텍스트가 안정적으로 노출됩니다.
💡 배너에 추가되는 텍스트 양이 너무 많을 경우 모바일 환경에서는 세로 길이가 고정된 채로 텍스트가 스크롤되는 방식이 제공됩니다.
텍스트 작성 시에는 너무 긴 설명글을 작성하기보다는 중요한 메시지를 헤드라인, 메인 카피 등으로 사용하는 것을 추천합니다.
⠀
⠀
⠀
⠀
3. 이미지 블록을 배너 블록처럼 활용하는 방법
💡 이미지 블록을 배너 블록처럼 활용할 수 있는 방법도 있습니다. 단, 이 방법은 이미지의 배경이 단색일 때 유효합니다.
⠀
⠀
⠀
⠀
이미지 블록을 추가한 후 이미지를 추가합니다.
⠀
⠀
⠀
⠀
섹션 배경을 이미지 배경 색과 같은 색으로 설정합니다.
⠀
⠀
⠀
⠀
⠀
이렇게 하면 브라우저 화면 비율대로 줄어들거나 늘어나는 이미지를 배너처럼 구성할 수 있습니다. 모바일 환경에서도 이미지가 가로로 잘리지 않습니다.
⠀
단, 배너 블록과는 달리 세로 길이가 조정되며 텍스트 추가 기능은 사용할 수 없습니다.
⠀