벡터 패턴으로 지난 디자인 리뉴얼때 디자인이 그게 뭐냐 라는 비판을 많이 받았지만 그는 꿋꿋히 디자인을 고수했고 이번 리뉴얼은 그의 디자인이 그당시 미래를 예측한 디자인 트랜드였다는 것을 잘 보여주고 있습니다.

물론 국내에도 비슷한 패턴을 즐기시는 분이 계시죠. Jay. ^^
그러고보니 제이님께서 선구자!?

최근 맘에 들었던 디자인이 케나다 웹디자이너 Jeff Sarmiento 의 새 집입니다. 약간의 빈티지 느낌이 나면서 색상조절이 잘된 사이트 같죠.
anti-aliasing 이 잘먹힌 영어폰트를 보면 부러운건 어쩔수 없나 봅니다.

얼마전 Times 지가 프린트 리디자인을 했었는데 이제 CNN 온라인 리디자인, 그럼 곧 USA Today? Washington Post? NY Times는 작년에 했지만 별로 그다지..

예전 애플 디자인들좀 뒤적 거리고자 인터넷 아카이브에가서 이것저것 뒤적였습니다.

1990년대에도 이런 강력한 메세지를 전하는 홈페이지.

그리고는 진화해버린 홈페이지

2001년 푸른 로고의 변화 뿐만이 아닌 컨텐츠 replacing 변화

그리고 아이튠즈틱 해진 더 간단한 2007년의 새 디자인. 레오파드를 예고하는 스크린샷.

“This is a truly innovative brand logo that graphically captures the essence of the London 2012 Olympic Games - namely to inspire young people around the world through sport and the Olympic values.” -International Olympic Committee President Jacques Rogge

“런던 2012 올림픽 게임의 본질을 잘 나타내는 획기적인 로고”

난 이제 젊은 세대가 아니라서 이해를 못하는건가….?

…

꿈뻑 꿈뻑. 오예……

그래 바로 이런 신선함이지….”

호주에 살고 있는 Rob Morris 의 포트폴리오/작업 사이트입니다. 처음 접하고는 반해버렸네요. 이런 감각있는 디자인이.. 눈을 땔수 없게 하는군요. 지금 제 블로그에도 있는 ‘눈만있는 이미지’는 꽤나 시선을 자극합니다. 왠지 모르게 시선이 가게되는데… 눈과 눈. 특히나 에니메이션이 가미되어 꿈뻑거리는 눈은 그 시선을 피하기 힘들죠.

괜히 semkim.net 을 뒤집고 싶은 생각이 마구드는 요즘인데. 아 마구 자극합니다..

오래보고 있으면 파리도 날라와서 이마에 앉습니다. ㅎ

이번에 옛날 곰님께서 부탁하셨던 작업을 마무리 지어보려고 노력중인데 쉽지 않군요. 한번 대충 시도했다 퇴짜 맞은적도 있고,,, ^^;; 곰님께 아직 다시 작업 들어간다고 말씀드리지 않았는데 이 포스팅보고 놀라실라,,,, 직접 메일을 먼저 날려야 할듯하네요.

ps. ilmol.com 페이지를 조금씩 손보고있습니다. “It’s still on” 에서 줄서있는 사람들과 아이, 그리고 “Stop CSS” 라는 사진으로 바꾸었는데요, 의미하는 바는,,, 비공개입니다 ^^;(혹시나 맞추시는 분이 계실지) 어쨌든 앞으로 그 부분에 재미있는 아이디어를 접목시킬 생각입니다. 예전에 3칼럼으로 리뉴얼을 해볼까 라는 생각을 했었지만 좀더 정붙이고 키워나간후에 차후에 생각해 보려고 합니다. 코멘트 부분이나 더 괜찮게 꾸며야겠네요.

정신차리고 다시 힘차게 시작해야겠습니다. 온라인뿐만 아니고 오프라인또한 말이죠.

• CSS: IE7의 출시와 함께 웹디자이너들은 여러 CSS 핵들을 지우며 레이아웃에 네게티브 마진 사용을 넓힐것이다.
• 고정 레이아웃은 너비를 더욱 늘릴것이다. 1024스크린 사이즈로 맞출것이다. 특히 아쿠아 레이아웃은 더욱 퍼저나갈것이다. Faux column(사이드바 부분이 컨텐츠 길이만큼 길게 늘어나는것) 의 사용은 줄며 더욱 간결하며 덜 함축된 레이아웃으로 컨텐츠의 중요성을 높일것이다. 네이게이션 스타일들이 바뀔것이며 푸터부분이 더욱 향상될것이다.
• 타포그래피에서는 세리프의 사용이 더욱 증가할것이며 해더로 sIFR의 사용이 더욱 인기를 끌 것이다.
• 주로 사용되는 색은 검은색(특히 배경으로), 초록색 그리고 파랑색과 오랜지색이 될것이다.
• 그래픽쪽에서는 수많은 둥근 테두리를 볼것이며 gradient보다는 단색의 사용이 많아질듯하다. 특히 태두리쪽에 말이다. 아이콘의 사용은 급증할듯 보인다.
• 자바스크립트는 그래픽쪽의 사용이 많아질 것으로 보인다. 페이지 behavior 컨트롤 이상의 것들이 사용될것이다.
• 2006년은 웹표준의 한해가 될것이며 접근성에대한 인식이 뚜렿해질 것이다.
• 마지막으로 2006년은 웹2.0과 Ajax를 확실히 정의해줄것이다. 웹사이트들은 웹어플리케이션에 가까워지며 그것들의 social 본질은 높아질 것이다.

느끼셨겠지만 많은 부분 한국의 웹 실정과 약간 차이가 난다고 생각이 되긴 합니다. 이제 웹표준 이라는것의 정착이 아직은 본격적인 시작을 앞두고 있다고 생각하며 이미 둥근 테두리의 사용이나 1024 해상도에 맞추는 부분은 한국에서는 이미 널리 퍼져 사용되고 있으니 말입니다.

일모리의 눈감고 찍어보기 일기예보

여기즘에서 일모리의 일기예보로 나가 보겠습니다. 미래를 본다는게 쉬운건 아니지만 증상들을 보며 찍어보겠습니다. 후에 돌아보며 혹 틀리게 되더래도 전혀 놀랍지 않을꺼 같습니다. 워낙 웹 이라는 곳이 급변 하는곳이니 말이죠.

• CSS 에서는 방금 언급한대로 시작의 문을 활짝 열듯 보입니다. IE7의 CSS2.+ 의 지원과 함께 많은 관련 서적과 정보들이 쏟아지겠죠. 하지만 태풍으로 몰아칠꺼 같지는 않습니다. ‘시작’이 시작되는한해가 될듯합니다. CSS3에 대한 기대감과 여러 브라우저들의 다양성으로 즐거운 두통이 찾아 오겠죠. IE7, 오페라9 과 함께 CSS, XHTML의 호환성, POSITION, FLOAT, ALIGN 이 꾸준히 ‘질문’ 란에 올라오며 토론될것입니다. 특히나 기존 테이블사용 방식의 레이아웃 구성을 탈피하려는 현상으로 더욱 그리하리라 생각됩니다.
• 시작 과정인 만큼 많은 분들이 꾸준히 table 태그를 사용하여 웹사이트를 제작하실것입니다. 오랜기간의 제작과정이 걸리는 대형사이트들은 더욱 그리하리라 생각이 됩니다. 정부 사이트에서 많은 시도를 하려 하겠지만 그래도 아직은 특별히 구분짓지 않을듯 하네요.
• 플래쉬8의 발전과 함께 꾸준히 플래쉬는 더욱 깊이 웹디자인 안으로 파고들 것입니다. 해외에서의 웹표준 인식이 더욱 강해짐에 따라 표준에 맞추어 변화되는 플래쉬를 더욱 더 잘 감상할수 있으리라 생각됩니다.
• 웹디자인에 이제 블로그가 빠질수 없겠죠. 컨텐츠를 더욱 잘 나타내어 보일수 있는 간결하고 잘 구분되어진 레이아웃이 잘 쓰이겠습니다. 워낙에 개성적인걸 좋아하기 때문에 그리 특별히 한 스타일이 블로그에서 유행을 타는건 약간 힘들수도 있지 않을지..
• 타포그라피적인 부분에서는 꾸준히 이미지로 바뀐 폰트사용이 이어지겠죠. 혹 비스타에서 기본폰트를 더욱 늘려준다면 이야기가 틀려 지겠지만 말입니다. 타포그래픽 때문인지 몰라도 통체로 만들어진 이미지의 이메일은 정말 싫습니다~
• 조심스런 예상입니다만, 팟케스팅과 같은 비디오 케스팅이 혹시나 부상하지 않을지. 만약 그렇게 되면서 여러 문제를 상기시키겠죠. 좀 이를꺼 같다는 생각도 들지만 우리나라는 고속인터넷이 깔린 환경인만큼 특별히 무시할만한 레벨은 아니라고 생각이 되네요. 괜실히 웹디자인에서 벗어나 찍어봤습니다. (물론 팟케스팅이 뜨지못하는 요인으로 비디오케스팅또한 언더에서 머무를지도 모르죠)
• 과제: 웹표준과 함께 맞추어 나갈수 있는 게시판의 보급이 시급한 부분입니다. 엠파스에서 열린 게시판 검색과 함께 커뮤니티화의 중심인 게시판을 주시하고는 있지만 표준과 함께 하지 못하는 게시판으로써는 커다란 걸림돌이 될수 있습니다.

맥텔의 시장전개와 함께 비스타, ie7의 등장, 여러 Web2.0 어플리케이션 새로운 웹브라우저들 등과함께 어떻게 이루어지느냐가 참 기대됩니다. 물론 마이크로메디아를 가지고 어도비가 어느 방향으로 틀어 나갈지도 말입니다. 2006년 너무 많은걸 바라나요 ^^ 어차피 다가오는 물결이니 지켜봐야겠죠

레이아웃이 멋지게 3단으로 진행되어 가운데의 쇼케이스된 아이템들이 눈에 들어오도록 짜여진 사이트입니다. 이미지가 많이 사용되지 않았지만 상당히 그래픽한 느낌을 전달해 줍니다. 메뉴클릭시 옆의 두 칼럼이 바뀌며 호기심을 계속 자극하고 있네요. 깔끔한 디자인 처럼 코딩또한 간결하고 알아보기 쉽도록 잘 짜여져 있습니다. 왼쪽의 ‘Download Resume’ 이력서 다운로드는 역시나 이곳을 찾는 이들을 잘 파악하고 링크를 걸어놓은 재미있는 부분이네요.

사이트를 둘러보다 발견한 부분인데, 소개부분이 div 로만 짜여져 있더군요

<div id="about">
 <div class="title2">ABOUT THINK PINK STUDIO</div><br />
 <div> My name is Emma Dobrescu and Think Pink Studio is my online portfolio and showcase.<br />
  Why Think Pink? <br />"Think Pink" is more than a cliche. It is the way to go through life and the way to see things, finding beauty in everything that surrounds you and always hoping and aiming for the best.
</div>
</div>

분명 div class=”title2″ 는 h2 의 헤더 부분으로 처리를 해주며 My name is 앞의 div 는 문단인 p 로 처리해 주는것이 더 낫지 않았나 생각을 해봅니다. 그리고 혹시나 WYSIWYG 에디터를 썼는지 DIV가 끝난후에 유난히 br 태그가 많군요.

마음에 드는부분이나 문제점등이 있으시면 답글로 나누시어 손가락 운동을 증폭 시키시기를 당부해 드립니다.

“미래를 바라보는 눈을 가진 이는, 화려한 치장으로 어워드에도 뽑히는듯 컨텐츠를 소홀히 하는것이 아닌, 오히려 컨텐츠, 즉 내용이 중요하다는걸 직시하며 최소한의 개발을 중시하는 이이다.”

이 글을 쓴 Cameron Moll 은 새롭게 리뉴얼 하는것, 리디자인 하는것이 언제나 더 발전되며 새로운 가능성을 지닌 것처럼 생각되고 있는 것에대한 의문을 제기 했습니다. 디자이너들이 얼마나 그것을 즐기고 해오는지 말이죠.

그 예로 애플사의 iLife 를 들고 있습니다. 2004년의 iLife 과 2005 년의 iLife 를 비교할때에 05 버전은 기술적인 면 보다는 인간적인, 인간의 삶에 연관된 제품임을 보시다시피 나타내고 있습니다. 04버전은 해드셋 카메라 등등이 합쳐지는 테크놀러지 같지만 05년엔 똑같은 아이탬들이 쓰이면서도 그것들은 살아숨쉬는 듯한 생명체로 덮히는듯 하여 정말 iLife, life 인생안에 담아버렸습니다. 이것은 바로 새롭게 리뉴얼하듯 새디자인이 아니라, 재구성하는것, 디자인 초첨의 위치가 바뀌어 가는것을 볼수 있습니다.

이 초점의 차이점을 ‘화려함’ 을 추구하는것과 ‘목적’을 추구하는것의 차이로 설명하고 있는데 정말 한국의 화려한 리뉴얼을 콕콕 찌르는듯 하는군요.
.

Redesigner vs. Realigner

Cameron 은 Redesigners 를 이렇게 분류합니다. 저도 그렇고 대부분의 디자이너가 그러한데요, 이 redesigner 들은 대부분 화려한 리뉴얼로 감정적인 부분을 호소합니다. 예를들어
“예전 사이트 리뉴얼 한지 2년이나 됬고 현재 담당하고 계신분들은 약간 유행에 지나갔으니 새 리뉴얼로 높은 방문자 수를 높여 새롭게 시작해야돼”
라는 아이디어를 가지고 있다는 것이죠. 사이트의 진정한 문제점을 분석하고 잡는다기 보다는 느낌, 색감, 레이아웃등으로 해결하려는 것이 바로 그 문제 입니다. 새 디자인은 반드시 사이트의 성장을 가지고 올꺼야 라는 생각. . .

반면에 Realigner 재구성하는 이들은 일단 사이트의 사용성 접근성등의 직접적인 문제점을 분석하고 유저들이 원하는 해결책과 개선책을 찾으려고 노력 하는 부류 입니다.
“시장의 변화가 다가오면서 우리 웹사이트도 그에 맞도록 수정할 부분이 있을까? 우리가 원하는 컨텐츠를 효과적으로 보이고 있는걸까? 지금의 사이트가 어떤면에서 브랜드 이미지를 높이며 어떤면에서 낮추고 있을까?”

독자분들은 어떠신지 모르겠네요. 일모리는 상당부분 redesigner 쪽이 아닐까 생각합니다. 무언가 새로이 창출하는것이 무조건 당연한듯이 시작되고 재구성하는 것은 머리에 떠오르지도 않을만큼 버릇이 되어 있는거 같습니다. Kelly Goto 라는 유명한 여성 웹컨설턴트가 있습니다. 그녀가 Web Essential 05 에서 내어놓은 세미나의 권고중의 하나가,

“당신의 웹사이트로 돌아가서 얼마나 로고가 씌였는지 꾸준히 사용되었는지 확인하세요. 로고의 사용도를 보며 얼마나 그 회사의 상품성을 중요시 여기는가를 가름할수 있습니다.”

였습니다. 그 의미가 무었이냐 하면 로고이미지는 바로 회사의 이미지로 연결이 될수 있는 정도가 되어야 한다는 것입니다. 쉽게 예를들어 구글 회사를 떠올릴때 여러 색의 Google 이라는 로고가 머리에 떠오릅니다. 오프라인 회사중에 IBM 은 남색의 안정적인 톤의 사이트가 떠오르며 Cingular 는 주황색의 아이콘이 그려집니다. 한국의 오프라인 사이트중 그러한 웹사이트가 있나요? (밑에 답글에 꼭 달아주시면 감사하겠습니다.) 이것은 사이트의 화려함이 이랬든 저랬든 사이트 이미지가 정확하게 방문자의 머리에 박힐수 있도록 웹사이트는 제작되어야 한다는 뜻입니다. 그리고 바로 그것이 리뉴얼이 되는 새 디자인이 아니라 많은 경우 약간의 재구성으로 200%의 효과를 낼수 있다는 것이죠. 물론 한국의 웹사이트들의 화려함에 묻히는게 바로 이러한 문제점이라고 생각됩니다.

성공 사례

따분한 이론을 뒤로하고 이제 Cameron 씨가 올린 예제 하나를 보겠습니다.

31Three 라는 사이트 인데 사진이 보여주듯 확실하게 Realign 재구성의 의미를 잘 나타냅니다. 원래 사이트는 테이블로 구성된 옛사이트라 업데이트가 필요했습니다. Jesse Bennett-Chamberlain은 완전 리뉴얼이 필요한것이 아니라 약간의 재구성이 필요할 뿐이라고 판단하여 사이트의 이미지와 특성을 버리지 않고 제작하였습니다. 멋지지 않나요.

두번째로, Walk America 입니다. Cameron 씨에 따르면 클라이언트의 마인드가 대단했다고 말하며 올렸습니다만, 디자인이 뭐 말이 필요 없군요.

세번째로, (이자리에 한국웹사이트중에 이러한 예에 적용되는 사이트를 넣고 싶습니다. 덧글부탁드립니다).

물론 언제나 Realign 재구성이 해결책이 아닙니다. 변화가 필요한 경우도 있죠. 큰 사례가 empas 의 변화 입니다. realign 이라기 보다는 redesign 으로 크게 좋은변화를 주었다고 생각이 됩니다. 이미지도 엄청나게 업그레이드 되었다는건 누구라도 아는 사실입니다. 멋진 변화에 축하드리고 싶네요.

시작해 봅시다

Redesigner 가 아닌 Realigner 가 되기위해서는 일단 디자인 시안에 들어가기 전, 모든것이 시작되기 전에 더욱 많은 회의시간과 토론과 정보공유, 그리고 사전조사등이 필요합니다. 과연 이 회사의 이미지가 무엇이며 얼마나 많은 사람들에게 그 이미지가 전달되어 있는가, 지금 사이트는 어떠한 문제점들이 그 이미지를 막고 있는가, 어떠한 개선을 하면 그 이미지들이 좀더 유저들에게 깊이 남을것인가, 그것이 완전한 새 디자인을 필요로 하는가 아니면 지금 있는 사이트의 이미지를 유지하며 약간의 재구성으로 더욱 깊이 유저들의 머리속에 박히게 할 것인가 등등 입니다. 이러한 과정을 거친 후의 리뉴얼은 사이트의 엄청난 힘을 가져다 주지 않을까 생각되네요. 물론 플래쉬의 화려함이 사이트의 이미지를 빼앗아 가는 마이너스 역할을 하는지도 잘 판가름 해야겠죠. 그러한 결정 후에 마지막으로 이 새로운 realign 이 얼마나 많은 유저들에게 친근감으로 다가갈것인가를 측정하면 커다란 스텝들을 다 밟는것이 되겠습니다.

새로운 리뉴얼을 바라보고 있다면 잘 고려해 보시기 바랍니다. Realign 이 맞는지 Redesign 인지 말이죠. 많은경우 완전한 새로움 보다는 예전부터 써오던 친근감이 약간의 불편함을 주더래도 유저들이 도 좋아하는것을 생각해 볼때에 realigner 의 중요함을 잘 고려해서 디자인 하시기 바래봅니다. 결국은 얼마나 유저가 만족하느냐에 따라 사이트의 성공 여부를 결정지을수 있으니까요.

아 안타깝네요. 멋진 디자이너의 사이트였는데…
추모라고 하긴 뭐하지만 저를포함해서 여기저기서 안타까워 하는군요.

피오넬님께서 이사준비를 하시는중에 후니님께서 리뉴얼을 준비하고 계셨구요. 곧 베타테스트 들어가고 오픈하지 않을까 합니다. 사알짝 봤는데 ㅡㅡb 멋지더군요. 새로운 리뉴얼인 만큼 특별한것을 공개하신다니 기대하셔도 되겠네요.
오픈되었습니다. http://hooney.net으로 다시 돌아오셨네요.

쿠키님도 미루시던 디자인 리뉴얼에 들어가셨고, 제가 실시간으로 테마의 여러가지 변형되는걸 목격했습니다. 지금것이 가장 어울리는듯 ^^ 그리고 H.Moon님그리고 bluemoon 님께서도 쥐도새도모르게 멋지게 테마를 바꾸셨고, 지윤님께서는 특별한 그룹블로깅을 준비중에 계시네요. 스케쥴 맞추시느라 쌍코피를 준비하고 계시고,, 이번에 저도 했군요.

외국에서는 Shaun Inman이 새롭게 리뉴얼을 마치고 공개했습니다. 이거 너무 깔끔하고 디테일합니다. 역시 그의 스타일대로 디자인되어 나왔습니다. 몰랐는데 (mt)도 운영하더군요. designer/developer 로써 아주 이름을 날리고 있습니다. 그리고 likejazz님이나 ceprix 님께서 말씀하셨듯이 Technorati 가 베타에 들어갔습니다.

.
여기저기서 블로그툴도 이전하시는분들도 계시고, 새롭게 스킨을 디자인 하시는분들도 계시고, 여기저기서 표준관련 새책이나 포럼, 블로그, 등등이 새싹을 트기위해서 준비중에 있기도 하고, 참 활기찬 여름이네요. 푸릇푸릇 하다못해 찜통인 듯한 여름을 새로운 시작과 함게 잘 보내시길 바랍니다.

혹시나 새롭게 리뉴얼 중이시거나 이전 준비중이시면 알려주세요. 포스팅 해드리겠습니다.