카테고리 보관물: 테마 만들기

블로그 – 무엇을 쓸 것인가?

안녕하세요. 베누시안입니다. 제가 요즘 워드프레스에 관한 책을 만드느라고 하루에 한번 이상은 웹디자인에 관한 정보를 꼭 올리곤 했는데 몇개월째 글을 자주 못올리고 있습니다. 댓글에 답변도 제대로 못하고 있는 상황이죠. 이제 반정도 완료돼서 워드프레스 테마 만들기에 관한 내용이 남았지만 아주 내용이 많아서 2, 3개월은 더 있어야 완성될 듯 합니다. 그 이후로는 많은 웹디자인 정보를 여러분께 전달해 드리도록 하겠습니다.

다음은 제가 만들고 있는 워드프레스 책(제목 아직 미정) 3장 내용의 일부입니다. 각 장 별로 3개까지는 제 나름대로 블로그에 게재해도 좋다는 허락을 받아 올리는 것입니다.

1 . 무엇을 쓸 것인가?

1-1 블로거는 인터넷 콘텐츠의 주 생산자

블로그에 글을 올리는 것은 다양한 소셜 네트워크 서비스 중에서도 가장 어려운 일에 속합니다. 트위터나 페이스북 같은 소셜 네트워크 서비스는 글 내용이 길지 않고 맞춤법이 틀리거나 특별한 내용이 아니더라도 무엇이든 올릴 수가 있죠. 즉, 내용이나 형식에 구애 받지 않는 장점이 있습니다. 단점이라면 한번에 그치는 글이라는 점입니다. 글이라고는 할 수 없고 쪽지에 불과해서 시간이 지나면 효력이 상실되는 내용의 글입니다. 그만큼 글의 수도 많아서 일일이 찾아보기도 어렵고 인터넷 검색도 힘듭니다.

 

블로그의 시작은 인터넷이 시작한 것과 같다고 해도 과언이 아닙니다. 인터넷에서 자신을 알리고 싶어하는 본능이 HTML로 홈페이지를 만들게 됐고 더 효율적인 방법으로 블로그 프로그램이 만들어졌습니다. 웹 2.0은 공유라는 개념을 도입했고 이때부터 소셜 네트워크 서비스가 발전하기 시작했습니다. 웹 2.0 플랫폼이 나오기 전에는 정보는 정보 전달자와 수요자가 별개였지만 이후로는 정보의 전달자가 수요자를 겸하고 있습니다. 즉, 내 정보를 전달하고 남의 정보도 얻는 정보의 공유가 시작된 것입니다. 21세기의 주된 정보 전달자는 뉴스 미디어가 아닌 바로 일반인입니다.
세계 최대의 검색엔진인 구글은 블로그를 아주 좋아합니다. 우리나라 포털의 검색엔진도 마찬가지지만 검색어에 따라 광고가 우선 나오기도 합니다. 검색엔진이 블로그 글을 좋아하는 이유는 수많은 사람들이 올리는 글이 다양하고 신선하기 때문입니다. 구글에서 검색해서 나오는 글의 우선순위는 대부분 블로그의 글들입니다. 웹디자인이나 워드프레스에서 필요한 정보는 구글만 통하면 다 해결됩니다. 단 영어로 된 정보가 대부분이라는 것이 흠입니다.

1-2 콘텐츠의 생산

구글 검색을 해보면 검색어에 가장 적절한 정보가 높은 순위로 나타나서 두 페이지 정도만 봐도 대부분 원하는 결과를 찾을 수 있습니다. 하지만 국내 검색엔진은 그렇지 않습니다. 정보도 부족하고 좋은 정보라 해도 높은 순위에 있는 경우가 드물어서 한참을 찾아야 합니다. 정보의 전달자로서 국내 블로그는 아직 부족한 점이 많습니다. 정보의 종류는 많지만 높은 순위를 차지하고 많은 블로거들이 택하는 주제가 맛집이더군요. 맛집 소개에 관한 글이 이렇게 많은 것을 보면 우리나라는 먹는 데 소비를 많이 하는 것 같습니다. 더 다양하고 깊이 있는 정보가 필요하다고 봅니다.

정보의 전달자로서 블로거는 자신이 잘할 수 있고 잘 알고 있는 전문적인 정보를 글로 표현하는 것이 가장 좋은 방법입니다. 이보다 쉬운 방법은 없겠지만 대부분의 사람들은 전문 지식이 없습니다. 전문 지식을 갖고 있는 사람이 한국에서 블로그에 글을 올리는 일은 드뭅니다. 바쁘기 때문이기도 하지만 전문적인 정보를 공유하기 싫어한다고나 할까요. 이런 점에서 외국 블로그를 살펴보면 참 대단하다는 생각이 듭니다. 고급 정보가 무료라는 게 의심스러울 정도입니다.

그렇다면 어떤 글을 어떻게 올려야 좋을지 궁금해집니다. 제 경우에는 웹디자인을 위해 가장 먼저 포토샵을 시작했고 그다음에 PHP, CSS, HTML5, 자바스크립트(제이쿼리) 등 웹디자인과 관련된 분야를 넓혀 나갔습니다. PHP를 공부하던 중 워드프레스와 드루팔, 익스프레스엔진 등 PHP로 만들어진 콘텐츠 매니지먼트 시스템(CMS) 프로그램을 알게 됐습니다. 여러 가지를 하다 보니 어느 하나 전문적으로 잘하는 것은 없습니다만 이런 공부를 하면서 알게 된 지식을 정리해서 블로그에 올리는 것은 잘합니다.

 

이처럼 자신이 전문적으로 잘 알지 못해도 내가 관심이 있거나 취미로 하고 있는 일을 정리해서 블로그에 올리면 좋은 글이 됩니다. 글을 작성하면서 정보의 정확성을 위해 더 찾아보고 확인한 정보를 올리려는 책임감으로 인해 지식은 깊이를 더하게 됩니다. 내 글을 누군가 보고 정보로 삼으려면 글을 대충 올려서는 안 되기 때문이죠. 취미가 직업이 된다면 이보다 좋은 직업이 없습니다. 취미를 살려서 깊이 있는 공부를 하다 보면 직업이 됩니다.

 

내 블로그의 글을 모아서 책을 만든다고 생각하고 글을 쓰면 블로그 글은 원고가 됩니다. 사실 티스토리에 블로그를 만들어 포토샵에 관한 글을 쓰면서 PDF로 책을 만들 계획이었습니다. 포토샵은 제가 경험한 분야 중에서 가장 잘 아는 분야이기 때문입니다. 포토샵 관련 글이 200개를 넘다 보니 더는 쓸 내용이 없어서 그다음으로 잘 아는 CSS와 워드프레스에 대해 글을 쓰기 시작했습니다. 6개월 정도 쓰고 나서 다른 분야로 넘어가려고 했더니 계획에 차질이 생겼습니다.

CSS와 워드프레스 글을 본 분들이 의뢰가 들어오기 시작한 것이죠. 그래서 포트폴리오 소셜 네트워크 서비스 디자인을 담당하게 됐고 출판사에서는 워드프레스에 관한 책을 만들자는 제안이 들어왔죠. 취미로 시작한 포토샵을 발전시켜서 웹디자인을 공부하게 됐고 이제는 직업이 됐습니다. 밤새도록 작업해도 싫증이 안 나는 일이 직업이 됐으니 이보다 좋은 직업은 없으리라 생각합니다.

이 책을 보시는 여러분들도 잘 할 수 있는 것에 대한 글을 만들어 블로그에 올려보세요. 방문자가 들어와 보고 좋아할 겁니다. 그러면 더 좋은 글을 쓸 힘이 납니다. 글재주가 없다고요? 저는 글을 잘 쓰지 못해서 원고를 작성해서 출판사에 보내면 모든 게 수정돼서 돌아옵니다. 처음엔 당황스럽고 이런 사람이 책을 만들 수 있을 것인가, 라는 의문이 들고 용기가 안 났지만 한편으로는 이런 생각도 들더군요. “나는 글을 쓰는 사람이 아니라 정보를 전달하는 사람이다. 정보 전달은 글 쓰는 능력이 없어도 된다”고 말이죠. 맞는 얘기죠?

워드프레스 – Font Awesome 폰트 아이콘 사용하기

아이콘은 대부분 이미지로 된 것을 사용하지만 요즘은 아이콘 폰트를 만들어 사용하기도 합니다워드프레스 3.5버전에 포함될 새로운 기본 테마인 Twenty Twelve에 이런 방법을 사용할 수도 있다고 하는군요. 워드프레스닷컴(http://wordpress.com/i/noticons/example.html)에는 이미 사용하고 있으며 오픈 소스 개발자들을 위한 무료 웹호스팅 서비스인 Github(https://github.com/styleguide/css/7.0). 의 경우 많은 폰트 아이콘을 사용할 수 있는데 무료 공개되지는 않았습니다.

Font Awesome은 폰트로 만들어진 아이콘으로 다음 장부터 나오게 될 트위터 부트스트랩과 호환되도록 만들어졌으며 부트스트랩을 사용하지 않더라도 별개로 사용할 수 있습니다. 일반적으로 아이콘으로 사용하는 이미지 파일은 투명기능을 제공하는 PNG파일을 사용하지만 비트맵 파일이라서 크기를 변경하면 해상도가 달라져서 선명하지 않지만 폰트는 벡터이므로 크기를 늘리거나 줄여도 선명한 이미지가 나타납니다. 또한 이미지를 이용하면 사용될 때마다 HTTP Request로 인해 페이지 로딩시간이 많이 걸립니다. 그래서 모든 아이콘을 하나의 이미지에 담아 스프라이트(Sprites)로 만들어 사용하기도 합니다. 폰트 아이콘은 한번 로딩되면 추가적인 HTTP Request가 필요하지 않고 크기를 변화시켜도 선명한 화질로 표시되며 폰트의 성질을 갖고 있어서 색상변화도 자유롭습니다.

 

구글 검색을 해보면 여러종류의 아이콘 폰트가 검색되며 그중에서도 Font Awesome의 사용법에 대해 알아봅니다. 이 아이콘 폰트는 210개로 되어 있고 지속적으로 추가되고 있으며 오픈소스이지만 CC(Creative Common License)의 규약에 제한되므로 배포가 자유롭고 상업적 이용도 가능합니다. 하지만 이를 사용한 웹페이지에 Credit(출처)를 달아야하는 단점이 있습니다. Font Awesome 홈페이지(http://fortawesome.github.com/Font-Awesome/)로 이동하여 압축파일을 내려받아 압축을 해제하고 폴더 내부로 들어가며 docs폴더가 있습니다. 이곳에 들어가면 assets폴더가 있으며 index.html파일을 클릭하면 웹브라우저에 모든 폰트 아이콘이 나오고 하단에 사용법이 영어로 나옵니다.

head태그 부분에서 스타일 시트 링크 바로 위에 아래처럼 <link rel=”stylesheet” href=”<?php bloginfo( ‘template_directory’ ); ?>/assets/css/font-awesome.css”> 를 복사하여 붙여넣습니다. <?php bloginfo( ‘template_directory’ ); ?>는 테마 폴더를 표시하는 템플릿 태그입니다.

<link rel=”stylesheet” href=”<?php bloginfo( ‘template_directory’ ); ?>/assets/css/font-awesome.css”>

<link rel=”stylesheet” href=”http://localhost/wordpress16/wp-content/themes/myfirst-theme/style.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″/>

위와 같이 링크를 만들면 테마가 Font Awesome의 CSS 파일을 인식하게 됩니다. 이 파일은 아래처럼 assets폴더 내부에 있는 font 폴더에 여러 가지 버전의 폰트 파일을 저장해두고 참조하고 있습니다. 이는 웹브라우저마다 다른 형태의 폰트 확장자만 지원하기 때문에 이렇게 하면 모든 버전의 웹브라우저에서 폰트를 인식합니다.

@font-face {

  font-family: ‘FontAwesome’;

  srcurl(‘../font/fontawesome-webfont.eot’);

  srcurl(‘../font/fontawesome-webfont.eot?#iefix’) format(‘eot’), url(‘../font/fontawesome-webfont.woff’) format(‘woff’), url(‘../font/fontawesome-webfont.ttf’) format(‘truetype’), url(‘../font/fontawesome-webfont.svg#FontAwesome’) format(‘svg’);

  font-weightnormal;

  font-stylenormal;

}

아이콘의 사용방법은 두가지입니다. 하나는 HTML 페이지에 아이콘을 삽입할 곳에 HTML태그가 있을 때 <i></i>처럼 <i>태그와 클래스 선택자로 해당 아이콘 이름을 입력하는 방법입니다. 두번째 방법은 워드프레스는 어떤 경우에는 HTML 요소를 함수에 의해 자동으로 만들게 되는데 주메뉴의 경우 <?php wp_nav_menu(); ?>라는 템플릿 태그로 li 태그나 a태그를 만들기 때문에 첫번째 방법으로 클래스 선택자를 입력할 수 없습니다. 그래서 CSS의 유사 선택자(Pseudo classes)인 :before나 :after를 이용합니다. 이 선택자는 HTML페이지에 어떤 내용을 직접 입력할 수 없을 때 CSS에서 { content:’입력될 내용’; }처럼 입력하면 내용이 추가됩니다.

 현재 만들고 있는 테마의 메뉴바에서 홈 메뉴에 홈 아이콘을 삽입하기 위해서 Font Awesome 의 docs폴더에 있는 index.html파일을 클릭하여 웹브라우저에 나타나면 홈 아이콘을 찾아 오른쪽 마우스 버튼을 클릭해서 요소검사를 하면 아래처럼 나타납니다. 우측의 CSS패널에서 :before { content:”f015”; } 부분을 찾아 폰트의 UTF 코드를 알아냅니다. 숫자 앞의 기호처럼 보이는 것은 역슬래시(backward slash)입니다.

이번에는 워드프레스 페이지에서 홈 메뉴를 요소검사해서 CSS코드가 들어갈 선택자를 찾아냅니다. 선택자를 특정해야하는데 메뉴의 li 태그에는 워드프레스 템플릿 태그가 자동으로 만들어내는 각각 다른 아이디가 있어서 이 아이디를 사용하면 됩니다. style.css에서  다음과 같이 입력합니다. 폰트가 기본 색상이 검정색이므로 흰색으로 나오도록 color:#fff;를 추가하고 폰트 이름을 추가합니다. 메뉴 이름과 사이를 띄우기 위해 margin-right:10px;을 입력하면 완성입니다. 만일 선택자를 특정하지 않고 #menu-item-449를 제거하면 nav태그 안의 모든 a링크에 대해서 홈 아이콘이 삽입될 것입니다. 이처럼 특정하지 않고 아이콘을 삽입하는 방법은 같은 내용이 있는 목록, 예를 들면 카테고리 목록에 사용하면 좋습니다.

nav ul #menu-item-449 a:before { content: “f015”; color:#ffffont-family: ‘FontAwesome’; margin-right: 10px; }

이번에는 편집링크에 아이콘을 삽입해보겠습니다. 이 편집 링크는 관리자로 로그인했을 때만 나타납니다. Font Awesome 페이지에서 Ctrl+F키를 눌러 edit으로 검색하면 icon-edit을 찾을 수 있습니다. index.php에서 다음과 같이 입력합니다.

<span class=”edit-post-link”><?php edit_post_link(‘<i>편집</i>’); ?></span>

이처럼 템플릿 태그 안에 글자가 있고 이 글자가 블로그 화면에 표시되는 경우는 위처럼 아이콘을 직접 삽입할 수 있습니다. 템플릿 태그 밖에 입력하면 아이콘에 링크가 안생깁니다. <i>태그는 태그 안의 글자를 이탤릭체로 바꾸는 성질이 있습니다. 이 태그가 원래 이탤릭체로 만드는 태그였지만 지금은 태그의 정의가 바뀌었죠. 하지만 이탤릭체로 바꾸는 성질은 그대로 있으므로 글자를 일반 글씨체로 나오도록 하려면 다음과 같이 CSS에서 명령을 내리면 됩니다.

.edit-post-link i { font-style:normal;}

그런데 아이콘과 글자간의 간격이 없어서 자연스럽지 않습니다. <i>태그가 글자를 감싸고 있기 때문에 margin이나 padding을 적용해도 간격이 벌어지지 않죠. 워드프레스는 이처럼 HTML페이지에서 태그와 콘텐츠가 분리되지 않는 경우가 많기 때문에 첫번째 방법으로 아이콘을 삽입하는 것이 좋습니다. 첫번째 방법으로 하면 CSS에서 다음의 코드를 입력하면 됩니다. 이렇게 하면 아이콘이 링크에서 벗어나므로 글자만 클릭이 가능합니다. 아이콘은 장식용으로 사용될 뿐입니다.

.edit-post-link a:before { content: “f044”; color:#000font-family: ‘FontAwesome’; margin-right: 5px; }