몇일 전 해피 코그(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 저국내 최초 워드프레스 활용 가이드 출간!

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

디자인 – “사람들이 원하는 것은 자기 애완견 사진을 메일로 보내고 싶을 뿐이다.”

개발자를 위한 디자인 입문서

디자인은 한 회사의 운명을 완전히 바꿔 놓을 수도 있지만, 그것이 무엇인지 보편적으로 수용할 수 있는 정의는 아직 없다. 이 말이 무슨 뜻이냐 하면, 당신의 상사가 팀원들을 모두 모아 놓고 “앞으로 우리 회사는 디자인 중심의 문화를 지향하게 될 것입니다”라고 하는 말이 공언에 불과하게 될 수 있다는 뜻이다.

하지만 당신은 그 말에 귀를 기울이고 있다. 단지 듣기만 하는 것이 아니라, 그 말 이면에 있는 절실함마저 느끼고 있다. 들어보니까 무엇인가를 디자인하기 위한 선택은 매우 중요한 일인 것 같고, 그 이야기를 하는 사람도 중요한 인물이고 해서, 당신은 심하게 고개를 끄덕이고 있다. 하지만 마음 속으로는 “나는 당신이 무슨 소리를 지껄이는지 전혀 모르겠는데 아마 당신도 마찬가지일 거야”라고 생각할 것이다.

디자인에 초점을 맞추는 것이 마법처럼 한 회사를 변화시킬 수 있다는 데는 이론의 여지가 없다. 이를 위해 디자인 팀과 개발 팀이 회식이라도 자주 해야겠지만, 디자이너와 개발자 사이에는 근본적인 긴장이 존재하므로 이 긴장을 이해하는 것이야말로 디자인을 생각하는 좋은 출발점이 될 것이다.

디자이너와 개발자 – 긴장관계

디자이너와 개발자의 뿌리 깊은 긴장 관계를 제대로 이해하기 위해서는 소프트웨어가 시장의 주류가 된 시점으로 거슬러 올라가야 한다. 개인적인 생각이지만 그것은 아마도 인터넷이 막 등장했을 무렵일 것이다. 사실 소프트웨어는 넷스케이프(Netscape)가 등장하기 오래 전부터 엄청난 부가가치를 창출하고 있었다. 하지만 누구든 어디든 자기 애완견 사진을 메일로 보낼 수 있게 된 바로 그 순간, 진정한 의미의 소프트웨어 세상이 되었다고 말할 수 있다.

‘누구나’(그들의 애완견도 포함하여)의 시대가 도래하자 초기 소프트웨어 개발팀에게 과제가 주어졌다. 그전까지 그들은 누구나가 아닌 얼리어답터와 함께 얼리어답터 특유의 요구에 맞추어 작업했었다. 얼리어답터들은 다음과 같은 생각으로 수많은 크랩(crap, 엉터리)을 기꺼이 참아 주었다. “얼리어답터는 최신 제품, 최고 제품을 제일 먼저 다룰 수 있지만 그 제품은 한순간에 익스플로전(explosion, 프로그램의 작동이 멈추는 것; 편집자 주)될 수도 있다.” 작동하던 프로그램이 순간 멈춰도 얼리어답터들은 괜찮다고 생각한다. 왜냐하면 그들은 얼리어답터가 된다는 것 자체를 멋있다고 생각하기 때문이다.

하지만 ‘누구나’의 시대가 도래했을 때, 그 모든 ‘누구나’는 익스플로전을 원치 않았다. 소비자들은 제품이 정상적으로 작동되기를 원했다. 여기에서 “정상적으로 작동한다”라는 말을 개발자들은 “(프로그램이) 덜 멈추기를 바란다”라는 말로 들었는지 모르지만, 이것은 ‘누구나’가 원하는 바는 아니다. 소비자들이 원하는 것은 가능한 한 가장 간단한 방법으로 자기 애완견 사진을 보내는 것이다. 그들은 자바스크립트, 보안, 프레임, 플러그인 같은 것은 신경도 쓰지 않는다. 단지 그놈의 ‘강아지’ 사진을 보낼 때 어플리케이션(application, 응용 프로그램)이 멈추지 않기를 바랄 뿐이다.

“덜 익스플로전 되기를 바란다”는 개발자들의 생각과 “클릭 한 번으로 정확하게 애완견 사진을 보내고 싶다”는 사용자들의 생각 사이에서 디자인은 실질적인 연결다리 역할을 한다. 그런 점에서 좋은 디자인은 개발자들의 노력을 선보이는 동시에 그것을 사용자들에게 보이지 않게 숨기는 것과 같다.

여러 디자이너들과 함께 작업하는 동안 디자인의 역할에 대해 생각해 보았다.
내 개인적인 생각은 다음과 같다.

대부분의 사용자들이 무엇을 원하는지 이해한다.
그 중에 가장 중요한 것에 우선순위를 두고 집중한다.
이러한 지식을 이용해 사용자의 기대를 뛰어넘는다.

90년대 중반 무렵의 전통적인 개발자들은 이러한 역할을 제대로 하지 못했다. 우리는 비트의 설계자가 되도록 훈련받았으며, 우리가 비트를 설계할 수 있다는 것은 곧 쓸모 있는 비트를 만들 수 있다고 믿었다. 하지만 우리가 잘하는 것은 우리 자신에게 좋은 제품을 설계하는 것뿐이다. 그것은 결코 모든 이들을 위한 것이 아니다.

개발자들은 마치 스스로 프로그램 개발 과정을 잘 알고 있기 때문에 그것의 문제점을 중요하게 생각하지 않는 것처럼, 어플리케이션이 순간 멈추는 것을 아무렇지 않게 생각한다. 어떤 프로그램에 오류가 나면 그냥 어플리케이션을 다시 시작하면 된다고 생각하는 것이다. 그러나 대부분의 사용자들은 오류가 난 어플리케이션을 그런 식으로 보지 않는다. 그들은 뭔가 오류가 나면 깜짝 놀란다. 그리고 이렇게 생각한다. “혹시 심각한 고장이 난 것은 아닐까”

디자이너와 개발자를 위한 메모

수없이 많은 디자이너 무리에게는 미안한 말이지만 이 입문서는 주로 소프트웨어 개발자 주변에 사는 디자이너와 그들의 관행에 초점을 맞추고 있다. 이 책은 개발자들을 위해 개발자가 쓴 책이다. 나는 오랜 세월 동안 디자인계에 몸담고 있었지만 전문 디자이너로 훈련된 사람이 아니며 디자인의 역사와 기능에 대한 설명 또한 단순하고 부정확하며 불완전하게 하는데다가 개발자로서 편견까지 가지고 있어 디자이너들이 이 글을 보면 화가 날 수도 있을 것이다.

우리 개발자들이 하는 말의 의도가 아무리 좋더라도 디자인의 필수 항목을 제대로 경험한 적이 없기 때문에 그것에 대해서는 무지하다. 또 어떻게든 설명할 수 있는 일이라면 그 일을 할 수도 있을 것이라고 믿는데, 그것이 얼마나 어리석은 생각인지도 잘 알고 있다. 하지만 어떤 분야에서든 열의를 갖고 일을 하는 전문가들은 이렇게 늘 생각하는 것 같다.

개발자들은 무지를 불편해 하지만 그보다 더 심각한 문제는 우리 전문 영역 밖에 있는 이들에게 도움을 요청하는 일에 익숙하지 않다는 것이다. 이 입문서는 우리 디자이너와 개발자 사이에 단단한 다리를 놓는 첫 번째 단계가 될 것이다. 그러므로 기분 나쁘게 생각하지 말자. 이 입문서는 가장 권위 있는 디자인 가이드가 아니라 개발자들이 디자인에 대해 생각해 볼 수 있는 전환점이 될 것이다. 우리가 생각하는 바에 대해 독자가 어쩌다 무엇이라도 배우게 된다면 더욱 다행스러운 일이라고 생각한다.

다음의 세가지 축약어(Acronyms)가 문제점의 발단

“우리에게는 디자이너가 필요하다”라는 말은 아마 당신이 신입 소프트웨어 개발자로서 디자인에 대해 처음 들어본 말일 것이다. 그때 당신은 의아해 했을 것이다. ”음, 나는 아직 일을 시작하지도 않았는데 왜 그들이 필요하다는 걸까” 그에 대한 대답은 결코 간단하지 않고 이 글의 범위 밖에 있지만 다음의 세 가지 주요 축약어부터 설명하고자 한다.

다른 직업과 마찬가지로 디자인도 온갖 줄여서 쓴 단어들로 가득하다. 하지만 여기서는 당신의 상사가 디자인이 중요하다고 강조한 바로 그 시점에 자주 언급되었을 만한 세 가지 축약어에 집중할 것이다.

#1 GD(Graphic Design, 그래픽 디자인)

그래픽 디자이너들은 세상을 이렇게 본다.
(그래픽 디자이너들은 아래 그림처럼 ‘픽셀’ 단위로 바라본다는 의미임 : 편집자주)

안타깝게도 그래픽 디자이너를 설명하는 데 가장 흔히 쓰이는 말은 혼란스럽게도 바로 ‘디자이너’이다. 그 이유는 두 가지다. 첫째, 그는 개발 부문 외에 있는 기술을 가지고 이 제품을 완성하도록 고용된 최초의 인력이다. 둘째, 그는 ‘아름다움’을 책임지고 있다. 작업 책임자가 제품의 최초 프로토타입을 보고 이렇게 말할 것이다. “이건 개발자가 대충 만들어 놓은 것 같은데…” (당신은 고개를 끄덕인다) 그리고 “이걸 고쳐 놓을 디자이너가 필요해!” (당신의 눈길은 공허해진다)

당신: 뭘 고쳐요?
책임자: 글쎄… 뭐랄까… 좀 더 아름다워야 하지 않을까.

아직도 이 블로그에서 빠져나가지 않은 디자이너가 있다면, 아마 지금 의자 위에 올라가 스크린 앞에서 소리를 지르고 있을 것이다: “난 그런 사람 알아!”

그렇다, 나도 그런 사람을 알고 있다. 그는 좋은 의도를 가지고 있겠지만 멍청이다.

그래픽 디자이너의 장기는 시각적인 것에 있다. 포토샵이나 일러스트레이터 같은 어플리케이션을 통해 그래픽 디자이너는 추상적인 생각에 시각적인 형태를 부여한다. 그렇다. 그들이 하는 작업은 아름답다. 하지만 단지 아름답기만 한 것은 아니다. 그것은 말을 한다. 무엇인가에 대한 의견을 가지고 있어서 그것을 보는 사람이라면 누구라도 그 의견을 알 수 있다. 그렇다. 디자이너는 당신의 어플리케이션이나 웹 사이트에 어떤 명확하고 믿을 만한 전문성을 부여한다. 그렇지만 어떤 것을 잘 그려 놓았다고 해서 꼭 그 제품을 더 사용하기 쉽게 만들어 주는 것은 아니다.

문제는 작업 책임자가 그래픽 디자이너의 사무실로 들어가서 이렇게 말할 때 시작된다. “당신은 디자이너잖아. 이 제품에서 개발자 냄새를 지우게 도와줄 수 있나?” 이제, 당신처럼 이 그래픽 디자이너도 뭔가 더 하고 싶어한다. 더 많은 책임을 지려고 한다. 그리하여 그 제품이 어떻게 작동하는지, 사용자가 누구인지도 모르면서 그들은 이렇게 생각하며 그 일을 하겠다고 나선다. ‘그럼, 난 디자이너잖아. 그렇지?’

그렇게 해서 디자이너들이 작업을 맡게 된다. 그들은 포토샵으로 눈에 보기 좋은 프로토타입을 만든다. 이 그래픽 디자이너는 대부분의 개발자들이 할 수 없는 일을 했고 중요한 디자인 작업을 진행했지만 엄청나게 새로운 디자인을 한 것은 아니다. 당신의 제품은 단순히 아름다운 얼굴을 가지게 되었을 뿐이다. 제품이 어떻게 보이느냐가 중요한 만큼 어떻게 작동하는가도 똑같이 중요하니까 말이다.

이 입문서의 각 파트 끝에는 내 디자인 철학을 형성하는 데 도움을 준 디자인 관련 서적을 세 권씩 소개할 것이다. 디자인의 본질에 대해 궁금하면 참고 문헌을 보길 바란다.

#2-IxD(Interaction design, 인터렉션 디자인)

IxD는 세상을 이렇게 본다.

인터렉션 디자이너는 놀라운 일을 한다. 그들은 형태로부터 기능을 추출한다. 가장 좋아하는 어플리케이션을 정기적으로 둘러볼 때 당신이 어떻게 하는지 생각해 보라. 당신은 익숙한 경로를 따라갈 것이다. 우리는 그것을 작업 흐름(workflow)이라고 부른다. 작업 흐름은 일련의 마우스 클릭과 드래그로 구성되며 당신의 전광석화 같은 키보드 움직임을 동반한다. 이것이 당신과 어플리케이션의 접점이다.

인터렉션 디자이너의 장기는 작업 흐름을 돌보고 작업을 진행시키는 것에 있다. 인터렉션 디자이너는 와이어프레임과 작업 흐름을 능숙하게 이용하여 사용자가 그 어플리케이션을 통달할 수 있게 되는 과정을 단계별로 정의하고 세분한다.

위 그림처럼 기능을 단축해서 설명하면 설명의 의도를 이해하지 못하는 이들에게는 혼란스러울 것이다. 이것이 어플리케이션이 어떻게 보일까에 대한 것일까? 그렇지 않다. 이것은 인터렉션에 대한 것이다. 이것은 그 어플리케이션이 어떻게 보이는가가 아닌 어떻게 작업하는가를 설명하고자 하는 사용자 인터페이스를 대략적으로 나타낸 것이다. 그렇다면 어플리케이션이 어떻게 보일까? 저 텍스트에 그림자 효과를 줄 수 있을까? 나는 그림자 효과와 푸른 색을 좋아하고 또 텍스트를 입체감있게 표현하고 싶은데… 그런 이야기를 하려면 이제 그만하고 가보는 것이 좋겠다.

기능을 형태에서 분리한다는 것도 생각의 전환을 요구하는 것이지만 기능과 형태 중 어떤 한 쪽 없이는 다른 한 쪽을 생각할 수 없다고 믿는 사람들도 상당히 많이 존재한다. 내 생각에 정답은 그 중간쯤에 있는 것 같다. 인터렉션에 대해서 전략적으로 생각하기 위해 픽셀 단위의 완벽한 구성이 필요하다고 생각지는 않지만 프로토타입 작업을 할 때는 샘플 인터렉션 및 애니메이션 작업을 거치는 것이 훨씬 더 풍부한 논의를 할 수 있게 도와 준다고 믿는다.

간략하게 끄적이는 식으로 제품이 어떻게 작동하는지 설명할 수도 있지만 그럴 경우 디자인의 여러 가지 개성적인 요소를 놓치게 된다. 뿐만 아니라 디자인에 대한 완벽하고 훌륭한 대화가 자칫 그림자 효과에 대한 쓸모 없는 토론으로 변질되는 수가 있다. 실제로 색상, 글꼴, 간격 등의 요소는 제품의 분위기에 기여하는 중요한 요소이다. 제품의 분위기는 그 제품이 어떻게 작동하는가와 똑같이 아주 중요하다.

IxD의 연장선상에 있는 두 가지 약어가 있는데 이것들은 꼭 한 번쯤 살펴볼 가치가 있다.

HCI 분야에서 일하고 있는 사람들을 접했던 내 경험에 의하면 그들은 뛰어난 연구자들이다. 만일 당신이 당신의 어플리케이션에서 사용자들이 시도할 수 있는 모든 가능한 작업 흐름과 그 작업 흐름을 완료하는 데 걸리는 시간 그리고 이 작업 흐름이 당신의 사용자들에게 미치는 정량화된 감정적 상처 목록을 모두 알고 싶다면 HCI 전문가를 찾아서 그에게 18개월을 주면 아마 <한 박자 쉬고> 놀라운 결과를 얻게 될 것이다.

이제 참고 문헌을 소개할 차례다. 이 책들은 누구나 접할 수 있는 것이기 때문에 골랐다. 이 책들을 읽는 것이 완벽한 디자인 교육을 보장하지는 않지만 디자인의 여러 부분에 대해 훌륭하고 견고한 취향을 갖게 해 줄 것이다.

#3 UxD(User eXperience Design, 사용자 경험 디자인)

UxD를 설명하기 위해 여기에 세 가지 그림을 제시하였다.

사용자. 경험. 디자인. 이 중에 당신은 어디에 신경을 쓰는가? 물론, 당신은 이 모든 것에 신경을 쓸 것이다. 시각적 디자인은 물론이고 인터렉션 디자인에도 신경을 쓰겠지만 당신이 가장 신경을 쓰는 것은 아마도 사용자 경험일 것이다.

내 경험상 UxD라는 용어는 학문적인 개념이 아니다. 이 용어는 내가 알고 있는 것을 남들도 알고 있다는 것을 근거(즉, 사용자 경험에 대한 공유를 뜻하는 말 – 편집자주)로 세월이 흐르면서 저절로 도입된 것이다. 디자이너라는 용어는 사용하기에 너무 일반적이고 그래픽 디자이너와 인터렉션 디자이너는 너무 구체적이다. 사용자 경험 디자이너는 과거에 약어로 사용되다가 어느 순간 전체에 대해 신경을 쓰는 것이 더 유리하다고 마음먹은 듯하다.

참으로 잘 된 일이다.

다양한 디자인 분야가 있고 각각의 분야는 그에 맞게 사용되는 때와 장소가 있다. 마찬가지로 자신에게 UxD라는 이름을 붙이거나 그렇게 생각하는 사람을 찾는 이유는 작업을 설정하고 전체 경험을 책임질 의지가 있는 사람이 필요하기 때문이다.

도서 목록의 마지막에는 디자인 고전도 포함되어 있다. 그렇다. 만화에 대한 책도 있다.

디자이너와 개발자여. 더 자주 함께 파티하라!

다양한 디자인 분야에서 사용성이 목록에서 빠진 게 눈에 띈다. 문제는 아무리 근사한 약어를 가지고 있더라도 나는 사용성을 포함시키지 않았을 것이다.

스티브 잡스가 애플로 복귀하기 전에는 일방향 거울(one-way mirror, 나는 상대방을 볼 수 있는데 상대방은 나를 볼 수 없게 만든 장치-편집자주)과 비디오 카메라가 있는 멋진 방을 갖춘 사용성 팀이 있었다. 이 조직은 괜찮은 중앙 집권형 조직이었다. 나는 이들이 상당한 업적을 이루었다고 확신하지만 잡스가 복귀하면서 문을 닫고 디자인 팀을 날려버렸다. 그리고 각 제품 팀이 예전 사용성 팀의 기능을 물려받았다.

나는 이 구조조정이 일어난 후에 들어왔으므로 진짜 이유는 잘 모르지만 내가 아는 것은 내가 한 번도 사용성 실험실을 사용해 본 적이 없다는 것과 사용성 팀이 없어진 후인 지난 10년간 애플이 가장 사용성 있는 제품을 창조했다는 것이다. 내 생각에 사용성 디자인 기능을 개발 팀 전체에 확산시키기로 한 선택은 분명한 메시지를 전달하고자 한 것으로 볼 수 있다. 개발자와 디자이너는… 더 자주 함께 파티를 해야 할 필요가 있다는 것이다.

개발자와 디자이너들이 서로의 일에 계속해서 간섭하지 않는 상황에서 제품을 책임지는 팀을 만든다는 것을 상상할 수 없다. 그렇다. 그들은 뇌의 반대쪽에서 기인하는 주장을 하며 다투기도 한다. 가끔은 예술과 과학 사이의 전투가 되기도 한다. 그러나 개발자와 디자이너가 원하는 것은 정확히 똑같다. 그들은 뭔가 중요한 것을 성공적으로 만들었다는 것을 인식할 때 느끼는 강한 만족감을 원한다.

디자인 중심의 문화란 그 디자인 문화에 책임이 있는 사람들이 서로를 마주 대하지 않는다면 그냥 내던져진 공허한 문장에 불과하다. 여러 용어와 약어들은 어떤 사람이 무엇을 하는지 이해할 수 있는 출발점을 제공한다. 그러나 당신이 시간을 내서 그들이 사랑하는 일을 어떻게 이루어 내는지 이해하려고 노력하는 데서 나오는 존중이 진짜 중요하다.

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

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

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

[편집자주]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

적용방법.

1. 카카오톡에서 지원하고 있는 script 파일 다운로드!

2. FTP를 사용하여 업로드 후, 인클루드!

주의사항 : 반드시 Javascript Library인 jQuery가 필요합니다.

3. 버튼에 액션 추가하기!

소스 적용 예 :

이렇게만 하면 모바일 웹에서 카카오톡으로 콘텐츠 내용 및 주소 전달이 바로 가능하도록 된답니다.

실행 예제.

1. 공유하고자 하는 곳에서 “카카오톡” 버튼 클릭.

2. 대화상대 선택.

3. 전송완료.

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

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

그러나 이 분야의 성장이 완성단계에 접어든 것은 절대로 아니다. 수많은 기술적 진보가 이뤄지기는 했지만 다른 부분의 발전들이 이를 따라오지 못한 것이다. 다른 부분의 발전들이라 할때 크로스 브라우저를 지원하는 표준 문제나 우리가 사용하는 도구(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

감성 디자인

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

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

AEA 컨퍼런스가 시작되기 전날 밤. 준비중인 로비 모습

AEA(An Event Apart) 컨퍼런스에 참석하기 위해 18시간의 비행 끝에 도착한 아틀랜타 인터콘티넨탈 벅헤드. 작년 FOWD(Future Of Web Deisgn) 컨퍼런스에 이어 올해 두번 째 웹디자인 컨퍼런스 참가다.

AEA(An Event Apart)는 CSS의 선구자인 에릭 마이어(Eric Meyer, @meyerweb)와 제프리 젤드먼(Jeffrey Zeldman, @zeldman)이 공동 호스트로 미국 주요 도시에서 매년 개최한다. 2일 간의 컨퍼런스와 1일의 워크샵 일정으로 이루어져 있다. 하루 6개의 세션으로 이루어져 있는 컨퍼런스에서는 각 분야 스타 웹전문가들이 웹에 대한 견해와 노하우를 발표한다.

‘웹을 만드는 사람들을 위한(For People Who Make Websites)’이라는 캐치프레이즈처럼 AEA는 웹표준에 기반한 코딩, 웹디자인, 유저빌리티, 콘텐츠등의 전반적인 내용을 다룬다.

올해 웹액츄얼리는 A Book Apart에서 출간하는 제레미 키스(Jeremy Keith, @adactio)의 <웹디자이너를 위한 HTML5>의 판권 계약을 시작으로 제레미 키스와 제프리 젤드먼과의 인연을 시작했다.

이번 AEA 컨퍼런스에서 이 두 거장을 직접 만나 한국에 출간된 책에 관한 에피소드와 웹에 관한 이야기를 나눌 생각을 하니 가슴이 설레이고 뿌듯해져 온다.

컨퍼런스 첫째 날. 시작 전의 컨퍼런스홀의 모습

첫째 날 일찍 도착한 컨퍼런스홀. 잘 정돈된 자리와 빵빵한 Wi-Fi. (국내에서는 어디가나 잘 터지는 Wi-Fi 이지만, 해외에 나가면 이런 것에 감동 받는다.) 아직까지 컨퍼런스홀이 한산한 이유는 로비에서 조식을 제공하기 때문 ^^. 그럼 멋진 하루의 시작을 위해 나도 조식을 먹으러 잠시 실례~

첫째날 조식 photo from zeldman

DAY 1.

웹디자이너가 반드시 알아야 할 점(What Every Web Designer Should Know) – by 제프리 젤드먼

제프리 젤드먼의 기조 연설

제프리 젤드먼의 기조 연설로 시작된 AEA 컨퍼런스. 젤드먼은 2일간 컨퍼런스에서 다룰 주제에 관한 자신의 견해와, 오늘 날 웹디자이너들이 갖추어야 할 스킬과 기회에 대해 연설했다. 주옥과 같은 말들이 제프리의 연설에서 쏟아져 나왔다.

반응형 웹디자인(Responsive Web Design)을 강조하며, 디바이스에 맞는 웹디자인 및 그에 맞는 콘텐츠의 중요성도 언급했다.

Devoid from content you fall back on style.
스타일에 의존하는 콘텐츠를 피하라.

Websites are simply delivery systems for content.
웹사이트는 단지 콘텐츠를 전달하기 위한 배달부이다.

또 지금은 HTML5의 대두로 인해 새로운 기술들이 하나로 집중되고 있는 시점임을 설명하고, 웹디자이너가 되기에 가장 좋은 시기임을 강조했다. 새로운 기술들을 배우지 않으면 뒤쳐질 수 밖에 없다고 당부하였다.

심리학이 디자인에 미치는 영향(The Impact of Psychology on Design – by 사라 파멘터

사라 파멘터(Sarah Parmenter)

사라(@sazzy)는 심리학적 원리가 웹디자인에 대한 관점을 어떻게 재구성시켜 줄 수 있는지에 발표했다. 속도, 단순함, 놀람, 사회적행동, 감동이라는 5가지 심리학적 관점으로 살펴본 사례를 설명하고, 심리학적 요소를 웹에 추가 해 볼 것을 제안했다. ‘우리가 가장 잘 알고 있다고 생각하는 것에 대해 전혀 새로운 아이디어를 제공할 것이다.’ 라고 제안했다.

웹타이포그라피(On Web Typography) – by 제이슨 산타 마리아

제이슨 산타 마리아(Jason Santa Maria)

제이슨(@jasonsantamaria)은 현재의 웹폰트와 타이포그라피의 웹 접근방법에 대해 논했다. 2008년 18개에 불과했던 웹폰트가 오늘날 그 수가 폭발적으로 늘어나고 있다. 이러한 웹폰트의 홍수 속에서, 웹에서 효과적으로 타이포를 사용할 수 있는 모범적 사례들을 설명했다.

Bigger is better. Always err on side of making things bigger than smaller.
큰 것이 낫다. 실수를 해도 작게 만드는 것 보다 크게 만들어서 실수하라.

Contrast is the most important tenant of design.
대조는 디자인에서 가장 중요한 요소이다.

Line length: have enough space so the eye does not get lost.
라인의 길이: 충분한 공간을 두어서 시선을 잃지 않게 하라.

모바일 웹디자인의 움직임(Mobile Web Design Moves) – by 루크 로블루스키

루크 로블루스키(Luke Wroblewski) photo from ifiamblue

루크(@lukew)는 스마트폰 사용자의 증가와 함께 모바일에서 웹콘텐츠를 읽는 사용자의 시간별 이용 패턴을 통계로 설명했다. MOBILE FIRST! 모바일을 먼저 고려하여 웹을 설계하고 콘텐츠도 모바일에 맞게 설계해야 한다고 강조했다. 모바일웹에서 흔히 저지르는 UI 실수와 스마트하게 해결할 수 있는 솔루션을 다양한 사례와 함께 설명했다.

반응형 웹디자이너의 작업흐름(The Responsive Designer’s Workflow) – by 이단 마콧

이단 마콧(Ethan Marcotte) photo from ifiamblue

이단(@beep)은 현재 진행중인 보스턴 글로브Boston Globe 신문사 리뉴얼 프로젝트에서 적용하고 있는 반응형 웹 디자인(Responsive web design)의 작업원리와 작업흐름을 설명했다. 반응형 웹디자인의 근본에는 반응형 작업 프로세스가 선행되어야 한다고 말하고, 기존 인쇄 프로세스를 답습했던 현재의 웹디자인 프로세스도 변화해야 한다고 강조했다.

연기 때문에 눈물이나요(Smoke Gets In Your Eyes) – by 앤디 클락

앤디 클락(Andy Clarke)

앤디(@malarkey)는 순수 CSS3만을 사용해서 만든 에니메이션을 보여주고, 작업 방법에 대한 노하우를 공개했다. animatable.com 이라는 온라인 CSS3 에니메이션툴을 이용해 만든 무비 타이틀 제작법을 동영상으로 만나보자.

A first look at Animatable from Andy Clarke on Vimeo.

Break Time

쉬는 시간 - 애플 로고들...

쉬는 시간 잠시 뒤를 돌아보니… 애플 로고들이 눈에 많이 들어온다. 군데 군데 아이패드, 아이폰… 한 80%는 애플인듯.

DAY 2.

유동형 박스 사용하기(Using Flexible Boxes) – by 에릭 마이어스

에릭 마이어스(Eric Meyer)

공동 주최자인 에릭 마이어스(@meyerweb)는 CSS의 대가이다. An Event Apart 사이트에 적용된 유동형 박스의 다양한 사례들을 공개했다. (이런 천재들 같으니라고… 간결하고 함축적인 그의 코드를 감상(?) 하고 있자니.. 이건 코드가 아니라 한편의 시와 같다고 해야할 것 같다.)

디자인 원칙(Design Principles) – by 제레미 키스

나의 카메라 렌즈를 발견하고 멋진 포즈를 취해 준 제레미 키스

웹, HTML5, 자바스크립트의 디자인 기본 원칙에 대해 설명하고, 각각에 맞는 목적을 설정하고 그에 맞는 기본 원칙을 만들고, 패턴을 만들어 나가야 한다고 주장했다. 때로는 너무 많은 디자인 원칙들이 사용자를 혼란스럽게 한다. 목적에 맞는 최소한의 원칙을 만드는 것이 중요하다고 설명했다.

아이디어에서 인터페이스까지 (Idea to Interface) – by 아론 월터

아론 월터(Aarron Walter)

메일침프의 UX 디자인 디렉터 아론(@arron)은 자신만의 프로젝트를 실행해 볼 것을 제안한다. 아르키메데스의 그 유명한 유레카(알았다)는 그가 일을 할 때 발견한 것이 아니다. 가장 릴렉스한 시간에 아이디어가 나왔다. 트위터, 페이스북 등의 아이디어는 일을 할때 나온 아니디어가 아니다. 나만의 프로젝트를 할 때 언제나 최고/최선의 방법을 제시할 필요가 없다. 아이디어를 내고 개발. 발전시켜나가는 과정에서 많은 것을 배울 수 있다고 한다. 아론은 아이디어를 내고 만들어가는 크리에이티브 프로세스를 위한 다양한 팁을 제시했다.

링크의 일생(The Secret Lives of Links) – by 자리드 스풀

Jared Spool(자리드 스풀)

강연 전에 옆자리 친구가 스타 강사라고 먼저 귀뜸을 해주었다. 소문대로 재미있는 외모만큼이나 가장 재미 있었던 강연이었다.

자리드(@jmspool)는 웹사이트에서 링크가 가지는 중요성을 다시 설명하고 모든 사이트에는 사람들이 방문하는 목적이 있는데, 그 목적을 정확히 파악하고 링크를 제시하는 것이 중요하다고 말했다. 이어서 링크가 가져야 할 조건과 기능을 잘못된 사례를 들어 설명했다. 연설 마지막에는 갑자기 자기도 오프라가 되고 싶다며 새로 출간될 책의 PDF를 컨퍼런스에 참석한 모든 사람에게 나눠주어 사람들에게 환호를 받았다.

콘텐츠 전략 로드맵(A Content Strategy Roadmap) – by 크리스티나 할보슨

크리스티나 할보슨(Kristina Halvorson) photo from Pete Karl II

크리스티나(@halvorson)는 콘텐츠 전략을 세우는 프로세스에 관한 전반적인 과정(컨설팅부터 보고까지)과 사례를 설명했다. 아직 국내에는 웹콘텐츠 전략 전문가가 없어서 크리스티나의 강연이 많은 도움이 됐다. 콘텐츠 전략을 위한 노하우는 질문을 많이 하는 것. 이를 바탕으로 클라이언트 회사가 가지고 있는 진정한 가치를 바탕으로 콘텐츠를 구체화 할 수 있다고 한다.

실패,DNA,깊이를 알수 없는 웹(Disaster, DNA, and the Fathomless Depth of the Web) – by 제프 밴

제프리 밴(Jeffrey Veen)

웹폰트 회사 타입킷(Typekit)의 대표 제프리 밴(@veen). 이번 컨퍼런스의 스폰서이다. 타입킷이라는 벤쳐 회사를 설립하기 까지의 수많은 실패의 연속. 그것을 기쁘게 받아들이고 하나 하나 해결해 나갔던 타입킷 맴버들의 모습에서 성공한 벤쳐 회사에서 느낄 수 있는 열정과 도전 정신을 본받을 수 있었다.

Party

파티에서 자정이 될때까지 웹의 프로세스에 관해 이야기를 주고 받았던 친구들

컨퍼런스가 끝난면 바로 스폰서에서 주최하는 이브닝 파티가 열린다. 이 파티에서는 모든 참석자들과 강연자들과의 자연스러운 대화가 이루어 진다. 컨퍼런스 강연중에 궁금했던 점, 웹 프로세스에 관한 의견, 각자의 노하우나 소스 공유 등 웹에 대한 이야기를 밤새워 이야기 할 수 있는 자리이다.

with Web Stars

도로시, 제레미 키스, 나, 리카르도

한국에서 준비해온 선물을 전달했더니 기뻐하는 제레미 키스

영국에서 AEA 컨퍼런스 강연을 위해 온 제레미 키스. 우리 회사에서 그의 책 “HTML5 FOR WEBDESIGNER”를 한국어로 번역했다고 나에 대해 소개했더니 금방 친해졌다. 트위터나 웹에서 만났던 제레미 키스는 약간 차갑고 냉소적인 인상이었는데, 실제로 만나서 대화를 해보니 감성이 풍부하고 모든 사람에게 친절한 그야말로 영국 신사였다.

장난스러운 포즈를 취해 보이는 제프리 젤드먼

제프리 젤드먼은 AEA의 호스트였기 때문에 정말 분주해 보였다. 컨퍼런스의 이모저모를 챙기고 강연 내용을 트위터에 올리고 사진 찍어서 플리커에 올리고 강사들 일일이 챙기고 참석자들의 질문에 꼼꼼히 답변해주고… 최고의 위치에 오른 사람들에게서 볼 수 있는 특유의 여유와 부지런함이 몸에 자연스럽게 베어있다. 몸으로 뛰는 그의 모습에서 열정을 읽을 수 있었다.
항상 입가에 웃음을 머금고 모든 사람을 유쾌하게 만드는 재주가 있는 제프리 젤드먼. 나를 직접 찾아와서 먼저 인사를 나누고 사진 같이 찍자고 재촉하는 그의 모습에 웃음이 절로 나왔다.

마치며…

제프리가 자신의 아이폰으로 직접 찍은 내 모습.

웹컨퍼런스에 참석하면 항상 느끼는 점이 있다. 제프리가 기조 연설에서 언급했던 “웹에서는 새로운 기술들을 배우지 않으면 뒤쳐질 수 밖에 없다”는 말이다. 이번 컨퍼런스에서도 과제를 가득 안고서 한국으로 돌아가게 된다. 이 과제들을 웹액츄얼리의 브랜드페이지 서비스에 잘 적용시켜 글로벌 스탠다드에 맞는 서비스를 해야겠다는 욕심이 든다.

추가하여..

a book apart 에서 출간된 책

AEA에서 강연한 제레미 키스, 루크 로블루스키, 이단 마콧, 아론 월터의 책을 곧 한국에서도 만나실 수 있습니다. 자세한 내용은 books.webactually.com을 방문해 주세요~

AEA 컨퍼런스의 현장 사진을 더 보고 싶으세요?
웹액츄얼리 플리커를 방문해 보세요~

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

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)을 수상하였다. 디자인 외에 아리는 맥컴퓨터, 영화, 얼터내티브 록, 그리고 사진 찍히기를 좋아한다.