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