프린트 하기크레이그 그레넬이 2010년 웹 디자인 및 개발 분야에서 어떤 일이 벌어질지을 알아보았다. 더불어 최신 기술과 비즈니스 트렌드를 어떻게 이용하면 좋을지에 대해 산업 전문가들과 이야기를 나눈다.
우리는 격동 속에서 2010년을 맞이했다. 최악의 경제 공황은 끝났지만 회복은 더디다. 산업은 어느 정도 역경을 헤쳐 나갔으며 고객들은 웹의 효율성과 다양함의 이점을 취할 수 있었다. 이는 에이전시와 디자이너들의 역할에 따라 2010년에도 계속될 것이다. "저가 시장에서는 대부분의 회사가 예산이 빠듯할 거예요." 클리어레프트(Clearleft, clearleft.com)의 MD, 앤디 버드Andy Budd가 말한다. "마이크로 사이트의 마케팅과 무의미한 게임 프로젝트는 축소될 것이며, 대형 클라이언트들은 예산의 효율성에 초점을 맞출겁니다." 큰 회사들은 발전을 위해 그들의 사이트 전체를 새로 디자인하는 데 투자하지만 대부분은 성공률과 고객 보유력을 끌어올리는 데 핵심적인 유용성을 높일 방법을 찾을 것이라고 그가 말한다. 합병은 여러 가지 방법으로 산업에 영향을 줄 것이다.
빅 스페이스쉽(Big Spaceship, www.bigspaceship.com)의 선임 디자이너 댄 몰Dan Mall은 많은 회사들이 인터넷을 전통적인 미디어의 보조적 수단으로만 생각했지만 이제 '메시지를 퍼뜨리기 위한 주요 소스'로 생각하기 시작했으며, 웹이 ‘광고와 콘텐츠 전달의 더욱 핵심적인 부분'이 될 것이라고 본다.
이는 곧 디자이너들이 해야 할 일이 더 많아 진다는 것을 의미하지만 해피 콕Happy cog의 창립자 제프리 질드먼Jeffrey Zeldma은 그게 대형 에이전시의 부흥을 가져오지는 않을 것이라고 말한다.
"1960년대의 광고 혁명처럼 소규모 팀들이 창조적인 협업을 통해 작업을 해 나갈 거예요. 더 이상 자신 없는 분야까지 모두 맡아서 해야 할 필요성 없어지는 거죠. 디자이너들은 콘텐츠를 파악하고, 사용자와 편의성에 초점을 맞춘 더욱 포괄적인 접근 방식을 취해야 해요." 그는 통제된 워크 플로우로 인해 좌절한 많은 디자이너들이 2010년에는 자유로워 지고 동시에 자신의 일을 더욱 즐기게 될 것이라 한다. 또한 웹 디자이너들의 퍼블리케이션-그리고 애플리케이션- 만능 세대는 표현 수단을 더욱 풍성하게 하고 심화할 것이라고 내다본다. “새롭게 탄생하는 웹은 단순한 기술이 아니라 우리들의 통찰력과 창조력을 필요로 해요.”
폰트
웹 디자이너들의 선택권이 이전보다 더욱 넓어졌다. 2010년은 웹 폰트의 해가 될 것이다. "몇 년 전 W3에서 아무도 모르게 조용히 @font-face를 CSS3에 추가했어요." 폰트 뷰로(Font Bureau,fontbureau.com)의 로저 블랙Roger Black이 말한다. "IE는 IE5때부터 이를 지원했지만 MS의 EOT 포맷으로만 구현돼요. 하지만 웹킷WebKit이 최근 이를 수용했고 사파리, 파이어폭스 및 오페라도 그 뒤를 이었죠.
" 폰트덱(Fontdeck, fontdeck.com)의 공동 창립자, 리차드 루터Richard Rutter는 이를 두고 다음과 같이 이야기한다. "이제 웹 디자이너들은 이미지나 플래시에 의존하지 않고서도 더 많은 폰트를 사용할 수 있게 되었어요. 폰트덱에서는 웹사이트에 사용할 수 있는 폰트를 호스트하고 복잡한 라이센스 문제와 브라우저간 어려움을 해결해 줘요."
디자이너들은 그 무엇보다 폰트를 수용함에 있어 위와 같은 어려움들을 인식하고 있어야 한다고 블랙이 말한다. "정말 문제되는 것은 여러 플랫폼에서 폰트를 렌더링하는 것이에요. PC상에서 텍스트는 가볍고 흐리게 보입니다. 그래서 자꾸 그 크기를 키우려 하죠. Georgia 및 Verdana는 조금 예외지만 @font-face로 폰트를 다운로드 하면 자신의 시스템에서는 볼 수 없었던 폰트를 볼 수 있게 되요." 지난 여름, 블랙이 웹 폰트를 수용한 후 이런 사실을 알게 되어 MIT뉴스 오피스에 이에 대해 홍보했다. "맥에서 ITC 프랭클린(ITC Franklin)을 사용해 인디자인에서 디자인한 페이지를 HTML로 불러올 수 있었어요. 맥 사파리에서 이를 열어 보고 깜짝 놀랐죠." 그가 회상한다.
Windows에서의 초기 테스트는 성공한 듯 했지만 베타 테스트 중 쓴 잔을 마시고 말았다. “살펴봐야 할 화면이 너무 많았어요. 일부 텍스트의 형체가 사라지고 소문자 ‘c’가 볼드체 ‘o’로 보였어요." 폰트 뷰로의 데이비드 버로우David Berlow는 새 버전의 ITC 프랭클린을 완성했는데, 조심스레 온스크린 작업에 대해 암시했다. 완성 도중 여러 변형이 연구되었고 최상의 가독성을 위해 두께가 조정되었지만 mit.edu/newsoffice에서 새 웹 폰트를 사용할지, 아니면 Arial을 계속 고수할지는 시간이 지나 봐야 알 수 있다.
"텍스트는 다루기가 힘들어요." 블랙이 말한다. "자신의 맥에서 예쁘게 보인다 해서 다른 플랫폼에서까지 예쁘게 보일 것이라는 기대는 접으세요. 브랜딩의 경우라면 디스플레이에 웹 폰트를 사용하고 텍스트로 믿음직한 Georgia 또는 Verdana를 사용하면 웬만큼 해결돼요." 그는 브라우저 호환성을 해결해주고 트렌드와 새 형식에 대한 정보를 얻을 수 있다는 점에서 폰트를 서드 파티로 아웃소싱하도록 권장한다. "또한 자신의 폰트가 웹 임베딩에 사용할 수 있도록 허가되었는지 확인하세요." 그가 덧붙였다. "디자이너들이 웹 폰트에 관심을 가지기 시작한다면 웹의 모습이 완전히 바뀔 거예요."
초창기의 작은 문제들(위)
MIT 뉴스 사이트를 이용한 @font-face의 초기 테스트는 성공적이었지만, 베타 테스트 중
운영체제/브라우저 조합에서 몇몇 문제가 발생했다고 로저 블랙이 말한다.
지혜가 담긴 폰트(아래)
폰트덱은 웹에서 사용할 수 있는 폰트를 호스트하고 라이센스 문제 및 브라우저간 문제점들
을 해결해 준다.
사회적 디자인
2010년에도 페이지 디자인은 사회적 오브젝트 디자인으로의 변화가 계속될 것이다. 유튜브와 플리커, 동영상과 사진을 둘러싼 유저 인터렉션이 여기저기서 발생하고 있고, 트위터와 페이스북이 모든 활동을 사회적 오브젝트로 변환시킨다. 디자이너들은 점점 더 객체 지향 디자인에 집중한다. 덧글을 남기며 서로의 지식을 공유하는 사이트로 탈바꿈시킨다. 디자이너들은 참여를 독려할 수 있는 디자인을 추구해야 한다. 인터페이스 디자이너 조슈아 포터(Joshua Porter, bokardo.com)는 사회적 사이트의 성공을 위해 필요한 요소를 다음과 같이 꼽는다.
‘참여하고 싶은 마음이 들도록 만들기’, ‘사이트가 움직이는 방법을 이해시키기’, ‘활동적으로 만들기’, 그리고 마지막으로 ‘멤버 만들기’. 디자이너들은 구글의 A/B 테스팅과 같은 디자인 툴을 사용하고, 사용성 연구 결과를 이해하고, 사회적, 심리학적, 마케팅 연구 결과를 검토하여 디자인을 최적화하고 이런 도전에 맞설 수 있다.
성공적인 디자인은 또한 수익 창출에도 초점을 맞춘다. 배너 광고의 효과가 떨어졌고 마케팅을 위한 개인 데이터 수집이 어려워진 지금도 사람들은 여전히 입 소문에 약하다. 아마존의 ‘이 제품을 구입한 사람이 함께 구입한 제품’ 기능이 좋은 본보기가 되며, 비상업적 사이트라도 행동 양식을 연구한다면 유사한 행동 패턴을 통해 사람들의 이목을 끌 수 있다. 디자인을 통해 영향력이 있는 일부 사용자의 주목을 끌어내고, 그들을 통해 메시지를 널리 퍼뜨릴 수 있다. 영향력 있는 사람들의 행동을 통해 사회적 사이트의 수익을 극대화할 수 있는 것이다. 다시 말해 사람들의 이목을 끌 수 있는 사회적 오브젝트 디자인에 초점을 두고 사용자들이 열성적으로 활동할 수 있도록 인터렉션을 최적화하며 그리고 메시지를 널리 퍼뜨릴 수 있도록 영향력 있는 커뮤니티 리더를 찾으면 성공적인 사회적 디자인을 완성할 수 있다.
-글: 웹잼(Webjam, webjam.com)의 UX 디자이너인 쇼르스 팀머-
(블로그:svirsk.org)
2010년에 해야 할 열 가지
1 정밀한 픽셀에 대해 걱정하지 말라
카피어스의 샌디 바스머가 말한다. “모바일 장치의 크기와 브라우저 유형, 기능이 다양해져서 시각적으로 모두를 만족시킬 수는 없어요. 대신 최상의 사용성을 위해 브랜드/유저 익스피리언스를 동일하게 유지하고 최적의 활용화 방안을 연구하세요.”
2 제품 디자인을 연구하라
사이드바 크리에이티브의 댄 루빈은 다음과 같이 말한다. “어떤 요소가 사람들을 제품에 열광하게 만드는지 연구하세요. 발견한 패턴을 이해하고 가상 작업에 적용해 보면 매력적인 아웃풋을 창출할 수 있을 거예요.”
3 실제 사용자를 통해 사이트를 테스트하라
클리어레프트의 앤디 버드가 말한다. “실제 사용자를 이용해 웹사이트를 테스트하는 것은 어렵지도, 비용이 많이 들지도 않아요. 게다가 사용자 만족 및 비즈니스 성공 면에서 거대한 도움을 얻을 수 있죠.”
4 새로운 것을 시작하라
빅 스페이스쉽의 댄 몰이 이야기한다. “자신이 할 수 있다고 생각하는 일에만 얽매이지 마세요. 일러스트레이트가 낯설다면 다음 프로젝트에서는 한번 시도해 보세요. 애니메이션이 낯설다면 한번 직접 그려 보세요. 자신의 능력에 감탄할 수도 있어요.”
5 온라인을 이용하라
클레버의 톰 뮬러는 다음과 같이 조언한다. "세상이 어떻게 돌아가는지 파악하세요. 영리한 방법으로 네트워크 도구를 이용해 콘텐츠를 알리세요. 버튼 한번만 누르면 트위터, 페이스북, 텀블러, 마이스페이스 그리고 닝ning에 자신의 이야기를 올릴 수 있잖아요."
6 모바일 전략을 수립하라
닐슨 노르먼 그룹의 제이콥 닐슨이 귀띔한다. “2009년 모바일 시장이 성행하기 시작했어요. 2010년에는 비즈니스에 영향을 줄 수 있을 만큼 성장할거예요.”
7 제대로 배워라
서브스트랙트 브리스톨의 크리스 게럿은 다음과 같이 말한다. “디자인 프로세스를 도와 주는 툴이 인기를 얻으면서 사람들은 점점 게을러 지고 자신의 지식을 넘어서는 서비스를 제공하고 있어요. 이로 인해 허점투성이 사이트가 가득하죠.”
8 인터렉션을 계획하라
트윗댁의 제임스 휘테거가 알려준다. “인터렉션을 계획할 때 단순한 실물에 의존하지 말고 처음부터 시작해 보세요. 컨셉을 이리저리 수정해 나가다 보면 고객들이 원하는 바로 그 인터렉션이 탄생할 거예요.”
9 아이폰을 구입하라
파이 뉴욕의 탐 놀즈가 말한다. “2009년은 아이폰 애플리케이션의 풍년이었어요. 이제 그로 인해 탄생한 새로운 인터렉션 패러다임이 일반 사용자 인터페이스에 녹아들 차례죠.”
10 기술에 대해 두려워하지 말라
프랭키&조니의 조나단 그린이 조언한다. “뛰어난 아이디어에만 몰두하세요. 그것을 실현시켜 줄 훌륭한 프로그래머는 세상에 많다.
CA 2010년 03월호 中
'Technique > Web' 카테고리의 다른 글
| 플래시와 플리커 연동하기 (0) | 2010/06/11 |
|---|---|
| 웹 프로젝트에 텍스쳐 추가하기 (0) | 2010/04/07 |
| HTML5 Today! (0) | 2010/04/07 |
| CA 2010년 3월호 콘텐츠 : 2010년의 팁과 트렌드 (0) | 2010/03/07 |
댓글을 달아 주세요