유고 나카무라의 2009년 마지막 프로젝트 오픈

Design/Web 2009. 12. 28. 14:15





유고 나카무라의 올해 마지막 프로젝트가 오픈을 했다. 사운드에 반응하는 Spectrum 알고리즘을 활용한 글꼴을 바탕으로 디자인 되었다고 하며, 전체 리뉴얼은 내년 1월 하순에 할 예정이라고 한다. 유고의 작품은 항상 느끼는 것이지만 디자인을 바탕으로 기술의 한계를 창조한다는 생각이 든다. 기술적으로 가능한 개발자라 할지라도 유고의 창조적 아이디어는 쉽게 따라할 수 없을 듯 싶다. 



Art Direction / Design : Yugo Nakamura 
Design / Programming : Sohei Kitada 
Design Assistant : Taro Yumiba 
Management : Megumi Koizumi 
Music : FPM
    

설정

트랙백

댓글

디자인트렌드 2008

Design/Web 2008. 1. 23. 19:14
디자인 트랜드 라이프스타일...
공유하기 좋은 자료인 듯 싶어서 올려 놓는다...
















사용자 삽입 이미지

사용자 삽입 이미지
    

설정

트랙백

댓글

Flickr Searcher 1.8 업로드

Project/Programming 2007. 5. 13. 13:49

사용자 삽입 이미지


사용자 삽입 이미지

사용자 삽입 이미지


Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'
version 1.8

http://dicaland.cafe24.com/flickr/FlickrSearcher1_8.swf
====================================================================================================

FlickrSearcher1_8.exe

Version 1.8  Release date : 2007/05/13
Change log
1. photo 썸네일 클릭시에 나타나는 왼쪽 중앙에 있는 information 버튼의 가독성을 위하여 색 변경
2. Search history 기능 추가 : 특정 모드(tags, name, email, nsid)를 통해 검색한 history를 저장할 수 있도록 함.
(최근 검색한 검색어와 페이지 수를 통해서 되돌아 갈 수 있도록 함)
====================================================================================================


    

설정

트랙백

댓글

Flickr의 Open API를 이용한 사진 검색 어플리케이션

Project/Programming 2007. 5. 9. 09:23



Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'


사용자 삽입 이미지
사용자 삽입 이미지

====================================================================================================
Version 1.6  Release date : 2007/05/08
Change log
1.    search mode를 tag, name, email, nsid와 같이 4개 모드로 검색 가능하도록 기능 추가.
2.    tag로 검색할 경우에는 ‘,’ 구분자를 통해 복수 tag 검색 가능 추가. ex) quality, blue, yellow
3.    author & photo information 확인 가능.
4.    author의 정보에 있는 “VIEW AUTHOR PHOTOS” 버튼을 통해 author의 사진들을 볼 수 있는 기능 추가.
5.    photo information에서 이미지의 크기별로 view가 가능하며 해당 이미지를 download하는 기능 추가.
6.    license 적용(크리에이티브 커먼즈의 저작권 규약 표시)
7.    author의 icon 이미지 표시(이미지에 대한 모든 정보를 사전에 습득할 시, 속도 문제를 감안하여 해당 이미지를 클릭한 이후 적용됨).
8.    편의성을 고려하여 1.0버전에 있던 fullscreen 모드 삭제,
9.    기타 1.0버전에 없는 다수 기능 추가.
====================================================================================================
Version 1.0  Release date : 2007/05/03
Change log
최신 버전 업데이트시 자동 알림 기능 추가 ====================================================================================================

    

설정

트랙백

댓글

블로그의 올플래시 페이지 infinite 메뉴 추가

Project/Web 2007. 4. 15. 02:26
예전 방문자 카운터 기능을 추가하면서 생각한 것이 있었다. div로 iframe을 잡고 상위 레이어를 올리면 올플래시 형태의 페이지를 만들 수 있을 거라는 생각에서 시도해 보았다.

이 구조를 넣으면서 여러가지 문제점이 생겼는데 문제점들은 아래와 같다.


1. 자바스크립트에서 플래시로 값을 넘겨주기 위해서는 플래시에서 ExternalInterface 클래스를 사용하게 된다. 이 클래스를 이용하면 html에 삽입된 javascript와 플래시간 상호 지정한 function을 호출할 수 있으며 return값도 전달 할 수 있다.
하지만 배경 화면에 해당하는 플래시에서 티스토리 스킨에 제공하고 있는 skin.html안에 삽입된 자바스크립트를 호출하는 것은 가능하나 그 자바스크립트에서 플래시로 값을 넘겨주지 못하는 문제점이 있다. 아마도 크로스 도메인 문제인 듯 싶다.

하루정도 고민 하다가 결국은 우회하기로 결정했다. 일단 하단에 있는 메뉴플래시에서 infinite 버튼을 클릭할 시에 상위에 있는 레이어를 display = block을 적용하고 플래시의 LocalConnection을 이용하여 레이어 안에 있는 플래시와 통신을 하는 방법이다.
여기도 또다시 문제점이 발생했는데 하위 플래시에서 레이어를 살리는 동시에 상위 플래시와 통신을 할 경우에는 기존에 있던 플래시가 포함된 레이어가 작동을 정지하면서 제대로 호출해주지 않는 문제가 발생했다. Display를 대신해 visibility을 이용해 보았지만 마찮가지였다.

상위 레이어가 살아났을 때 플래시에 레이어가 나타났다는 메시지를 전달함으로써 infinite의 초기 시작 모션을 적용해야 하는데 그 문제가 해결되지 않아서 발생하는 문제점이다.

익스플로러와 파이어폭스 두 브라우저에서 테스트해본 결과 두 브라우저 간의 약간의 차이가 발생했다.

그래서 LocalConnection으로 플래시간 통신을 하되 약간은 딜레이 타임을 적용하기로 하고 레이어를 살리고 초기 시작 모션들 들어가기 전에 0.5초간 로딩바를 보여주는 형태로 LocalConnection의 문제점을 해결했다. 사실 해결이라기보다는 궁여지책이다.


2. 두번째 문제는 익스플로러와 파이어폭스의 호환 문제다. document.all는 IE에서만 먹는 코딩 방식이라는 것을 알게 되었다.
보 통 IE에서 div의 style이나 레이어에 접근하기 위한 접근자 방식을 document.all.ID.style.display이런 형태로 썼는데, 이러한 코딩방식은 파이어폭스나 타 브라우저에서는 먹히지 않는 방식이다. MSDOM에서만 사용하는 것이며 W3C에서도 권하지 않는 방법이라고 한다. 우리나라의 경우는 90% 가량이 IE를 사용하고 있는 상황이기 때문에 IE를 사용하고 있다면 별 문제가 되지 않겠지만 타 브라우저를 사용하는 사용자에게는 치명적인 문제를 발생시킨다. 공든 탑이 이러한 표준 문제에서 무너질 수 있다.

W3C에서 권장하는 표준형은 document.getElementById("ID").style.display 이러한 형태로 접근하는 것이다.


3. 세번째 문제는 티스토리에 로그인한 상태에서 블로그에 접근했을 때는 오른쪽 상단에 티스토리 툴바가 보이게 된다.  테스트 과정에서 레이어의 index값을 아무리 올려도 상위에 있는 레이어보다 티스토리 툴바가 상위에 떠있는 것이다. 그래서 블로그 소스를 뒤져보니 상위에 뜨는 툴바의 index값이 무려 1000000라는 사실… 그래서 상위에 뜨는 레이어의 index 값을 1000001로 잡아서 해결했다.


4. 네번째는 문제라기 보다는 레이어를 올리는 과정에서 생겨난 부가적인 노동이다. 블로그에서 음악이 흘러나오도록 play를 시켜놓은 상태에서 infinite 페이지로 들어갔을 때는 끄고, play되고 있던 사용자라면 다시 나올 때 play를 시켜주는 것이다. 그리고 음악을 듣지 않고 있던 사용자라면 그대로 음악이 흘러나오지 않는 기능을 추가해야 했다. 그리고 블로그의 배경에서 랜덤으로 생겨나는 나비의 움직임이 infinite 페이지를 접근했을 때에 불필요하게 CPU의 낭비를 가져오고 있어서 infinite메뉴로 들어갔을 때는 나비들이 생성하지 않도록 interval을 clear시켜주고 다시 블로그로 나갔을 때는 생성하도록 설정해 놓았다.


Infinite메뉴를 추가하면서 가장 큰 문제는 자바스크립트에서 플래시로 통신하기가 어렵다는 것이 가장 큰 문제였던 것 같다. 일단 지금은 LocalConnection을 이용하여 플래시 간에 주거니 받거니 하고 있으니 나중에 알게 되면 수정해야 겠다.

Infinite 메뉴는 아직 구체적은 내용 구성과 구현 방법에 대해서는 생각해 둔 것은 없다. 일단 블로그에서 새로운 시도를 해본 것이고 캠버스에 어떤 것들을 담아갈지는 앞으로 시간 날 때 고민해 봐야 하겠다.

사용자 삽입 이미지


    

설정

트랙백

댓글

루이까또즈 브랜드 사이트

Project/Web 2007. 3. 27. 00:48
사용자 삽입 이미지

루이까또즈 브랜드 사이트의 장점
루이까또즈는 사용자 중심으로 설계하려고 노력했다.
 
사용자 삽입 이미지

기본적으로 메뉴 구조라고 한다면 위와 같이 단일 메뉴, 순차적 메뉴, 트리 메뉴, 네트웍 메뉴 등으로 나눌 수 있을 것이다. 각각 특정 메뉴로 접근하는 방식에 차이가 있다. 웹은 기본적으로 이러한 여러 가지 메뉴 구조를 복합적으로 사용하고 있는데 루이까또즈는 이러한 메뉴구조를 좀더 다른 방식으로 접근한 형태이다.

루이까또즈의 경우는 기본적으로 트리 메뉴구조를 가지고 있으며 네트웍 메뉴 구조로 접근이 가능하다. 이를 다른 형태로 표현하면 아래와 같은 형태로, 사용자는 원하는 특정 페이지로 다이렉트 접근이 가능하다.
 
사용자 삽입 이미지

이런 형태는 자칫하면 사용자가 현재의 위치를 파악하지 못하는 문제점이 발생할 수 있는데 루이까또즈는 이러한 문제점을 해결하기 위해서 사용자가 새로운 페이지로 접근을 시도할 때 하나의 규칙을 만들었다.
 
사용자 삽입 이미지

SiteMap을 보면 1뎁스와 2뎁스 모두를 세로 직렬로 배치하여 현재 위치에서 원하는 페이지로 이동할 때 컨텐츠들은 위에서부터 아래로 정렬되어 있다는 것을 사용자가 학습할 수 있도록 모션을 적용하였다.

예를 들면 현재 AD CAMPAIGN에서 HISTORY 메뉴로 이동시 현재 컨텐츠는 위로 올라가고 HISTORY 컨텐츠는 아래에서 위로 올라오게 된다. 반면 HISTORY에서 WEBZINE 페이지로 이동시에는 현재 페이지는 아래로 내려가고 WEBZINE 페이지는 위에서 아래로 내려오게 함으로써 사용자가 현재 위치에서 원하는 위치로 이동할 때, 현재의 위치를 파악할 수 있도록 하였다.

로딩바의 형태도 이러한 규칙의 일환으로 위에서 내려오는 컨텐츠의 로딩바는 아래에서 위로, 아래에서 올라오는 컨텐츠의 로딩바는 위에서 아래로 채워지게 된다.

루이까또즈에서 가장 중요한 컨텐츠인 Collection은 로딩의 순서가 왼쪽에서 오른쪽으로 이루어지며 전체 로딩이 어느 정도 진행되었는지를 사용자가 알 수 있도록 메뉴 아래에 상태를 표시하고, 사용자가 특정 메뉴의 이미지를 먼저 보기위해 접근을 시도하면 해당 이미지를 개별적으로 로딩함으로써 사용성을 높이고자 했다.

루이까또즈 브랜드 사이트의 구조는 아래와 같은 형태로 사용자가 인지할 수 있을 것이다.
 
사용자 삽입 이미지


사이트의 단점
루이까또즈는 사용자 중심의 UI로 접근을 하였기 때문에 페이지 전환시 획일적인 모션 적용으로 인하여 다소 각 컨텐츠의 재미요소가 미흡한 단점이 있다. 이는 각 페이지로 넘어갔을 때 그 페이지에 고유의 모션을 통해서 어느 정도 해소할 수는 있겠으나 그런 과정에서 기존의 컨셉트에 부합되지 않는 문제점도 발생할 것으로 예상된다.

* 정해진 일정으로 빠듯하게 작업을 진행하였으나 클라이언트의 자료수급이 제때 이루어지지 않아 오픈 시일이 연기되었고, 클라이언트의 개인적인 취향에 따른 수정과 일관성 없는 요구사항으로 인하여 전체적인 컨셉트를 훼손하는 결과를 낳았던 것 같다.

항상 이런 부분들은 아쉬움을 남기지만 갑과 을의 관계에서 진행되는 프로젝트이므로 어쩔 수 없는 아쉬움이 아닌가 싶다.

http://www.louisquatorze.co.kr/

    

설정

트랙백

댓글

2012년 디지털기기

User Interface/Etc 2007. 3. 24. 13:12
2012년 디지털기기엔 과연 어떤 변화가 있을까?

22일 '모바일 이노베이션즈 투어(Mobile Innovations Tour)'라는 주제로 서울서 열린 한국HP의 기자간담회에서 최고디자인책임자(CDO)인 스테이시 울프 이사는 “미래 모바일 환경은 통합적인 복잡함에서 벗어나 개별적인 단순함을 지향하게 될 것이며, 언제 어디서나 연결이 가능한 IT제품들이 등장하게 될 것”이라고 말했다.

"복잡한 기능을 갖춘 디지털 제품을 남녀노소 가리지 않고 능수능란하게 사용할 수 있다"(사용의 간편함)

"MP3 플레이어, 휴대용 HDD, 노트북, 디지털 카메라 등 각종의 기기들을 모두 들고 다니는 수고를 덜 수 있다. PC 모니터와 TV 등 비슷한 기능의 제품을 따로따로 마련할 필요가 없다."(기기간의 통합)

"언제 어디에서든 내가 원하는 데이터를 검색할 수 있고 서비스 받을 수 있다"(연결성의 극대화)

이것이 바로 HP가 제시한 미래 디지털 제품의 모습으로 스테이시 울프 이사는 이를 두고 ‘극도의 단순함’이라고 표했다.
사용자 삽입 이미지
[사진=HP]전시장 도우미들이 가상의 전시 모델들을 들고 있다

이 같은 주장의 이해를 돕기 위해서 스테이시 울프는 ▲무선 게이트웨이용 손목시계 ▲종이같은 두께의 디스플레이 매트▲씬 클라이언트를 장착 식탁▲다양한 방식의 정보 입력 기능을 제공하는 전자 펜▲인터넷 뱅킹이 가능한 디지털지갑 ▲데이터 베이스와 충전기 역할을 하는 스마트진열대 등의 가상의 제품을 모형으로 선보였다.

손목시계 형태인 개인용 무선 연결장치는 전화와 노트북, 라디오, TV 등의 다양한 기기를 조작하는 중앙 종합연결센터 역할을 한다.

장소와 시간에 관계없이 종합연결센터와 손목시계에 접속할 수 있는 '매트'는 평소 둘둘 말아서 가방에 넣고 다닐 수 있다. 이 매트는 큰 화면에 적합한 게임이나 기타 컨텐츠로의 접속이 용이하다.

씬 클라이언트를 장착할 경우 상단이 화면으로 바뀌는 식탁도 보는 이들의 시선을 사로잡았다. 씬클라이언트는 식탁뿐만 아니라 평면의 가구나 바닥 어디에든 적용할 수 있다.

또한 지금보다 더욱 납작한 형태의 터치스크린 태블릿 PC도 선보였다. 식탁과 일체형인 모델도 기대해 볼 수 있다고 한다.

길거리에서 바로 송금이 가능한 디지털 지갑은 금융거래의 모든 기록을 저장해 확인할 수 있으며, 각종 신용카드와 현금카드 등을 따로 발급받을 필요가 없다.

또 정보공유와 전시가 가능하며, 충전기 역할도 하는 '스마트 진열대'는 실용성 측면에서 참가자들의 높은 점수를 받았다.

스테이시 울프는 이날 발표회에서 "디자인 혁신은 미적 요소와 기능 사이에 균형을 유지하면서 최종 사용자에게 중요한 의미를 부여할 수 있어야 한다."라며 "우리의 목표는 개인과 기업에게 직관적이며, 기쁨과 안정성을 제공하는 모빌리티 제품을 개발하는 것"이라고 강조했다.

출처 : 류준영 기자   ( ZDNet Korea )
-----------------------------------------------------------------------------------
"디자인 혁신은 미적 요소와 기능 사이에 균형을 유지하면서 최종 사용자에게 중요한 의미를 부여할 수 있어야 한다."

위 이 말은 현 IT산업계에서 가장 어려우면서도 해결해야 하는 과제가 아닌가 싶다. 현재 우리나라의 IT업계에 종사하는 사람들의 환경은 그 어느 나라를 보더라도 열악한 환경이라는 생각이 든다.

실 사용자의 눈높이에 맞추기 보다는 어떠한 프로젝트를 며칠까지 완료하여 시판할 것인가에 온 신경을 쏟고 있는 듯 하다. 그러다 보면 고위 관리직에 있는 사람의 눈높이에서 기능 리스트를 만들고 그 기능리스트를 가지고 제작자와 협상을 하며(대부분의 협상 또한 기능 위주로 흐른다) 절대적으로 수정할 수 없는 최종 완료일을 향해 내달린다.

이런 작업 프로세스로 얻을 수 있는 것은 멋들어지고 엄청나게 많은 기능들의 집합체, 누구도 흉내낼 수 없는 그 복잡함이다.

인터랙션 디자이너인 스콧 맥그리거는 이러한 기능 중심적 개발 마인드가 얼마나 어리석은 일인지를 증명하기 위해서 그의 강의에서 멋진 실험을 수행했다고 한다. 그는 기능 리스트로 어떤 제품을 묘사하면서 학생들에게 즉각적으로 상상할 수 있는 제품의 명칭을 적으라고 했다.
    1)    내연기관,
    2)    고무 타이어가 달린 네 개의 바퀴
    3)    엔진과 구동 바퀴를 연결하는 트랜스미션
    4)    금속 골격 위에 설치된 엔진과 트랜스미션
    5)    운전대의 순서
이런 기능들의 나열로 말하려고 하는 그것을 묘사했다. 이쯤이면 학생들은 모두 자동차라고 떠올리며 적기 시작할 것이었다. 스콧 맥그리거는 이런 기능 나열을 멈추고, 그 대신 사용자의 목표를 몇 가지 언급했다.
    6)    잔디를 쉽고 빠르게 자를 수 있음.
    7)    앉아 있기 편리함
처음 5가지의 기능만을 듣고는 어떤 학생도 ‘좌석이 있는 잔디 깎는 기계’라고 적지 못했을 것이다. 이것만 보아도 기능보다 사용자 목표가 얼마나 더 제품을 잘 설명하는지 알 수 있다. (정신병원에서 뛰쳐나온 디자인 본문 중 부분 발췌)

비주얼 베이직의 아버지라고 불리는 앨런 쿠퍼는 제품을 만들기 위해서는 기능 위주의 개발보다도 사용성과 사용자의 목표를 반영하는 디자인이 우선되어야 한다고 강조한다. 기능 위주의 개발을 먼저 하게 되면 실 사용자를 위한 사용성과 그 목표를 잃어버린다는 이야기다.

사실 우리는 알게 모르게 엄청나게 복잡한 형태의 프로그램과 제품들을 사용하고 있다. 엄청나게 복잡한 형태가 아니더라도 우리가 충분히 그 기능에 대해 유추할 수 있는 상식을 벗어나 사용자가 전혀 예상하지 못한 결과를 가져오기도 한다. 이러한 문제점들은 대부분 기능 위주의 제품생산으로 비롯된다. 사용자가 원하고 필요로 하는 기능들이 별로 중요하지 않은 수많은 기능들에 묻혀서 쉽게 찾을 수 없거나 상식적인 로직의 흐름을 방해하는 요인으로 작용한다. 아날로그에서 디지털로 넘어오게 된 배경은 우리의 생활을 좀더 편하고 좀더 쉽게 개선하기 위함을 잊어서는 안될 것이다.

앞으로는 디자인이 산업 전반에 중추적 역할을 할 것이다.(지금도 많은 분야에서 개선을 하고 있다) 디자인이라는 것은 보여지는 것, 그 이상의 가치와 의미가 있다.


    

설정

트랙백

댓글

“잘.나.가.는.” 사이트 만들기 비법 100가지

Design/Etc 2007. 3. 8. 23:42
세계의 Top 10 뉴미디어 디자인 회사가 공개하는 “잘.나.가.는.” 사이트 만들기 비법 100가지


디지털 디자이너의 부차적인 취미 정도에 불과했던 웹 디자인은 지난 3-4년에 걸쳐 디자인 산업의 핵심으로 부각되었다. 사실 웹 디자인은 이제 고유의 구조와 제작 과정, 윤리 기준을 가진 하나의 산업이 되었다고도 할 수 있다. 단순한 판촉 도구가 아니라 비즈니스의 핵심으로, 단순한 브랜딩 전략의 한 부분이 아니라 비즈니스의 생존에 결정적인 역할을 하고 있는 존재이다. 그런데 온라인 산업은 현재의 경제적인 동향 속에서 압박감을 느끼고 있다. 많은 웹 콘텐츠 제작자들이 일자리를 잃었고 디자이너들 역시 마찬가지로 불안한 실정이다.

경쟁력을 지니면서 동시에 고객의 경쟁력도 높여주려면 최대한으로 효율적인 사이트가 되도록 디자인해야만 한다. <컴퓨터아트>는 최고의 뉴미디어 디자인 대행사에서 내놓은 100가지의 웹 디자인 팁을 모아 이번 호 특집 기사로 실었다. 이 팁들은 레이아웃, 그래픽, 정보 디자인, 내비게이션, 애니메이션, 흡인력 있는 콘텐츠, 음악과 사운드 효과, 스트리밍 미디어, 3D화 하기, 그리고 난해한 백엔드(back-end: 사용자에게 직접 보여지는 화면 이외의 기술적인 부분)의 열 개 분야로 나뉘어져 있다. 이 주제들 중 자신 있는 한 분야에 대해 각각의 에이전시가 열 가지의 팁을 제공했다. 이 팁들은 모두 어떤 한 소프트웨어에 국한되지 않는 것들이며, 사이트 구축의 전반에 적용될 수 있는 디자인과 제작 과정에 관한 것들이다. 현재의 상황에 적용할 수도 있고, 미래를 위한 참고 자료로 남겨두어도 좋을 것이다. 고객이 언제 스트리밍 미디어나 까다로운 백엔드를 요구할런지는 아무도 모르는 일이지만 팁은 여기에 모두 들어있다.

레이아웃
단도직입적으로 말해 레이아웃은 웹사이트 디자인의 핵심이다. 레이아웃은 사용자의 지각 대상으로서 웹사이트의 외관과 느낌을 결정하기 때문이다. 하지만 사이트의 레이아웃을 정한다는 것은 스케치를 하거나 제작 도구에서 버튼이나 그래픽 등을 끌어다놓는 것 정도로 끝나는 일이 아니다. 레이아웃은 기획과 팀워크, 창의력을 필요로 하는 창조적인 작업 과정인 것이다. 뉴 미디어 대행사인 레이저피시의 런던 지사에 근무하는 수석 디자이너 리차드 월렛(Richard Wallett)이 효율적인 사이트 레이아웃을 위해 다음 열 가지 팁을 내놓았다.

1. 요점을 명확히 정리한 간단한 문서를 만든다. 자신이 이해할 수 있고, 팀 전체와 고객에게 조리 있게 설명할 수 있는 것이어야 한다. 모든 결과물과 그 책임 소재를 분명히 정리한다. 이 문서는 프로젝트 전반에 걸친 안내서가 되며, 이를 토대로 프로젝트의 체크리스트를 만들게 된다. 고객의 요구사항이 변경될 경우를 대비하는 것이 될 수도 있다.

2. 제작 일정. 마감에 맞추어 일을 진행하고, 제작 기간을 고려하여 일정을 정하며, 일정을 지킨다. 모든 팀원들에게 각자 책임지고 있는 부분을 숙지시키고, 쉬운 용어들을 사용한다('계층적 결과물들을 구조화하다'가 무슨 뜻인지 도대체 누가 알 것인가?). 콘텐츠가 어디서 나오는지 확인한다. 팀원들에게 일을 분배하고 기한을 정한다. 좀 혹독하게 들릴 수도 있겠지만, 일이 매끄럽게 진행되기 위해서는 이런 것들이 꼭 필요하다.

3. 프로젝트의 영감을 얻으려면 잠시 일을 멈추고 자신이 무엇을 전달하려고 하는지에 관해 초점을 맞춘다. 어떤 단계에서든 모든 요소들을 고려하고 그것들을 순서에 맞게 준비한다. 고객들은 총체적인 솔루션을 제공받는다는 느낌을 좋아한다.

4. 총 문자 수를 정하고, 특정 플랫폼에서의 최적의 화면 사이즈를 기반으로 망을 만든다. 그리고 테스트해 본다. JPEG 파일의 한계를 고려하고 다시 테스트한다. 웹 페이지의 넓이를 염두에 둔다. 드림위버나 고라이브를 사용해 기본형을 만든다. 기본형을 작성하면 콘텐츠가 어떻게 이동하는지 감을 잡을 수 있다. 플래시나 퀵타임 등등의 다른 미디어를 넣을 작정이라면 가로 세로 비율을 고려한다(팁 6번을 볼 것).

5. 일러스트레이션이나 사진에 투자한다. 이 요소들은 감성을 자극한다. 정해진 레이아웃 안에서 다양하게 실험해 본다. 좋은 이미지는 그 안에 스토리를 가지고 있다. '나는(사용자는) 이것을 어떻게 받아들이는가?', 그리고 '시공간의 느낌이 들어있는가?'라는 질문을 스스로 해본다. 뭔가 신선한 것을 시도해 본다. 지나치게 화려한 모음집 이미지(stock images: 한 장, 혹은 여러 장의 CD에 연관된 이미지들을 모아놓은 것으로, 한번 구매하면 반복해서 사용할 수 있다)의 사용은 자제하도록 한다

6. 템플리트를 만들면 시간도 절약될 뿐더러, 컨텐츠가 늦어지더라도 큰 문제가 생기지 않는다. 고객이 제공할 원고나 필요 자료 등이 늦어지게 되면 프로젝트 일정이 묶여버린다. 이럴 경우를 각 포맷들과 그 비율들을(예를 들면 퀵타임 무비에는 16:9/4:3의 비율) 알아두어 대비한다. 가로 세로 비율은 망을 작성하는 출발점이 되기도 한다(팁 4번을 볼 것). 레이어의 사용도 좋은 대비책임을 염두에 둔다.

7. 컬러 팔레트. 216 컬러에만 집착하지 말 것. 한 색은 투명하고 다른 한 색은 불투명하게 사용해보자. 이것은 하프톤 스크린(halftone screens: 신문 등의 인쇄에 쓰이는 망점. 두 가지 색을 작은 점들로 인쇄해서 중간 색으로 보이게 한다)과 유사한 기능을 해서 반투명한 느낌을 줄 수 있다. 투명도와 질감, 형태 등을 이용해 계층적으로 영역 구분을 할 수 있다. 사용자가 웹페이지를 인쇄해야 할 경우를 고려해서 겹쳐진 부분이 회색이 되지 않도록 한다.

8. 대화성(interactivity). 사용자의 입장이 되어서, 어떻게 정보를 찾아가게 될지를 생각해 본다. 세 가지의 내비게이션 시스템을 고려해보고, 기본형을 만들어 효율성을 체크한다. 고객이나 제작 팀 모두가 이 문제에 집중해야 하며, 내비게이션 구조를 정확히 보여주는 것이 매우 중요하다.

9. 지금까지는 모두 너무 논리적인 이야기들이었다. 이제 여기에 진짜 한가지를 더해야 한다. 바로 당신이 '최고'가 되기 위해 필요한 것이다. 당신을 당신의 경쟁자들과 차별화시키는 요소 말이다.

10. 확장성. 솔루션은 여기서 끝나서는 안된다. 고객에게 제공하는 솔루션을 항상 전체적인 하나의 패키지로 생각해야 한다. 인쇄물, 오디오, 스트리밍 미디어, 방송, 광고 등등에 이르기까지... 그것이 고객이 당신을 다시 찾게 되는 이유이기도 하다.


그래픽
웹 그래픽은 일종의 아이러니다. 쓸만한 사이트를 방문한 사용자라면 훌륭한 그래픽과 매혹적인 환경을 원하겠지만, 한 페이지에 많은 그래픽을 넣을 수록 다운로드 시간은 길어지고, 그렇게 되면 사용자는 참지 못하고 다른 사이트를 찾아가게 된다. 훌륭한 웹 디자인이란 그래픽을 적절하게 사용하면서도 그것에서 최대한의 효과를 끌어내는 것이다. 허브의 디자이너들이 제안하는 그래픽/이미지 압축에 관한 열 가지 지침을 소개한다.

1. 이 포맷이 적당한 포맷일까? JPEG 포맷은 사진이나 다양한 컬러나 톤의 이미지에 적당하다. 수백만의 색을 지원하며 GIF 포맷보다 훨씬 다양한 단계의 압축을 지원하고, 화질을 유지하면서도 빨리 다운로드된다.
GIF 포맷은 넓은 면이 한가지 색, 혹은 제한된 몇 가지의 색으로 이루어져 있을 경우 적합하다. GIF 포맷은 비손실 압축 알고리즘을 사용하므로, 경계선이 뚜렷하고 깨끗하게 나와야 하는 그림이나 글자의 경우 JPEG보다 효율적이다. GIF 포맷은 투명한 부분을 지정할 수 있다는 장점도 가지고 있다.

2. JPEG 포맷은 또렷한 이미지보다는 흐릿한 이미지를 잘 압축하므로, 이미지를 흐려 압축 한다. 대부분의 웹 디자인 도구에서는 단계적으로 흐리기 효과를 주는 기능이 있다. 미리보기와 파일 크기를 고려해가며 적절히 조절한다. 이렇게 하면 화질에는 큰 영향 없이 파일 사이즈를 줄일 수 있다.

3. GIF 파일 정보는 왼쪽에서 오른쪽으로 기록된다. 따라서 이 방향으로 요소들이 반복되면 좀더 많이 압축될 수 있다. 즉, 수직이나 불규칙적으로 반복되는 경우보다 수평으로 동색이나 무늬 등이 반복되는 경우에 압축률이 더욱 좋아진다는 말이다.

4. GIF 파일로 몇 가지 색이나 사용할 수 있을까? 세 가지 색 이미지를 256 컬러의 GIF로 저장한다면 파일 사이즈는 그만큼 커지게 된다. GIF 파일로 저장할 때는 이미지의 질에 지장을 주지 않는 한도 내에서 최소한의 색만을 사용하도록 바꾸는 것이 좋다. 디더링(dithering)을 줄여본다. 디더링을 줄이면 그만큼 이미지 안에서 한가지 색으로 된 면이 늘어나게 되므로 압축률도 높아지고 파일 사이즈도 줄어든다.

5. 그래픽 프로그램의 최적화 기능을 최대한 이용하도록 한다. 어도비의 이미지레디 3(포토샵 6와 함께 제공됨)에는 '차별적 옵티미제이션(Optimisation)' 기능이 있어서, 한 이미지 안에서도 부분마다 다르게 압축 수준을 지정할 수 있다. 이렇게 하면 화질은 최대로 보존하면서 파일 사이즈를 줄일 수 있게 된다.

6. PC에서는 Mac에서보다 이미지가 훨씬 어둡게 보인다. 매크로미디어의 파이어웍스는 다른 시스템에서 이미지가 어떻게 보이는지를 미리 볼 수 있다. Mac에서 이미지가 어떻게 보일지 알아보려면 View > Mac Gamma를 선택한다. Mac의 경우, PC에서 이미지가 어떻게 보이는지 보려면 View > Windows Gamma를 선택하면 된다. 양쪽 플랫폼에서 최적의 상태로 보여지도록 이미지의 레벨을 조절한다.

7. 간혹 아주 큰 이미지를 써야만 할 경우가 있다. 이럴 때는 점차적으로 보여지는 GIF이나 JPEG을 사용해 사용자가 기다리는 시간을 좀더 짧게 느껴지도록 할 수 있다. 이 포맷들은 처음에는 저해상도의 이미지로 표시되고 점차 완전한 이미지로 변하므로, 사용자가 완전히 빈 페이지만 쳐다보고 기다리는 것보다는 덜 지루해 하게 된다.

8. 큰 이미지나 이미지 맵을 사용하려면, 이미지를 작게 자르도록 한다. 전송되는 시간은 같지만 이미지 조각들이 각각 조금씩 전송된다.

9. 이미지 태그에 높이와 넓이를 써주도록 한다. 브라우저는 이를 인식해 이미지가 들어갈 정확한 자리를 남겨놓고, 문자를 배열한다. 즉 사용자는 이미지가 모두 나오기를 기다리지 않고도 컨텐츠를 읽을 수 있게 되는 것이다.

10. 캐쉬를 최대한 이용한다. 다른 페이지에서 쓰였던 그래픽 파일들을 그대로 재사용하면, 이미 사용자의 캐쉬에 저장되어 있으므로 더 빨리 나오게 된다.


정보디자인
정 보 디자인은 부담스런 주제처럼 들리지만, 사실 상식 선에서 해결할 수 있는 문제이다. 디자이너들이 저지를 수 있는 가장 큰 죄악은 사용자를 혼란스럽게 하는 것이라고 생각들 하지만, 신경 쓰지 않은 디자인을 가지고는 사용자들에게 완전히 잘못된 내용을 주게 된다. 사용자의 관점을 고려하면서도 사이트 구조가 사용자에게 어떤 종류의 내용을 보내고자 하는지를 알아야 하겠는데... 정보 디자인을 전문으로 하는 회사 블랙 아이디에게 열 가지 팁을 부탁했다.

1. 특정 기능을 수행하는 사이트를 개발할 때 중요한 정보를 모호한 위치에 숨기지 않는 것이 중요하다. 규정이나 설명서 등은 디자인을 망친다는 이유로 종종 구석에 위치시키고는 한다. 절대 중요한 정보를 숨기지 말라.

2. 정보 디자인의 규칙 중 가장 유명한 것이 '세 번 클릭으로 원하는 정보에 도달하도록' 하라는 것이다. 이 규칙은 무시하지 않는다. 사용자가 무엇인가 하려고 할 때 수많은 화면을 거쳐가야만 한다면, 그 사용자는 다른 곳으로 가버릴 것이기 때문이다.

3. 사용자가 행동을 취하도록 하는 버튼(calls to action)이 매 페이지마다 있어야 한다. 그렇지 않으면 사용자는 페이지를 보고 나서 '그래서?'라고 생각할 것이다. 사용자가 회원 등록을 하거나 물건을 사거나 사이트의 어떤 기능을 사용하도록 하려면, 가능한 모든 페이지에 그것을 홍보해야만 한다.

4. 내비게이션 요소들이 페이지 내에서 한 눈에 들어오지 않는다면 사용자는 그것을 볼 수 없고 따라서 찾아가지도 않게 된다. 내비게이션 도구를 찾기 위해 스크롤하게 만드는 것은 절대 금물이다.

5. 사이트의 디자인을 잘 하는 것은 중요하다. 하지만 사용자가 페이지를 보고 난 후 이것이 무엇을 하려는 사이트이며 자신이 무얼 해야 할지를 모른다면 그 웹사이트는 실패한 것이다. 단순하고도 정확하게 사용자가 해야 할(할 수 있는) 것들을 표시해 주어야 한다

6. 모호한 제목은 처음 방문하는 사용자에게 혼란만 준다. 내비게이션 제목에는 간단한 단어를 사용하고, 제목을 보고 어떤 페이지인지 정확히 알 수 있도록 해야 한다.

7. 많은 사이트들이 방문객에 관한 정보를 수집하는 것을 목적으로 하고 있다. 장황한 양식으로는 이 목적을 달성할 수 없다. 작성해야 하는 양식을 짧고 간단하게 하고, 사용자가 자신의 정보를 제공할 만한 가치나 보상을 제공하도록 한다.

8. 사람들은 인터넷을 '읽지' 않는다. 읽어야 할 필요가 있을 때는 프린트하게 마련이다. 긴 텍스트 대신 짧은 설명을 달고 사용자가 원할 때 기술적인 문서나 멋진 산문들을 다운로드해서 볼 수 있도록 하면 좋다.

9. 사용자에게 신뢰감과 친근감을 주기 위해서는 내비게이션과 페이지 레이아웃의 일관성이 필요하다. 페이지가 바뀔 때마다 내비게이션이나 정보 디자인을 찾아 헤매는 것은 혼란스럽고 짜증나는 일이다.

10. 마지막 팁은 정보 디자인이기보다는 정보의 표시에 관한 것이다. 웹사이트에 엄청난 경비를 들이는 세계 최대의 기업 사이트에서부터 침실에서 만들어지는 동호회 사이트에 이르기까지, 이 모든 사이트들이 문법이나 철자 오류를 가지고 있다. 이런 오류는 사이트 전체의 질을 떨어뜨린다.


내비게이션
내비게이션 구조를 디자인하는 것은 매우 재미있다. 우주선의 계기판 모양에서 동굴 벽화에 이르기까지 다양한 내비게이션 구조들이 있어왔다. 내비게이션을 잡는 것은 정보 디자인 과정과 매우 흡사할 수도 있지만, 내비게이션은 사용자의 흥미를 끌기 위해 눈에 보이는 시각적 은유(metaphor) 까지를 사용한다. 영국에서 가장 잘 알려진 웹디자인 대행사인 딥엔드에게 내비게이션에 관해 물었다. 런던 딥엔드의 토니 필립스 (Tony Philips, 디자인 디렉터), 제인 오스틴 (Jane Austin, 인터랙션 디렉터), 빅토리아 잭 (Victoria Jack, 인터랙션 디자이너), 로렌스 톰슨 (Laurence Thompson, 디자이너)에게 감사를 전한다.

1. 방문객을 설정하라. 이 사이트는 누구를 위한 것인가? 사용자의 유형을 정의함으로써, 사용자가 이 매체에 얼마나 친숙한지, 그들이 이 사이트에서 얼마만큼의 시간을 보내는지, 그리고 사이트의 기능을 얼마나 이해하고 있는지의 관점에서 그들에게 적합한 내비게이션 시스템을 만들 수 있게 된다.

2. 기능을 설정하라. 이 사이트는 무엇을 하는 사이트인가? 사용자들이 내비게이션에서 기대하는 것은 무엇인가? 사용자의 구매 의사를 이끌어내야 하는가? 혹은 사이트를 둘러보거나 즐기게 만들 것인가? 초기에 사이트의 기능을 정의하면 그에 따라 다른 것들을 결정할 수 있게 된다.

3. 명확한 분류와 제목을 사용한다. 목표가 되는 사용자가 이해할 수 있는 용어와 언어를 사용하도록 한다. 시각 언어의 일관성 역시 중요하다. 서체의 선택, 컬러의 사용, 간단한 롤오버 등에서 일관성을 줄 수 있다.

4. 위치와 배열에 일관성을 지킨다. 모든 페이지에서 글로벌 내비게이션(Global Navigation: 사이트 전체에 걸쳐있는 내비게이션)과 로컬 내비게이션(Local Navigation: 어떤 섹션이나 페이지에만 존재하는 내비게이션) 요소에다 일정한 위치와 순서를 정해 놓는다. 이렇게 하면 첫 페이지에서 다른 페이지로 이동한 사용자가 컨텐츠의 범위를 정확하게 알 수 있고, 따라서 친숙함을 줌으로 원하는 정보와 대화의 경험을 느낄 수 있다.

5. 다른 관련된 컨텐츠로의 링크를 생각해 본다. 아마존 웹사이트([w]www.amazon.com)가 좋은 예이다. 이 사이트는 시각적으로는 매우 평범하지만 매우 효율적인 구조로 구성되어 있다는 것을 알 수 있을 것이다.

6. 많은 사이트들이 좀더 감성적인 사용자 경험(User experience)을 이끌어내기 위해 상상력과 창의력을 동원해 내비게이션 시스템에 접근한다. 탱고 웹사이트 ([w] www.tango.com)를 보자. 이 사이트는 컨텐츠와 내비게이션 도구들에 장난스러운 그림이나 캐릭터를 사용해 유머러스한 느낌을 주고 있다.

7. 사용자로 하여금 컨텐츠를 자신에 맞게 조정할 수 있도록 하는 것이 좋을 때가 있다. 타이포그래픽 56 웹사이트(Typographic 56 사이트), [w] www.typographic56.co.uk)는 국제 타이포그래픽 디자이너 모임(International Society of Typographic Designers)을 위해 만들어진 것으로, 사용자가 정보의 양과 순서를 선택할 수 있도록 되어있다.

8. 가끔 색다른 시각적 메타포를 찾아보는 것도 흥미로운 결과를 만들어낸다. 비어 이즈 라이프(Beer is Life) 사이트, [w] www.beerislife.co.uk)는 학생들을 위해 만들어졌는데, 내비게이션 요소의 하나인 '학생관'은 그들을 염두에 두고 디자인된 것이다. 다른 웹사이트들은 기능과 콘텐츠에 기반해서 은유적인 내비게이션 구조를 만든다. 디자인과 아트 디렉션 웹사이트 (Design and Art Direction Website), [w] www.dandad.org에서 딥엔드는 '연필을 굴려서' 다른 섹션으로 이동할 수 있는 메뉴를 선보였다.

9. 내비게이션 시스템은 종종 이야기의 형태를 띠기도 한다. 프렌치 커넥션 사이트, [w] www.fcukingkybugger.com은 이야기 중간에 사용자가 줄거리를 선택할 수 있고, 그에 따라 결과가 달라지게 되어 있다.

10. 내비게이션의 한계를 넘어, 인터랙티브 사운드를 사용하여 완전히 실험적인 내비게이션 시스템을 만들어내는 것도 가능하다. 새로 나온 소프트 드링크, 카본(Carbon)을 위해 딥엔드에서 제작한 웹사이트, [w] www.carbon-stimulation.com은 사용자가 내비게이션 요소들을 발견하고 즐기도록 되어있다. 사용자는 시각적, 청각적인 피드백을 해석하고 메뉴를 선택할 수 있다. 또 하나 눈 여겨 봐 둘만한 사이트로는 [w] www.copyrightdavis.com이 있다.



애니메이션
애니메이션으로 인해 웹은 활기를 띠게 되었다. 하지만 디자인이 잘된 웹사이트라도 완성도가 떨어지는 애니메이션이 들어가면 격이 떨어지게 마련이다. 애니메이션은 다운로드 속도를 느리게 하고 어떤 경우는 플러그인을 필요로 하기도 하며, 가장 나쁜 것은 몇 가지의 '단순하면서도 효과적인' 애니메이션 스타일이 웹사이트 전반에 걸쳐 퍼져 있다는 점이다. 현재의 웹 애니메이션이 필요로 하는 것은 독특함이다. 마티니의 멀티미디어 팀장인 벤 애덤스(Ben Adams)의 조언을 들어보자. 일반적인 조언에서 시작해 아홉 가지의 플래시 관련 팁을 제공한다.

1. 웹사이트를 제작할 때 가장 중요한 결정 사항이 있다면 '애니메이션을 넣을 것인가 말 것인가'이다. 이것은 매우 결정하기 쉬운 문제인 것 같지만 개발 시 이 문제를 고려하지 않을 경우, 결과적으로 어지럽거나 구토를 유발할 것만 같은 페이지에 말도 안 되는 내비게이션이 나오는 경우가 허다하다. 신중히 생각하고 어떤 사용자들을 겨냥하고 있는지를 명확히 한 후 그들에게 어떤 시각적 경험을 선사할 것인지를 정한다. 속도와 플러그인, 브라우저, 그리고 시각적 효과와 파급 효과를 고려한다.

2. 처음에 종이 위에 스토리보드를 그려 주제를 강력하고 훌륭하게 발전시켜 나간다. 작은 크기로 대강 그려가면서 무대와 장면, 애니메이션을 기획한다. 아이디어를 위해 영화나 전통 TV 애니메이션 시리즈들을 보는 것도 좋다. 영화나 전통 애니메이션 작품들을 보는 것은 효과적인 카메라 각도나 편집을 위해 특히 유용하다.

3. 기본적인 얘기이나, 처음 무비를 제작할 때부터 Modify Movie 메뉴에서 초당 프레임 비율을 설정하도록 한다. 대개 초당 20이나 24 프레임을 쓴다. 단순한 플래시 무비에서는 최소 12fps 정도를 주면 CPU의 부담을 줄이게 되어 낮은 컴퓨터 사양에서도 재생할 수 있게 된다.

4. 플래시에서 심벌(Symbol)을 흐릴 때 알파(Alpha) 대신에 틴트(Tint)로 변화시킨다. 이렇게 하면 CPU의 처리 시간을 줄일 수 있다. 예를 들어 엷거나 흰 배경 색에서 심벌을 페이드아웃 시킬 때 틴트를 흰색으로 주면 같은 효과를 얻을 수 있다. 대부분 알파를 사용하는 것보다 이 방법을 쓰는 것이 효과적이다.

5. 이즈인과 이즈아웃(Ease In & Ease Out: 플래시의 Modify 메뉴에서 Frame Motion과 Tweening 부분에 있다)의 차이를 알아야 한다. 움직임이나 중력을 표현할 경우 이 두 옵션을 적절히 사용하면 큰 효과를 볼 수 있다. 간단히 말하면 이즈아웃은 끝으로 갈수록 천천히 움직이는 것이고, 이즈인은 천천히 시작되어 빨라지는 것이다.

6. 오브젝트의 움직임을 끝내거나 화면에서 페이드아웃 시킬 경우 마지막에 빈 프레임을 넣어준다. 더 이상 쓰이지 않는 오브젝트가 화면에 남아있으면, 줌 효과를 주거나 다른 요소에 트위닝 효과를 줄 때 처리 속도에 영향을 주게 되어 애니메이션의 재생 속도가 느려질 수 있다.

7. 음향 효과 역시 훌륭한 애니메이션의 중요한 요소인데, 종종 무시된다. 사운드를 정확한 키프레임에 위치시키는 것은 정말 큰 차이를 가져온다. 공들여 사운드를 편집하고 애니메이션 이벤트와 일치하는 키프레임에 사운드를 넣는다.

8. BMP나 JPEG 위에서 형체를 애니메이션화 할 때. 먼저 BMP(혹은 JPEG)를 브레이크 어파트(Break Apart) 해준다. 이미지를 선택하고 그룹화 한 후 심벌로 변환한다. 효과(Effects) 메뉴에서 알파치를 99퍼센트 이하로 낮춘다. 이렇게 하면 벡터 그래픽이 움직일 때 비트맵이 몇 픽셀씩 움직이는 현상이 없어지고 자연스럽게 된다.

9. 캐릭터 애니메이션. 캐릭터를 몇 개의 부분으로 나눈다. 캐릭터가 얼마나 정교하게 움직일 것인지를 결정한 후 화면상에서 어떤 부분들이 움직이거나 이동할지를 정한다. 예를 들어 캐릭터를 눈 (깜빡일 때), 입과 턱 (립싱크 할 때), 머리, 몸통, 팔, 손, 다리, 등등으로 분리시킨다.

10. 아웃라인을 그리기 위해 플래시의 라인 도구를 이용할 때, 크기를 확대/축소하거나 줌 효과를 주면 경계선이 왜곡된다는 것을 알아야 한다. 가장 가는 선(hairline)의 경우 100 퍼센트에서는 매우 자세하게 나타나지만 이미지의 크기를 축소하면 선이 너무 굵어진다. 그러므로 작은 이미지는 너무 자세히 그릴 필요가 없다. 파일 크기만 커진다.


흡인력 있는 콘텐츠
'흡인력 있는 콘텐츠(Sticky contents)'라는 말은 오히려 다르게 해석될 의미가 있는 말이지만, 이제는 확실히 굳어진 인터넷 용어 중의 하나가 되었다. 웹사이트에서 게임이나 재미있는 장치들을 제공해서 방문객들이 오랫동안 머물게 하고 재방문하도록 하는 수법은 몇몇 웹 디자인 대행사들 사이에서 거의 예술의 수준으로 끌어올려지고 있다. 이 분야의 유명한 선두 주자의 한 명인 브렌든 도즈(Brendan Dawes)는 전에 Subnet에서 일했고 지금은 맨체스터에 있는 마그네틱 노스의 제작 감독으로 있다. 그의 열 가지 팁을 들어보자.

1. 콘텐츠를 자주 업데이트한다. 콘텐츠가 항상 똑같다면 아무도 그 사이트를 찾지 않을 것이다. 그러려면 헌신적인 편집자들로 이루어진 팀이 필요하다. 만약 작은 회사나 집단일 경우는 방대한 주제의 콘텐츠를 보유하고 있는 [w] www.moreover.com 등의 사이트와 계약을 맺고 콘텐츠를 제공받을 수도 있다.

2. 방문객에게 회원 등록을 하게 하고 사이트의 업데이트 소식을 이메일로 알려준다. 왜 회원 등록을 해야 하는지와 회원 등록을 할 경우의 이익, 그리고 회원의 이메일 주소를 다른 곳에 누출시키지 않는다는 것을 알려준다. 하지만 꼭 회원 등록을 하지 않아도 사이트를 이용할 수 있다는 것을 확실히 해둔다. 그렇지 않으면 사람들은 사이트를 외면한다.

3. 플래시 기반의 사이트를 만들 작정이라면, 첫 페이지만은 빨리 뜨도록 하는 것이 좋다. 방문객들이 콘텐츠에 흥미를 갖게 된 후 다른 섹션들에 좀더 무거운 콘텐츠를 올려도 된다. 방문객들이 뭔가 흥미를 느낄만한 것이 있다는 사실을 일찍 깨닫도록 하라는 것이다.

4. 사이트에서 게임을 제공한다면, 최고 점수를 보여주는 페이지를 만들어서 게임에 들이는 사용자들의 노력을 기록할 수 있도록 한다. 이렇게 하면 사용자들은 그 사이트에 다시 들어와서 자신이 몇 위나 되는지 확인하게 된다.

5. 사이트에 뭔가 독특한 것을 넣어서 사람들이 그 기능을 사용하기 위해 사이트를 방문하도록 만든다. 이 방법은 사이트가 니치 서브젝트(niche subject: 규모는 적지만 시기 적절함과 독특함으로 인해 수익 가능성이 있는 분야)에 관한 것일 때 특히 효과적이다. 사이트에서 제공하는 동시 메시지 서비스나 메시지 포럼 같은 것이 부가 서비스의 좋은 예이다. 사이트에 메시지 포럼을 넣는 것은 충분한 수의 고정 방문객이 있을 경우, 항상 새로운 읽을거리가 있다는 것을 의미한다.

6. 다른 사이트들에서 제공하는 유틸리티를 사용하면 컨텐츠를 항상 새롭게 유지할 수 있다. [w] www.blogger.com에서는 멋진 웹 로그 유틸리티(log utility)를 제공한다. 이 유틸리티를 자신의 사이트에 붙일 수 있고, 지난 로그들을 관리할 수도 있다.

7. 컨텐츠에 쏟는 노력의 일부를 비슷한 성향의 사람들로 이루어진 커뮤니티를 구축하는데 들여보자. [w] were-here.com 같은 사이트가 어떻게 플래시 세계에서 성장했는지를 살펴보라.

8. 사이트에 검색 기능을 넣는다. 사람들은 특정 컨텐츠를 빨리 찾으려고 할 때 메인 내비게이션 도구를 사용하기보다는 검색을 선호한다. [w] www.atomz.com를 보라. 이 사이트는 정말 훌륭한 검색 엔진을 무료로 제공하는데, 플래시 파일에 들어간 텍스트까지 검색할 수 있다.

9. 사람들은 자신의 의견을 피력하는 것을 좋아한다. 웹사이트에 관련된 이슈에 대해 투표나 여론 조사 등의 기능을 넣어보라.

10. 웹은 매우 인터랙티브한(대화형) 매체라는 것을 기억하라. 즉, 어떻게 하면 사용자를 사이트의 경험에 몰입하도록 할 수 있는지에 관해 항상 염두에 두고 있어야 한다.


음악과 음향 효과
웹 디자인에서 가장 간과되고 있는 부분이 바로 소리일 것이다. 디자이너들은 대개 시각적인 경험에만 초점을 두고 만다. 시각적인 경험이 가장 중요한 것은 분명하지만, 사이트를 정말 기억에 남도록 만드는 것은 음향 효과와 음악이다. 이 부분은 사이트를 향상시키거나 완벽하게 만드는 한 방법이다. 훌륭한 사이트들은 대부분 뛰어난 청각적 요소를 써서 사용자 경험을 마무리한다. 다음의 팁들은 영화와 TV, 웹을 위한 사운드 디자인을 전문으로 하는 아마데우스 미디어의 로빈 커쇼우(Robin Kershaw)가 제공한 것이다.

1. 왜 음악 혹은 소리를 사용하려는지 확실히 한다. 적절한 사운드는 사이트의 분위기에 놀라운 효과를 주며 독특한 선율은 사이트의 인지도를 높일 수 있다. 인텔의 로고와 멜로디는 따로 떼어서 생각할 수 없다. 이런 것을 오디오 브랜딩(audio branding)이라고 한다.

2. 사이트에 사운드를 사용하는 것은 전체적 디자인의 한 부분이라는 것을 명심하도록. 사운드가 단순히 장식적으로만 쓰인다면 오히려 신경 거슬리는 것이 될 수 있다. 사용자 경험을 염두에 두도록 한다.

3. 관객을 신중히 고려한다. 다운로드 속도 때문에 사용자의 모뎀 유형에 따라 사운드를 사용할 수 있는 범위가 달라진다. 관객의 연령대와 통계 수치 역시 고려해야 한다. 연금을 받는 사람들에게 댄스 음악을 트는 것은 아무 소용이 없다. 그들은 그 사이트를 떠날 것이다.

4. 다운로드 시간을 최소화하기 위해 스테레오를 모노로 바꾸는 것을 고려해 본다. 말 그대로 파일 사이즈가 반으로 줄어든다. 하지만 어떤 종류의 음악은 다른 것들보다 음질이 더 많이 손상된다는 것에 주의해야 한다. 압축 정도에 따라서도 음질이 많이 달라진다.

5. 음악 외에도, 멋진 화면 해설을 사이트에 잘 결합한다면 사이트의 가치를 더욱 높일 수 있다. 많이 들어갈 필요는 없고, 그저 페이지가 업데이트 되었다던가 하는 발표 정도면 좋을 것이다 (그밖에도 상상의 나래를 마음껏 펼쳐보자).

6. 화면과 소리를 어떤 방식으로든 동기화 할 필요가 있다면 플래시를 사용해야 한다. 플래시에서 사운드를 사용하는 방법에는 두 가지가 있다. 이벤트 사운드와 스트림 사운드이다. 플래시에서 이벤트 사운드는 어떤 키프레임에 도달하면 재생되기 시작해서 애니메이션과는 전혀 무관하게 끝까지 재생된다. 스트림 사운드는 프레임 단위로 재생되므로 프리로드(Preload) 시간이 짧다.

7. 프리로딩(이벤트) 사운드를 사용할 것인지 스트리밍을 사용할 것인지 결정하기 위해서는 사이트의 나머지 부분들을 살펴보아야 한다. 애니메이션을 어떤 식으로든 프리로드 할 작정이라면 사운드 역시 프리로드 해야 한다. 사이트의 첫 페이지가 빨리 뜨기를 원하거나 또는 긴 음악을 넣고 싶다면 스트림 사운드를 사용하라. 몇 초간의 프리로딩 후에 음악이 재생되기 시작할 것이다. 하지만 네트웍이 혼잡할 경우 소리가 끊길 수도 있다는 점을 염두에 둘 것.

8. 화면과 음악이 동기화되지 않아도 상관없다면 좀 더 진보된 압축 방법을 쓸 수 있다. MP3(플래시 최고의 익스포트 옵션이다)가 가장 적당하지만 음악만 있을 경우 QDesign Music을, 목소리만으로 된 경우에는 퀄컴 PureVoice를 써보는 것도 좋다.

9. 상대적으로 다운로드 시간이 적게 걸리는 반복적인 음악의 경우 동기화된 사운드와 스트림 사운드를 결합하는 것도 생각해볼 수 있다. 플래시에서 스트림 사운드는 애니메이션 재생률을 떨어뜨릴 수 있으므로, 적절한 곳에 위치시키거나 분리된 레이어에 동기화된 사운드를 반복해서 사용하면 된다.

10. 항상 전문가가 제작한 음악을 사용하도록 한다. 작곡가에게 곡을 구입하던가 기존의 라이브러리 음악을 구입한다. 저작권을 갖지 않고 음악을 사용할 수는 없다. 음악을 도용하는 것은 여러 작곡가들을 죽이는 일이며, 나중에 값비싼 대가를 지불하게 될 수도 있다.



스트리밍 미디어

최근 3 년 동안 우리는 브로드밴드(Broadband : 廣帶域)의 가능성에 관해 들어왔고, 근사한 웹 비디오 솔루션의 미래를 믿어왔다. 온라인 관객들이 얼마나 빨리 브로드밴드 서비스로 전향하고 있는지는 미지수이지만, 디자인 관점에서 볼 때 작은 비디오가 사이트에 움직임과 컬러, 그리고 청각적인 재미를 가져다주는 큰 역할을 한다는 것은 확실하다. 관객을 지루하게 만들지 않고 영상을 제공하려면 스트리밍 미디어를 써야 한다. 최대의 온라인 엔터테인먼트 사이트인 아이필름이 말하는 스트리밍 미디어에 관한 열 가지 팁을 들어보자.


1. 소스의 질이 낮으면 압축 결과도 좋지 않고, 웹사이트의 질 역시 떨어진다.

2. 항상 최고 해상도에 최대 프레임 사이즈, 최고 프레임 비율(재생률)로 캡처한다. 비디오를 캡쳐할때 가장 좋은 기준은 720×480 픽셀의 해상도, 29.97fps로 DV FireWire 에서 캡쳐받는 것이다.

3. 아이필름이 추천하는 편집과 캡쳐용 소프트웨어는 맥에서 사용되는 파이널 컷 프르(Final Cut Pro)와, Mac과 PC에서 사용할 수 있는 어도비 프리미어(Adobe Premiere) 6.0이다. 압축용 소프트웨어로는 단연코 테란(Terran)의 Cleaner 5를 추천한다.

4. 이제 웹에 올릴 포맷을 결정해야 한다. 주요 포맷으로는 리얼미디어 (Real 8), 퀵타임 (Sorenson 2, 버전 3은 베타 테스트 중), 윈도우즈 미디어가 있다. 이 포맷들은 각각 장단점을 가지고 있다. 이 세 개의 포맷을 모두 시험해본 후 어떤 것이 가장 좋을지 결정하는 것이 좋다.

5. 잘리는 현상(cropping). 결과물을 보면 처음과 끝은 괜찮은 것 같은데 중간의 곳곳에서 일정치 않게 잘리는 현상이 발생하는 경우가 있다. 문제가 있으면 설정을 조절하든가 다른 포맷으로 압축하는 것을 고려해본다.

6. 화면의 가로 세로 비율을 염두에 둘 것. 만일 DV와 같이 일반 화면 비율이 아닌 포맷의 영상을 캡쳐했다면, 압축할 때 4:3의 비율에 맞게 크기를 조절해 주어야 한다. 표준 화면 비율은 640×480, 320×240, 240×180 등이 있다.

7. 화질에 상관없이 파일 크기를 줄일 수 있는 두 가지 방법이 있다. 첫째는 프레임 비율을 줄이는 것이다. 15-12fps 정도면 200-300k의 스트리밍 파일이 나온다. 6-10fps로 낮추면 낮은 대역폭(56k 모뎀)에서 재생할 수 있을 정도의 크기인 100k 정도로 파일 크기를 줄일 수 있다. 둘째 방법은 화면 비율/해상도를 줄이는 것이다. 320×240이나 240×180 픽셀 사이의 동영상은 200-300k 정도의 파일 크기로 압축된다. 이것을 160×120이나 240×180 픽셀로 줄이면 파일 크기는 100k 정도로 줄어든다. (화면 비율은 4로 나누어지는 숫자이어야 하며, 그렇지 않은 수를 지정했을 경우는 되지 않는다.)

8. 56k용 스트리밍 파일에서 압축 대역폭은 36k를 넘어서는 안된다. 대부분의 전화선은 56k 모뎀 사용자들에게 56k의 속도를 모두 지원하지 않기 때문이다.

9. 클리너 5(Cleaner 5)의 블랙 리스토어(Black Restore) 필터를 써보자. 이 필터는 화질을 좀더 향상시켜주는 반면 어두운 부분의 세밀함은 손상시킨다. 오디오 쪽에서는 오디오 리버브(Audio Reverb) 필터를 쓰면 오디오 압축으로 인해 생기는 잡음들을 완화시켜준다.

10. 56k용으로 압축할 때는 16k의 Low Pass 필터를 쓰면 고음 부분의 잡음이 줄어든다.


3D화 하기
소 프트웨어 개발자들의 주장에 일리가 있다면, 웹 3D는 세상을 구원(?)하고 만연해 있는 따분함을 치료할 것이며, 우리 모두는 영원히 가상의 즐거움이라는 사이버 세계에서 살게 될 것이다. 이상에 가까운 얘기는 그만하고. 사실 웹 3D 솔루션을 선택하는 것은 웹 디자이너가 직면한 가장 어려운 문제 중의 하나이다. 어쨌든 몇몇 디자이너들은 웹에서 훌륭한 3D 작품들을 선보이고 있다. 디지트 런던의 제작 감독인 닉 크리스티어(Nick Cristea)에게 웹 3D에 대한 조언을 들어보자.

1. 적절한 근거에 의해 3D를 사용하라. 3D를 쓰는 것이 웹사이트의 분위기를 돋구는 편한 방법인 것처럼 보일 수도 있지만, 사이트 전체에 꼭 필요한 부분이라고 판단될 때에만 3D를 사용해야 한다. 형편없는 아이디어나 컨텐츠의 부족을 메우는 방법으로 3D를 사용한다면, 그건 정당화될 수도 없고 팔릴 수도 없다. 프로젝트에 왜 3D를 사용해야 하는지를 대략 정리한다. 3D를 사용하는 것이 정말 최선의 방법인지 스스로에게 질문해 본다.

2. 최적의 3D 도구를 선택한다. 리얼 3D이어야만 하는가? 특정 플러그인을 꼭 다운로드해야만 하는가? 저작권 문제는 어떻게 되나? 그 작업을 위해 특정 개발자를 고용해야 할 필요가 있는가? 현재로서는 플래시가 가장 많이 쓰이는 유일한 플러그인이므로 가능하다면 플래시를 쓰는 것이 좋다. 인터넷에서 액션스크립트 3D 엔진을 구할 수도 있고, 프레임 단위의(frame-by-frame) 애니메이션으로 3D처럼 보이게 할 수도 있다. 시점을 움직이거나 아바타(Avatars)를 바꾸거나 그림자나 조명을 실시간으로 바꾸어야 한다면 '진짜' 3D 플러그인을 쓸 필요가 있다.

3. 디자인 초안을 만든다. 줄거리, 분위기, 배경, 속도, 드라마 등은 3D 도구를 사용할 때 모두 중요한 요소들이다. 일관성 있고, 잘 고안된 상황을 만들어 방문객이 몰입할 수 있도록 해야 한다. 시각적인 요소들의 관계를 적절히 조합하고, 테스트한다.

4. 3D 작업의 장점은 단시간에 구도를 여러 가지로 바꿔볼 수 있다는 점이다. 단순한 오브젝트를 만들어 구성과 애니메이션을 테스트한다. 카메라 각도를 이리저리 옮겨보거나 움직이는 속도를 바꿔보거나 한 장면 내의 오브젝트들간의 관계를 다양하게 설정해 본다. 새로운 아이디어를 발견하는데 이런 시도들이 유일한 방법일 때도 있다.

5. 대략적인 모델을 사용해 구성과 줄거리의 감을 잡은 후 웹에서의 기본 원형을 만든다. 모든 종류의 트라이얼이나 데모 플러그인에서 작업한 시안이 구현 가능한지 테스트해본다. 실제로 만들어보거나 기본 원형을 만들어보아야만 무엇이 가능하고 무엇이 불가능한지를 알 수 있다.

6. 모델을 최적화한다. 3D 웹 콘텐츠의 최종 결과물이 어떤 포맷이든, 최적화의 규칙은 모두 같다. 모델이 세밀하고 복잡해질수록 파일 사이즈는 커진다. 처음부터 아이디어와 디자인을 단순하게 하고, 파일 사이즈를 계속 체크한다.

7. 3D 요소들을 내보낸다. 일부 플러그인은 모델링 단계에서 특정한 방법을 써야 한다. 3ds Max는 현재까지 가장 많이 지원되고 있으며, 대부분의 플러그인 기술을 지원하는 고유 애드-온(add-on: 특정 기능 보강을 목적으로 만든 보조 소프트웨어)들이 무료로 나와 있다. 하지만 비싸다. LightWave는 훌륭한 VRML 내보내기 기능을 가지고 있지만 특정 플러그인이 없다. 스위프트 3D(Swift 3D)나 아모피움 프로(Amorphium Pro)는 저렴한 가격으로 3D SWF 파일을 만들 수 있는 좋은 프로그램들이다. 어떤 소프트웨어를 사용하든, 모델을 내보내어 초기에 테스트를 한 후, 한 장면을 좀더 작은 여러 개의 부분으로 나눈다.

8. 최적화와 사이트 구축. 사이트를 스트리밍할 수 있는 요소와 배경에서 로딩될 요소, 그리고 필요할 때만 로딩되는 요소 등, 몇 개의 레이어로 분리시킨다. 모든 로딩 시간을 계산하고 조절하여 되도록 사용자가 로딩 시간을 느끼지 못하도록 한다.

9. 파일 크기가 문제가 되거나 기술적으로 문제가 있을 때 창조적으로 접근하지 못하고 결과물의 질을 떨어뜨리는 경우가 있다. 사용하고 있는 도구를 충분히 테스트하고 기능에 관해 잘 알아야 이러한 문제들을 해결할 수 있다. 단순한 팔레트와 셰이프, 텍스쳐 매핑을 사용하고, 하나의 셰이프나 오브젝트들을 반복해서 쓴다.

10. 한가지 도구로 모든 것을 해결할 수는 없다. 여러 도구를 결합해서 사용하면 좀더 새롭고 흥미로운 결과물을 만들어낼 수 있다. 30일 짜리 데모 버전들을 잘 이용해서 최근의 도구와 기능들을 익혀 시대에 뒤떨어지지 않도록 한다.

출처 : 보헤님 블로그 <- http://blog.naver.com/ormaster/40005619481
    

설정

트랙백

댓글

UI디자인 가이드라인 - 사이트 구성하기

User Interface/Web 2007. 2. 21. 11:10

링크의 품질을 높이는 방법
사용자에게 자신감을 부추기고 자신이 찾고자 하는 정보의 향기를 전달하는 방법의 반은 링크에 의해 만들어진다.
또한 자신감은 링크 타입, 커뮤니케이트된 정보의 양, 링크가 생긴 모양에 의해 부추겨지는 수가 많다.

링크의 분류는 다음과 같이 나눌 수 있다.

- 컨텐츠 링크 : 컨텐츠를 포함하는 페이지로 간다.
- 카테고리 링크 : 다른 링크의 우선적으로 포함하는 페이지로 간다.
- 키워드 링크 : 검색의 부분으로 사용자가 입력하는 것이다.
- 백 혹은 홈 링크 : 홈이나 먼저 방문한 페이지로 간다.

위의 분류 중에서 컨텐츠 링크가 가장 좋은 방법이다. 사용자들은 카테고리 링크가 아니라 컨텐츠 링크를 사용할 때 더 성공할 가능성이 높다. (현재 국내의 사이트는 카테고리 링크가 더 많다.) 백, 홈 링크는 문제의 징조이기도 하다. 사용자가 향기를 놓쳤을 경우 많이 사용하기 때문이다.
링크들은 사용자들을 끌기 위해 올바른 단어들을 가지고 있어야 한다.(링크를 신호로 만드는 방법)


링크를 신호로 만드는 방법
문법적으로 정확한 문장은 정보를 찾기 어렵게 할 경우가 있다는 조사 결과(제이콥 닐슨 Alert Box 1997. 10.1 'How users Read on the Web)가 있다.
컨텐츠의 문장을 읽어가는(Scanning) 사용자는 그것을 신호와 잡음으로 구분하는데, 자신이 원하는 정보와 관련된 단어의 링크를 신호로, 그 밖의 내용은 그저 잉크인 잡음으로 보는 것이다. 보통 20개의 단어 중 4-5단어들(20%)은 신호, 나머지는 잡음이라고 간주 한다.
따라서 링크 안의 큰 잡음들은 관련 텍스트를 숨긴다.

링크는 커뮤니케이트 하기 위해 충분한 단어들을 가지는 것이 필요하다.
같은 목적을 가진 사용자들 이라도 사용자가 다르면 다른 단어를 찾을 수 있다.
예를 들어 취업을 원하는 사용자가 찾는 단어들을 살펴보면 어떤 이는 '이력서 올리기', 또 다른 사람은 'Job찾기', '구직', '일자리' 등… 사용자들은 동의어를 핸들 할 수 있지만 그것은 문맥 안에서 만 가능한 것이다.
그러므로 링크는 밑줄 쳐진 단어들과 그와 관련된 텍스트 둘 다 라고 할 수 있다.

그러므로 카테고리 링크가 더 어려운 일이다.
그 이유는 복수 링크들을 설명(묘사)해야만 하고, 보통 컨텐츠 링크 사이즈의 3분의 1정도 밖에 되지 않기 때문이다.

그렇다고 링크의 길이가 길어야 좋은 것은 아니다. 사용자의 선택을 도울 의도로 된 텍스트(제목들도 어떤 때는 포함)를 올바르게 디자이너가 결정해야 한다.


스캐닝(훑어 보기)를 도울 수 있는 방법
이 때 우리는 게슈탈트 심리이론이나 기억에 관한 인지 심리학 이론의 단기 기억 (의미덩이 만들기: chunking)을 이용한다.

1. 링크의 그룹핑 : 사용자들은 비슷한 아이템들을 서로 관련된 것으로 인식한다. 링크 그룹이 많은 웹 페이지가 능률적이다.(컨텐츠 링크 그룹이 잘 되어 있는 사이트는 CNN.com이다.)
2. 구조화된 목록 : 사용자에 따라 공통의 분류나 친숙한 영역들을 구조화 한다. (달력이 좋은 예이다.)
3. 링크의 차별화 : 다른 컨텐츠로 이끄는 링크는 그 차이점을 명확하게 차별화하는 것이 필요하다.(좋은 예 HP사이트)
4. 여분 링크를 이용한다. : 여분 링크란 사용자에게 복수의 향기를 제공하는 것, 즉 다른 문맥과 다른 목표로 다른 아이디어를 가지고 있는 다른 사용자들을 지원한다.
5. 괄호와 뷸렛을 이용한다. : 사용자들이 링크 그룹들을 다발 짖는 것을 도와 준다. 특히 복수 라인에 걸쳐 링크들이 묶여 있을 때 뷸렛은 사용자가 링크들을 서로 구분하는데 도움이 된다. 


배너처럼 보여서 간과되는 중요한 정보들
사용자들은 화면을 훑고 지나간 다음 중요한 내용이나 시선을 끄는 이미지에 관심을 보이지만 배너 같은 정보는 무시한다.
사용성 테스트 결과, 사용자들은 배너처럼 생긴 그래픽이 중요한 정보이더라도 무시해 버린다는 것을 발견할 수 있었다.
그러므로 사이트의 중요한 정보나 네비게이션을 광고처럼 이미지로 만들거나 배너 영역에 두어서 배너와 혼돈을 일으켜, 사용자들이 이를 간과해 버리도록 만들어서는 안된다.

여러 개의 이미지들이 오른쪽 밑 부분의 배너 광고 영역에 있으며, 그 형태 또한 배너 광고 형식을 띠고 있어 사용자들은 배너로 생각하고 무시하지만 사실은 내부의 주요한 정보들로 연결되는 중요한 링크이다. 그 중 ‘봄나들이’를 클릭하면 ‘봄 나들이 특집 주요 기사 모음’으로 화면이 전환된다.


링크 가능한 영역의 크기와 거리
웹페이지에서 버튼이 너무 작아서 클릭하기 원하는 것을 제대로 클릭하지 못하거나, text 주위의 background를 클릭했으나 클릭되지 않는 경우가 종종있다.
이러한 현상을 Fitts' Law (피츠의 법칙)로 설명할 수 있다. 피츠의 법칙은 속도와 정확성간 접합점의 기본적인 원리이다.

스크린 상에서 버튼의 크기와 커서를 이동시키려는 거리가 주어지면, 버튼까지 커서를 움직이려는데 걸리는 평균시간을 피츠의 법칙을 이용하여 구할 수 있다.

Time(in msec)=a+blog2(D/S+1) 
S : 버튼의 크기 
D : 버튼까지의 거리

위와 같이 커서가 버튼까지 움직이는 시간은 거리에 비례하고 버튼의 크기에 반비례한다.

Button을 클릭하기 위하여, Mouse를 이동시키는 거리가 멀면 멀수록 실수 없이 정확히 Button에 Mouse를 접근시키는 것이 더 어려워진다. 그리고 버튼의 크기(또는 클릭할 수 있는 영역)가 작을 수록 커서를 가져갈 target에 접근시켰을 때 성공할 확률이 낮아진다.

메뉴나 버튼은 쉽게 클릭하기에 ‘충분한 크기와 거리’를 고려해서 디자인 되어야 한다.


사용자들은 긴 화면을 스크롤한다
사용자들이 스크롤하기 싫어한다는 전통적인 견해는 흔히 옳은 것으로 간주되어 왔다.
이러한 가정 하에 한정된 분량을 한 화면에 담으려고 할 때, 디자이너는 대부분 다음의 두 가지 경우 중 한 가지를 택할 것이다.

한정된 화면 공간에 맞추기 위해 정보를 임의로 줄인다.
이 경우, 사용자는 내용 파악에 어려움을 느낀다.

하나의 화면을 몇 개의 페이지로 나눈다.
이 경우, 사용자는 다음 페이지가 로딩될 때까지 기다리는 것보다 다소 길어진 페이지를 스크롤하며 훑어보는 것을 더 선호한다.

사용성 테스트의 결과, 사용자들은 스크롤 자체를 기피하지는 않는다는 것이다. 하지만, 스크롤 바가 있는 긴 페이지에는 반드시 사용자들이 원하는 정보를 찾을 수 있도록 이끌어주는 요소로서의 ‘향기(scent)’가 있어야 한다.

출처 : UIdesign

    

설정

트랙백

댓글

UI디자인 가이드라인 - 신뢰도 높이기

User Interface/Web 2007. 2. 21. 11:10

단기간에 효과적으로 사용성을 높이는 방법
사용성테스트를 할 여건이 안 될 경우 좀더 적은 노력으로 혁신적인 사용성 개선을 원한다면 다음과 같은 방법을 사용해 보라.

우선 로그데이타나 기타조사를 통해 가장 빈번하게 사용하는 기능 또는 작업의 목록을 작성하라. 이 목록 중 최상위의 한두개를 골라 최대한 클릭 수를 줄이고 단순화하기 위해 다음과 같은 방법을 이용해 본다.

하나의 태스크를 대상으로 사용자가 그 태스크를 수행하는데 걸리는 예상 시간을 계산하는 것이다. 손을 마우스에 가져가고, 마우스를 움직이고, 누르고, 메뉴바의 이름을 기억해 내고, 각각에 드는 시간을 기준으로 태스크를 수행하는데 걸리는 총시간을 계산한다. 이때에는 육체적인 액션과 정신적인 액션에 드는 시간을 모두 계산한다. 이러한 방법 GOMS는 매우 세분화되고 한 태스크당 작업 시간도 꽤 걸리지만 놀라운 정도로 정확한 결과를 보여준다.

또 다른 방법은 태스크를 수행하는 각각의 방법을 경로화하여 가장 이상적인 경로를 찾는 Cognitive Walkthrough이다. 사용자별로 태스크를 수행하는 경로를 관찰함으로써 시스템이나 서비스가 사용자의 기대에 부합하는가, 이해가 쉬운가를 볼 수 있다.

이러한 방법들은 사용성테스트보다 간단하게 수행할 수 있으면서 사용자가 기대하는 효과를 성취할 수 있는가를 평가해 볼 수 있는 아주 효과적인 방법이다.
 
사용자에게 자신감을 주는 법
사용자가 자신이 원하는 정보로 접근하고 있다는 자신감을 주는 것이 좋은 디자인이다.
클릭 전에는 그들이 올바른 트랙에 있다는 것을 알려 주어야 하며 클릭 후에는 그들이 정말로 자신이 원하는 정보에 접근해 있다는 자신감을 느끼도록 해야 한다.
사용자들은 보통 자기들이 올바른 트랙에 있는지 아닌지를 안다.
사용자는 먼저 페이지를 대충 훑어 본다(Scanning)는 것을 명심하자.
그 때 그들이 찾는 정보의 키워드나 문장이 링크로 발견 된다면 클릭 전 사용자에게 자신감을 줄 수 있다.
그를 위한 디자인 요소로는 링크의 품질, 내비게이션 그래픽, 정보 구조의 디자인이 있다.

클릭 후에는 키워드나 문장 등에서 요구된 정보를 보여 주는 것, 혹은 더욱 강력하고 구체적인 정보를 발견 할 수 있도록 설계되어야 하며 그 때부터는 사용자가 정보를 꼼꼼히 읽기 시작할 것이다.

- 사용자가 자신감을 잃어버리도록 하는 것 들은
- 거짓말하는 링크
- 키워드가 없는 것(링크에 있던 단어가 컨텐츠에 없으면 속은 기분이 들것이다.)
- 보다 일반적인 컨텐츠
- 예쁘기만 하거나 희미한 링크

등 이며 자신감의 상실은 사용자의 포기를 야기한다.
조사에 따르면 백 버튼을 한번 누르면 42%, 두번 누르면 18%, 세번은 2%의 집계로 나타나는데 결론적으로 사용자가 백 버튼을 2번 누르면 정보 찾기를 완전히 그만둔다는 것을 알 수 있다.

확실한 UI를 짧은 시간에 만들기
확실한 UI를 만들고자 한다면 단연 '사용성 테스트(Usability Test)'를 하는 것이다.
이것은 개발 과정에서 짧은 시간만을 들여서 사용자로부터 훌륭한 피드백을 얻을 수 있는 기회를 마련하는 것이다.
디자인 결정에 있어서 망설여지는 부분이 있다면 테스트해라. 거창하게 할 필요도 없다. 그저 실제 사용자를 데리고 실제 사이트를 테스트하기만 하면 되는 것이다.


잘못된 UI를 아는 방법
사용성 테스트(Usability Test)를 했을 때-간략하게 하건, 본격적으로 하건- UI가 잘못되었다는 것을 어떻게 알 수 있을까. UI가 가장 잘못된 경우는 바로 사용자가 길을 잃고 헤매는 것이다. 사용자가 길을 잃었다는 신호는 다음과 같다.

- 사용자가 길을 잃었다는 신호
- Back button을 사용한다.
- 검색엔진을 사용하여 키워드 검색을 한다.
- 홈으로 돌아오는 버튼을 누른다.
- 사이트 맵으로 찾아간다.


훌륭한 웹 디자인을 위한 10가지 Tips
1. 한 페이지에는 하나의 주제에 대한 내용만 있어야 한다.
2. 액션 버튼들과 링크들은 눈에 잘 띄도록 만들어야 한다.
3. 결정적으로 중요한 페이지는 깔끔하고 심플한 구성을 항상 유지해야 한다.
4. 사용자가 쉽게 읽을 수 있도록 영어의 산세리프체 같은 심플하고 명료한 글씨체, 그룹 박스와 여유 공간을 사용하라.
5. 다운로드 시간을 줄이기 위해 그래픽을 최소화한다.
6. 로고를 클릭하면 home으로 갈 수 있도록 만든다.
7. 페이지의 타이틀은 명시된 버튼이나 링크와 같아야 한다.
8. 모든 입력 페이지에는 취소버튼을 제공하고 모든 메시지 페이지에는 뒤로 가기 버튼이 있어야 한다.
9. 기술적 용어(자바, 자바 스크립트, 애플렛 등) 을 피해야 한다.
10. 개발 전에 Prototype에 의한 Mock-up 테스트와 사용성(Usability) 테스트 등으로 사용자와 충분히 교류해야 한다.


사용성(Usability)을 높이기 위한 Tips
 -가시성과 독이성(읽기 쉬움) 
중요한 링크와 액션은 가시적이고 명백하게 만들어야 한다. 사용자들의 “훑어 읽기”를 감안하여 하이라이트 글자를 사용, 뷰렛화 된 리스트, 짧은 문장 등으로 디자인한다. 
 
 -간결성
빈번하거나 결정적인 업무들은 짧고 간단하게 유지한다. 용어는 사용자의 언어를 기초로 하는 것이 좋다. 기억하라. 짧게 적을수록 효과는 크다. 
 
 -실행
아직 인터넷 접근환경을 33.6kb 이하로 선호하는 반 이상의 사용자들을 위해 다운로드가 빠르도록 디자인한다.
 
 -네비게이션과 조직성
모든 페이지마다 [계속하기], [취소하기] 또는 [뒤로 가기] 그리고 [home]으로 갈 수 있는 명확한 방법을 공급한다. 사용자가 위치를 계속적으로 정보 받을 수 있는 효과적인 페이지 타이틀을 제공해야 한다. 페이지간을 조직적으로 배열하여 정보가 서로 그룹화 되고 접근하기 용이하도록 연계되어야 한다. 
 
 -일관성
비슷한 과업은 같은 맥락으로 수행되는 것이 좋다.  
 
 -피드백(feedback)
문제가 생겼을 때, 메시지는 사용자에게 정확히 무엇이 오류인지, 그리고 어떻게 고쳐야 하는지를 사용자가 이해할 수 있는 언어로 전달해야 한다.
 
 -관용
사용자가 실수한 것에 대한 최소한의 비용을 허용하는 시스템을 제공하고 또한 사용자들의 실행취소(undo)를 허락해야 한다.


사용자를 잡아두는 방법
웹에서의 사용자 시각 추적 연구 결과 사용자가 스크린을 보는 장소에 대해 일정한 패턴을 보여준다고 한다. 제일 먼저 가운데 그리고 왼쪽, 오른쪽의 순으로 나타난 것이다. 그러므로 정보의 중요도나 사이트 전략에 따라 이를 활용하는 것이 바람직 하다. 
 
사용자들은 대부분 배너광고를 무시하는 것을 재빨리 배운다. 여러 사이트의 사용성 테스트 결과, 배너를 마치 하나의 경계선처럼 여기고 배너처럼 생긴 그래픽은 그것이 중요한 정보임에도 발견하지 못하는 것을 발견할 수 있다. 그러므로 사이트의 중요한 정보나 네비게이션은 배너 광고처럼 이미지를 만들어서도 안되며 배너 영역에 두어서도 안 된다. 웹에서의 광고에 대해서는 사이트마다 심각하게 고려해야 할 대상이다.
 
만약 페이지 레이아웃의 그리드가 항상 똑같은 상태면 사용자들은 그 페이지의 부분을 무시하는 것을 배운다. 그러나 레이아웃이 현저하게 바뀌면 전 페이지를 다시 스캔 한다고 한다.(eBay.com은 각 페이지가 다른 레이아웃으로 되어 있음)
 
출처 : UIdesign

    

설정

트랙백

댓글

무비클립 60만개로 만든 바탕화면

Design/Etc 2007. 2. 21. 11:02
사용자 삽입 이미지
    

설정

트랙백

댓글