수학방

크롬하면 무조건 설치해야 하는 플러그인 중에 Pig Toolbox가 있죠? 이글에서는 Pig Toolbox의 기능 중 하나인 웹페이지 스타일(폰트, 색) 설정에 대해서 알아보죠.

웹서핑을 하다 보면 독특한 테마를 사용하는 사이트가 많아요. 하지만 너무 화려하게 꾸며진 사이트는 읽기도 불편하고 눈이 아프기도 해요. 가끔 가서 보는 블로그가 있는데 검은색 배경에 노란색 글자를 사용하는지라 보고 있으면 눈이 아프고 그 페이지를 나와서 다른 페이지를 보면 어지러움을 느끼거든요. 그래서 그 페이지는 제가 원하는 색으로 바꿔서 보는데 바로 Pig Toolbox의 웹페이지 스타일(폰트, 색) 설정을 이용합니다. 원래 대부분 브라우저에 있는 기능이지만 플러그인을 이용하면 조금 더 많은 부분에서 활용할 수 있어요.

Pig Toolbox 웹페이지 스타일(폰트, 색) 설정하기

Pig Toolbox의 옵션 페이지에서 중간쯤 내려가다 보면 "*웹페이지 스타일(폰트, 색)이라고 된 곳이 나옵니다.

단축키를 지정하는 칸이 있네요.

현재 페이지에 스타일 적용, 해제는 이름 그대로 현재 페이지 하나만 스타일이 적용되는 거고요. 웹페이지에 스타일 적용 시작은 현재 페이지뿐 아니라 새로 열리는 다른 페이지에서도 지정한 스타일을 적용됩니다. 단축키를 지정했다가 사용하면 좋겠죠. 저는 마우스 제스쳐에 등록해서 사용하고 있어요.

패턴 사용하기가 있는데요.

특별한 주소를 입력해서 해당 주소의 웹페이지만 스타일을 사용하거나 해제할 수 있어요. 그림처럼 입력하면 mathbang.net과 네이버에서만 지정된 스타일을 사용하고 다른 사이트에서는 원래 해당 사이트의 스타일을 그대로 사용하는 거죠. 자주 가는 사이트 주소를 입력해두면 따로 단축키를 누르지 않아도 자동으로 색이 바뀌어서 나옵니다.

패턴에 등록되지 않은 페이지에서만 단축키나 마우스 제스쳐를 이용해서 스타일을 적용하면 되고요.

기본으로 정해진 웹페이지의 스타일은 흰 배경에 검은 글자인데, 위에 있는 "스타일(폰트,색) 상세설정"에서 글꼴, 글자색, 배경색 등을 사용하자 원하는 글꼴과 색으로 바꿀 수 있어요.

웹페이지 폰트 대신 자기가 사용하고 싶은 폰트를 고를 수 있는데, 아쉽게도 영문 폰트만 나오네요. 한글 폰트는 직접 입력해도 안 되는 것 같아요.

웹페이지 칼라 사용에서는 배경색, 글자색, 링크색 등을 지정할 수 있어요. 색 입력 칸을 클릭하면 그림처럼 색을 선택할 수 있는 영역이 생겨요. 거기서 원하는 색을 고르세요. "Color Tools"를 누르면 색을 더 자세히 선택할 수 있는 창이 열리니까 그곳을 활용해도 좋을 것 같네요. 그리고 해당 페이지는 새로고침해서 바꾼 설정을 적용할 수 있습니다.

함께 보면 좋은 글

크롬 Pig Toolbox 오류 해결방법
크롬 스크롤바 색 바꾸기
크롬 개발자도구로 블로그 스킨 수정하기

EPUB은 좀 까다로운 파일입니다. 작은 오류라도 생기면 골치가 아프죠. 그래서 오류를 다 수정해야 하는데, Sigil은 이 오류를 수정하는 도구와 방법을 모두 포함하고 있습니다. 그러니까 Sigil의 사용법만 잘 익히면 완전한 EPUB 파일을 만들 수 있어요.

이 글에서는 Sigil의 도구를 활용해서 EPUB 파일의 오류를 확인하고 그 오류를 수정하는 간단한 방법을 알아보겠습니다. 오류 수정이 끝나면 EPUB 만들기도 끝이에요.

EPUB의 오류 검사, 수정하기

HTML 오류 수정하기

EPUB에 사용하는 파일은 기본적으로 HTML 파일이니까 HTML 기본 문법을 잘 따라야 합니다. IE나 크롬 같은 브라우저에서는 HTML 문법에 오류가 있어도 자체적으로 잘 알아서 표시해주지만 EPUB에서는 그렇지 않고 그냥 오류를 내버립니다. 따라서 문서를 만들 때 HTML 문법 오류가 있는지 매번 확인하고 이를 수정해야 해요.

그나마 다행인 건 미리보기 화면에서 아래 그림처럼 오류가 있는 곳을 아주 자세히 실시간으로 알려준다는 거예요.

가운데에 보면 22째 줄 24번째 글자에 오류가 있다고 그 위치를 알려주죠. 그리고 그 뒤에는 태그가 열리고 닫히는 데 문제가 있다는 내용까지 알려주고요. <p> 태그로 시작했으면 </p> 태그로 끝나야 하는데 이게 맞지 않아서 생기는 오류였습니다. 다른 태그도 마찬가지죠.

CSS 오류 검사하기

HTML 오류 수정에 이어 이번에는 CSS 오류 수정이에요. CSS 오류는 자체적으로 오류 검사를 하지 않고 외부의 W3C에서 실행합니다. CSS에 오류가 있더라도 EPUB 파일을 이용하는데 아무런 문제가 없어요. 하지만 오류가 없어야 만든 사람이 원하는 모양대로 나오죠. 그러니까 오류 검사를 해서 오류를 수정하세요.

EPUB 오류 검사, 수정하기

다음은 마지막으로 EPUB에 대한 오류 검사입니다. 도구 메뉴에 있는 "FlightCrew로 EPUB 검증하기(V) F7 "이에요. 이 오류는 꼭 수정해야 합니다. 여기에 오류가 생기면 EPUB이 제대로 만들어지지 않습니다.

이 도구를 실행하면 제일 아래에 오류 창이 생기고 오류의 자세한 설명이 나옵니다. 오류를 더블클릭하면 해당 오류가 있는 페이지의 줄로 이동하니까 오류를 찾기가 쉬울 거예요. 혹시 오류가 있는 곳으로 이동하지 않는다면 도구 메뉴의 검색 - 찾기 메뉴를 이용해서 찾을 수 있어요.

HTML, PNG, JPG 파일에서 생기는 오류는 오류 내용을 읽어볼 필요도 없어요. 대부분 파일의 주소나 링크가 잘못되어서 생기는 오류입니다.

위 그림의 첫째 줄에서 Sigil_1.png 파일이 오류가 있다고 나오는데, 이 그림 파일을 사용하는 문서에서 이미지 파일의 주소가 틀린 경우죠. 그림 파일의 주소는 "/images/Sigil_1.png"인데, 이 경로가 틀린 거예요. 혹은 문서에서는 이 Sigil_1.png 파일을 넣는 소스 코드가 있는데, 이 그림 파일이 추가되어 있지 않을 때도 오류가 생겨요. 그때는 Images 폴더에 그림 파일을 추가해주면 됩니다.

123.xhtml 문서도 마찬가지로 경로가 틀렸거나 문서가 아예 추가되어 있지 않은 경우고요.

세 번째 줄에 있는 OEBPS/content.opf 오류는 조금 다른데요. 이건 EPUB의 기본요소가 빠져있다는 뜻이에요. language와 title이 없다는 뜻인데, 이건 블로그를 전자책으로 5. Sigil 도구 활용하기에서 소개한 메타데이터 편집기에서 입력하면 됩니다.

아래 창이 열리는데요. 제목, 저자를 입력하고 언어를 선택하고 저장합니다. 그리고 다시 유효성 검증을 하면 오류가 사라질 거예요.

오류 화면의 마지막 줄에 있는 toc.ncx 관련 오류는 위에 나오는 오류를 다 수정한 후에 블로그를 전자책으로 5. Sigil 도구 활용하기에서 소개한  도구 - 차례 - Generate Table of Contents를 실행하면 없어져요.

기본적으로 오류는 파일 관련 오류가 많고 나머지는 도구를 활용해서 수정할 수 있어요. 그러니까 도구 활용법을 잘 알아둬야 하죠.

이렇게 오류를 다 수정하고 나면 저장하세요. 그러면 EPUB 파일이 만들어집니다.

생각보다 귀찮은 작업이고 어려워 보이긴 하지만 두 세 번만 해보면 이해할 수 있어요. 수정해야 할 내용이나 사용하는 도구가 매번 같거든요. 이렇게 만든 EPUB 파일을 블로그에서 공유하거나 전자책 전문 사이트를 통해서 판매할 수도 있습니다.

함께 보면 좋은 글

블로그를 전자책으로 1. 전자책의 종류
블로그를 전자책으로 2. EPUB을 만들기 위한 준비
블로그를 전자책으로 3. Sigil에 대한 소개
블로그를 전자책으로 4. HTML, CSS 파일 만들기
블로그를 전자책으로 5. Sigil 도구 활용하기

블로그를 전자책으로 만들기 쉬운 이유는 바로 둘 다 기본 형식이 HTML과 CSS로 되어 있어서예요. 물론 HTML로 된 문서가 아니더라도 전자책으로 만들 수 있긴 하지만 블로그의 글들은 이미 HTML로 되어 있으니 그 중간 과정을 많이 생략할 수 있죠.

Sigil에서 HTML, CSS 문서를 만드는 건 블로그의 스킨을 수정할 때나 글을 쓸 때 HTML, CSS를 사용하는 것과 완전히 같아요. 그러니까 스킨 수정을 많이 해봤거나 글을 쓸 때 HTML 모드를 이용해봤으면 별로 어렵지 않은 작업입니다. 물론 HTML, CSS에 대해서 전혀 몰라도 Sigil에서 문서를 만드는 건 가능하긴 한데 될 수 있으면 간단한 HTML, CSS에 대해서는 공부를 하는 것이 좋겠네요.

HTML, CSS 문서 만들기

CSS 문서 만들기

CSS 문서를 만드는 방법은 두 가지예요. 하나는 에디트플러스나 노트패드++ 등을 이용해서 CSS 파일을 만들어서 Sigil에 추가하는 거고요. 다른 하나는 Sigil에서 직접 만드는 거죠.

도구 메뉴에 있는 "+" 모양의 아이콘을 선택하거나 책 찾아보기의 Style 폴더에 마우스 오른쪽을 클릭해서 "기존 파일 추가"를 하면 이미 만들어진 css 파일을 추가할 수 있어요. Sigil에서 직접 css 파일을 만들고 싶으면 위 그림의 마우스 오른쪽 메뉴에서 "빈 스타일시트 추가"를 선택하면 돼요. 그러면 빈 스타일시트 문서가 만들어지는데 거기에 css를 작성하세요.

CSS는 블로그를 전자책으로 2. EPUB을 만들기 위한 준비에서 간단히 다뤘던 수준이면 됩니다. body, p, ul, ol, blockquote 등에 사용할 것만 있으면 돼요.

body {
color:#333;
font-size: 14px;
font-family: NanumGothic, Sans-serif;
padding:20px 10px
}

h1 {
font-size: 2em;
margin: 15px
}

뭐 이런 식이 되겠죠.

나는 CSS가 뭔지 전혀 모르겠다 하시는 분은 간단한 방법이 있어요. 티스토리 스킨 편집의 HTML/CSS 편집에서 CSS를 그대로 가져다 쓰는 거예요. 다 가져올 필요는 없고, body 부분을 가져오세요. 그리고 스킨마다 다르긴 하겠지만 대부분 스킨에 .article 어쩌고 {  } 하는 부분이 있을 거예요. 여기를 다 복사해오는데 .article 부분은 삭제하고 복사하는 겁니다. 예를 들어 .article p {   } 이렇게 되어있다면 .article을 지우고 p {  }만, .article a {  }이라면 a { }만 복사하는 거죠.

나는 이마저도 모르겠다 하시는 분은 그냥 빈 문서 그대로 놓으세요. 따로 방법이 있어요.

HTML 문서 만들기

HTML 문서를 만드는 방법도 CSS 문서 만드는 방법과 별로 다르지 않아요. CSS 파일을 추가하는 것과 똑같습니다. 이미 만들어진 문서를 추가하거나 빈 HTML 문서를 추가하는 거죠.

HTML 문서를 만들 때는 WYSIWYG 방식인 책 보기와 HTML 소스를 직접 편집하는 코드 보기 두 가지 방식이 있어요. 편한 대로 골라서 사용하세요. 하지만 EPUB에서는 HTML에 문법 오류가 있으면 안 되니까 어찌 됐든 코드 보기 방식을 통해서 오류를 바로잡고, 자잘한 수정을 많이 해야 해요.

블로그의 글을 화면에 보이는 그대로 복사해서 "책 보기" 방식에 붙여넣으면 CSS를 style로 그대로 적용해요. 그러니까 CSS를 전혀 모르는 분들은 글을 그대로 복사해다 붙여넣는 방법을 이용하면 편리합니다.

그런데 그냥 그대로 붙여넣으면 CSS 한 줄이면 될 것도 모든 문단, 모든 요소에 style이 붙어서 코드 보기에서 편집하기에 좋지 않아요. 그래서 그냥 블로그의 텍스트만 복사해서 붙이고 CSS는 CSS 파일에 넣는 게 좋죠.

스타일이 적용되지 않은 단순한 글만 가져다 붙이고, 나머지 편집은 도구 모음의 아이콘을 이용하거나 직접 HTML을 이용해서 작성하면 작성하는 도중은 귀찮지만 나중에 보정을 할 때 훨씬 편해집니다.

주의해야 할 점은 사진이나 동영상도 모두 EPUB 안에 포함되어야 한다는 거예요. 그러니까 HTML 문서를 만들기 전에 해당 글에 있는 그림 파일은 모두 내려받아 놓으세요. 그냥 글 전체를 복사해서 붙이면 웹 주소에 있는 그림을 가져다가 보여주니까 제대로 된 거처럼 보이지만 나중에 EPUB을 만든 후에는 보이지 않으니까 꼭 직접 하나씩 다 넣어줘야 해요.

그림 파일은 넣을 때는 아래 그림의 아이콘을 이용해서 넣으면 됩니다. 그림을 추가하면 그 그림 파일은 자동으로 EPUB 안에 포함돼요. "책 찾아보기"의 Images의 하위 메뉴에 그림이 추가된 걸 볼 수 있을 거예요.

그림도 문서처럼 전체를 "책 찾아보기"에 한 번에 추가한 다음에 문서를 편집할 때 넣을 수 있지만 그림을 하나씩 삽입하는 게 빠뜨리지 않고 실수를 줄이는 방법이죠.

그리고 또 주의해야 할 게 링크예요. 글을 그냥 그대로 복사해서 붙이면 링크 주소도 그대로 복사되죠. 예를 들어 블로그의 글에 있는 글을 복사했는데, 내용 중에 내부링크 http://mathbang.net/123이 들어있다면 이 http://mathbang.net/123이라는 글도 123.html이라는 이름으로 만들어서 EPUB 안에 넣어주고 링크 주소를 바꿔줘야 해요.

http://mathbang.net/123 → ./123.html

이 문서를 EPUB 안에 포함하지 않을 거라면 클릭이 되지 않도록 http://mathbang.net/123이라고 그냥 단순한 문자로 표시하는 게 좋아요.

링크 주소를 수정하는 게 어렵다면 일단 문서를 다 만들어서 책 목록보기에 파일을 다 추가한 후에 도구 메뉴를 이용해서 링크만 따로 연결해도 괜찮아요. 링크를 수정하는 건 위 그림에서 오른쪽 끝에 있는 클립모양의 아이콘을 이용합니다.

EPUB 안에서 사용하는 그림, 동영상, 링크된 문서는 모두 EPUB 안에 포함되게 하는 것이 좋습니다. 그 안에서 모든 것을 다 할 수 있도록 말이죠. 반대로 말하면 EPUB 안에서 사용하는 그림, 동영상, 링크된 문서가 모두 EPUB 안에 있어야 해요. 파일이 없다면 아래 같은 오류 메시지가 나와요.

This OPS document is reachable but not present in the OPF <spine>. "Reachable" means that a reference of some kind that points to this resource exists in the epub.

• 본문을 그대로 복사해서 붙이거나 문자만 붙인 후에 HTML 코드를 직접 편집
• 사진, 동영상, 링크된 문서는 모두 EPUB 안에 포함시키고 그 링크도 EPUB 내부 링크로 수정

이 두 가지만 기억하면 되겠네요.

함께 보면 좋은 글

블로그를 전자책으로 1. 전자책의 종류
블로그를 전자책으로 2. EPUB을 만들기 위한 준비
블로그를 전자책으로 3. Sigil에 대한 소개

사실 전자책을 만드는 방법은 매우 쉬워요. 전자책을 판매할 수 있는 사이트들은 모두 전자책을 만들 수 있는 편집기와 변환 기능을 제공하니까요. 이런 편집기를 이용하면 그냥 문서 작성하듯이 전자책을 만들 수 있어요. 한글 파일이나 워드 파일을 만들고 이걸 전자책으로 변환할 수도 있고요. 티스토리 플러그인 중에 viaBook이라는 플러그인이 있는데, viaBook이 바로 전자책을 아주 쉽게 만들 수 있는 사이트입니다.

그에 비해 제가 쓰려고 하는 EPUB 만드는 방법은 귀찮고, 새로 배워야 하는 것도 많죠. 하지만 자기 손으로 만들어 먹는 집밥이 전자레인지에 돌려먹는 즉석식품보다 맛있는 것처럼 직접 EPUB을 만드는 것이 훨씬 더 좋은 결과물을 만들 수 있어요. 자기가 원하는 모습으로 만들기도 쉽고 나중에 수정하기도 더 쉽고요. 배포도 자유롭죠.

EPUB을 만들기 위한 준비

HTML

EPUB은 기본적으로 압축파일이에요. 이 압축 파일 안에 여러 파일이 들어가서 전자책이 되죠. 이 중에서 가장 중요한 파일은 xhtml 파일인데, 그냥 html 파일과 똑같아요. 그러니까 EPUB을 만들려면 HTML을 알아야 해요.

HTML을 많이 알면 좋지만 다 알 필요는 없고 필수로 들어가는 몇 가지만 알면 돼요.

hX: 제목
p: 문단
br: 줄 바꿈
a: 링크
ul: 순서 없는 목록
ol: 순서 있는 목록
li: 목록을 이루는 각 항목
blockequote: 인용구
img: 그림 넣기
object: 동영상 넣기

그 외에 div, span 정도만 알고 있으면 웬만한 epub은 다 만들 수 있어요.

왜냐하면 블로그 스킨을 꾸미는 데는 많은 HTML 요소들이 들어가지만 실제 본문을 쓸 때는 위에 나온 태그 정도만 필요하거든요.

블로그에 있는 글 하나를 선택해서 HTML 모드로 열어보세요. 실제 사용된 태그는 위에 있는 게 다 일 거예요.

CSS

HTML이 문서의 구조를 만드는 데 사용된다면 CSS는 디자인을 꾸미는 데 사용돼요.

글자 크기, 색, 정렬, 밑줄, 간격 등 모든 것을 할 수 있어요. CSS는 꾸미기 나름이라 꾸미고 싶은 정도에 따라 알아야 할 내용에 차이가 많아요.

background: 배경
border: 테두리
color: 글자색
font-size: 글자 크기
font-family: 글꼴
margin: 바깥쪽 여백
padding: 안쪽 여백
text-align: 정렬
line-height:  줄 간격

여기에 class, id를 알면 됩니다.

생각보다 많이 몰라도 상관없죠? 블로그의 글에만 적용되는 CSS가 많지 않으니까요.

티스토리 블로그의 스킨을 수정할 수 있는 정도라면 HTML과 CSS를 충분히, 어쩌면 넘치게 알고 있다고 할 수 있죠.

혹시 모르는 HTML과 CSS가 있다면 W3Schools.com에서 공부할 수 있어요.

별로 어렵지 않은 HTML, CSS니까 다 이해하는데 한 두시간이면 될 거예요. EPUB 문서를 만들면서 실제 연습이 되니까요. 전자책을 만들 때 사용할 블로그의 글들이 한 두개만 있는 건 아니잖아요. 수십, 수백개의 문서를 이용하다보면 자연스럽게 터득하게 되죠.

함께 보면 좋은 글

블로그를 전자책으로 1. 전자책의 종류
txt, pdf, zip 파일을 epub으로 변환하기
전자책 무료 다운로드 - 직지 프로젝트 epub 파일

전에 애드센스 반응형 광고 노출되지 않게 하기라는 글을 쓴 적이 있는데요. 애드센스 반응형 광고를 화면의 크기에 따라서 보이지 않게 하는 방법에 대한 소개였어요. 보통 애드센스 광고를 숨기는 건 정책위반인데, 이 방법은 애드센스에서 공식적으로 허용하는 숨기기였죠.

그런데 댓글에 이 방법이 통하지 않는다는 글을 남겨주셨습니다. 반응형 애드센스 모바일 상단! 이거 왜이렇죠? 애드센스 코드상의 문제는 없어보여서 뭔가 다른 곳에서 잘못되었나 보다하고 그냥 넘어갔는데, 실제 광고를 적용해보니 코드 상의 문제였네요. 그 해결방법을 공유합니다.

애드센스가 숨겨지지 않는 문제 해결

애드센스 광고가 제대로 숨겨지지 않는 건 인라인 css와 내부 <style>에 적용된 css의 우선순위때문이었어요. 자세한 건 아래에서 설명하기로 하고 일단은 해결방법부터 알아보죠.

아래는 애드센스에서 제공하는 반응형 광고의 코드와 도움말에 나오는 광고 코드를 숨기는 광고 코드를 비교한 그림입니다.

두 번째 그림에서 광고를 숨기는 가장 중요한 요소는 형광펜으로 칠해진 @media (max-width:400px) {.my_adslot {display:none}}이에요. 바로 광고를 숨기는 코드죠. 이게 제대로 작동하지 않는 게 이 글을 쓰게 된 원인이에요.

그 외에 형관펜과 빨간색 줄로 표시된 차이가 보이죠? <style>의 .my_adslot {}에는 display:inlie-block이 생겼고, <ins> 태그의 두 번째 줄에 있던 style="display:inline-block"이 없어졌죠? 여기까지 해야 광고가 제대로 숨겨지는 겁니다.

방법은 간단해요. 두 번째 그림에 빨간색으로 표시된 것처럼 <ins>에 있는 style="display:inline-block"을 <style>로 옮겨주는 거죠.

문제가 생긴 이유

CSS를 적용하는 방법은 세 가지가 있어요. 외부의 CSS 파일을 사용하는 방법, 내부에서 Style을 지정하는 방법, 태그 안에 인라인으로 CSS를 적용하는 방법이요.

첫 번째 방법은 css를 별도의 파일에 만들어놓고 html 문서의 처음에 이 파일의 주소를 입력하는 방법이에요. 티스토리의 스킨 편집에 보면 아래같은 문장이 있을 거예요.

<link rel="stylesheet" href="./style.css" media="screen" type="text/css">

두 번째 방법은 외부 파일이 아니라 html 문서의 처음에 직접 css를 적용하는 겁니다.

<style>
  p {margin: 10px 0}
  a {color:#00f}
  .adsense {border:solid 1px #ccc}
</style>

세 번째는 태그에 직접 인라인 CSS를 사용하는 거죠.

<p style="margin:10px 0">안녕하세요.</p>

세 가지 방법을 공통으로 적용할 수 있는데, 만약에 하나의 요소에 서로 다른 설정이 되어 있다면 어떻게 될까요? 그때는 인라인 CSS이 가장 우선시되고 그다음이 내부 CSS, 외부 CSS 순서예요.

위 애드센스 코드에서 가장 우선되는 코드는 <ins>안에 있는 인라인 CSS인 style="display:inline-block"이죠. 내부 CSS인 <style>의 @media ……… 에서 아무리 설정을 바꿔봐야 소용이 없어요. 그래서 인라인 CSS를 지워서 문제를 해결한 겁니다.

처음에 문제가 있다는 댓글을 봤을 때는 <style>에 있는 css만 고치면 된다고 생각하고 아래 부분의 <ins>에 또 css가 있을 거라고는 생각조차 못했죠. 그래서 그 원인을 도통 알 수가 없었어요. 가장 기본에서 생각하면 간단히 해결될 일인데 말이죠.

아무튼 이번 기회에 광고를 새로 정리했습니다.

함께 보면 좋은 글

애드센스 반응형 광고 노출되지 않게 하기
애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
애드센스 수입 향상 팁 - 텍스트 광고 편
애드센스 필수 가이드북
애드센스 최적화 배치 방법, 히트맵(headtmap)

모바일 트래픽이 증가하면서 모바일 애드센스에 대한 관심이 높아졌죠? 모바일 트래픽을 조금이라도 이롭게 하기 위해서 모바일 페이지에도 애드센스를 넣는 추세입니다.

특히 모바일 페이지에는 가독성을 해치지 않고, 무효클릭도 예방할 수 있는 320x50광고를 많이 사용하죠. 그런데 이 광고는 PC에서는 효율이 매우 떨어져요. 그래서 320x50 광고를 모바일에서는 보이고, PC에서는 보이지않게 하는 다양한 방법이 알려져 있어요.

하지만 이런 방법들을 사용할 때 주의할 점이 있어서 알려드려요.

애드센스 모바일 광고 넣을 때 주의할 점

티스토리의 모바일 페이지는 스킨 수정이나 css를 사용할 수 없어서 모바일에서 보이는 광고는 본문에 직접 광고 코드를 넣어야하는 불편함이 있어요. 그런데 본문에 직접 광고를 넣으면 이 광고는 PC에서도 보이고 모바일에서도 보이게 돼요.

그래서 애드센스가 모바일에서는 보이고 PC에서는 보이지 않는 여러가지 방법을 사용합니다. 그 중에 html과 css를 이용한 방법이 있어요. 그 방법은 아래와 같아요.

관리자 - 스킨 편집 - style.css에 아래 내용을 넣어요.

.mobile {display: none}

그런 다음 글을 쓸 때마다 본문에 애드센스 광고 코드를 매 본문에 삽입해 줍니다. 물론 html 모드에서요.

<dis clsass="mobile">
애드센스 광고 코드
</div>

이렇게 하면 애드센스 광고는 모바일에서는 표시가 되지만 PC에서는 표시가 되지 않아요. 적용도 잘 되면서 가장 쉬운 방법이에요.

그런데 이 방법에는 문제가 있어요. 바로 애드센스에서 하지 말라는 방법이거든요. 애드센스의 광고 코드를 수정할 수 있는 몇 가지 예시가 있는데, 위 사항은 거기에 해당하지 않아요.

애드센스 도움말 - 애드센스 광코 코드 수정을 보면 허용되지 않는 광고 코드가 나와있어요. 그 중 첫번째가 바로 광고를 숨기는 건데, 그 예시로 css의 display:none이 나와있어요. 

빼도 박도 못하고 아주 정확하게 나와있죠?

그래서 위에서 소개한 방법은 사용하시면 안돼요. 모바일과 PC에서 모두 보이는 애드센스를 사용하거나 반응형 디자인에 있는 소스를 변형해서 사용하시는 게 가장 좋습니다.

함께 보면 좋은 글

애드센스 크롤러 오류 원인과 해결 방법 - 스코어카드
애드센스 타겟팅 - 문맥 vs 관심기반 vs 게재위치
애드센스 크기가 작은 광고가 나올 때
애드센스 광고 게재위치 정책 이해하기
애드센스 최적화 배치 도움되는 곳
애드센스 수익 향상 팁 - A/B 테스트
AdSense 정책의 전반적인 이해 - 행아웃 온에어 세션 요약
애드센스를 본문 상단 오른쪽에 넣기

검색엔진 최적화 (SEO) 두 번째 입니다. 첫번째에서는 메타 태그 사용에 관한 내용이었다면 이번에는 사이트의 속도를 빠르게 하여 검색엔진 최적화를 하는 방법입니다.

페이지가 열리는 시간은 검색엔진 최적화를 위해서만이 아니라 사용자들을 위해서도 꼭 필요한 내용입니다. 페이지 열리는 시간은 해당 사이트와 만나는 첫인상이라고 할 수 있으니까요.

또, 페이지가 열리기 전에 나가버리면 이탈률에도 상당히 영향을 미치고요. 이래 저래 사이트 운영에 있어서 중요한 요소가 바로 페이지 로딩 속도지요.

검색엔진 최적화 - 사이트 속도를 빠르게

이번 글 역시 검색엔진 최적화를 측정할 수 있는 SEOCert에서 수학방 블로그를 측정한 결과에 나오는 내용들을 발번역한 겁니다.

Loading Time

사이트 속도는 중요한 요소입니다. 속도가 늦은 것은 사용자들의 큰 불만사항 중 하나입니다. 로딩 시간이 너무 길면 서버나 네트워크, 코드, 구조를 살펴볼 필요가 있습니다.

• 1초 미만의 시간이 이상적이고, 사이트를 여는데 5초가 넘으면 사용자들과 검색엔진은 인내심이 다할 겁니다.
• 크기를 작게 하고 서버 응답을 더 빠르게 함으로써 웹사이트를 최적화하여 SEO를 향상시키세요.

이 내용이 중요하지 않다고 생각하는 사람은 없을 겁니다. 그 방법이 중요하겠죠. 블로그를 처음 시작할 때는 여러 가지 위젯도 넣어보고, 꾸미기도 했지만 이제는 그냥 필요한 것들만 남기고 다 지웠어요. 속도가 빠른 것이 보기에도 쾌적하더라고요.

page size

페이지의 크기는 웹사이트의 속력에 영향을 줍니다.

• 페이지 크기를 30kb ~ 150kb 사이로 유지하세요.
• 분리된 별도의 파일에 javascript와 style sheet를 넣고, 메인 페이지로 링크시키세요.
• 웹에 최적화된 이미지를 사용하고 다운로드을 할 때 gzip으로 다운로드 하도록 서버를 설정하세요.

너무 많은 이미지를 사용하거나 불필요한 스크립트 파일을 넣는 건 피해야 합니다.

그리고 많은 티스토리 블로거들이 블로그의 속도를 빠르게 하기위해서 gzip으로 압축하는 코드를 skin.html에 넣는데, 단순히 skin.html에 넣는다고 적용되는 건 아닙니다. 사용자가 할 수 있는 부분이 아니거든요. 그리고 그 코드를 넣지 않아도 되는데, 티스토리 자체적으로 gzip으로 압축하도록 설정되어 있어요. 측정사이트에서 측정을 해보면 해당 코드를 넣었을 때와 넣지 않았을 때 모두 gzip으로 압축되어 있다고 나옵니다.

script

스크립트들을 메인 페이지와 같은 파일에 넣는 것보다는 하나로 합쳐서 외부파일로 링크시키세요.

• in-page-scripts 사용을 줄이고, 별도의 분리된 파일로 만들어서 링크시키세요.
• 외부 스크립트 파일의 수를 줄이는 것은 브라우저가 서버로 부터 http 요청 수를 줄이는데 도움을 줄 것입니다.
• 스크립트 파일을 최적화하고 압축하면 크기를 줄이고, 로딩을 빠르게 할 수 있습니다.

이 내용은 script뿐 아니라 css에도 똑같이 적용되는 내용이에요. 하지만 티스토리에는 기본적으로 너무 많은 외부 스크립트 파일과 css 파일이 있어서 사용자가 할 수 있는 부분이 별로 없습니다.

그렇다고 그냥 내버려 둬서는 안돼요. 사용자가 직접 추가하는 script나 css에는 꼭 적용하세요. 블로그 로딩속도를 빠르게 - CSSTidy와 블로그 로딩 속도 빠르게 하기 - javascript 압축에 자세히 설명되어 있습니다.

함께 보면 좋은 글

검색엔진 최적화(SEO) 1 - meta 태그, title, keywords, description
검색엔진 최적화(SEO) 3 - 도메인, 텍스트 편
검색엔진 최적화, SEO를 위한 meta, title, desciption, keywords 사용법
블로그 로딩속도를 빠르게 - 이미지 용량 줄이기
블로그 로딩속도를 빠르게 - CSS Tidy
블로그 로딩 속도 빠르게 하기 - javascript 압축
블로그 속도 측정 - Google PageSpeed Insights

댓글에 가끔 인쇄 버튼 만들어 달라고 하는 분들이 계시더라고요. 인쇄버튼을 어떻게 만드는 지 모르거니와 검색해보면 자바스트립트를 이용한 팁들이 있는데, 좀 어렵더라고요.

그래서 그냥 브라우저 메뉴의 파일 - 인쇄를 사용하시라고 했죠. 대신 인쇄할 때는 본문만 필요하니까 광고, 사이드바, 댓글 등은 인쇄되지 않는 인쇄 페이지를 만들어 사용하고 있어요.

CSS를 이용하기때문에 어려운 자바스크립트를 알 필요도 없고, 인쇄할 페이지를 제가 직접 디자인할 수 있기때문에 장점이 많은 방법이기도 합니다.

CSS로 인쇄 페이지 만들기

CSS의 media type을 이용하는 방법이에요. CSS는 페이지를 디자인하기 위한 언어인데, 웹에서 보이는 화면이나 인쇄할 때 프리젠테이션할 때 등 다양한 환경에 따라 다르게 적용할 수 있어요. 이 중에서 프린터를 사용할 때 보여주는 화면을 CSS로 설정해서 인쇄 페이지를 꾸미는 거예요.

관리자의 HTML/CSS 편집에서 style.css에 @media print{ }을 적고 { } 사이에 인쇄 페이지에서 사용할 CSS를 넣기만 하면 됩니다. CSS는 스킨 편집을 자주 하시는 분이라면 어렵지 않게 하실거라 생각해요.

이 방법을 사용할 때는 숨기고 싶은 모든 항목에 선택자인 class나 id가 지정되어 있어야 해요. 선택자가 없다면 직접 지정해주시면 됩니다.

CSS 속성중에 화면에 표시하지 않도록 하는 display:none을 이용해서 인쇄할 페이지에 광고나 사이드바, 댓글 들을 보이지 않도록 할 꺼니까요.

사이드바를 숨기고 싶다면 #sidebar {display:none} 하면 돼요. 인쇄할 필요가 없는 모든 선택자들을 죽 쓰고 마지막에 {display:none}을 사용하면 되죠.

이 외에도 CSS인 건 마찬가지니까 다른 글자 크기나 여백 등의 다른 CSS 설정들도 사용할 수 있어요.

아래는 인쇄 페이지를 만든 css 보기에요.

@media print {
 body {
   background:transparent;
   font-size:13px;
   width:auto
 }

 #container {
   background:transparent;
   margin:20px;
   padding:0;
   width:auto
 }

 #content {
   background:transparent;
   margin:10px;
   padding:0;
   width:95%
 }

 #ttDesk_AdminDiv,#ttDesk_alert,#header,#sidebar,#footer,.another_category,.trackback,.navigation,.comment,.blogger-news-widget,.tagTrail {
   display:none
 }
}

 아래는 실제 적용된 인쇄 페이지입니다. 광고와 사이드바 없이 본문만 깔끔하게 인쇄되겠죠?

실제로 티스토리에서는 본문 외에 여러가지 항목들이 있어서 이 걸 다 적어줘야하는 불편함이 있어요. 또 선택자가 없는 경우는 선택자를 입력도 해줘야하고요.

자바스크립트를 이용해서 인쇄 버튼을 만드는 것보다는 불편한 방법이긴 하지만 인쇄할 페이지를 꾸밀 수 있다는 장점이 있으니 사이트를 잘 알릴 수 있도록 한 번 꾸며보세요.

함께 보면 좋은 글

블로그 로딩속도를 빠르게 - CSS Tidy
블로그 로딩 속도 빠르게 하기 - javascript 압축
W3C CSS 유효성 검사, CSS Validation Service
블로그 속도 측정 - Google PageSpeed Insights
애드센스 최적화 배치 도움되는 곳

블로그 로딩속도 빠르게하기 두 번째 입니다. 이번에는 CSS Tidy를 통해 CSS의 용량을 줄이고 최적화하여 속도를 빠르게하는 방법입니다.

Tidy는 소스의 불필요한 부분을 제거해주고, 일부 오류도 바로 잡아주는 역할을 하기때문에 용량을 줄이는 것뿐 아니라 부수적인 이점도 있어요. 그러니까 꼭 사용해보세요.

용량 줄여봐야 얼마나 효과가 있겠어? 하시겠지만 0.1초라도 빨라지면 좋은 거잖아요. 티스토리가 아닌 설치형 블로그나 홈페이지를 사용하시는 분들께는 트래픽을 조금이라도 아낄 수 있어서 좋고요.

CSS Tidy

HTML/CSS 수정하는 전용편집기를 사용하시는 분들은 CSSTidy를 다운받아서 편집기와 연결해서 사용하시면 좋아요. 사용법이 자세히 나와있으니 참고하시고요.

전용 편집기를 사용하지 않는 분들은 온라인에서 사용할 수 있는 사이트가 있으니 걱정마세요.

Clean CSS

크게 세 부분으로 나눠져 있는데요. 왼쪽은 CSS를 입력하는 칸 입니다. 여기에 수정할 CSS를 넣으세요.

압축율을 선택하는 설정인데, Highest는 빈칸이나 공백을 다 삭제해버려서 읽기는 어렵지만 가장 작은 크기로 압축하는 설정이에요. css를 수정할 일이 없는 분들이라면 Highest를 선택하셔도 되지만 가끔씩 수정하실 생각이라면 Standard를 선택하세요.

아래는 좀 더 자세한 설정을 하는 곳이에요.

Preserve CSS: 주석, 핵 등의 사항을 삭제하지 않고 남겨두는 옵션

Sort Selectors (caution): 선택자들을 정렬하는 설정인데, 웬만하면 체크하지 마세요. 순서가 바뀌면 설정의 우선순위도 바꿔요.

Sort Properties: 속성들을 알파벳 순서로 정렬하는 설정

Regroup selectores: 같은 속성을 가진 선택자들을 하나로 합치는 설정. A와 B 선택자 모두 color:#333라는 속성을 가졌다면 따로 따로 두 번 쓰는 것보다 둘을 합쳐서 한 번에 쓰는 게 더 효율적이겠죠?

.article {color:#333}
.sidebar {color:#333}
 -> .article, .sidebar {color:#333}

Lowercase selectors: 선택자를 소문자로. CSS의 선택자는 대소문자를 구별하는데, 전부 소문자로 바꿔버리면 적용이 안돼요. 그러니까 절대로 선택하지 마세요.

Optimise shorthands: 여러개로 나눠져있는 같은 속성을 하나로 합하는 설정.

.article {margin-top:10px; margin-bottom:15px; margin-left:20px; margin-right:25px}
-> .article {margin:10px 25px 15px 20px}

Remove last ; : 세미콜론(;)는 각 속성을 구분하는 건데, 마지막에는 구분할 게 없으니 삭제해도 되겠죠? 한글자라도 줄이는 게 좋잖아요.

나머지는 읽어보면 아실테니까 넘어가죠.

저 그림처럼 설정하시면 될 거에요.

설정을 마치고 Process CSS 버튼을 누르면 CSS Tidy가 CSS의 용량을 줄여줍니다. 줄인 CSS를 그대로 사용하시면 돼요.

모든 CSS를 다 사용하지 않아도 돼요. 다른 블로그에서 가져온 팁 중에 본인이 수정을 할 수 없을 경우에는 해당 CSS만 Tidy를 통해서 용량을 줄여도 돼죠.

CSS의 용량을 줄인 다음에는 HTML 중간중간에 넣지 마시고 문서의 HEAD에 넣으면 블로그 로딩이 더 빨라집니다.

함께 보면 좋은 글

블로그 로딩 속도 빠르게 하기 - javascript 압축
블로그 속도 측정 - Google PageSpeed Insights
구글 페이지랭크 (Google PageRank) 알아보기
애드센스 최적화 배치 도움되는 곳

요즘에는 웹표준, 웹접근성 등의 이야기를 많이 하죠. 그래서 HTML의 유효성 검사도 많이들 하시는 것 같더라고요. W3C에서 제공하는 CSS 유효성 검사라는 게 있는데, 아시는 지 모르겠네요.

저도 처음에는 웹표준에 맞게 스킨의 HTML을 작성했지만 한 번 해놓으면 끝나는 것이 아니라 글을 쓸 때마다 매번 신경써줘야하는 거라서 매우 귀찮더라고요. 여러가지 플러그인이나 기능을 사용할 수 없기도 하고요. 그래서 지금은 포기한 상태에요.

CSS Validation Service

그에 반해 CSS는 한 번 해놓으면 글을 쓰는 것과 전혀 상관이 없어요. 물론 수정할 수 있는 부분이 많지 않아서 100% 만족시키기는 어렵지만 한 번의 설정으로 효과를 볼 수 있지요.

W3C에서 제공하는 CSS 유효성 검사 사이트에 접속합니다.

W3C CSS Validation Service

주소를 이용하거나 파일업로드, 직접 입력의 세 가지 방법으로 검사를 할 수 있어요. 블로그 주소를 넣고 검사 버튼을 눌러보죠.

검사 결과가 나와요. 윗쪽에는 오류, 가운데는 경고, 마지막은 오류를 수정한 css입니다.

오류가 110개나 나왔네요. 하지만 티스토리 사용자가 수정할 수 있는 css 파일은 style.css 파일밖에 없기 때문에 수정할 수 있는 오류는 아래 5개 뿐이에요. 나머지는 티스토리의 기본 파일이라 수정이 안돼요.

오류는 설정한 CSS가  제대로 적용되지 않아요. 따라서 꼭 수정해야하는 내용이지요. 대부분은 오타이거나 세미콜론(;)을 빼먹는 등 아주 단순한 실수들이에요. 그 외에 생기는 오류들은 css 정보를 제공하는 사이트를 참고하여 수정하면 됩니다.

일부는 css 버전에 따라 달라 생기는 오류도 있어요. 위 첫번째 그림의 "추가설정"에서 css 버전을 달리해서 검사하면 확인할 수 있어요.

경고는 수정하지 않아도 블로그의 모양에는 아무런 이상은 없지만 좀 더 효율적인 CSS가 될 수 있도록 가능하면 수정해주세요.

맨 아래에 보면 오류를 수정한 css가 나오는데 그걸 그대로 가져다쓰면 블로그가 원래 본인이 생각했던 것과 다르게 보일 수 있어요. 그래서 복사해서 사용하는 건 추천하지 않고, 그냥 오류 내용을 수정하시는 게 나아요.

여담이지만 티스토리는 기본적인 규칙도 지키지않는 css파일을 사용하는 지 모르겠어요. 아마도 핵을 쓴 것 같은데, 굳이 그럴 필요가 있는 지 의문이에요.

블로그 속도 측정 - Google PageSpeed Insights에서도 티스토리의 플러그인들 때문에 속도를 조금 더 빠르게 할 수 없었는데, css에서도 문제가 있네요.

함께 보면 좋은 글

블로그 속도 측정 - Google PageSpeed Insights
네이버 오픈캐스트 통계 서비스 신설
구글 페이지랭크 (Google PageRank) 알아보기
애드센스 최적화 배치 도움되는 곳

블로그 개설 1년만에 처음으로 블로그 스킨을 수정했습니다. 스킨을 완전히 바꾼 건 아니고, 원래 스킨에서 몇 가지만 고쳤어요. 하지만 이전 스킨과는 아주 다른 느낌이에요.

날짜로는 이른 감이 있지만 이미 30도가 넘는 무더위가 시작됐으니 여름 맞이 단장이라고 해도 틀린 말은 아니겠죠?

처음 스킨에서 몇 가지 빼고, 추가한 것도 있는데 서로 잘 어울리지 않는 것도 있어서 이번 기회에 바꿔봤습니다. 아직 조금 손봐야할 게 남았지만 그런데로 괜찮네요.

블로그 단장

전에 사용하던 스킨은 초코테마인데, 전체적으로 초콜렛 색의 다이어리 느낌이 나는 스킨이었어요. 예쁘긴 한데, 색이 어둡다보니 약간 우중충하고 답답한 느낌이 있더라고요.

여름도 되고 시원하게 바꾸려고 했는데 스킨을 완전히 바꾸면 일이 커질 것 같아 눈에 가장 잘 보이는 곳 인 헤더 부분과 사이드바만 고쳐봤어요. HTML은 하나도 손 안대고, css와 이미지만 고친 것에 비하면 상당한 효과가 있네요.

Blue Stripes 스킨을 참고해서 색깔은 파란색 계열로 하고 사이드바의 폭을 넗혔더니 훨씬 더 시원한 느낌이 나는군요. 진작에 바꿀 걸 그랬어요.

당분간은 이대로 계속 사용하고 겨울이 되면 다시 초코테마로 돌아가야겠어요.

스킨 바꾸는 김에 블로그 속도 측정 - Google PageSpeed Insights에서 지적받았던 사항들도 고쳐야겠어요.

그리고 트윗버튼과 페이스북 추천 버튼때문에 로딩시간이 길어지는 것 같은데, 이걸 떼내는 게 나을 지 고민을 좀 해봐야겠네요. 다른 추천버튼에 비해서 이 두 개는 유독 느리네요.

함께 보면 좋은 글

블로그 속도 측정 - Google PageSpeed Insights

블로그에 애드센스를 넣는 위치는 여러가지가 있지만 상단에 넣는 것이 가장 수익이 많이 나죠. 본문 위에 300x250를 두 개 넣거나 336x280을 한 개 넣는 경우를 제일 많이 본 것 같네요.

지금 이 블로그는 336x280을 본문 오른쪽에 넣고 있는데, 나름 수익이 괜찮아요. 미디어다음이나 네이버 뉴스에도 본문 오른쪽 상단에 광고가 있잖아요. 다음뷰의 뷰애드도 본문 오른쪽에 넣어야 하는 규정이 있어요.

개인적인 경험으로는 본문 상단에 한 개를 넣을 때는 텍스트 광고의 클릭율이 높고, 본문 오른쪽에 놓을 때는 이미지 광고의 클릭율이 높더라고요. 대체로 이미지 광고의 단가가 더 높기때문에 저는 본문 오른쪽 광고를 선택했어요.

애드센스를 본문 상단 오른쪽에 넣는 소스

간단한 html과 css만 알면 할 수 있어요.

알아야할 html은 div에요. 보통 다른 블로그의 글에 보면 table을 많이 사용하는데, table보다 div가 더 효과가 좋다는 것만 알려드릴께요. 자세한 건 이 글에서 논할 필요가 없으니까요.

알아야할 css는 margin과 float 두 개예요.

간단하죠?

이제 html과 css를 어떻게 조합해야 하는 지 알려드릴께요.

<div class="adsense">
애드센스 광고 코드
</div>

[샵샵_article_rep_desc_샵샵]

스킨 편집의 - html/css - skin.html에서 [샵샵_article_rep_desc_샵샵]을 찾아서 그 위에 애드센스 광고 코드를 넣으세요. 본문의 너비에 따라 300x250이나 336x280을 넣으시면 돼요.

.adsense {float:right;margin-left:20px;margin-bottom:10px}

다음은 style.css에 위 내용을 넣으세요. adsense 앞에 점(.)이 있는데, 이것까지 다 넣으셔야 해요. float:right 이 부분이 광고를 본문 오른쪽에 나타나게 하는 겁니다. margin-left는 애드센스 광고 왼쪽의 여백(본문과의 거리), margin-bottom은 애드센스 광고 아랫쪽의 여백의 크기를 나타내요.

자 끝났어요. 소스를 제대로 넣었다면 아래 그림처럼 나올거예요.

애드센스의 수익은 블로그 주제에 따라서, 애드센스의 위치에 따라서, 광고의 크기에 따라서 달라지니가 자기 블로그에 맞는 걸 잘 선택해서 넣으세요. 여러가지 방법을 알아두었다가 이리저리 넣어보고 본인의 블로그에서 가장 수익을 많이 내는 방법을 찾아보세요.