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

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

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

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 컨퍼런스의 현장 사진을 더 보고 싶으세요?
웹액츄얼리 플리커를 방문해 보세요~

Original photo from Yell Ow

AN EVENT APART(AEA) 웹디자인 컨퍼런스에 참석하기 위해 모든 업무 일정을 뒤로하고 5월 17일 아틀랜타로 출발~

아틀랜타는 뉴욕이나 로스앤젤레스처럼 한국인에게 잘 알려진 도시는 아니지만 미국에서 9번째로 큰 도시다. 미국 남동부 무역, 교통의 핵심 도시이며, 포츈(Fortune) 500대 기업 본사가 미국에서 3번째로 많다고 한다. 주요 기업으로는 코카콜라, AT&T, CNN, 홈디포(Home Depot), UPS, 델타항공 등이 있고 개인적으로 좋아하는 메일침프(MailChimp; 온라인 메일 서비스 회사)도 있다. 메일침프가 아틀랜타에 있다는 사실을 알았을 때 처음엔 의아해 했었는데… 도시 정보를 알고 보니 그리 놀랄 일도 아닌 것 같다.

컨퍼런스가 열리는 인터콘티넨탈 벅헤드(InterContinental Buckhead) 호텔에서 가까운 관광지로는 코카콜라 박물관(World of CocaCola), CNN 센터, 조지아 수족관, 아틀랜타 식물원등이 있다는 정보를 호텔에 비치되어 있는 관광책자로 확인했다. 하루밖에 없는 짧은 자유시간에 어떤 곳을 가야 할지 고민되는 순간이다.

아틀랜타 식물원에서 바라본 나무에 둘러쌓인 다운타운 스카이라인

서울처럼 높은 빌딩과 넓은 도로가 많은 큰 도시였지만 서울의 바쁘고, 복잡한 모습과는 많이 달랐다. 아틀랜타의 도시는 조용하고 깨끗하게 정돈된 편안한 느낌이었다. 이 느낌은 단순히 외국인의 방관자 자세 때문만은 아니었다. 아틀랜타는 숲속의 도시(“city in a forest”, “city of trees”)라고 불릴만큼 도시의 36%가 나무로 둘러쌓여 있다. 대형 빌딩 앞의 넓은 정원과 큰 나무들이 복잡한 도시 생활의 느낌을 좀 더 부드럽고 여유롭게 만들어 주는 것 같았다.

Lenox Square Mall

호텔에서 5분 거리에 위치한 벅헤드 리녹스 쇼핑몰. 블루밍데일(Bloomingdale’s), 니먼마르크스(Neiman Marcus), 메이씨(Macy’s) 등의 주요 백화점이 들어와있는 복합 쇼핑센터이다.

윈도우즈 매장, 애플 매장과 가장 큰 차이점은 앉을 수 있는 의자가 많다는 점.

새로나온 게임에 맞추어 단체로 춤을 추고 있는 윈도우즈 매장 직원들

아틀랜타는 현재 흑인이 가장 많이 사는 도시라고 한다. 호텔, 레스토랑, 택시, 상점 등 대부분의 서비스업에서 만날 수 있는 사람들은 거의 흑인이었다. (애플샵의 경우 백인 직원이 더 많았다.)

애플샵 전경

나이드신 분들이 아이패드에 많은 관심을 가지고 설명을 듣고 있었다

'맥북 에어 윈도우 디스플레이' - 공기처럼 가벼운 맥북에어

Downtown : Atlantic Station

아틀랜타는 크게 다운타운, 미드타운, 벅헤드(Buckhead) 비즈니스 구역으로 이루어져 있다. 도시의 기능이 한곳에 몰려 있지 않아, 러시아워 시간에도 도시가 복잡하지 않다고 택시 운전기사가 귀뜸해 주었다. 쇼핑, 문화, 레스토랑이 모여있는 아틀랜틱 스테이션, 국지성 소나기가 한바탕 지나간 후여서 한가한 모습이다.

아틀랜틱 스테이션 거리 모습

빵봉지에 직접 주문서를 쓰는 샌드위치 전문점 위치위치(which wich). 맛은 별로~

Barnes & Noble @Georgia Tech

책을 좋아하는 나는 여행을 가면 항상 그 도시의 가장 큰 서점을 찾는다. 지도를 보고 찾아간 BORDERS의 문이 닫혀 있었다. 다른 서점으로 가기 위해 택시를 타고 기사에게 이유를 물었다. 최근 부도로 인해 거의 모든 오프라인 서점이 문을 닫았다고 한다. 자신도 놀랐다고 한다. 지금 영업중인 서점중에 가장 큰 곳으로 데려다 달라고 기사에게 부탁했다. 그래서 도착한 곳은 조지아 공대안에 있는 반스앤노블. 택시 기사에게 내가 생각한 것보다 작다고 했다. 기사는 운전생활 10년동안 조지아 공대의 서점이 작다고 하는 사람은 내가 처음이라고 한다. 교보문고가 거짓말 안하고 한 5배는 큰 것 같다.

반스앤노블 조지아공대 지점 전경

반스앤노블 조지아공대점 전경 - 책이 반, 대학 홍보 잡화가 반

'이상한 나라의 앨리스'와 '허클베리핀의 모험' 책 표지

오래전에 읽은 고전이긴 한데, 표지가 너무 이뻐서 소장용으로 구입했다. 표지의 힘은 정말 강하다.

난장이들 화보집

난장이에 관한 아기자기한 일러스트레이션과 핸드라이팅에 반해서 구입한 그림책

Atlanta Botanical Garden

많은 관광객들이 코카콜라 박물관 또는 CNN센터를 방문하겠지만, 서울 도시 생활에 한참 찌들어 있던 나에게는 관광지보다 자연을 많이 느낄 수 있는 한적한 아틀랜타 식물원이 가장 매력적이었다. 35도가 넘는 뜨거운 날씨 속에서 장시간 동안 꽃을 감상하고 사진 찍느라 얼굴이 온통 땀으로 젖었다.

아틀랜타 식물원 정문

난(Orchid) 화원, 처음보는 다양한 형태와 색상의 난

다양한 색상으로 함박 피어있는 수국

아틀랜타 도시의 더 많은 사진을 보고 싶으세요?
웹액츄얼리 플리커를 방문해 보세요~

아틀랜타에서 열린 AEA(An Event Apart) 컨퍼런스 스케치가 Part 2 에서 계속됩니다.

웹액츄얼리팀은 지난 5월 17~19일까지 런던에서 열린 ‘FUTURE OF WEB DESIGN‘ 컨퍼런스에 다녀왔습니다. 디자이너 1명과 프론트엔드 개발자 1명이 참여했습니다. 때마침 아일랜드에서 화산이 다시 터져 가슴이 조마조마했지만, 무사히 다녀올 수 있었습니다.

이번 컨퍼런스를 통해 다시 한번 느낀 것은 글로벌 웹디자인 트렌드에 대한 수준을 절대로 놓치지 말아야겠다는 것이었습니다. 앞으로도 웹액츄얼리와 함께하는 고객분들께 더 수준높은 서비스를 해드리도록 노력하겠습니다. 이번 컨퍼런스를 통해 배우고 느낀 것 등을 4회에 걸쳐 블로그에 올립니다.

많은 관심과 격려 부탁드립니다. ^^
[편집자주]

감성 인터페이스 디자인 : 열정적인 사용자를 만드는 방법

Emotional Interface Design: The Gateway to Passionate Users

강사, 저자이면서 ‘메일침프’(MailChimp.com)의 UX디자이너인 아론 월터(Aarron Walter)가 발표를 위해 올라왔다. 생각했던 것 보다 작고 마른 체구인 아론은 안경 너머로 보이는 깊고 반짝이는 눈빛 만으로도 관중을 압도하는 카리스마를 지니고 있었다.

메일을 배달하는 침팬치 캐릭터로 유명한 ‘메일침프’는 이메일 마케팅을 효과적으로 제작, 관리할 수 있는 툴을 제공하는 웹 2.0 서비스다.

이미 전세계에 수많은 사용자를 가지고 있는 메일침프는 뛰어난 기능 뿐 아니라, 쉽고 친근한 인터페이스로 사용자들로부터 광적인 사랑을 받고 있다.

아론의 강의 ‘감성 인터페이스 디자인(Learning to Love Humans: Emotional Interface Design)’를 통해 나는 메일침프의 디자인 철학 뿐 아니라, 미래의 웹디자인의 방향에 대해 다시 한번 생각하게 되었다.

1990~2000년 대 초반의 웹트렌드는 매우 점잖고 격식을 갖추는 것이었다. 뭔가 좀 더 있어 보이게 하기 위해 공식적인 문구나 이미지들을 사용했다. 그렇지 않으면 클라이언트나 사용자들로부터 신뢰를 받을 수 없다고 생각했기 때문이다.

그러나 세상은 바뀌었다. 페이스북이나 트위터 같은 소셜 네트워크 서비스의 발달과 함께, 사람들은 좀 더 가깝고 친근하게 또는 사적으로 말을 걸어주는 브랜드나 서비스에서 신뢰를 얻고 정을 느낀다.

이런 시대의 흐름에 따라 최근 유명 웹디자이너나 웹서비스들은 각기의 개성 또는 인간미를 보여줄 수 있는 감성적인 디자인을 위해 많은 노력을 하고 있다.

케니 마이어Kenny Meyers는 유머를 통해 자신의 작업을 소개한다. (당신은 지나치게 많은 일을 하고 계십니다. 저의 도움이 필요할 때 입니다. 제가 당신을 대신해서 뻑~가게 일을 처리해 드리겠습니다. 당신은 이제 주말의 진정한 의미를 다시 찾게 될 겁니다.

Usable = Edible

(사용성만 있는 웹은 그럭저럭 먹을만한 음식에 불과하다)
우리는 그 동안 사용하기 편한 사용자인터페이스(User Interface)를 만드는 것에 많은 노력을 해왔다. 하지만 모두에게 맞는 인터페이스를 디자인하는 것은 쉬운 일이 아니다. 최근 사용자 감성 중심의 디자인 등장은 이런 프로세스에 또 한번 커다란 변화를 가져다 주고 있다.

고급 레스토랑에 갔을 때 우리는 단지 그 곳의 음식만을 기대하지 않는다. 맛 뿐 아니라, 입에서 느껴지는 감촉, 음식의 장식, 인테리어, 서비스 등 모두 훌륭할 것이라고 기대한다. 이 모든 것이 만족되는, 요리를 먹는다는 것! 상상만으로도 정말 큰 즐거움이다.

고급 레스토랑을 웹사이트에 적용해보자. 사용하기 편하면서 즐거움을 가져다 주는 웹사이트를 만든다면 사용자에게 정말 커다란 만족감을 줄 수 있을 것이다.

아론은 ‘베이스캠프(Basecamp)’와 ‘우프(Wufoo)’를  예로 들었다.

베이스캠프Basecamp(프로젝트관리 서비스): 사용성에만 포커스된 웹서비스의 예

웹액츄얼리팀도 프로젝트 관리를 위해 사용하고 있는 베이스캠프. 프로젝트를 효과적으로 관리할 수 있는 훌륭한 서비스를 제공하고 있지만, 인터페이스가 딱딱하고 건조하다.

우푸Wufoo(웹폼/설문 빌더): 사용성과 사용자 만족감을 모두 갖춘 웹서비스의 예

‘우푸’는 인터넷에서 사용자가 직접 웹폼(form)이나 설문을 만들 수 있는 툴을 제공하는 웹2.0 서비스다. 폼, 설문… 말만 들어도 딱딱하고 지루할 듯한 이 작업 과정을 우푸는 사용하기 쉬우면서 만들어 나가는 재미를 가질 수 있도록 인터페이스를 구성했다. 밝고 경쾌한 색상의 사용과, 친근한 폰트, 적절한 일러스트의 사용으로 자칫 딱딱해 질 수 있는 서비스를 놀이터처럼 즐거운 공간으로 만들어 놓았다.

우푸의 CEO 케빈 헤일(Kevin Hale)은 인터뷰에서 우푸의 디자인을 장난감 브랜드인 ‘피셔프라이스(Fisher-Price)’와 같은 느낌으로 재밌게 만들고 싶었다고 했다.

Hello, Maslow! 매슬로의 인간욕구단계설

아론은 강연에서 매슬로Maslow의 인간욕구단계설 Hierarchy of human needs 표를 설명했다.

매슬로의 인간욕구단계설(Hierarchy of human needs)

아론은 강연에서 매슬로Maslow의 인간욕구단계설 Hierarchy of human needs 표를 설명했다.
인간은 생리적 욕구, 안전욕구, 사랑욕구, 존경욕구, 자아실현욕구가 단계적으로 만족되면 마침내 행복한 단계로 인식하게 된다는 이론이었다.

아론은 이 이론을 ‘웹 인터페이스 단계에 따른 사용자 욕구’로 변형하여 표로 제시했다.

사용자 욕구단계설(Hierarchy of User needs)

인터페이스 디자인의 가장 아래 단계인 기능성(functional)부터 시작해서, 신뢰성(reliable), 사용성(usable), 즐거움(pleasurable)까지 단계별로 제공할 때 사용자의 만족감이 최고가 될 수 있다는 것이다.

전세계적으로 가장 상위 단계인 ‘즐거움’ 까지 제공하는 웹사이트나 웹 어플리케이션은 찾기 드물다.

‘개성은 감성을 기반으로 한다’고 한다. 농담을 하고, 슬퍼하고, 기쁨을 표현하고 사람들과 관계를 맺을 때 우리는 감성을 드러내고 그것은 곳 우리의 개성으로 간주되기 때문이다.

웹디자인에 감성을 구워낼 수 있다면, 우리는 각기 독특한 개성을 가진 사이트를 만들 수 있다. 그리고 그 개성을 통해 많은 장점을 가질 수 있다는 것이다.

감성 디자인 사례

Emotion in Design
아기들은 자기가 울 때마다, 부모가 달래주고, 우유를 주고, 쓰다듬어 주는 반복되는 상호 작용에 의해 안정감을 가지고 믿음을 쌓아 나간다고 한다.

이 상호 작용은 웹인터페이스에서도 동일하게 적용된다. 사용자에게 긍정적인 감성적 자극을 계속 주게 되면, 그들은 믿음을 쌓게 되고, 자신과 긴밀하고도 긍적적인 관계를 계속 만들어 나가려고 노력한다.

아론은 감성 디자인이 적용된 몇 가지 사례를 소개했다.

1. 트위터 아이폰 앱스 – Feathers

트윗의 글자수의 따라 파랑새의 얼굴 색상이 변한다.

‘페더스(Feathes)’는 사용성과 감성 디자인을 잘 조화시킨 트위터 아이폰 어플리케이션으로 유명하다. 글을 쓸 때 글자수가 증가함에 따라 귀여운 파랑새 아이콘의 얼굴색이 점점 바뀐다. 트윗의 최대 허용 글자수인 140자에 가까워지면 얼굴색이 붉은색으로 변하면서 경고를 알리는 것이다. 새의 얼굴색 변화는 사용자에게 에러를 인지할 수 있게 하는 사용성을 나타내기도 하지만, 사용자와의 감성적인 관계를 만들어 내는 장치이기도 하다.

‘트윗덱(TweetDeck)‘, ‘시스믹(Seesmic)‘ 등의 훌륭한 트위터 앱스가 많지만 Feathers만의 장점이 분명히 있다. 일부 사용자들은 트위터의 얼굴이 빨개지는 것을 보기위해 일부러 글을 많이 적기도 한다.

수치 변환 앱스 ’컨버트봇(Convertbot)’과 몸무게 변화를 보여주는 ‘웨이트봇Weightbot’ 아이폰 앱스

영화 Wall-e에서 영감을 얻은 Convertbot와 Weightbot의 디자인

수치를 변환 한다거나 자신의 몸무게 기록하고 추적하는 과정은 전혀 즐거운 일이 아니다. 하지만 영화 Wall-e에서 영감을 받아서 디자인 한 TapBots사의 이 두 앱스는 마치 로봇이 나의 지시를 받아서 수치나 기록을 보여주는 듯한 인터페이스로 구성이 되어있다. 또 로봇이 내는 효과음은 사용자들이 로봇과 상호작용을 하는 즐거움을 배로 향상 시킨다.

이러한 인터페이스 디자인을 통해 사람들은 이 앱스를 단순한 소프트웨어로 생각하지 않는다. 나의 지시를 받는 로봇으로 인식하면서 이로 인한 피드백에 감성적인 정을 느끼는 것이다.

Treats & Discovery

특별요소 배치와 발견의 즐거움

우연히 라디오에서 내가 좋아하는 음악을 듣었을 때 기분이 좋아졌던 경험이 있을 것이다. 이러한 경험은 내가 직접 음악을 저장해서 사용하는 아이팟에서는 기대할 수 없는 감정이다. 그것은 바로 ‘우연한’ 발견의 놀라움 때문이다.

사진 마니아들의 커뮤니티 사이트 ‘포토조조(Photojojo)’

‘포토조조(Photojojo)‘는 곳곳에 숨어 있는 특별한 부분들을 발견하는 즐거움을 주고 있다.
상품 사진 옆의 “learn more” 핑크색 풍선을 누르면 풍선이 상품의 상세설명이 있는 곳까지 내려간다. 이 풍선의 움직임으로 작은 모니터를 사용하는 사람은 상품 설명이 안 보일 수 있다는 사용성의 문제점을 귀엽게 해결하고 있다. 울상이던 쇼핑 카트에 상품을 추가하면 상품이 쇼핑 카트로 던져지는 모션이 보여지고 쇼핑카트는 바로 웃는 모양으로 바뀐다.

이러한 발견의 즐거움은 결제 과정에서도 볼 수 있는데, 새로운 사용자임을 확인되면 귀여운 로봇의 환영 메시지를 볼 수 있다.

메일침프(MailChimp)의 감성 인터페이스 디자인

‘특별요소 배치와 발견의 즐거움’ 은 메일침프 UX 팀에서 매우 중요한 디자인 과정으로 다루고 있다고 한다. 재치 있는 문구, 시즌별 메세지, 단계별로 다른 피드백 등은 매일 익숙하게 메일침프를 사용하는 사용자에게 발견의 즐거움을 주고 있다.

메일을 받았을 때 윈도우 창을 가로로 늘리면 메일을 감싸고 침팬치의 팔이 윈도우 창의 크기에 맞게 늘어나가다 결국에는 팔이 찢겨나가는 UX. 사용자들에게 발견의 즐거움을 제공하고 있다.

어떤 사용자는 메일침프의 특별 요소들을 찾아서 자신의 블로그에 모아놓을 정도로 애정을 보이기도 한다. 굳이 서비스를 이용하지 않는데도, 로그인을 하는 사용자가 있을 정도이다. 감성 인터페이스 디자인은 열정적인 사용자를 만드는 중요한 요소이다

The Risk of Emotion

감성 디자인의 위험 요소

웹사이트를 통해 감성을 드러내고 개성을 표현하는 것은 자칫 위험한 시도일 수 있다. 어떤 사람들은 그 의미를 파악하지 못 할 수도 있으며, 심지어 어떤 사람들은 싫어 할 수 도 있다. 그러나 이러한 디자인으로 인해 오는 감성적인 피드백은 평범한 다른 사이트에서 받는 피드백과는 분명 다른 차원이다.

글의 서두에서처럼 웹은 변하고 있고, 사람들도 이제 웹에서도 더 실제적인 감성을 주고 받기를 원하고 있다. 트위터, 페이스북으로 대표되는 현재의 트렌드가 그 방향을 말해주고 있다.
웹사이트, 앱스, 또는 브랜드에 개성을 심고, 표현하는 것은 사용자와 함께 호흡하고 공감할 수 있는 매우 강력한 방법이 될 수 있다.

Some thoughts

글을 정리하면서…
웹2.0 , 소셜네트워크, 시멘틱웹, 모바일웹… 웹은 하루가 다르게 빠르게 변화하고 있다. 이에 따른 웹디자인 트렌드도 계속 변하고 있다. 하지만 디자인 스타일이 어떻게 변하던, 보여주는 방식이 플래시던 HTML5이던 잊지 말아야 할 중요한 한가지를 우리는 너무 쉽게 간과 하고 있었다. 웹도 결국 사람과 소통을 하고 있다는 것이다. 사람들은 이제 더 이상 일방적으로 받는 정보에 만족하지 않는다. 각각의 개성을 가지고, 감성을 느낄 수 있는 디자인 요소로 좀더 친근하게 다가갈 수 있는 웹이 미래의 웹 디자인의 방향이라고 생각한다.

애플의 제품이 단지 예쁘기만 했다면 오늘날과 같은 많은 마니아층을 만들어 낼 수 없었을 것이다. 웹서비스의 애플이 되고 싶다면 웹에 감성을 실어야 한다. 함께 느끼고, 웃고, 감정을 나눌 수 있는 감성적인 UX디자인을 만들어야 한다.

애런 월터 Aarron Walter

감성 디자인

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

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

The webactually team just came back from the “Future of Web Design” conference held in London, this past May 17th to 19th. We sent our designer, and front end developer, and it was a nervous time for all of us there. We thought the Iceland volcano might go off again, but fortunately, we were able to come back safely.

We hope you all enjoy ^^

Part 1 : Play, Destroy, Create, and Socialize! : Overall thoughts on the conference

Part 2 : : “Learning to Love Humans: Emotional Interface Design” by Mailchimp’s Aarron Walter – The most inspiring session.

Part 3 : : “How to Run a Successful Web Design Business” by Headscape’s co-founder Paul Boag – Most helpful to webactually’s direction and goals.

Part 4 : “10 Tips for iPhone Interface Design” by You Know Who’s founder Sarah Parmenter

Play, Destroy, Create, and Socialize!

Photo by Stefan Nitzsche. Some rights reserved.

‘Future of Web Design‘The ‘Future of Web Design’ conference always holds a conference on the topics that our web designer and front end developers deal with. This year’s conference was on HTML5, CSS3, jQuery, UX, design, and business. For all the fields we went to lectures, workshops, design clinics and various other events of the leaders in those fields. We packed all of this into a tight three-day schedule.

Surprise! Surprise! Surprise!

We attended the conference hoping to get a great experience and learn a lot, but many new and surprising things crossed our paths during the conference.

My Two Biggest Stars!

Starting from the days when the words “web designer” were still unfamiliar, There were two men who made me feel so small and embarrassed even after having worked as a web-designer for such a long time. Brendan Dawes and Joshua Davis. Just to hear their sessions with my own ears, say a brief hello, and just know that we are in the same room together, I had already achieved half my goals this conference!

Talk – Action = Shit : Photo by Marc Thiele. Some rights reserved.

Although I missed Joshua’s workshop to attend Paul Boag’s workshop, I was resolved to hear Brendan Dawes’ session and his creativity. The key to his creativity comes from having fun while working which is to find meaning even from the small things in life (like the ‘wife’s bag’), to shape them into work, and so to create.

The secret to their genius creativity of making art by mixing design with technique, is to enjoy the process while creating

Who says the English are slow to change?

This year’s hottest issue is HTML5 & CSS3. Before the start of the conference, they asked everyone: “Those who currently design with HTML5 and CSS3, please raise your hands.” About half the people in the room raised their hands. Our front end developer who went me to the conference said, it would be hard to count on 10 fingers the amount of people in Korea who do this!

This Day, Dan Cederholm‘s session – title “How to Get Started with CSS3”demonstrated, through the demo website : Things We Left On The Moon” that with CSS3 there are many ways to express transforming, animation, and transparency. It was a lecture that even inspired a designer like me to learn the simple coding of CSS3.


Opera’s Bruce Lawson also showed us a live coding demonstration of how to put a video directly in a page without Flash or Silverlight, starting with very simple doctypes preparation, and HTML5 Validate.

The English are impervious to change. The English “choosing the old and bad over the new and good.” But their strength is that they are very rational. They think “in order to deliver information on the web, we have to be able to offer the application’s functionality while sticking to the basics.” The reason they have a big interest in HTML5 is probably because they think, “finally, the time has come to change the standards of the web.”

There’s No Wall Between Us

Another surprising thing we saw from this conference was there weren’t any speakers that presented and just disappeared like you see in Korea.

All the speakers from the conference are best in their field. They write books, give lectures, and work on several global projects (actually, I’m more curious as to how they work on so many things than the future of the web!).

However, during teatime, lunch, and even leading up to partying in the AM hours, they didn’t just leave, they socialized with people, went back and forth with their opinions, delved into deep discussions, and they did not hold back on their advice.

It seemed like the speakers didn’t see this as work and were having fun like the rest of us. Maybe it was because they also knew that it’s hard to find a place where all the people have common interests; there’s code speak; and no matter how casually you badmouth your worst clients, you’ll find good conversation.

The A-Z lecture on how to creatively and successfully grow a web design business from the cheerful Paul Boag, along with the talk on iPhone interface design that went down to the most minute details from the beautiful Sarah Parmenter, were especially helpful

Social Geeks!

Photo by Stefan Nitzsche. Some rights reserved.

It’s widely assumed that developers stay in small rooms working in the wee hours of the night, without any contact with people. But most of the people I met at the conference were all quite sociable, ceaselessly trying to communicate, getting some information, and advice, while using their smart phones and apple laptops.

Instead of exchanging business cards, they would exchange twitter or facebook ID’s on their smart phones, confirm their pictures and immediately become a follower. This is the way they build their relationships. This is the reason why there’s been such an increase in so many non-Korean webactually twitter followers.

After Conference

The co-author of “CSS Mastery”, Simon Collison(colly.com) who speaks every year at the conference, made the assessment that the conference this year – the speakers, program, location, food, networking, all aspects of the conference – was the most fun, and most well prepared conference. Of course it was great fun to talk with people, as well as everything else. He mentions that he loved everything about it on his blog.

After the conference ended, I felt empty. For three days, I was so busy absorbing information, networking, laughing, having fun, learning and being inspired together with people, I could still see them in front of me. The next day, waiting to go from Heathrow to Seoul, every spare moment I had, I checked my twitter to say hi to everyone, now back on his or her separate path home. While reading the messages I got from all the people I met, the emptiness I had was soothed. The one thing I knew for sure is that everyone will miss the time spent, just like me.

Tip! How to feel like you were just there!

Go to twitter and search using the hash tag #fowd to see a timeline of events. You can get a vivid and detailed report of what happened. Feel like you were there!

Special Thanks to Stefan and Marc

for allowing us to use their wonderful photographs on our blog.

Stefan Nitzsche : Freelance web developer, designer and consultant. More Photos at Flickr…
Marc Thiele : German graphic, web designer and author. More Photos at Flickr…

웹액츄얼리팀은 지난 5월 17~19일까지 런던에서 열린 ‘FUTURE OF WEB DESIGN‘ 컨퍼런스에 다녀왔습니다. 디자이너 1명과 프론트엔드 개발자 1명이 참여했습니다. 때마침 아일랜드에서 화산이 다시 터져 가슴이 조마조마했지만, 무사히 다녀올 수 있었습니다.

이번 컨퍼런스를 통해 다시 한번 느낀 것은 글로벌 웹디자인 트렌드에 대한 수준을 절대로 놓치지 말아야겠다는 것이었습니다. 앞으로도 웹액츄얼리와 함께하는 고객분들께 더 수준높은 서비스를 해드리도록 노력하겠습니다. 이번 컨퍼런스를 통해 배우고 느낀 것 등을 4회에 걸쳐 블로그에 올립니다.

많은 관심과 격려 부탁드립니다. ^^
[편집자주]

Part 1 : Play, Destroy, Create, and Socialize! : 전반적인 컨퍼런스에 대한 생각

Part 2 : 감성 인터페이스 디자인(Emotional Interface Design : The Gateway to Passionate Users)

Part 3 : 헤드스케이프의 공동 창업자 폴 보아그(Paul Boag)의 “성공적인 웹 디자인 비즈니스 운영하기 (How to Run a Successful Web Design Business)”

Part 4 : You Know Who 대표 사라 파멘터(Sarah Parmenter)의 “10가지 아이폰 인터페이스 디자인 팁 (10 Tips for iPhone Interface Design)”

Play, Destroy, Create, and Socialize!

Photo by Stefan Nitzsche. Some rights reserved.

‘Future of Web Design’ London 2010 Conference는 웹디자이너와 프론트앤드 개발자가 주로 다루는 토픽을 주제로 매해 개최된다. 올해 컨퍼런스의 토픽은 HTML5, CSS3, jQuery, UX, 디자인, 비즈니스. 각 분야 최고 전문가들의 강연은 물론 워크샵, 디자인 클리닉 등 다양한 이벤트로 3일간의 스케쥴이 빡빡하게 채워져 있었다.

Surprise! Surprise! Surprise!

새로운 것들을 많이 경험하고, 배울 것이라는 기대를 잔뜩 가지고 참석했음에도 컨퍼런스에서 마주친 모든 경험은 놀라움과 새로움의 연속이었다.

My Two Big Stars!

웹디자이너라는 말이 생소했던 시절부터 일을 해온 나를 한없이 작고 부끄럽게 만들었던 두 남자. 브랜든 도즈(Brendan Dawes)와 조슈아 데이비스(Joshua Davis). 이들의 강연을 직접 듣고, 짧은 인사를 나누고, 한 공간에 머물러 있었다는 사실만으로도 올해 컨퍼런스 참석의 목적은 이미 반 이상 달성한 것과 마찬가지!

Talk – Action = Shit (행동이 결여된 말은 절대 쓸모없다.) Photo by Marc Thiele. Some rights reserved.

폴 보아그(Paul Boag)의 워크샵에 참석하느라 조슈아의 워크샵은 놓쳤지만, 낙서하듯 자유롭게 풀어나가는 브랜든 도즈의 강연은 크리에이티브 그 자체. ‘부인의 가방 속’처럼 매우 사소한 생활의 한 부분에서도 의미를 찾고, 작업으로 구상하고, 만드는 그의 크리에이티브의 핵심은 즐기면서 일하는 것.

디자인과 테크닉을 신나게 버무려서 예술로 뚝~딱! 만들어 버리는 이 두 사람의 천재적인 크리에이티브의 비결은 모든 과정을 기분 좋게 즐기면서 창조해 나가는 것이다.

영국인들은 변화에 둔하다? No!

올해의 가장 뜨거운 이슈는 단연 HTML5, CSS3! 컨퍼런스 시작 전에 ‘’현재 HTML5와 CSS3로 작업하는 사람은 손을 들어보라’’고 했다. 거의 절반 정도 되는 사람들이 손을 들었다. 컨퍼런스에 함께 참석한 우리 회사 프론트앤드 개발자의 말이 한국에는 열 손가락에도 꼽기 힘들 것이라고 했다.

댄 씨더홈(Dan Cederholm)은 이 날 강연에서 “CSS3 시작하기(How to Get Started with CSS3)”라는 주제를 가지고, CSS3를 통한 변환, 애니메이션, 투명도 등의 풍부한 표현이 가능하다는 것을 데모 사이트 : Things We Left On The Moon을 통해 보여줬다. 너무도 심플한 코딩 방법에 디자이너인 나도 CSS3를 좀더 공부해야겠다는 욕심을 가지게 해 준 강연이었다.

오페라의 브루스 로슨(Bruce Lawson)도 “HTML5 웹사이트 만들기(How to Build a HTML5 Website)” 라는 주제로 정말 심플해진 docktypes 작성부터, HTML5 Validate, 플래시나 실버라이트 없이 비디오를 직접 페이지에 넣는 라이브 데모 코딩을 보여주었다.

변화에 둔감하다는 영국인들. ‘새롭고 좋은 것보다 오래된 나쁜 것을 선택한다’ ¹는 영국인들. 하지만 그들의 또 다른 장점은 매우 합리적이라는 것이다. 그들은 ‘’웹은 정보 전달의 수단으로서 기본에 충실하면서 어플리케이션 기능을 제공할 수 있어야 한다’’고 생각한다. 그들이 HTML5에 관심이 큰 이유는 아마도 ‘이제야 표준 웹의 근본적인 변화를 시도할 수 있는 시기다 왔다’’고 생각하기 때문인 것 같다.

No Wall between Us

이번 컨펀러스에서 느낀 또 하나의 놀라움은 한국에서처럼 발표만 하고 사라지는 강사들은 찾아볼 수 없었다는 것이다.

컨퍼런스의 모든 강연자들은 각 분야 최고의 전문가들이다. 그들 대부분은 책을 쓰고, 강연을 하는 등 여러 가지 글로벌 프로젝트를 진행하는 이들이다. (이 많은 일들을 다들 어떻게 해내는지 사실 그것이 미래의 웹 보다 더 궁금할 지경이다.)

그러나 그들은 티타임, 점심시간, 심지어 새벽까지 이어진 파티에서도 자리를 떠나지 않고 참석한 사람들과 어울려 끊임없이 의견을 주고 받고, 심도 깊은 토론을 하고, 어드바이스를 아끼지 않았다.

그들도 이 자리를 일로 생각하기 보다는 즐기는 것 같았다. 공통 주제에 관심을 가지고 있는 사람들이 모인 곳, 코드 얘기, 악독한 클라이언트 얘기를 아무렇지 않게 던져도 대화가 되는 곳이 많지 않다는 것은 그들도 잘 알기 때문일까?

웹디자인 비즈니스를 크리에이티브하게 그리고 성공적으로 키워 나가기 위한 노하우를 A-Z까지 아낌없이 알려 준 유쾌한 폴 보아그와 아이폰 인터페이스 디자인의 소소한 부분까지 노하우를 공개해 준 아름다운 사라 파멘터(Sarah Parmenter)의 강의는 정말 많은 도움이 되었다.

They are Social Geeks!

Photo by Stefan Nitzsche. Some rights reserved.

흔히 개발자는 골방에서 새벽 시간을 이용하여 작업을 하고, 사람들과의 접촉은 불필요하게 여긴다고 생각한다. 하지만 내가 컨퍼런스에서 만난 대부분의 개발자들은 스마트폰과 애플 노트북을 이용하여 끝임없이 소통을 시도하며, 서로에게서 정보를 얻고, 어드바이스를 받는 등의 일에 매우 사교적이었다.

비즈니스 카드대신 스마트폰으로 트위터나 페이스북 등의 아이디를 교환하고, 프로필 사진을 확인하여 바로 팔로우에 맞팔! 이것이 바로 그들이 인맥을 구축하는 방식이다. 컨퍼런스 이후, 웹액츄얼리 트위터에 외국인 팔로우 수가 많이 증가한 이유가 바로 이 때문이다.

After Conference

‘CSS 마스터 전략’의 공동 저자인 colly.com의 사이먼 콜린슨(Simon Collison)는 매해 컨퍼런스에 강사로 참여했지만, 이번 컨퍼런스가 강사, 프로그램, 장소, 음식, 네트웍 등 모든 측면에서 어느 해 보다 가장 즐거웠고 준비가 잘 되었다고 평가했다. 물론 활발하게 참여해준 사람들과의 대화도 큰 즐거움 이었고 모두를 사랑한다고 그의 블로그에 남겼다.

컨퍼런스가 끝나자 공허함이 찾아들었다. 3일 동안 빠쁘게 정보를 흡수하고, 네트워크를 쌓고, 함께 웃고, 감동을 나누었던 시간들, 사람들이 눈앞에 아른거렸다. 다음 날 히드로에서 서울까지 오늘 길 내내 틈틈이 트위터로 사람들과 인사를 나누고, 이제 각자의 자리로 돌아간 사람들이 남긴 메시지들을 읽으면서 공허함을 달랬다. 한가지 분명한 점은 모두가 나와 같은 감정으로 그 시간을 그리워하고 있다는 것이었다.

Tip! 영국에 다녀온 것 처럼 Future of  Web Design 현장감 있게 즐기기!

트위터에서 해쉬 태그 #fowd를 이용해 검색된 타임라인을 꼼꼼하게 보세요~.
컨퍼런스의 생생하고, 자세한 정보를 얻으실 수 있습니다.

Special Thanks to Stefan and Marc

for a permission using wonderful photographs to our blog.

Stefan Nitzsche : Freelance web developer, designer and consultant. More Photos at Flickr…
Marc Thiele : German graphic, web designer and author. More Photos at Flickr…

____________________________________________________________________________

1. 프랑스 작가 앙드레 모루아의 『영국사』

브랜든 도즈(Brendan Dawes) : Magnetic North의 디렉터. 
조슈아 데이비스(Joshua Davis) : Joshua Davis Studios 플래시 액션 스크립트 아티스트.
댄 씨더홈 (Dan Cederholm) : SimpleBits의 대표. 웹표준, CSS와 관련 된 여러권의 책이 출간.
폴 보아그(Paul Boag) : Headscape 공동 창업자. 팟캐스트(Boagworld Web Design Advice)에서 웹디자인 및 비즈니스에 대한 조언을 얻을 수 있다. http://boagworld.com
브루스 로슨(Bruce Lawson) : 오페라의 웹애반젤리스트 www.brucelawson.co.uk
아론 월터(Aarron Walter) : MailChimp UX 디자이너 http://aarronwalter.com
사라 파멘터(Sarah Parmenter)  : You Know Who 대표, 아이폰 인터페이스 디자이너 www.sazzy.co.uk
사이먼 콜린슨(Simon Collison) : CSS 마스터 전략의 저자.  colly.com