'UX'에 해당하는 글 3건

사용자 삽입 이미지

 경험디자인의 요소(The Elements of User Experience)
 (성공하는 웹 사이트를 위한 사용자 중심 디자인. User-Centered Design for the web)

 제시 제임스 게러트(Jesse James Garrett) 지음 / 방수원 옮김


제시 제임스 게러트는 UXFactory 황리건 과장님이 뽑은 UX 분야의 가장 유명한 10인중에 6등 하신 분입니다.^^ 이 책의 첫 느낌은 UX 분야의 고전 같은 느낌입니다. 전체 190페이지로 커피 한잔을 마시는 시간으로 읽을 수 있는 책입니다.

우선 경험 디자인 요소(The Elements of User Experience)의 원본을 한번 살펴보세요. 이 그림은 웹 디자인 컨설팅 회사의 정보 설계자로 일하면서 쌓은 경험을 2000년 3월 30일에 최종 정리한 그림이라고 합니다. 가만 있자 2000년이면 UX라는 말이 없었을 것 같고 웹이라는 것도 어색할 시절 아니던가요? 어째든 저 그림을 바탕으로 이 책은 2003년에 처음 출판되었습니다. 고전이라고 할 만 합니다. 책에서 예제로 나오는 사이트도 오래된 느낌이 나고 있습니다.

1-2년전부터 유행을 하고 있는 UX라는 말은 뭔가 새로운 것, 기존에 없던 것이라는 느낌이 강했습니다. 디자인이 연관되어야 할 것 같고 창의력과 깊은 관련이 있지 않을까? 개발하고는 조금 거리가 있을 것 같기도하고. 이 책을 읽으면 UX에 대한 애매한 느낌이 사라지고 실제 과제에 적용을 할 수 있겠다는 자신감이 살짝 생깁니다.

이 책에서는 사용자의 경험을 높이는 웹사이트를 만들기 위한 5가지 단계, 전략 - 범위 - 구조 - 윤곽 - 표면에 대한 설명이 나와 있습니다. 이 5단계는 아래(전략)에서부터 시작되어 마지막 표면 단계를 거치면서 완성됩니다.

전략
 - 사이트를 운영하는 사람들이 제시하고 싶어하는 것과 사용자들이 그 사이트에서 얻고 싶어 하는 것
 - 사업의 목표, 사이트의 목표, 브랜드 아이덴티티(Brand Identity)
 - 사용자에 대한 분석, 요구사항 수집

범위
 - 전략에서 수립한 사용자의 요구와 사이트의 목적을 어떤 콘텐츠와 기능으로 웹 사이트가 사용자들에게 제공될지에 대한 구체적인 요구사항
 - 사용자 시나리오, 기능 세부 사양, 콘텐츠 요구사항, 요구사항에 우선순위
 - 소프트웨어 인터페이스로의 웹 : 기능적 세부사항 / 하이퍼텍스트 시스템의로서의 웹 : 콘텐츠 요구사항

구조
 - 인터렉션 디자인 : 있을 수 있는 사용자의 행동을 설명하고 시스템이 그러한 태도를 어떻게 수용하고 반응할 것인가?
 - 인포메이션 아키텍쳐 : 사용자들이 사이트 콘텐츠들 사이를 효과적이고 효율적으로 이동할 수 있게 해주는 구성과 계획
 - 소프트웨어 인터페이스로의 웹 : 인터렉션 디자인 / 하이퍼텍스트 시스템의로서의 웹 : 인포메이션 아키텍쳐

윤곽
 - 네비게이션 디자인 : 사용자들이 어떤 장소로 가는 능력을 제공하는 일
 - 인터페이스 디자인 : 사용자들이 무언가를 하는 능력을 제공하는일
 - 인포메이션 디자인 : 사용자들에게 관념을 전달하는 일
 - 소프트웨어 인터페이스로의 웹 : 인터페이스 디자인 / 하이퍼텍스트 시스템의로서의 웹 : 네비게이션 디자인,

표면
 - 사용자들이 제일 먼저 마주치는 비주얼 디자인
 - 배치, 시선, 컬러, 타이포 그래피, 스타일 가이드

이 5단계를 차례대로 거치면서 사이트의 목표와 같은 큰 개념에서 마지막 비주얼 디자인까지 어떤 생각을 해야하고 어떤 과정을 거쳐야 하는지 아주 잘 정리가 되어 있습니다. 특히 UX 라고 하면 비주얼 디자인과 사용자 인터렉션에 중심이 있다고 생각했지만 인포메이션 아키텍쳐와 콘텐츠에 대한 요구사항 또한 절반을 차지하는 요소라는 것을 알았습니다.

경험디자인 요소는 웹을 개발하거나 디자인하거나 기획하는 모든 분들이 읽어보기를 권합니다. 서로에게 어떤것을 요구해야 하는지 팀작업은 어떠한 순서로 어떤 내용을 다뤄야 하는지에 대한 명확한 가이드를 제공하고 있습니다. UX에 관심이 있다면 필독!

---------------

사실 2주전에 프로젝트 리더에게서 "추가로 개발하는 사이트에 대해서 충분히 논의를 했으니 스토리보드를 만들어와라!"라는 명을 받았습니다. 스토리보드를 다른말로 하면 와이어프레임이라고도 하던데요. 실제 개발/디자인에 들어가기 전에 디자이너/개발자/관리자/기획자 간의 소통을 담당하는 놈이죠.

막막합니다. 아이디어가 있고 사이트가 제공할 것들이 명확하고 이런 저런 요소들이 눈앞에 아른 거리기는 하는데 막상 그 생각들을 정리하고 종합해서 최종 스토리보드를 만든다는 것이 쉽지만은 않습니다. 아직 디자이너와 함께 일할 개발자도 정해지지 않은 상태에서 저는 "경험 디자인 요소"를 손에 들었습니다.

이 책을 믿고, 손에 들고 5가지 단계를 따라가고 있습니다. 오홋 매우 만족 스럽습니다. 회사 일이라서 구체적인 내용을 포스팅 할 수는 없지만 조만간에 한번 정리를 해서 올려보도록 하겠습니다.

WRITTEN BY
ONESTONE

트랙백  0 , 댓글  1개가 달렸습니다.
  1. 실제로 적용하는건 늘 어렵죠..호홋...
    함 간략하게 스토리보드로 셈나해주세욤~
    이게 이부분이고 이렇게 정리했고...ㅎㅎ
secret
 
사용자 삽입 이미지
Silverlight 2.0 베타의 발표가 이제 얼마 남지 않았네요. 어떤 변화가 있을지 디자이너와 개발자에게 어떤 새로운 기능을 제공할지 기대가 많이 됩니다. 그중에서 '헉 이럴수가...'하는 감탄사가 나오게 하는 새로운 기술이 있다고 전해지는데 그 중에 하나가 바로 Seadragon 이라는 기술이라고 합니다.

큰 해상도의 사진을 보는 경우 우선 전체 모양을 볼 때는 작은 이미지로 표시가 되겠죠. 이경우 전체 보기에 적당한 양의 정보를 가져와서 보여주고 줌인(Zoom-In)하면 점차 자세한 이미지의 부분을 보게된는데 그 때마다 적당한 양의 사진 정보를 가져와서 사용자에게 보여주는 기술입니다. 설명이 어렵습니다.

아래는 Seadragon 사이트의 번역본 입니다.

Seadragon은 지난 2월(2006년) Seadragon Software 인수를 통해서 수행한 인큐베이션 프로젝트 입니다. 이 프로젝트의 목적은 우리가 사용하는 스크린(벽을 덮는 큰 디스플레이에서 부터 모바일 디바이스까지)의 사용법을 바꾸것 그 이상도 그 이하도 아닙니다. Seadragon을 통해서 네트워크의 대역폭이나 데이터의 양에 관계없이 부드럽게 비주얼 정보(Visual Infomation)를 브라우징 할 수 있습니다.  
사용자 삽입 이미지

설명이 조금 막연한데요. 여기 Seadragon의 4가지 약속이 있습니다.
  1. 네비게이션의 속도가 오브젝트의 크기나 개수에 독립적이다.
  2. 성능은 단지 스크린의 픽셀수 대 네트워크 대역폭과의 비율과 관계있다.
  3. 변환(Transitions)은 버터처럼 부드럽다.
  4. 스케일링(Scaling)은 거의 완벽하고 어떤 해상도에서도 빠르다.
Seadragon 팀은 현재 DirectX 구현을 튜닝하고 있고 새로운 Windows Media Photo Format을 거의 완성했으며 Photosynth 기술과 접목시키고 있습니다. 


마지막 설명에 Seadragon 기술을 Phothosynth와 접목시키고 있다고 하는데요. Phothsynth는 컴퓨터를 통해서 많은 양의 사진을 보는 새로운 경험을 제공합니다. 3차원 공간에서 어떤 사물이나 장소에 대한 수 많은 사진을 보여 줍니다. 저의 글로는 설명이 어렵네요. 영상을 보시죠.

이 영상은 준서아빠의 블로그에서 소개된 TED 컨퍼런스 영상입니다. 초반부에 Seadragon의 데모가 보여지고 후반부에 Seadragon을 이용한 Photosynth에 대한 데모 입니다.



추가적인 데모 영상은 Photysynth 사이트에 있습니다.



세상은 변해서 사용자의 경험은 새로운 국면을 맞이하고 있습니다. 상상만 했던 것들이 실현되는 것 같습니다. 이정도도 구현을 하는데 못할게 없을 것 같습니다. 상상력이 필요합니다. 상상만하면 구현을 할 수 있을 테니까요.

WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret
Adobe Photoship Express Screenshot

Adobe Photoship Express


Adobe Premiere Express 에 관한 글에 이어서 이번에는 Adobe Photoshop Express 입니다.

기존 내 컴퓨터에 패키지로 설치가 되고 실행되던 응용프로그램들이 점차 웹으로 옮겨가고 있습니다. 저는 Google Docs의 Spreadsheet 서비스를 아주 유용하게 잘 사용하고 있어요. 용도는 용돈기입장. 파일을 들고 다닐 필요가 없어서 어디서든 용돈의 사용 내역을 업데이트 하는 용도로 잘 사용하고 있습니다. 물론 Microsoft의 Excel 과 비교할 때 기능이 많이 부족하고 사용이 불편하긴 하지만 특정 용도에는 아주 쓸만 합니다.  

Adobe Photoshop Express 도 마찮가지로 우리가 잘아는 Photoshop을 웹으로 옮겨놓은 서비스 입니다. 아직 데모 적용된 사이트가 없어서 직접 해볼 수는 없지만 스크린샷과 데모 동영상으로 그 기능을 확인해 볼 수 있습니다. 아래 데모 영상은 Adobe MAX 2007 Developer Conference에서 Geoff Baum (Adobe Product Manager)에 의해서 발표된 내용입니다.



단순한 기능 쉬운 사용법 때문에 사용자들이 거부감 없이 사용할 것 같습니다.

WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret