우리의 본능은 기존 것과 다르면 위험하다고 느끼지만 진짜 큰 위험은 경쟁업체와 같아지는 것이다.
애런 월터Aarron Walter

‘아름다운 웹사이트 만들기’ 시리즈의 다섯 번째 책, 《감성 디자인》을 소개합니다. 이 책에서 말하는 감성 디자인은 웹사이트를 위한 것이지만, 일상 생활 속 물건에서도 쉽게 발견할 수 있습니다. 산업혁명으로 말미암아 기계적인 방식으로 대량 생산된 물건만 접하던 사람들이 좀 더 인간다운 것을 원하기 시작했습니다. 단순히 기능을 넘어서서 감성적인 자극을 주는 기분 좋은 물건에 더 매력을 느끼고 구매하게 된 것이죠.

그동안의 웹디자인 산업은 디자인과 사람에 대한 철학보다는 단순히 사이트가 잘 보이게 만드는 것에 치중했습니다. 사용자 경험에 충실한 기능적인 사이트를 시도하는 긍정적인 시기도 있었지만, 비슷비슷한 디자인의 사이트가 대량으로 쏟아지게 되었습니다. 웹디자인계의 급격한 산업혁명 시기라 할 수 있습니다. 스톡 이미지(대여 이미지)로 만들어진 웹사이트는 공허한 화려함만을 가져왔습니다. 고유의 브랜딩과 요구를 충족하기보다는 각종 정보가 단순히 나열된 수준의 웹사이트였던 거죠. 아직도 많은 웹디자이너가 이러한 제작 과정을 그대로 답습하는 듯합니다.

지금 웹디자인 산업은 또 한번 혁신의 단계에 접어들었습니다. 기계적인 사이트를 접하던 사용자들은 안목이 높아졌고 사이트가 그만큼 더 많은 것을 해주기를 원하고 있습니다. 예쁘고 기능적이면서 도 재미와 감동을 주는 감성적인 사이트에 더 이끌리게 된 것이죠. 그렇지 않은 사이트들은 외면받기 시작했습니다.

이 책은 사이트가 더는 사용자에게 외면받지 않고 사랑받는 방법을 제시합니다. 바로 웹사이트 디자인에 감성을 추가하는 방식으로 말이죠. 진정 사용자를 위한 웹디자인 시대가 온 것입니다. 물론 이작업은 절대로 쉽지 않습니다. 감성 디자인은 문구나 사진, 디자인 스타일만 바꾼다고 해서 완성되는 것이 아니기 때문이죠.

메일침프(MailChimp)의 사용자 경험 수석 디자이너였던 애런 월터(Aarron Walter)는 우리가 작업할 감성 디자인에 대해 좀 더 ‘사람’을 표현해야 한다고 말합니다. 저자의 말처럼 웹디자이너로서 우리는 “단지 페이지를 디자인하는 것이 아니라, 인간적인 경험을 디자인”하는 사람이어야 합니다. 그럴수록 우리의 사이트는 더 오래 기억에 남을 것이고, 사람들의 신뢰를 얻어 오래 지속되는 사이트가 될 수 있을 것입니다.

국내의 웹디자인 산업 종사자들이 이 책을 읽고 디자인에 대한 많은 통찰력과 따뜻한 감성을 갖게 되어, 사용자에게 사랑받는 웹사이트를 만들게 되기를 진심으로 바랍니다.

웹액츄얼리 북스팀

최고의 워드프레스 개발자가 되는 방법

먼저 몇 가지 확실히 정하고 갑시다. 최고의 워드프레스 개발자가 되는 것은 어렵습니다. 정말 어렵습니다. 많은 에너지와 시간과 결심이 필요할 것입니다. 당신이 최고가 되기 위한 지름길로 갈 수 있는 체크리스트를 찾고 있다면, 시간을 낭비하고 있는 것입니다. 최고가 되는 것은 어렵습니다. 확률적으로도 그럴 가능성은 희박합니다.

그런데 말입니다, 워드프레스를 설치하고, 몇 개의 튜토리얼을 읽은 후 몇 개의 테마를 만들었다고 해서 최고의 개발자가 되는 것은 아닙니다. 일반인보다는 더 많이 알고 있을 테니 자신을 ‘전문가’라고 생각할 수 있습니다. 충분히 그럴 수 있죠. 하지만 최고의 개발자는 기본을 넘어 가능성의 한계에 도전합니다. 그들은 혁신적이고, 커뮤니티에 공헌하면서도 자기에게 주어진 일에 관해선 ‘달인’임을 증명하는 사람들입니다. 저는 여러분이 단순히 ‘전문가’가 아닌 ‘최고’가 되기를 바랍니다.

왜 최고의 개발자가 되어야 하는가

왜 최고가 되려고 하지 않습니까? 당신이 워드프레스로 작업을 하고 있거나 할 계획이라면, 왜 보통 수준에서 만족하려고 합니까? ‘보통 수준’은 이미 세상에 차고도 넘칩니다. ‘노멀(normal)하다’는 자체가 매우 과대평가되어 있죠. 하지만 최고의 워드프레스 개발자가 되어야 하는 이유는 따로 있습니다. 예를 들면 다음과 같습니다.

하루에 한 시간씩 책 읽기

당신이 최고가 되고자 한다면, 다른 개발작업 말고도 적어도 하루에 (*workday – 정상 근무일 기준) 한 시간씩 워드프레스에 관한 책을 읽고 배워야 합니다. 여기서 지름길이란 없습니다. 워드프레스를 마스터하는 데는 시간이 걸립니다.

당신이 텔레비전을 즐겨본다면 보는 시간을 줄이십시오. TV시청은 90% 이상이 당신에게 좋지 않습니다. 당신이 게이머라면 게임을 팔거나 내버리세요. 최고에 도달하기 위해서는 헌신과 희생이 필요합니다. 그러기 위해서는 첫 단추로 당신의 인생에서 도움이 안 되는 것부터 정리해야 합니다.

먼저 하루 한 시간은 어떤 방해도 없이 오직 책읽기에 전념하는 시간으로 정하십시오. 메신저 창을 닫고 휴대폰도 무음으로 설정해놓고 읽으세요. 그리고 책을 읽으면서 배운 점들을 노트에 정리하세요. 당신이 생각한 것보다 시간이 더 빨리 간다는 것을 알게 될 것입니다. 이것을 매일, 매주, 매달 하세요. 그리고 이 계획이 성공하는 만큼 읽는 시간을 늘려가세요.

다른 방법으로는 일주일에 두세 번은 3시간씩 정해놓고 공부하는 것입니다. 여기서 중요한 점은 필요한 시간을 반드시 확보해서 배우려는 의지를 확고히 하는 것입니다.

워드프레스 대학 등록하기

지금이 워드프레스를 배우고 마스터하기에 가장 좋은 때입니다. 시간과 노력을 투자할 마음만 있다면 훌륭한 자료가 워낙 많기 때문입니다. 경험을 쌓기 전에 어느 정도의 교육은 필요하게 마련입니다. 물론 당장 이것저것 해보고 싶겠지만 저는 먼저 여러분이 배움에 필요한 인내와 자기 훈련을 습득했으면 합니다. 여러 가지 해볼 수 있는 기회는 나중에 충분하니까요. 그리고 여러분이 배움의 과정을 시작할 때는 경험의 사회적 요소로 시작하는 것이 중요합니다.

알맞은 사람들과 어울리기

누구나 어울리는 사람을 닮아가게 마련입니다. 당신이 최고의 워드프레스 개발자가 되고 싶다면 최고들과 함께 시간을 보내십시오. 그들의 블로그를 읽고, 트위터를 팔로하고, 그들의 생각와 아이디어에 피드백을 남기십시오. 워드캠프(WordCamps)에 가서 그들의 강연도 듣고 코드포잇(Code Poet)에 실린 인터뷰도 읽도록 하십시오. 그리고 그들의 예를 따라가면서 조언도 구하십시오. 무엇보다 그들의 조언대로 실행하면서 그들과 대화하시기 바랍니다.

다음은 당신이 시작하기에 좋은 몇몇 워드프레스 개발자 명단 리스트입니다.

자료 읽기

워드프레스에 관한 자료는 방대합니다. 수천 명의 사람들이 워드프레스에 대해 얘기하고 있으며, 가려내기 어려울 정도로 늘어나고 있습니다. 하지만 권위자는 있기 마련이죠. 당신이 워드프레스 전문가가 되기 위해서는 최고 품질의 자료를 찾아서 그것에 집중해야 합니다.

당신이 시작하기 좋은 몇몇 자료를 소개합니다.

기술 이해하기

당신이 워드프레스를 정복하고자 하는 개발자라면 그 기술을 이해해야 합니다. 당신이 이미 프로그래머라면 PHP와 MySQL은 처음 보는 것이 아니겠죠. 당신의 기술이 최신일 수 있도록 지식을 계속 업데이트하세요. 프로그래밍이 처음이라면 다음을 통해 배우기 시작하면 됩니다.

복습하기

당신이 배우고 있는 것을 실행에 옮기세요. 워드프레스 웹사이트를 만드는 것부터 시작하세요. 튜토리얼을 읽고 나서 혼자 만들어보세요.
그리고 실험을 해보세요. 당신이 배운 것을 하나하나 추적해보고, 미래의 문제 해결 방법으로 쓸 수 있도록 배우면서 얻은 통찰력과 해결 방안을 기록하세요.
그동안 배운 것을 당신의 프로젝트와 실험에 적용하는 데 최대한 많이 활용할 수 있기를 바랍니다.

몇 가지 탐험해야 할 것이 있습니다.

워드프레스와 함께 경험 쌓기

이제 공부와 함께 실제 경험을 쌓는 방법에 대해 알아보겠습니다.

최고로 가는 과정은 많은 노력과 어려움을 동반합니다. 이 과정에서 반드시 필요한 것은 자신만의 작업이란 안전한 영역 밖의 경험을 쌓아가는 것입니다. 가장 좋은 방법 중 하나는 바로 고객을 위해 작업을 해보는 것입니다.

고객과 일하기

돈을 받든 그렇지 않든 고객을 위해 작업하는 것은 경험을 쌓는 데 좋은 방법 중 하나입니다. 고객과 함께 일할 때 혼자서는 생각지 못하던 문제들을 직면하게 됩니다. 여러분이 시작 단계에 있다면 ‘첫 고객 잡는 법’부터 공부하시기 바랍니다.

시장의 초점(큰 고객, 작은 고객 등)은 다양할지라도 핵심은 많은 경험을 쌓는 것입니다. 목표는 수백 시간의 워드프레스 작업량 정도가 아니라 수천 시간입니다. 이는 실제 경험이 반드시 필요하기 때문입니다. 실제 경험을 쌓는 데는 고객을 위해 일하는 것이 가장 좋은 방법 중 하나입니다.

공공의 테마 개발하기

무료든 유료든 여러분이 실제로 사용할 만한 테마를 만들어 발매하십시오. 그리고 그 테마의 최종 사용자와 다른 개발자들의 피드백에 귀 기울이십시오. 여러분이 신뢰하는 테마 디자이너에게 리뷰를 부탁하십시오. 그리고 피드백을 참고해서 여러분의 기술이 향상되는 만큼 테마를 업데이트하십시오. 여러분 스스로 자부심을 느낄 수 있는 테마를 만들기 위해 노력하십시오.

플러그인 개발하기

워드프레스를 작업하고 공부하다 보면 언젠가 충족되지 못한 필요를 발견하게 될 것입니다. 그럴 때는 여러분 스스로 해결하십시오. 플러그인 개발에 대해 배운 모든 것을 동원해서 실행에 옮기십시오. 이미 포화상태인 플러그인 커뮤티니에 그저 또 다른 플러그인 하나를 더하지 말고 실질적인 필요를 충족시킬 수 있는 안전한 플러그인을 만드십시오. 그리고 무료든 유료든 발매하고, 여러분이 만든 플러그인 사용자들로부터 피드백을 얻도록 하십시오.

패치 공헌하기

Core Contributor hanbook을 읽고 패치를 제출하는 방법을 배우십시오. 처음에는 어렵게 느껴질 수 있지만 도전해볼 만한 과제를 찾아 끝까지 씨름해보십시오. 패치 공헌은 매우 귀중한 경험인 동시에 최고의 워드프레스 개발자로 자리매김하는 데 중요한 요소입니다.

디버깅 마스터하기

버그가 없는 코드를 작성하는 방법을 배우는 것은 훌륭한 개발자가 되는 데 매우 중요한 과정입니다. 코덱스로 시작해서 워드프레스에서 디버깅하는 법을 배우세요. 앤드류 나신(Andrew Nacin)의 “워드프레스 디버그 하는 다섯 가지 방법”을 읽으십시오. 그리고 Core Control, Debug Bar, 그리고 Log Deprecated Notices와 같은 개발자 중심의 플러그인에 익숙해지도록 하십시오.

워드프레스 커뮤니티 가입하기

공부하면서 배운 것을 실천에 옮기고 나면 다음 단계는 커뮤니티의 활발한 멤버가 되는 것입니다. 여러분이 아무리 환상적인 개발자라 해도 여러분의 존재를 아무도 모른다면 아무 소용이 없습니다. 커뮤니티에 아낌없이 시간을 투자하십시오. 가장 좋은 방법은 바로 여러분이 알고 있는 지식을 공유하는 것입니다.

튜토리얼 만들기

저는 2006년에 간략한 튜토리얼을 만들었습니다(다소 오래된 것입니다). 제가 이것을 배우기 위해 쏟아부었던 시간과 두통에서 사람들을 건져주고 싶어서였죠. 많은 사람이 이것을 읽고 제게 고맙다는 인사를 했습니다. 어떤 사람은 제게 작업을 부탁하기도 했죠. 그러니 여러분도 여러분이 알게 된 가장 유용한 정보를 공유해서 여러분이 흘린 땀방울의 혜택을 다른 사람들과 나누시기 바랍니다. 그만큼 가치 있는 일이기 때문입니다.

코덱스(Codex)에 기여하기

코덱스를 읽으면서 개선이 필요한 부분을 발견하게 될 것입니다. 코덱스의 자원봉사자가 되는 방법을 알아보십시오. 문서의 질을 향상시키기 위해 시간을 투자하십시오. 코덱스의 문서는 계속 향상되고 있지만 워드프레스 코어에는 아직 문서화되지 않은 기능들이 있습니다. 아직 여러분의 실력으로 건들기 어려운 부분이라면 다른 사람들과 공유해서 배움의 기회로 삼으십시오.

포럼에 참여하기

워드프레스 초보자는 대부분 공식 서포트포럼에서 질문을 올리면서 시작합니다. 이 질문들에 답하면서 시작하십시오(아무리 초보적인 질문이라도 말입니다. 모두 한때는 초보자였으니까요). 여기서 시작해서 WordPress Stack Exchange Community의 활성멤버가 되십시오. 이곳의 질문들에 답하고, 또한 다른 개발자들의 답변들을 보면서 배우십시오.

워드캠프에 참여하기

다가오는 워드캠프에 참석하고 워드프레스 커뮤니티의 가치를 향상시킬 수 있는 방법을 찾으십시오. 참된 전문 지식의 표시는 자신이 알고 있는 것을 남에게 가르칠 수 있는 능력입니다. 워드캠프 다이어리를 읽어보세요. 더 많은 도전을 원하신다고요? 그럼 캠프 주최자가 되어 거주지역에서 워드캠프를 시작하십시오.

보상과 책임감

최고에게는 그 노력에 상응하는 보상이 있습니다. 여러분의 사업이 워드프레스 기반이라면(그래야 하는 이유 7가지를 읽어보세요) 워드프레스를 정복하는 것이 성공의 매우 중요한 요소입니다. 2011년 공식 워드프레스 설문조사 결과에 따르면, “6800명의 자영업 응답자가 17만 개가 넘는 웹사이트를 직접 책임지고 있다”고 응답했고, 시간당 보수의 평균 중앙값은 50달러였습니다.

파레토 원리에 따르면 이들 중 상위20% 개발자(1400명 이하)가 전체의 80%를 책임지고 있습니다(물론 이들은 시간당 50달러 이상 법니다).
상위 20%에 든다는 것은 고도의 책임감을 요구합니다. 최고의 위치를 유지하려면 지속적인 교육과 경험에 대한 강한 의지가 필요하기 때문입니다. 배움에는 끝이 없다는 사실을 잊지 마십시오. 최고의 자리에 있다는 것은 워드프레스 생태계의 미래와 건강이 여러분의 어깨에 달려 있다는 뜻이기도 합니다. 적극적으로 참여하십시오. 중요한 사안에 목소리를 내십시오. 여러분의 성공의 일부를 워드프레스의 기반을 다지고 미래를 위하는 데 재투자하십시오.

결론

최고의 워드프레스 개발자가 되기 위해서는 지속적인 향상을 추구하고 힘든 일을 마다하지 않겠다는 마음가짐이 있어야 합니다. 우선 배움에 대한 의도적인 집중으로 시작해서 폭넓은 실제 경험으로 나아가게 되지요. 마지막으로 ‘최고 개발자’라는 타이틀에는 워드프레스 커뮤니티에 대한 헌신은 물론, 워드프레스의 미래를 만들어가야 한다는 책임이 요구되는 것입니다.

여러분은 어떤가요? 최고의 워드프레스 개발자가 되기 위한 여러분의 조언은 무엇입니까?

조나단 울드 Jonathan Wold
@sirjonathan

조나단 울드(Jonathan Wold)는 아리따운 빨강머리 조슬린(Joslyn)의 남편이자 아기 제이든(Jayden)의 아버지다. Pigeon의 전도사이며 워드프레스 컨설턴트이기도 하다. 현재 ‘워드프레스와 웹 개발 비즈니스 만들기(Building a web development business with wordpress)‘라는 프리미엄 튜토리얼 코스도 진행하고 있다.

번역 : 김건표, 교정/교열 : 이현숙
이 글을 읽고 공감이 가시면 ‘그냥 퍼나르지 마시고’ 밑에 있는 트위터나 페이스북 ‘좋아요’ 버튼을 한번 클릭해주세요. 저희가 번역자에게 정식으로 부탁한 글입니다.

※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주세요.

※ 웹액츄얼리 북스팀에서 웹디자인 관련 영문번역이나 윤문을 해주실 분을 찾습니다. 관심있으신 분은 메일 보내주세요. books@webactually.com

[편집자주]

올해 WWDC에서 애플은 레티나 디스플레이가 탑재된 MacBook Pro를 새로 선보였다. 당연히 새로운 아이패드, 아이폰4, 그리고 그전의 4S 모델과 똑같은 화소밀도의 스크린을 보유하고 있다. 15인치 스크린의 4배에 달하는 픽셀은 디자이너에게 전혀 새로운 캔버스가 될 것이다. 그 이유는 바로 증가된 화소로 인해 인터페이스에 보다 많은 디테일을 담을 수 있기 때문이다. 예를 들면 보다 섬세한 디테일의 아이콘, 아름다운 타이포그래피를 살려주는 선명한 텍스트, 그리고 팝업 스크린에서 인쇄보다 더욱 높은 품질(fidelity)의 사진과 이미지 등 말이다.

레티나 맥북 프로가 발표되었을 때 나는 iOS에서 내가 가장 좋아하는 하드웨어 중 하나가 데스크톱에 탑재되었다는 사실에 매우 흥분했지만 디자이너로서 레티나를 위한 최선의 디자인 방법은 무엇일까, 고민하게 되었다. 또한 증가된 화소를 잘 활용해서 우리의 앱들을 좀더 멋지게 만들고 싶은 의욕이 생기기도 했다. 그리고 이내 맥은 물론 아이폰과 아이패드에서도 사용할 수 있는 레티나 앱을 손쉽게 만들 수 있는 방법을 찾아냈다.

나의 작업 과정 (My Workflow)

Realmac에서 나는 레티나 맥북 프로를 시네마 디스플레이에 연결해서 사용하고 있다. HiDPI 스크린이 있지만 포토샵 디자인을 할 때 주로 사용하는 애플리케이션이 레티나 스크린에 맞게 아직 업데이트되지 않았기 때문이다. 맥 앱을 만들 때 주로 나는 1200×1800픽셀 크기의 캔버스를 사용한다. 즉, 27인치 디스플레이에서 두 배 크기로 보면 정신이 없다는 소리다. 그래서 나는 주로 모든 디자인을 “@1x”로 하고 있다. 내 문서들은 대부분 레티나 디스플레이가 데스크톱에 탑재될 것이라는 발표가 있기 오래 전에 만들어졌다. 비록 HiDPI 데스크톱이 나올 것이라는 소문은 있었지만 말이다. 새로운 디스플레이에 대한 소식을 접할 때마다(맨 처음은 아날로그(Analog)였음) 가장 먼저 한 것은 우리의 앱이 새로운 디스플레이의 장점을 십분 활용할 수 있도록 하는 것이었다.

벡터 모양 (Vector Shapes)

나는 디자인을 처음 시작했을 때부터 모든 것을 포토샵에서 최대한 벡터만을 사용할 것을 주장해왔다. 물론 실험에 필요한 이미지를 제외하고는 말이다. 나의 배경이 아이콘 디자인이어서 이것이 나에게는 매우 편할 뿐 아니라 무언가를 새로 다듬고 크기를 조절하거나 편집할 때 많은 자유를 제공한다. 당시에는 몰랐지만 벡터 모양으로 디자인할 때 미래의 경쟁력도 갖출 수 있다. 따라서 Analog를 레티나 디스플레이에 맞춰야 했을 때 대부분의 작업이 이미 해결되어 있었다. 그저 캔버스를 기존의 화소 크기보다 두 배로 크게 하고 PSD를 사본으로 저장하는 정도였다.

혹시 최근에 스매싱매거진에서 나온 «스매싱북3»에 대해 들어보셨나요? 이 책은 독자들에게 새로운 실용적인 기술들과 혁신적인 웹디자인에 대한 개념을 완전히 새롭게 잡아줄 것입니다. 웹액츄얼리팀도 이 분야에 열심히 공부중인데요. 내용이 정말 환상적입니다. 저희 북스팀이 올해 내년 봄 출간을 목표로 준비중이니 기대해주세요. 그리고 다음달에 «스매싱북2»를 출시할 예정입니다. 현재 «스매싱북1»은 판매중입니다.

어떤 사람은 캔버스를 두 배로 늘리고 레티나 자산을 개발자에게 바로 엑스포트해야 만족하겠지만 어떤 사람은 엑스포트하기 전에 문서에 여러 편집 작업을 하길 원할 수도 있다. 정답은 없다. 개인적으로는 각 자산을 문맥 안에서 실험한 후 최선의 접근법을 찾는 것을 선호한다. 버튼의 스타일에 따라 단일 화소 경계선이 디파인되어 있지 않아 보이거나 클릭할 수 없어 보일 수 있지만 작고 섬세한 디테일이 많은 아이콘의 경우 이런 문제는 없다.

위 이미지에서 두 엑스포트를 비교해볼 수 있다. 왼쪽의 경우 아이콘의 레이어 스타일 값을 그저 두 배로 늘렸지만 오른쪽의 경우 그 값을 잘 조정한 것이다. 값을 두 배로 할 때 업스케일할 경우 안쪽 그림자의 거리가 2px로 늘어나게 되는데 이것은 레티나 디스플레이와는 잘 맞지 않는다. 따라서 무엇이 가장 잘 맞는지 실험하는데 위의 경우 주로 1px의 거리가 잘 맞는 것으로 보인다. 이에 대해 더 자세히 알고 싶으면 디자이너 루이 만티아(Louie Mantia)가 Dribbble에 쓴 글을 참조하기 바란다.

처음부터 @2x로 디자인할 경우 모양과 엘리멘트가 홀수 숫자 화소여서는 안 된다. 스케일을 줄일 때 모서리가 흐려져 보이기 때문이다. 포토샵에서 그리드선과 하위 구분을 2화소마다 설정해놓는 것이 도움이 될 것이다.

그래픽 테스트 (Testing Graphics)

최적화된 그래픽을 레티나 기기에서 최대한 빨리 테스트하는 것이 중요하다. 몇 가지 방법을 소개하고자 한다. 레티나 디스플레이가 탑재된 맥북 프로를 사용하고 있다면 외장 디스플레이로 포토샵과 함께 미리보기를 사용하면 된다. PSD 작업을 하고 있을 때 미리보기를 열고 미리보기 창을 맥북 프로 디스플레이로 가져오는 것이다. (이미지가 원래 해상도로 보이게 하는 것을 잊지 마라). 포토샵에서 변경사항을 저장할 때마다 미리보기 창을 리포커스(refocus)하면 새로고침이 되어서 업데이트된 내용을 볼 수 있다. 그리 이상적인 방법은 아니지만 아도비가 새로운 디스플레이에 맞춰 CS6을 업데이트하기 전까지는 쓸만하다. 아직까지는 포토샵이 저해상도 모드에서만 열리기 때문에 HiDPI에서는 창들이 흐리게 보인다. 만약 레티나 맥북 대신 새 아이패드가 있다면 Bjango의 Skala를 추천한다. 맥 앱을 작동한 후 포토샵의 Remote Connections panel에 설치하고 iOS를 론칭하면 모든 변경사항이 자동적으로 반영된 문서가 기기에 나타날 것이다.

Slicy로 자산 엑스포트하기 (Exporting Assets with Slicy)

앱을 만들 때 내가 가장 싫어하는 것 중 하나가 바로 목업(mockup)에서 그래픽을 엑스포트하는 것이었다. 시간도 많이 걸릴뿐더러 너무도 지루한 작업이기 때문이다. 물론 레티나에 맞춰 디자인할 때 어떤 요소라도 두 가지 세트의 비트맵 이미지를 엑스포트해야 한다. 하나는 “@1x”, 또 하나는 “@2x”로 기본 해상도의 높이와 너비가 정확히 두 배여야 한다.
최근 이런 고된 작업을 덜어주는 데 꼭 필요한 앱이 나왔는데, 바로 MacRabbit의 Slicy다. PSD를 Slicy앱 아이콘에 끌어놓기를 하면 설정해놓은 여러 해상도에 어떤 레이어나 그룹도 엑스포트하게 된다. 정상적인 크기나 두 배의 크기로 그래픽을 만든다고 해도 상관없다. Slicy는 모든 디자이너를 위한 앱이다. Slicy를 사용하려면 표본 해상도 문서에서 레티나 자산을 만들기 위해 레이어나 그룹 이름 뒤에 “.png+@x2x”를 포함시키면 된다. 또는 PSD가 이미 두 배의 크기로 되어 있으면 두 사이즈를 다 얻기 위해 엑스포트하려는 요소 끝에 “@2x.png”라고 적어야 한다. 이미 언급한 레이어 스타일의 업스케일링 문제 때문에 나는 개인적으로 후자를 선호한다. 자산을 스케일링하는 여러 방법에 대해서는 Slicy에서 찾아볼 수 있다.

디스플레이 바꾸기 (Display Switching)

물론 맥은 외장 디스플레이를 사용할 수 있기 때문에 레티나와 그렇지 않은 디스플레이 사이에 앱들을 옮겨 사용할 수 있다. 그래픽이 레티나 디스플레이에 업데이트되기 전에 어플리케이션 창이 통과해야 할 최소한의 한계점이 있다(창 너비의 50%). 따라서 디스플레이 사이를 옮겨 다닐 때는 앱이 어떻게 반응하는지 테스트할 것을 권장한다.
Analog를 여러 디스플레이에 테스트할 때 문제가 하나 발견되었는데, 바로 디스플레이 사이에 창을 끌어놓기할 때 어떤 자산에서 약간의 위치변경이 있었다는 것이다. 이 점은 아날로그에서 여러 곳에서 쉽게 찾아볼 수 있었다. 특정 아이콘들이 아주 조금씩 위치를 벗어나 있고 필터 미리보기를 통해 두 배의 크기로 다시 생성하면 원래의 이미지와 일치되지 않았다. 이 두 문제는 작업과정에서 Slicy를 좀 더 일찍 사용했더라면 피할 수 있었다. 문제는 두 크기를 같이 만드는 대신 원본에서 아이템들을 각각 다시 그렸기 때문에 발생한 것이다.

앱 아이콘 (App Icons)

OS X Mountain Lion에서도 레티나 디스플레이에 맞게 아이콘들을 업데이트하였다. 애플은 Icon Composer와 ICNS 파일 대신 “Icon Set” 폴더를 만들었다. 일반적인 16-, 32-, 128-, 256-, 그리고 512픽셀 버전들과 함께 @2x 버전들이 포함되어야 할 것이다. 어플리케이션의 UI처럼 말이다. Icon Set를 만들기 위해서는 새로운 폴더를 만들고 각 아이콘을 다음과 같은 네이밍 컨벤션을 사용하여 sRGB 색깔 프로파일과 함께 PNG로 저장하면 된다.

icon_<size>x<size>.png

그리고 난 후 포함된 버전들과 함께 갈 수 있는 @2x 버전들이 있는지 확인해야 한다. 예를 들면 10.7에 보이던 1024-픽셀 아이콘은 이제 icon_512x512@2x.png가 되어야 한다. 언젠가는 다음 테이블처럼 완성된 아이콘 표현 목록을 만들어야 할 것이다. 모든 것이 엑스포트된 후 아이콘을 만들고 앱에 추가하기 위해서는 폴더 이름에 .iconset라고 적으면 된다. 매우 간단하지 않은가. Mountain Lion의 한 가지 좋은 기능은 Icon Set 폴더를 퀵룩(훑어보기)할 수 있다는 점이다. Icon Composer에서처럼 모든 순열과 변형(permutations and variations)을 볼 수 있는 슬라이더도 있다. Icon Set를 사용할 때 또 하나 좋은 점은 색상을 관리하고 분류하기가 훨씬 편하다는 점이다. Icon Set가 OS X Mountain Lion에서만 지원되기 때문에 OS X Lion이나 그전 것을 목표로 하고 있다면 iconuntil 명령 행 툴을 통해 Icon Set에서 ICNS 파일을 만들면 된다.

마지막 말 (Final Words)

이 글에서 나는 새로운 레티나 디스플레이를 위한 디자인 작업을 할 때 고려해야 할 몇 가지 중요한 사항과 나의 작업과정을 어떻게 레티나에 맞게 최적화했는지 살펴보았다. 혹 여러분이 사용하고 있는 다른 좋은 방법이 있거나 이 글에 대해 의견을 나누고 싶다면 Twitter 또는 아래에 코멘트를 남겨주면 고맙겠다.

끝으로 맥 앱 스토어에서 Analog 버전 1.2가 출시되면 반드시 확인하기 바란다. 레티나를 위해 여러 새로운 기능이 추가로 업데이트되었으며, 출시가 임박했다!

크리스토퍼 도우너 Christopher Downer
크리스토퍼 도우너는 인터페이스 디자이너로 리얼맥소프트웨어에서 근무하고 있다.

트위터 @cjdowner
개인 사이트 http://christopherdowner.com/

번역 : 김건표, 교정/교열 : 이현숙
이 글을 읽고 공감이 가시면 ‘그냥 퍼나르지 마시고’ 밑에 있는 트위터나 페이스북 ‘좋아요’ 버튼을 한번 클릭해주세요. 저희가 번역자에게 정식으로 부탁한 글입니다.

※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주세요.

※ 웹액츄얼리 북스팀에서 웹디자인 관련 영문번역이나 윤문을 해주실 분을 찾습니다. 관심있으신 분은 메일 보내주세요. books@webactually.com

[편집자주]

워드프레스 제대로파기크리스 코이어 CHRIS COYIER 제프 스타 JEFF STARR 저국내 최초 워드프레스 활용 가이드 출간!

책 구매하기책 미리보기책 상세설명

차례

원하는 섹션으로 빠르게 이동하고 싶다면 아래 링크를 이용하기 바랍니다.

서문

지금 이 순간 당신의 사이트는 어떤 스크린에서 마치 ‘죽음’처럼 끔직한 모습으로 보일지도 모릅니다. 또한 당신의 그 처참한 사이트가 방문자들을 쫓아내고 있는 동안 새로운 기기들은 이름도 채 외우기 전에 마구잡이로 쏟아져 나와 이미 처참한 당신의 사이트를 더욱 비참하게 만들고 있지요.

상상 속의 비좁은 CRT에 맞춰진 고정 레이아웃의 시대는 이제 끝났습니다. 그리고 스마트폰, 태블릿, 다양한 크기의 노트북 그리고 엄청난 크기와 해상도를 지닌 모니터를 통해 사이트를 접하는 오늘, 유동 레이아웃도 부족하기만 합니다.
 

그래서 반응형 웹디자인(Responsive Web Design, RWD)이 등장한 것입니다.

지난 2010년 이단 마콧(Ethan Marcotte)에 의해 ‘반응형 웹디자인’이란 신조어가 탄생된 이후 사이트를 반응형으로 만드는 디자이너 및 개발자들의 수가 점점 늘어나기 시작했습니다. 즉 뷰포트에 따른 경험의 차이를 실험한 후 만족도를 극대화하기 시작한 것이죠.
 

그렇다면 이것이 워드프레스 기반의 디자이너와 개발자인 당신에게 무엇을 의미할까요?

코드 포잇(Code Poet)이 이러한 궁금증을 가장 잘 해결해 줄 수 있는 사람들에게 물어보았습니다. 이 소책자를 통해 워드프레스를 반응형으로 디자인하기 위한 크리스 코이어(Chris Coyier), 이안 스튜어트(Ian Stewart) 그리고 새라 캐논(Sarah Canon)의 전략과 실제 사용법을 소개하고자 합니다.

1. 크리스 코이어 Chris Coyier

크리스 코이어는 CSS-Tricks.com의 운영자다. CSS-Tricks는 웹디자인과 개발에 대한 영감과 관련된 모든 것을 배울 수 있는 사이트다. 그는 ‘Digging into WordPress(워드프레스 제대로 파기)’의 공동 저자로, 디자인에 대한 좋은 글귀(quote)들을 모은 QuotesOnDesign.com을 운영한다.

도대체 반응형 웹디자인이 무엇이길래 이렇게 난리인가?

저는 ‘반응형 웹디자인’이란 단어를 처음 사용하고 그 의미를 구체적으로 정립해야 한다고 한 이단 마콧의 말에 동의합니다. 그래야 논의가 쉬워지기 때문이죠. 반응형 웹디자인이란 구체적으로 다음 세가지를 뜻합니다.

사람들은 우리가 만든 웹사이트를 다양한 크기의 브라우저 창을 통해 보기 시작했고, 이러한 경향은 가속화되고 있습니다. 그래서 우리는 사람들이 정확히 어떤 방식으로 우리가 만든 웹사이트를 보는지 알 수 없다는 것을 인정하고 그 변화에 빨리 대처해야 합니다. 왜냐하면 그 미래가 바로 현재이기 때문입니다.

왜 반응형으로 디자인 하는가?

한 가지 큰 이유는 너무 재미있기 때문입니다. 물론 (희망하기는) 사용하고 있는 브라우저나 기기에 상관없이 더 나은 경험을 제공한다는 이유도 있지만 그것은 첫 번째에 따라오는 부수 이익일 뿐입니다.

고객에게 반응형 웹디자인의 중요성을 어떻게 설명하는가?

저는 고객을 직접 상대하지는 않지만 쉽게 설득할 수 있을 것 같습니다. 주머니에 있는 최고급 휴대폰을 꺼내서 자신의 웹사이트를 확인해 보라고 하면 아마도 얼마나 후져보이는지 직접 느끼게 될 것입니다.

저는 웹 애플리케이션 디자인 세계에 살고 있습니다. 대부분의 사람들은 최대한 가장 많은 기기들을 수용하는 것이 이상적이라고 생각하고 있지요. 중요한 것은 개발 스케줄에 잘 맞추고, 적합한 재능을 찾고, 무엇이 가장 중요한 것인지를 결정하는 것 등입니다. 대부분의 ‘앱’ 경우 반응형 웹디자인이 정답은 아닙니다. 처음부터 작은 스크린에 초점을 둔 개발이 중요합니다.

고객의 디자인과 개발을 위해 반응형 디자인을 얼마나 자주 사용하는가? 디자이너 및 개발자로서 당신이 얻는 혜택은 무엇인가?

저는 100% 반응형 디자인 기술을 사용합니다. 프로젝트를 처음부터 새로 시작할 경우 다시는 고정된 사이트로 만들지 않을 것입니다. 혜택이라면 더 많은 사람들이 콘텐츠를 볼 수 있다는 점과 사이트의 미래가 보증된다는 점입니다.

반응형 웹디자인은 고정 디자인보다 쉽지 않습니다. 더 어렵습니다. 하지만 아주 약간 더 어려울 뿐입니다. 디자인의 어려운 점은 바로 디자인입니다. 얼마 전 @Canarymason의 트위터에서 기막힌 글을 읽었습니다.

물론 반응형 웹디자인은 어렵죠. 이건 디자인이니까요.

@canarymason

Of course responsive web design is hard. It’s design. #rwd

— Mason Wendell (@codingdesigner) March 20, 2012

반응형 웹디자인이 알맞지 않은 접근이라고 생각한 사례가 있는가? 있다면 그 이유는?

데이브 루퍼트(Dave Rupert)와 저는 최근 주간 팟캐스트인 ‘Shoptalk‘에서 이단 마콧을 인터뷰한 적이 있는데 바로 이 질문에 대한 그의 답이 마음에 들었습니다.

그는 아주 확고히 자리를 잡은 데스크톱 크기 버전의 사이트가 이미 있다면, 반응형 접근은 적합하지 않을 수 있다고 했습니다. 이런 경우 굳이 사이트를 ‘반응화’하려고 하지 말고 아예 ‘모바일 우선주의’로 새로 시작해서 기존의 사이트를 보완하고 나중에 데스크톱 사이트의 미래를 위한 토대로 사용하라는 것입니다.

제가 한 가지 더하자면 웹앱이 반응형 디자인과 항상 궁합이 잘 맞는 것은 아니라는 것입니다. 모바일 기기마다 상호작용이 너무 달라서 앱 사용시 전혀 다른 접근방식이 필요할 때가 많습니다. 예를 들어 워드프레스만 봐도 모바일 앱과 웹앱이 얼마나 다른지 알 수 있습니다.

반응형 웹디자인을 통해 고객은 물론 당신의 시간과 비용을 더 아낄 수 있었던 사례가 있는가?

제 생각에 반응형 웹디자인은 제대로 만들기 위해 보다 많은 시간이 드는 만큼 처음에 들어가는 비용은 꽤 많을 것이라고 생각됩니다. 하지만 보다 많은 고객들을 확보하게 되는 만큼 결국에는 더 큰 돈을 벌 것이라고 생각합니다. 제가 직접 고객과 상대한다면 바로 이 논리로 반응형 접근을 판매할 것입니다.

반응형 워드프레스 디자인 중 가장 맘에 드는 사이트는 무엇이며 그 이유는 무엇인가?

‘Webdesignerwall.com’과 ‘smashingmagazine.com’의 현재 버전은 둘 다 워드프레스로 만들어졌으며 매우 훌륭합니다. 스매싱매거진의 반응형 디자인 중 놀라운 점 하나는 바로 넓은 폭입니다.

제가 계산할 때 다섯 개의 큰 분기점이 있는데 모두 매우 자연스러운 너비로 설정되어 있습니다. 디자인도 작은 핸드폰 크기의 스크린이나 거대한 규모의 스크린에서도 훌륭합니다. 물론 그 점이 반응형 디자인의 포인트이기는 하지만 320px부터 2000px 이상까지 모든 너비에 맞추어 완벽하게 만들었다는 것은 참으로 놀랍습니다.

‘Webdesignerwall.com’과 ‘smashingmagazine.com’의 현재 버전은 둘 다 워드프레스로 만들어졌으며 매우 훌륭합니다. 스매싱매거진의 반응형 디자인 중 놀라운 점 하나는 바로 다양한 폭입니다.

반응형 웹디자인을 시작할 때 아무 것도 없이 맨 처음부터 시작하는가 아니면 부모 테마(parent theme)나 테마 프레임워크(theme framework)를 사용하는가?

당연히 맨 처음부터 시작합니다. ‘프레임워크(framework)’를 장난 삼아 만들어 본 적은 있습니다만 제가 작업하고 있는 일들은 너무 다양해서 ‘진짜’ 프레임워크의 필요성을 찾지는 못했습니다. 프레임워크의 포인트는 여러 비슷한 프로젝트들을 할 때 시간을 아껴주는 것이라고 생각합니다.

당신의 반응형 웹디자인 작업 과정은 어떠한가?

말씀 드리기에 좀 그렇지만 저는 아직도 데스크톱 레이아웃으로 시작합니다. 요즘 대세는 ‘모바일 우선주의’이고 저 또한 동의하지만 아직까지는 데스크톱/노트북 크기 위주로 디자인한 후 작은 스크린을 위해 필요에 따라 미디어 쿼리로 조절하는 것이 저와는 잘 맞습니다. 데스크톱 레이아웃은 주로 너비가 상대값(%)으로 지정된 크고 float 속성을 가진 요소들로 만듭니다.

이 작업은 다양한 크기의 브라우저에 자동으로 맞춰지는 유동적인 환경을 만들어 줍니다. 그런 다음 모바일을 셔플하기 위해 간단한 미디어 쿼리 몇 개를 씁니다. 요즘의 ^{셔플링(shuffling, 기기해상도의 다양화를 말함)}은 기기의 기본 너비보다 넓지 않은 여러 단(column)을 하나의 단으로 뭉치는 단순한 것이지만 앞으로는 더 복잡해 질 것입니다. 그리고 기본 모바일 레이아웃은 단이 무조건 하나여야 한다는 생각을 버리고 x축(x-axis)을 보다 창조적으로 활용해야 할 것입니다.

그리드와 영역(region)과 같은 CSS 기능들이 발달할수록 브라우저 창이 작아지거나 커짐에 따라 보다 구체적인 콘텐츠 배치가 가능해질 것입니다. 저는 디자이너로서 무엇이 디자인에 있어 중요한지 알만큼 충분한 경험이 있다고 생각합니다. 따라서 저의 최종 디자인은 아마도 모바일 우선주의로 디자인했을 때와도 매우 비슷할 것이라고 생각합니다.

당신이 만든 반응형 웹사이트들은 어떤 것이 있는가?

올해 저는 우푸(Wufoo)와 함께 바캠프투어(Barcamp Tour)를 다시 할 예정입니다. 이미 했던 작업이고 반응형으로 만들었죠. 우푸는 최근에 반응형 요소를 더해서 새로 디자인했습니다. 프런트 엔드 웹디자인에 대한 나의 블로그(css-tricks.com)도 반응형 웹입니다. 그 변천사를 보면 1) 백지 상태에서 2) 모바일 전용 사이트를 거쳐 3) 현재의 반응형 사이트로 거듭나게 되었습니다.

모바일 전용 사이트의 장점은 매우 가볍다는 것(super light-weight)인데, 다시 말하면 낮은 대역폭의 모바일 기기에서 빠르게 작동한다는 것입니다. 저는 결국 코드 포크(code-fork)를 감당할 수 없었습니다.

콘텐츠가 같은 두 개의 사이트를 혼자 운영하는 것은 정말 못할 짓이었죠. 저는 반응형 웹디자인이 다양한 크기의 스크린을 하나의 코드로 디자인할 수 있도록 만든다는 점이 참 좋습니다. 하지만 현재 반응형 웹디자인은 예전의 모바일 사이트 디자인보다는 꽤 무거운 편입니다. 그런 의미에서 우리는 반응형 디자인의 진화과정 중 아직 애매한 곳에 놓여있다고 할 수 있습니다.

반응형 웹디자인의 진화과정에서 이 애매한 곳을 벗어나려면 무엇이 필요하다고 생각하는가?

지금 이 시기를 벗어나기 위해서 필요한 것은 웹페이지가 열리는 (각 기기의) 환경에 맞게 크기를 조절해 줄 수 있는 툴입니다. 예를 들면 브라우저 스크린이 아주 작고 네트워크 연결이 느릴 경우 스크린이 크고 네트워크 연결이 빠를 때 보다는 낮은 해상도의 이미지를 선호할 것입니다. 아쉽게도 이런 툴들은 아직 존재하지 않습니다. 있다 해도 제대로 된 것들이 아니죠. 지금으로선 언제 자료를 불러오고 불러오지 않는지에 대한 정확한 명시, 또는 새로운 이미지 포맷이나 문법(syntax)이 도움될 수 있을 것입니다. 여러 요소들이 복잡하게 얽혀있는 만큼 쉽지는 않겠지만 이에 대한 필요가 너무도 절실하기 때문에 곧 해결책이 나올 것입니다.

반응형 웹을 디자인하고 개발하는 데에 있어 가장 힘든 점들은 무엇인가?

놀랍게도 창의력이 그 중 하나입니다. 반응형으로 디자인하기 위해서는 페이지의 모든 요소들이 다양한 기기에서 어떻게 반응할 것인지 머리 속에 그릴 수 있어야 하는데 이것을 어려워하는 사람들이 있더군요. 물론 숙련되면 극복할 수 있지만 말입니다. 반응형 디자인이란, 모든 것을 ‘상호작용적 디자인’으로 만든다는 것을 뜻합니다. 이것은 고정된 디자인 작업에 익숙한 디자이너에게는 새로운 개념일 것입니다.
 

어떻게 이 힘든 점들을 극복했는가? 어떤 것들이 도움이 되었는가?

저는 이 일을 타고난 사람은 아니지만, 반응형 웹디자인에 충분히 숙련되어 있어서 새로운 디자인을 할 때면 이미 머리 속에 반응형 접근이 자동으로 시작됩니다. HTML과 CSS를 처음 배울 때와 비슷합니다. 나중에 포토샵과 같은 그래픽 레이아웃 툴로 디자인할 때 머리 속에서는 이미 어떤 요소들이 어디서, 어떻게 코드와 어우러져 작동할까 생각되는 것처럼 말입니다.

저는 반응형 디자인에 대한 정보가 그리 많지 않을 때부터 시작했었기 때문에 구체적으로 어떤 자료가 제게 큰 도움이 되었는지 말씀드릴 수는 없습니다. 단 반응형 웹디자인에 관심이 있다면 제가 주저 않고 추천하는 것이 바로 실험입니다. 자주 브라우저 창을 줄이고 늘려보면서 어떤 것이 제대로 작동하는지 확인하는 습관을 갖도록 하십시오.

책, 웹사이트, 테마 프레임워크나 블로그 기사 등 반응형 웹디자인에 관해 직접 도움을 받은 유용한 정보를 추천한다면?

기본에 충실 하려면 먼저 이단 마콧(Ethan Marcotte)의 책(반응형 웹디자인)으로 시작하는 것이 좋습니다. 또한 다른 사람들이 어떤 영감을 통해 사이트를 만드는지 궁금하시면 Mediaqueri.es에 가서 @rwd를 팔로우하면 됩니다. 저라면 처음 시작할 때 프레임워크는 가급적 피할 것입니다. 반응형 디자인은 요약이 필요할 정도로 복잡한 개념이 아니기 때문입니다. 만약 나중에 시간을 아끼기 위해 관심이 생기게 되면 아마도 Golden Grid System(http://goldengridsystem.com)이 유용할 것입니다.

워드프레스 반응형 웹디자인에 대해 나눠 줄 다른 생각은 없는가?

저는 ‘이것이 워드프레스에서 작동할 것인가?!(Will This Work With WordPress?!)’란 제목의 포스트를 쓴 적이 있습니다. 때로 사람들은 워드프레스가 마치 무언가 특별한 방법을 통해서만 가능한 이상한 세계로 생각할 때가 있는데 저는 바로 이 잘못된 관념을 깨기 위해 이 글을 썼습니다.

저는 기본적으로 워드프레스는 당신이 테마의 프런트 엔드에서 무엇을 하든지 큰 관심이 없다고 말씀 드렸습니다. 그 어떤 자바스크립트 프레임워크나 웹에서 찾은 CSS 소스라도 마음껏 사용할 수 있습니다. 그럼에도 워드프레스는 콘텐츠 중심의 사이트에 특히 강합니다.

따라서 이 질문에 보다 직접적으로 답하자면 당신은 분명 반응형 워드프레스 테마를 만들 수 있습니다. 만든 후 반드시 미디어를 확인하십시오. 예를 들면 유동 이미지나 유동 비디오 말입니다.

2. 이안 스튜어트 Ian Stewart

이안 스튜어트는 WordPress.com의 개발을 관리하는 오토매틱(Automattic)사(社)의 테마 전문가로서, 가장 큰 인기를 끌고 있는 워드프레스 테마 여러 개를 만들었다. 그는 아름다운 디자인과 시맨틱 HTML, 그리고 워드프레스를 통해 보다 나은 웹을 만드는 것에 대해 매우 열정적이다.

Themeshaper.com과 오토매틱사의 테마팀 홈페이지에서 그를 만나볼 수 있다. iandanielstewart.com을 개인 사이트로 운영하고 @iandstewart라는 트위터 계정을 가지고 있다.

도대체 반응형 웹디자인이 무엇이길래 이렇게 난리인가?

제게 반응형 디자인이란, 현재 브라우저 창의 크기에 따라 반응하고 조절되는 웹디자인을 뜻합니다. 단순한 아이디어지만 그것으로 인한 디자인 가능성은 엄청납니다.

디자인은 더 이상 브라우저 구석 어딘가에 고정된 이미지가 아니라 살아 숨 쉬는 것이 되어서 어떤 기기를 사용하든지 사이트를 방문할 때마다 즐거운 경험을 제공하게 됩니다. 아주 작은 스마트폰부터 27인치 모니터까지 기기의 크기에 따라 아름답게 반응하죠.

왜 반응형으로 디자인 하는가?

반응형 디자인은 매우 자연스럽습니다. 그저 나에게 이롭다는 이유만으로 무언가를 하기는 어렵죠. 그런데 반응형 웹디자인은 제가 좋아하는 작업 방식과도 잘 맞고 제가 즐겨 사용하는 것을 활용합니다. 깔끔하고, 언제든지 다른 용도로 바꿔 사용할 수 있는 유연한 CSS, 그리고 시맨틱 HTML처럼 말입니다.

그런데 반응형 디자인이 저와 저희가 만든 테마 사용자들은 물론 그들의 독자들에게 이롭기까지 하니 반응형 디자인을 거부하기가 점점 어려워질 뿐이죠.

고객에게 반응형 웹디자인의 중요성을 어떻게 설명하는가?

저는 고객에게 반응형 웹디자인을 설명하는 것이 매우 쉽습니다. 그 이유는 제 고객인 블로거들은 주로 어디서나 ‘똑같이’ 보이는 워드프레스 테마를 절실히 원하기 때문입니다. 즉 그들이 신중하게 선택한 모양 그대로 아름답게, 특히 모든 콘텐츠가 그 어떤 기기에서 보더라도 쉽게 변환되어 제대로 남아있기를 원합니다. 이것을 가능하게 하려면 테마 디자이너의 적잖은 노력이 필요하긴 합니다. 하지만 제대로만 실행된다면, 그들에게 물 흐르는 듯한 자연스러운 경험을 제공하는 것은 반응형 디자인입니다.

고객의 디자인과 개발을 위해 반응형 디자인을 얼마나 자주 사용하는가? 디자이너 및 개발자로서 당신이 얻는 혜택은 무엇인가?

저희는 반응형 워드프레스 테마를 최대한 자주 만들려고 합니다. 테마를 만들고 있지 않을 때에도 저희가 하는 일에 영향을 미치죠. 심지어 고정 너비 디자인을 유동적, 상대값(%) 기반 구조 (반응형 디자인의 토대) 위에 만들 때 나중에 기존 테마에 새로운 디자인 요소나 워드프레스 기능을 추가하기가 매우 용이합니다. 모든 것이 물 흐르듯 자연스러워야 합니다.

반응형 웹디자인이 알맞지 않은 접근이라고 생각된 사례가 있는가? 있다면 그 이유는?

전 아직도 반응형 워드프레스 테마가 불필요한 경우가 있다고 생각합니다. 때로는 다른 크기의 창으로 봤을 때 더 안좋아 보이는 경우도 있습니다. 반응형 디자인으로 ‘모바일’ 사이트를 만들 때 그 콘텐츠가 모바일에 특화된 상황에 있다면, 모바일 전용 테마가 더 좋은 선택일 수도 있습니다.

반응형 워드프레스 디자인 중 가장 맘에 드는 사이트는 무엇이며 그 이유는 무엇인가?

지금 제가 가장 좋아하는 반응형 워드프레스 테마는 독일의 엘마스튜디오(Elmastudio)에서 만든 Piha입니다. 어떤 크기라도 너무도 아름답고 부족한 것이 전혀 없어 보입니다.

책, 웹사이트, 테마 프레임워크나 블로그 기사 등 반응형 웹디자인에 관해 직접 도움을 받은 유용한 정보를 추천한다면?

제게는 이단 마콧의 책과 그의 블로그가 최고의 기준입니다. 하지만 그 무엇보다 가장 중요한 것은 바로 실험과 테스팅입니다. 다음엔 더 많은 테스팅, 그 다음에도 더 많은 테스팅이죠.

반응형 웹디자인을 시작할 때 아무것도 없이 맨 처음부터 시작하는가 아니면 부모 테마(parent theme)나 테마 프레임워크(theme framework)를 사용하는가?

둘 다 입니다. 오토매틱에서는 맨 처음부터 새로운 테마를 만들기 위해 ‘_s’라는 테마(Github에서 무료제공)를 사용하기 시작했습니다. 한편으로는 디자인 과정과 상관없이 사용할 수 있는 것이지만 새로운 반응형 워드프레스 테마를 만들기 위한 프레임워크로 볼 수 있지요. 작은 스크린의 큰 내비게이션 메뉴와 샘플 백분율 기반 레이아웃을 해결하기 위한 자바스크립트 솔루션이 제공됩니다. 반응형 테마를 빠르게 만들기 위해 더 많은 도움이 필요하다고 판단되면 (예를 들면, 미디어 쿼리 안의 스타터 분기점) 아마도 이런 것들이 추가될 것입니다.

당신의 반응형 웹디자인 작업 과정은 어떠한가?

저는 레이어로 CSS를 쓰는 것을 좋아합니다. 매 프로젝트마다 저는 여러 브라우저의 렌더링을 평준화하고 타이포그라피 기본값을 지정하는 리셋을 하고 시작합니다.

이것이 데스크톱 뷰, 즉 가장 평범한 디자인 형태의 기본적인 유동 구조입니다. 이 구조는 기본적으로 사이드바와 콘텐츠 영역의 위치를 조정하는 플로트(float)와 여백(margin)을 포함하는 모든 주요 가로 너비를 뜻합니다. 이 구조를 이렇게 분리시킬 때 레이아웃 실험은 물론 나중에 캐스케이드(Cascade Style Sheet, CSS를 말함)에서 미디어 쿼리로 디자인을 변경하기가 수월해 집니다. 마지막으로 테스팅이 있죠. 아주 많은 테스팅 말입니다.

반응형 웹을 디자인하고 개발하는 데에 있어 가장 힘든 점은 무엇인가? 어떻게 이 힘든 점들을 극복했으며 어떤 자료들이 도움이 되었나?

반응형 디자인의 기초는 유동 이미지인데 워드프레스에서는 이것이 조금 애매할 수 있습니다. 워드프레스에서 너비가 하드코딩 된 이미지는 브라우저에서 작동될 때 문제가 발생할 수 있습니다. 이 점에 대한 저희의 답은 시작 테마인 ‘_s’에서 자세히 설명하고 있습니다.

저희는 워드프레스 테마가 다뤄야 할 가능한 모든 이미지를 신중히 세 가지 선언 블록 안에 선택했습니다. 모든 이미지를 다룰 수 있는 표준 유동 이미지 CSS가 있고 워드프레스 미디어 라이브러리에 추가된 이미지들은 자동높이 조절이 됩니다. 높이와 너비 속성이 모두 하드코딩 되어 있습니다. 또한 IE8에서 매우 크게 보이는 워드프레스 이미지들을 위한 패치도 있습니다.

당신이 만든 반응형 웹사이트들은 무엇이 있는가?

저는 2011 워드프레스 기본(default) 테마인 Twenty Eleven을 만든 것이 가장 자랑스럽습니다. 제 바람은 이것이 반응형 웹디자인의 실질적인 예가 되어서 반응형 디자인 기술을 쉽게 이해할 수 있도록 돕는 것이었습니다.

수많은 개발자들이 Twenty Eleven를 통해 그들의 첫 반응형 워드프레스 테마를 만들 수 있었습니다. 제가 그들에게 도움이 될 수 있었다는 것이 매우 기뻤습니다.

수많은 개발자들이 Twenty Eleven를 통해 그들의 첫 반응형 워드프레스 테마를 만들 수 있었습니다.

3. 새라 캐논 Sara Cannon

그녀의 웃음소리는 @saracannon 트위터 계정과 개인 블로그 sara-cannon.com에서 들을 수 있다.

왜 디자인을 반응형으로 하는가?

콘텐츠가 항상 중심이 되어야 합니다. 우리는 여러 기기에서 콘텐츠가 어떻게 보여질지 조절할 수 있는 능력이 있습니다. 그리고 우리의 의무는 그 점을 숙지하고 기기와 상관없이 콘텐츠가 빛을 발할 수 있도록 하는 것입니다.

네이티브 앱들은 비쌉니다. 여러 프로그래밍 언어로 작성된 다양한 코드를 관리하게 될 것이 뻔한데 이런 모델은 유지가 불가능합니다. 네이티브 앱 모델에서 성공하기 위해 필요한 자원들이 너무도 많기 때문이죠. 반응형 디자인은 똑같이 훌륭한 콘텐츠 경험을 제공해 줄 수 있습니다. 몇 개의 네이티브 하드웨어 혜택을 제외하고는 말입니다. 하지만 이것도 브라우저들이 앞으로 해결해 나가겠죠. 구글이 어떻게 당신의 현 위치를 파악할 수 있는지, 네이티브 카메라 기능을 어떻게 사용할 수 있는지 생각해 보십시오.

브라우저 간의 상호 연결성도 장점입니다. 네이티브 앱은 웹앱과 달리 서로 상호작용을 하지 않습니다. 예를 들면 휴대폰에서 페이스북 이메일 링크를 클릭하면 네이티브 앱이 아니라 브라우저로 연결됩니다. 브라우저 사이트의 해결방안은 하나의 소스 코드 기반의 크로스 플랫폼입니다. 저는 정말로 모바일의 미래는 웹앱에 달려있다고 믿습니다.

고객들에게 반응형 웹디자인이 왜 중요한지 어떻게 설명하는가?

웹사이트의 핵심은 콘텐츠입니다. 콘텐츠가 바로 메시지고 말로 표현된 브랜딩입니다. 어떤 사람이 회사, 제품, 또는 브랜드에 대해 들었을 때 주로 무엇을 합니까? 구글로 검색해 봅니다. 온라인이 당신의 브랜드와 콘텐츠에 대한 첫 인상인 것입니다.

현재 사람들은 태블릿, 게임기, 피드 리더 등 아주 다양한 기기와 방법으로 여러분의 콘텐츠를 접하고 있습니다. 즉 접근 경로가 너무도 다양하기 때문에 기기 자체가 메시지와 브랜드의 장애물이 되어서는 안됩니다.

웹사이트는 어떠한 환경 속에서도 주어진 상황에 매끄럽게 적응할 수 있어야 합니다. 그래야 사람들이 정말 중요한 것에 집중할 수 있기 때문입니다. 모바일은 절대로 나중에 생각해서는 안 되는 것입니다.

com-Score에 따르면 스마트폰 사용자의 수가 약 10억 1,300명에 달한다고 합니다. 태블릿 사용자는 포함하지도 않고 말입니다. 따라서 디자인과 시안(mock-up)을 할 때 이 점을 반드시 유념해야만 합니다. 콘텐츠가 당신 정체성의 열쇠인 만큼 일관된 분기점을 설치하여 가독성을 높이는 것이 매우 중요하기 때문이죠. 사람들이 당신의 브랜드와 소통하는 것을 어렵게 만들어서는 안됩니다.

고객의 디자인과 개발을 위해 반응형 디자인을 얼마나 자주 사용하는가? 디자이너 및 개발자로서 당신이 얻는 혜택은 무엇인가?

저는 제가 작업하는 모든 사이트에 반응형 웹디자인을 사용합니다. 저는 정말로 모바일이 더 이상 나중에 생각해 볼거리가 아니라 이미 주어진것 이라고 믿습니다. 저는 데스크톱에서만 제대로 작동하는 시대는 지났다고 생각합니다.

오늘날의 사회는 모바일을 요구하고 있습니다. 이것은 더 이상 새로운 것이 아니며 직시해야 할 현실입니다.

반응형 웹디자인이 알맞지 않은 접근이라고 생각한 사례가 있는가?

모바일의 중요성을 언급하는 것이 부적절한 경우는 없습니다. 하지만 경우에 따라 전통적인 반응형 기술들이 사이트의 속도를 느리게 할 수 있습니다. 만약 앱처럼 빠르고 세련된 것을 원한다면, 불필요한 소셜 자바스크립트를 제거함으로써 속도를 빠르게 할 수 있습니다. 이것은 별도의 템플릿 파일의 사용을 통해 가능합니다. 이러한 특정 기술들이 꼭 ‘반응형 디자인’이 아니라고 할 수 있는지는 의문이지만 전통적인 용도에서는 분명 벗어난다고 할 수 있습니다.

반응형 웹디자인을 통해 고객은 물론 당신의 시간과 비용을 더 아낄 수 있었던 사례가 있었는가?

언젠가 좀 수상쩍은 회사가 고객에게 연락해서 ‘친-모바일’ 사이트를 만들어 주겠다며 값비싼 ‘서비스’를 제안한 적이 있었습니다. 저는 고객에게 휴대폰을 통해 사이트를 한 번 보라고 했습니다. 그들의 사이트는 이미 별도의 서비스가 필요 없을 만큼 모바일 최적화였기 때문이었습니다. 모두들 깜짝 놀라워했었죠.

반응형 워드프레스 디자인 중 가장 맘에 드는 사이트는 무엇이며 그 이유는 무엇인지요?

저는 foodsense.is와 morehazards.com이 가장 좋습니다. foodsense.is는 콘텐츠를 돋보이게 하기 위해 레이아웃 전체를 과감히 바뀌는 것을 두려워하지 않는 점이 좋습니다. morehazards.com은 모바일로 갈 때 불필요한 것들을 과감히 제거하는 것을 두려워하지 않는 점이 좋습니다.

foodsense.is는 콘텐츠를 돋보이게 하기 위해 레이아웃 전체를 과감히 바뀌는 것을 두려워하지 않는 점이 좋습니다.

morehazards.com은 모바일로 갈 때 불필요한 것들을 과감히 제거하는 것을 두려워하지 않는 점이 좋습니다.

책, 웹사이트, 테마 프레임워크나 블로그 기사 등 반응형 웹디자인에 관해 직접 도움을 받은 유용한 정보를 추천한다면?

Less Framework 4

반응형 웹디자인을 시작할 때 아무 것도 없이 맨 처음부터 시작하는가 아니면 부모 테마(parent theme)나 테마 프레임워크(theme framework)를 사용하는가?

저는 주로 Twenty Eleven 테마를 기준으로 제작합니다. 하지만 때로는 Twenty Eleven이 제공하는 것 보다 많은 것을 포함해야 할 때도 있습니다. 더 많은 미디어 쿼리, Fitvid(삽입된 비디오의 크기를 유동적으로 조절해 주는 라이브러리), 또는 좀 더 복잡한 사이트를 위한 다른 기술 말입니다.

당신의 반응형 웹디자인 작업 과정은 어떠한가?

저는 주로 디자인을 먼저 하고 그 다음 몇몇의 분기점들로 실험을 해봅니다. 큰 스크린(최대 분기점), 노트북, 아이패드 그리고 아이폰 등으로 확인합니다.

저는 콘텐츠에 가장 적합한 균형을 찾은 후에 개발을 계획합니다. 어떤 이들은 ‘모바일 우선주의’로 접근하지만 저는 개발 단계에서는 노트북을 기준으로 코딩을 한 후 조절하는 것이 잘 맞습니다.

언젠가는 분명 보다 모바일 UI 중심의 디자인으로 인해 모바일 우선 접근을 택해야 할 날이 올 것이라 믿습니다.

지금까지 제가 작업했던 사이트들은 업무나 상호작용 위주(의 서비스 사이트)가 아닌 (블로그나 뉴스사이트 같은) 콘텐츠 배포와 읽기 위주의 사이트였습니다. 제 작업 과정을 간단하게 정리하자면,

반응형 웹을 디자인하고 개발하는 데에 있어 가장 힘든 점은 무엇인가?

사이트가 런칭된 후에 기능들을 개발하는 것이 아닐까 합니다. 새로운 템플릿이나 기능을 추가할 때마다 다시 돌아가서 반응형 테스트를 해야 합니다. 이때 테스팅 과정이 보통 브라우저와 OS 테스팅보다 훨씬 오래 걸립니다.

어떻게 이 힘든 점들을 극복했습니까? 어떤 것들이 도움이 되었나요?

저는 많은 기기들을 소유하고 있고 그것들을 모두 테스팅에 사용합니다. 하지만 몇 개의 테스팅 프로토콜을 더 갖고 있는 것이 도움이 됩니다. 크롬의 개발자 도구(Chrome dev tools)는 쉽고 빠른 테스팅을 위해 사용자 에이전트를 바꿀 수 있습니다. 또한 firebug 툴도 있고 소스를 보기 위해 아이패드와 아이폰에 설치할 수 있는 bookmarklets도 있습니다. 그리고 Kindle Fire를 구입하는 것도 도움이 됐죠. 사용자 수가 빨리 늘고 있거든요.

당신이 만든 반응형 웹사이트들은 무엇인가?

저는 Twenty Eleven의 자식테마로 PandoDaily.com을 만들었습니다. 오토매틱 테마팀(Lance (Willett), Ian (Steward), 등)이 만들어 놓은 기초 위에 제작할 수 있어서 너무 좋았습니다. 그 덕분에 지속적으로 업데이트 될 것이기 때문이죠.

저는 Twenty Eleven의 자식테마로 PandoDaily.com을 만들었습니다.

RWD RESOURCES

추가 참고 읽어볼 목록 FURTHER READING

추가 참고 청취할 목록 FURTHER LISTENING

추가 참고 시도해볼 목록 FURTHER EXPERIMENTATION

TWITTER

A Code Poet Book

‘워드프레스, 반응형 디자인을 만나다’는 워드프레스를 통해 고객, 친구, 그리고 가족을 위해 사이트를 제작하는 사람들을 위해 출간된 무료 책자 시리즈의 첫 번째 책으로서 이들의 필요와 실질적인 전략을 중점적으로 다루고 있습니다.

코드 포잇(Code Poet)의 추가자료를 원하거나 가입하여 업데이트 자료를 받아 보길 원하시면 codepoet.com을 방문해 주십시오. 또한 방문하셔서 여러분의 의견을 말씀해 주시기 바랍니다. 여러분의 아이디어를 꼭 듣고 싶습니다.

이 글은 Code Poet에서 나온 ebook을 번역한 것으로, 웹액츄얼리 북스팀이 Code Poet 으로 부터 허가를 받고 올린 자료입니다. 크리에이티브 커먼즈 저작자표시-비영리-변경금지 3.0 Unported 라이선스에 따라 아래와 같이 이용할 수 있습니다. 원본은 www.codepoet.com에서 확인 할 수 있습니다.
크리에이티브 커먼즈 저작자표시-비영리-변경금지

※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주세요.

※ 웹액츄얼리 북스팀에서 웹디자인 관련 영문번역이나 윤문을 해주실 분을 찾습니다. 관심있으신 분은 메일 보내주세요. books@webactually.com

[편집자주]

마이클 픽 

트위터 @madebypick
플릭커 http://www.flickr.com/photos/smashcut/
비메오 http://vimeo.com/smashcut
http://michaelpick.wordpress.com
마이클은 애니메이션 및 멀티미디어의 모든 것을 천재적으로 다루는 오토매틱(Automattic)의 엔지니어다.

만약에 마이클이 웹 사이트에 빠져있지 않다면 당신은 어쩌면 에스프레스를 많이 마시고 있는 그를 일본 삿포로에서 찾을 수 있을 것이다.  

이단 마콧 Ethan Marcotte

반응형 웹디자인

국내 최초 반응형 웹디자인의 모든것 출간!

책 구매하기책 미리보기책 상세설명

독자 여러분, 안녕하세요? 웹액츄얼리는 어 북 어파트A Book Apart와의 파트너십을 통해 ‘아름다운 웹사이트 만들기’ 시리즈를 발간하고 있습니다.

어 북 어파트는 웹표준 기술의 세계적인 선구자이자 글로벌 웹디자인계의 진정한 그루Guru인 제프리 젤드먼Jeffrey Zeldman이 설립했습니다. 그는 글로벌 웹디자인계에서 실력 있고 전도 유망한 최고 전문가들에게 집필을 의뢰해 웹디자인 작업에 필요한 핵심 분야의 책을 출간하고 있습니다.

이 책은 그중 네 번째로 출간된 《반응형 웹디자인》입니다. 현재 글로벌 웹디자인계는 하루가 다르게 변화하고 있습니다. 빠른 혁신을 통해 출판 고유 영역의 많은 디자인 관련 기술을 웹에 접목시키고 있습니다. 이 책에서 소개하는 ‘반응형 웹디자인’은 출판의 제약을 뛰어넘는, 웹의 가변성을 십분 활용하는 기술들을 보여줍니다.

모바일 시장은 그 어느 때보다 빠르게 성장하고 있습니다. 웹디자인 영역에서 사용자의 편의성을 위해 시장에 진입하고 있는 각기 다른 기기와 그에 따른 해상도를 따라잡는 것은 점점 어려워지고 있습니다. 이 시점에서 하나의 가능성으로 떠오르고 있는 것이 바로 ‘반응형 웹디자인’입니다.

이 책의 저자인 이단 마콧은 가변 그리드, 가변 이미지, 미디어 쿼리의 기술을 결합해 웹디자인에 대한 우리의 사고방식을 변화시켰으며, ‘모바일 우선주의’의 철학을 적용해 좀 더 책임감 있는 반응형 웹디자인을 제안하고 있습니다.

웹액츄얼리팀이 2011년 애틀란타에서 열린 ‘An Event Apart’ 컨퍼런스에 참석했을 때 이단 마콧은 ‘반응형 웹디자이너의 작업 흐름The Responsive Designer’s Workflow’이라는 강연에서 이 책의 5장에서 작업 중인 프로젝트라고 소개한 ‘보스톤 글로브’ 사이트의 프로토타입을 공개했습니다. 브라우저의 크기에 따라 레이아웃이 유연하게 바뀌는 것을 보고 관객들의 반응은 무척 뜨거웠습니다.

또한 그는 방대한 콘텐츠를 다루는 이 사이트를 반응형 웹사이트로 리뉴얼하는 과정을 소개하고, 반응형 웹사이트를 작업할 때 바뀌어야 할 우리의 웹디자인 작업 과정에 대해 자세히 설명했습니다. 반응형 웹 프로젝트를 성공적으로 이끄는 방법은, 디자이너와 개발자 두 팀이 고도로 협력하여 디자인, 개발, 검토 과정을 반복하는 방식으로 바뀌어야 한다는 것이었습니다.

지금까지 웹사이트를 만드는 방식이 철저히 분업화된 선형적 워크플로우 방식이라면, 반응형 웹디자인의 작업 방식은 서로 협력하여 이루어지는 원형 방식이라고 할 수 있습니다. ‘디자이놉먼트(디자인design+개발development)’라는 새로운 단어를 통해 디자인과 개발 과정의 반복과 협업 방식의 중요성을 강조하고 있습니다. 그만큼 디자인과 개발을 따로 떼어 독립적으로 생각할 수 없다는 말입니다. 웹액츄얼리팀도 처음 회사를 만들 때부터 이런 워크플로우를 통해 팀 조직을 꾸려 웹사이트를 제작해왔습니다. 이 책을 읽어보시면 어떻게how 그리고 왜why 이런 방법으로 웹사이트를 제작해야 하는지 분명한 이유를 알 수 있을 것입니다.

기술도 중요하지만 무엇보다 성공적인 반응형 웹디자인의 조건은 첫째, 사용자에 대해 면밀히 조사하고, 둘째, ‘모바일 우선주의’에 맞는 철학으로, 셋째, 디자인과 개발의 유기적인 협업 방식이라고 할 수 있습니다.

반응형 웹디자인은 이제 시작 단계입니다. 새로운 개발 툴과 좀 더 쉬운 접근법이 계속 소개되고 있습니다. 사이트에 접속하는 브라우저와 기기가 늘어날수록, 데스크톱 그 이상의 사이트 제작에 관심을 갖는 사용자가 많을수록 웹의 제작 방법과 웹디자인 과정, 웹디자인에 대한 질문과 적용 가능한 해결 방안 등이 수없이 검토되어야 합니다.

이 책을 통해 많은 웹디자인 관련 종사자가 멋진 ‘반응형 웹사이트’를 만들 수 있기를 기대해봅니다.

웹액츄얼리 북스팀

이단 마콧 Ethan Marcotte

반응형 웹디자인

국내 최초 반응형 웹디자인의 모든것 출간!

책 구매하기책 미리보기책 상세설명

An Event Apart 2012 Chicago 컨퍼런스 홀 로비

시카고 시내 중심에 위치한 Westin Chicago River North에서 열린 An Event Apart 2012 Chicago! 이틀간의 강연, 워크샵 하루, 총 3일간의 일정으로 진행되었다. An Event Apart 2012 Chicago 주요 강연 내용과 행사장의 모습을 담아 정리해 보았다.
 

MONDAY, AUGUST 27, 2012

컨퍼런스 기념품. 빈티지 런치 박스

컨퍼런스 홀 로비에서 등록을 마치면 빈티지 런치 박스와 이름표를 준다. 어렸을적 추억을 떠오르게 하는 빈티지풍의 런치 박스에는 후원사의 로고가 박힌 물통, 초콜릿, 냅킨 등의 기념품이 가득 들어 있었다. 박스에 그려진 An Event Apart 공동 대표 제프리 젤드먼과 에릭 마이어의 캐릭터가 인상적이다. 런치 박스를 하나씩 받아들고 들뜬 표정로 입장하는 참가자들의 모습이 놀이공원에 입장하는 아이들같다.

CONTENT FIRST!

by 제프리 젤드먼(Jeffrey Zeldman), ‘웹표준 가이드’ 저자

제프리 젤드먼 photo by reallocalcelebrity

Design that does not serve people does not serve business.
사람들에게 도움이 되지 못하는 디자인은 비즈니스에도 도움이 되지 않는다.

Content precedes design. Design in the absence of content is not design, it’s decoration.
콘텐츠는 디자인에 선행되어야 한다. 콘텐츠가 결여된 디자인은 디자인이 아니다. 장식에 불과하다.

It’s important to have a style that is appropriate but hard to develop that style without an understanding of content.
콘텐츠에 맞는 적절한 스타일을 가지는 것이 중요하다. 하지만 콘텐츠의 이해 없이는 스타일을 만들 수 없다.

Progressive enhancement = good experience for all.
점진적 향상(Progressive enhancement)은 모두에게 좋은 경험을 제공한다는 의미이다.

Responsive design is progressive enhancement taken to the next level.
반응형 디자인은 점진적 향상의 다음 단계라 할 수 있다.

Small screen and limited utility force us to put user needs first.
작은 화면과 제약된 사용성은 우리에게 사용자의 요구를 무엇보다 우선으로 고려하게 한다.

Mobile first = User first = Content first. This is the way all our Web sites should be made.
모바일 우선주의 = 사용자 우선주의 = 콘텐츠 우선주의. 모든 웹사이트는 이렇게 만들어져야 한다.

WHAT’S YOUR PROBLEM? PUTTING PURPOSE BACK INTO YOUR PROJECTS

by 휘트니 헤스(Whitney Hess), UX 디자이너

휘트니 헤스 photo by reallocalcelebrity

Design is problem solving. Be obsessed with the problem, not the solution.
디자인은 문제점을 해결하는 것이다. 해결책이 아니라 문제점을 가지고 고민하라.

A CONTENT STRATEGY ROADMAP

by 크리스티나 할버슨(Kristina Halvorson), ‘웹 컨텐츠 전략을 말하다’ 저자

유쾌한 크리스티나 할버슨 photo by reallocalcelebrity

Content strategy plans for the creation, delivery and governance of useful, usable content.
콘텐츠 전략은 쓸모 있고, 유용한 콘텐츠의 제작, 전달, 관리 계획을 세우는 것이다.

Content is not just the what. We have to ask questions about why we need content, how it will be created, maintained, when will it be created, who is it for, and more.
콘텐츠는 단지 ‘무엇(what)’에만 해당하는 것이 아니다. 콘텐트가 어떻게 제작 되고, 왜, 언제, 누구를 위해 필요하고, 유지 되어야 하는지 등에 대해 꼼꼼히 질문 해야한다.

A core strategy tells you what your content needs to do for your business and your customers.
핵심 전략은 당신의 사업과 고객을 위해 어떤 콘텐츠가 필요한지 알려준다.

• 본질 : 당신 또는 고객은 어떤 콘텐츠를 왜 필요로 하는가?
• 구조 : 어떻게 콘텐츠가 구성되어 있고, 우선 순위, 접근성은 어떤가?
• 작업의 흐름 : 어떻게 콘텐츠의 제작되었고 유지 되는가?
• 관리 : 어떻게 콘텐츠와 콘텐츠 전략이 결정되는가?

Structure and prioritize your content in ways that will make it relevant for any device, anywhere.
콘텐츠의 구조와 우선순위는 어떤 기기 또는 어디에서 사용되는가에 어느 정도 관련 있다.

Don’t just think “content first”. Think “content always.”
“콘텐츠가 우선이다” 가 아니라 “콘텐츠는 언제나”이다.

Lunch Break

쉬는 시간을 이용해 늦은 여름의 따뜻한 햇빛을 즐기는 참가자들

시카고는 ‘윈디 시티(Windy City)’라는 별명이 있을 정도로 춥기로 유명한 도시이다. 그래서 컨퍼런스가 열리고 있는 지금, 늦 여름이 시카고를 즐기기에 가장 좋을 때라고 한다. 컨퍼런스가 열리고 있는 호텔인 Westin Chicago River North는 이름 그대로 시카고 운하를 끼고 위치해 있다. 쉬는 시간을 이용해 호텔 테라스로 나오면 운하를 바라보며, 따뜻한 햇살과 함께 음료 또는 디저트를 먹거나 수다 시간을 가질 수 있다.

웨스틴 호텔과 마리나 시티

시카고 유명 건축물중의 하나인 ‘마리나 시티(별명 옥수수 건물)’ 와 나란히 위치한 호텔.

MOBILE TO THE FUTURE

by 루크 (Luke Wroblewski), ‘Mobile First(모바일 우선주의)’ 저자

언제나 그린 셔츠를 입는 루크

루크는 미래의 웹은 곧 모바일이라 고려해서, 로그인, 결제 프로세스등을 모바일 스크린에 맞게 다시 재정의/단순화하는 다양한 사례를 발표했다. 루크의 ‘모바일 우선주의’는 마지막날 워크샵으로도 진행이 되었다. 모바일에 최적화된 콘텐츠, 사용성에 따른 UI, 레티나 디스플레이 대응 등 다양한 모바일 전략을 소개했다.

INCLUSIVE DESIGN: IT’S IN THE DETAILS

by 신디 리(Cindy Li), 야후! 어플리케이션 프로덕트 디자이너
야후!의 플리커 서비스 디자이너 신디 리. ‘포괄적 디자인’이라는 주제로 강연을 했다. 많은 사람들이 사용하는 웹 서비스를 불편함없이 이용하게 만들기 위한 방법, 기술을 소개했다.

Part of being a good host is putting yourself in your guest’s shoes
파티에 초대받았다고 생각해보자. 호스트는 초대된 손님들이 되도록 편안하면서 좋은 기분을 가지게 하기위해 많은 고려를 한다. 좋은 호스트란 손님들의 생각을 바로 읽을 줄 아는 사람일 것이다.

1 in 5 people will have a disability in their lives.
통계에 따르면 미국에서는 5명 중에 한 명은 생활속에 장애를 가지고 있다. (그 중 대부분은 골절이거나, 임신 상태이다)

1 in 100 men have color blindness. There’s ways to test your designs to make sure they still work for these users.
통계에 따르면 남자 100명중에 한 명은 색맹이다. 이들에게도 디자인이 잘 전달되는지 디자인을 테스트 하는 방법이 있다.

Techniques

Make sure there’s an appropriate amount of contrast in your designs. Lightest gray: #575757, background: #ffffff. Minimum guidelines for contrast.
디자인에 적절한 대비를 주도록 하라. 배경색이 #ffffff일때, 가장 밝은 회색은 #575757가 최소한 지켜야 할 기준이다.

having a common style can help make things more understandable. Don’t use lots of different styles for primary actions.
일반적 스타일은 이해도를 돕는다. 중요한 요소에 다양한 스타일을 사용하지 마라

CAPTCHAs stop humans as effectively as they stop machines. Ensure there’s an escape route for people
캡챠 방식은 효과적이지 않다. 언제나 다른 방식이 존재한다. (오디오 방식, 사진 인식 방식 등)

Tools

Color oracle: allows you to see how color blind people see your sites.
색맹이 사이트를 어떻게 보는가를 알려준다.

iPhone Accessibility: voice over, zoom, text sizes, and more. Can be applied to all apps & the operating system
아이폰에서 제공하는 접근성 메뉴 : 목소리 해설, 문자 확대 조절 등등은 모든 앱, 운영 체제에 적용할 수 있다.

Keyboard shortcuts: To bring up keyboard shortcut options on your website.
키보드 숏컷 : 키보드 숏컷 옵션을 웹사이트에 적용하라.

Resources

ROLLING UP OUR RESPONSIVE SLEEVES

by 이단 마콧(Ethan Marcotte)

반응형웹의 다양한 작업 노하우를 열정적으로 강연하는 이단 마콧

이단 마콧 강연 내용 자세히 보기

This is Web design not religion. We are in one of the most fun industries in the World. We need to stay humble and work hard.
이것은 웹디자인이지, 종교가 아니다. 우리는 가장 즐거운 산업군인 웹에 종사하고 있다. 항상 겸손한 마음으로 노력해야 한다.

OPENING NIGHT PARTY

디자이너 후원을 많이 하고, 좋은 서비스를 제공하기로 유명한 웹 호스팅 업체 미디어 템플(Media Temple)의 후원으로 열린 오프닝 파티는 근처 아이리쉬 펍, Fado Irish Pub에서 열렸다.

공통의 관심사를 가진 사람들이 모인 자리는 언제나 그 대화가 자연스럽고, 공감되는 이야기로 가득하다. 그래서인지 이번 컨퍼런스에서는 좋은 친구들을 많이 만나게 되었다.

펍에서 만나 친하게 된 친구들 쉐리,루덴…

The Chicago Theatre

웹액츄얼리는 일년에 한 번 해외 웹컨퍼런스에 참여한다. 글로벌 웹트렌드를 직접 느끼고, 글로벌 감각을 키울수 있는 기회를 갖기 위해서다. 올해 2012년 해외 컨퍼런스 장소는 시카고로 결정되었다. 워드캠프 시카고(WordCamp Chicago)와 언이벤트어파트(An Event Apart)를 모두 참석할 수 있게 일정이 딱 들어 맞았기 때문이다. 워드캠프(8월 25일~26일), 언이벤트어파트(8월 27일~29일) 스케쥴에 맞추어 서울을 출발, 금요일 오후 2시. ‘건축의 도시’ 시카고에 도착했다.

시카고 하면 떠오르는 것이 뭐가 있을까? 영화 ‘시카고’, 마이클 조단의 최고의 전성기 시카고 불스, 알 카포네 갱단, 버락 오바마의 도시… 각자의 관심도에 따라 시카고에 대한 첫인상이 다를것이다. 나에게 시카고는 ‘건축의 도시’, 건축가 ‘프랭크 로이드 라이트(Frank Lloyd Wright)’ 의 도시로 기억된다.

잠시 개인적인 이야기를 하자면 시카고는 꼭 가보고 싶었던 도시중에 하나였다. 영화 ‘건축학개론’의 서연처럼, 미술을 전공했지만 건축에 관심이 많았던 나는 ‘건축학개론’을 청강했다. 그때 건축가들에 대해 많이 알게 되었는데 그 중 ‘프랭크 로이드 라이트’라는 건축가를 가장 좋아했다. 자연과 조화를 이루는 건축 철학을 바탕으로 단순히 건물만 설계만 하는것이 아니라 가구, 조명, 스테인드글라스에 이르기까지 전반적인 라이프 스타일을 디자인했다. 많은 수의 그의 작품이 시카고에 있다는 사실을 알고 ‘시카고 건축 여행’을 나의 버킷 리스트에 넣었을 정도였다.

시카고의 첫느낌. 낭만의 빌딩숲

윌리스 타워 전망대에서 바라본 스카이라인

누구나 도시의 고층 빌딩에 대해 부정적인 느낌이 있을것이다. 삭막하고, 모든것이 인공적인… 그 안에 있는 우리는 왠지 무한 경쟁을 해야할 것 같은…
그러나 시카고의 고층 빌딩들은 하나 하나가 작품 처럼 느껴진다. 고층 빌딩들이 만들어낸 스카이라인도 멋있다. 무엇이 이 빌딩숲 시카고를 매력적으로 만드는 것일까? 유명한 건축가들이 설계한 고층 빌딩들은 각자의 개성을 가지고 있고, 오래된 건물과 자연스럽게 조화를 이루고 있다. 도시 중앙을 가로지르는 운하는 빌딩숲의 낭만 포인트. 크루즈를 타고 빌딩들을 감상할 수도 있고, 날씨가 좋은 날에는 카약을 즐길수도 있다. 운하를 따라 들어선 바, 레스토랑에서 흘러나오는 블루스를 들으며 저녁 산책을 즐길수도 있다.

빌딩숲을 가로지르는 운하

운하를 따라 저녁 산책

현재 미국에서 가장 높은 빌딩으로 기록된 윌리스 타워(Willis Tower) 전망대를 컨퍼런스에서 친해진 쉘리와 함께 방문했다. 이 전망대를 스카이덱(Skydeck)이라고 하는데, 건물에서 툭 튀어나온 유리 박스 형태이다. 바닥도 벽도 사방이 유리로 되어있어 그 위에 올라서면 마치 공중에 떠있는 아찔한 경험을 할 수 있다.

윌리스 타워 전망대 스카이덱(Sky Deck)

공중에 떠있는 듯한 느낌을 주는 스카이덱

도전! 공중부양!

예술과 자연이 공존하는 문화도시

 
시카고를 높은 빌딩이 빼곡하게 들어찬 인공도시의 느낌에서 벗어나게 하는것은 도심 곳곳에 있는 공원과 미술관, 야외 음악당 같은 문화 시설과의 조화일 것이다. 이 조화로움이 시카고를 예술과 자연이 공존하는 문화도시로 만들고 있는것 같다.

밀레니엄 파크에 이러한 특징이 잘 드러나고 있는 것 같다. 세계적으로 유명한 건축가, 예술가들의 작품이 공원에 전시되고 있다. 건축가 프랭크 게리(Frank Gehry)가 디자인한 야외 콘서트 무대, 제이 프리츠커 파빌리온(Jay Pritzker Pavilion)은 세련된 디자인으로 유명하다. 스페인의 개념 예술가인 하우메 플렌사(Jaume Plensa)가 디자인한 크라운 분수(Crown Fountain)와 ‘콩(bean)’이라는 별명을 가진 스테인리스 철판 조각품인 구름의 문(Cloud Gate)등은 시카고의 명물이 되었다.

크라운 분수(Crown Fountain)가 뒤로 보이는 밀레니엄 파크의 모습

하우메 플렌사(Jaume Plensa) 디자인의 크라운 분수(Crown Fountain)

영국기반 현대 조각가 아니쉬 카푸어(Anish Kapoor)의 Cloud Gate!

미술관을 방문 했을 때 마침 리히텐슈타인(Roy Lichtenstein) 특별전이 열리고 있었다. 책에서도 보지 못했던 페인팅, 조각, 드로잉들도 볼 수 있는 좋은 기회였다.

Nude under a Pine Tree, 피카소

Frolic, 로이 리히텐슈타인

프랭크 로이드 라이트 홈앤스튜디오 투어

 
모든 컨퍼런스가 끝나고 마침내 맞이한 자유시간. 이 날 하루는 그토록 가보고 싶었던 프랭크 로이드 라이트의 건축 투어를 위해 모두 쓰기로 했다. 나이가 지긋하신 가이드는 스스로 자신을 프랭크 로이드 라이트의 열성적인 팬이라고 밝혔다. 투어 내내 건축뿐만 아니라 건축가에 얽힌 여러가지 비하인드 스토리도 알려줬는데… 하나라도 더 알려주시려는 가이드분들의 열정에서 많은 감동을 받았다.

내가 속한 투어 그룹의 인원이 모두 10명 이었는데.. 그 중 8명은 모두 유럽, 스페인, 이집트 등 다양한 나라에서 온 외국인이었다.

오크파크(Oak Park)는 프랭크 로이트 라이트의 홈&스튜디오와 그가 작업한 고급 주택들이 모여있는 것으로 유명하다. 지금 보면 특별한 디자인으로 보이지 않지만, 100여년 전 빅토리안 건축 스타일이 유행하던 시기에 자신만의 디자인 철학으로 독창적인 건축 스타일을 만들어온 프랭크 로이트 라이트의 도전 정신과 자신감을 느낄 수 있었다.

프랭크 로이드 라이트 홈&스튜디오 입구

Arthur Heurtley House, Frank Lloyd Wright, Oak Park, IL 1902

Laura Gale House, Frank Lloyd Wright, Oak Park, IL 1909

투어를 마치고 수고해 주신 가이드와 함께~

웹을 하다보면 모든 정보를 웹에서 접하고, 사람과의 커뮤니케이션도 웹으로 하고 모든것을 모니터 안에서 경험하게 된다. 컨퍼런스에 참여해 웹을 사랑하는 사람들과 나란히 붙어 앉아 그들의 후끈후끈한 열정을 직접 경험하게 되는 것, 건축물을 바라보며 그 건축가의 정신과 노력의 산물을 직접 느끼는 것, 이런 경험들은 가슴을 뛰게 하는 경험들이다. 그래서 더욱 기억에 오래 남게 되고, 더 소중하게 간직하게 되는 것 같다.

‘아름다운 웹사이트 만들기’ 시리즈의 세 번째 책, 《웹사이트를 위한 콘텐츠 전략》을 소개합니다. 여러분 중에는 ‘아름다운 웹사이트’에 왜 콘텐츠 전략이 필요한지 의아해하시는 분도 있을 것이라고 생각합니다. 여러분이 어떤 생각으로 이 책을 손에 넣었든 상관없습니다. 이 책을 가진 것만으로도 복잡하게 얽혀 있던 웹사이트의 ‘콘텐츠’ 만들기가 술술 풀릴 테니까요.

콘텐츠 전략은 글로벌 웹디자인계에서 최근 급부상하고 있는 분야 중 하나입니다. 제프리 젤드먼Jeffrey Zeldman도 An Event Apart 컨퍼런스에서 기조 연설을 통해 콘텐츠 전략의 중요성에 대해 강조했습니다. 저희 웹액츄얼리 역시 이런 흐름을 잘 알고 있었기 때문에 창립하면서 ‘콘텐츠 기획팀’을 두었습니다.

콘텐츠 전략에 종사하는 사람은 어떤 사람일까요? 과연 IT업계 종사자만 해당되는 것일까요? 참고로 이 책의 저자인 에린 키산Erin Kissane은 현재 콘텐츠 전략 컨설턴트 회사인 브레인트래픽Brain Traffic사의 편집장을 맡고 있습니다. 그녀는 콘텐츠 전략가이기 이전에 웹사이트를 만드는 디자이너, 개발자를 위한 웹 매거진 <A List Apart>의 편집자였습니다.

그렇다면 이 책은 편집자를 위한 것이냐고 묻고 싶을 것입니다. 아닙니다. 이 책에서 말하는 콘텐츠 전략은 웹사이트 기획자, 정보설계사, UI 전문가를 비롯해 운영 관리 종사자에게도 해당됩니다. 이 책에서 에린 키산은 그녀만의 글쓰기 재주를 동원해 콘텐츠 전략을 어떻게 활용하는지에 대해 설명합니다.

브레인트래픽사의 CEO인 크리스티나 할버슨Kristina Halvorson은 콘텐츠에 대해 “다루기 힘든 사나운 맹수”라고 표현했습니다. 클라이언트의 요구에 맞춰 웹사이트를 제작하다 보면 말 그대로 사나운 맹수를 다룰 때처럼 손이 많이 가고 겉도는 것이 콘텐츠입니다. 하지만 에린 키산에게는 이것이 문제가 되지 않습니다. 크고 작은 여러 프로젝트를 진행하며 다양한 콘텐츠 전략을 다루는 방법을 충분히 경험했기 때문입니다. 이 책에는 그녀의 숙련된 콘텐츠 관리법이 담겨 있습니다.

콘텐츠 전략에서 가장 중요한 것은 다른 분야와 잘 협업하여 공통된 목적을 이루는 것입니다. 웹디자이너, 웹개발자는 물론, 기획자를 비롯해 마케터, 편집자, 작가, 정보설계사, 데이터베이스 관리자 등과 함께 작업해야 합니다. 원활한 작업을 위해서는 개개인의 성격과 인맥이 중요할 수도 있습니다. 하지만 업무적으로 맞닥뜨리는 문제들을 완벽하게 막아낼 수는 없습니다.

이 책의 머리말에서 크리스티나 할버슨이 말한 것처럼 여러분이 업무 중에 길을 잃고 헤맬 때 캄캄한 동굴 안을 환히 밝혀주는 횃불과 같은 존재로 이 책을 활용하셨으면 좋겠습니다.

- 웹액츄얼리 북스팀 (books.webactually.com)

전자신문, 김용주 기자의 ‘웹사이트를 위한 콘텐츠 전략’ 리뷰

실무적 입장에서 지은 책인 만큼 단순 이론서와 다르다. 아름다운 웹사이트를 만들기 위해 어떻게 콘텐츠를 활용할 수 있는지 실질적인 방법을 알려 준다. …(중략)… 좋은 웹사이트는 아름다운 외모(디자인)와 함께 마음(콘텐츠)도 갖춰야 한다는 평범한 상식을 새삼 일깨워준다.

전자신문에서 전체 리뷰를 확인하실 수 있습니다.

안녕하세요. 여러분!

저는 웹액츄얼리코리아(Webactually Korea, Inc.) 인턴과정을 통과하고 당당히 팀에 합류한 신지윤이라고 합니다! 인턴 통과 과제를 통해 얻은 깨달음을 여러분과 함께 공유하기 위해 이렇게 글을 쓰게 되었습니다.

여러분은 무슨 일을 하시나요?

스펙 쌓고 싶은 대학생? 한가한 대학생? 창업자?

요즘은 자기 개성의 시대로 또 소셜 네트워크로 연결된 사회이다 보니 쉽게 자신을 인터넷에서 표현할 수 있고, 다양한 정보를 공유할 수 있는 시대입니다.

이러한 시대에 존재감 없이 살아가는 것보다는 자신만의 웹사이트, 자신만의 창을 통해서 쉽게 ‘나’를 표현할 수 있다면 좀 더 의미 있는 삶이 되지 않을까요? 또는 웹사이트를 이용해서 여러분만의 작은 사업을 할 수도 있겠죠?

예를 들어, 퀼트로 쿠션이나 이쁜 수공예 인형을 만드시는 능력자분들은 인터넷 웹사이트를 통해 온라인 판매도 가능하겠죠. 요즘은 사람들이 인터넷 검색을 통해서 병원을 찾고 맛집을 찾아 다니잖아요. 이처럼 웹사이트는 모든 비지니스 마케팅에 있어서 빠질 수 없는 요소라고 생각합니다.

하지만, 웹사이트 만들기가 어렵다고 들으셨죠?

맞습니다.

쉽지 않은 것은 사실입니다. 그러나 모든 것은 노력없이는 가능하지 않겠죠? 여러분이 약간의 ‘실행’으로 작지만 의미있는 ‘결실’을 얻을 수 있는 방법을 공유하고자 합니다. 저와 함께 시작해 보실래요?

먼저 웹사이트를 만들고 싶으시다면 웹코드, 즉 웹사이트를 만들기 위해 알아야 하는 그들의 언어들이 있겠죠? 그 코드를 가장 쉽고 재밌게 배울 수 있는 방법 중 하나인…

‘코드카데미(http://www.codecademy.com)’라는 웹사이트를 소개합니다.

코드카데미의 사이트의 첫 화면

저는  웹액츄얼리 인턴 과제로써, 이 코드카데미 사이트에서 제공하는 좋은 기회를 알게 되었고, 실천으로 옮기게 되었습니다. 여러분들도 이러한 좋은 기회를 놓치지 말고 기회가 있을 때 잡으세요!

뉴욕시장인 마이클 블룸버그도 올해 초 ‘코드의 해’로 정하고 이런 멋진 코드를 배워야 한다고 했다는군요. 코드를 짜는 것도 멋지지만 블룸버그 시장도 멋진 아저씨인 것 같습니다.

코드카데미는 제3의 언어로 뉴욕 시민들에게 코딩을 쉽게 가르치기 위해 뉴욕시에서 만든 일반인 대상 웹사이트라고 합니다. 그래서 일반인들이 배우기 쉬울 뿐만 아니라 영어만 ‘조금’ 아시면 누구라도 쉽게 익힐 수 있습니다. 중고등학교 영어실력으로 이해할 수 있으니깐 영어로 된 웹사이트라고 무조건 피하지 마세요.

코드카데미에서는 사용자가 코드를 실제로 작성해 주어진 과제를 해결해 가면서 배울 수 있는 시스템을 가지고 있습니다. 여러분이 직접 작성한 코드의 결과가 어떻게 웹페이지에 표현이 되는지를 바로 확인할 수 있어서 어려운 코드들을 쉽고 재밌게 배울 수 있습니다.

코드카데미의 강의 내용

위 그림에서 보면, 이 웹사이트에서 제공하는 코스는 현재 Web Fundamentals(기초), JavaScript Fundamentals, JQuery로 구성 되어있고, 각 코스마다 이론 밎 Project, 다양한 연습 문제로 구성 되어있습니다. 마지막 Code Year는 바로 이 세 코스를 통합해서 부르는 과정입니다.

Web Fundamentals 경우, 8개의 Chapter로 한 개의 코스가 구성이 되어있으니까 하루에 보통 2시간 소요되는 하나의 Chapter를 매일 한다고 가정했을 때, 이 모든 과정을 한달 안에 마칠 수 있겠죠?

하지만 제가 이 기초 코스(Web Fundamentals)를 듣고 느낀 것은 코드를 배우는 저 같은 초보자의 경우, 두 달을 목표로 최소 2번은 복습하면서 각 코스를 완벽하게 마스터 하는 것이 빠르게 마치는 것보다 좋은 배움의 결과를 얻을 수 있다고 생각합니다.

먼저 제가 처음 듣는 코스는 8개의 Chapter로 구성이 되어있는 기초 코스로, 기초적인 HTML, CSS와 JavaScript를 공부할 수 있는 코스입니다. 말 그대로 기초적인 것을 주로 배우는 것이기 때문에 초보자분들 꼭 도전하세요!

HTML은 Hyper Text Markup Language로 웹페이지에 원하는 내용을 작성할 수 있는 언어를 말합니다. 웹페이지의 주제 밎 내용과 구조를 만드는 것이 HTML이고, 웹 페이지의 스타일을 디자인하는 언어는 CSS입니다. JavaScript는 이 웹페이지가 사용자와 커뮤니케이션할 수 있도록 동적인 웹페이지를 가능하게 하는 프로그래밍 언어죠.

이 언어에 대한 기초적인 코스로 코드카데미에서 어떤 코스를 가지고 있는지 좀 더 자세히 살펴볼까요?

하나의 Chapter 안에는 이론과 프로젝트로 이루어져 있고 그 안에는 다양한 연습문제(Exercise)로 구성 되어있습니다. 하나의 Chapter에 10~30개의 연습 문제가 있고, 한 Chapter를 마치는데 걸리는 시간의 코스의 난이도에 따라 다릅니다.

저 같은 경우는 보통 한 Chapter당 2시간 정도 걸렸습니다. 처음 HTML은 조금 쉬운 과정이었기 때문에 무난히 예제 문제를 통과했습니다. 그러나 저는 CSS 코스 중 하나인 네 번째 코스 ‘Advanced CSS selectors’가 가장 어려웠고, 시간이 오래 걸렸습니다.

위의 그림은 가장 기초 코스인 Web Fundamentals 중에서도 첫 Chapter HTML Fundamentals의 연습 페이지로 HTML을 배우는 코스입니다.

페이지의 왼쪽은 가이드라인으로 여러분들이 쭉쭉 읽어 내려가서, 오른쪽 박스에 왼쪽의 가이드라인을 따라 배운 코드를 작성하면 되는 것입니다. 이런 식으로 모든 페이지가 구성 되어있습니다.

오른쪽 박스에 코드를 직접 작성하고 나면 이에 대한 결과는 ‘Run’ 버튼이나 박스 상단의 ‘Result’ 탭을 클릭해서 바로 확인할 수 있고요. 여러분이 작성하신 페이지가 맞다면 다음 연습문제(Next Exercise)로 넘어가게 됩니다.

어려울 때는 ‘Hint’를 클릭하면 되고요. 그렇지만 Hint를 읽고도 모르는 경우도 있겠죠? 그럴 때는 Q&A Help를 클릭하고, Visit the forum을 클릭해서 페이지를 열면 비슷한 문제로 예제를 통과하지 못한 사람들이 올린 질문의 답을 찾을 수 있습니다.

저는 이렇게 Web Fundamentals의 8개 Chapter를 매일매일 마쳤고 드디어… 이렇게 12개의 배지를 받았습니다! 한 과정을 통과할 때마다 얼마나 뿌듯하던지!

여러분도 저와 함께 좋은 배움의 길을 걸으시고, 여러분의 능력으로 여러분만의 웹페이지를 만들어 보세요!

화이팅!!

스매싱 스페셜

워드프레스 디자이너이자 사업가이며 저자이기도 한 리사 사빈 윌슨(Lisa Sabin Wilson)은 자신이 워드프레스를 둘러싼 경제의 일부분이라는 사실에 감사한다는 내용의 글을 블로그에 올린 적이 있다. 워드프레스는 세계적으로 수천 명의 사람들이 경제적 이익을 얻을 정도로 성장했으며, 이 글을 쓰고 있는 나 또한 그중 한 사람이다. 게다가 무료 오픈소스 소프트웨어에 기반한다는 점도 특기할 만하다. 이번 글에서는 워드프레스 경제에서 활발한 활동을 보이는 전 세계 사람들의 이야기를 소개하고자 한다. 워드프레스를 둘러싼 환경은 최근 몇 년 사이 놀랍도록 성장했으며, 새롭고 혁신적인 회사들이 많이 참여하고 있다.

혹시 최근에 스매싱매거진에서 나온 «스매싱북3»에 대해 들어보셨나요? 이 책은 독자들에게 새로운 실용적인 기술들과 혁신적인 웹디자인에 대한 개념을 완전히 새롭게 잡아줄 것입니다. 웹액츄얼리팀도 이 분야에 열심히 공부중인데요. 내용이 정말 환상적입니다. 저희 북스팀이 올해 연말 출간을 목표로 준비중이니 기대해주세요. 그리고 다음달에 «스매싱북2»를 출시할 예정입니다. 현재 «스매싱북1»은 판매중입니다.

차례

글이 길어져 두 편으로 나누었으니 원하는 섹션으로 빠르게 이동하고 싶다면 아래 링크를 이용하기 바란다.

통계(The Stats)
창립자들의 한마디(Some Words from the Founders)
테마(Themes)
플러그인(Plugins)
서비스(Services)

통계(The Stats)

워드프레스는 지난해 세계적인 규모로 설문조사를 실시한 적이 있다. 사람들이 워드프레스로 무엇을 하는지에 대한 기본적인 질문들이 주어졌다. 전 세계에서 1만 8000명이 넘는 사람들이 설문조사에 응해 워드프레스의 세계적인 인기를 실감케 했다. 응답자들을 나타내는 세계 지도를 보시라.

자세한 설문조사 결과는 워드프레스 창업자 매트 뮬렌웨그(Matt Mullenweg)(조선비즈 인터뷰 기사(4월28일자))의 2011년 2월 워드프레스 연설문(State of the Word)에서 확인할 수 있다. 여기서는 그중 몇 가지만 살펴보자.

정말 신나는 통계가 아닐 수 없다. 또 인터넷 사이트 중 14.7퍼센트가 워드프레스를 운용하며, 2011년 8월 기준으로 새로운 도메인의 22퍼센트가 워드프레스에서 돌아간다. 앞으로도 기하급수적인 성장을 기대할 수 있는 부분이다.

본격적으로 워드프레스를 사용하는 사람들을 만나기 전에 먼저 워드프레스의 탄생에 기여한 두 사람을 만나보자.

창립자들의 한마디(Some Words from the Founders)

멀고 먼 2003년(인터넷에서 이 정도면 아주 옛날이다)에 매트 뮬렌웨그는 ‘B2/카페로그(B2/cafelog)’라는 블로그 프로그램에 염증을 느끼며 기존의 소스 코드를 기반으로 새로운 프로그램을 만들 때가 된 것이 아닐까(역주-이런 개발 방식을 ‘포킹(fork)한다’고 한다), 생각했다. 마이크 리틀(Mike Little)이 이 생각에 댓글을 달았고, 이를 계기로 워드프레스가 탄생했다.

마이크 리틀(Mike Little)의 당시 댓글

“매트!
만일 당신이 B2/cafelog에 대해서 정말 포크할 마음이 있다면 나도 그 프로젝트에 기꺼이 기여할 마음이 있다. 그리고 이 커뮤니티에 한두 명은 더 그럴 마음이 있을 것이라고 생각한다. B2/cafelog 포럼에 글을 올려서 포킹하자고 제안해보면 좋은 출발점이 될 것이라고 생각한다.”

지금 워드프레스로 생계를 유지하고 있는 사람들에게는 실로 중요한 순간이었다고 할 수 있다. 하루 종일 잠옷을 입은 채로 전 세계 멋진 사람들을 만나는 것이 가능하도록 해주었으니 말이다.

매트와 마이크에게 워드프레스 경제에 대해 몇 가지 질문을 했다.

처음 B2를 포킹할 때 이렇게 성공하리라 생각했나요?

매트
“천만에요.”

마이크
“전혀 그러지 못했죠. 우리가 쓰고 있던 블로그 프로그램의 버그나 좀 잡고 몇 가지 성능을 붙이려는 의도였어요.

저는 다른 오픈소스 프로젝트에도 관심이 있었죠. 그전부터 MySQL, CVS, Cygwin 등 여러 프로젝트에 관심이 있었습니다. 하지만 주로 버그 보고나 포럼 활동, 메일링 리스트 운영 등을 했죠.

그래서 저는 이번 기회가 한 가지 프로젝트에서 능력을 발휘해볼 수 있는 정말 좋은 기회라고 생각했어요. 매트와 마찬가지로 저도 포럼에서 사람들에게 코드를 전수해주거나 문제를 해결할 수 있는 방법을 알려주고 있었고, B2/카페로그용으로 몇 가지 확장 기능도 만들고 버그도 고치고 기능 수정도 했습니다.”

전 세계 많은 사람이 워드프레스와 관련된 직업을 갖고 있으며 워드프레스를 기반으로 비즈니스를 하는 사람도 많습니다. 자신이 이런 일이 가능하도록 만들었다는 것에 대해 어떻게 생각하세요?

매트
“수만 명의 사람들이 워드프레스를 통해 직접적으로 수익을 창출하고 있다는 것을 알고 있습니다. 간접적으로 돈을 버는 사람은 더욱 많겠죠. 사람들이 좋은 의도로 모여 진심으로 힘을 합치면 워드프레스 코어를 개선하는 것이든 자선행사이든 뭔가 멋진 일이 벌어진다고 생각합니다.”

마이크
“최근까지 많이 생각해보지 못한 부분이에요. 여태까지는 워드프레스가 인터넷상에서 많은 사람이 목소리를 낼 수 있도록 힘을 보탰다는 데 관심이 있었죠.

그러다가 지난해 몇몇 대형 설문조사 결과를 보면서 워드프레스를 둘러싼 경제가 얼마나 큰지 깨달았어요.

대단히 훌륭하다고 생각합니다. 시작부터 이러한 현상의 중심에 있었다는 것은 엄청난 영광이죠. 무료 소프트웨어의 역설이기도 한 것이, 핵심 제품은 무료로 제공하면서도 이런 규모의 경제를 지탱할 수 있을 정도로 수익을 낸다는 것입니다.”

워드프레스 경제가 붐인 것도 대단하지만 불황의 영향을 받지 않는 것도 인상적인데, 이유가 뭐라고 생각하나요?

매트
“워드프레스는 기존의 상업적이거나 경직된 구조의 CMS를 대체하는 경우가 많으며 그런 경우 비용은 기존의 10분의 1 정도입니다. 사람들은 자신의 웹사이트를 더 직접적으로 통제하고 싶어 하지요.”

마이크
“워드프레스가 불황의 영향을 덜 받는 첫 번째 이유는, 매우 유연한 시스템이라는 점입니다. 같은 프로그램을 가지고 여러 가지 일을 할 수 있다는 뜻입니다. 25달러(약 3만원) 정도면 충분할 ‘그냥 하나 만들어줘봐’ 수준의 웹사이트부터 15만달러(약 1억7000만원)짜리 견적의 완전한 커스터마이징이 가능하고 복잡한 기업형 웹사이트에 이르기까지 말이죠.

둘째는 초보자가 워드프레스 관련 업무를 시작하는 것 자체는 매우 간단하면서도, 경험 많고 숙련된 팀이 매우 정교한 웹사이트를 만들 수 있을 정도로 강력하다는 점입니다.

셋째는 인터넷을 기반으로 하는 모든 비즈니스와 조화를 잘 이룬다는 점입니다. 디자이너, 마케팅 담당자, 검색 최적화 전문가 등부터 기업인까지, 사람들은 대부분 웹사이트의 기술적인 습득이나 제작에 대한 걱정은 내려놓고 자신의 일에 집중할 수 있습니다.”

여기까지 워드프레스 뒤에 누구일까 궁금했던 사람들과의 대화였다. 이제 워드프레스를 통해 비즈니스를 창출한 사람들의 얘기를 들어볼 차례다. 워드프레스와 인연을 맺은 지 얼마 안 되는 사람도 있고 오랫동안 워드프레스와 함께 해온 사람도 있다.

아래 글을 읽으면서 어떤 패턴이 보일지도 모르겠다. 많은 사람이 자신의 개인적인 필요에 의해 일을 시작하고 나중에는 비즈니스로까지 발전했다. 이런 예지력이 많은 사람을 성공으로 이끌었다.

테마(Themes)

테마 상점

여성을 공략하기 위해 서비스 중인 얼루어(Allure) 테마

워드프레스를 생각할 때 가장 먼저 떠오르는 사업은 테마 상점이다. 테마 상점을 생각하면 다시 우테마(WooThemes), 엘리건트 테마(Elegant Themes), 시시스(Thesis), 스튜디오프레스(StudioPress) 등이 떠오른다. 하지만 이것이 전부가 아니며 인터넷에는 수백 개가 넘는 워드프레스 테마 상점이 있다. 이 글에서도 90개나 소개하고 있지만 목록에 포함되지 않은 것도 수없이 많을 것이다.

테마 상점은 그야말로 전 세계 사람들이 운영하고 있다. 개인적인 경험을 말하자면, 아메리카, 극동 및 중동 아시아, 유럽 사람이 만든 테마 상점과 일해본 적이 있다. 테마 상점 시장은 이미 포화상태라고 할 수 있지만 계속해서 새로운 상점이 생겨나고 있다.

지난해 얼루어 테마(Allure Themes)라는 테마 상점을 론칭한 리사와 이야기를 나누었다. 경쟁이 심한 시장에서 워드프레스 벤처로서 상점 테마가 실용적인 비즈니스 모델이 될 수 있는지에 대해 물었다. 그녀의 말을 들어보자.

“사실 2~3년 전보다 인터넷에 테마 상점을 내는 일이 많이 어려워졌어요. 요즘은 워드프레스 테마 상점이 넘쳐나고 있고 유명한 대형 상점부터 자잘한 소규모 그룹까지 크기도 다양하죠. 특정 산업이나 인구 세그멘트를 공략하는 틈새 상점이 돋보일 수 있다고 생각합니다. 아니면 기존에 있던 시장에서 유명한 테마 프레임워크(빌더, 헤드웨이, 제네시스)에 대한 차일드 테마를 만드는 것도 가능한 전략입니다. 이런 시장에는 그야말로 수천, 수만 명의 사용자가 있는데 보통 사람은 다양하고 선택 가능한 것을 좋아하죠.”

테마 상점을 오픈한다는 것은 훨씬 더 어려운 일이 되었지만 그렇다고 불가능한 것은 아니다. 테마 상점을 론칭할 계획을 갖고 있다면 아래 리사의 조언에 귀 기울여보자.

테마 마켓플레이스(THEME MARKETPLACE)

테마는 마켓플레이스에서도 구입할 수 있다 (이미지 출처 'Michael Osmanda')

테마 마켓플레이스는 테마 상점의 일종이다. 보통의 테마 상점이 자신들이 직접 만든 테마만 판매하는 데 반해, 마켓플레이스는 디자이너와 개발자가 자신들의 테마를 가져와 팔고 마켓플레이스에 수수료를 내는 플랫폼이다. 이런 종류의 테마 상점 중 가장 유명한 것은 엔바토(Envato)라는 대형 디자인 기업에서 만든 테마포레스트(Theme Forest)이다. 물론 이곳만 이런 형태를 취하는 것은 아니고, 현재 리디자인이 진행 중인 테마가든(Theme Garden)이나 최근 강세를 보이고 있는 모조테마(Mojo Themes) 등도 대표적이다.

2006년 처음으로 테마 마켓플레이스라는 아이디어를 착안했던 (하지만 당시에는 아이디어를 바로 실천하지는 못했다) JR 파(JR Farr)와 이야기를 나눌 기회가 있었다. 이후 그는 공동 창업자와 함께 모조테마를 만들었다. 테마포레스트와 같이 거대 기업들과 경쟁하는 기분이 어떤지 물었다.

”엔바토 사람들이 만든 네트워크는 매우 훌륭하며 저는 그분들을 존경합니다. 아주 대단한 일을 하고 계시더군요. 그들과 경쟁하는 것은 매우 신나는 일이고, 개인적으로 경쟁이 나쁜 것은 아니라고 생각합니다. 경쟁은 혁신을 가져오고 제품의 완성도를 높이죠.

워드프레스 테마 마켓플레이스를 시작한 첫날부터 우리는 한 가지 목표를 가지고 있었고, 그 한 가지 목표에 초점을 맞추려고 최선을 다했습니다. 우리가 하는 일에 집중하고 거기서 최고가 되고자 한 것입니다. 지난 2년 동안 성장통을 약간 겪기도 했지만 조인트 포스(JOINT FORCES)와 같이 다른 사람들은 해내지 못한 중요한 기능을 우리 마켓플레이스에 추가하기도 했습니다.”

새로운 사용자, 새로운 아이템, 더 많은 매출과 그에 따라 늘어나는 개발비 지불 등 이들은 론칭 이후 계속 성장해왔다. 이는 마켓플레이스가 성장함에 따라 그에 맞는 서비스를 할 수 있도록 운영팀 또한 성장해야 한다는 의미다. 설립 3년차인 지금도 성장률은 높아지고 있다. 2011년만 해도 전년 대비 세 배나 성장했다. 이들은 지속적으로 자신들의 네트워크를 확장하려고 노력하며, 새로운 틈새 시장인 커스터마이징 솔루션 시장 진출도 검토하고 있다.

테마 디자인

테마 디자인은 워드프레스에서 가장 요구가 많은 기술 중 하나다. 사람들이 디자인적으로 멋진 워드프레스 사이트를 원하는 한, 테마 디자이너가 굶어죽는 일은 없을 것이다. 크리스 코이어(Chris Coyier, 크리스는 국내에서 출간된 «워드프레스 제대로 파기»의 공동 저자이기도 하다.)는 클라이언트의 웹사이트 작업을 할 때 워드프레스를 주로 사용하는 웹디자이너다.

그에게 전통적인 웹디자인과 워드프레스 디자인의 차이를 물었다. 그의 지적처럼 이제는 CMS(Content Management System; 콘텐츠관리 툴)를 활용하지 않고 운영되는 웹사이트는 드물다. CMS를 활용한 웹디자인이 예전의 구식 디자인을 대체하는 시대가 곧 올 것이라는 것이 그의 대답이다.

크리스가 전해준 CMS를 활용한 디자인 작업에 있어서 꼭 명심해야 할 팁을 옮긴다.

경쟁이 심한 시장에서 테마 디자이너로서 앞서 가려면 어떻게 해야 할지 크리스에게 물었다.

“워드프레스 테마를 팔려고 노력하는 작은 회사들이 매우 많다는 것을 잘 알고 있습니다. 시장은 포화상태이고 진입도 쉽지 않을 것입니다. 다른 산업과 마찬가지로 앞서 나간다는 것은 품질 혹은 가격으로 경쟁한다는 것을 의미합니다. 하지만 많은 워드프레스 테마가 무료이기 때문에 이들과 가격 경쟁을 한다는 것은 어려운 일이므로 결국 품질로 승부해야 합니다. 하지만 이미 좋은 품질에 대한 기준이 상당히 높이 올라가 있습니다. 프리랜서의 경우 디자인과 비즈니스에 능하면서 클라이언트를 잘 다루고 그들에게 필요한 것을 제공할 수 있다면 기회는 언제나 있습니다”

하지만 새로운 디자이너들이 시장에 참여할 여지가 전혀 없는 것도 아니다. 더 많은 사람이 워드프레스를 사용하기 시작하고, 그 범위는 대기업, 중소기업, 개인을 망라한다. 계속 성장하는 시장이기 때문에 다양한 디자이너들이 참여할 수 있다.

테마 엔진

워드프레스에 더 강력한 기능을 선사하는 인피니티 테마 엔진. (Infinity Theming Engine,
이미지 출처 'Trey Ratcliff')

워드프레스가 성장함에 따라 워드프레스 디자이너의 수도 증가하고 있다. 하지만 모든 워드프레스 디자이너가 매우 복잡한 워드프레스 웹사이트를 만드는 데 필요한 기술을 보유하고 있는 것은 아니다. 이는 곧 디자이너가 편리하게 사용할 수 있는 솔루션이 있어야 한다는 것을 의미한다. 이런 맥락에서 인피니티 테마 엔진 (Infinity Theming Engine)이 론칭을 준비 중이다. 인피니티는 디자이너를 위한 툴킷이라는 점에서 기존의 워드프레스 프레임워크와 차별화를 꾀하고 있다. 인피니티 개발자들은 이를 다음과 같이 기술한다. “재사용성 및 확장성이 뛰어난 테마 개발 기능. 특정 디자인 모델에 구애받지 않고 워드프레스와 테마 사이를 연결해줌.”

엔진이라고 불리는 이유는 워드프레스에 힘을 보태주고 디자이너가 더 쉽게 디자인 작업을 할 수 있도록 도와주기 때문이다.

인피니티는 모든 기능을 functions.php에 몰아넣기보다 설정 파일을 통해 디자이너가 자신이 원하는 기능을 선택해서 켜고 끌 수 있게끔 되어 있다.

인피니티는 개발자인 마샬 소렌슨(Marshall Sorenson)과 디자이너인 보위 프랭크마(Bowe Frankema)가 개발하고 있다. 이들은 소위 프리미엄 모델(Freemium Model–역주: 우수한 품질에 고가의 가격이 책정되는 기존의 Premium이 아닌 Free+Premium, 즉 무료이면서도 고품질을 추구하는 모델을 말한다)을 취하기로 결정했다고 한다. 마샬에게 더 자세한 이야기를 들어보자.

“우리는 코드를 짜고 기능을 추가하는 데 집착하는 사람들이에요. 비즈니스 모델은 한참 뒤에야 생각하죠. 우리에게 가장 중요한 초점은 언제나 우리 스스로가 사용할 수 있는 무엇을 만든다는 것이고, 그것을 커뮤니티와 공유한다는 것입니다. 운 좋게도 우리와 같은 생각을 하는 워드프레스 개발자가 많으며, 지난 2년여 동안 프리미엄 모델이 자리 잡은 것은 큰 수확이라 할 수 있습니다.”

주요 제품은 무료로 제공되며, 테마, 추가 기능, 설치 및 지원 서비스 등을 판매함으로써 수익을 얻는다. 이러한 모델은 다른 프레임워크에서 이미 시도된 적이 있으므로 서로 다른 테마 개발 툴에서 이것이 어떻게 작동할지 보는 것도 흥미로운 일일 것이다.

보위에게 워드프레스로 작업하는 것의 이점은 무엇인지 물었다.

“이점이 워낙 많아서 어디서부터 시작해야 할지 모르겠네요. 지금이 바로 워드프레스 커뮤니티의 일원이 되기에 가장 좋은 때인 듯해요. 워드프레스를 처음 쓰는 사람이 하루에도 수없이 생겨나지만 이들이 인터넷상에서 도움을 받을 수 있는 자료는 매우 많아요. 전 세계적으로 열리는 워드캠프(WordCamps)도 그렇고 워드프레스를 이용하는 건 정말 쉬운 일이 되었죠.

사람들이 인피니티에 관심을 보이는 모습에 큰 감동을 받았습니다. 정말 다양한 사람이 관심을 보였는데, 이 정도로 주목받을 줄은 몰랐습니다. 메뉴얼 정리나 기대에 대한 관리 등과 같은 부담스러운 점도 있었습니다. 하지만 그것은 오히려 사치스러운 문제라고 할 수 있죠. 사람들은 워드프레스를 사용하길 원하고, 문제를 해결하는 데 새로운 솔루션을 시도해보는 것을 꺼리지 않아요. 가장 중요한 것은 사람들이 워드프레스가 그들의 웹사이트나 비즈니스에 힘을 실어줄 것이라고 믿는다는 점입니다. 그런 신뢰 없이는 자신이 사랑하는 일을 해서 먹고살려고 노력하는 우리와 같은 워드프레스 개발자에게 희망이란 애초에 없었을 것입니다. 워드프레스 커뮤니티에 감사해요. “

플러그인(Plugins)

플러그인 개발자

플러그인 개발의 상업화는 테마를 상업적으로 파는 것보다 좀더 어려운 일이었다. 워드프레스 사용자들이 테마 디자인에는 돈을 지불하면서도 플러그인은 사기를 꺼리면서 디자인과 기능 사이에 분리가 일어났다. 하지만 그렇다고 해서 플러그인 개발이 돈이 안 되거나 성장하지 않는 시장인 것은 아니다. 어떤 플러그인 개발자들은 단 하나의 플러그인을 개발하는 데 집중하여 큰 성공을 거둔 경우도 있다. 워드프레스용 이벤트 관리 플러그인인 이벤트 에스프레소(Event Espresso)를 만든 세스 슐츠(Seth Shoultes)도 그중 한 사람이다.

이벤트 에스프레소는 세스가 가족들을 위해 만든 플러그인에서 출발했다. 온라인 스크랩북 강의에 사람들이 등록하고 지불할 수 있도록 하는 프로그램이 필요했다. 당시에는 그런 기능을 할 수 있는 플러그인이 없었고 그래서 직접 만든 것이다.

다른 상업적인 플러그인들과 마찬가지로 이벤트 에스프레소 역시 워드프레스에서 무료 플러그인으로 시작했다. 지원 요청이 봇물처럼 밀려들었고 다른 많은 플러그인 개발자들처럼 세스도 그 많은 지원 서비스와 업그레이드를 무료로 하기는 힘들다고 판단했다. 플러그인 마켓플레이스에 판매를 시작하는 것이 좋겠다는 생각이 들었다.

“1주일에 하나씩 팔리는 것을 시작으로 하루에 몇 개가 나가더니 첫 해에는 꾸준히 매달 두 배씩 성장했어요. 12개월 동안 성장하더니 트렌드가 정체되기는 했지만 꾸준해졌고, 따라서 마케팅과 신제품 출시에 더 공격적인 정책을 펼쳤습니다.”

2011년 세스는 유타기업가정신경진대회(Utah Entrepreneur Challenge)에 참가했다. 세 차례에 걸친 평가 라운드 끝에 최고상을 수상해 4만 달러를 받았다. 이는 ABC 뉴스에도 보도되었다.

세스에게 워드프레스 경제의 일부가 되는 것이 어떤 이점이 있는지 물었다. 이벤트 에스프레소가 엄청난 인기를 끌고 있는 것 말고도 다음과 같은 말들을 덧붙였다.

“워드프레스 경제는 혁신적입니다. 보통 개발자들은 주어진 플랫폼 내에서 경쟁하기 마련이지만 워드프레스는 그 자체가 개방형 체제이므로 개발자들이 워드프레스 자체를 바꾸거나 개발에 기여할 수도 있죠. 하지만 또 그런 프레임워크 내에서 매일같이 새롭고 고무적인 일을 찾을 수도 있습니다. 그중 어떤 것은 돈이 되기도 하고 안 되는 것도 있지만 어떤 경우든 워드프레스 커뮤니티는 혁신을 요구합니다.”

세스는 이벤트 에스프레소에 대해 큰 계획을 갖고 있으며, 조만간 자신의 가족들이 사용하기 위해 시작했던 이 프로그램이 더 큰 시장으로 확장되는 기초가 될 것으로 믿고 있다.

서비스(Services)

워드프레스 호스팅

워드프레스를 호스팅하는 서버들 (이미지 출처 'Skimaniac')

워드프레스를 사용해본 사람이라면(이 글을 읽고 있다면 한번쯤 사용해봤다고 해도 되지 않을까) 좋은 호스팅 회사를 찾는 것이 얼마나 어려운 일인지 잘 알고 있을 것이다. 지난해 말 WP샤우트(WPShout)의 알렉스는 자신의 호스팅 서비스 리뷰를 공개했는데, 대형 호스팅 기업들의 결과가 좋지 않았다. (혹시 호스팅 회사들에 대한 의견을 피력하고 싶다면 주스트 드 발크(Joost de Valk)가 현재 비슷한 호스팅 관련 설문조사를 실시하고 있다.) 하지만 워드프레스만을 호스팅하는 전문 기업을 찾는 것은 또 어떤가? WP엔진(WPEngine)에서 하려는 일이 바로 그것이다.

지금까지 언급한 다른 워드프레스 비즈니스와 마찬가지로 WP엔진도 창립자가 자신의 필요에 의해 만든 것이 시초가 되었다. 제이슨 코헨(Jason Cohen)은 해커뉴스(HackerNews) 초기 화면에 자신의 기사가 실릴 때마다 자신의 블로그가 다운된다는 것을 발견했다. 제이슨은 갑작스럽고 높은 트래픽도 감당할 수 있는 올인원 타입 워드프레스 호스팅 패키지가 필요하다고 생각했다.

몇 가지 시장조사를 마치고 나서 제이슨은 WP엔진(WPEngine)을 만들었다. 그의 네 번째 벤처회사였다.

“자신의 가려운 부분을 긁어줄 수 있는 회사를 만드는 것은 멋지고도 보편화된 방법입니다. 하지만 그것은 시작일 뿐 회사를 설립한 뒤에도 해야 할 일은 많습니다. 내 아이디어가 모래알에 불과할지 진주알이 될지는 직접 필드에 나가봐야 알 수 있지요. 많은 아이디어가 좋은 아이디어일 수는 있지만 좋은 아이디어가 모두 좋은 비즈니스는 아니라는 점을 기억해야 합니다.“

제이슨은 혼자 회사를 만들었고, 7개월이 지나서야 수익을 내기 시작했다. 이후 직원 2명을 고용했고, 다시 흑자로 돌아선 것은 다시 6개월이 지나서였다. 지금은 매달 두 자릿수의 기하급수적인 성장을 하고 있다.

워드프레스 관련 뉴스를 챙겨 보는 독자라면 지난해 WP엔진이 많은 금액의 엔젤투자를 받았다는 소식을 접했을 것이다. 여기에는 오토매틱(Automattic)으로부터의 투자도 포함돼 있다. (인상적이기도 한 WP엔진의 투자자 리스트는 여기서 확인 가능하다.)

“이로 인해 우리는 고객획득과 기업성장이라는 2가지 측면에서의 성장동력을 얻었습니다. 은행에 돈이 있다는 것은 우리가 필요에 앞서 직원을 고용할 수 있다는 뜻이며, 단기간 동안 더 많은 마케팅 활동을 펼칠 수도 있고, 성과가 있는 분야라면 더 많은 자금을 사용할 수도 있다는 의미입니다.

이런 투자로 인해 얻을 수 있는 또 다른 유용한 점은 바로 투자자들의 조언입니다. 투자자마다 서로 다른 역할을 해줍니다. 어떤 투자자는 규모 확대 및 예측에서 생기는 운영상의 문제 해결을 도와주고, 어떤 투자자는 다른 분야의 일을 도와줍니다. 호스팅 회사를 시작한 투자자도 있었는데 규모가 매우 컸기 때문에 우리는 거의 모든 면에서 도움을 받았습니다. 결국 이런 모든 것이 우리의 성공에 엄청난 영향을 끼쳤습니다. 이들의 도움 없이는 우리가 잘 해내지 못했을 것이라는 생각이 들 정도입니다.”

워드프레스가 인터넷에서 상당한 부분을 차지하면서 워드프레스에만 집중하는 호스팅 기업을 위한 시장이 생겨났다. 시장 자체도 규모가 매우 크고 성공적인 기업을 만들 수 있는 잠재력 또한 어마어마하다.

“거대한 시장이기 때문에 수많은 업체가 생겨날 수 있고, 각자 서로 다른 부분에서 시장에 공헌할 수 있습니다. 물론 우리가 주요 업체로서 살아남기를 바라지만 경쟁사를 ‘죽일’ 의도는 전혀 없습니다. 사실 우리는 우리 제품이 고객의 필요에 맞지 않을 경우 경쟁 기업을 추천해주기도 하며, 경쟁 업체들도 그렇게 합니다.”

제이슨은 WP엔진의 임무가 자신들이 타깃팅하고 있는 시장의 특성에 맞춰 가장 유용한 프로그램이 되는 것이라고 생각한다. 이는 로엔드와 하이엔드 소비자 사이에서 균형을 잘 맞추는 것을 의미한다. 이런 관점에서 얼마 전 런던과 도쿄에 있는 기업들을 위한 서버 지원을 출시한 이들은 매우 성공적인 것으로 보인다.

컨설팅

누구나 때때로 작은 도움이라도 필요하다. (이미지 출처 'FuturePresent')

워드프레스는 사용하기 쉬운 데다 무료다. 다시 말해 워드프레스를 시작하는 데 필요한 기술적인 지식 수준은 계속 낮아진다는 것이다. 이는 수백만 명의 사람들이 인터넷에 접근 가능하도록 해주므로 매우 좋은 일이지만, 사용자가 일단 워드프레스를 깊이 파고들기 시작하면 워드프레스를 깊이 아는 일이 그리 단순하지만은 않다는 것을 발견할 것이다. 게다가 엄청난 양의 플러그인과 테마를 사용할 수 있다는 것 자체가 초보자의 눈에는 혼란스럽기만 하다. 이 때문에 워드프레스를 좀 할 줄 아는 사람에게는 컨설팅 비즈니스라는 큰 기회가 생기는 것이다.

워드프레스 컨설팅 서비스 사업을 하는 메이슨 제임스(Mason James)를 만나 워드프레스 컨설팅이 어떤 일을 하는 것인지 물었다.

“저에게 컨설팅이란 문제가 생기기 전에 문제를 해결하는 것을 말합니다. 좋은 컨설턴트는 기존에 존재하는 플러그인과 테마에 대해 잘 알고 있어야 하며, 워드프레스 자체의 기능에도 익숙해야 하고, 비즈니스 전략에도 예리한 센스를 갖추고 있어야 합니다. 이런 지식과 경험을 통해 컨설턴트는 개발 계획을 미리 살펴보고 워드프레스 기반 기업들이 맞닥뜨릴 수 있는 함정을 피하며 견고한 기반 제품들을 사용하는 것에 대해 명쾌한 조언을 제공해야 합니다.”

기술적인 지식과 비즈니스 감각 사이의 균형을 맞추는 것은 좋은 컨설턴트가 되기 위해 필수적인 일이다. 메이슨은 고객들이 자신의 목표에 집중하고 그 목표를 기준으로 비즈니스 전략을 세울 수 있도록 조언한다. 벤치마크를 설정하고 달성 가능한 목표의 벤치마크를 기준으로 지도를 작성한다. 목표와 관계없는 것들은 일단 제쳐둔다. 메이슨은 여러 벤처기업과 함께 했던 경험을 통해 불분명한 방향성 때문에 웹사이트에 필요하지도 않은 기능들이 덕지덕지 붙고 출시는 늦어지질 수 있다는 사실을 발견했다. 이런 실수를 예방하기 위해 컨설턴트가 존재하는 것이다.

워드프레스 경제에서 일하는 것의 가장 좋은 점과 가장 나쁜 점을 꼽아달라고 부탁했다.

가장 좋은 점

“도움을 받을 수 있는 엄청난 양의 자원과 지원, 인력입니다. 아직도 새로운 정보 소스를 개발하고 있으며, 도움을 받을 수 있는 곳은 계속 증가하고 있습니다.”

가장 나쁜 점

“오픈소스라는 점 때문에 사람들이 그 가치를 혼동하는 경우가 있다는 것입니다. 워드프레스는 호스팅 비용만 대면 웹사이트를 빠르게 구축해서 운영할 수 있습니다. 이런 점 때문에 전문가의 조언이나 외주 개발을 할 때 비용 지출을 꺼리는 경향이 있습니다. 큰 문제라고 할 수는 없지만 예를 들면 워드프레스 개발자와 드루팔(Drupal) 개발자 사이에는 연봉의 차이가 있습니다.“

개발 상점

원하기만 하면 뭐든 개발할 수 있다. (이미지 출처 'xray delta one')

워드프레스 제품을 단순히 판매만 하는 기업이 있는 반면, 워드프레스를 이용하여 대규모(혹은 소규모) 웹사이트를 개발하는 개발 상점이 많다. 데이브 코브니(Dave Coveney)는 영국에 기반한 워드프레스 개발 상점인 인터커넥트/IT(Interconnect/IT)의 창업자다. 이 회사는 소프트웨어 기술자문회사로 시작했지만 이후 워드프레스에 대한 수요가 높아지는 것을 발견했다. 인터커넥트/IT가 자신을 단순히 웹디자인 및 개발회사로 마케팅했을 때는 경쟁사가 무척 많았지만 워드프레스에 집중하기 시작하자 많은 잠재 고객들의 관심이 이어졌다.

데이브에게 워드프레스가 단지 블로깅용 플랫폼이 아니라고 설득하는데 문제가 있던 적이 있는지 물었다. 그가 한 말이다.

“우리가 워드프레스로 무엇을 할 수 있는지 알리려고 많은 노력을 하고 많은 수의 테마도 출시했으며 스스로를 증명하기 위해 개발도 많이 했습니다. Telecoms.com이나 더 텔레그래프(The Telegraph) 같은 클라이언트가 접근했을 때 우리는 워드프레스가 얼마나 강력한지가 아니라 워드프레스의 한계가 무엇인지를 중심으로 조언을 해주었습니다. 그것으로 신뢰를 얻을 수 있었지요. 워드프레스는 콘텐츠가 계속해서 생기는 웹사이트에 환상적인 도구이며 간단한 브로슈어 웹사이트에도 매우 좋습니다.”

그렇다고 해서 데이브가 다른 플랫폼으로 옮길 것을 검토하지 않았던 것은 아니다. 드루팔(Drupal)과 같은 다른 CMS도 시도해보았으며 루비온레일즈(Ruby-on-Rails)를 배우는 데도 몇 달이나 시간을 보냈다. 하지만 사용자 교육의 편의성, 성능, 개발 편의성 등의 이유로 언제나 워드프레스로 돌아오곤 했다.

“워드프레스로 돌아오면서 언제나 워드프레스를 두고 바람을 피운 것같은 기분을 느끼곤 했어요. 하지만 워드프레스랑 결혼한 것도 아니고 언제나 선택의 여지를 열어두는 것은 좋은 일입니다.”

우리는 세계적인 경기 침체의 시대에 있다. 하지만 워드프레스는 이런 시기도 잘 견뎌냈다. 진입장벽이 낮고 비전문가인 사용자도 쉽게 사용할 수 있다는 점 때문에 대기업은 물론 중소기업에게도 좋은 선택이 되어왔다. 데이브는 자신이 함께 일했던 많은 대기업과 조직에서 에세닉(Escenic)이라는 CMS 프로그램을 사용했다고 말했다. 에세닉은 상당히 값비싼 프로그램인데, 같은 가격이라면 워드프레스 개발자는 ‘밤하늘의 별도 따다 줄 수 있다’고 한다. 인터커넥/IT(Interconnect/IT)와 같은 개발 상점들은 정교한 웹사이트를 훨씬 적은 예산으로 만들어낼 수 있다. 데이브의 말이다.

“불황일 때는 사람들의 비용을 줄여주는 것은 뭐든 성공합니다. 그래서 불황이 혁신을 만들기도 하죠. 워드프레스 경제는 이에 대한 좋은 예입니다.”

번역

모든 언어를 고려한다. (이미지 출처 'Tico')

글로벌 마켓에서 기업은 여러 언어를 지원하는 웹사이트를 만들어 엄청난 확장을 할 수 있다. 아이캔로컬라이즈(ICanLocalize)는 워드프레스 및 기타 CMS 프로그램에 대한 셀프서비스형 번역 시스템을 제공한다. 이 회사는 워드프레스 사용자가 다중언어 버전의 웹사이트를 만들 수 있도록 하는, WPML이라는 플러그인을 만들기도 한다.

아이캔로컬라이즈를 개발한 사람은 아미르 헬저(Amir Helzer)다. 다른 개발자와 마찬가지로 아이캔로컬라이즈는 개발자의 필요에 의해 시작되었다. 웹용 유틸리티를 판매하는 작은 셰어웨어 사업을 하던 그는 자신의 웹사이트와 프로그램을 번역해서 내놓자 수익이 세 배나 증가하는 것을 목격했다. 하지만 그 과정은 고통스러웠고 그런 고통을 줄이고 사람들이 즐기며 사용할 수 있는 무엇을 만들어보기로 했다. 아이캔로컬라이즈는 한 사람이 일하는 회사로 출발하여 5명으로 확장했고 현재도 계속 성장하고 있다. 이제 아이캔로컬라이즈는 iOS 개발자들에게 추천되는 서비스이며, 이베이(eBay)와 같은 대형 클라이언트도 보유하고 있다.

아이캔로컬라이즈는 셀프서비스 번역을 제공하지만, 워드프레스 사용자는 WPML 플러그인을 사용하여 워드프레스 콘텐츠를 바로 번역자에게 보낼 수 있는 추가적인 이점도 누릴 수 있다.

“모든 것이 셀프서비스 모드에서 이뤄집니다. 공인된 번역자와 고객을 연결하는 플랫폼인 셈이죠. 우리의 철학은 시스템이 모든 기술적인 문제를 해결해주어서 번역자는 번역만 하고 클라이언트는 번역물을 내보내고 자신들이 필요한 것을 받기만 하면 되도록 한다는 것입니다.”

아미르에게 아이캔로컬라이즈 매출의 30퍼센트 정도를 차지하는 워드프레스상에서의 작업에 대해 물었다.

“워드프레스 사용자가 정확히 우리의 타깃 고객입니다. 이들은 사업 규모가 작고 가격에 매우 민감하지요. 하지만 번역 작업은 높은 품질이 요구되기 때문에 아이캔로컬라이즈가 제 역할을 할 수 있습니다.

제 생각에 우리가 워드프레스에 관여하는 방식은 일방통행이 아닙니다. 우리는 이렇게 많은 노출로부터 오는 엄청난 압박을 받고 있지만 동시에 워드프레스가 완전히 다중언어 CMS가 될 수 있도록 돕기도 합니다.”

시오반 매퀀 Siobhan McKeown
@SiobhanPMcKeown
카피라이트 서비스 제공회사 운영 @wordsforwp
워즈포WP http://wordsforwp.com
블로그 http://siobhanmckeown.com/

시오반 매퀀(Siobhan McKeown)은 글쓰기와 워드프레스를 좋아하며 워즈포WP(Words for WP)라는 카피라이트 서비스 제공회사를 운영하고 있다. 개인 블로그, 트위터 혹은 구글플러스(Google+)에서 그녀를 만날 수 있다.

번역 : 백선기, 교정/교열 : 이현숙
이 글을 읽고 공감이 가시면 ‘그냥 퍼나르지 마시고’ 밑에 있는 트위터나 페이스북 ‘좋아요’ 버튼을 한번 클릭해주세요. 저희가 번역자에게 정식으로 부탁한 글입니다.

※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주세요.

※ 웹액츄얼리 북스팀에서 웹디자인 관련 영문번역이나 윤문을 해주실 분을 찾습니다. 관심있으신 분은 메일 보내주세요. books@webactually.com

[편집자주]

워드프레스 제대로파기크리스 코이어 CHRIS COYIER 제프 스타 JEFF STARR 저국내 최초 워드프레스 활용 가이드 출간!

책 구매하기책 미리보기책 상세설명