안녕하세 요. 소셜 미디어 포럼의 김현태입니다.
이번 6회에는 ‘인터페이스 디자인과 인터랙션 디자인’에 대해 이야기 해보려고 합니다.
'인터페이스'와 '인터랙션' 참 비슷하면서도 애매모한 단어들이죠? ^^
한번 읽어보시고 정확하게 집고 넘어가 봅시다.
* 지난 회 보기 : 01 인터랙션 디자인 정의 / 02 인터랙션 디자인 접근법 / 03 인터랙션 디자인의 요소와 법 칙 / 04 좋은 인터랙션 디자인의 특징 / 05 인터랙션디자인을 위한 도구들
Interaction Design
06 인터페이스 디자인과 인터랙션 디자인
인터페이스 디자인과 인터랙션 디자인, 이것들은 서로 깊은 관련이 있기 때문에 혼돈하는 경우도 있다. 사람들은 인터페이스를 통해서 디지털 제품과 만나고 인터페이스는 디지털 디바이스와 인간의 커뮤니케이션 중개자 역할을 한다. 인터페이스를 통해 제품의 보이지 않는 기능들이 시각적으로 보이고 연결되고 사용된다. 인 터랙션 디자이너는 인터페이스를 통해 해당 제품이 어떻게 사람과 연관을 맺고 어떻게 그 제품이 현실적으로 반응할지를 결정한다.
인터 페이스 디자인은 보여지고 느껴는 부분을 담당하고 인터랙션 디자인은 인터페이스 디자인에 생명을 불어넣는다.
이처럼 인터페이스 디자인과 인터랙션 디자인은 밀접하게 연관성을 가지고 있고, 좋은 인터페이스에서 좋은 인터랙션 디자인이 가능하다. 훌륭한 인터랙션 디자인을 위해 고려되어야 할 인터페이스 요소들에 대해 살펴보자
1. 비주얼 인터페이스 디자인
많은 애플리케이션에서 음향효과는 사용이 제한되고 지시어는 거의 읽히지 않는다, 그러다 보니 비주얼 디자인이 전체적인 커뮤니케이션의 책임을 지고 인터랙션을 정의하고 가능성과 제약을 모두 보여주게 된다. 비 주얼 디자인이 사용자들에게 뭘 보아야 할지, 어떻게 작동시킬지, 왜 그래야 하는지를 설명한다.
비주 얼 요소가 자신들이 뒷받침해야 하는 숨겨진 인터랙션에 대한 이해가 없이 배치된다면 사용자들에게는 잘못된 정보가 전달될 것이다. 비주얼 스타일은 아주 중요한 인터랙션 옵션이나 경계, 상태 메시지 등을 불분명하게 만들어버리거나 혼란스럽게 함으로써 UI에는 확연하게 부정적인 영향을 끼칠 수 있다. 비주얼 디자인은 인터랙션 디자인과 정보 아키텍쳐의 ‘전달자’ 이다. 이를 통해서 애플리케이션에 존재하는 컨텐츠와 작동 방식의 중요성과 연결성을 알 수 있다.
인터랙션 디자이너는 비주얼 체계 아래에 숨어있는 법칙들을 배우는 데 시간을 쏟아야 한다. 이를 통해 같이 일하는 비주얼 디자이너와, 그리고 무엇보다 중요한 제품의 사용자들과 더 원활한 커뮤니케이션을 할 수 있을 것이다.
2. 컨트롤
최근 인터랙션 디자이너들이 작업하는 대부분의 애플리케이션과 디바이스는 시각적인 컨트롤을 이용해서 제품기능을 사용할 수 있다. 컨트롤은 해당 제품이나 서비스가 어떤 기능을 지니는지를 설명하기 위한 어포던스와 이 기능을 구현하기 위한 파워를 갖고 있다. 인 터랙션 디자이너들이 자주 사용하는 그리고 우리가 자주 접하게 되는 몇 가지 컨트롤을 알아보자
l 스위치 – 토글 스위치는 아주 간단한 컨트롤이다. 스위치는 ‘켜기’, ‘끄 기’라는 두 가지 상태로 동작하며 바뀌기 전에는 그 상태를 유지한다.
l 버튼 – 버튼은 인터랙션 디자인에서 가장 많이 사용되는 것 중에 하나이다. MS Word 프로그램에서도 상시 30여개 이상의 버튼이 눈에 띈다. 버 튼은 기본적으로 누르거나 클릭해서 동작하는 도구를 말한다. 버튼은 모드를 바꾸는 것에서부터 다양한 행동의 범위에 사용된다.
그림 6-2 MS Word의 수많은 버튼들.
l 다이얼 - 다 이얼은 연속적이 수치 중 한 지점을 선택한다거나 다양한 세팅이나 모드 중 하나를 선택하는 등 버튼보다 더 복잡한 컨트롤을 제공한다. 다이얼의 휠을 움직여서 다른 정해진 지점을 선택하거나 어떤 경우에는 다이얼 자체를 눌러서 ‘작동/정지’ 같은 행동을 하게 만든 경우도 있는데, 이 처럼 다이얼은 돌리는 것 이외에도 다양한 활용이 가능하다.
l 슬라이더 – 슬라이더는 다이얼처럼 미세한 조작에 쓰이는데 스피커 볼륨이나 데이터양 등을 표시하는데 많이 사용된다. 슬 라이더 내에서 범위를 지정하는 데 여러 개의 핸들이 사용되기도 한다.
그림 6-4 네이버 SmartFinder에서 검색조건 설정 시 사용된 슬라이더.
l 핸들 – 핸들은 오브젝트를 조작하도록 튀어나온 부분을 말한다 대부분 디지털 윈도우의 프레임에는 화면 상에서 창을 이동하거나 크기를 바꾸기 위한 핸들이 달려있다
* 위에 언급된 컨트롤들은 아날로그, 디지털 양쪽에 모두 존대하는 컨트롤이었다면, 지금부터 언급할 컨트롤들은 디지털에서만 존재하는 컨트롤 들이다.
(디지털 콘트롤은 제록스 PARC연구소가 1970년에 고안한 오리지널 그래픽 유저 인터페이스(GUI)에 서 사용된 용어들로부터 발전해왔다. 이들은 1980년대의 매킨토시와 PC 운 영체제들을 통해 재발견되었으며 1990년대의 웹 규약에 이르러 더욱 추가되고 확장됐다)
l 체크박스 – 체크박스는 사용자가 짧은 목록에서 원하는 아이템을 고를 수 있다.
l 라디오 버튼 – 라디오 버튼은 사용자가 주어진 선택지 중에서 하나를 고를 수 있다. 일반적으로 라디오 버튼은 딱 하나의 답을 고르도록 강제되는 경우에 사용된다.
그림 6-7 네 이버 블로그 포스트 작성에 사용된 라디오 버튼. 라디오버튼은 한 번에 하나만 고르는 경우 사용
l 트 위스트 – 트위스트는 열거나 닫을 때마다 패널 안에 들어있는 메뉴나 내용을 보이거나 감춘다.
그림 6-8 트위스트는 폴더 안의 내용물 보기처럼 내용을 감추거나 보일 때 사용되는 잠금 장치
l 스 크롤 바 – 스크롤 바 는 사용자가 특정한 창이나 패널 안의 내용을 움직인다. 스 크롤 바는 가로와 세로 양방향으로 만들어질 수 있고 커서나 버튼으로 저작할 수도 있다. 가 로 스크롤은 사용하기가 까다롭기 때문에 세로 스크롤 바가 주로 사용된다.
l 드롭다운 메뉴 – 드롭다운 메뉴는 디자이너가 한 번에 다 보여주는 게 불가능한 내비게이션, 기능, 내 용들을 제어할 수 있다. 드롭다운 메뉴는 커서를 위에 갖다 댔을 때 롤오버 되거나 클릭을 해서 연다. 또한 드롭다운 목록 내에서 메뉴 하나를 선택하거나 커서를 이 범위 바깥으로 치웠을 때 숨겨지도록 할 수도 있다. 드롭다운 형식은 메뉴뿐 아니라 다양한 형식으로 응용되어 사용 되어질 수 있다.
그림 6-9 MS Word에 사용된 드롭다운 메뉴
l 리스트 박스 – 리스트 박스는 목록에서 복수의 아이템을 고를 때 사용된다.
l 스핀박스 – 스핀박스는 입력창에 사용자가 따로 숫자를 입력하지 않아도 값을 조절할 수 있는 기능을 조합한 것이다. 빈 입력 창만 표시하기에는 좀 불분명한 부분에 대해 기본값을 제시할 때 유용하다.
그림 6-10 리스트 박스(좌) 스 핀박스
3. 아이콘
많은 디지털 제품들이 아이콘을 사용한다. 아 이콘이란 기능과 동작을 나타내는 시각적 상징물로서 이들은 바로가기 기능을 제공하거나 사용자가 필요한 기능을 시각적으로 표시하는 역할을 한다.
그림 6-11 Internet Explorer 창에서 늘 볼 수 있는 아이콘 들. 사용자들은 아이콘만으로 기능 예측 가능
텍스 트를 사용하게 되면 다른 언어를 사용하는 곳에서 문제가 될 수 있고, 단 어가 길어서 한정된 인터페이스 공간에 맞추기가 어렵다. 아이콘은 Adobe Photoshop 과 MS Word처럼 기능이 많은 애플리케이션에 많이 사용되는데 애플리케이션의 그 많은 가능을 아이콘 없이 스크린에 표현하는 것은 거의 불가능하기 때문이다.
특히 모바일 기기의 경우 화면과 크기가 굉장히 제한되어 있어 배터리 용량과 신호강도를 표시하는 아이콘은 정말 중요한 역할을 하고 이걸 글자로 표현하자면 공간을 너무 많이 차지한다.
그러 나 시각적 상징을 선택하는 것은 매우 중요하고 어려운 일이다. 혼 란스러운 이미지는 뭔가를 설명하기는커녕 오히려 사용자를 힘들게 할 수 있기 때문이다.
4. 소리
소리는 인터랙션 디자인을 할 때 너무 과하게 사용 하면 좋지 않다. 아마도 한 번쯤은 웹사이트에 들어갔다가 음악이 갑자기 터져 나와서 황급히 소리를 끄려고 허둥댄 경험을 한 적이 있을 것이다. 그 러나 소리는 잘만 사용하면 인터페이스를 훌륭하게 완성시켜준다.
소리는 어떤 이벤트가 벌어졌다는 알림을 해줌으로써 사용자들이 뚫어져라 모니터 안의 애플리케이션을 노려보지 않아도 되게 해준다. 소 리는 사용자들이 다른 업무를 하는 동안에도 변화가 일어나는 애플리케이션에 특히 효과적으로 사용된다. 메일이 도착함을 알려주는 소리, 메신저에 친구가 로그인 했을 때 알려주는 소리 등 과같이…
이들은 모두 도움이 되는 음향효과들이다.
5. 표준
인터페이스 표준을 얼마나 잘 지켜야 하며 어떨 때 이를 무시해도 되는가 하는 것은 인터랙션 디자이너 간에 끊이지 않는 논쟁을 불러 일으킨다. ‘모든 애플리케이션이 다 비슷한 방식으로 동작해야 하는가? Ctrl+C 버 튼과 Command+C 키는 지정된 부분을 복사하는 데만 사용돼야 하는가? 모든 메뉴 바가 같은 제목을 사용해야 하는가?’
마이크로소프트와 애플은 온라인으로 내려 받을 수 있도록 표준 가이드라인을 제공하고 수많은 사람이 이를 맹목적으로 따른다.
물론 이런 표준을 만들고 사용하는 것은 중요하다. 수 년간 디자이너들의 연구 끝에, 사용자들은 특정 아이템이 특정한 위치에 있을 것을 기대하고 특정한 기능이 특정한 방식으로 기능하기를 바란다는 사실을 알아냈다. 이 런 표준을 무시한다면 사용자들이 다른 애플리케이션에서는 쉽게 되는 방식을 사용하지 못하고 새로운 방식을 학습해야 한다. 표준을 무시한다면 사용자의 짜증과 화를 불러일으킬 수 있다.
그렇 다면 표준을 어기거나 개선할 필요는 없는 것일까?
인터랙션 디자인 전문가인 앨런 쿠퍼(Alan Cooper)은 “엄청나게 훌륭한 발전이 있지 않은 한 표준을 따라라.” 라고 이야기 하고 있다. 즉 새로운 레이아웃이나 기능이 누가 보기에도 기존에 사용자들이 쓰던 것보다 확연히 좋은 경우에만 표준을 무시해도 좋다는 뜻이다. 새로운 방법을 자유롭게 고안해서 사용자들이 현재 방식보다 확연히 좋다고 느낀다면 새로운 표준이 생기는 것이다.
아무 생각 없이 기존의 표준만을 따라 작업한다면 발전적이지 못할 것이다. 늘 좀더 나은 방향을 위해 고민하고 새로운 표준을 만들기 위해 노력해야 할 것이다. 새로운 표준이 굳이 기존 표준과 확연히 다를 필요다 없다. 그러나 아주 작은 변화라도 조심스럽게 접근할 필요가 있다.
이상 으로 인터랙션 디자인에 중요한 역할을 하는 인터페이스에 대해 알아보았다.
인터 페이스 디자인은 그저 기기나 애플리케이션, 웹사이트를 예쁘게 만들기 위한 작업이 아니다. 이들은 사용자가 입력하고 시스템의 출력을 기대하기에 적절한 시각적, 음향적, 물 리적 형태를 제공하는 것이다. 사용자에게 해당 기기가 무엇을 할 수 있고 어떻게 다루면 될지에 대해 적절한 어포던스를 제공하는 작업이며 사람들이 일상적으로 기꺼이 사용하게 될 유용하고 쓸모 있는 애플리케이션이나 기기를 만드는 작업이기도 하다. 인터페이스 작업은 훌륭한 인터랙션 디자인을 결정하는데 중요한 역할을 하고 있다.
-----------------------------------------------------------------------------------------------------------------------------------------------------------
* 지난 회 보기 : 01 인터랙션 디자인 정의 / 02 인터랙션 디자인 접근법 / 03 인터랙션 디자인의 요소와 법 칙 / 04 좋은 인터랙션 디자인의 특징 / 05 인터랙션디자인을 위한 도구들
'UX 및 인터넷 기술 정보' 카테고리의 다른 글
| [UX Report]08 인터랙션 사례들 (2) | 2010.05.30 |
|---|---|
| [UX Report]07 스마트 어플리케이션 & 똑똑한 디바이스 (0) | 2010.05.20 |
| [UX Report] 5. 인터랙션 디자인 -인터랙션 디자인을 위한 도구들- (0) | 2010.05.06 |
| [UX Story] 4. 인터랙션 디자인 -좋은 인터랙션 디자인의 특징- (1) | 2010.04.30 |
| 국내의 UX 사례 (2) | 2010.04.29 |
