워드프레스는 2001년에 개발되어 최근에는 전세계적으로 가장 각광받는 CMS(Contents Management System)툴이 되었다. CMS! 컨텐츠를 효율적으로 관리한다는 의미이면서 ‘지속가능한 웹’ 을 지향하는 점이 핵심이다. 웹사이트도 하나의 생명체와 같아서 시간에 따라 형식이나 디자인, 구조, 규모가 변할 수 밖에 없는데 그때마다 컨텐츠를 어떻게 보전할 것인가 하는 문제에 봉착하게 된다. 모든 포스트는 제 값의 주소를 가지고 있고 이 주소를 통해 세상 사람들과 연결된다. 글(포스트)의 내용이 삭제되는 것도 문제지만 주소값이 바뀌거나 삭제되어 버려도 마찬가지의 손해를 보게 된다. 이런 점에서 워드프레스는 코어를 유지한 채 지속적으로 업데이트되는 툴이라는 점에서 변화무쌍한 웹 환경 속에서 컨텐츠를 보호하는데 유용하다는 장점을 갖고 있다. 특히, 웹진처럼 꾸준히 많은 양의 컨텐츠를 생산, 유통시켜야하는 경우, 워드프레스는 최적의 솔루션이 될 수 있다. 최근엔 1인 또는 소규모로 사업을 시작하는 경우가 많은데 처음엔 블로그로 운영하다가 인원을 충원하여 차츰 웹사이트의 규모나 맵을 키우는 것이 바람직하기 때문에 워드프레스는 컨텐츠 관리와 성장을 고려할 때 최적의 대안으로 떠오르는 것이다.

이 같은 사례를 해외에서는 흔히 찾아볼 수 있는데, 건축 디자인 웹진으로 유명한 Dezeen의 경우를 살펴보자.

2006년에 블로그로 시작해 2008년에 구인구직관련 정보(http://www.dezeenjobs.com/)를 제공하고 2010년엔 쇼핑몰(http://www.dezeenwatchstore.com/)까지 열어 웹사이트의 사업영역을 점차 넓혀가고 있다는 점을 확인할 수 있다. 조지 루카스의 <스타워즈>가 에피소드 1부터 만들려고 했다면 완결된 시리즈가 되지 못했거나 아예 세상에 알려지지 않았을지 모른다. 장기적인 계획을 세우고 맥락은 이어가되 방법은 상황에 맞게 선택할 수 있도록 하는 것이 기술의 역할이리라.

구직사이트와 쇼핑몰까지 전체 웹사이트가 워드프레스로 구축된 Dezeen의 경우만 보더라도 웹에서 확장성은 가장 기본적인 요건임을 알 수 있다. 만약 그때 그때마다 각기 다른 개발자의 손을 타서 확장해간다면 어떨까? 매번 기존의 DB와 컨텐츠를 어떻게 옮길지 고민해야하고 경우에 따라서는 지난 컨텐츠를 수작업으로 일일이 재입력하는 일이 발생할 수도 있다.

Dezeen 외에도 최근 건축분야에서 가장 많이 알려진 arch daily에서부터 design milk, CONTEMPORIST, eVolo magazine, inhabitat, Plataforma Arquitectura, Urban Omnibus, trends now 등 다수의 해외 사이트들이 워드프레스를 기반으로 구축, 운영되고 있다.

arch daily는 최근 “ARCHITECTURE WORLD MAP” 이라는 섹션을 만들어 건축물의 위치를 구글 지도 위에 보여주는 서비스를 시작하였는데 Geo Mashup 이라는 플러그인을 활용한 것이다. (지도 좌측 하단을 보면 플로그인이 표기된 것을 볼 수 있다.) 2012년 3월 12일 기준으로 wordpress.org에는 18,722개의 플러그인이 무료로 공유되고 있다. (상용 플러그인 시장도 점차 확대되고 있는 추세라는 점을 감안하면 워드프레스의 확장성은 그 어떤 플랫폼보다도 앞서 있다고 말할 수 있다.)

웹은 무한 확장이 가능한 곳이다. 여기서부터 어디까지라는 경계도 한계도 없다. 그렇기 때문에 모든 가능성에 열려 있어야하고 반응할 준비가 되어 있어야 한다. 특히나 컨텐츠를 생산하는 웹진의 경우, 기사를 오래도록 관리하면서도 형식의 변화에 능동적으로 대처할 수 있어야 한다. 매일 하나씩 포스팅 해오던 웹사이트를 3년만에 리뉴얼을 해야할 때 1000개가 넘는 포스트가 애물단지가 되어 버린다면 매번 더 큰 비용을 지불하면서 개편을 해야하고 이런 부담은 사업의 실패로 직결될 수 있다. arch daily가 세계지도를 만들 때 저 수천개의 건축물을 일일이 재입력했을 수도 있었겠지만 Geo Mashup이라는 플러그인을 통해 기존의 포스트에 위치정보만 추가한 것이라면? 기존의 컨텐츠에 새 링크를 열어주는 것만으로 새로운 서비스가 가능해진다면 어떨까?

웹페이지가 종이신문보다 뛰어난 것이 있다면 그건 바로 하나에서 열을 엮어낼 수 있다는 점이다. 하나가 곧 열이고 스물이고 백이다. 컨텐츠 중심의 웹사이트를 구상 중이고 장기적인 계획을 세우고 있다면 이런 점을 가장 먼저 고려해야하고 워드프레스를 1순위 선정 대상으로 올려놓아야할 이유가 된다.

<?php 
   get_adjacent_post( $in_same_cat, $excluded_categories, $previous ) 
?>

싱글페이지에서 이전 또는 다음 포스트의 ID를 불러오는 명령어.

• $in_same_cat : 현재 포스트와 같은 카테고리에 속해 있는 포스트만 불러올 것인지에 대한 변수로 기본값 false이고 true로 하면 작동된다.
• $excluded_categories : 제외시킬 카테고리 ID를 입력
• $previous : 기본값 true으로 false는 최근 포스트, true는 이전 포스트. 현재 포스트의 이전/이후 어느 시점의 포스트를 검색할지 정한다.
• 예시 : <?php get_adjacent_post(true,’1,10,22′,false)); ?>

이를 응용하면 싱글페이지에서 이전 포스트, 다음 포스트의 네비게이션을 만들때 posts_nav_link 의 하이퍼링크에서 URL만 추출할 수 있다.

<a href="<?php echo get_permalink(get_adjacent_post(true,'',false)); ?>">
   PREV
</a> | 
<a href="<?php echo get_permalink(get_adjacent_post(true,'',true)); ?>">
   NEXT
</a>

위의 예시는 <?php next_post(‘% ‘, ”, ‘yes’); ?>PREV | NEXT<?php previous_post(‘ %’, ”, ‘yes’); ?>과 출력 결과가 같다.

포스트 네비게이션을 구성하는 방법을 예로 들었지만 get_adjacent_posts 는 포스트의 ID 값을 불러오기 때문에 다양하게 응용하여 사용할 수 있다.

홈페이지와 블로그를 따로 만드는 경우를 흔히 보게 된다. 왜 그렇게 할까?

첫번째 이유는 홈페이지는 기업용, 블로그는 개인적인 용도로 사용한다고 생각하기 때문이고 두번째는 블로그를 포털에서 제공하는 서비스의 일부로 오해하는 경우다.

SNS 안에서 공과 사를 구분하긴 어렵다. 물론 목적에 따라 취해야할 태도나 에티켓이 다르겠지만 최근의 추세는 이런 구분이 무의미해지고 있기 때문에 공간의 성격을 구분하기에 앞서 웹을 적극적으로 활용할 수 있는 방법을 찾는데 집중하는 편이 낫다. 이런 맥락에서 웹이라는 우주에 흘려놓은 파편들을 모두 모아 한 곳에 가지런히 모으는 일만도 전략이라 할 수 있다. 트윗, 페이스북, 블로그… 사방 팔방으로 내던지고 내던지고 나서 홈페이지를 관리하겠다고 데스크탑 앞에 앉아서 졸고 있는 현실.

웹 서비스는 여럿이되 웹에서 ‘나’라는 행성은 하나여야한다. 하이퍼링크가 클릭만으로 순간이동을 시켜주는데도 불구하고 우리 모두 ‘홈페이지’ 라는 집을 지으려는 이유도 이 때문이다. 웹에서도 ‘나’ 라는 존재는 하나여야 한다는 사실 말이다. <매트릭스>의 네오가 될 것인가, 스미스 요원이 될 것인가?

다시 홈페이지와 블로그 얘기로 돌아와서…(너무 멀리갔다온 듯 ^^;)
웹 상의 다양한 컨텐츠를 한 데 모은다는 의미로 CMS(Contents Management System)라는 용어가 등장했고 몇년동안 다양한 CMS엔진들이 경합을 벌인 결과, 최근 워드프레스가 시장의 주도권을 잡아가고 있다. 워드프레스는 네이버 카페와 같은 커뮤니티 툴로 시작해서 설치형 블로그 툴로 알려지다가 최근에는 전세계 웹사이트의 15%, CMS 웹사이트의 54% 가량을 차지(w3techs.com 통계 참조)하고 있다.

흔히 페이스북을 싸이월드와 비교하는 분들이 있는데 기술은 표피에선 잘 드러나지 않는 법이다. 웹을 아직도 페이지 디자인이라고 생각한다면 그건 오산이다. 웹은 무수한 하이퍼링크를 관리하는 시스템에 접속하는 기술의 일부다. 싸이월드가 가고 페이스북이 온 건 페이스북 디자인이 더 예뻐서?
웹을 대하는 우리 스스로 전략이 필요한 때다.

Maniackers Design의 Masayuki Sato가 디자인 한, ColopocleAL 폰트 입니다.
(글꼴와 관련된 모든 저작권은 글꼴의 제작자에게 있음을 밝힙니다.)

• ColopocleAL(ColopocleAL.zip) – ColopocleAL_400.font.js

HHOMM 에서는 wp-cufon 플러그인용으로 변환된 데이터만을 제공합니다. 위의 파일을 내려받아 압축을 풀고 ‘wp-content/plugins/fonts’ 안에 넣고 wp-cufon 설정(‘Cufon 플러그인에서 글꼴 적용하기‘ 참조)에서 해당 폰트를 지정해주시면 됩니다.

Jens R. Ziehn이 디자인 한, 28 Days Later 폰트 입니다.

(글꼴와 관련된 모든 저작권은 글꼴의 제작자에게 있음을 밝힙니다.)

• 28 Days Later(28_Days_Later.zip) – 28_Days_Later_400.font.js

HHOMM 에서는 wp-cufon 플러그인용으로 변환된 데이터만을 제공합니다. 위의 파일을 내려받아 압축을 풀고 ‘wp-content/plugins/fonts’ 안에 넣고 wp-cufon 설정(‘Cufon 플러그인에서 글꼴 적용하기‘ 참조)에서 해당 폰트를 지정해주시면 됩니다.

Maniackers Design의 Masayuki Sato가 디자인 한, ShotaroV3AL 폰트 입니다.
(글꼴와 관련된 모든 저작권은 글꼴의 제작자에게 있음을 밝힙니다.)

• ShotaroV3AL(ShotaroV3AL.zip) – ShotaroV3AL_400.font.js

HHOMM 에서는 wp-cufon 플러그인용으로 변환된 데이터만을 제공합니다. 위의 파일을 내려받아 압축을 풀고 ‘wp-content/plugins/fonts’ 안에 넣고 wp-cufon 설정(‘Cufon 플러그인에서 글꼴 적용하기‘ 참조)에서 해당 폰트를 지정해주시면 됩니다.

Neale Davidson가 디자인 한, ADVENTURE 폰트 입니다.
(글꼴와 관련된 모든 저작권은 글꼴의 제작자에게 있음을 밝힙니다.)

• ADVENTURE(ADVENTURE.zip) – Adventure_600.font.js

HHOMM 에서는 wp-cufon 플러그인용으로 변환된 데이터만을 제공합니다. 위의 파일을 내려받아 압축을 풀고 ‘wp-content/plugins/fonts’ 안에 넣고 wp-cufon 설정(‘Cufon 플러그인에서 글꼴 적용하기‘ 참조)에서 해당 폰트를 지정해주시면 됩니다.

Maniackers Design의 Masayuki Sato가 디자인 한, Omiyage AL 폰트 입니다.
(글꼴와 관련된 모든 저작권은 글꼴의 제작자에게 있음을 밝힙니다.)

• Omiyage AL(OmiyageAL.zip) – OmiyageAL_400.font.js

HHOMM 에서는 wp-cufon 플러그인용으로 변환된 데이터만을 제공합니다. 위의 파일을 내려받아 압축을 풀고 ‘wp-content/plugins/fonts’ 안에 넣고 wp-cufon 설정(‘Cufon 플러그인에서 글꼴 적용하기‘ 참조)에서 해당 폰트를 지정해주시면 됩니다.

Rodrigo Araya Salas가 디자인 한, SUPER 폰트 입니다. 슈퍼마켙에서 주로 쓰는 마카 글씨^^
(글꼴와 관련된 모든 저작권은 글꼴의 제작자에게 있음을 밝힙니다.)

• SUPER (SUPER.zip) – SUPER_400.font.js

HHOMM 에서는 wp-cufon 플러그인용으로 변환된 데이터만을 제공합니다. 위의 파일을 내려받아 압축을 풀고 ‘wp-content/plugins/fonts’ 안에 넣고 wp-cufon 설정(‘Cufon 플러그인에서 글꼴 적용하기‘ 참조)에서 해당 폰트를 지정해주시면 됩니다.

Michael Tension( mtension@gmail.com )이 디자인 한, Impact Label 폰트 입니다.
블로그에 이름표 달 때 쓰면 되겠네요. ^^;
(글꼴와 관련된 모든 저작권은 글꼴의 제작자에게 있음을 밝힙니다.)

• Impact Label(Impact_Label.zip) – Impact_Label_400.font.js

HHOMM 에서는 wp-cufon 플러그인용으로 변환된 데이터만을 제공합니다. 위의 파일을 내려받아 압축을 풀고 ‘wp-content/plugins/fonts’ 안에 넣고 wp-cufon 설정(‘Cufon 플러그인에서 글꼴 적용하기‘ 참조)에서 해당 폰트를 지정해주시면 됩니다.