W20601

	여러분 안녕하세요 지난주는 정보의 구조체계에 대하여 알아보았습니다. 하나의 정보체계를 건물에 비유한다면 구조는 전체적인 설계도에 해당되며 인터페이스 디자인이란 기능성을 가지는 각 방으로 유도하는 사인보드, 그리고 분위기를 연출해 내는 인테리어 디자인에 해당할 것입니다. 제가 사는 집은 지은 지 오래된 단독주택이기 때문에 손님들이 찾아왔을 때 화장실의 위치를 매번 알려드려야 합니다. "거실 끝에서 오른쪽으로 돌아 두 번째 왼쪽 문..." 뭐 이런 식입니다만 그래도 마주보고 있는 저의 침실로 들어가는 손님들이 간혹 있기에 때론 공공건물에서 처럼 화장실 팻말을 붙일까 생각중입니다. 주택이란 사적인 공간이므로 이미 구조를 알고 있는 거주자를 위한 아무런 사인(sign)체계가 필요치 않습니다. 혹은 일률적인 아파트구조라면 사용자들이 경험적으로 화장실의 위치를 찾아낼 수도 있습니다. 그러나 백화점이나 공항과 같은 공공건물에 있어서는 어디에 매표소가 있는지 화장실이 있는지 등을 사인체계로 만들어 눈에 잘 뜨이는 곳에 놓지 않으면 많은 사용자들이 우왕좌왕하는 불편을 겪어야 하겠지요. 그래도 건물은 3차원 공간이며 각 면의 구조와 모양이 다르기 때문에 한번 갔던 곳을 다시 가게 되는 실수를 하는 경우는 적습니다. 즉 우리는 내가 지금 건물의 동쪽 편에 있다.. 하는 정도의 3차원적 위치감과 여기는 기둥이 있는 것을 보면 아까 왔던 곳이다. 하는 정도의 공간 지각력을 사용할 수 있지요. 웹 사이트는 미로와 같습니다. 모든 방(화면)의 크기가 똑같고 2차원 공간이므로 상하좌우 위층 아래층의 공간지각을 할 수 없기 때문입니다. 그러므로 건물에서보다 정확하고 이해하기 쉬운 사인체계 그리고 어느 위치인지를 알 수 있을만한 시각적 성격들을 갖추지 않는 다면 똑같은 크기의 방이 사방 붙어있는 건물 속을 헤매는 느낌을 갖게 될 것입니다. 이번 주는 필요한 정보의 페이지로 쉽게 접근할 수 있도록 인터페이스 디자인을 위해 고려해야할 여러 가지 요소와 조건들에 대하여 알아보고자 합니다. 인터페이스 디자인은 디지털 매체를 통한 커뮤니케이션의 빈도수가 많아지면서 각 학문에서의 연구가 활발히 이루어지고 있는 분야입니다. 전자제품의 액정패널, 현금인출기의 터치스크린, 전자오락실의 게임기, 컴퓨터 운영프로그램에 이르기까지 그 응용범위는 점차 넓어지고 있으며 웹 페이지는 그중 하나입니다. 더욱 쉽고 편리한 인터페이스의 개발을 위하여 인간공학, 기호학, 인지공학, 컴퓨터 공학, 인공지능 기술들이 응용되고 있으며 많은 자본이 이의 개발을 위해 투입되고 있습니다. 우리는 그중 웹 스크린의 시각디자인을 하는 데에 응용할 수 있는 몇 가지에 대해 논하고자 합니다. 그 중에는 안내성, 정렬성, 주목성, 은유성, 동질성, 일관성, 편의성 등이 있습니다. 안내성 (Orientation) 우리가 책과 처음 만나는 장은 표지입니다. 표지는 그 책의 전체내용을 상징적으로 표현하고 있으며 표지 위에는 그 내용을 가장 대표할 수 있는 하나의 제목이 있습니다. 대게 표지가 마음에 들면 전체페이지를 훑어보면서 각 페이지의 문자, 사진, 도표의 양을 확인하고 전체의 두께를 봐서 정보의 규모를 짐작하게 됩니다. 여기까지는 그 책에 대한 일차적 오리엔테이션에 해당한다고 볼 수 있습니다. 그 다음은 목차를 보면서 내용의 성격을 분석하기 시작하지요. 웹의 인덱스 페이지와 시작 애니메이션은 책의 표지와 안쪽 페이지들을 훑어보는 것과 같습니다. 우선 방문자가 웹 사이트를 처음 접하게 되는 곳은 시작 애니메이션이나 인덱스 페이지의 그래픽 이미지가 될 것입니다. 이는 웹 사이트 전체에 대한 안내역할을 해 줄 수 있어야 합니다. 그러므로 그 중에는 아무래도 추상적이고 타이틀 문자들이 움직이는 형식이 많이 있습니다. 영화에서 타이틀 롤(Title roll)을 "Mini opening movie"라고 부르거나 방송프로그램에서의 날아 다니는 글자들(Type in motion)의 형식이 발전해온 것을 보면 알 수 있습니다. 그러나 영화나 TV와는 달리 웹 애니메이션 구현속도는 비교할 수 없을 만큼 느리므로 시작 애니메이션은 웹에 있어서 아직 보편적인 방법은 아닙니다. 매체별로 데이터가 움직이는 속도의 차이를 전문용어로는 밴드위스(Bandwidth) 라고 하며 이 차이는 점차 좁혀지는 추세입니다. 웹에서는 GIF animation, Flash 등을 사용하여 시작 애니메이션을 보여주는 경우가 있는데 역시 페이지 읽기 속도가 중요한 사이트의 경우에는 그 사용을 피하는 것이 좋으며 이보다는 한 장의 시작페이지나 Index 페이지의 배경질감, 표지이미지를 통하여 오리엔테이션 하는 것이 보편적 방법이라고 하겠습니다. 좌: Hotwired 갤러리 사이트 시작 애니메이션 www.hotwired.com/rgb/ 우: 한장의 오픈 페이지는 사이트에 대한 전체적인 이미지를 전달할 수 있습니다. 또한 오픈 페이지의 이미지양을 작게하여 빠르게 로딩되도록 하면 사용자는 사이트에 이미 들어왔다는 인식을 하게 되어 인덱스 페이지가 화면에 뜨는 동안 걸리는 시간에 관대해지는 경향을 보이기도 합니다 오픈 페이지로 부터 전체적인 정보를 얻기도 합니다. www.carnegiehall.org 플레시(Flash)를 사용한 애니메이션으로 제작된 사이트의 예 www.nagafuji.com 정보의 순서와 정렬 정보의 순서를 결정짓는 것은 정보여행의 방향을 유도하기 위해 가장 처음 고려되어야 하는 부분입니다. 정보의 순서가 정해지면 비로소 시각적 흐름을 만들 수 있게 되는 것인데 그 순서를 정하는 기준에는 중요성과 사용빈도, 관습적인 순서, 철자순, 시간순 등이 있습니다. * 중요성과 사용빈도 : 웹사이트 제작의 초기단계에서 내용 분석을 철저히 하면 어떤 데이터가 사용자에게 다른 것보다 더 중요하며 자주 사용될 것인지를 예측할 수 있습니다. 이러한 경우에 더 중요한 구성요소를 눈에 띄는 위치에 두어야 합니다. 또한 어떤 구성요소가 다른 것들 보다 빈번히 사용될 경우에 이를 화면의 가장 잘 보이고 페이지의 레이아웃 상에 항상 나타나게 될 부분에 두어야 할 것입니다. * 관습적인 순서 : 정보의 표현에는 많은 경우에 관습적으로 받아들여지는 순서가 있습니다. 컴퓨터 분야에서는 메뉴의 배열에 있어서 파일 다음에 편집, 메뉴.. 등의 순서를 따르는 것이 사용자들의 학습된 습관상 쉽게 이해할 수 있습니다. 정보내용의 성격상 전통적인 순서가 있는 경우라면 그 순서에 따르는 것도 좋은 방법입니다. * 철자순/시간순 : 만약 데이터 구성요소에 적용시킬 논리적인 질서가 마땅히 없다면 다른 기술이 적용되어야 합니다. 예를 들어 파일이름을 나열한 경우 철자의 순서대로 배열하는 것이 적절할 수 있으며, 메일의 경우에는 편지를 받은 시간에 따라 나열하는 것도 적절할 것입니다. 정보의 순서가 결정되면 그 다음에는 그 순서대로 방문자의 시선이 유도 되도록 하는 것입니다. 3주 강의에서 화면상의 그래픽 요소가 그 크기와 위치에 따라 어떤 인지도를 갖게 되는지에 설명한 바 있습니다. 그러나 웹페이지는 깜박임(Blinking), JAVA 스크립팅을 사용한 롤 오버(Roll over: 커서가 버튼위에 겹쳐 졌을 때 모양을 바꾸어 클릭이 가능한 요소임을 알리는 효과), GIF 애니메이션을 사용한 움직임의 효과를 더할 수 있으며 이런 움직임은 그 위치와 크기를 초월하여 강력하게 시선을 끄는 성격이 됩니다. 깜박임 효과는 "주목 !"이라고 느껴지는 만큼 주지도가 높으며 알람 경고등과 같은 역할을 하여 사용여부에 있어서 신중해야 합니다. 그 다음으로는 GIF 애니메이션과 롤 오버의 순으로 주목성을 가지게 되며 문자의 색상, 크기, 밑줄긋기, 굵기, 위치 등은 정지요소로서 주목성의 차이를 주는 방법이 됩니다. 이미지 맵(Image map) 과 메타포(Metaphor) 해외 여행 중 레스토랑에서 음식을 주문할 때에는 꽤 시간이 걸립니다. 대게 메뉴의 음식용어를 잘 모르기 때문이지요. 물론 주문하는 것 자체를 즐긴다면 상관이 없습니다만 역시 먹고 싶은 것을 빠르고 정확하게 시키기 위해서는 음식의 사진이 붙은 메뉴판이 최고입니다. 음식점에 따라서는 음식의 플라스틱 모형을 가게 앞에 진열해 놓는 경우도 있는데 이는 손님을 끄는 강력한 도구가 됩니다. 웹사이트의 index페이지는 스크린 뒤에 숨어있는 정보의 메뉴판과 같은 것입니다. 그리고 뒤에 숨어있는 내용을 보여주기 위한 작은 창들을 이미지 맵이라고 합니다. 이미지 맵은 그 자체가 버튼이 되기도 하고 링크 텍스트의 참고용 이미지일 수도 있으며 때로는 아이콘을 동반하기도 합니다. 세미나 발표자의 내용을 보기 위한 링크 이미지라면 발표자의 얼굴사진을 이미지 맵으로 할 수 있을 것이며 스포츠 기록을 탐색해 보는 페이지의 축구 기록 페이지로 가기 위해서 축구공을 그 대표이미지로 사용하는 등이 그 예가 될 수 있습니다. 이미지 맵의 예 www.bmw.com 메타포란 문학에서는 시적인 상상력의 기법이나 수사학적인 측면으로 이해됩니다. 웹에서 메타포를 활용하는 것은 사람들의 일상적인 사고체계나 언어체계를 활용하여 웹 정보의 개념과 특징을 사용자에게 직관적으로 전달하기 위한 것입니다. 최근 CD-ROM이나 웹 사이트는 출판물의 메타포를 활용한 것에서부터, 갤러리나 박물관 같은 건물의 실내구조를 메타포로 사용한 것, 오디오, 비디오 플레이어의 작동패널의 모양을 빌려온 것 등 다양한 형태를 띄고 있습니다. 즉 메타포는 현실세계에서의 작동경험을 가지고 웹 상에서 쉽게 연상시켜 별도의 숙지하는 과정이 없이 쉽게 내용을 찾아볼 수 있도록 해 줍니다. 지구를 네비게이션 메타포로 사용한 예 www.channeli.net/zzaloo/ 네비게이션 조정기(Controler) 메타포를 사용한 예 www.legomindstorms.com 아이덴터티 디자인 (Identity design) 시각디자인에 있어서 아이덴터티 디자인이라고 하면 주로 기업이나 단체를 위한 심볼 밑 문자체계를 포함하는 전체적인 시각 이미지 창조작업을 뜻합니다. 다양한 종류의 시각물에 일률적인 디자인 성격을 부가하여 쉽게 오랫동안 기억에 남도록 하는 것은 관찰자와의 지속적인 커뮤니케이션에 있어서 필수적인 요소입니다. 웹에 있어서도 마찬가지로 그 정보제공자가 기업이건 단체이건 개인이건 간에 일률적으로 적용할 그래픽 이미지를 가지는 것은 중요하며 이는 전체페이지의 동질화 감이나 나중에 다른 매체에서의 사용 (프로모션용 제품이나 인쇄광고에서의 인지도를 위해서도)을 위해서도 필요한 요소입니다. 즉 웹에서뿐만 아니라 전체적인 디자인 전략상에서 최대의 효과를 위한 것입니다. 이러한 동질화 개념은 심볼이나 로고에서만이 아니라 각 웹 페이지 간의 그룹핑 문제에 있어서도 고려해야할 조건이 됩니다. 인덱스 페이지는 마호가니 나무질감의 배경에 로만체 계열의 로고를 사용한 고전양식을 보여주는 디자인이면서 링크 페이지 중 하나는 사이버 스타일로 또 다른 페이지는 키취적 스타일로 되어 있다면 이는 청바지에 색동 저고리를 입은 모습일 것입니다. 물론 이 정도로 심한 경우는 보기 드뭅니다만 형식이나 스타일에 있어서 연결된 페이지들이 조화롭게 보이지 않는 경우는 너무나 많습니다. 또한 인덱스 페이지의 시각요소나 배치 등의 그래픽 특징들이 그대로 하부구조에 있는 링크페이지들에 적용되어 있다면 사용자는 페이지간에 계층적 혼돈을 할 수 도 있으므로 신중하게 생각하여야 합니다. 즉 웹 사이트를 제작할 때는 링크가 될 전체페이지의 성격을 신중히 분류하고 그 구조상의 위치를 결정한 후 그룹핑 된 페이지들간에 동질화계획을 세우는 것은 중요합니다. 이때 각 페이지 그룹의 동질성은 전체 그룹이 모였을 때 또 다른 큰 동질적 성격으로 느껴질 수 있도록 전체적인 감을 만들어 내는 작업은 필수적입니다. 인덱스 페이지와 하부 페이지들이 색상이나 스타일적인 면에서 동질성을 보여주고 있다. 동시에 인덱스 페이지는 우측 상단에 애니메이션 버튼을 만들어 하부 페이지와의 부분적인 차별화를 만들어 놓았다. www.tlg.com 사용자 편의성 웹 사이트는 기능성이 우선적으로 강조되어야 합니다. 웹 방문자들은 보기 좋은 시각 디자인 작품을 보기 위해서가 아니라 그들이 필요로 하는 정보를 얻기 위해 웹 사이트에 접속합니다. 그러므로 시각적으로는 우수하더라도 편리하지 못한 부분이 있다면 다시 한번 생각해 볼 문제입니다. 저는 웹 서점을 통해 책을 자주 구입하는데 책을 주문할 때마다 구매 프로세스 중에 나타나는 많은 편의성 기능들에 감탄하게 됩니다. 쇼핑바구니에 한데 모아 일괄 처리하게 해준다거나 개인정보 유출을 꺼리는 소비자들을 위해 안전함을 증명하는 링크 페이지, 구입한 책과 연관된 다양한 정보나 다른 서적으로의 안내를 하는 등 사용자가 어떤 시점에서 어떤 요구가 생길 수 있는지에 대해 철저히 준비되어 있음을 알게 됩니다. 또한 현재 페이지의 위치를 표시해 주는 간단한 네비게이션 표시자 (Indicator)나 긴 페이지의 끝에서는 다시 위로 스크롤 하지 않고도 페이지 상단의 버튼들과 같이 링크가 되는 여분의 버튼들은 사용자 측면에서의 필요성이 웹 디자인상에서 구현된 예이며 이는 그 무엇보다도 중요한 디자인 조건이 됩니다. 이번 주는 인터페이스가 갖추어야 할 여러 가지 면에 대해서 알아보았습니다. 여긴 이래야 한다. 저긴 저래야 한다 등의 원론적인 얘기가 많이 나온 것 같아 무척 지겨웠을 것 같습니다. 사실상 좋은 인터페이스가 어떤 것이냐고 묻는다면 대답은 간단합니다. 사용방법에 대한 별도의 학습과정 없이도 이해하기가 쉬운 인터페이스일 것입니다. 예전에는 CD-ROM의 경우 인터랙션 방법을 설명하기 위해 Help 기능을 넣어주는 경향이 많았습니다. 그러나 이건 사실 무척 우스꽝스러운 일입니다. 정보를 얻기 위해 새로운 교육정보를 숙지해야 한다니.. 오늘의 강의내용이 쉬운 인터페이스를 디자인하기 위한 아이디어를 제공하게 되기를 기대합니다. 감사합니다. 끝

여러분 안녕하세요
지난주는 정보의 구조체계에 대하여 알아보았습니다. 하나의 정보체계를 건물에 비유한다면 구조는 전체적인 설계도에 해당되며 인터페이스 디자인이란 기능성을 가지는 각 방으로 유도하는 사인보드, 그리고 분위기를 연출해 내는 인테리어 디자인에 해당할 것입니다. 제가 사는 집은 지은 지 오래된 단독주택이기 때문에 손님들이 찾아왔을 때 화장실의 위치를 매번 알려드려야 합니다. "거실 끝에서 오른쪽으로 돌아 두 번째 왼쪽 문..." 뭐 이런 식입니다만 그래도 마주보고 있는 저의 침실로 들어가는 손님들이 간혹 있기에 때론 공공건물에서 처럼 화장실 팻말을 붙일까 생각중입니다. 주택이란 사적인 공간이므로 이미 구조를 알고 있는 거주자를 위한 아무런 사인(sign)체계가 필요치 않습니다. 혹은 일률적인 아파트구조라면 사용자들이 경험적으로 화장실의 위치를 찾아낼 수도 있습니다. 그러나 백화점이나 공항과 같은 공공건물에 있어서는 어디에 매표소가 있는지 화장실이 있는지 등을 사인체계로 만들어 눈에 잘 뜨이는 곳에 놓지 않으면 많은 사용자들이 우왕좌왕하는 불편을 겪어야 하겠지요. 그래도 건물은 3차원 공간이며 각 면의 구조와 모양이 다르기 때문에 한번 갔던 곳을 다시 가게 되는 실수를 하는 경우는 적습니다. 즉 우리는 내가 지금 건물의 동쪽 편에 있다.. 하는 정도의 3차원적 위치감과 여기는 기둥이 있는 것을 보면 아까 왔던 곳이다. 하는 정도의 공간 지각력을 사용할 수 있지요. 웹 사이트는 미로와 같습니다. 모든 방(화면)의 크기가 똑같고 2차원 공간이므로 상하좌우 위층 아래층의 공간지각을 할 수 없기 때문입니다. 그러므로 건물에서보다 정확하고 이해하기 쉬운 사인체계 그리고 어느 위치인지를 알 수 있을만한 시각적 성격들을 갖추지 않는 다면 똑같은 크기의 방이 사방 붙어있는 건물 속을 헤매는 느낌을 갖게 될 것입니다. 이번 주는 필요한 정보의 페이지로 쉽게 접근할 수 있도록 인터페이스 디자인을 위해 고려해야할 여러 가지 요소와 조건들에 대하여 알아보고자 합니다.

인터페이스 디자인은 디지털 매체를 통한 커뮤니케이션의 빈도수가 많아지면서 각 학문에서의 연구가 활발히 이루어지고 있는 분야입니다. 전자제품의 액정패널, 현금인출기의 터치스크린, 전자오락실의 게임기, 컴퓨터 운영프로그램에 이르기까지 그 응용범위는 점차 넓어지고 있으며 웹 페이지는 그중 하나입니다. 더욱 쉽고 편리한 인터페이스의 개발을 위하여 인간공학, 기호학, 인지공학, 컴퓨터 공학, 인공지능 기술들이 응용되고 있으며 많은 자본이 이의 개발을 위해 투입되고 있습니다. 우리는 그중 웹 스크린의 시각디자인을 하는 데에 응용할 수 있는 몇 가지에 대해 논하고자 합니다. 그 중에는 안내성, 정렬성, 주목성, 은유성, 동질성, 일관성, 편의성 등이 있습니다.

안내성 (Orientation)

우리가 책과 처음 만나는 장은 표지입니다. 표지는 그 책의 전체내용을 상징적으로 표현하고 있으며 표지 위에는 그 내용을 가장 대표할 수 있는 하나의 제목이 있습니다. 대게 표지가 마음에 들면 전체페이지를 훑어보면서 각 페이지의 문자, 사진, 도표의 양을 확인하고 전체의 두께를 봐서 정보의 규모를 짐작하게 됩니다. 여기까지는 그 책에 대한 일차적 오리엔테이션에 해당한다고 볼 수 있습니다. 그 다음은 목차를 보면서 내용의 성격을 분석하기 시작하지요. 웹의 인덱스 페이지와 시작 애니메이션은 책의 표지와 안쪽 페이지들을 훑어보는 것과 같습니다.
우선 방문자가 웹 사이트를 처음 접하게 되는 곳은 시작 애니메이션이나 인덱스 페이지의 그래픽 이미지가 될 것입니다. 이는 웹 사이트 전체에 대한 안내역할을 해 줄 수 있어야 합니다. 그러므로 그 중에는 아무래도 추상적이고 타이틀 문자들이 움직이는 형식이 많이 있습니다. 영화에서 타이틀 롤(Title roll)을 "Mini opening movie"라고 부르거나 방송프로그램에서의 날아 다니는 글자들(Type in motion)의 형식이 발전해온 것을 보면 알 수 있습니다. 그러나 영화나 TV와는 달리 웹 애니메이션 구현속도는 비교할 수 없을 만큼 느리므로 시작 애니메이션은 웹에 있어서 아직 보편적인 방법은 아닙니다. 매체별로 데이터가 움직이는 속도의 차이를 전문용어로는 밴드위스(Bandwidth) 라고 하며 이 차이는 점차 좁혀지는 추세입니다. 웹에서는 GIF animation, Flash 등을 사용하여 시작 애니메이션을 보여주는 경우가 있는데 역시 페이지 읽기 속도가 중요한 사이트의 경우에는 그 사용을 피하는 것이 좋으며 이보다는 한 장의 시작페이지나 Index 페이지의 배경질감, 표지이미지를 통하여 오리엔테이션 하는 것이 보편적 방법이라고 하겠습니다.

좌: Hotwired 갤러리 사이트 시작 애니메이션 www.hotwired.com/rgb/
우: 한장의 오픈 페이지는 사이트에 대한 전체적인 이미지를 전달할 수 있습니다.
또한 오픈 페이지의 이미지양을 작게하여 빠르게 로딩되도록 하면 사용자는 사이트에 이미
들어왔다는 인식을 하게 되어 인덱스 페이지가 화면에 뜨는 동안 걸리는 시간에 관대해지는 경향을
보이기도 합니다
오픈 페이지로 부터 전체적인 정보를 얻기도 합니다. www.carnegiehall.org

플레시(Flash)를 사용한 애니메이션으로 제작된 사이트의 예 www.nagafuji.com

정보의 순서와 정렬

정보의 순서를 결정짓는 것은 정보여행의 방향을 유도하기 위해 가장 처음 고려되어야 하는 부분입니다. 정보의 순서가 정해지면 비로소 시각적 흐름을 만들 수 있게 되는 것인데 그 순서를 정하는 기준에는 중요성과 사용빈도, 관습적인 순서, 철자순, 시간순 등이 있습니다.

* 중요성과 사용빈도 : 웹사이트 제작의 초기단계에서 내용 분석을 철저히 하면 어떤 데이터가 사용자에게 다른 것보다 더 중요하며 자주 사용될 것인지를 예측할 수 있습니다. 이러한 경우에 더 중요한 구성요소를 눈에 띄는 위치에 두어야 합니다. 또한 어떤 구성요소가 다른 것들 보다 빈번히 사용될 경우에 이를 화면의 가장 잘 보이고 페이지의 레이아웃 상에 항상 나타나게 될 부분에 두어야 할 것입니다.

* 관습적인 순서 : 정보의 표현에는 많은 경우에 관습적으로 받아들여지는 순서가 있습니다. 컴퓨터 분야에서는 메뉴의 배열에 있어서 파일 다음에 편집, 메뉴.. 등의 순서를 따르는 것이 사용자들의 학습된 습관상 쉽게 이해할 수 있습니다. 정보내용의 성격상 전통적인 순서가 있는 경우라면 그 순서에 따르는 것도 좋은 방법입니다.

* 철자순/시간순 : 만약 데이터 구성요소에 적용시킬 논리적인 질서가 마땅히 없다면 다른 기술이 적용되어야 합니다. 예를 들어 파일이름을 나열한 경우 철자의 순서대로 배열하는 것이 적절할 수 있으며, 메일의 경우에는 편지를 받은 시간에 따라 나열하는 것도 적절할 것입니다.

정보의 순서가 결정되면 그 다음에는 그 순서대로 방문자의 시선이 유도 되도록 하는 것입니다. 3주 강의에서 화면상의 그래픽 요소가 그 크기와 위치에 따라 어떤 인지도를 갖게 되는지에 설명한 바 있습니다. 그러나 웹페이지는 깜박임(Blinking), JAVA 스크립팅을 사용한 롤 오버(Roll over: 커서가 버튼위에 겹쳐 졌을 때 모양을 바꾸어 클릭이 가능한 요소임을 알리는 효과), GIF 애니메이션을 사용한 움직임의 효과를 더할 수 있으며 이런 움직임은 그 위치와 크기를 초월하여 강력하게 시선을 끄는 성격이 됩니다. 깜박임 효과는 "주목 !"이라고 느껴지는 만큼 주지도가 높으며 알람 경고등과 같은 역할을 하여 사용여부에 있어서 신중해야 합니다. 그 다음으로는 GIF 애니메이션과 롤 오버의 순으로 주목성을 가지게 되며 문자의 색상, 크기, 밑줄긋기, 굵기, 위치 등은 정지요소로서 주목성의 차이를 주는 방법이 됩니다.

이미지 맵(Image map) 과 메타포(Metaphor)

해외 여행 중 레스토랑에서 음식을 주문할 때에는 꽤 시간이 걸립니다. 대게 메뉴의 음식용어를 잘 모르기 때문이지요. 물론 주문하는 것 자체를 즐긴다면 상관이 없습니다만 역시 먹고 싶은 것을 빠르고 정확하게 시키기 위해서는 음식의 사진이 붙은 메뉴판이 최고입니다. 음식점에 따라서는 음식의 플라스틱 모형을 가게 앞에 진열해 놓는 경우도 있는데 이는 손님을 끄는 강력한 도구가 됩니다. 웹사이트의 index페이지는 스크린 뒤에 숨어있는 정보의 메뉴판과 같은 것입니다. 그리고 뒤에 숨어있는 내용을 보여주기 위한 작은 창들을 이미지 맵이라고 합니다. 이미지 맵은 그 자체가 버튼이 되기도 하고 링크 텍스트의 참고용 이미지일 수도 있으며 때로는 아이콘을 동반하기도 합니다. 세미나 발표자의 내용을 보기 위한 링크 이미지라면 발표자의 얼굴사진을 이미지 맵으로 할 수 있을 것이며 스포츠 기록을 탐색해 보는 페이지의 축구 기록 페이지로 가기 위해서 축구공을 그 대표이미지로 사용하는 등이 그 예가 될 수 있습니다.

이미지 맵의 예 www.bmw.com

메타포란 문학에서는 시적인 상상력의 기법이나 수사학적인 측면으로 이해됩니다. 웹에서 메타포를 활용하는 것은 사람들의 일상적인 사고체계나 언어체계를 활용하여 웹 정보의 개념과 특징을 사용자에게 직관적으로 전달하기 위한 것입니다. 최근 CD-ROM이나 웹 사이트는 출판물의 메타포를 활용한 것에서부터, 갤러리나 박물관 같은 건물의 실내구조를 메타포로 사용한 것, 오디오, 비디오 플레이어의 작동패널의 모양을 빌려온 것 등 다양한 형태를 띄고 있습니다. 즉 메타포는 현실세계에서의 작동경험을 가지고 웹 상에서 쉽게 연상시켜 별도의 숙지하는 과정이 없이 쉽게 내용을 찾아볼 수 있도록 해 줍니다.

지구를 네비게이션 메타포로 사용한 예 www.channeli.net/zzaloo/

네비게이션 조정기(Controler) 메타포를 사용한 예 www.legomindstorms.com

아이덴터티 디자인 (Identity design)

시각디자인에 있어서 아이덴터티 디자인이라고 하면 주로 기업이나 단체를 위한 심볼 밑 문자체계를 포함하는 전체적인 시각 이미지 창조작업을 뜻합니다. 다양한 종류의 시각물에 일률적인 디자인 성격을 부가하여 쉽게 오랫동안 기억에 남도록 하는 것은 관찰자와의 지속적인 커뮤니케이션에 있어서 필수적인 요소입니다. 웹에 있어서도 마찬가지로 그 정보제공자가 기업이건 단체이건 개인이건 간에 일률적으로 적용할 그래픽 이미지를 가지는 것은 중요하며 이는 전체페이지의 동질화 감이나 나중에 다른 매체에서의 사용 (프로모션용 제품이나 인쇄광고에서의 인지도를 위해서도)을 위해서도 필요한 요소입니다. 즉 웹에서뿐만 아니라 전체적인 디자인 전략상에서 최대의 효과를 위한 것입니다. 이러한 동질화 개념은 심볼이나 로고에서만이 아니라 각 웹 페이지 간의 그룹핑 문제에 있어서도 고려해야할 조건이 됩니다. 인덱스 페이지는 마호가니 나무질감의 배경에 로만체 계열의 로고를 사용한 고전양식을 보여주는 디자인이면서 링크 페이지 중 하나는 사이버 스타일로 또 다른 페이지는 키취적 스타일로 되어 있다면 이는 청바지에 색동 저고리를 입은 모습일 것입니다. 물론 이 정도로 심한 경우는 보기 드뭅니다만 형식이나 스타일에 있어서 연결된 페이지들이 조화롭게 보이지 않는 경우는 너무나 많습니다.
또한 인덱스 페이지의 시각요소나 배치 등의 그래픽 특징들이 그대로 하부구조에 있는 링크페이지들에 적용되어 있다면 사용자는 페이지간에 계층적 혼돈을 할 수 도 있으므로 신중하게 생각하여야 합니다. 즉 웹 사이트를 제작할 때는 링크가 될 전체페이지의 성격을 신중히 분류하고 그 구조상의 위치를 결정한 후 그룹핑 된 페이지들간에 동질화계획을 세우는 것은 중요합니다. 이때 각 페이지 그룹의 동질성은 전체 그룹이 모였을 때 또 다른 큰 동질적 성격으로 느껴질 수 있도록 전체적인 감을 만들어 내는 작업은 필수적입니다.

인덱스 페이지와 하부 페이지들이 색상이나 스타일적인 면에서 동질성을 보여주고 있다.
동시에 인덱스 페이지는 우측 상단에 애니메이션 버튼을 만들어 하부 페이지와의 부분적인
차별화를 만들어 놓았다.
www.tlg.com

사용자 편의성

웹 사이트는 기능성이 우선적으로 강조되어야 합니다. 웹 방문자들은 보기 좋은 시각 디자인 작품을 보기 위해서가 아니라 그들이 필요로 하는 정보를 얻기 위해 웹 사이트에 접속합니다. 그러므로 시각적으로는 우수하더라도 편리하지 못한 부분이 있다면 다시 한번 생각해 볼 문제입니다. 저는 웹 서점을 통해 책을 자주 구입하는데 책을 주문할 때마다 구매 프로세스 중에 나타나는 많은 편의성 기능들에 감탄하게 됩니다. 쇼핑바구니에 한데 모아 일괄 처리하게 해준다거나 개인정보 유출을 꺼리는 소비자들을 위해 안전함을 증명하는 링크 페이지, 구입한 책과 연관된 다양한 정보나 다른 서적으로의 안내를 하는 등 사용자가 어떤 시점에서 어떤 요구가 생길 수 있는지에 대해 철저히 준비되어 있음을 알게 됩니다. 또한 현재 페이지의 위치를 표시해 주는 간단한 네비게이션 표시자 (Indicator)나 긴 페이지의 끝에서는 다시 위로 스크롤 하지 않고도 페이지 상단의 버튼들과 같이 링크가 되는 여분의 버튼들은 사용자 측면에서의 필요성이 웹 디자인상에서 구현된 예이며 이는 그 무엇보다도 중요한 디자인 조건이 됩니다.

이번 주는 인터페이스가 갖추어야 할 여러 가지 면에 대해서 알아보았습니다. 여긴 이래야 한다. 저긴 저래야 한다 등의 원론적인 얘기가 많이 나온 것 같아 무척 지겨웠을 것 같습니다. 사실상 좋은 인터페이스가 어떤 것이냐고 묻는다면 대답은 간단합니다. 사용방법에 대한 별도의 학습과정 없이도 이해하기가 쉬운 인터페이스일 것입니다. 예전에는 CD-ROM의 경우 인터랙션 방법을 설명하기 위해 Help 기능을 넣어주는 경향이 많았습니다. 그러나 이건 사실 무척 우스꽝스러운 일입니다. 정보를 얻기 위해 새로운 교육정보를 숙지해야 한다니.. 오늘의 강의내용이 쉬운 인터페이스를 디자인하기 위한 아이디어를 제공하게 되기를 기대합니다.
감사합니다.

끝