와플 메이커

 UI가 허락하도록 분명히 표시한 것들은 실제 규정으로도 절대로 금지될 수가 없다. 실제 규정에 의해 금지된다면 UI를 항상 최신의 올바른 정보로 유지하여 고객에게 손해를 입히지 말아야 할 의무가 있는 회사가 책임을 지게 된다. 그러나 반대의 경우로 UI가 허락한다고 애매하게 표시하거나 금지한다고 분명히 표시한 것들 중에서는 실제로 관계자에게 질문해보면 분명히 허락되는 것일 수도 있다.

 모든 허락과 금지사항이 UI에 분명히 표시되어 있지는 않고, 사람의 자율적이고 융통성 있는 생각은 완벽한 계획을 위해 항상 필요하며, 자동화/간략화/기호화 등으로 가공된 시스템 혼자만의 도움으로는 리스크가 전혀 없는 계획을 할 수가 없다. 완벽하고 꾸준히 사용되어온 UI라 할지라도 현실 상황을 잘못 설명하여 이용자의 잘못된 판단을 초래할 위험은 얼마든지 있다. UI는 권위의 주체가 아니다. 사람을 믿어라. 시스템은 만능이라는 환상을 나는 깨야 하며 그 환상을 계속 가지고 있으면 추후에도 내게 예상하지 못했던 큰 위험이 닥칠 수 있다.

on(rollOver)와 onRollover, onEnterFrame과 .onClipEvent(enterFrame). 액션스크립트를 처음 접하는 학생에게는 이처럼 헷갈리는 함수가 많아서 코딩이 끝난 후 Ctrl+Enter를 눌렀을 때 수십 개의 오류가 다다다~ 튀어나오곤 한다.

 액션스크립트를 무작정 따라하는 책에서도 함수와 이벤트 핸들러가 어떨 때에는 쓸 수 있고 어떨 때에는 쓸 수 없는지, 즉 어떤 건 어디에서만 쓸 수 있는지를 정리해놓지 않았다. 다만 이번 step에서는 다음과 같이 입력하라고 설명할 뿐이다. 이런 식으로 액션스크립트를 배운 학생은 나중에 실제로 플래시로 웹사이트의 내비게이션 영역을 디자인할 때 위와 같은 함수를 사용할 때 어떤 것을 써야 하는지 확실하게 모른다. 확실하게 모르면 코딩이 이루어질 수가 없다. 어떤 함수를 써야 하는지를 모르면 프로그래밍해놓은 작품이 아예 동작을 하지 않아서 오류를 하나씩 제거해나가는 tracing 자체가 불가능해지기 때문이다.
 
 따라서 적어도 다음과 같이 정리는 해두자.

프레임용 함수
play();
stop();
(무비클립 인스턴스 이름).(무비클립용 함수) 무비클립 안에 직접 함수를 써넣을 수도 있지만(무비클립을 누르고 F9를 누를 때) 무비클립의 수가 많거나 한 프레임짜리 Scene 혹은 한 프레임짜리 무비클립이라면 프레임을 재생할 필요가 없으므로 1프레임 안에 무비클립용 함수를 다 써넣는다.
gotoAndPlay(2);
한번만 실행할 함수는 프레임 안에 그냥 function으로 쓴다. 여러번 실행하고자 한다면 1프레임에 함수를 그냥 써놓고 2프레임에 gotoAndPlay(1);을 넣는다.

버튼용 함수
on(release){
on(rollOver){
on(rollOut, dragOut){
 버튼용 함수는 on( ) 식으로 이벤트 핸들러가 생겼다.

무비클립용 함수
onClipEvent(load){
onClipEvent(enterFrame){ 이것은 onEnterFrame = function(){ 과 같은 효과를 갖는다.
gotoAndPlay(2);  그리고 이 함수는 어떤 경우를 만족시킬 때에만 작동하기 위해 존재하는 함수이기 때문에 99%의 경우로 if(){ 안에 들어가 있다.
계속해서 실행할 함수는 무비클립 함수의 onEnterFrame 안에 넣는다.

if(over && this._xscale < 110){
   }else if(!over && this._xscale > 110) {
  }
else는 꼭 써 주어야 한다.


또 알아야 할 것이 있는데 그것은 변수의 scope이다.
무비클립 안의 액션스크립트에 있는 변수는 무비클립 프레임 안의 액션스크립트에 있는 변수와 scope가 같다.
예를 들어, mc1이라는 무비클립 안에 var1=1;을 써넣고 mc1 무비클립을 더블클릭하여 1프레임에 if(var1==3) 을 써넣으면 var1이 서로 연동된다.

 마치 모던한 대학생의 블로그나 YouTube의 개인 페이지를 보는 듯한 위의 화면은 사실은 국가권력의 가장 상층부에 위치한 영국 총리의 공식 웹사이트다. 물론 총리 그 자신이 사이트를 관리하지는 않지만 이곳의 뉴스와 비디오 자료는 모두 총리에게 초점이 맞추어져 있다.

 이제 이 사이트의 요소들을 하나씩 짚어보도록 한다.


 이 사이트는 이렇게 6개의 메뉴로 구성되어 있다. 기능이 단순하기 때문에 사람들이 자주 찾을 것 같다. 하지만 메뉴 내비게이션 바는 CSS만을 사용하여 마우스오버를 하면 흰색으로 바뀌게 되어 있는데 색깔이 바뀌는 속도가 느리다. 영국 사이트이기 때문일까, 아니면 지금 내 컴퓨터의 인터넷 속도가 느리기 때문일까? 아무튼 마우스오버를 했을 때 색깔은 바로 바뀌어주어야 사용자들이 불편한 마음을 갖지 않게 된다. 메뉴 사이의 간격 또한 조금 더 벌리고 글자 크기를 줄이는 게 더 세련될텐데, 이렇게 글씨를 크게 Times New Roman 체로 쓰는 건 영국식이라고 해야 하는 것일까.

 News를 클릭하면 다음과 같이 가장 최신의 기사가 하나 나온다. 이는 Number10.gov.uk가 블로그의 성격을 짙게 가지고 있다는 점을 보여준다. 블로그에서는 클릭 하나로 최신의 글 하나만 나타나면 불만의 소리를 들을 이유가 없다. 뉴스의 레이아웃, 즉 제목과 사진과 글과 외부 서비스 연동 버튼(twitter, digg 등등)은 다른 미국식 블로그와 똑같았다.


 이 사이트의 가장 큰 문제점은 왼쪽 사이드바에 하위 메뉴를 놓음으로써 영양가 있게 쓰일 수 있는 공간을 불필요하게 잡아먹고 하위 메뉴가 지나치게 많아지거나(History and Tour) 지나치게 적거나(Meet the PM) 하위 메뉴를 클릭하면 기존의 사이트 트리 구조가 없어지고 본문 영역이 완전히 다른 페이지로 전환되는 점이다.




 Communicate 메뉴는 그 이름에서 알 수 있듯 사이트 방문자인 시민과 이 사이트의 운영자인 영국 정부 간의 커뮤니케이션을 위해 만든 메뉴이며 따라서 기대도 컸다. 하지만 왼쪽의 그림에서 Go to number 10 e-petitions를 누르면 E-petitions라는 독립된 페이지로 전환되어 메뉴의 트리를 타고 내려오다가 갑자기 길을 잃게 된다. 차라리 Communicate -> e-petitions를 누르면 바로 두번째 그림의 사이트로 전환되고 현재 자신이 어느 위치에 있는지는 왼쪽 상단에 계속 보여주는 것이 좋겠다.


 또한 위의 그림에서 보듯 Search petitions 검색창은 카테고리별 검색 메뉴(view petitions) 에 중복해서 다른 위치에 등장하여 이용자에게 혼란을 준다. 검색창은 e-petitions라는 하위 메뉴 사이트의 윗부분이나 왼쪽 부분에 고정된 위치로 꿋꿋이 자리하여야 하겠다. 또한 단순히 텍스트 입력창과 검색 버튼만 있는 것이 아니라 search by..라는 디자인된 콤보박스나 라디오버튼을 검색창 주변에 넣어서 검색 결과의 범위를 조절할 수 있게 하면 좋겠다. 이렇게 되면 위의 그림과 같은 view petitions라는 하위 메뉴는 곧 검색창에서 검색 버튼을 눌렀을 때 나오는 검색 결과 창과 같아져야 하며, 검색창에서 search by 안에 넣은 항목들은 이곳의 sort by 안의 항목과 같아야 한다. 즉 모든 청원서를 보고 싶으면 view petitions 메뉴로 들어가고, 특정 petition만 보고 싶으면 검색창에서 검색 버튼을 눌러야 한다. 현재 검색창은 view petitions 메뉴보다 상위 메뉴에 위치해 있는데 굳이 이럴 필요가 없다면 검색창을 view petitions 메뉴 안에 집어넣어서 위의 그림과 충돌하지 않고 연계되게끔 만들어도 상관없을 듯하다.
 
 청원서 생성 (create a petition) 메뉴는 본문의 오른쪽 하단에 텍스트 링크로 자리하고 있어서 찾아가기가 힘들었고, 누른 이후에 나온 창에도 다음과 같이 '현재는 사용이 불가합니다' 라는 요지의 페이지만 나온다. 현재는 사용이 불가하다는 메시지를 큰 글씨와 아이콘으로 이러한 주절주절한 글의 위에다 띄워준다면 이용자는 얼마나 빠른 시간 안에 다른 곳으로 가야겠다는 결심을 할까. 너무나도 차분한 그들의 국민성은 이러한 UX의 허점도 묵인해줄 것일까?
 

 마지막 메뉴인 Number 10 TV이다. 이는 가장 첫 페이지에서 등장하는 비디오와 거의 비슷하게 생긴 페이지를 불러온다. 하지만 Number 10 TV에는 해당 비디오에 대한 보충 설명(News와는 조금 다른 별개의 컨텐츠) 대신 최신의 다른 비디오를 볼 수 있는 브라우저 목록 창을 옆에 놓았다. 이는 YouTube나 BBC, CNN 등이 쓰는 방식이다. 이러한 화면 구성은 좋다. 하지만 이 YouTube식 구성의 도움으로 Number 10 TV라는 메뉴는 메뉴로서의 입지를 상실한 듯하다. History and Tour 메뉴에는 마치 문화유적지의 웹사이트를 보듯 설명과 그림으로 내용이 꽉 차있는데, 이 Number 10 TV는 Number10.gov.uk의 메인 화면을 구성하는 요소가 중복된 것으로밖에 보이지 않는다. 이러한 메뉴는 과감히 삭제하고, 브라우저 목록 창을 메인 화면으로 옮긴 후 사이드바의 Latest Videos를 없애는 것이 훨씬 바람직한 것으로 인다. 메인 화면의 Latest Videos를 클릭하면 이 사이트 내에서 사이트가 전환되지 않고 새 창으로 YouTube가 열린다. 이 사이트 자체 플레이어만으로도 훌륭하기 때문에 YouTube는 아이콘만 남겨 App Store 위에 놓아 단순한 외부 링크로 처리하는 게 좋을 듯싶다.

  언제부터인가 1996-7년대의 아주 기본적인 형태의 HTML 웹 페이지가 플래시를 이용한 조금 더 세련된 페이지로 탈바꿈하면서 한국의 정부, 시민단체들은 하나둘씩 자신들의 웹사이트를 만들기 시작했다. 웹사이트를 정말로 정보 제공의 목적으로 개설했는가 아니면 보여주기식으로 했는가는 사이트마다 다르겠지만 대다수의 웹사이트는 디자인에는 그리 큰 관심을 두지 않았다. 한국 정부, 한국의 시민단체, 한국의 사단법인은 각자가 독창적인 CI나 테마 배색을 가지고 있어서는 안 된다고 생각했을까? 분명 그렇게 생각하여 일부러 지금의 천편일률적인 디자인이 나오게 되지는 않았을 것이고 아예 그들은 관심이 없었던 게 맞다.

  한국의 사기업을 제외한 그 외의 거의 모든 단체는 웹사이트를 디자인할 때 공통의 요소를 가지고 있다. 하늘, 들판, 건물, 새, 웃는 아이, 가족.. 등으로 이미지는 극히 한정되어 있다. 스크린샷을 통해 예를 들어 확인해 보자.

1. 한국인터넷기업협회 (www.kinternet.org)
2. 온나라 부동산정보 통합포털 (www.onnara.go.kr)
3. 정보공개시스템 (www.open.go.kr)
특히 나는 영국 의회의 날마다 업데이트되는 정보를 계속해서 대문에 바꾸어 달아주는 인터넷신문 형식의 웹사이트 레이아웃이 참 마음에 든다. 고정적인 그림을 메인화면에 계속 띄워 놓음으로써 정체된 느낌을 주지 않고 매일 들어올 때마다 내용이 다르다. 마치 네이버 같은 포털사이트를 보는 것처럼 그 바뀌는 정도가 상당하다. 그리고 바뀌고 있다는 것을 단순히 게시판의 새글 표시(오렌지색 N 네모)가 아닌 사진과 요약문을 통해 보여주기 때문에 더욱 더 정부 기관의 성실성에 반하게 된다.

 우리나라의 사이트들 또한 물론 지속적으로 자체 게시판 내에 글을 업로드하고 새로운 정보를 띄워주겠지만 그것이 눈앞에 보이지 않고 꽁꽁 숨어 있는다면 나와 같은 국민들은 흥미를 가지고 접근하기가 어렵다. 보여주기식 웹사이트 구축이라고 사람들이 오해하지 않기 위해서는 한국의 정부나 시민단체 사이트도 내용 위주로 사이트를 채워나가야 하고 공간을 불필요한 그림으로 때우지 말아야 하겠다.

  얼마 전에 잡지 w.e.b. 을 통해 알게 된 The Favourite Website Awards (The FWA) 라는 사이트가 있습니다. 어느 나라에서 만든 사이트인지는 모르겠지만, 플래시나 CSS를 중심으로 만든 웹사이트 중 아이디어가 기발하거나 창조적인 콘셉트를 활용한 곳을 소개해 주는 사이트입니다. 매일 한 개의 사이트가 차곡차곡 올라와 기분이 흐뭇합니다.

The FWA의 메인 화면 (사이트 들어가기)



  그중 제가 우연히 들어간 사이트 중 인테리어 소품과도 같은 즐거운 느낌을 주는 사이트가 있었으니 그것은 바로 Cartelle!! 인터랙티브 디자인을 연구하는 일종의 연구소 비슷한 곳이었습니다. 사이트 들어가기
  사이트는 매우 간소하게 생겼습니다. 마치 인사동에 있는 작은 비디오 아티스트의 전시관에 잠시 들른 느낌이랄까요? 사이트를 방문한 사람에게는 무작위로 Cartelle에서 제작한 인터랙티브 디자인 화면을 보여줍니다. TOY #1부터 #10까지인가 있습니다.

Cartelle의 왼쪽 사이드바 메뉴. 다양하게 즐길 수 있는 인터랙티브 디자인 소품들이 마련되어 있습니다.


제가 가장 좋아하는 소품은 바로 이 Rainy Day (TOY #2)입니다. 우산을 움직일 수 있어요~


  물론 한국에서도 플래시광고에 이러한 인터랙티브 디자인이 잘 쓰이지만 저는 웹사이트 자체에도 이것이 넓게 활용되었으면 합니다. 클릭하고 포인터를 움직이는 것에도 얼마나 많은 의미를 담을 수 있는지를 생각해 봐야겠지요.