jasu's blog

인터넷 기업이 매출을 올리는 방법은 많은 사람들을 끌어들이는 것이다. 그리고 이들에게 유용한 정보를 쉽게 전달함으로써 상품을 판매하거나 광고 매출을 올리게 된다. 정보를 쉽게 전달한다는 것은 콘텐츠에 대한 접근성을 높이는 것으로 유저 인터페이스(UI)의 중요성은 재차 언급할 필요가 없다.

보다폰이 중, 장년층을 겨냥해 내놓은 심플리의 성공요인은 다양한 부가서비스를 생략하고 통화기능을 내세운 것, 그리고 디스플레이 가독성을 강화한 것이다. 특히 이 제품의 액정에는 어떠한 아이콘도 없고 텍스트만이 보일 뿐이다. 보다폰은 심플리의 성공적인 UI로 45세 전후 고객들의 마음을 사로잡았으며 유럽에서 선풍적인 인기를 끌며 실버폰 열풍을 확산시킨 바 있다.

또 하나 해외의 사례를 들면, 오래된 건물을 인수해 백화점으로 개조한 한 회사는 엘리베이터가 한 개 밖에 없어 고객들로부터 끊임없는 불만을 들어왔다. 건물구조상 추가로 엘리베이터 설치는 불가능했지만, 고심 끝에 적은 비용을 들여 고객들의 불만을 일순간 잠재울 수 있었다. 주변에 수많은 거울을 설치함으로써 고객들의 주위를 분산시킨 것이 해답이었다. 물리적으로 불가능한 것을 심리적으로 해결한 것이다.

위 사례와 같이, 인터넷 기업의 웹사이트 역시 가독성 강화와 심리적인 부분을 십분 활용한 UI를 개발하는 것이 매출을 증대시키는 기본 요인이 될 것이다.

우수한 UI는 인간 심리와 4관에 충실해야

지난 20일 랭키닷컴이 개최한 ‘유저 스페이스 컨퍼런스 2006’에서 경희대학교 커뮤니케이션연구소 소장인 김태용 교수는 웹사이트에서 UI의 중요성에 대해 설명했다.

UI개발 프로세스에서 중요한 것은 시스템(웹사이트)에 대한 개발자의 인식과 이를 사용하는 사용자의 일치하는 정도인 ‘객관적 일치도’를 비롯해 ‘주관적 일치도’와 ‘정확도’ 등 사용자와 개발자의 상호지향성이다. 즉, 편지봉투 모양의 메일 아이콘에 대해 누구나가 ‘저건 메일이구나’라고 생각이 일치하는 데에서 UI설계가 시작된다는 것이다.

김태용 교수는 “우수한 UI를 만들기 위해서는 직관, 객관, 일관, 미관 등 ‘4관법’만 잘하면 된다. 어떤 서비스나 제품에 대한 사용설명서는 직관, 객관, 일관적이지 못하다는 잘못에 대해 사용자에게 용서를 구하는 사과문이다”라고 말했다.

여기서 말하는 4관은 ▲ 직관 : 학습 없이 짐작으로 통하는 UI가 가장 우수한 것이다. ▲ 객관 : 널리 통용돼 설명이 필요 없는 UI ▲ 일관 : 시스템 내부적으로 일관성이 확보된 UI, 잦은 변화로 매번 학습이 필요한 UI는 좋지 않음 ▲ 미관 : 같은 구조라면 아름다운 UI 등 네 가지이다.

또한 우수한 UI는 인간의 심리를 이용해서 만들어 졌을 때 큰 효과를 발휘할 수 있다. 웹사이트를 새로 만들거나 개편할 경우, 콘텐츠 구성과 사이트 맵 설계에 앞서 심리적/생물학적인 인간의 본성을 이해하는 것이 중요하다.

시각적 원리를 이용해 콘텐츠 배치

인간의 본성을 이용한 UI 설계는 인터넷 사이트의 특성 상, 시각의 원리를 이용하는 것이 기본이 된다. 포털 사이트들이 강조하고자 하는 콘텐츠를 좌측 상단이나 가운데 상단에 배치하는 것도 이러한 본성을 활용한 것이다.

실제 포털 사이트들의 검색 광고는 상단이냐 아니냐에 따라 광고비에 큰 차이가 있으며, 쇼핑몰의 경우도 주요 이벤트를 상단 가운데 자리에 위치시키고 판매자에게 더 많은 수수료를 챙기기도 한다.

인터넷 브라우저 상에서 상하, 좌우의 특정 지점에 대한 시각 반응을 분석해 보면, ▲ 좌우 양 지점에 대한 첫 응시율(사용자가 바라보는 비중)은 왼쪽 73%, 오른쪽 27%이다. ▲ 상하의 첫 응시율은 위쪽 69%, 아래쪽 23%로 조사됐다. ▲ 그리고 좌우에 상관없이 대각선으로 양쪽 지점을 잡더라도 아래쪽보다는 위쪽이 월등하게 높은 응시율을 나타냈다.

이러한 패턴을 종합한 결과 인간이 브라우저를 바라보는 본능적인 시선의 움직임에 가장 적합한 사이트 구성은 첫 번째 좌측 상단에서 시작해 우측으로 진행해 내려오는 ‘시계방향” 구성이 가장 뛰어나며, 가운데 상단에서 시작해 다시 왼쪽으로 갔다가 시계방향으로 보는 구성이 두 번째라는 것이 김교수의 설명이다.

‘감’ 보다 ‘과학’

콘텐츠 위치, 구성이 곧 매출과 직결되는 인터넷 사이트에서는 사용자(고객)과의 접점인 초기화면 UI가 무엇보다 중요하다. 장기적으로, 우수한 UI가 반영된 웹사이트로의 개편 여부에 따라 기업의 매출이 큰 폭으로 변할 수도 있는 것이다.

때문에 대형 사이트들은 이미 UI에 대한 중요성을 인식하고 내부조직을 갖추고 있다. 일례로 네이버는 100명이 넘는 UX(User Experience)센터를 운영하고 있으며, 다음은 주요 서비스 별로 UI조직을 운영하는 동시에 신규서비스 론칭에 따라 TFT를 운영하고 있다.

네이버의 한 관계자는 “사이트 개편 등 변화가 생길 때면 수십 명의 이용자를 대상으로 수차례 테스트를 진행한다. UI가 조금만 바뀌어도 클릭 수에 엄청난 변화를 보이기 때문에 감이 아닌 과학적이고 체계적인 운영이 반드시 필요하다”고 말했다.

동서리서치 UI LAB에서 조사한 결과, 인터넷 중앙일보(조인스닷컴)과 조선일보의 헤드라인 가독성 면에서 좌측상단에 위치한 중앙일보보다 가운데 상단에 위치한 조선일보가 더 뛰어나다는 내용도 있듯이, 반드시 위에 설명한 이론이 정확한 것은 아니다.

그렇지만 UI는 인터넷 기업 매출 활동의 최전방 접점이라는 점에서 체계적(Systematic)으로 만들어 놓아야 할 것이다. 이제는 단순히 디자이너에 의존하기 보다, 모든 구성요소를 포괄하는 하나의 총체적 시스템으로 기획해야 하고, UI 관련 직무분석에 따른 프로세스 정립도 필요하다.

또한 기존 오프라인 광고나 PR 분야에서 이루어 지던 ROI 평가처럼, UI 개편에 따른 ROI 평가/분석 체계의 수립도 요구돼야 할 때이다. @


출처 : 김효정 기자 ( ZDNet Korea )

SK텔레콤이 향후 선보일 표준 UI에 올해 새롭게 런칭한 브랜드인 ‘T’를 적극 반영할 예정이다. SK텔레콤은 28일 T타워 수팩스홀에서 ‘표준 UI 3.0 2차 설명회’를 갖고 “향후 출시될 표준 UI 3.0은 T스타일 인턴페이스가 될 것”이라고 밝혔다.

‘T’는 SK텔레콤의 새로운 이동통신 통합브랜드로 올해 8월부터 선보이기 시작했다. 브랜드 런칭 당시 SK텔레콤은 향후 모든 이동통신 서비스와 기존 브랜드을 단계적으로 ‘T’로 통합한다고 밝힌바 있다. SK텔레콤이 현재 준비하고 있는 표준 UI도 ‘T’브랜드의 전략을 따르고 있는 것.

SK텔레콤이 말하고 있는 T스타일 인터페이스를 간단히 정의하면, GUI와 AUI를 통해 단말기에서 제공되는 서비스의 경험을 T브랜드로 느끼게 한다는 것이다. T스타일 인터페이스 기반의 GUI와 AUI는 SK텔레콤의 단말, 서비스 임베디드 메뉴, 임베디드 어플리케이션에 적용되어 사용자가 단말을 On해서 Off하는 순간까지 T브랜드가 추구하는 가치(세련된/전문가적인, 고품질/자부심, 기술혁신/이동통신리더)를 경험하게 된다.

이를 위해 SK텔레콤 전 단말의 전원On/Off 애니메이션, 송/수신 콜 애니메이션 등도 T스타일 인터페이스로 적용될 예상이다. 또한 이 인터페이스에 기반한 T스타일폰이 내년 상반기 중 출시될 예정으로 현재 단말제조사와 개발에 들어간 상태이다.

T스타일 인터페이스 하에서 기존 UI와 가장 큰 차별점이라고 하면 바로 'OK키'의 사용이다. 향후 SK텔레콤의 전 단말 및 어플리케이션, 서비스는 해당 항목을 선택 및 주요 순방향 기능키로 ‘OK키’를 사용하게 된다. 현재 ‘네이트 키’가 ‘네이트/OK 키’로 사용될 예정이며 ;‘확인 키’와의 혼동을 줄이기 위해 소프트키 레이블 또한 ‘OK'로 바뀌게 된다.

문자입력 시 특수문자를 사용하기 위해 입력모드를 전환하는 방식도 변경된다. 입력모드 전환을 F2키로 통일 기존의 팟업방식이 아닌 토글방식으로 한글, 기호, 숫자, 영소, 영대, 순으로 변경되게 된다. 이외에 숫자키를 길게 누르면 숫자가 입력되는 방식등도 고려되고 있다. UI 바탕화면 색상은 단말기에 따라 달라질 가능성이 있다. 즉 단말기 색상이 블랙이면 UI의 배경 팔렛트 색상역시 블랙 톤을 뛰며, 단말기가 흰색이면 배경역시 흰색으로 제공될 예정이다.

SK텔레콤은 현재 T스타일 인터페이스를 적용한 표준 UI 3.0을 통해 Accessibility, Consistency, User Support, Identity 등의 UI개선 핵심 속성을 도출할 예정이며 내년 중/하반기 경에 단말기에 적용할 계획이다.

기능적으로는 단순 통화기능에서 MP3도 추가되고 카메라도 들어가고 이제는 TV까지 소화해낸다. 간혹 EVDO 방식으로 연결하여 무선 인터넷기능까지…. 세세하게 추가된 기능을 설명하자면 끝도 없다. 몇 년 전부터 외쳐왔던 유비쿼터스 시대가 조만간 도래할 듯 하다.

디자인 면에서 살펴보면 무전기같던 플립에서 심플한 플립으로 그리고 폴더로. 스윙폰. 가로 LCD. LCD를 뒤집고 돌리고 꺾고. 이제는 지갑 안에 들어갈 카드형까지 나왔다. 기능에 맞춰서 크기가 커졌다 줄었다 하더니만 확실히 가벼워졌다.

그럼 다음은 무엇일까?
사진은 컨셉트폰으로 얼마전에 발표된 디자인이다.
전면 LCD폰인 Nokia의 ‘aeon’. 두개의 LCD로 이뤄어졌으며 유일한 키 버튼은 가운데 가로 바.

또 하나는 BenQ-Siemens의 ‘black-box’. BenQ-Siemens는 얼마 전 부도로 인해 신제품이 실제로 발표되기는 힘들겠다. 터치스크린 방식이기 때문에 키에 익숙한 사용자들에게는 좀 불편하겠지만 뭐 나름대로 적응하고 살지 않을까?
아~ 아시는가? 휴대전화 가격을 결정짓는 것 중에 LCD가격이 가장 비중이 크다. 전면 LCD에 터치스크린이라면 가격이 만만치 않겠군. 물론 컨셉트폰의 특성상 생산이 안될 수도 있다는거~.

출처 : 송동욱 [nalso.egloos.com/]

엘리베이터 탑승 시간을 획기적으로 줄인 엘리베이터가 뉴욕 맨해튼의 고층 오피스 건물들을 중심으로 확산되고 있다고 월스트리트저널이 14일 보도했다.

뉴욕 매리어트 마르퀴스 호텔과 뉴스코 본사, 허스트 본사 건물 등에 있는 이 엘리베이터의 특징은 엘리베이터 안에 버튼이 없다는 점이다.

대신 각 층 마다 있는 키패드에 자신이 원하는 층수를 입력한 후 키패드가 지정하는 엘리베이터를 타도록 돼 있다.

이럴 경우 같은 층에 가는 이용자들을 분류할 수 있기 때문에 매 층마다 서는 불편이 줄고 자동적으로 운행시간도 줄게 된다.

도입 초기에는 작동법을 몰라 당황하는 사람들이 적지 않았지만 적응하고 나면 오히려 짧아진 대기, 운영 시간에 흡족해 한다는 것이 제조사인 쉰들러엘리베이터사의 설명이다.

타임스퀘어 있는 매리어트 마르퀴스 호텔은 객실이 2000실에 달해 엘리베이터가 항상 혼잡을 빚었지만 도입 후 고객들이 만족하고 있다.

루퍼트 머독 뉴스코 회장도 이 새로운 엘리베이터에 대해 "처음에는 어떻게 해야 하는 지 몰라 혼란스러웠지만 지금은 아파트에 있는 엘리베이터의 버튼을 누르지 않아 당황할 정도로 익숙해졌고 시스템에 만족한다"고 말했다.

<저작권자 © ‘돈이 보이는 리얼타임 뉴스’ 머니투데이>

미래를 엿볼수 있는 영화

영화 마이너리티 리포트의 주무대인 워싱턴 D.C.의 2054년 모습을 그리기 위해 스티븐 스필버그 감독을 비롯한 제작진은 1999년 4월, Think Tank를 구성했다고 한다. 이 Think Tank 내에서 제작진과 저명한‘미래학자’들이 도시 경관에서부터 미래 무기에 이르는 다양한 주제에 대해 머리를 맞대고 연구하여 철저한 과학적 지식에 근거한 영화 제작을 시도한 것이다.

영화 속의 시간적 배경은 2054년으로 설정되어 있지만, 영화 속 미래 사회의 모습은 현재 개발이 진행 중인 과학기술상의 지식을 토대로 하여 그려지고 있다. 예를 들면 영화의 주요한 기술적 배경이 되고 있는 e-Paper(Electronic Paper), 3D 디스플레이 등 차세대 디스플레이 기술, 생체인식 기술, 지능형 교통시스템(ITS : Intelligent Transport System) 기술 등은 현재에도 활발한 연구활동이 이루어지고 있다.

영화에 등장하는 다음 기술들에 유의하며 영화를 감상하도록 하자.

1. 미래 기술 관점

1) 미래의 컴퓨터

수사관인 존 앤더튼(톰 크루즈 분)은 유리(Glass) 컴퓨터, 유리 디스켓에 촉각 디스플레이 장갑(Haptic Glove)을 끼고 제스처로 파일들을 처리한다. 이때 장갑에서는 빛이 발광하는데, 아마도 발광다이오드의 촉각 장갑처럼 보인다. 이때의 빛은 바로 네트워킹으로 광자(Photon) 베이스의 빛을 이용한 네트워킹으로 발전할 가능성이 높다. 미래의 컴퓨터는 이처럼 현존의 LCD/PDP가 더욱 혁신을 거듭하여 (1) Liquid Metal 베이스의 유리 컴퓨터나 (2) 아니면 플라스틱 베이스의 FOELD, LEPD로 진화할 것으로 보인다.

2) e-Paper 기술

영화에서 주인공인 존이 당국의 추적을 피해 지하철 속으로 숨어 드는 장면이 나온다. 지하철 승객들 중 일부가 신문을 보고 있는데, 이 신문이 바로 e-Paper 기술이 상용화된 제품이다. 영화 장면을 유심히 살펴보면 신문의 내용이 실시간으로 전송되는 정보로 업데이트 되며 심지어는 동영상까지 나타난다. 이미 지명수배자가 된 주인공은 결국 신문을 통해 정체가 드러나 다시 도주할 수 밖에 없게 된다.

3) 멀티모달(Multimodal) HI(Human Interface)의 기술

이 영화에 등장하는 홍채인식(Iris Recognition, or Eye Scanning) 기술은 음성인식, 지문인식, 얼굴인식, 서명인식, 유전자인식 등의 기술과 비교해볼 때, 그리고 오감 중 인간의 시각이 의사결정에 87% 영향을 미친다는 사실을 고려해볼 때 과연 영화에서처럼 상용화되어 일반화 될 것인가? 유비쿼터스 환경의 중요한 부분을 차지하는 생체인식 기술의 혁신과 확산에 대해 생각해보자.

4) 생체 인식 시스템

영화 속의 주요 건물이나 거리, 지하철 역 등에는 홍채나 망막 등 인간의 안구로부터 정보를 추출해내는 생체 인식 시스템이 설치되어 개인정보를 분석해낸다. 또한 생체 인식 로봇은 돌아다니면서 시민들의 신원을 파악하기도 한다. 이러한 생체 인식 시스템은 범죄 용의자 색출은 물론 일대일 마케팅 등 상업적으로도 응용될 수 있다. 영화에서 주인공이 백화점을 지나갈 때 백화점 내에 설치되어 있는 생체 인식기가 주인공을 개별적으로 식별한 후 직접 이름을 호명하면서 일대일 광고를 내 보내는 장면이 나타나는데, 이것이 상업적 응용의 한 예가 될 수 있다. 생체 인식 시스템의 비즈니스 모델에의 응용에 대해 생각해 보자.

5). Wrist Watch

John 수사관의 Personal Solution의 핵심제품은 Wrist Watch 이다. 2003년 9월에 등장하는 Microsoft 사의 Wristwatch, 그리고 일본의 NTT DoCoMo와 Seiko가 2003년 5월 7일 출시한 Wristtomo가 대표적인데, Wristtomo는 2003년 7월 1일 현재 없어서 못 파는 제품이 되고 있다. 원래 1,000대 목표였으나 지금까지 3,850대가 팔렸고 따라서 올해 판매대수를 10,000대로 늘려 잡았다. 미래의 PDA가 이러한 마이크로 손목시계로 컨버징 된다면 우리는 이에 대해 어떻게 대비해야 하는가?

6) 유비쿼터스 혁명(Ubiquitous Revolution)

Minority Report에 등장하는 미래 전략 사업은 유비쿼터스 혁명(Ubiquitous Revolution)으로 요약할 수 있다. 미래의 u-교통, u-Telematics, u-도로, u-식물원, u-경찰, u-Wearable Computer 등이 등장하는데, 본과정의 학습과 연구를 통해 유비쿼터스 환경하의 미래 사업에는 어떠한 것들이 있는지, 그 요소 기술과 비즈니스 모델에 대해 생각해보자.

7) 최첨단의 지능형 교통시스템(ITS)

영화 속에서는 자기역학을 응용한 자동차가 마치 스파이더맨처럼 빌딩 벽을 오르내리고, 도로 상에는 자동차들이 매우 근접한 상태에서 빠른 속도로 달린다. 물론 자기역학을 응용한 미래형 자동차는 아직 먼 얘기가 될 수 있다. 그러나 차간 거리를 최소화한 상태에서 고속 주행이 가능하게끔 하는 시스템인 ITS는 상용화가 근접한 기술 중 하나이다. ITS에 관련된 기술과 비즈니스에 어떻게 접근할 것인가?

8) 미래의 무기-충격 음파총

주인공이 추격하는 경찰들에게 제압용 총을 쏘는 장면이 나온다. 이 총은 충격음파를 이용하는 것이다.주인공 존 앤더튼(톰 크루즈 분)은 인지자들이 자신을 미래 살인자로 지목하면서 동료들로부터 쫓기는 신세가 된다. 이 과정에서 미래의 경찰이 사용하는 총은 살상용이 아닌 제압용 충격 음파총이다. 자동차 조립공장에서 앤더튼은 이 총을 뺏어 추적하는 경찰들에게 쏜다. 그러자 이 충격음파에 맞은 경찰들은 두 팔을 벌린 채 뒤로 나가떨어진 후 정신을 못 차린다. 충격 음파총은 고강도 음탄(sonic bullet)을 발사해 비행기 납치범을 무력화할 목적으로 미국 캘리포니아에 위치한 아메리칸 테크놀로지스사에서 2001년부터 개발되고 있다. 이 무기는 비행기 기체와 창문을 파괴하지 않고 비행기 납치범에게 일시적으로 극심한 통증을 유발하며 방향감각을 잃게 한다. 국방이나 군사 관련 솔루션은 큰 시장이므로 어떠한 것이 있는지 생각해보자.

기타 홀로그램, 홀로그래픽, 인공지능 베이스의 로봇, 과학/군사용 생물체 로봇 등 기능적 감성, 감각적 감성, 사회적 감성, 문화적 감성을 창출해내는 미래의 기술들을 Minority Report에서 파악해보자.

그 밖에 잘 드러나지는 않지만 마이너리티 리포트가 그려내는 미래 사회는 차세대 초고속, 광대역 통신 인프라의 구축을 기반으로 하고 있다. 또 무선 네트워킹 기술이 활용되는 장면도 부분적으로 나타나는 등 차세대 정보통신기술의 상용화도 예견해내고 있다.

그 대표적인 인프라 기반이 그리드이다.
2. 브로드밴드 네트워크 인프라 관점

다음의 네트워크 인프라 관점의 질문에 대한 해답을 생각하며 영화를 보도록 하자.

1) 영화 마이너리티 리포트에서는 곳곳에서 그리드의 존재를 볼 수 있다. 이 때문에 주인공은 개별 맞춤형 광고의 홍수 속에서 살고 경찰이 워싱턴 D.C. 근처의 그물처럼 얽힌 자동화 고속도로에서도 주인공의 차를 찾아낸다. 가상의 세일즈 맨이 주인공 톰 크루즈를 스캔해 그가 최근 구매했던 옷과 어울릴만한 아이템을 추천해 주는 장면도 등장한다. 마이너리티 리포트에 등장하는 이러한 그리드와 매트릭스의 AI(인공지능)의 공통점은 무엇인가? 2054년의 마이너리티 리포트의 그리드가 2199년의 매트릭스로 진화할 수 있을 것인가?

2) 사물과 사람에 이식된 스마트 칩과 무선기술이 통합되면 모든 것이 변하게 될 것이다. 체내에 이식되는 바이오칩은 무선기술과 통합되면 모든 것이 변하게 될 것이다. 체내에 이식되는 바이오 칩은 그리드를 통해 심장박동 상태를 실시간으로 의사에게 보낼 수 있게 된다. 자동차 메이커는 고객의 차량에 장착된 스마트칩을 이용해 차와 고객의 운전습관까지도 추적할 수 있을 것이다. 고객의 자동차에 대한 디지털화된 정보가 그리드에도 저장돼 이를 통해 정비소는 엔진고장을 발견하고 경찰은 사용자의 과속여부를 확인할 수 있게 될 것이다.

영화 마이너리티 리포트에 등장하는 이러한 시대가 도래하면 빅 브러더에 대한 우려가 현실화 된다. 이것을 해결할 수 잇는 방법은 무엇인가?

3) 그리드는 시큐리티 관련 기술이 상당히 중요하다. 그러나 현재 개발되고 있는 생체인식 기술들은 영화 속에서 큰 허점을 보이기도 한다. 이 영화에서는 홍채인식 기술이 등장하는데 주인공 (톰 크루즈 분)은 그리드를 피하기 위해 암시장에서 안구 이식수술을 받는다, 또한 영화 가타카(GATTACA)에서는 타인의 혈액을 빌려 DNA칩에 의한 보안 검색을 교묘히 피하기도 한다. 현재 개발되고 있는 생체인식 기술의 장단점을 생각해보고 어떤 기술이 가장 효율적인지 생각해보자

4) 그리드가 도입되면 우리가 작동원리도 알지 못하고 전기를 사용하듯 컴퓨터의 기능은 전력 망처럼 눈에 보이지 않게 우리 삶의 일부로 자리잡을 것이다. 또한 컴퓨터의 기능은 그 어느 때보다 복잡해지고 끊임없이 쏟아지는 데이터는 엔지니어들이 감당할 수 없을 정도로 방대해질 것이다. 그러므로 그리드는 스스로 관리하고, 문제점을 진단하고, 보수하는 능력을 갖춰, 이상이 생길 때 우리에게 알려주고 고치는 방법까지 가르쳐 주어야 할 것이다.

이러한 관점에서 IBM이 추진하는 그리드 컴퓨팅과 ANS베이스의 Autonomic Computing에 대해 생각해보자.

5) 매트릭스가 VR(Virtual Reality)의 세계라면 마이너리티리포트는 R(Augmented Reality)의 세계이다. AR과 VR의 차이점은 무엇이며 우리가 추구하는 미래사업은 AR인가, 그렇지 않으면VR인가? AR라면 어떠한 세상을 그려볼 수 있으며 사업의 기회는 무엇인가?

기타 다음의 근본적인 의문에 대해서도 생각해보자.

3. 근본적인 의문

1) Minority Report 는 결국 시스템 에러이다. 시스템이지만 전적으로 인간의 능력에 의존한 시스템이다. 따라서 이 시스템 에러는 결국 Human Error를 의미하는가?

* 미국계 한국인인 제퍼슨 한의 미래형 GUI를 보면 이런 날이 멀지 않았다는 생각이 든다. 물론 지금의 마우스와 키보드의 입력장치에 비해 노동을 많이 해야하는(양 손과 손가락을 이용) 문제점을 어떻게 해결할 것인가를 생각해야 할 듯 싶다.

* 이런 것을 감안해 보면 미래의 두뇌 스포츠로 발전할 수도 있지 않을까 하는 생각이 든다. 질문에 대한 답을 빠른 손동작과 검색 판단 그리고 art 적인 화면 구성 배합 등으로 정보의 정확성, 빠른 판단, 그리고 체력, 미적 감각을 필요로하는 스포츠로 발전 시키면 어떨까 하는 생각도 해본다...

명확한 단계를 요구하는 입력폼
입력폼은 사용자의 정보를 요구하는 화면이므로 사용자들이 가장 민감하게 반응할 수 있고 특히 결재에 관한 입력폼은 금전적인 위험요소도 고려되어 사용자는 과정이나 결과에 대한 확인을 매우 필요해 한다.
해외의 사례를 보면 성질이 같은 덩어리로 단계를 나누고 그 단계마다 화면이 전환되어 사용자가 지금 어느 위치에서 어떤 작업을 하고 있는지를 각 화면마다 정확하게 인지시키는 것을 선호한다는 결론을 도출한 바 있다.
그러나 우리나라의 경우 여러 테스트와 전문가의 분석 결과 조금 다른 사용자의 행태를 발견할 수 있었는데 단계가 시각적으로 명확하게 구분되어 보이되 화면의 길이가 조금 길더라도 한 화면에 보여지는 입력폼의 디자인을 선호하였다.
물론 너무 긴 화면은 지루할 수도 있고 사용자가 포기하거나 힘들어 하는 원인이지만 외국의 사례처럼 서너 줄의 입력폼마다 성격이 다르다는 이유로 화면전환을 하는 것은 우리나라 실정이나 국민성(?)에는 맞지 않는다는 것이 UI 전문가들의 결론이었다.
이러한 결과는 UI 전문가가 여러 번의 테스트를 객관적으로 진행한 산출물이지만 모든 사이트에 적용되는 정답일 수는 없고 사이트와 입력사항의 성격에 따라 달라질 것이다.

결론적으로 화면의 전환 여부는 사용자의 성향에 따라 달라질 수 있으나 입력폼은 가장 명확성이 요구되는 화면이므로 정확히 단계를 나누고 지금 사용자가 어디에서 무엇을 하고 있는지와 얼마나 걸릴 것인지를 여러가지 방법을 이용하여 꼭 명시해야 한다.

마우스오버 만들기
마우스오버를 하지 않을 수 없는 곳은 아무래도 메인 메뉴에 해당하는 네비게이션 바이다. 그러므로 이 곳에 마우스오버를 사용하여 만들 경우가 많을 것이다. 이때 마우스오버 했을 때 서브메뉴링크가 뜨도록 해주면 좋다.

보통 마우스오버를 하면 숨겨있던 이미지나 텍스트가 나온다. 그러나, 숨겨져 있는 정보를 사용자들이 찾아내지 못했을 경우는 어떻게 하겠는가?

사용자가 사용할 마우스의 위치를 생각해 볼 때 대부분 상하로 생기는 스크롤을 움직이기 위해서 마우스의 포인터는 오른쪽 스크롤 바에 가 있다. 마우스가 마우스오버를 하지 않았을 경우에는 숨겨져 있는 정보를 볼 수가 없지 않을까? 그러므로 마우스오버하기 전에 이미 떠 있어야 하는 정보를 굳이 마우스오버 후에 나타나도록 숨겨진 정보로 만들 필요는 없다.

풀다운 메뉴 만들기
풀다운 메뉴는 오래된 사이트에서 단골손님을 위한 메뉴 '바로가기'로써의 역할로 만든다.

풀다운 메뉴의 장점이라고 하면 일반적인 사용자 인터페이스(User Interface)사용하는 요소들 - Back, Forward, Up, Down의 구조 - 를 뛰어넘는 Jump라는 기능을 가지고 있다는 것이다. 하지만, 모든 선택 메뉴들이 숨어 있다는 단점을 가지고 있다.

이 메뉴들이 사용자들의 호기심을 자극하지 않는 한 열어보지 않을 수도 있기 때문에 주의해야 할 UI요소이다. 그러므로, 새로운 사용자들을 위하기 보다는 기존의 사용자들이 빨리 자신이 원하는 메뉴로 점프(Jump)하게 끔 하는 역할로 사용하는 것이 좋다. 또한, 사용자 자신이 자기만의 풀다운 메뉴를 등록 하게끔 하는 것도 괜찮은 방법이다.

검색엔진의 사용성. (1)
사이트 상의 검색 엔진들은 사이트내의 컨텐츠를 찾는 것을 도와주는 목적으로 있다.
그러나 사용성 테스트의 타스크를 통한 성공률을 보면 검색엔진을 사용해서는 30%, 사용하지 않고서는 53% 성공하는 것을 볼 때 검색엔진 자체가 사용성에 충분히 도움을 주지는 못하는 것 같다. 그러나 사용자들은 검색엔진의 사용을 빨리 가기로 인식하는 것 같다.

검색엔진이 일으키는 문제들은 다음과 같다.
- 사용자에게 컨텐츠가 어떻게 쓰여지고 구성되어 있는지에 대해 이해 할 것을 요구한다.
- 검색엔진 스스로가 정보의 향기를 제공하지 않고 있으며 오히려 사용자들 스스로가 향기를 제공해야 한다는 것이다.

검색은 사용자들에게 즉각적인 만족을 주기도 한다. 그러나 사용자가 목적을 달성하는데 얼만큼의 시간을 단축시켜 주는지, 또는 정확하게 목적을 달성하는데 도움을 주는지, 도움을 주기 위해서는 어떤 방법들이 있는지에 대해 디자이너는 고민해야 할 것이다.

검색엔진의 사용성. (2)
Netscape의 DevEdge 검색 엔진으로부터 추출된 1주일치 데이터를 분석해 본 결과에 의하면 일반적으로 1단어 검색이 가장 많은 44%에 달했다고 한다.

또한 복수 단어 검색 중 반 이상이 연속 단어를 사용했으며 나머지 반은 정확한 모양의 쿼리를 사용했다는 것이다. 더욱 중요한 것은 쿼리의 3%가 잘못된 스펠링을 포함하고 있었다는 것이다. 이러한 결과는 사용자는 키워드를 치는 방법에 있어서 자신들의 단어로 원하는 것을 정의하며 이는 1단어 이상이기가 어렵다는 것이며 사용자는 검색 후에 틀린 답에도 뭐가 잘못 되었는지 결코 모른다는 것을 뜻한다. 또한 많은 사용자들이 부울 논리를 사용하지 않는 것으로 나타났다.

검색은 세가지 형태의 문제점을 안고 있다.
- 올바른 검색 영역에 도달하는 것
- 검색을 정의하는 것
- 결과를 해석하는 것

이러한 문제점들은 사용자들이 어떤 키워드를 입력해야 할지 잘 모른다는 것을 의미하며 종종 사용자들을 사이트의 다른 부분으로 갖다 놓는다는 것이다.

그러나 검색은 사용자들에게 즉각적인 만족을 준다. 그러므로 검색엔진의 사용성에 있어 사용자를 고려한 많은 노력(검색의 범위를 좁히는 도구나 프로세스)이 있다면 사용성이 높아지겠지만 그렇지 않다면 오히려 사용성을 감소시키는 주된 요인으로 작용된다는 것을 명심하자.

프레임의 실수
프린트를 어렵게 한다.
프린트를 방해한다. 여러 프레임 중 엉뚱한 부분이 프린트되어져 나올 수 있다.

북마크를 어렵게 한다.
프레임 페이지를 북마크 했을 경우, 다시 찾아갔을 때 엉뚱한 곳으로 왔다는 것을 발견할 수 있다.

검색엔진에 잘못 등록될 수 있다.
검색엔진에서 결과로 나온 URL을 찾아갔을 때 프레임의 일부분만 링크되어 있는 것을 본적이 있을 것이다.

수평 스크롤이 생길 수 있다.
스크롤에는 수직 스크롤과 수평 스크롤이 있는데 수직 스크롤은 요즘 많이들 사용하고 있는 휠마우스를 사용하여 어느 정도 사용하기 편하지만, 수평스크롤은 오른쪽과 왼쪽으로 왔다갔다하는 움직임을 해야 하기 때문에 몹시 불편을 준다.

출처 : UIdesign

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

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

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

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


링크를 신호로 만드는 방법
문법적으로 정확한 문장은 정보를 찾기 어렵게 할 경우가 있다는 조사 결과(제이콥 닐슨 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

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

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

하나의 태스크를 대상으로 사용자가 그 태스크를 수행하는데 걸리는 예상 시간을 계산하는 것이다. 손을 마우스에 가져가고, 마우스를 움직이고, 누르고, 메뉴바의 이름을 기억해 내고, 각각에 드는 시간을 기준으로 태스크를 수행하는데 걸리는 총시간을 계산한다. 이때에는 육체적인 액션과 정신적인 액션에 드는 시간을 모두 계산한다. 이러한 방법 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

class Duck{
        public var flyBehavior:FlyBehavior;
        public var quackBehavior:QuackBehavior;

        public function Duck(){

        }
        public function swim():Void{

        }
        public function display():Void{

        }
        public function performQuack():Void{
                quackBehavior.quack();
        }
        public function performFly():Void{
                flyBehavior.fly();
        }
        public function setFlyBehavior(fb:FlyBehavior):Void{
                flyBehavior = fb;
        }
        public function setQuackBehavior(qb:QuackBehavior):Void{
                quackBehavior = qb;
        }
}

interface FlyBehavior{
        public function fly():Void;
}

class FlyNoWay implements FlyBehavior{
        public function fly():Void{
                trace("저 안 날아요");
        }
}

class FlyWithWings implements FlyBehavior{
        public function fly():Void{
                trace("저 날아요");
        }
}

class ModelDuck extends Duck{
        public function ModelDuck(){
                flyBehavior = new FlyNoWay();
                quackBehavior = new MuteQuack();
        }
        private function display():Void{
                trace("가짜 오리입니다");
        }
}

class MuteQuack implements QuackBehavior{
        public function quack():Void{
                trace("나 벙어리");
        }
}

class Quack implements QuackBehavior{
        public function quack():Void{
                trace("꽥꽥");
        }
}

interface QuackBehavior{
        public function quack():Void;
}

class Squack implements QuackBehavior{
        public function quack():Void{
                trace("삑삑");
        }
}

class Main{
        private var myDuck:Duck;
        public function Main(){
                myDuck = new ModelDuck();
                init();
        }
        private function init():Void{
                myDuck.display();
                myDuck.performFly();
                myDuck.performQuack();
                myDuck.setFlyBehavior(new FlyWithWings());
                myDuck.performFly();

        }
}

블로그를 시작하면서 그동안 내가 너무 모르는 것들이 많았구나 하는 생각을 하게 된다. css, html.. 사실 html은 대학교를 다니면서 홈페이지를 만들기 위해서는 몇백개 되는 코드를 이용해서 만들 수 있다는 것에서 처음 접하게 되었는데 실무에서 직접 html을 다루지 않다보니 아는게 별로 없는 듯 싶다...

css도 예전보다 많이 변한 듯 싶다. class 개념으로 지금은 예전보다 사용하기 편하고 관리하기 편한 구조화가 가능해 진 듯 싶다. 쿠쿠 이게 언제때 이야기인데 그러나 하시는 분들도 있지 않을까 싶은데 나는 모든게 새롭게 다가오니, 내 분야가 아니더라도 평소에 조금의 관심은 갖고 있어야 무식하다는 소리를 듣지 않을 듯 싶다...

트랙백, 개념적으로는 다른 사람이 쓴 글을 다른 곳에서 댓글을 달 수 있고 상호 커뮤니케이션이 이루어 질 수 있도록 하는 개념이라고 들은 것 같은데...쿠쿠 실제로 블로그를 하다보니 당췌 어찌 써야 하는 것인지 모르겠다. 트랙백 주소를 클릭하면 복사가 되긴 하는데 그걸 어디다가 써먹는지 모르겠다는... 며칠 낑낑대며 찾아다니다보면 알게 되겠지만 이 또한 생소한 용어다.

IT는 내가 잠시 다른 것에 한눈을 팔때 사과가 수박이 되기도 하는 것 같다. 차례 때문에 수박 1/4쪽을 1만5천원에 샀다고 했는데... 냉장고에 있는 수박을 급습해야 겠다... 갑자기 먹고 싶네~ 쿠쿠

1. 
   Eyedropper Just click and drag the eyedropper anywhere on the screen to select a new color. Single pixel or 3x3/5x5 average sampling options are available.
2. Magnifier This control works exactly like the eyedropper. It can be used to zoom in on an area of the screen. After zooming, you can click in the magnifier view to select a color. The plus and minus buttons can be used to change the magnification level before or after magnifiying an area.
3. Auto-copy to clipboard With this option enabled, the output value will automatically be copied to the clipboard.
4. Multiple output options
   HTML hex, Delphi hex, Powerbuilder, Visual Basic, Visual C++, RGB float, RGB int
5. Color options
   Snap to WebSafe, Detect WebSafe, Reverse, Random, Convert to Grayscale
6. Relative position measuring Press the Control key while eyedropping and the coordinates will be set to zero (0,0). When you drag the mouse to a new location, the coordinate values will be relative to the point.
7. Color History The last 7 colors selected will appear in the color history. To select a previous color, simply click on it. Colors can be pushed into the color history by right clicking while eyedropping.
8. Complementary color palette 42 colors that complement the current color will be generated on the fly.
9. System tray support The application can be minimized to the system tray.
10. Mouse wheel support Spin the mouse wheel while magnifying to change the magnification level. Spinning the mouse wheel while focus is on either of the Red, Green, or Blue edit controls will increment or decrement by 1(hold shift for +/- 2, hold control for +/- 5).
11. Other minor features RGB Float mode will output the color as 0.50,0.25,0.00 Alt+[ will decrease floating point precision and Alt+] will increase floating point precision.
    The standard windows cross hair cursor can be used in lieu of the eyedropper cursor.
    Omit the # or $ symbols from the hex codes
    Upper or Lowercase hex output
    

invalid-file

버전 4.0

invalid-file

버전 5.4.3