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