티스토리 오디세이(Odyssey) 상단 광고 설정

티스토리 오디세이(Odyssey) 스킨의 에디터 영역 상단에 에드센스 광고코드를 설정하여, 글을 작성할 때마다 자동으로 상단에 광고가 송출되도록 하는 방법에 대해 설명하겠습니다.

 

---

- 목차

1. 에드센스 디스플레이 광고 생성 하기

2. 상단 광고 위치 찾는 법

3. 광고코드 삽입

---

 

1. 에드센스 디스플레이 광고 생성 하기

광고 설정 방법은 이전에 다룬 내용과 동일합니다. 자세한 내용은 아래 링크의 이전글을 참조해 주세요.

티스토리 오디세이(Odyssey) 사이드바 고정 광고 설정

티스토리 오디세이(Odyssey) 사이드바 고정 광고 설정

 

 

이번에는 디스플레이 광고를 사각형, 반응형으로 생성했습니다. 오디세이 스킨 자체가 반응형 스킨이며 티스토리 모바일 웹페이지 전환 설정을 사용하지 않았기 때문에 이런 선택을 했습니다.

 

광고설정

 

반응형 스킨이란, 사용자의 브라우저 환경에 따라 웹페이지 내용이 최적화되어 보이는 소스코드를 말합니다. 반응형이 아닌 경우, PC용 웹페이지와 모바일용 웹페이지가 따로 존재하며, 웹서비스는 접속자의 환경을 감지하여 접속자 환경에 맞는 적절한 페이지로 연결해 주는 기능을 가지고 있습니다.

 

모바일웹 설정

 

반응형이 아닌 경우, 이 기능을 사용하고, 광고 코드 역시 PC용과 모바일용을 따로 생성하여 사용해야 합니다. 하지만 이런 방식은 노후화되어, 요즘은 웹페이지는 대부분 반응형으로 제작됩니다. 또한 티스토리 같이 호스팅을 제공하는 플랫폼은 사용자 환경이 다양하기 때문에 웹 생태계의 변화에도 모바일 웹 자동 연결 기능을 유지하게 됩니다.

 

 

 

2. 상단 광고 위치 찾는 법

브라우저에서 F12 키를 누르면 개발자 도구가 실행됩니다. 이 도구를 활용해 원하는 광고 위치를 파악한 후, 스킨 편집을 통해 해당 위치에 광고를 삽입할 수 있습니다.

 

광고 위치 선정

 

개발자도구를 왼쪽 상단의 화살표를 클릭합니다.

 

광고 위치 찾는 과정

 

글이 없는 에디터 부분을 빈영역을 선택하여 에디터 영역이 전체 선택되게 합니다.

이렇게 하면 해당 영역의 위치를 알 수 있습니다.

 

영역선택

 

Elements 영역에서 에디터 영역에 해당되는 부분이 음영 처리로 선택이 됩니다.

이 라인을 기준으로 광고를 삽입할 위치의 데이터 영역을 찾습니다

티스토리 오디세이 스킨은 주석이 잘 달려 있어 웹페이지 영역을 확인하는 데 도움이 됩니다.

 

개발자도구

 

광고를 에디터 영역 상단에 삽입하려면, 현재 선택된 영역과 그 윗부분의 div 영역 사이에 광고를 넣어야 합니다. 윗부분을 확인해 보면 'article-view'라는 클래스와 '에디터 영역'이라는 주석문이 보입니다. 이 부분에 광고를 삽입하면 됩니다.

 

광고위치 찾기

 

3. 광고코드 삽입

티스토리 관리자 스킨 편집 메뉴 HTML 편집 모드로 접속합니다.

'article-view'라는 단어로 검색할 수도 있으며, 개발자 도구에서 확인한 영역의 형태를 비교하여 광고를 삽입할 위치를 찾을 수 있습니다. 저는 '에디터 영역'을 찾아 설정하였고, 주석문 하단에 'article-view'가 있는 클래스 영역 위치를 찾는 방법을 선택했습니다.

광고 위치 찾기

 

광고 위치를 찾았으면 생성한 광고를 삽입합니다.

 

광고삽입

광고 삽입 후 스킨 편집을 적용했다면 실제로 광고가 잘 붙었는지 확인해 봅니다.

 

광고 확인

 

광고가 그대로 삽입되었다면, 본문 내용과 광고 사이의 가독성이 떨어질 수 있습니다. 이 경우, 광고 코드 하단에 줄 바꿈 태그 <p>를 추가하면 본문 내용과 광고 사이의 간격이 생겨 가독성이 많이 좋아집니다.

---

이처럼 티스토리 오디세이(Odyssey) 스킨의 상단에 에드센스 광고를 설정해 보았습니다. 이후에는 다른 영역의 광고 설정 내용도 정리해 볼 예정입니다. 다른 영역의 디스플레이 광고의 위치를 찾는 방식도 이와 크게 다르지 않습니다.