☕ Blog Story / / 2020. 1. 16. 10:48

쿠팡파트너스 배너 반응형으로 만들기

반응형

최근에 쿠팡 파트너스 승인이 되어서 이것저것 해보고 있는데요. 쿠팡 파트너스는 배너를 직접 만들어서 사용하는 방식입니다. 구글 애드센스는 광고 크기와 위치만 지정하는 방식이라면 쿠팡 파트너스는 제품도 고르고 배너 사이즈와 형태를 선택합니다. 그렇기 때문에 전자제품 관련해서 글을 썼다면 쿠팡 파트너스 배너 광고도 그와 관련된 광고를 본문에다 실어줘야 좋겠지요?

 

 

하지만 그 배너를 제대로 만들어서 활용하는 사람이 많지 않은 것 같습니다. 애드센스처럼 배너를 자동으로 제공해주는 개념이 아니라서 그런지 애드센스를 잘 활용하는 사람이라면 문제없을 것 같은데 사소한 부분에서 약간의 문제점이 보이더라고요.

 

반응형으로 배너를 만들어야 PC화면에서는 넓게 보이던 배너가 모바일 화면에서는 그것에 맞게 사이즈가 작아져야 하는데 그렇지 않아서 보기에 좀 불편해 보이더군요.

 

 

반응형 배너가 아닐 경우 창크기가 작아졌을 때 프레임을 넘어 간다

 

 

바로 위 사진처럼 창크기가 줄어들 때 반응형 배너가 아닐 경우 사이즈 조절을 못하기 때문에 프레임을 벗어나서 사이트의 완성도가 떨어져 보이게 됩니다. 특히 아이패드 같은 기기로 볼 때 그런 부분이 도드라져 보입니다. 사실은 아주 잘 만든 블로그인데 말이죠. 저도 이 블로그 구현에 저 블로그를 많이 참고했습니다. ^^

 

 

 

 

이제 반응형 배너를 만들어 보겠습니다. 링크 생성에서 다이나믹 배너를 선택합니다. 여러 상품을 같이 보여주는 배너인데 반응형 배너로 적합합니다.

 

 

 

 

기존 배너가 몇 개 있지만 배너 생성을 눌러서 배너를 하나 더 만들겠습니다. 설명하려면 만들어야 하니까요.^^

 

 

 

 

배너 타입도 여러 가지가 있지만 저는 기본적으로 제공해 주는 애플 브랜드 상품 모음을 가지고 만들어 보겠습니다.

비싼 것을 팔아서 수익을 많이 가져고 싶으니까요.^^

 

 

 

 

가로 형태이든 세로 형태이든 만들 수 있는데 세로 형태의 경우 반응형이 필요가 없습니다. 폭이 좁으니까 모바일 화면에서도 보여지는데 문제가 없으니까요. 가로형태의 경우 크기 조정에서 너비를 기존의 픽셀 단위로 넣지 말고 100%로 넣어줍니다. 좀 더 작게 50% 단위 같이 그런 식도 되겠지요? 여하튼 100%로 하면 해당 프레임 좌우에 꽉 차게 됩니다. 이렇게 배너를 만들고 원하는 위치에 코드를 삽입해 줍니다. 

 

 

 

 

 

 

예제로 만든 배너가 바로 아래 보이는 배너입니다. 이 광고를 모바일에서 보면 배너의 상품 개수가 3개 정도로 줄어들 거예요.

이렇게 배너를 만들어야 아까 위에서 보여드린 배너가 프레임을 벗어나는 경우가 없습니다. 그래야 사이트의 완성도도 높아 보이겠죠? 

 

 

 

파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음

 

반응형