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

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

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

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

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

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

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

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

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

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

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

웹액츄얼리 북스팀

이단 마콧 Ethan Marcotte

반응형 웹디자인

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

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

이 책의 저자인 댄 시더홈Dan Cederholm은 이미 국내에서도 HTML, CSS, 웹 접근성과 관련된 책을 여러 권 발간해 웹디자이너들 사이에 잘 알려져 있습니다. 그의 책을 통해 알 수 있듯이 그는 복잡한 개념을 쉽고 간단하게 푸는 데 남다른 재주가 있습니다. 댄 시더홈은 2010년 영국 런던에서 열린 ‘Future Of Web Design Conference’에서 이 책에서도 다룬 ‘사용자의 감성을 이끌어내는 감성적 경험 계층experience layer부분의 CSS3 적용’이라는 주제로 프레젠테이션을 진행해 강한 인상을 남겼습니다.

당시 글로벌 웹디자인 업계에서는 막 HTML5와 CSS3에 관심을 갖기 시작했기 때문에 CSS3의 효율적인 사용 범위에 대해서는 생각조차 할 수 없었습니다. 그저 어떤 스펙들이 있고, 어떻게 구현할 수 있을까라는 막연한 기대와 실험정신이 컸습니다. 당시 프레젠테이션의 감동과 노하우를 그대로 책으로 만날 수 있다는 것은 큰 행운입니다.

댄 시더홈은 CSS3를 통해 웹디자인이 얼마나 세련되고 아름다워질 수 있는지에 대해 명확한 비전과 희망을 제시하고 있습니다. 그는 인문학적 철학과 CSS3의 폭넓은 활용으로 웹디자인의 정수를 보여주는 디자이너입니다.

CSS3의 상세한 스펙에 대해 나열해놓은 책은 무수히 많습니다. 앞으로 영역별로 더 세분화된 책도 나올 것입니다. 하지만 여러분이 CSS3의 적절한 사용법과 그 범위에 대해 한번이라도 고민한 적이 있다면 이 책에서 답을 찾으실 수 있을 것입니다.

이 책은 어 북 어파트A Book Apart에서 웹디자인 작업에 필요한 핵심 분야만을 뽑아 만든 시리즈 중 두 번째 책입니다. 어 북 어파트는 웹 표준 기술의 세계적인 선구자이자 글로벌 웹디자인계의 진정한 그루Guru인 제프리 젤드먼Jeffrey Zeldman 이 설립했습니다. 그는 글로벌 웹디자인계에서 실력 있고 전도 유망한 각 분야 최고 전문가들에게 집필을 의뢰해 현재 여덟 권의 책을 냈습니다.

웹액츄얼리는 2010년 어 북 어파트에서 이 시리즈가 나온다고 했을 때 ‘앞으로 웹디자인 산업에 제2의 부흥기가 오겠구나!’라고 생각했습니다. 우리는 이 시리즈의 국내 판권을 얻기 위해 전력을 쏟았고, 마침내 어 북 어파트와 파트너십을 맺어 이 시리즈를 국내에 소개할 수 있는 기회를 얻었습니다. 앞으로 콘텐츠 전략요소, 반응형 웹디자인, 감성 디자인, 모바일 퍼스트 등 이 시리즈의 주옥같은 책들을 모두 출간할 예정입니다.

이 책들에는 아름답고 진정한 가치가 있는 웹사이트를 만드는 데 꼭 필요한 보물 같은 내용이 담겨 있습니다. 이 자리를 빌려 책을 낼 수 있도록 허락해준 편집자 맨디 브라운Mandy Brown과 제프리 젤드먼에게 깊은 감사의 뜻을 전합니다.

웹액츄얼리는 웹디자인과 관련하여 도서 출판만 하는 것은 아닙니다. 여러분과 함께 ‘아름다운 웹사이트’를 만들기 위해 부단히 노력하는 웹디자인 에이전시이기도 합니다. 어 북 어파트 시리즈를 비롯해 그 외 웹액츄얼리가 출판하는 모든 도서에 수록된 내용을 직접 읽고 연구하고 실험하며 웹사이트를 제작하고 있습니다. 우리도 여러분처럼 훌륭한 실무 전문가가 되기 위해 부단히 노력하고 있습니다. 웹2.0의 철학 중 하나인 끊임없는 실험정신Perpetual Beta으로 말입니다.

독자 여러분의 많은 관심과 격려 바랍니다.

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

월간 웹의 ‘웹디자이너를 위한 CSS3’ 리뷰

단순히 속성을 나열해서 보여주지 않고, 저자의 CSS3에 대한 깊은 노하우를 담았다. 그렇다고 어렵거나 두껍지는 않다. 가볍게 들고 다니면서 읽을 수 있고 실무에 바로 적용할 수 있게끔 예제를 제시해 재미있고 쉽게 CSS3 속성을 이해할 수 있다. (중략) 저자 댄 시더홈은 유연한 프런트 엔드 개발자이자 디자이너, 코더다. 그는 CSS3를 쉽고 재미있게 설명하고 실제로 적용해볼 수 있도록 구성했다. 저자의 유머에 빠지다 보면 책을 읽으며 웃음이 터지는 경우가 몇 번 있을 것이다.

월간 웹에서 전체 리뷰를 확인하실 수 있습니다.

운돌이님의 ‘웹디자이너를 위한 CSS3’ 리뷰

차근차근 읽어본 결과 역시 댄 시더홈이다! 라는 말이 나왔다. 이 책은 현재 사용할 수 있는 css3 기능들에 대해서 설명하고 있다. 그것도 아주 쉽고 재미있게 말이다. 이 책은 화장실에서 볼일을 보면서 보아도 될 정도로 쉽게 설명되어 있고 직접 데스크탑 또는 랩탑을 앞에 두고 직접 코딩하며 보지 않아도 된다. 그렇기에 이 책은 강력 추천하고 싶은 책이다!

운돌이님의 네이버 블로그에서 전체 리뷰를 확인하실 수 있습니다.

몇일 전 해피 코그(Happy Cog) 웹사이트에 올라온 블로그 하나를 번역해 올립니다.
크리스 캐시달러(Chris Cashdollar)가 쓴 ‘브랜드 에이전시 여러분께, (Dear Branding Agencies,)’ 라는 글입니다. 이 내용이 열심히 공부하고 있는 웹액츄얼리팀에게는 시기상조일 수도 있지만, 읽어보면 전세계 웹디자인계의 환경과 상황이 얼마나 비슷한지를 알 수 있습니다. 해피 코그의 허락을 받고 번역해서 올립니다.
- Thank you! Jeffrey and Happy Cog team!
[편집자주]

브랜드 에이전시 여러분께,

여러분께서는 ‘큰 그림’을 구축하셨습니다. 고객들은 여러분이 세운 새로운 브랜딩 방향을 마음에 들어합니다. 여러분이 보여준 미래에 대해 감을 잡았을 수도 있습니다. 이제 광고주를 위해서 본격적으로 일을 준비한 여러분께서는 실제로 신상 브랜드에 생명을 불어넣는 데 사용되는 수많은 다양한 프로젝트를 가지고 계실 겁니다.

온갖 모양과 크기의 아이덴티티가 살아있는 패키지와 브로셔, 연간보고서, 전단광고, 래핑버스(대형버스 외관을 이미지로 래핑한 광고 매체, 편집자 주), 그리고 길거리 광고판… 아 그렇죠. 웹사이트도 있네요.

브랜드 에이전시 여러분! 이제 저희와 첫인사를 나눠볼까요?

안녕하세요. 만나서 정말 반갑습니다! 우리는 웹디자인 에이전시입니다. 고객들은 브랜딩 방향을 웹으로 잡기 위해 우리를 고용합니다. 우리와 여러분은 우리의 고객을 가운데쯤에 두고서 일을 하고 있다고 말할 수 있겠네요. 그렇습니다. 우리는 제안 요청서에 있는 웹사이트라는 부분 만큼은 여러분이 전문가가 아니라는 것을 알고 있습니다. 그렇다고 해서 우리와 여러분이 고객을 염두에 두고 서로 협력할 수 없다는 뜻이 아닙니다. 우리는 여러분이 우리가 여기 있는 이유를 알아 주었으면 합니다. 그리고 우리가 진짜로 잘 할 수 있는 것이 뭔지도 궁금해하시길 바랍니다. 잘 모르시겠다고요? 계속 읽어보세요.

단순히 새로운 웹사이트를 런칭하는 것을 넘어서 우리 고객이 성공할 수 있도록 하는 방법에는 어떤 것이 있을까요?

온라인에서의 경험이 로고와 사진으로만 이루어지는 것은 아닙니다. 온라인 경험이란 한 조직에 대해 살아 숨쉬듯 생생하게 내보이는 표현입니다. 사이트를 유지하는 것은 실제 사람들입니다. 웹에서의 브랜드 경험이 생생하고 적절하게 작동하도록 하는 것도 실제 사람들입니다. 여러 작가가 함께 새로운 콘텐츠에 생기를 불어넣는 일도 합니다.

사내 그래픽 디자이너들은 마케팅 팀과 손잡고 사이트 상에서의 새로운 제안과 거래, 홍보활동을 적시에 처리합니다. 이동이 이루어지는 파트도 많습니다. 그리고 각각의 파트는 내부의 승인 절차가 있어야 합니다. 우리는 이것을 잘 알기에 이를 위해 계획을 세웁니다. 우리는 고객의 말을 경청하고 그들의 내부 절차를 숙지하여 고객을 파악합니다. 그들이 계속해서 유지할 수 있는 사이트를 만들기 위해서죠.

새 웹사이트의 유지 보수를 위한 우리의 조언은 우리 고객이 유지 보수를 위해 접근할 수 있는 자원에 부합해야 합니다. 런칭 이후에 고객이 사이트를 유지 보수할 수 없다면 그 컨셉은 시작부터 잘못된 것입니다.

고객의 사진 예산이 빠듯한가요? 혹은 전문 사진작가 인적 자원이 부족한가요?

항상 최고 수준의 사진을 쓸 수 있으려면 현금이 궤짝으로 필요할 겁니다. 모든 조직이 이런 궤짝을 보유하고 있지는 않습니다. 필요한 일이 생기면 우리는 마이크로스톡(microstock)에서 어떻게든 구하기 위해 설득력 있는 방법을 모색합니다. 혹은 사진에 의존하는 디자인을 완전히 배제할 수 있는 방법을 모색합니다. 고객사 내의 포토샵 기술을 쓰는 건 어떨까요? 일년이 지나고 주요 마케팅 메시지가 바뀌고 동시에 많은 새로운 상황이 벌어졌을 때, 우리 디자이너가 런칭 당시 선택한 나름 완벽한 이미지가 없더라도 사이트가 여전히 건재할 수 있을까요? 사이트의 그래픽 디자인을 추진하는 ‘시스템’을 적절하게 계획해서 갖춰놓으면 내부 팀의 스트레스를 부분적으로라도 덜 수 있어야 할 것입니다.

우리 고객에게 디자인 의도에 대해 교육할 기회를 찾는 것은 실제 교육을 집행하는 것만큼이나 중요합니다. 필요하다면 우리는 포토샵 자료 원본이나 사진 사용에 관한 가이드라인을 제공합니다. 프로젝트에 대한 우리의 관여가 끝난 한참 뒤에도 고객이 더욱 현명한 선택을 할 수 있도록 돕기 위해서죠.

온라인에서 사용할 서체를 고르는 일은 어떻습니까?

최근 들어 웹폰트 사용이 폭발적으로 증가했지만 질적인 면에서는 여전히 간극이 있습니다. 해당 폰트를 웹에서 쓸 수 있다고 해서 충분히 준비되었다거나 테스트를 거쳤음을 의미하는 것은 아닙니다.

무슨 말이냐고요? 웹파트너와 최근에 수행한 한 프로젝트에서 우리는 고객사에게 주의할 것을 당부 드린 적이 있습니다. 담당 브랜딩 업체가 서체 선정 과정을 다시 논의해야 한다고 조언한 것이죠. 프린트와 아이덴티티 작업을 생각했을 때는 이 특정 서체에는 전혀 문제가 없었습니다. 그런데 해당 서체에는 폰트 글꼴(@font-face) 라이센싱 협약이 따라오더라는 것입니다. 실제로 해당 폰트를 적용하게 되면 이 글꼴이 사실 출시될 단계가 아니라는 것이 명백하게 드러납니다. 브라우저로 옮겼을 때 엑스하이트(x-height)는 훨씬 작아서 철자를 알아차리기가 힘듭니다.

윈도우는 또 어떻고요. 인터넷 익스플로러(IE)에서 해당 폰트는 정말이지 터무니없이 못생겼거든요. 팁을 드립니다: ‘폰트 힌팅(font hinting)’이 뭔지 아직 모르신다면 자주 찾는 폰트회사로부터 좀 더 정보를 받으시길 바랍니다. 그리고 그 사람들은 웹을 위한 글꼴을 어떻게 준비하고 있는지 물어보세요. 적어도 서체 구매 전에 여러 번의 테스트를 거치셔야 합니다. 저희는 여러분께서 서체 선정을 면밀히 검토하실 때 기꺼이 도와드리겠습니다.

제대로 굴러가는 것이 아름다운 것입니다.

‘규칙을 깨기 위해서는 먼저 규칙을 잘 알아야 한다.’는 말은 아주 적절히 표현된 그래픽 디자인계의 격언입니다. 우리는 이것이 브랜드에도 적용된다고 생각합니다.

2010년 우리가 미국 홀로코스트 기념 박물관(United States Holocaust Memorial Museum; USHMM) 사이트의 디자인 개편작업에 참여했을 때의 경험을 통해 직접 배운 것입니다.

사이트의 그래픽 디자인을 시작함에 앞서 브랜드의 수석 디자이너인 펜타그램(Pentagram)의 폴라 셔(Paula Scher)씨는 USHMM과 해피 코그(Happy Cog) 디자이너들을 위한 워크샵을 열었습니다. 일을 제대로 해내겠다는 열망으로 가득 찬 우리는 브랜드를 어떻게 하면 최고로 ‘웹화(web-ize)’ 할 수 있을지 배우기를 갈망하고 있었습니다.

폴라 셔의 대답은 놀라웠습니다. 의도는 존중하지만 독단적인 자신만의 견해는 고집하지 말라는 것이었죠. 펜타그램의 가이드라인을 절대 지켜야만 한다고 말하는 대신 그녀는 우리에게 진화하는 브랜드의 요구따라 적합한 결정을 내리라고 말하는 것이었습니다. 우리 디자이너들 (그러니까 매일매일 브랜드와 함께 살아가야만 하는 사람들)이 진짜 전문가라는 의미입니다. 소유권은 그것을 처음 만든 사람에게만 속한 것이 아닙니다. ‘브랜드를 죽이느냐 살리느냐’는 브랜드에 있어 실제적인 경험이 가장 많은 우리 디자이너들에 의해 결정됩니다. 그들이 최고의 결정을 내릴 수 있도록 자율권을 주어야 합니다.

최고의 영원한 친구

솔직히 말씀 드리겠습니다. 우리는 우리가 이바지할 수 있는 많은 기회가 있다고 생각하고 있습니다. 우리는 여러분의 작업을 혼란스럽게 하려고 있는 것이 아닙니다. 우리는 브랜드 진화에 있어 ‘어떻게’와 ‘왜’라는 측면에 대해 배우고 싶습니다.

우리와 공유해주세요. 우리에게 여러분이 연구하고 학습한 식견을 전해 주세요. 우리를 동등한 지위의 파트너로 대해 주세요. 우리도 여러분을 똑같이 존중해 드릴 것입니다. 신뢰라는 것이 얻기는 힘들지만 잃기는 쉽습니다. 그러니 우리 서로 알아가도록 합시다.

결론적으로, 우리의 가치관에 대해 다음과 같이 말할 수 있습니다. 우리는 고객의 브랜드에 생명을 불어넣어 웹에 적절하게 만드는 일을 합니다. 그러니 불안해하지 마세요. 좋은 인연이 시작될 것입니다.

그럼 이만.
(Hugs and Pixels)

크리스 캐시달러Chris Cashdollar
@ccashdollar
크리에이티브 디렉터 @happycog

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

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

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

[편집자주]

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

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

친애하는 웹디자인 커뮤니티여, 그 열정은 어디로 갔나요

웹디자인분야 전문가로서 오늘날 우리는 흥미로운 시대에 살고 있다. 웹디자인 산업은 하루가 다르게 빠른 속도로 혁신하는 곳이기 때문에 놀라운 기회들이 계속 생겨나고 있다. 그래서 디자인과 코딩작업은 전보다 더 광범위해지고 있다. 디자인 사용성은 더 확대되었고 코드는 보다 확장되었으며 레이아웃은 즉각적으로 반응하고 있다. 사실 몇 십년 전과 비교해보면 디자인 작업과 기술이 얼마나 빠르게 성장했는지 그리고 얼마나 진보했는지 잘 알 수 있다

그러나 이 분야의 성장이 완성단계에 접어든 것은 절대로 아니다. 수많은 기술적 진보가 이뤄지기는 했지만 다른 부분의 발전들이 이를 따라오지 못한 것이다. 다른 부분의 발전들이라 할때 크로스 브라우저를 지원하는 표준 문제나 우리가 사용하는 도구(tools)의 기술적 하향과 관련된 것을 뜻하지 않는다. 아니다. 문제는 보다 본질적인 것으로 바로 우리 디자인 커뮤니티 안에서 발생하였다. 즉 지금의 디자인 커뮤니티는 그 가능성과 다양성이 너무도 풍부해서 전문성을 겸비한 성숙함을 보장하기가 점점 어려워지고 있다는 점이다.

사실 우리 내에서 더 깊게 논의하고 짚어봐야 할 이슈들이 존재하지만 아직은 적절한 논의가 이뤄지지 않고 있다. 이 글은 최근에 커뮤니티를 관찰한 나의 개인적 경험을 바탕으로 쓰여졌다. 그리고 커뮤니티의 건강한 발전을 위해 필요한 대화와 짚어봐야 할 문제들에 대한 내 개인적 의견이기도 하다

커뮤니티 정신은 어디로 사라졌는가?

나는 처음부터 웹디자인 커뮤니티의 발전 과정을 경험할 수 있어 매우 운이 좋았다. 나는 어디를 가나 번창하며 모두를 자극하는 그 열정적인 감각에 사로잡혔다. 이 강력하고 진심 어린 열정들은 많은 사이트와 잡지에 나타났었고 경력자와 비경력자 디자이너들의 자극으로 발전되고 있었다. 초기 웹디자인 커뮤니티는 비교적 작았기 때문에 모두가 친절하고 서로 도와주는 분위기였다. 긴 답변이 필요한 질문에도 성의 있고 세세한 답변을 해주는 친절함을 볼 수 있었다.

나는 철저하게 현 기술을 분석하여 개선/대안을 제안하는 수많은 의미 있는 관련 코멘트들과 이에 대한 심도 있는 디자이너들의 토론을 기억한다. 경험 많은 출판 및 디지털 디자이너들이 많은 글을 썼고 경험이 부족한 디자이너들에게 새로운 기술을 가르쳤다. 여러 사이트에서 활발한 토론이 있었고 디자이너들이 서로 연결되며 전문 커뮤니티 관계를 만들어 갔었다.

지금도 이 토론들은 계속되고 있다. 그리고 많은 디자이너들과 개발자들이 이러한 토론을 격려해주고 있다. 폴 보아그(Paul Boag), 댄 몰(Dan Mall), 제프리 젤드먼(Jeffrey Zeldman), 프란시스코 인카우스테(Francisco Inchauste), 크리스 코이어(Chris Coyier), 사이먼 콜리스(Simon Collison), 앤디 클라크(Andy Clarke), 폴 아이리시(Paul Irish), 크리스 하일만(Chris Heilmann), 제프리 웨이(Jeffrey Way), 트렌트 월튼(Trent Walton) 그리고 많은 디자이너와 개발자들이 노력과 신념을 가지고 굉장한 일들을 해내고 있다. 이들 말고도 수천 명의 재능 있는 친구들이 커뮤니티를 위해 많은 기사를 쓰고 있으며 모두가 이용할 수 있는 훌륭한 새로운 툴(tools)과 리소스(resources)를 공개하고 있다. 정말 대단한 일이다. 이러한 기여가 커뮤니티를 더욱 발전하게 만들 수 있기 때문이다.

그러나 요즘 들어 미처 간과할 수 없는 일들이 생기고 있다. 그 동안 커뮤니티에 경험과 지식을 적극적으로 기여했던 웹디자인 전문가 숫자가 커뮤니티 성장 만큼 늘지 않고 있는 것이다. 커뮤니티 전체에 걸친 의미 있는 토론을 자주 찾기가 어렵다. (토론은 강력한 메아리로 우리 작업을 개선, 수정, 확대하여 보다 전문가로 만들어 주는데 말이다.)

최근의 해쉬뱅(hashbang) 논의는 우리 커뮤니티에 꼭 필요했던 토론이었다

요즘 들어 나는 자주 우리가 가졌던 놀랍고 영감 있는 그런 열정들이 사라졌음을 느낀다. 결국 몇몇 디자이너들만이 비공개적으로 남아있는 그룹과 토론하고 있고 대중에게는 모습이 감춰져 있다.

비극적인건 우리는 분명 잘 연결된 전문 커뮤니티임에도 불구하고 점점 더 그렇게 되지 못하는 것이다. 수년간 우리가 개발한 프로세스에 너무 익숙해져서도 아니고 디자인과 코딩기술 개선에 관심이 없어서도 아니다. 컨퍼런스나 온라인에서 독자나 동료들과 대화하다 보면 이러한 발전에 대해 우리는 서로 전적으로 다른 생각을 하고 있다.

커뮤니티에 기여할 시간 찾기

최근 웹에서는 많은 일들이 일어나고 있기 때문에 대다수의 친구들이 전문 토론에 활발히 참여할 시간을 갖는 건 어려워 보인다. 나도 다른 사람과 마찬가지로 이런 일에 책임을 느낀다. 왜냐하면 나도 하루에 5-7개 이상의 디자인을 보는 것에(코멘트를 달지 않음에도) 상당히 어려움을 겪고 있기 때문이다. 나 자신도 더 반응하고 참여할 수 있게 노력 중이다. 때로는 이런 노력이 잘 되기도 하고 안되기도 하지만 확고하게 이런 변화에 참여하려 하고 있고 당신도 나처럼 시도 할 수 있을 것이다.

시간이 없다는 것이 온라인 행동을 변화시킨 가장 중요한 원인 중 하나라 생각한다. 이메일은 점점 더 짧아지고 블로그 글과 코멘트 또한 짧아지고 있다. 우리의 관심은 모두를 도취시키기엔 너무 어려웠고 소극적이고 덜 비판적이게 되었다. 요즘 우리들은 너무도 쉽게 타인의 아이디어, 디자인, 컨셉을 정확성과 타당성에 대한 의문 없이 받아들이거나 사용한다. 논의하는 대신 바로 수긍해버리고 비판하기보다 간단히 받아들이거나 무시해버린다. 이러한 이유로 커뮤니티에서의 많은 논의들이 일정 수준의 관심을 얻지 못하고 있다

쿼라(Quora)와 스택익스체인지(StackExchange)에서 이루어지는 웹디자인에 관한 논의들은 이미 우리가 아이디어를 교환하고 질문에 답하고 가치 있는 토론을 하고 있음을 보여주는 좋은 사례다.

다만 한가지 걱정되는 부분은 경험이 적은 사람들의 활동이 기하급수적으로 늘어나고 있는 점이다. 이 때문에 커뮤니티가 올바른 방향으로 가지 못하는 건 아닌가 우려된다. 진정한 리더라 할 수 있는 전문적 지식을 보유한 디자이너와 코더들은 바쁘다. 바쁜 업무로 인해 커뮤니티에 더 이상 기여하고 있지 않으며 시간을 들여 커뮤니티에 기여하는 것이 가치 있는 일이라 생각치 않는다. 나는 이런 태도가 변하기를 바란다. 커뮤니티에는 보다 기여하고 가르치며 도와줄 수 있는 전문가가 필요하다. 그렇지 못할 경우, 결국 대다수는 독학으로 학습하게 되는데 그렇게 되면 우리는 타인의 도움 없이 과연 어디에 있게 될까?

커뮤니티에는 의미 있고 기꺼이 서로 돕는 토론이 필요하다. 시간을 내는 것은 어렵다. 그렇기에 글쓰기와 코멘트에 무조건 열심히 참여 할 필요는 없다. 그저 가끔씩 시간을 내서 커뮤니티에 도움 될만한 간단한 코멘트나 답변, 짧은 블로그 글만으로도 아이디어를 유발하는 토론을 불러 일으킬 수 있다. 그리고 이는 커뮤니티에 큰 도움이 될 것이다. 웹의 장인정신을 가진 우리들은 디자인, 코딩, 글쓰기 등에 대하여 서로의 의견을 나누고 토론하는 걸 사랑한다. 깊고 심오한 글 쓰기 시간이 없을지라도 아이디어를 제안하거나 친구들로 하여금 토론에 참여하게 격려할 시간은 충분히 있다. 이런 식으로 하루에 몇 분씩만 소비해도 우리는 점점 더 많은 지식을 커뮤니티에 축적할 수 있을 것이다

최근 프란시스코 인카우스테(Francisco Inchauste)는 이에 대해 다음과 같이 간략히 요약한 바 있다.

우리 모두는 서로 나눌 수 있는 개인적 관점과 경험을 가지고 있다. 이러한 것들을 서로 나눌 수 없게 된다면 우리는 더 이상 성장할 수 없을 것이다. 커뮤니티는 서로 부족한 사람들이 만들어 가는 것이기 때문에 더 개선하고 나아지려면 서로를 더욱 더 교육하고 인도해줘야 한다.

귀중하고 의미있는 리소스(resources)를 만들어야 한다

아마 가장 쉽게 디자인 토론에 참여하는 방법은 해시태그(#design)가 있는 트윗을 관찰하거나 답변(reply)하는 것이다. 몇 주 전까지만 해도 나는 내 트윗덱(tweetdeck)에 #design 칼럼을 따로 만들었다. 하지만 며칠 안돼어 흥미로운 몇 개의 트윗을 볼 수 있었지만 더 자주는 부정확한 튜토리얼, 프리비, 웹사이트 홍보 트윗을 보았다.

오해하지 말라. 나는 홍보 글을 반대하는 것은 아니다. 단지 재능 있고 다재 다능한 웹의 장인들(craftsmen of the Web)이 트위터 같이 효과적인 도구의 유용함을 제한하고 있는 걸 이해할 수 없을 뿐이다. 왜 심도 있는 논의를 위해 트위터를 사용하지 않는 걸까? 현재 jQuery, CSS3, HTML5 같은 엄청난 기술이 준 기회와 겉만 번지르한 디자인 때문에 우리의 판단이 조금 흐려진 것은 아닐까? 우리는 현재 튜토리얼과 디자인 비쥬얼간의 상호작용을 향상시키려고만 하지 정작 우리 일에 기초가 되는 디자인 원칙, 디자인 과정의 질, 창작물에 대한 진정성은 잃어버리고 있다. 우리는 우리가 찾아낸 솔루션, 우리가 내린 결정, 우리가 작업하는 방법에 대한 이야기와 글들이 모두에게 이익이 되도록 할 수 있는데 말이다.

유용한 리소스를 담고 있는 UX디자인 패턴들과 jQuery 슬라이드쇼, 소셜 미디어 아이콘을 찾고 경험 많은 디자이너들이 쓴 세밀한 연구사례들과 비교해 보라. 가치 있고 유용한 리소스들은 점점 찾기 어려워진다. 불행한 것은 다수의 리소스들이 가진 것에 비해 별다른 주목을 받지 못하고 있다.

우리는 시사하는 바가 많고 중요한 리소스를 만들어내는 크리에이터를 지지하고 조직하여 그들이 그 리소스를 유지하고 지원할 수 있게 도와줘야 한다. 왜냐하면 그들은 문제들을 찾아내어 해결책을 마련하고 또 우리 업의 성장을 뒷받침하는 사람들이기 때문이다. 그들은 현 상황을 비난하길 두려워하지 않으며 실험하기에 힘쓰고 나누고 혁신하는 사람들이다. 이런 것은 우리 분야의 성장을 위해 정말로 필요한 요소다.

HTML5 보일러플레이트는 서로의 생각과 견해들을 나누어 우리에게 유용한 것을 만들어 준 몇몇 웹디자이너들의 협동심을 볼 수 있는 멋진 예이다. 불행히도 Github에 올라온 많은 유용한 프로젝트들은 커뮤니티의 관심을 받지 못하고 있다.

우리는 커뮤니케이션 채널을 현명하게 이용함으로써 동료나 친구들이 토론에 참여할 수 있게 도와줄 수 있다. 그럼으로써 서로의 의견을 나눌 수 있고 시간과 노력을 아끼지 않는 사람들에 대한 글이 널리 퍼져나가 더 많은 사람들이 토론에 참여하고 보다 많은 유용한 자료와 귀중한 리소스를 만들 수 있다.

나는 이런 방법으로 통해 강력한 아이디어와 전문 지식을 교환하고 이것이 놀라운 가능성을 일으킬 수 있다고 확신한다

Fronteers, Brooklyn Beta와 New Adventures in Web Design 같은 컨퍼런스의 출현은 강력한 커뮤니티가 갖는 혜택을 잘 보여준다. 이런 컨퍼런스들은 우리에게 영감을 주고 유익하며 더 앞선 생각과 도전을 할 수 있게 도와준다. 컨퍼런스에 참석해 강연을 듣던 중 내 옆 동료가 내게 속삭인 말을 평생 잊지 못할 것이다. “이 강연이 디자인에 대한 내 관점을 영원히 바꿔버릴 것 같아요.” 이런 경험이 온라인 토론에서도 있을 수 있다면 정말 좋을 것이다.

커뮤니티 전체 토론과 설문

수많은 콘텐츠로 인해 우리의 초점은 수십개의 리소스와 토론으로 나누어져 버렸다. 방대한 커뮤니티 전체를 이끌 수 있는 토론이 가능한지도 알기 어렵다. 블로그 방문자도 대개 RSS구독자, 우연한 방문자, 지인으로 한정된다. 인맥을 통해 어느 정도 알릴 수 있지만 대다수 커뮤니티까지로 도달되지 못하며 특히 블로그 규모가 작거나 알려지지 않은 경우는 더욱 그렇다.

우리에게는 같은 생각을 하는 디자이너와 개발자를 만나게 해주는 메커니즘 같은 것이 필요하다. 트위터의 해시태그는 우리가 이미 서로의 아이디어와 생각을 나누고 있음을 보여주는 좋은 사례지만 더 개선되게 만들 수 있다.

만약 우리가 일관된 표준을 가진다면 어떨까? 우리는 집단으로 공동 태그를 만들어 커뮤니티가 사용하게 하거나 개발하게 하여 해시태그를 더 강화할 수 있다. 예를 들면 #design_type, #design_layout, #design_js 등이다. 커뮤티니 전체를 대상으로 하는 설문(#desing_poll)조사는 작지만 영향력 있는 팔로우쉽을 가진 사용자들에게 리트윗되고 쉽게 인지될 수 있게 하여 우리의 의견을 확산시키고 활발한 커뮤니티 참여를 강화시켜줄 수 있다. 우리는 이러한 해시태그들을 찾아주고 가장 인기 있는 토론 주제를 보여주며 스팸과 악의적 행동을 걸러내는 웹사이트를 만들 수도 있다.

이같은 메커니즘은 훌륭한 디자인 리소스, 통찰력 있는 글, 유용한 리소스를 만들어내는 열정 있는 디자이너 및 크리에이터를 지원하는데 유용할 것이다. 또한 이러한 시도들이 정교하게 이루어질 때 커뮤니티 전체 토론에 많은 사람들이 참여하고 연결되기 쉬워질 것이다. 또한 커뮤니티 토론이 외부로 멀리 퍼져나가 타 분야 전문가들이 다른 관점에서 본 의견도 들을 수 있게 할 수 있을 것이다.

자, 그러면 우리는 정확히 무엇을 토론해야 하는가?

웹디자이너로서 우리들은 벌써 먼 길을 걸어왔다. 우리 산업은 점점 더 모양을 갖추었고 더 강한 산업으로 발전했으며 많은 디자인 기술들을 만들어왔다. 여기까지 오면서 심리학, 마케팅, 광고 문안 작성이라든지 하는 다른 직종의 일처리 능력들을 배워왔다. 생각해보면 이것도 정말 엄청난 업적을 달성한 것이다. 우리는 우리가 서로 공헌하고 만들며 살아온 지난 몇 년을 자랑스럽게 생각 할 이유가 충분히 있다. 하지만 다른 산업분야처럼 우리는 계속적으로 우리의 업무와 디자인 프로세스를 개선하고 혁신해야 한다. 사실 우리가 다시 한번 고려하고 넓게 생각해봐야 할 몇 가지가 있다. 먼저 쉽게 알 수 없는 것들부터 살펴보자.

전문용어

앞서 언급처럼 웹디자인에는 수많은 다른 분야와 전문지식이 관련되어 있어 토론에 사용되는 단어의 의미를 모든 사람이 제대로 이해하고 있는지 확신하기가 점점 어려워지고 있다.

디자이너와 개발자 그리고 이해관계자들이 서로 오해를 부르는 일들이 우리 커뮤니티에서 일어날 수 있다. 왜냐하면 우리가 쓰고 있는 전문 용어들이 몇 년에 걸쳐 빠르게 바뀌어 왔기 때문이다. 초기에는 전문 용어들이 빠르게 늘어갔고 시간이 흐를수록 축약한 말들이 말썽을 일으키자 이것들 또한 빠르게 바뀌었다. 우리는 출판 디자인 단어를 따서 웹디자인에 적용하였고, 새로운 개념과 방법을 설명하기 위해 새로운 단어를 만들어 냈다. 또 오늘날 시대에 뒤쳐진 단어도 받아들였다. (플로피 디스크 아이콘이 아직도 저장 아이콘으로 사용되고 있음을 생각해보라)

unsuck IT 는 업계에 쓰이는 특수 용어들을 풀어 설명해주고 있다. 우리 디자인 커뮤니티에는 이런 사이트가 필요 없기를 바라본다.

예를 들어 디자인 용어로 ‘responsive’, ‘adaptive’ 또는 ‘flexible’ 이 쓰이고 있는데, 우리가 이 단어를 사용할 때 정확히 어떤 의미로 사용하는 걸까? “design”이라는 단어에 대해 디자이너들은 시각적 디자인? 하나의 개념으로서의 디자인? UX 디자인? 이라고 각각 다르게 생각하고 있을지도 모른다. 그나저나 UX 디자인은 정확히 무슨 뜻일까? 동일한 문제가 ‘HTML5′, ‘page’, ‘fold’, ‘navigation’ 같은 용어를 토론할 때도 발생한다. 만일 다른 전문 산업에서 예를 들어 의료산업의 경우, 기술 용어로서 공통 단어를 사용하지 않는다면 어떤 파괴적인 결과가 나올지 상상해보라.nsuck IT 는 업계에 쓰이는 특수 용어들을 풀어 설명해주고 있다. 우리 디자인 커뮤니티에는 이런 사이트가 필요 없기를 바라본다.

지난달 웹디자인의 새로운 모험이란 컨퍼러스에서 댄 루빈(Dan Rubin)은 이러한 문제들에 대해 공통적인 문법과 용어의 필요성을 언급하였다. 그는 지금 쓰고 있는 용어들이 너무 신속하게 결정되었다면서 우리가 조금만 더 신중히 생각하고 계획하여 혼란을 피한다면 지금 있는 용어들 위에 덧붙일 수 있는 더 정확한 용어들을 디자인할 수 있다고 얘기했다.

우리는 우리뿐만 아니라 다른 전문가한테도 잘 알려진 개념에 기초한 용어를 사용함으로서 보다 더 정확하고 직관적인 용어 사용이 가능할 수 있다. 댄이 말한 것처럼 이단 마콧(Ethan Marcotte)이 정의한 “responsive architecture”의 뜻은 이러한 문제를 해결한 좋은 사례이다. 이단은 물리적 공간이 그 공간을 지나가는 사람들에게 어떻게 대응하는지 정의하는 개념을 가져와 반응형 디자인을 정의하였다. 이같이 새로운 용어를 창조하지 않고도 다른 업종의 개념을 가져와 우리 웹디자인에 적용할 수 있다.

웹디자인에 적용되었다는 것은 디자인을 동일한 경험의 양상으로 대할 수 있음을 말한다. 그 개념은 쉽게 설명되고 이해될 수 있다. 너무 기술적이지도 난해하지도 않고 무작위로 정해진 것도 아니다. 새로운 디자인 접근방식을 설명하는 용어로 적합하기 때문에 합리적이고 시각적이고 기억에 남는다.

우리는 우리가 사용하는 용어를 축적하여 관계자와 우리에게 일관적이고 명확한 전문 용어를 제공하는 표준화된 디자인 어휘를 만들 수 있다. 공통 어휘를 찾는 것은 우리 작업에 대한 도전이자 지속적인 검토와 업데이트를 필요로 하는 계속된 과정이다.

디자인과 코딩 작업

사실 우리는 디자인 전문 용어 말고도 보안해야 할 것이 많다. 디자인과 코딩 작업이 그렇다. 새로운 디자인 필요조건에 직면하여 우리는 끊임없이 새로운 디자인 과제들을 풀면서 적절한 해결책을 찾고 있다. 이러한 행동이 우리가 새로운 것을 배우는데 뒷받침되고 결정시 큰 영향력을 미쳐 우리를 숙련된 전문가로 만들어 준다.

메소드와 크래프트(Method and Craft)는 전문 디자이너들과 개발자들이 작업 과정이나 디자인 프로세스에 대한 그들만의 노하우와 팁을 나누는 멋진 웹사이트다. 이 분야에 처음 입문하는 사람에게는 금광과도 같은 곳이다.

우리는 매일 새로운 것을 배운다. 새로운 CSS trick 이나 UX tweak 들을 발견한다. 그러나 포토샵 테크닉, 아름다운 폰트 페어링, 간편한 코딩 기술 등은 브라우저가 좋아지면서 서서히 구식이 되어 버린다. 그리고 우리는 더 이상 브라우저 핵(hacks)이 필요 없음을 깨닫게 된다. 우리는 매일 우리의 일반적인 관례들을 개선할 수 있는 방법들을 찾는다. 이렇게 일상에서 발견되는 작은 것들이 우리의 기술과 작업 흐름을 개선하는데 도움을 준다. 또한 적극적으로 회사 동료와 생각과 방법을 나눔으로써 결국 디자인과 코딩 작업은 향상되고 모두에게 이익이 된다.

우리는 어려운 질문이나 과감한 글 쓰기를 두려워해서는 안된다. 만약 당신이 우리가 CAPTCHAs 쓰는 걸 멈춰야 된다고 생각하면 두려워 말고 말하라, 그리고 당신의 논리를 분명히 설명하라. 만약 당신이 스크롤바를 다른 식으로 만들 수 있다고 생각한다면 말하라, 그리고 그것이 어떻게 작동하고 왜 더 좋은지 설명하라. 만약 당신에게 개인적 고민이 있고 그것에 대해 다른 이들의 의견을 듣고 싶으면 말하라, 다른 사람들도 똑같은 문제로 고민하고 있을 수 있다. 우리는 기쁘게 문제를 풀 수 있도록 도와줄 것이다.

직업 윤리

‘아니오’라고 말하는 것은 정말 어려울 때가 있다. 특히 개인적으로 혹은 경제적으로 혜택을 누리고 있는 경우에는 더욱 그렇다. 그러나 전문가로서 우리는 자신 혹은 프로젝트가 생각하는 의도와 목적이 다른 청탁과 제안에 유혹되지 않도록 해야 한다. 처음 쓰여진 대로 행동하면 일시적인 이윤을 불러 올 수 있다. 하지만 계속해서 자신과 프로젝트를 유혹에서 지켜나간다면 장기적인 이득을 취할 수 있을 것이다. 전자는 우리에게 일시적인 이윤을 불러 올 수 있지만 결국 후자는 장기적인 이득을 취할 수 있게 해줄 것이다.

우리는 웹상에서 디자인이나 코딩을 할 때 또는 글을 쓰고 편집하고 포스팅 할 때 윤리 의식을 더 높여야 한다. 온라인 출판물에서 말 그대로 생각 없이 하는 복사-붙여넣기는 그만하자. 우리는 웹상에서 디자인, 코딩, 집필, 편집 그리고 발표를 할 때 직업 윤리를 준수해야 한다는 것을 더 많이 의식해야 한다. 복사-붙여넣기 방식에 말 그대로 “그대로”인 웹사이트 퍼나르기는 그만하자. 또한 기사를 형상화도 뒷받침도 못하는 저렴하게 판매되는 재고 사진들도 이제 그만 사용하자.

전문 출판물도 종종 구글의 Link Juice 를 높이기 위해 link-dropper를 이용한 “nofollow” 사용한다. 대부분의 사용자들은 “Milestone Professional Web Design Agency” 링크를 클릭하지 않을 것이다. 그러니 이제 그런 행동도 그만하자. 그때 그때 상황에 따라 온라인상의 행동을 최대한 좋게 만들고 조정하여 사용하는 이런 비슷한 예들이 많이 있다.

Ethics and Web Design 사이트는 우리 직업 윤리의 기초를 다루는 귀중한 리소스다.

콘텐츠를 만드는 사람으로서 우리는 자주 광고에 의존한다. 우리가 심혈을 기울여 만든 콘텐츠가 돈으로 평가 받을 수 있음을 인정하는 건 때때로 필요악이다. 그것은 전혀 나쁜 것은 아니다. 하지만 웹사이트에 광고를 소개할 때 엄격한 제한이 필요하다. 예를 들어, 텍스트 링크 광고와 스폰서 포스트 같은 경우는 주의 깊게 표시해야 한다. 콘텐츠와 광고는 엄격하게 분리해야 한다. 각각의 웹사이트에 개인적인 원칙들을 만들 수도 있다. 온라인에 그 같은 룰을 공표하라. 그리고 무슨 일이 있어도 그것을 지키도록 하라, 그러면 독자들은 당신을 인정하고 좋은 사이트를 만들기 위해 노력하는 당신에게 감사할 것이다.

자신의 콘텐츠와 온라인에 그 콘텐츠를 게재하는 방법에 대해 비판적 태도로 바라보는 것도 좋은 방법이다. 그런 행동은 일관적인 집필 스타일이나 글에 쓰여진 이미지의 질이나 code snippet 등에 대해서 더 많이 신경을 쓴다고 할 수 있다.

이런 세밀한 것들이 글에 색다른 톤을 더해주고, 우리 생각에 힘을 더해 주며 글의 내용이 더 충실해질 수 있도록 해준다. 전에 집필된 글보다 더 고급스럽게 할 수 있도록 도전해 보는 것은 어떨까? 그냥 무작위로 집어넣는 것이 아니라 미세한 결점들을 보완하고 출판되는 모든 기사를 질 좋은 기사로 만들어 보는 것은 어떨까? 특히 대형 웹사이트 구축 시, 스타일 가이드는 이런 것들을 도와줄 수 있다.

포토샵 에티켓 선언서(Photoshop Etiquette Manifesto)에는 당신의 포토샵 문서들을 잘 정리할 수 있도록 문서 이동방식이 좀 더 편해질 수 있도록 도와주는 적절한 제안들을 보유하고 있다

웹디자인에서는 안티패턴(anti-patterns : 사용자들을 속이기 위해 특별히 만든 패턴) 사용을 중지하고 대신에 고객을 존경하고 대변해야 한다. 고객의 브랜드나 당신 자신의 프로젝트를 위해 충실하고 정직한, 진정한 사용자 중심의 토대를 구축하는 것에 대해 생각해 보라. 또한 서로간의 관계의 질을 높이는데 힘써라.

디자인은 웹사이트 방문자에게 편리한 사용성을 제공해야 하고 코딩은 개발자들에게 유지보수가 될 수 있게 해야 한다. 콘텐츠에서 언급한 것처럼 직장에서도 따를 수 있는 기본적인 원칙을 제안하고 그것을 공개하라. 그리고 실천할 수 있게 하라. 이런 내용들을 마지막 체크리스트 항목으로 만들어 출판하거나 글을 올리기 전에 확인하라. 이런 행동이 사람들이 당신의 일을 존중하고 당신을 존경하게 만들 수 있는 방법이다.

끝으로: 최고의 디자인과 최고의 코딩 실행만 수용하는 것이 아닌 출판 정책, 고객의 관심사를 보호하고, 동료들에게 전문적인 업무지원을 하는 반응형 웹디자인(Responsive Web design)을 만들기 위해 노력해야 한다.

웹디자인 트렌드를 보는 시각

아름답고 최고의 웹 제품을 만들기 위해 노력하는 전문가들은 혁신적인 디자인과 코딩 기술 분석을 좋아한다. 디자인과 코딩 기술을 해체하고 다시 합치고 그 과정에서 가능성을 배우는 걸 좋아한다. 또 이에 대해 동료와 토론하고 다음 프로젝트에 대비해 기억해두는 걸 좋아한다. 이러한 기술이 많은 디자이너들에게 사용될수록 그 기술은 우리에게 더욱 중요해진다. 우리 사이에서는 이를 정중하게 트렌드라 부르기 시작했다.

트렌드는 위험할 수도 있고 잘못된 길로 이끌어 줄 수도 있다. 트렌드는 아직 동료들이 가지지 못한 소중한 통찰력을 내가 가진 것 같은 짜릿함을 준다. 우리는 일반 관행이 되버리기 전 먼저 하나를 발견해 효과적으로 사용할 수 있을 때 이를 행운으로 여긴다. 트렌드는 다음에 일어날 중대한 사건을 선도하기에 우리는 트렌드에 주목한다.

하지만 난 가끔씩 트렌드가 너무 과대평가 받고있는 것은 아닌가 생각한다. 트렌드는 자주 완벽한 해답인 것처럼 여겨진다. 혁신적이고 널리 사용된다는 단순한 이유만으로 모두가 그 트렌드를 수용하고 존중한다 (드롭 쉐도우나 텍스트 쉐도우를 생각해보라). 나는 우리가 트렌드의 본질을 정확히 이해하지 않은 상태에서 너무 빨리 받아들인다고 생각하고 이래서는 안된다고 생각한다. 트렌드는 우리가 직면한 모든 문제의 만병통치약이 아니며 어떤 상황에서는 종종 최적의 답을 주지 못한다.

그렇다고 트렌드가 중요하지 않다는 것은 아니다. 트렌드는 중요하다. 특히 혁신을 촉진시키거나 우리들이 한 디자인에 대해 다시 한번 생각할 때 더욱 그렇다. 트렌드는 디자인을 보다 효과적으로 생각 할 수 있게 도와준다. 그러나 트렌드는 어떤 특정한 관심을 다룰 때는 아니나 다를까 실패한다.

모스크바에 있는 건축회사 웹사이트인 Mospromstroy를 보고 관찰하는 것만으로도 많은 것을 배울 수 있다. 이 웹사이트에 쓰인 코드는 최적이지는 않지만 흥미로운 디자인적 결정들을 보여준다

지난해 나는 러시아나 한국 같은 친근하지 않은 외국 웹사이트들을 상세하게 분석하는 걸 좋아했다. 와이어프레임을 만들거나 인터렉션 패턴 및 소스코드를 분석하고 조사할 때는 그냥 빠르게 훑어 보는 것만으로도 영감과 힘을 얻는다. 나는 디자이너들의 결정과 그 결정 하나 하나에 대한 본질적 이유에 대해 궁리하고 생각하길 좋아한다. 하지만 나는 이것을 외부에서 바라만 볼 수 있을 뿐 그 결정에 대한 진의는 알지 못한다.

진의를 알지 못하는 이유가 우리가 디자인 트렌드를 대할 때 조심해야 하는 이유이다. 우리가 어떤 특정 기술에 대해 잘 알지 못할 때에는 디자인에 적용하기 전에 충분히 실험하고 확인해야 한다. 바로 이 부분이 트렌드에 관해 우리가 놓치고 있는 부분이다.

우리는 트렌드를 정답이라고 단정짓기 전에 충분히 관찰하고 조사해야 한다. 트렌드를 따라다니기 보다는 대면하고 개선하여 우리 것으로 받아들여야 한다. 비쥬얼 효과와 특정 기술에 대한 관심 때문에 트렌드를 적용하는 것은 오히려 역효과를 일으킬 수 있다. 쉽게 사라지는 트렌드 보다는 목적을 충족시킬 수 있는 디자인 만들기에 더 힘써야 한다. 트렌드를 다룰때는 조심스럽고 책임감 있게 행동하고 트렌드가 디자인에 의미를 부여하는 것이라 생각되면 사용하지만 디자인 맥락 문제에 있어 맞지 않는다면 무시해야 한다. 그럼으로써 독창적이고 잘 갖추어진 영구적인 사이트를 만들 수 있다.

과거에서 배우기

트렌드는 디자이너들이 현재 하고 있는 모습을 보여준다. 하지만 우리는 과거 유산(heritage)을 참조하여 우리의 스킬을 확대할 수 있다. 우리는 디자이너로서 근본적인 문제 해결자다. 우리는 기존의 현상을 분석하고 주어진 과제와 요구들을 익혀 의미있는 해결책을 찾는다. 우리가 처음 찾는 것은 잘된 비주얼과 기술적 접근이 아니다. 우리는 먼저 하나의 아이디어를 찾는다.

이 단계에서 가장 도움이 되는 것은 경험과 창조적인 생각이다. 특히 비주얼 커뮤니케이션에서의 풍부한 과거 유산들이 유용하다. 과거에서 배움으로써 지금까지 어떤 식으로 아이디어와 기술이 출현해왔고 발달해 왔는지 잘 이해할 수 있다. 우리가 지금 직면하고 있는 과제 아니면 미래 우리가 직면해야 할 문제들을 과거의 전문가들은 어떻게 풀어나갔었는지 배울 수 있다.

Design Is History, Smart History 와 Graphics Atlas같은 웹사이트들은 우리에게 그래픽 디자인과 비주얼 커뮤니케이션 그리고 디자인 과정의 진화를 잘 보여주는 탁월한 리소스들이다. 우리는 이 웹사이트를 분석하면서 많은 것들을 배울 수 있다.

Andy는 강연에서 자신의 독특한 관점을 공유하면서 사용자들이 콘텐츠를 접하는 것 뿐만 아니라 전반적으로 소비하게 하는 법에 대해 말했다. 1960년대 만화책과 서부영화를 예로 들면서 정보를 소비하는 페이스에 영향을 주기 위해 사용된 다양한 기술(ex. 영화에서 침묵을 활용하거나 만화책에서 칸의 형태 변형)에 대해 언급했다.

우리도 이런 테크닉들을 디자인에 적용함으로써 독자들이 우리의 콘텐츠에 좀 더 길게 관심 갖게 할 수 있다. 사용자들이 생각할 필요가 없게 만드는 것이 아니라 반대로 호기심을 불러일으키게 할 수 있을 것이다.(좋은 사례로 Ben the Bodyguard 웹사이트를 들 수 있다.)

Ben The Bodyguard 사이트는 당신이 생각했던 것 보다 더 오래 사이트에 머무르게 한다

우리는 다른 시대, 다른 미디어의 컨셉을 디자인에 적용시키는 걸 주저하지 말아야 한다. 실제 디자인과 관련 없어도 된다. 그림자, 경사, 원만한 모서리를 생각하는 대신 긴장, 타이밍, 나레이티브를 생각해야 한다.

다음에 아이디어를 찾을 일이 있을 때 예전에 재미있게 읽었던 책을 다른 시각으로 다시 한번 읽어보자. 당신의 프로젝트에 불러올 가치가 있는 독특한 포인트들을 찾아보자. 포인트를 찾는 순간 당신은 독특하고 새롭고 혁신적인 디자인이 태어나는 순간을 맛 볼 수 있게 될 것이다.

결론

산업이 발전하면 우리 업무의 관행과 질도 함께 발전하기 마련이다. 우리는 짧은 역사 동안 중요한 과제들을 풀어왔지만 아직도 풀지 못한 것들이 많다. 업무 중에 글을 쓰고 논의하는 과정에서 내린 결론과 해답은 우리 모두에게 이득이 될 것이다. 또한 정해진 규칙과 자리 잡힌 다른 기업들간의 소통을 개정하고 강화하며 전문용어와 윤리체계를 확장시킬 수 있다.

아마 우리는 10~15분 정도의 시간을 매일 커뮤니티에 투자할 수도 있을 것이다. 우리는 이를 회사만의 임무로 만들 수도 있고 다른 사람으로 하여금 스스로 참여할 수 있도록 북돋아 줄 수도 있다. 의미 있는 말 한마디 혹은 가치 있는 소재를 지원하거나 당신이 무엇을 배워왔는지에 대한 짧은 기사를 쓰기 위해 떠날 수 있는 시간을 찾아라. 이렇게 공헌한 모든 것들은 즉각적인 의미를 가지게 될 것이고 그에 대해 의논하도록 우리를 고무시킬 것이다. 우선 우리는 임무에 필요한 의지를 고양시키기 위해 해쉬태그 #wdcommunity를 이용하는 것으로 시작할 수 있다.

나는 우리가 매일 이러한 상태를 유지한다면 어느 날 경이로운 결과로서 주목할만한 커뮤니티로 거듭나게 될 것이라 확신한다. 나 자신도 하루빨리 그 날이 오기를 바란다.

이 글을 쓰는데 귀중한 도움과 의견을 주신 프란시스코 인카우스테(Fancisco Inchauste, @universalmind), 크리스 시플렛(Chris Shiflett, @shiflett), 니산트 코타리(Nishant Kothary, @rainypixels), 폴 스크리벤(Paul Scrivens, @scrivs), 앤디 클라크(Andy Clarke, @Malarkey), 댄 루빈(Dan Rubin, @danrubin)과 다른 분들께 진심으로 감사드린다.

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

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

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

애런 월터 Aarron Walter

감성 디자인

인간심리학을 녹여낸 감성 디자인의 마법!
‘따뜻한 사이트’를 위한 애런 월터의 이야기

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

트렌드란 특별한 이유 없이 따르게 되는 현상일 뿐 반드시 따라야만 하는 것은 아니다. 디자인을 할 때 트렌드는 새로운 아이디어를 제공해주는 일종의 가이드라인에 더 가깝다. 웹디자인 업계에 있는 우리는 트렌드가 얼마나 빠르게 변하는지 잘 알고 있다. 사용자 인터페이스는 미적인 측면뿐만 아니라 그 외 다양한 부분에서 매우 중요한 역할을 한다.

2010년이 불과 3개월 밖에 남지 않았지만 올 해의 웹디자인의 혁신적인 변화들은 디자이너들에게 놀라운 발전을 가져다 준 동시에 웹디자인의 무한한 가능성을 제시하고 있다. 다음은 앞으로도 지속될 것으로 보이는 2010년의 주요 웹디자인 트렌드 13가지이다. 또한 새로운 웹디자인 프로젝트나 기존의 웹사이트 및 블로그를 새롭게 단장할 때 도움이 될 만한 아이디어도 함께 소개하고자 한다. 중요한것은 무엇보다 독창적인 자신만의 컨셉트를 표현하는 것임을 잊지 말자.

1. 큰 헤드라인과 이미지

이미 잘 알고 있겠지만 오늘날 많은 웹사이트는 큰 헤드라인이나 이미지(또는 둘 다)를 사용하고 있다. 디자이너들이 이렇게 하는 이유는 사용자의 시선을 끌어 웹사이트에 머물게 하기 위함인데 사용자에게 훌륭한 비주얼 효과를 제공해 웹사이트를 기억할 수 있도록 도와준다. 나아가 웹사이트의 전반적인 분위기를 전달하고 방문자로 하여금 웹사이트에 몰두할 수 있도록 유도한다.

2. 맞춤형 타이포그라피

오늘날 타이포그라피는 지루한 기본 폰트에서 참신한 맞춤형 폰트로 확장되고 있다. Typekit(최고의 폰트를 만드는 폰트 회사에서 제공하는 고급 오픈 타입 폰트를 연결시켜 주는 온라인 서비스)을 사용하면 웹에서 다양한 폰트들을 쉽게 사용할 수 있다. 기존의 폰트들과 작별하고 예쁘고 읽기 쉬운 폰트를 골라 상업용 웹사이트나 포트폴리오의 목적을 보다 명확하게 전달할 수 있게 한다.

3. 인쇄 디자인 효과

셰리프 폰트, 보다 많은 그래픽, 그리드 시스템 등 인쇄 디자인에 관련된 다양한 요소들이 올 해 웹디자인에 큰 영감을 주었다. 웹디자인이 인쇄 디자인에 영향을 받은 이유는 한눈에 시선을 집중시키는 효과와 명확한 전달력 때문이다.

4. CSS3과 HTML5 능력

CSS3과 HTML5의 등장으로 웹디자이너들은 보다 빠르고, 효과적인 내비게이션을 다룰 수 있게 되었다. CSS3의 경우 디자이너들은 더 이상 효과를 만들기 위해 이미지를 사용할 필요가 없어졌다. 오히려 그 어느때보다 둥근 코너, 테두리와 배경, 텍스트와 섀도박스, 그리고 불투명 속성을 만들기가 쉬워졌다. HTML5도 큰 기대를 모으고 있는 캔버스 요소는 물론 “header”, “footer” 그리고 “nav”와 같은 시멘틱 태그들을 더 많이 소개될 것이다.

5. 더 많은 비주얼 효과들

최신 웹디자인의 배경을 주목하라. 밋밋했던 배경들이 점점 패턴, 또는 다양한 질감의 느낌을 주는 배경으로 바뀌고 있다. 단지 보기에 더 좋고 웹3.0의 모던한 느낌뿐만 아니라 디자인 컨셉에 따라 웹사이트에 걸맞는 특정한 비주얼 효과와 느낌을 살려주기 때문이다.

6. 모바일과 호환이 가능한 디자인

몇 년 전 스마트폰 시장의 등장과 함께 모바일 세대가 시작되었다. 올 해 CSS와 JavaScript가 지원되는 스마트폰의 수의 증가와 함께 웹디자인의 새로운 트렌드는 물론 모바일과의 호환성을 겨냥한 웹사이트들도 함께 늘어나고 있다.

7. 싱글 페이지 레이아웃

방문자에게 제공할 정보가 많지 않지만 그래도 회사에서 제공하는 서비스에 대한 간단 정보를 담은 웹사이트를 만들어야 한다고 생각해보자. 이 때 여러 페이지로 구성된 웹사이트를 만드는 것은 불필요한 일이다. 싱글 페이지 레이아웃을 사용하면 불필요한 페이지 수를 줄일 수 있고 디자이너, 사용자, 그리고 방문자 모두에게 보다 효과적일 수 있다.

8. 미니멀리스트와 창의성

과거의 정신없고 복잡했던 웹디자인에 비해 올 해는 웹디자인에 충분한 여백을 살린 심플한 미니멀리스트 컨셉이 주를 이루고 있다. 보다 깔끔하고 흡입력이 있으며 기억하기에 쉽고 동시에 창의적이다.

9. 멀티 컬럼 / 그리드 시스템

그리드 시스템 자체는 새로울 것이 없지만 디자이너들은 그리드 시스템의 장점을 보다 잘 활용하고 있다. 즉 웹디자인 레이아웃에 멀티 컬럼을 사용하여 사용성을 높이는 것인데 멀티 컬럼을 사용할 때 레이아웃의 공간을 보다 효율적으로 사용할 수 있어서 더 많은 콘텐츠를 담을 수 있다.

10. 독특한 일러스트레이션과 깔끔한 아이콘

고객들의 시선을 사로잡는 것이 얼마나 중요한 것인지 많은 기업들이 인지하고 있다. 기업의 컨셉트에 따라 웹사이트를 디자인하는 것은 물론이고, 최근에는 많은 기업들이 주요 바탕 이미지들을 사진에서 일러스트나 아이콘으로로 바꾸고 있다. 자신만의 독특한 일러스트레이션과 아이콘이야말로 고객의 관심을 끌고 기억에 남게될 것이다.

11. 소셜미디어는 필수다

소셜미디어는 아무리 강조해도 지나침이 없다. 적어도 모든 사람들이 페이스북은 하고 있다. 소셜미디어는 방문자와 소통할 수 있는 또 하나의 통로인 만큼 푸터나 사이드바 어디든 디자인 컨셉트에 맞는 곳에 링크를 걸도록 한다. 많은 사람들은 웹사이트를 통해 늘 연결되어 있기를 원하고 있기 때문이다.

12. 자기소개

인터넷 시대에 웹사이트는 누군가를 알게되는 새로운 방법이다. 소개를 위한 영역이나 헤드라인을 이용하는 것이 현재 웹디자인의 새로운 트렌드이다. 방문자가 웹사이트를 훑어보는데 소요되는 시간은 평균 30초인데 이 시간 내에 자신을 알리고 회사가 제공하는 서비스를 알리기 위해서는 이보다 더 나은 방법은 없다.

13. 모달 박스(modal boxes) / 라이트 박스(light boxes)

라이트 박스라고도 알려진 모달 박스는 신세대 팝업 창으로 불리기도 했다. 모달 박스란 현재 그림, 텍스트, 또는 비디오 등에 다양하게 사용되고 있다. 보다 깔끔하고 선명하며 사용자로 하여금 제공되고 있는 정보에 집중할 수 있도록 도와준다. 또한 기존의 팝업 창보다 사용성이 뛰어나다.
자, 이제 껏 살펴본 것들 중 자신의 디자인에 직접 적용해 본 것은 어떤 것인가요? 아니면 현재 유행 중인 트렌드나 다가올 트렌드 중 우리가 놓친 것이 있다고 생각하는는 것은 무엇인가요? 댓글을 통해 여러분과 의견을 함께 주고받고 싶습니다.

아리 수아르디얀티 (Ari Suardiyanti)차이칼로피아(Chykalophia)로도 알려진 저자는 3년차 프리랜서 디자이너로 전문분야는 그래픽과 웹디자인이다.
Frespiration!의 설립자이자 편집장이며 The Annual Design Awards 2010에서 최고의 제품 패키지 디자인상(best product packaging design)을 수상하였다. 디자인 외에 아리는 맥컴퓨터, 영화, 얼터내티브 록, 그리고 사진 찍히기를 좋아한다.

요즘 고객들이 저희 팀에 업무의뢰를 하시면서 여러 궁금한 점들을 물으십니다.

고객분들이야 한번 질문이지만, 저희는 같은 설명을 반복해서 합니다. 그러다보면 저희도 어떤분께는 부족한 설명을 해드리게 되기도 합니다. 고객 입장에서든 저희 입장에서든 안타까운 일입니다. 고객님께서 꼭 아셨으면 하는 부분 등에 대해 ‘자주하는 질문(FAQ)’ 형식으로 만들어야겠다는 생각을 그래서 했습니다.

앞으로 저희팀에 계속 자주 하는 질문들, 그리고 고객분들이 알았으면 하는 내용들을 정리해서 올리도록 하겠습니다. 좀 귀찮으시더라도 고객필독 시리즈를 꼭 읽어주시고 업무문의를 해주신다면, 저희는 더 품질 좋은 서비스를 해드릴 수 있을 겁니다.

그럼 함께 여행을 떠나 볼까요. ^^

② 업력을 검증하는 고객님들께.

저희에게 문의해주시는 고객 중엔 가끔 업력부터 물어보시는 분들이 계십니다. 업력을 검증하는 것은 서비스를 받기 전에 확인하는 고객님의 당연한 권리입니다.

그런데 불행히도(?) 저희가 작년 4월에 만든 회사이다 보니 타사에 비해 업력이 많이 부족합니다. 저희 입장에서는 참으로 속상할 때가 많습니다.

하지만 저희에게 믿고 맡겨주시는 고객께는 다음과 같이 말씀드립니다.

마지막으로 세계적인 M&A 미디어 전문가인 마틴 소렐 WPP그룹 대표가 모 언론사와의 인터뷰 한 내용 일부를 알려드리는 걸로 마무리하겠습니다.

세계적인 M&A·미디어 전문가 마틴 소렐 WPP그룹 대표.

 “광고나 마케팅 대행 사업은 역사나 경험 같은 게 꼭 필요하지는 않거든요. 제가 PR 캠페인을 직접 집행하거나 직접 광고를 만들지 않아도 다른 사람들처럼 할 수 있습니다. 어떤 의미에서는 진입 장벽이 없고, 매우 개방적인 산업입니다. 스포츠나 엔터테인먼트산업과도 비슷해요. 원칙적으로 이 업종의 회사들은 오로지 가장 마지막으로 수행했던 작업에 의해서만 평가받습니다.”

웹액츄얼리팀은 ‘열공’ 하지 않고 안주하면, 어떻게 한순간에 추락할 수 있는지를 항상 생각합니다.