나는 우리가 하는 모든 일들이 아름답기를 바랍니다. 나는 클라이언트가 아름다움의 가치를 이해하고 유용하다고 여기든 말든 상관하지 않습니다. 아름다움은 내게 의미가 있습니다. 그것이 내가 삶을 살아가고 싶은 방식입니다. 나는 아름다운 걸 만들고 싶어요, 아무도 신경쓰지 않더라도.
I want everything we do to be beautiful. I don’t give a damn whether the client understands that that’s worth anything, or that the client thinks it’s worth anything, or whether it is worth anything. It’s worth it to me. It’s the way I want to live my life. I want to make beautiful things, even if nobody cares.
- Soul Bass
오늘 애드센스를 달았고, 충분히 조사하지 않은데다 성급하기까지 한 나는, 이것저것 만져 보다가 돌아오지 못할 강을 건널 뻔 하기도 하고, 서너 시간에 걸쳐 여러 가지 시행착오를 하다가, 일단 쉬기로 했어. 뭐가 이렇게 복잡한 거야.
아니, 복잡한 건 그렇다 쳐. 구글 이놈들아. 디자이너 배려 안 하니? 몇 년 사이에 너희 디자인 좀 잘한다 싶었는데, 아직 여전히 멀었구나. 뭐만 하려 하면 "수익성이 떨어질 수 있습니다", "수익 창출 전략을" 어쩌고. 돈, 돈 돈...
암튼, 나는 고결하니까.^^ 마음만은 솔 바스 같은 꼬장함이 있으니까. 디자이너의 관점으로, 포기할 건 포기하고 타협할 건 타협하고. 이 글을 읽는 그대가 나처럼 애드센스 초보이자, 사이트 디자인이 중요한 사람이라면 이 글이 분명 도움이 될 거야. '적당한 깔끔함' 정도로 광고와 타협하는 것.
1. 티스토리의 '애드센스 관리'는 비추
애드핏 하듯이, 기본 옵션으로 퉁치려고 했지. 그런데, 배너가 너무 거대하게 나오는 거야. 특히, '전체 자동광고' 메뉴는 정말... 엄청난 공해 레벨. 글을 읽을 수 없도록 덕지덕지 붙어. 아니, 그게 아니더라도 - 정사각형에 가까운 큰 배너가 핸드폰 화면 절반을 잡아먹는데... 이걸 도저히 받아들일 수 없겠더라구. ^^
아래 그림에서 왼쪽 영역을 선택하면 나오는 UI가 무척 편한 설계인 건 맞는데, 옵션이 적용되지 않아. 아무리 작고 높이 낮은 배너를 선택하더라도, 브라우저에서 보면 정사각형에 가까운 큰 배너로 바뀌어 있어. 명백한 에러. 특히, 모바일과 데스크탑을 다르게 설정하는 경우(한쪽은 반응형, 다른 쪽은 고정크기로)엔 백퍼 넙데데한 기본 배너로 출력돼.
그래서, 연동은 해두되 (수익 보긴 편하니까) 옵션은 모두 꺼놓고, 모두 수기로 HTML 파일에 삽입하기로 했어.
728x90
2. 그리드 문제
위에 애드핏 광고를 바로 붙인 거 보이지? 애드핏 광고는 728*90px의 고정형(모바일은 320px)인데, 이 스킨의 기본 그리드보다 작아. 디자이너로서 이거 좀 불편해. 그리드 깨지는 거, 나 뿐만 아니라 세상의 모든 디자이너들이 불편해할 거야. 티스토리 여러분, 해결 좀 해주셔요. 우리나라 배너 규격이 최소 300종은 넘는 걸로 아는데, 딸랑 세 개 크기 중에서 고르라니. 심지어 유동 사이즈도 구현할 수 있잖아. 응?
* Update : 결국 배너의 사이즈에 맞춰서 전체 폭을 수정함. ㅠㅠ (원래는 780px 너비였는데, 현재는 730px) ** 그런데, 주의해야 해. 광고의 기준 크기에 맞지 않으면 광고가 이상하게 보이더라구. 최소 730은 되어야 할 것 같아. 처음에 728로 하니까, 광고가 제대로 출력되지 않아. 허허벌판에 쬐만하게 이미지가 나온다던지, 보더에 이미지가 붙어서 나온다던지. 미감은 그렇다 해도, 광고의 기능까지 상실하게 되니까.
암튼, 애드센스는 동적인 크기 조절이 되는 배너를 사용하니까 이런 문제가 없을 줄 알았지. 그런데 웬걸?
왼쪽이 기본형, 오른쪽이 수정한 것.
광고 주목성을 높이기 위해 좌우를 꽉 막아두는 만행! 심지어 애드센스 매뉴얼에는 "전체 폭을 차지하는 걸 중지하면 잠재 수익이 감소할 수 있다"고 쓰여있음 (링크) ㅎㅎㅎ 그래 수익 중요하지, 그런데 아직 페이지가 끝난 게 아니거든? 이렇게 길을 막으면, 유저가 볼 때 배너가 끝이라고 생각하지 않겠니?
그래서, 힘들더라도 코딩을 좀 알아봤지.
애드센스에서 html에 붙이라는 태그 중에 data-full-width-responsive="true" 라는 구문이 있는데, 여기를 "false"로 바꿔주면 돼. 간단하지. 그럼 이걸 어디에 넣느냐 하면.
<!-- 에디터 영역 --> <div class="article-view">
영화 타이틀 모션 그래픽 디자이너로 유명한 솔 바스는 이런 말을 했어.
나는 우리가 하는 모든 일들이 아름답기를 바랍니다. 나는 클라이언트가 아름다움의 가치를 이해하고 유용하다고 여기든 말든 상관하지 않습니다. 아름다움은 내게 의미가 있습니다. 그것이 내가 삶을 살아가고 싶은 방식입니다. 나는 아름다운 걸 만들고 싶어요, 아무도 신경쓰지 않더라도.
I want everything we do to be beautiful. I don’t give a damn whether the client understands that that’s worth anything, or that the client thinks it’s worth anything, or whether it is worth anything. It’s worth it to me. It’s the way I want to live my life. I want to make beautiful things, even if nobody cares.
- Soul Bass
오늘 애드센스를 달았고, 충분히 조사하지 않은데다 성급하기까지 한 나는, 이것저것 만져 보다가 돌아오지 못할 강을 건널 뻔 하기도 하고, 서너 시간에 걸쳐 여러 가지 시행착오를 하다가, 일단 쉬기로 했어. 뭐가 이렇게 복잡한 거야.
아니, 복잡한 건 그렇다 쳐. 구글 이놈들아. 디자이너 배려 안 하니? 몇 년 사이에 너희 디자인 좀 잘한다 싶었는데, 아직 여전히 멀었구나. 뭐만 하려 하면 "수익성이 떨어질 수 있습니다", "수익 창출 전략을" 어쩌고. 돈, 돈 돈...
암튼, 나는 고결하니까.^^ 마음만은 솔 바스 같은 꼬장함이 있으니까. 디자이너의 관점으로, 포기할 건 포기하고 타협할 건 타협하고. 이 글을 읽는 그대가 나처럼 애드센스 초보이자, 사이트 디자인이 중요한 사람이라면 이 글이 분명 도움이 될 거야. '적당한 깔끔함' 정도로 광고와 타협하는 것.
1. 티스토리의 '애드센스 관리'는 비추
애드핏 하듯이, 기본 옵션으로 퉁치려고 했지. 그런데, 배너가 너무 거대하게 나오는 거야. 특히, '전체 자동광고' 메뉴는 정말... 엄청난 공해 레벨. 글을 읽을 수 없도록 덕지덕지 붙어. 아니, 그게 아니더라도 - 정사각형에 가까운 큰 배너가 핸드폰 화면 절반을 잡아먹는데... 이걸 도저히 받아들일 수 없겠더라구. ^^
아래 그림에서 왼쪽 영역을 선택하면 나오는 UI가 무척 편한 설계인 건 맞는데, 옵션이 적용되지 않아. 아무리 작고 높이 낮은 배너를 선택하더라도, 브라우저에서 보면 정사각형에 가까운 큰 배너로 바뀌어 있어. 명백한 에러. 특히, 모바일과 데스크탑을 다르게 설정하는 경우(한쪽은 반응형, 다른 쪽은 고정크기로)엔 백퍼 넙데데한 기본 배너로 출력돼.
그래서, 연동은 해두되 (수익 보긴 편하니까) 옵션은 모두 꺼놓고, 모두 수기로 HTML 파일에 삽입하기로 했어.
728x90
2. 그리드 문제
위에 애드핏 광고를 바로 붙인 거 보이지? 애드핏 광고는 728*90px의 고정형(모바일은 320px)인데, 이 스킨의 기본 그리드보다 작아. 디자이너로서 이거 좀 불편해. 그리드 깨지는 거, 나 뿐만 아니라 세상의 모든 디자이너들이 불편해할 거야. 티스토리 여러분, 해결 좀 해주셔요. 우리나라 배너 규격이 최소 300종은 넘는 걸로 아는데, 딸랑 세 개 크기 중에서 고르라니. 심지어 유동 사이즈도 구현할 수 있잖아. 응?
* Update : 결국 배너의 사이즈에 맞춰서 전체 폭을 수정함. ㅠㅠ (원래는 780px 너비였는데, 현재는 730px) ** 그런데, 주의해야 해. 광고의 기준 크기에 맞지 않으면 광고가 이상하게 보이더라구. 최소 730은 되어야 할 것 같아. 처음에 728로 하니까, 광고가 제대로 출력되지 않아. 허허벌판에 쬐만하게 이미지가 나온다던지, 보더에 이미지가 붙어서 나온다던지. 미감은 그렇다 해도, 광고의 기능까지 상실하게 되니까.
암튼, 애드센스는 동적인 크기 조절이 되는 배너를 사용하니까 이런 문제가 없을 줄 알았지. 그런데 웬걸?
왼쪽이 기본형, 오른쪽이 수정한 것.
광고 주목성을 높이기 위해 좌우를 꽉 막아두는 만행! 심지어 애드센스 매뉴얼에는 "전체 폭을 차지하는 걸 중지하면 잠재 수익이 감소할 수 있다"고 쓰여있음 (링크) ㅎㅎㅎ 그래 수익 중요하지, 그런데 아직 페이지가 끝난 게 아니거든? 이렇게 길을 막으면, 유저가 볼 때 배너가 끝이라고 생각하지 않겠니?
그래서, 힘들더라도 코딩을 좀 알아봤지.
애드센스에서 html에 붙이라는 태그 중에 data-full-width-responsive="true" 라는 구문이 있는데, 여기를 "false"로 바꿔주면 돼. 간단하지. 그럼 이걸 어디에 넣느냐 하면.
<!-- 에디터 영역 --> <div class="article-view">
이 부분 바로 아래에 넣으면 돼. 그럼 우측 이미지처럼 좌우가 기준 마진대로 떨어져 나와. 수익률이 떨어질지 어떨지는 모르지만.
왼쪽에서는 공감/ 공유/ 구독하기 버튼 위에 광고가 오게 되어서 연결이 깨지는데, 수정한 위치에 넣으면, 해당 버튼 아래로 광고가 붙게 되어서 좀 더 자연스러워 보여. 그리고 아래 태그 뭉치와 너무 붙는 것 같아서 <br> 하나 넣어줬어.
이 부분 앞에 넣어주면 돼. 너무 아래로 길게 나오면, 애드센스에서 '사각형' 버전을 선택하고, 코드를 복사해서 넣어주면 돼. 여기에는 <br> 2개. * Update : 나처럼 '최근글과 인기글' 항목에 넣든, '최근 댓글'에다 넣든 상관없는 듯, 본인의 구성 계획에 따라서.
3. 리스트는 냅둘래.
리스트는 광고 적용 포인트가 애매하기도 하고, 마치 리스트의 일부인 양 배너를 숨기는 것도 내 취향은 아니라서, 쿨하게 안 넣기로 했어. 어차피 대부분의 사람들이 글로 바로 들어오는데, 리스트에 광고 넣는 게 무슨 소용이겠어. ^^
4. 광고를 넣으려면 수동으로 넣을까 해.
애드핏은 아이패드 크기에서 320px짜리 작은 배너를 출력해. 하지만 애드센스는 너비에 항상 맞춰주지. 그런데, 이거 꽤 귀찮아. 항상 코딩을 복사해서. 글을 쓸 때 html모드로 바꾼 후, 코드를 적어줘야 하는 건데. 스마트하지는 않지만, 이게 그나마 깔끔하게 출력돼....... 아우, 귀찮기는 해.
이렇게 들어가는 거지. 모바일에서도 잘 보이고, PC에서도 잘 보이고. 귀찮은 게 탈이지만. 어쩔 수 없지.
5. 여유를 가져야 할 것 같아. 애드센스는
처음에 메일을 받고, 설정을 완료하면 바로 진짜 광고가 뜰 줄 알았는데, 거의 30분 있다가 실제 광고가 붙더라구. 그리고 설정상에서 뭔가를 바꾸는 것도 조금 텀이 생기는 것 같아. 되게 비-한국적인 상황이라 처음엔 힘들었어. (고작 3시간 전이지만)
구글은 큰 기업이라 수많은 유저를 대응하기에는 시스템에 무리가 있겠지. 이해하고 마음의 평화를 유지하길 바라. ^^
6. 왜 로딩이 안되지?
PC에서는 광고가 잘 떠. 그런데, 모바일에서는 광고가 보였다가 말았다가. 어떤 페이지에서는 보이는데, 어디선 또 안 보이고. 피씨에서 모바일 모드로 볼 때도 모든 광고가 로딩이 잘 되는데, 실제 폰에서는 왜 광고가 안보이지?
구글을 해 보니, 혹자는 '그나마 유입이 있는 포스트에만 광고가 붙는다'고 하는데, 그럴 리가. 그럼, 배너를 감안하고 디자인해서 포스팅을 올렸는데, 광고 부분이 블랭크가 된다는 거야? 그 정도로 디자인에 무심해?
아닐 거야. 아직 다 적용되지 않은 걸 거야. 침착하자고. ^^ 업데이트가 있으면 붙여 올릴게.
728x90
반응형
이 부분 바로 아래에 넣으면 돼. 그럼 우측 이미지처럼 좌우가 기준 마진대로 떨어져 나와. 수익률이 떨어질지 어떨지는 모르지만.
왼쪽에서는 공감/ 공유/ 구독하기 버튼 위에 광고가 오게 되어서 연결이 깨지는데, 수정한 위치에 넣으면, 해당 버튼 아래로 광고가 붙게 되어서 좀 더 자연스러워 보여. 그리고 아래 태그 뭉치와 너무 붙는 것 같아서 <br> 하나 넣어줬어.
이 부분 앞에 넣어주면 돼. 너무 아래로 길게 나오면, 애드센스에서 '사각형' 버전을 선택하고, 코드를 복사해서 넣어주면 돼. 여기에는 <br> 2개. * Update : 나처럼 '최근글과 인기글' 항목에 넣든, '최근 댓글'에다 넣든 상관없는 듯, 본인의 구성 계획에 따라서.
3. 리스트는 냅둘래.
리스트는 광고 적용 포인트가 애매하기도 하고, 마치 리스트의 일부인 양 배너를 숨기는 것도 내 취향은 아니라서, 쿨하게 안 넣기로 했어. 어차피 대부분의 사람들이 글로 바로 들어오는데, 리스트에 광고 넣는 게 무슨 소용이겠어. ^^
4. 광고를 넣으려면 수동으로 넣을까 해.
애드핏은 아이패드 크기에서 320px짜리 작은 배너를 출력해. 하지만 애드센스는 너비에 항상 맞춰주지. 그런데, 이거 꽤 귀찮아. 항상 코딩을 복사해서. 글을 쓸 때 html모드로 바꾼 후, 코드를 적어줘야 하는 건데. 스마트하지는 않지만, 이게 그나마 깔끔하게 출력돼....... 아우, 귀찮기는 해.
이렇게 들어가는 거지. 모바일에서도 잘 보이고, PC에서도 잘 보이고. 귀찮은 게 탈이지만. 어쩔 수 없지.
5. 여유를 가져야 할 것 같아. 애드센스는
처음에 메일을 받고, 설정을 완료하면 바로 진짜 광고가 뜰 줄 알았는데, 거의 30분 있다가 실제 광고가 붙더라구. 그리고 설정상에서 뭔가를 바꾸는 것도 조금 텀이 생기는 것 같아. 되게 비-한국적인 상황이라 처음엔 힘들었어. (고작 3시간 전이지만)
구글은 큰 기업이라 수많은 유저를 대응하기에는 시스템에 무리가 있겠지. 이해하고 마음의 평화를 유지하길 바라. ^^
6. 왜 로딩이 안되지?
PC에서는 광고가 잘 떠. 그런데, 모바일에서는 광고가 보였다가 말았다가. 어떤 페이지에서는 보이는데, 어디선 또 안 보이고. 피씨에서 모바일 모드로 볼 때도 모든 광고가 로딩이 잘 되는데, 실제 폰에서는 왜 광고가 안보이지?
구글을 해 보니, 혹자는 '그나마 유입이 있는 포스트에만 광고가 붙는다'고 하는데, 그럴 리가. 그럼, 배너를 감안하고 디자인해서 포스팅을 올렸는데, 광고 부분이 블랭크가 된다는 거야? 그 정도로 디자인에 무심해?
아닐 거야. 아직 다 적용되지 않은 걸 거야. 침착하자고. ^^ 업데이트가 있으면 붙여 올릴게.
