1. 워드프레스 설치

기존 워드프레스와 같은 방식으로 설치.
워드프레스 설치는 매우 간단한 내용이므로 설명 생략한다.

2. 워드프레스 MU 세팅

wp-config.php 파일을 열고, 소스 삽입.

define('WP_ALLOW_MULTISITE', true);

3. 관리자 패널에서 “Network Setup”

소스 삽입 후 관리자 패널로 가면, 왼쪽 메뉴 중 “Tools”에 “Network Setup”이라는 메뉴가 생성된다. 이 메뉴에서 몇 가지 설정을 해줘야 한다.

첫 번째로 할 일은 하위 사이트(하위 블로그)들을 “Sub-domain” 방식으로 생성할 것인지, “Sub-directoy” 방식으로 생성할 것인지를 선택해야 한다. 사이트 생성 방식은 일단 선택하면 변경이 불가능하니 사이트 성격에 맞게 신중하게 고려하도록 한다.

어떤 방식을 사용하든 두 가지 모두 사용가능 하지만, 몇 가지 다른 점들이 있다.

1) Sub-domain 방식
사이트 별로 주소 앞에 구분을 해주는 방식이다. 예를 들어 최상위 사이트가 webactually.com 일 때, site1.webactually.com과 site2.webactually.com 처럼 구분을 두어 사이트를 구분할 수 있다.

대개는 이 방법을 선호하는 경우가 많지만 주의해야 할 사항이 있다. 보통 도메인 제공 업체에서 최대 3~5개 까지의 서브 도메인 설정만 무료로 제공한다. 하지만 도메인이 3~5개가 넘는 경우는 서브 도메인 당 비용(많이 비싸지는 않다. 약 5,000원~10,000원 정도)이 추가된다.

사이트를 Sub-domain 방식으로 세팅할 때에는 이러한 비용을 감안해 다중 블로그가 몇 개나 추가가 될 것인지 파악한 후 선택하는 것이 좋다.

2) Sub-directory 방식
사이트 주소 뒤에 디렉토리처럼 구분하는 방식이다. 예를 들어 최상위 사이트가 webactually.com 이라면, webactually.com/site1, webactually.com/site2 이런 식으로 사이트 주소 뒤에 ‘/’와 함께 붙여서 사이트를 구분한다. 이 방식은 Sub-domain과 달리, 비용과 상관없이 무한대로 자유롭게 생성할 수 있다.

4. 설정사항 저장

사이트 생성방식을 Sub-domain이나 Sub-directory 중에서 선택하면 다음 단계로 넘어가 몇 가지 설정을 더 해야한다.

1) blogs.dir 폴더 생성
wp-content 폴더 바로 아래 blogs.dir 폴더를 생성한 후, 퍼미션을 777로 바꿔준다. 이 폴더에는 나중에 블로그 별 미디어 콘텐츠가 올라간다.

2) wp-config.php 파일에 소스 삽입
워드프레스 관리자 패널에서 제공하는 소스를 wp-config.php 파일에 삽입한다.

define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', false );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'templateactually.com' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );

3) .htaccess 파일 생성 or 수정.
.htaccess 파일은 워드프레스를 설치할 때 자동으로 생성되기도 하지만, 그렇지 않은 경우도 있어서 반드시 확인 후 생성하거나 수정해야 한다. 만약 .htaccess 파일을 제대로 수정하지 않으면 403에러가 발생할 수 있다.

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# uploaded files
RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule  ^[_0-9a-zA-Z-]+/(wp-(content|admin|includes).*) $1 [L]
RewriteRule  ^[_0-9a-zA-Z-]+/(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

5. “Network Admin” 관리자 패널

모든 설정사항을 저장한 후 워드프레스 어드민에 다시 로그인하면  ”Network Admin” 이라는 메뉴가 생성된다.

6. 서브 사이트 생성하기

“Network Admin” 어드민 화면의 왼쪽 메뉴에서 ”Sites > Add New” 메뉴를 이용해 새로운 서브 사이트를 생성한다.

1) Site Address
서브 사이트의 유니크한 이름을 입력한다. 사이트 이름은 나중에 수정할 수 있다.

2) Site Title
서브 사이트를 대표하는 타이틀을 입력한다.

3) Admin Email
서브 사이트를 관리할 관리자의 이메일 주소를 입력한다.
꼭 최고 관리자의 이메일 주소가 아니어도 된다. 최상위 사이트에 존재하는 아무 회원의 이메일로도 가능하다. 이 곳에 등록된 회원은 이 서브 사이트의 관리자 권한을 자동으로 갖는다.

7. 서브 사이트 관리

“Network Admin” 어드민 화면의 왼쪽 메뉴 중 ”Sites > All Sites” 메뉴를 이용하면, 현재 생성된 서브 사이트들의 기본 정보 및 서브 사이트에 가입되어 있는 사용자 등을 확인할 수 있다.

Tip: 기본적으로 서브사이트에 사용자로 등록이 되려면 최상위 사이트에 사용자로 이미 등록되어 있어야 한다. 그래야 각 서브 사이트별로 사용자를 추가할 수 있다.

8. 설정 완료된 서브 사이트

지난 달 24일 스매싱매거진에서 의미있는 기사 하나를 트윗했습니다. ‘개발자를 위한 디자인 입문서(A Design Primer for Engineers)‘ 라는 기사입니다. 웹액츄얼리팀은 이 기사를 저자 마이클 로프(Michael Lopp)의 허락을 받고 번역해서 올립니다.

이 기사는 평소 저희 팀 내부에서 가장 크게 고민하고 있고 끊임없이 혁신하고 있는 내용이기도 합니다. 저희에게 ‘브랜드페이지’ 제작을 의뢰하는 모든 고객분들께 알리기 위한 의도도 분명히 있습니다.

이 글을 읽고 공감이 가시면 ‘그냥 퍼나르지 마시고’ 위에 있는 트위터나 페이스북 ‘좋아요’ 버튼을 한번 클릭해주세요. 저희가 나름 열심히 번역작업을 했습니다.

여러분 각각의 모임에서도 유익한 담론이 생겼으면 하는 바람입니다.

※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주시면 감사하겠습니다.

[편집자주]

디자인-사람들이 원하는 것은 자기 고양이 사진을 메일로 보내고 싶은 것 뿐.

개발자들을 위한 디자인 입문서

한 회사의 운명을 완전히 바꿔놓을 수도 있는 것이 디자인이지만, 그 디자인이란 무엇인가 하는 질문에 항상 통하는 정의란 존재하지 않는다는 것을 주의해야 한다. 이것이 무슨 뜻일까? 당신의 상사가 팀원들이 모두 모인 회의 자리에서 “우리는 이제 디자인 중심의 문화를 갖게 될 것입니다”라고 했을 때, 실상은 아무런 뜻도 전달되지 않는 경우가 많다는 것이다.
하지만 디자인이라는 단어는 계속 듣게 된다. 들리기만 하는 것이 아니라, 그 단어 뒤에 뭔가 급박함이 느껴진다는 것이 중요하다. 들어보니까 어떤 것을 디자인 하기 위한 선택은 중요한 일인 것 같고, 그 이야기를 하는 사람도 중요한 인물이고 해서, 듣고 있던 당신은 힘차게 고개를 끄덕인다. 속으로는 이런 생각을 하면서도… “당신이 뭔소리를 지껄이는지 난 전혀 모르겠는데 아마 당신도 마찬가지인 게 확실해.”
디자인에 초점을 맞추는 것이 마법과 같이 어떤 회사를 변모시킬 수 있다는 데는 이론의 여지가 없다. 이런 것을 이루기 위해서는, 개발팀과 디자인 팀이 회식이라도 더 자주 해야 하겠지만, 디자인 쪽과 개발 쪽 사이에는 근본적인 긴장이 존재하며 이 긴장을 이해하는 것이 디자인을 생각하기 위한 좋은 출발점이 된다.
근본적인 긴장
디자이너와 개발자 사이의 유서 깊은 긴장 관계를 이해하기 위해서는, 소프트웨어가 주류가 된 그 시점으로 거슬러 올라가야 하며, 내 생각에 그것은 인터넷이 도래한 그 시기였다. 소프트웨어는 넷스케이프가 등장하기 오래 전부터도 계속 있었고 많은 이윤을 창출해왔지만, 누구든, 어디서든, 자기 고양이 사진을 누구에게나 메일로 보낼 수 있게 된 바로 그 때 소프트웨어가 세계적인 현상이 된 것이다.
‘누구나’(그리고 그들의 고양이들도)의 시대가 도래하자 초기 소프트웨어 개발 팀들에게는 도전과제가 주어졌다. 이 팀들은 누구나가 아닌 얼리어답터들과 함께 얼리어답터들 특유의 요구에 맞추어 작업하는 데 익숙했기 때문이다. 사실 얼리 어답터들은 수많은 엉터리들을 기꺼이 참아줄 수 있다-그게 바로 얼리 어답터들의 불문율 중 하나다. “가장 최신의 가장 좋은 것들을 다루게 되지만 어떤 순간이고 깨질 수도 있다.” 얼리 어답터들은 이렇게 깨지는 것도 쿨하다고 생각한다. 왜냐하면 얼리어답터가 된다는 것이 쿨하게 느껴지기 때문이다.
‘누구나’의 시대가 찾아왔을 때, 그 주인공들은 프로그램이 깨지는 것을 원치 않았다-그들은 그냥 작동하는 것을 원했다. 엔지니어들의 귀에는 “그냥 작동한다”라는 말이 “사람들이 바라는 것은 좀 덜 망가지는 것”이라고 들리는데, 이것은 누구나가 원하는 바가 아니다. 사람들이 원하는 것은 가능한 한 가장 간단한 방법으로 자기 고양이 사진을 보내는 것이다. 사람들은 자바스크립트, 보안, 프레임이나 플러그인 같은 것은 신경도 쓰지 않는다; 그들은 그저 그 놈의 고양이 사진을 보낼 때 프로그램이 깨지지 않기를 바랄 뿐이다.
디자인은 개발자들의 생각인 “덜 깨지는 것”과 사용자들의 생각인 “신뢰성 있게, 한번 클릭으로 고양이 사진 보내기” 사이에 실제적인 다리를 놓아준다. 좋은 디자인이란 최상의 개발 노력을 전달하는 동시에 그것을 사용자들에게는 안 보이게 숨겨주는 것이다.
매우 다양한 디자이너들과 작업을 해온 결과, 내 의견으로 디자인의 역할은 다음과 같다:
1. 많은 사용자들이 원하는 바를 이해한다.
2. 그러한 원하는 바 중 가장 중요한 것에 우선순위를 두고 집중한다.
3. 이러한 지식을 이용해 사용자의 기대를 뛰어넘는다.
90년대 중반, 우리는 전통적인 개발자로서 내가 위에 설명한 그러한 역할을 갖추지 못했다. 우리는 비트의 설계자가 되도록 훈련 받았으며, 우리가 비트를 설계할 수 있다는 것은 곧 쓸모 있는 비트들을 만들 수 있다는 것이라고 믿었다. 그렇지만 사실 우리가 잘 하는 것은 우리 자신에게 좋은 제품을 설계하는 것 뿐이었고 그것이 모든이들을 위한 것은 아니었다.
개발자들은 마치 우리가 소시지 만드는 법을 낱낱이 알면서도 아무렇지 않게 먹는 것처럼, 프로그램이 망가지는 것을 나쁜 것으로 보지 않는다. 어떤 프로그램에 크래시가 나면(갑자기 중단되면), 그냥 어플리케이션을 다시 띄우고 다시 일을 하면 된다고 알고 있다. 그러나 이 지구상의 대부분의 인간들은 크래시난 어플리케이션을 이런 식으로 보지 않는다. 그들은, 최소한 뭔가 중단되면 놀란다. 그들은 이렇게 생각한다 “방금 이걸로 영구적 손상이 되는 게 아닐까?”

디자이너와 개발자를 위한 메모
수많은 뛰어난 디자이너들에게는 미안하지만, 이 입문서는 주로 소프트웨어 개발 주변의 디자인 관계자들과 디자인 관행에 초점을 맞추고 있다. 게다가, 이 기초를 쓰는 사람인 나 자신은 개발자들을 위한 개발자이다. 내가 오랜 세월 디자인에 몸담아오긴 했지만, 나는 디자이너로 훈련된 사람이 아니며 디자인의 역사와 디자인의 기교에 대한 다음의 설명은 아마 너무 단순하고 부정확하고 불완전하며 개발자로서의 편견을 가지고 있어, 디자이너들이 보면 화가 날 지도 모른다.
하지만 바꿔놓고 생각하면 우리도 디자이너들에게 마찬가지로 반응할 것이다. 우리 의도가 좋더라도, 필수적인 세부사항을 반복적으로 경험한 적이 없기 때문에, 그에 대해 무지한 것 뿐이다. 어떻게든 어떤 일을 설명할 수 있으면 그 일을 직접 할 수 있는 것과 마찬가지라고 짐작하는 경우가 있는데, 그것이 사실 얼마나 잘못된 것인가! 하지만 어떤 분야든 한 가지 기교를 마스터하고자하는 열의를 가진 사람이라면 모두 그런 과정을 거치기 때문에, 우리도 그 점에 대해 크게 걱정할 필요는 없다.
개발자들은 무지를 불편해 해지만, 더 안 좋은 것은, 우리 전문성 영역 밖에 있는 이들에게 도움을 요청하는 것을 잘 못한다는 것이다. 이 입문서는 우리의 직업군들 사이에 단단한 다리를 놓는 첫 번째 단계이다. 그러므로, 진정하자. 이것은 결정적인 디자인 가이드가 아니고, 개발자들이 디자인에 대해 생각해볼 수 있는 지점이 될 것이며, 우리가 생각하는 바에 대해 독자가 어쩌다 무엇인가라도 배우게 되면 아주 다행스러운 일이다.

약어가 중요하다
“우리에게 디자이너가 필요하다”라는 문장이 아마 당신이 일을 갓 시작한 신입 소프트웨어 개발자로서 디자인에 대해 처음 들어본 말일 것이다. 당신은 이렇게 생각한다 “음, 내가 아직 하고 있지 않은 일인데 그 사람들은 무엇을 한다는 걸까?” 그에 대한 대답은 상당히 긴 작업 목록이 될 것이며 이 글의 범위 밖에 있지만, 세 가지 주요 약어부터 시작하면 좋을 것 같다.
어떠한 직업과 마찬가지로, 디자인도 온갖 약어로 가득하지만, 여기서는 당신의 상사가 디자인이 중요하다고 결정한 그 시점에 입에 오르내릴만한 세 가지 약어에 집중하고자 한다.

#1 GD-그래픽 디자인(Graphic Design)
그래픽 디자이너들은 세상을 이렇게 본다:

안타깝게도, 그래픽 디자이너를 설명하는 데 가장 흔히 쓰는 이름은, 혼란스럽게도, 바로 그냥 ‘디자이너’이다. 그 이유는 두 가지이다: 첫째 , 그는 개발 부문 외에 있는 기술을 가지고 이 제품에 대해 작업을 하도록 고용된 최초의 인력이다. 둘째, 그는 “예쁜 것”을 책임지게 되어 있다. 어떤 책임자가 제품의 최초 작업 프로토타입을 보고 이렇게 말했다. “이건 개발자가 대충 만들어놓은 것 같은데”, (고개 끄덕이는 당신) 그리고 “이걸 고쳐놓을 디자이너가 필요해” (당신의 공허한 눈길).
당신: “뭘 고쳐요?”
책임자: “글쎄… 뭐랄까… 좀 더 예쁘게 보여야지.”
아직 이 글에서 빠져나가지 못한 디자이너들이 있다면, 아마 지금 이걸 읽으면서 스크린 앞에서 의자 위에 올라가 소리를 지르고 있을 것이다: “나 그런 사람 알아!”
그렇다, 나도 그런 사람을 알고 있다. 그는 멍청이다, 하지만 의도는 좋다.
그래픽 디자이너의 장기는 시각적인 것이다. 포토샵이나 일러스트레이터 같은 어플리케이션을 통해, 그래픽 디자이너는 생각에 시각적인 형태를 부여한다. 그렇다. 그들이 하는 작업은 예쁘다. 그렇지만 예쁘기만 한 것은 아니다. 그들의 작업은 뭔가를 나타낸다. 그것이 무엇인지에 대한 의견을 가지고 있고, 보는 사람 누구나가 그 의견을 알 수 있게 된다. 그렇다. 디자이너는 당신의 어플리케이션이나 웹사이트에 어떤 명확하고 믿을만한 전문성을 부여해 준다. 그렇지만, 어떤 것을 잘 그려놓았다고 해서 꼭 그 제품을 더 사용하기 쉽게 만들어 주는 것은 아니다.
문제는 그 책임자가 그래픽 디자이너의 사무실로 들어가서 이렇게 말할 때 시작된다. “당신은 디자이너잖아-이 제품에서 개발자 냄새를 빼게 도와줄 수 있나?” 이제, 당신처럼, 이 그래픽 디자이너도 뭔가 더 하고 싶어한다-더 많은 책임을 지려고 한다-그리하여 그 제품이 어떻게 작동하는지, 당신의 사용자가 누구인지도 모르면서 그들은, 이렇게 생각하며, 하겠다고 나선다, “그럼, 난 디자이너잖아. 그렇지?”
그렇게 해서 디자이너들이 생산을 하게 된다. 그들은 당신이 보기에 일도 아닐 것 같은 포토샵으로 눈에 보기 좋은 프로토타입을 만든다. 이 그래픽 디자이너는 대부분의 개발자들이 할 수 없는 일을 했고, 중요한 디자인 작업이 진행됐지만, 사실 디자인이 제대로 된 것이 아니다-당신의 제품은 단순히 예쁜 얼굴만을 가지게 된 것이다. 제품이 어떻게 보이느냐가 중요한 만큼, 어떻게 작동하는가도 똑같이 중요하니까 말이다.
이 입문서의 각 부분 끝에는 나의 디자인에 대한 의견을 형성해준 디자인 관련 책들을 세 권씩 골라 보았다. 디자인의 본질부터 시작해 보자:
• 수감자들이 수용소를 지배한다(The Inmates Are Running the Asylum)
• 메그의 그래픽 디자인 역사 (Megg’s History of Graphic Design)
• 디자인의 보편 원칙(Universal Principles of Design)

#2-IxD-상호작용 디자인
IxD는 세상을 이렇게 본다:

상호작용 디자이너는 놀라운 일을 한다: 그들은 형태로부터 기능을 추출한다. 가장 좋아하는 어플리케이션을 정기적으로 둘러볼 때 당신이 어떻게 하는지를 생각해보라. 당신은 익숙한 경로를 따라갈 것이며 우리는 그것을 작업 흐름이라고 부른다: 작업 흐름은 일련의 마우스 클릭과 드래그들로 이루어지며 당신의 전광석화같은 키보드 마법을 동반한다. 이것이 당신과 그 어플리케이션이 만나는 접점이다.
상호작용 디자이너의 장기는 작업흐름을 돌보고 작업을 진행시키는 것이다. 상호작용 디자이너는 와이어프레임과 작업흐름을 능숙하게 이용하여, 사용자가 그 어플리케이션을 통달할 수 있게 되는 과정을 단계별로 정의하고 세분한다.
이렇게 기능을 단축해서 설명하면, 이 설명의 의도를 이해하지 못하는 이들에게는 혼란스러울 수 있겠다. 이것이 어플리케이션이 어떻게 보일까에 대한 것인가? 아니다. 이것은 상호작용에 대한 것이다. 이것은 그 어플리케이션이 어떻게 보이는가가 아닌 어떻게 작업하는가를 설명하고자 하는 사용자 인터페이스를 대략적으로 나타낸 것이다. 그러면 어플리케이션은 어떻게 보일 것인가? 저 텍스트에 그림자 효과를 줄 수 있을까? 나는 그림자 효과와 푸른 색이 좋고, 또 입체감이 나는 단어가 좋은데… 그런 이야기를 하려면 이제 그만하고 가보는 것이 좋겠다. 복도 끝 왼쪽에 가면 나가는 문이 있다. 아마 그 문은 그런 당신을 위해 아름다운 푸른 색 그림자 효과로 되어 있을지도 모르겠다.
기능을 형태에서 분리하게 되면 정신적인 도약이 일어난다. 그리고 기능과 형태 중 어떤 한 쪽 없이는 다른 한 쪽을 생각할 수 없다고 믿는 이들이 있다. 내 생각에 정답은 그 중간쯤인 것 같다. 상호작용에 대해서 전략적으로 생각하기 위해 픽셀단위의 완벽한 구성이 필요하다고 생각하지는 않지만, 프로토타입 작업을 할 때는 샘플 상호작용 및 애니메이션을 가지고 하는 것이 화이트보드에 하는 것 보다는 훨씬 더 풍부한 논의를 할 수 있게 해준다고 믿는다.
단축해서 적어보는 식으로 당신의 제품이 어떻게 작동하는가를 설명할 수는 있지만, 그럴 경우 디자인의 여러 가지 주관적인 요소가 없어지게 된다. 그러면 디자인에 대한 완벽하고 훌륭한 대화가 그림자 효과에 대한 쓸모 없는 토론으로 빗나가게 되는 경우가 많다. 그러나 색상, 글자체, 간격 이러한 모든 요소들은 제품의 느낌에 기여하는 요소들이며, 당신의 제품이 어떻게 느껴지는가는 그 제품이 어떻게 작동하는가와 똑같이 중요하다.
IxD와 가까운 궤도에 있는 다른 두 가지 약어들이 있는데 언급할 가치가 있다는 것을 알 수 있다:
IA또는 정보 아키텍트는 최근에 관심을 잃어가는 직함이다. 아마 IA에 대해 생각하기에 가장 좋은 모델은 사서의 역할일 것이다. 정보 아키텍트의 사고방식은 도서관의 듀이 십진 분류체계를 만들게 된 사고방식과 같은 것이다: 바로 정보 분류 체계라는 것이다. IA는 정보가 정리되지 않으면 잠을 자지 못한다. 내가 이런 사람을 만난지는 꽤 오래되었다.
HCI 또는 인간 컴퓨터 상호작용은 당신이 발견하게 될 또 다른 직함이다. 이 직함은 대학에서만 수여하는 직함처럼 보인다. 마치 이 직함은 먼저 자신의 학위를 발표하고, 한 박자 쉬고, 대학을 덧붙이는 사람들 같다. 예, 저는 HCI로 PhD를<한 박자 쉬고> 카네기 멜론 대학에서 받았습니다.
HCI 사람들과 접했던 나의 경험에 의하면 그들은 뛰어난 연구자들인 경우가 많다. 만일 당신이 당신의 어플리케이션에서 사용자들이 시도할 수 있는 모든 가능한 작업흐름과, 그 작업흐름을 완료하는 데 걸리는 시간, 그리고 이 작업흐름이 당신의 사용자들에게 미치는 정량화된 감정적 상처의 목록을 모두 알아보고 싶다면, HCI 전문가를 찾아서, 그에게 18개월을 주면, 아마 <한 박자 쉬고> 놀라운 결과를 얻게 될 것이다.
다시 도서 목록을 계속해 보자. 이 책들은 누구나 접근할 수 있는 것이기 때문에 골랐다. 이 책들을 읽는 것이 완벽한 디자인 교육을 시켜주지는 않지만, 디자인의 여러 부분에 대해서 훌륭하고 견고한 취향을 갖게 해 줄 것이다:
• 모든 디자이너가 사람에 대해서 알아야 할 100가지
• 정보 그려보기
• 페이스 3에 대해서

#3 UxD-사용자 경험 디자인
UxD가 생각하는 방식을 설명해주는 이미지 하나를 찾기가 애매해서, 세 가지를 내놓았다(자세히 보려면 이 중 아무 것이나 클릭해 보라):



사용자. 경험. 디자인. 이들은 무엇에 신경을 쓰는가? 물론, 당신은 이 모든것에 신경을 쓸 것이다. 당신은 시각적 디자인을 신경쓴다; 또 상호작용 디자인을 신경쓴다; 그러나 대부분 당신이 신경쓰는 것은 사용자의 경험이다.
내 경험으로, 이러한 직함을 자랑하는 이들은 UxD에 학위 같은 것은 갖고 있지 않다. 이 직함은 내가 알고 있는 것을 이들도 알고 있다는 이유로 세월이 흐르면서 도입하게 된 직함이다: 그 사실은 바로 디자이너라는 직함이 쓸모있게 사용하기에 너무 일반적이란 것이다. 그래픽 디자이너와 상호작용 디자이너같은 직함은 너무 구체적이다. 사용자 경험 디자이너는 마치 예전에는 약어를 가지고 있었으나 어느 순간 제품 전체에 대해 신경을 쓰는 것이 더 유리하다고 마음먹은 것 같다.
잘 된 일이다.
약어들과 능력으로 제품 디자인 노력에 기여하는 디자인 분야는 대단히 많고 각각을 위한 시간과 장소가 있다. 자신이 UxD라고 이름을 붙이거나 그렇게 생각하는 사람을 찾는 이유는 작업을 설정하고 전체 경험을 책임질 의지가 있는 사람을 찾고 있기 때문이다.
도서 목록의 마지막 부분에는 절대적인 디자인의 고전들도 포함되어 있다. 그렇다, 만화에 대한 책도 있다:
• 글자체 스타일의 요소
• 일상 사물들의 디자인
• 만화 이해하기
더 자주 함께 파티를 하라
디자인 분야 중에서 사용성이 목록에서 빠진게 눈에 띈다. 문제는, 아무리 근사한 약어를 가지고 있었더라도 나는 사용성을 포함시키지 않았을 것이다.
스티브 잡스가 애플로 복귀하기 전에는, 단방향 거울과 비디오 카메라가 있는 멋진 방을 갖춘 사용성 팀이 있었고 이 조직은 괜찮은 중앙 집권식 조직이었다. 나는 이들이 상당한 업적을 이루었다고 확신하지만, 잡스가 복귀하면서 이 팀의 문을 닫고 디자인 팀을 바람에 날려버렸다. 그리고 각 제품 팀이 예전 사용성 팀의 한 부분을 물려받았다.
지금으로써 나는 이 구조조정이 일어난 후에 들어왔으므로 진짜 이유는 모르지만, 내가 아는 것은 내가 한 번도 사용성 실험실을 사용하는 것을 본 적이 없다는 것과, 사용성 팀이 없어진 이후인 지난 10년간 애플이 가장 사용성 있는 제품들을 창조했다고 주장할 수 있다는 것이다. 내 생각에, 사용성 디자인 기능을 개발팀 전체에 확산시키기로 한 선택은 분명한 메시지를 전달하고자 하는 것이었다: 개발자와 디자이너는… 더 자주 함께 파티를 해야 할 필요가 있다는 것이다.
개발자와 디자이너들이 서로의 일에 계속해서 간섭하지 않는 상황에서 소비자 제품을 책임지는 팀을 만든다는 것을 상상할 수 없다. 그렇다. 그들은 뇌의 완전 반대쪽에서 나오는 주장을 하며 다투기도 한다. 가끔은 예술과 과학 사이의 전투가 되기도 한다. 그러나 개발자와 디자이너가 원하는 것은 정확히 똑같다. 그들은 뭔가 중요한 것을 성공적으로 만들었다는 것을 인식할 때 느끼는 강한 만족감을 원한다.
디자인 중심의 문화란, 그 디자인 문화에 책임이 있는 이들 모두가 서로를 마주대하지 않는다면 그냥 내던져진 공허한 문장이 될 뿐이다. 직함들과 약어들은 어떤 사람이 무엇을 하는지를 이해할 수 있는출발점을 제공한다. 그러나, 당신이 시간을 내서 그들이 사랑하는 일을 어떻게 이루어가는지를 이해하려고 노력하는 데서 나오는 존중이 진짜 중요한 것이다.

《워드프레스 제대로 파기(원제 DIGGING INTO WORDPRESS)》를 국내 독자에게 소개하기까지 정말 우여곡절이 많았다. 해외에서조차 원서가 정식으로 발간되기 전이었고 PDF 버전으로만 나온 터라 국내에서 정식 도서로 출판하는 것은 저자나 우리에게나 적지 않은 부담이었다. 하지만 전세계적으로 인정받는 좋은 정보를 국내 독자에게 소개하고 싶은 마음이 앞서 과감히 작업을 진행했고, 1년 여 준비한 책이 드디어 빛을 보게되었다.

《워드프레스 제대로 파기》는 국내에 워드프레스와 관련된 볼 만한 매뉴얼이나 활용서 하나 없어서 그 동안 웹액츄얼리에 수없이 문의 메일을 보내고 워드프레스에 궁금증을 가졌던 사람들을 위한 책이다. ‘워드프레스’라는 말에 이끌려 이 책을 들고 있는 독자라면 이미 워드프레스의 장점과 무한한 가능성에 매료되어 있을 것이다. 그리고 이 책이 좀 더 제대로 지식을 쌓고 활용하고 싶은 목마름을 달래줄 단비가 되어 줄 것이라고 생각한다.

전세계적으로 워드프레스를 활용한 블로그나 웹사이트가 해마다 가파른 속도로 늘고 있다. 한 설문조사에 따르면 현재 웹사이트의 약 20%가 워드프레스를 CMS로 사용하고 있다고 한다. 워드프레스의 짧은 역사를 감안하면 가히 폭발적인 추세다.

워드프레스를 이용한 대형 유명 글로벌 사이트도 무수히 많다. 뉴욕타임즈, CNN 방송, 텔레그래프 통신사, <PEOPLE>지, 플레이스테이션 게임사이트 등을 방문하면 그 차별성을 직접 확인해볼 수 있다.

최근 몇 년 사이 국내에서도 많은 기업이나 개인이 워드프레스를 기반으로 한 웹사이트 제작에 관심을 가지고 활용하는 사례가 늘고 있다는 반가운 소식이 전해지고 있다. 워드프레스의 장점인 웹사이트 제작의 확장성과 뛰어난 콘텐츠 유지 관리 능력에 주목하기 시작해 삼성과 LG, CJ를 포함한 대기업들도 워드프레스를 이용한 웹사이트로 속속 대체하고 있다.

왜 워드프레스인가? 그 이유야 셀 수 없이 많지만 몇가지로 요약하자면, 워드프레스는 웹사이트의 콘텐츠를 쉽게 만들고 관리할 수 있다. 워드프레스를 대체할 훌륭한 툴은 찾아보면 얼마든지 있다고 반문하는 사람도 있을 것이다. 그에 대한 대답은 간단하다. 워드프레스에는 끝없는 가능성과 잠재력이 있다! 무엇을, 어떤식으로 상상하든 워드프레스는 그것을 스마트하고 올바르게 작업할 수 있도록 안내할 것이다.

《워드프레스 제대로 파기》는 워드프레스의 메뉴나 기능, 또는 코드 설명을 장황하게 늘어놓은 기술 요약서가 아니다. 물고기를 잡아주는 것이 아니라 물고기잡는 법을 알려주는 것! 이것이 이 책의 궁극적인 목표다.

세계를 통틀어 이 책의 저자인 제프 스타(Jeff Starr)와 크리스 코이어(Chris Coyier) 만큼 워드프레스를 뼛속 깊이 이해하고 제대로 활용할 수 있는 팁과 노하우를 알려주는 개발자는 흔치 않다. 그것도 유쾌하고 명쾌한 방법으로 말이다.

저자들은 그 동안 수많은 워드프레스를 구축하면서 쌓아온 노하우를 이용해 워드프레스 기반 사이트를 운영하면서 마주칠 수 있는 코드를 다루는 변주 기법을 알려준다. 사용자를 매료시킬 수 있는 아름다운 웹사이트를 연주하는 것은 이제 이 변주 기법을 익히는 독자의 손끝에 달려 있다. 이 책에 나온 풍부한 예제와 저자들의 말을 기억하면서 끊임없이 연습해 보자. 책을 읽는 독자에게는 워드프레스 제작 스킬을 제공하고 사용자에게는 더 나은 사용성을 경험하게 해줄 것이다.

마지막으로 두 저자가 운영하는 블로그(digwp.com)를 방문하면 지금도 끊임없이 업데이트되고 진화되고 있는 워드프레스에 관한 최신 정보를 얻을 수 있다. 워드프레스 관련 핵심 정보를 소개한 웹액츄얼리(www.webactually.com)의 알찬 정보 또한 놓치지 않기를 바란다.

웹액츄얼리팀

주요 변경 사항

1. 웰컴 화면
워드프레스 3.3버전을 설치하면 새롭게 업데이트된 웰컴 화면을 만날 수 있다. 웰컴 화면은 세 개의 탭인 What’s New, Credits, Freedoms 로 구분되어 있다.

2. Feature pointers
이제부터 워드프레스에 최신 기능이 추가되면 Feature pointers가 알려준다.

3. 개선된 도움말 기능
도움이 필요한 상황이 되면 3번째 칼럼에 있는 영역에 도움말 제목이 노출된다. 이를 클릭하면 자세한 정보를 볼 수 있다. 꼭 클릭해 보자. 생각보다 매우 유용할 것이다. 또한, 3.3버전에서는 새로운 API 로 도움말 화면을 개선시켜 사용자 상황에 맞는 적절한 도움말을 보여준다.

4. 드래그 앤 드롭 미디어 업로더 (구 버전 IE제외)
여러 개의 파일을 쉽게, 한꺼번에 업로드 할 수 있다. 어드민 화면> 미디어> 파일 올리기 메뉴를 클릭하면 미디어 내비게이션을 볼 수 있다. 업로드할 파일들을 선택하고 ‘Drop files here’ 영역에 마우스로 드래그만 하면 쉽게 업로드 할 수 있다. 물론 이전처럼 ‘파일 선택’ 버튼을 클릭해 여러 파일을 업로드하는 것도 가능하다.

5. 플라이아웃(Flyout) 대시보드 메뉴
클릭 한 번에 원하는 화면으로 갈 수 있는 플라이아웃 메뉴를 제공한다. 이전 버전에서는 원하는 화면에 도달하려면 두 번의 클릭이 필요했다. 3.3버전에서는 플라이아웃으로 인해 클릭 한 번이면 해결된다.

6. 새로운 툴바 등장
어드민 바와 어드민 헤더 기능을 결합시킨 새로운 툴바가 등장했다. 이 툴바는 워드프레스 어드민의 프런트 엔드와 백 엔드 화면에서 항상 볼 수 있다. 좀더 진하고 날렵한 디자인의 새로운 툴바는 워드프레스 렉시콘을 좌측에 보여준다.


(상단 이미지: 3.3버전의 새로운 툴바 / 하단 이미지: 3.2버전의 툴바)

7. 아이패드를 비롯한 태블릿을 지원하는 반응형 웹디자인 화면
워드프레스 대시보드는 완벽한 반응형 디자인을 지원하진 않지만, 아이패드와 다양한 태블릿 사이즈 화면에 최척화되어 있다.

8. 개선된 동시 수정 기능
포스트 한 개에 여러 사용자가 동시에 수정하고 있을 때, 경고 메시지가 뜨며 수정이 멈출 때까지 포스트 내용을 수정할 수 없는 잠금 기능이 제공된다.

9. 향상된 고유주소
포스트 이름으로 된 고유주소를 쉽고 간단하게 선택하거나 직접 작성할 수 있다. 날짜, 이름, 숫자를 사용한 간단한 고유주소를 추천해줄 뿐만 아니라 사용자가 직접 입력할 수도 있게 해준다. 이젠 성능에 대한 패널티없이 고유주소를 사용할 수 있게 되었다.

10. 빠른 편집 메뉴에 포스트 형식 추가
이전 버전에서는 포스트 형식을 빠른 편집 메뉴에서 수정할 수 없었다. 새로운 버전에서는 포스트 형식을 수정할 수 있게 되어 포스트 수정이 전보다 빨라졌다

11. 그 외 추가된 기능들

• Tumblr (텀블러) 가져오기
• 에디터API 성능 향상 (wp_editor)
• jQuery 1.7.1 과 jQuery UI 1.8.16
• 더 똑똑해진 위젯 : 테마를 전환할 때 위젯 손실 방지
• is_main_query() 함수와 WP_Query 메서드 기능 추가
• 포스트 슬러그에서 몇 가지 이상한 문자 제거
• 향상된 메타 데이터 API
• 그 외 성능 향상 및 수 백 개의 버그 수정
• 워드프레스 3.3 을 위한 주목할만한 플러그인 공개

더 자세한 정보는 워드프레스 Codex 참고
http://codex.wordpress.org/Version_3.3

미국 지디넷은 지난 10일 IT미디어 기가옴의 ‘로드맵2011서밋’에 참석한 매트 물렌웨그 워드프레스닷컴 창립자 발언을 인용해 이같이 보도했다.

당시 스스로를 ‘오픈소스 히피’라고 묘사한 물렌웨그 창립자는 “(기업들이) 윤리적, 철학적으로 소프트웨어만이 아닌 모든 것이 오픈소스화해야 한다”고 주장했다.

매트 물렌웨그 워드프레스 창립자

이어 “오픈소스 진영에서 상업적 측면도 챙길 수 있는 직원 수천명짜리 대기업 사례를 찾기가 쉽지 않다”면서도 “지난 8년반, 오픈소스 진영에서 옳은 일을 해온 지난 8년반 동안 워드프레스 사업을 일으켜 왔다”고 말했다.

워드프레스닷컴은 오픈소스 기반의 인기 콘텐츠 관리 시스템(CMS) ‘워드프레스’를 개발, 제공하고 이를 기반한 블로그서비스도 제공하는 기업이다. 6천500만개 이상의 웹사이트가 워드프레스 기반이며, 그 절반이 이 회사의 호스팅서비스로 돌아간다.

물렌웨그는 “내 목표중 하나는 ‘콘텐츠 발행을 민주화’함으로써 여기에 워드프레스 커뮤니티가 근본적으로 바른 일을 했음을 보이는 것”이라며 언젠가 현실화되길 바란다고 덧붙였다.

미국 지디넷 블로거 레이첼 킹은 워드프레스가 이미 엔터프라이즈 세계에도 단지 콘텐츠 발행 부문에 작용한 것 이외에 더 흥미로운 영향들을 더 많이 끼쳤다고 평햇다.

물렌웨그는 “내게 가장 흥미로운 트렌드는 엔터프라이즈 소프트웨어가 언제나 형편없긴 했으나 이제 사람들이 그것에 대해 더 많이 불평중이라는 점”이라고 말했다.

예를 들어 직원들이 어떤 작업을 할 때 워드프레스같은 오픈소스 툴로 하면 10초만에 끝낼 수 있는데, 오랫동안 방치돼온 기업용CMS에서는 10분씩 걸리는 비효율을 왜 감수해야 하냐고 물어온다는 것이다.

이런 불만은 웹사이트를 갖고 싶긴 하지만 주말과 저녁을 웹사이트 작업에 골머리를 앓으며 보내고 싶지 않은, 소규모 사업 운영자들이나 친구들로부터 많이 들을 수 있을 것입니다.

웹사이트를 운영하는 방법부터 찾아본 사람들은 이런 불만을 얘기합니다. 심지어 어디서부터 시작해야 할지 몰라 아직도 고민하는 사람들도 많습니다. 하지만 희망은 있습니다.

워드프레스로 구출받자

워드프레스는 가장 인기있는 블로그 툴 중 하나입니다. 하지만 여기서 많은 사람들이 모르는 점이 있습니다. 워드프레스는 단순한 블로그를 넘어서서 강력한 콘텐츠 운영 시스템(CMS)으로 사용할 수 있다는 것입니다. 워드프레스를 사용하면 블로그와 웹사이트를 모두 제작할 수 있습니다.

이 글은 왜 워드프레스가 소규모 웹사이트에게 좋은 선택인지 살펴보고, 소규모 비즈니스를 위한 워드프레스 설치 및 설정 방법 그리고 사용 방법에 대해 알아볼 것입니다.

웹 콘텐츠 운영 시스템(Web Content Management Systems)

콘텐츠 운영 시스템은 웹 페이지 생성과 업데이트 관리를 도와주는 툴입니다.

저는 1998년 Interwoven이라고 불리는 실리콘 밸리의 초창기 멤버였습니다. Interwoven은 Ford Motor, FedEx, Cisco와 같은 대기업과 더불어 수천 개의 대·소형 기업에 웹 콘텐츠 운영 솔루션을 제공하는 회사였습니다.

저는 그곳에서 Fortune 100부터 그보다 작은 기업들에 이르기까지, 수백개의 회사와 협업하며 웹 사이트 아키텍쳐를 개발했습니다. 그동안 웹 콘텐츠 운영에 대해 많은 것을 배울 수 있었습니다.

그 당시 웹은 폭발적으로 성장하고 있었고, 콘텐츠 양과 종류가 늘어나면서 이를 운영하기 위한 어마어마한 요구가 있었습니다. 그때 우리가 판매한 소프트웨어만 해도 수천만 달러어치에 달합니다.

워드프레스를 웹사이트로 사용하기

오늘날 워드프레스는 놀라울만큼 강력한 무료 콘텐츠 운영 시스템으로 활용되고 있습니다. 워드프레스는 간편한 웹사이트 운영 방법을 찾고 있는 중소 비즈니스에게 맞는 강점을 많이 지니고 있습니다.

워드프레스의 디자인은 블로그를 위한 플랫폼으로 제작됐지만, 꼭 블로그 툴로 사용하지 않아도 됩니다. ‘블로그’를 사용하던 안하던 약간 손을 보면 워드프레스를 통해 자신의 웹사이트를 운영하도록 사용할 수 있습니다. 워드프레스가 블로그 플랫폼으로 디자인되었단 사실은 몇가지 강력한 장점을 동시에 제공해줍니다.

워드프레스는 콘텐츠 생성과 수정을 손쉽게 최적화할 수 있습니다. 구글과 같은 검색 엔진 순위에 오르려면 신선하고 독창적인 콘텐츠가 필요합니다. 웹사이트를 새로운 기사 또는 뉴스레터로 업데이트할 때는 당신을 방해할 수 없는 시스템이 필요합니다. 그렇다면 워드프레스는 왜 좋은 선택일까요?

소규모 비즈니스 웹사이트에 워드프레스를 사용하는 5가지 이유

1. 검색 엔진 최적화(SEO)
   워드프레스는 검색 엔진 최적화(SEO)를 훌륭하게 바로 제공해줍니다. 몇 가지 설정 작업이 필요하지만, 워드프레스가 제공하는 많은 검색 엔진 최적화(SEO)가 가져다주는 장점을 무료로 얻을 수 있습니다. 실제로 구글의 맷 커트(Matt Cutts)는 다음 비디오를 통해 ‘워드프레스는 검색 엔진 최적화(SEO)가 잘 되도록 만들어졌다.’고 얘기합니다.
2. 콘텐츠
   HTML을 몰라도 웹사이트에 콘텐츠를 쉽게 업데이트할 수 있습니다. 드림위버와 같은 복잡한 HTML편집툴을 어떻게 사용하는지 배우기가 어렵다구요? 웹 사이트에 약간의 수정을 할 때마다 매번 웹마스터에게 ‘요청하기’가 싫다고요? 이제 더 이상 그럴 필요가 없습니다. 워드프레스만 설치되어 있으면 간편한 리치 텍스트 편집툴을 사용하여, 누구나 쉽게 새로운 페이지를 만들고 수정할 수 있습니다.
3. 확장자
   워드프레스는 테마와 플러그인을 만드는 개발자로 번성하고 있는 생태계나 다름없습니다. 웹개발자를 고용하지 않아도 무료 디자인 테마나 웹사이트에 투표하기, 연락처를 남기기, 별점 매기기와 같은 수백가지 환상적인 기능들을 자신의 웹사이트에 추가해서 확장할 수 있습니다.
4. 지원
   사이트에 문제가 있거나 사용자 맞춤 기능을 추가하고 싶다면, 도움을 줄 수 있는 개발자나 지원을 찾을 수 있습니다. 말 그대로 수천 명의 워드프레스 개발자들을 사방에서 찾을 수 있으며, 구글 검색을 통해 수많은 사람들이 공유한 글에서도 도움을 받을 수 있습니다.
5. 설치
   Bluehost, 1and1 그리고 GoDaddy를 포함한 많은 호스팅 업체로부터 빠른 설치를 제공받을 수 있습니다.

워드프레스에서 처음으로 실시한 웹사이트 사용자 및 개발자 설문에 따르면, 전세계에서 상위 100만개에 해당하는 사이트 중 14.7%가 워드프레스 블로그 툴을 사용하고 있다고 한다. 워드프레스와 일부 내부 통계 자료에 따르면 외견상 8.5% 성장한 것이다.

워드프레스를 사용하는 국가와 지역이 얼마나 밀집되어 있는지는 아래의 설문 응답자 지도에 밀집된 표식을 통해 알 수 있다.

미국에서만 100개의 신규 도메인 당 22개의 도메인이 워드프레스를 사용 중이다.

그렇다면 워드프레스가 왜 이렇게 전세계적으로 인기있는 툴이 되었을까? 이에 대한 답을 찾는 것은 어렵지 않다. 적어도 간단한 두 가지 이유를 들 수 있는데, 그것은 사용하기 쉽고 저렴하다는 것이다. 심지어 도메인 네임을 구매하지 않는 경우라면 공짜로 사용할 수도 있다.

워드프레스 설립자인 매트 물렌웨그(Matt Mullenweg)는 자사 공식 블로그에 다음과 같이 밝혔다.

“우리는 이미 설문 응답자로부터 알아낸 몇가지 흥미로운 사실이 있다. 6,800명의 자영업자 응답자들이 17만개가 넘는 사이트를 개인적으로 운영하고 있으며, 시간당 평균비용은 50달러 정도다. 어려운 경제 시기에 오픈소스를 사용해 창업한다는 것은 다행스러운 일이다.(각 사이트를 만드는데 단 3시간이 걸렸다면, 시간당 평균비용으로 계산시 2,950만 달러 어치(약 330억원)의 작업에 달한다.)”

매트는 농담조로 아마도 85.3%에 달하는 웹사이트가 여전히 도움을 필요로 하고 있다고 덧붙였다. 설문조사는 1만8000명 이상의 응답자들을 대상으로 이루어졌다.

그래서, 어느 경우에 어떤 소셜 플러그인을 사용해야하는지 자세히 살펴보았습니다. 적용하는 방법도 함께 공유합니다. (아래의 내용은 Facebook 개발자 문서를 참고하여 설명합니다. )

1. Activity Feed(액티비티 피드)

페이스북 개발자 문서 링크 : http://developers.facebook.com/docs/reference/plugins/activity/

액티비티 피드 플러그인은 당신의 사이트에 일어나고 있는 가장 흥미로운 최근의 활동을 표시합니다.

방문객이 당신의 사이트에서 어떤 콘텐츠에 Like(좋아요) 하거나, Share(공유)를 했고, Facebook Comment Box 에 댓글을 달았는지 등의 활동을 표시해 줍니다.

액티비티 피드 플러그인은 방문객이 여러분의 사이트에 로그인 했는지 여부에 따라 맞춤 콘텐츠를 표시할 수도 있습니다.

사용자가 페이스북에 로그인 한 경우, 플러그인은 친구의 콘텐츠를 강조하기 위해 개인화 됩니다.

사용자가 로그아웃 일 경우, 사이트 전체의 추천(Recommendations)을 보여주고 페이스북에 로그인 할 수 있는 옵션을 제공합니다.

플러그인은 사용자의 친구들의 활동으로 가득 합니다. 플러그인을 채우기 위한 충분한 친구활동이 없다면, 추천 내역으로 채워져 나옵니다.

만약, recommendations 파라미터를 true 로 설정하면 플러그인의 상단 반절은 친구 활동을 보여주고, 하단은 추천이 나오게 됩니다.

플러그인의 절반을 채우기 위한 충분한 친구 활동이 없다면, 더 많은 추천을 포함합니다.

이러한 활동들을 보여주기 위해서는 도메인을 지정해야하는데 도메인이 정확하게 고정되어야 하며 “facebook.com” 의 같은 경우, “developers.facebook.com” 과 “www.facbook.com” 을 포함하지 않습니다.

이 플러그인은 간단한 iFrame 을 사용할 수도 있고, 새로운 Javascript SDK인, <fb:activity> XFBML 태그(또는 HTML5  마크업을 선호 한다면 <div class=”fb-activity”>)를 사용할 수 있습니다.

Activity는 페이스북 계정이나 페이지가 아닌, 내(당신) 사이트!에 대한 플러그인입니다.

소스 적용 예

SCRIPT

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

HTML

<div class="fb-activity" data-site="webactually.co.kr" data-width="300" data-height="300" data-header="true" data-recommendations="false"></div>

data-site 파라미터의 값만 내가 원하는 사이트 로 바꿔주면 됩니다.

2. Like box

http://developers.facebook.com/docs/reference/plugins/like-box/

Like Box(좋아요 상자)는 페이스북 페이지의 주인이 웹사이트에서 ‘Like(좋아요)’를 얻을 수 있는 소셜 플러그인 입니다.

Like Box는 사용자에게 : 얼마나 많은 친구들이 이미 당신의 페이지를 좋아하고 있는지, 또 그들이 누구인지 알 수있습니다.

참고할 만한 파라미터로는

소스 적용 예

SCRIPT

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

HTML

<div class="fb-like-box" data-href="http://www.facebook.com/webactually" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

결론!!

사이트에 대한 상태를 공유하고 싶다면 Activity Feed(액티비티 피드)를 사용하고, Facebook Page(페이스북 페이지)에 대한 정보를 공유하고 싶다면 Like box(좋아요 박스)를 사용하면 됩니다.

워드프레스 기반 브랜드페이지 제작

기간 : 2011. 08 ~ 2011. 09
클라이언트 :박만석

• 워드프레스 구축 컨설팅 & 개발
• 전문 부동산 워드프레스 테마
• 물건 입력 관리자 화면 커스터마이징
• 구글 맵 Api 연동
• 페이스북, 트위터, 유투브 등 소셜 미디어 연동
• 소셜댓글 라이브리 연동

Day 1. 산을 넘으니 바다로다

하늘은 높고 단풍과 함께 우리들의 감성도 알록달록 물드는 가을입니다. 그렇습니다. 웹액츄얼리 정기 워크샵을 떠날 때가 왔습니다. 이번 워크샵 장소는 강원도 양양에 위치한 쏠 비치 리조트입니다.

목요일 낮이라 도로가 막힐 일이 없을 거라 예상했지만 생각보다 차가 많았습니다. 차, 도로, 빌딩만 가득 차 있던 시내를 지나자 나무와 산이 조금씩 보입니다. 그것만으로 차 안에선 감탄의 찬사가 터졌습니다.

그때 가평 휴게소가 보이는군요. 고속도로 탈 때는 휴게소 음식이 제일이죠. 여기선 간식거리만 삽니다. 아직 11시밖에 안됐거든요.

배고파질 때쯤 설악 휴게소에 도착합니다. 휴게소 점심 메뉴는 떡라면, 돈까스, 비빔밥. 음식을 시키고 보니 1시. 근무할 때 점심시간과 동일한걸 보니 우리의 생체시계가 얼마나 정확하고 과학적인지 알 것 같습니다.

한계령의 단풍

금강산도 식후경이라고 이젠 단풍을 즐길 때 입니다. 워크샵 장소로 가는 길은 미시령 또는 한계령으로 빠지는 2가지 선택지가 있었습니다. 운전사에게는 좀 부담스럽지만 좀더 예쁜 단풍을 즐기고자 한계령으로 가기로 했습니다.

한계령의 단풍은 말로 표현할 수 없을 정도로 멋졌습니다. 다들 차창에 붙어 벌린 입을 다물지 못했죠. 이 멋진 풍경을 그냥 넘어갈 웹액츄얼리가 아니죠. 갓길에 차를 대놓고 제대로 된 단풍을 즐기기로 합니다.

왔노라. 보았노라…!!

체크인 후 배정받은 숙소는 노블리안 303호. 깔끔한 원목 현관문을 열고 들어서니 고급 별장 같은 실내가 펼쳐집니다.

잠깐의 업무 체크시간

각자 짐을 풀기 무섭게 잠시 업무를 확인합니다. 평일에 잡힌 워크샵이라 오전에 온 메일을 확인 하고 급한 클라이언트의 요청 사항은 대응을 해야합니다. 노트북 2대로 콘텐츠, 디자인, 개발, 코딩에 이르기까지 다양한 업무를 일사천리로 마무리합니다.

해변에서의 공중부양

워크샵의 핵심. 세미나 시간

노블리안 라운지에도 해변이 보이는 야외 테라스가 있습니다. 이곳에서 잠시 수다 타임을 갖은 우리는 의미있는 토론을 위해 숙소로 갑니다. 세미나 주제는 각 팀별로 자체적으로 정해 다같이 토론하는 식으로 진행했습니다.

그리고 이 글을 쓰고있는 콘텐츠팀의 라보배는 ‘영문을 한글로 표기하는 법’을 공유해 웹액츄얼리팀에서 만큼은 틀리지 말아야 할 맞춤법을 공유했습니다. 마지막으로 경영지원팀의 김미진님은 ‘연말정산 소득공제’를 유리하게 활용하는 법을 알려주었습니다.

워크샵의 하이라이트. 웰빙 저녁식사 시간

세미나가 끝나자마자 이사가 준비한 호주산 A(+ 무한대) 소고기 등심 먹을 준비를 합니다. 메인 요리는 소고기이지만 그에 못지 않게 ‘웹액츄얼리 스타일’로 웰빙 에피타이저를 준비했습니다. 제이미 올리버로부터 전수받은 것이라 주장하는 팀장의 ‘오렌지 버섯 샐러드’, 초보 주부 이승연님의 돈 주고 못 사먹는 ‘엄마표 된장국’과 ‘부추무침’ 등 다양하게 차려진 저녁 식사를 준비했습니다. 물론 술이 빠질 순 없겠죠. 고기와 잘 어울리는 저렴한 칠레 레드와인 ‘G7′과 이탈리아 화이트 와인 ‘Love Hollic’ 까지 합세하자 여느 레스토랑 못지 않은 호화로운 식사를 즐기는 기분입니다.

리조트 저녁 산책

환상적인 저녁식사를 마치고 소화를 위한 산책을 나섭니다. 노블리안 콘도와 이어진 통로를 걷다보면 쏠 비치 호텔에 다다를 수 있습니다. 호텔 각각의 방은 오페라 관중석처럼 중앙 라운지를 감싸듯 복도를 따라 둥그렇게 배열되어 있는데, 천장의 새파란 하늘과 구름 프린트가 인상적이었습니다. 우리는 푹신한 호텔 로비에 앉아 담소를 나누며 다음날 아침엔 이곳의 커피와 빵을 먹어보기로 합니다.

Day 2. 웹액츄얼리 식신들의 행진~

다음날 아침이 밝았습니다. 체크아웃을 하고 나오니 딴 세상이 펼쳐져 있었습니다. 저 멀리 보이는 바다와 쏠 비치 정원 안에 있는 호수가 이어져 보여 마치 바다의 연장선상에 서있는 기분입니다.

호텔 라운지에서의 아침 식사

전날 봐뒀던 호텔 라운지에 있는 카페에서 아침을 먹기로 합니다. 간단하게 빵과 커피, 차를 주문합니다. 쏠 비치의 베이커리는 상당히 맛있다는 추천이 많아 모두들 반드시 먹고야 말겠다는 의지가 아침부터 대단했습니다.

카페 분위기는 마치 무인도 해변에 세워진 고급 별장처럼 화이트 컬러와 원목 느낌이 살아 있습니다. 재즈 음악과 함께 라이브로 노래를 직접 들려주던 외국인 가수도 있어 더 특별한 공간에 와 있는 기분이었습니다.

속초 중앙 시장 나들이

아침을 먹고 바로 이어지는 점심시간! 웹액츄얼리팀은 비록 여자 멤버로만 이뤄져 있지만 남자보다 더 많이 먹는 ‘식신’들로 포진해있죠.

오후 업무 체크 시간

속초 시내, 시장 나들이

서울에서 떠날 때는 한계령으로 왔으니 돌아갈 때는 미시령으로 가기로 합니다. 컴컴한 밤 으스스한 분위기의 미시령 도로를 지나고 있으니 무서운 이야기가 나오기 시작합니다. 가장 무서웠던 얘기는 팀장님과 아는 사람이 죽었던 런던 유학생 토막 살인사건. 귀신이나 유령보다 사람이 제일 무서운 것 같습니다.

드디어 회사에 도착했습니다. 벌써 저녁 9시가 되었군요. 남은 음식은 각자 배분해 사이좋게 나눠 가져갔습니다. 살림살이가 훨씬 나아질 것 같아요. 고기 가져간 사람이 제일 부럽습니다. 지금 이 글을 쓰는 이 순간도 아직까지 입안에서 맴도는 육즙과 고기맛이 잊혀 지지 않습니다.

워크샵을 다녀와서…

1시간만 교외로 나가면 강과 산 자연이 펼쳐져 있습니다. 우리는 이제 회색 도시에 너무 길들여져, 자연의 아름다움을 느낄 틈도 없이 사계절을 보내고 있습니다. 짧은 하루였지만 자연, 단풍, 바다를 보고 오니 마음이 한결 여유로워 집니다. 이것이 자연이 주는 선물이겠지요.