미투데이를 통해 배우는 리치 인터페이스 디자인 패턴

그림0. 리치 인터페이스 디자인 책표지

최근 '리치 인터페이스 디자인' 이라는 책을 접했습니다. 이 책에서는 웹에서 독특하고 풍부한 경험을 만들어 낼 수 있는 가이드, 패턴, 원칙들을 담고 있습니다.

A. 디자인 패턴이란?
크리스토퍼 알렉산더는 '패턴'을 다음과 같이 정의했습니다.

... 우리를 둘러싸고 있는 환경에서 반복적으로 나타나는 특정한 문제와 그에 대한 핵심적인 해결책을 설명하는...

그리고 몇 년후 '디자인 패턴'은 사용자 인터페이스 디자인의 범위까지 그 영역을 확장했습니다. 이 책에서는 웹 인터랙션 디자인 패턴을 다루고 있습니다.

B. 여섯 개의 디자인 원칙
이 책에서는 이 패턴들을 여섯개의 디자인 원칙으로 분류하였습니다. 원칙들의 자세한 설명은 '리치 인터페이스 디자인' 책을 참고하세요.

제1원칙  다이렉트하게 만들어라
제2원칙  가볍게 유지하라
제3원칙  페이지에 머무르게 하라
제4원칙  유인 요소를 제공하라
제5원칙  전환 효과를 사용하라
제6원칙  즉각적으로 반응하라

C. 미투데이의 리치 인터페이스 디자인 패턴
이 책을 보던 도중 Micro SNS 미투데이에서 사용하고 있는 '디자인 패턴'들이 눈에 띄더군요. 이에 미투데이에서 사용하고 있는 리치 인터페이스 디자인 패턴들을 찾아보았습니다. 미투데이에서 사용하고 있는 모든 리치 인터페이스 디자인 패턴들을 찾아보았다고는 생각하지는 않습니다. 또한 패턴에 대한 이해 부족으로 제대로 매칭이 안되었을 수도 있으니 이점은 감안해주셨으면 좋겠습니다.


1. 단일 필드 인라인 편집
페이지 내 편집 모듈 가운데 가장 간단한 타입은 단일 필드의 텍스트를 편집하는 경우입니다. 별도의 창이나 페이지로 이동하지 않고 그 자리에서 편집할 수 있습니다. (p.6) 미투데이에서는 태그를 입력했거나, 입력하지 않았을 경우에도 태그 추가 및 편집이 가능합니다. 태그 추가 및 편집 시 단일필드 인라인 편집방법을 사용하고 있습니다.

그림1. 미투데이 단일 필드 인라인 편집

2. 드래그 앤 드롭
언뜻 보기에 드래그 앤 드롭은 대상을 잡아 어딘가에 놓기만 하면 되므로 아주 간단해 보입니다. 그러나 상호작용이 일어나는 세세하고 개별적인 '상호작용 순간'(interesting moments) 을 고려해서 디자인을 해야 합니다. (p.31) 미투데이에서는 드래그 앤 드롭을 친구관리 페이지에서 활용하고 있습니다. 미투데이에서는 친구 리스트를 드래그하여 사용자가 만든 폴더 안에 넣을 수 있습니다. 어려운 동작이기때문에 '?' 버튼을 두어 설명을 하고는 있지만 과연 사용자가 얼마나 익숙하게 쓸 수 있을지는 의문이 듭니다.

그림2. 미투데이 드래그 앤 드롭

3. 상시 노출 도구
상시 노출 도구는 콘텐츠 안에 문맥 도구를 직접 배치하는 가장 간단한 형태입니다. (p.96) 미투데이는 미투하기 버튼을 누른 사람의 숫자를 상시 노출 도구로 보여주고 있습니다. 또한 미투하기 버튼 생성은 마우스 오버 노출도구로 사용하고 있습니다. 

그림3. 미투데이 상시 노출 도구

4. 마우스 오버 노출도구
마우스 오버 노출도구는 문맥도구를 항상 노출하는 대신, 필요할때만 보이도록 하는 방법입니다. (p.100) 미투데이에서는 삭제, 편집 버튼을 마우스 오버 노출도구로 사용하고 있습니다. 프로필 이미지도 마찬가지로 이미지에 마우스를 올릴 때 버튼 메뉴를 제공하여 사용자에게 기능을 쉽게 발견하게 합니다. (p.103 편집)

그림4. 미투데이 마우스 오버 노출도구 1

그림5. 미투데이 마우스 오버 노출도구 2

5. 오버레이
오버레이는 브라우처 창 안에 페이지를 일부 덮는 형태로 보여집니다. 오버레이는 만드는데 리소스가 적게 들고 화면에 뜨는 속도도 빠릅니다. (p.123) 미투데이에서는 프로필 이미지를 클릭하면 상세정보가 오버레이 형태로 보여집니다. 또한 로그인을 하면 입력 오버레이가 뜨게 됩니다. 미투데이의 상세정보 오버레이와 입력 오버레이를 없애기 위해서는 우측 상단의 X 표시를 클릭하거나 오버레이를 제외한 배경영역을 클릭하면 됩니다. 이 책에서는 활성화와 비활성화가 서로 대칭적인 상호작용이 되도록 하라고 충고하고 있습니다.

그림6. 미투데이 상세정보 오버레이

그림7. 미투데이 입력 오버레이

6. 대화상자 인레이
인레이는 페이지 내에 정보를 직접 삽입하는 방법입니다. 인레이를 이용하는 가장 간단한 방법은 페이지 일부분을 확장하고, 그 안에 대화상자를 보여주는 방법입니다. (p.143) 미투데이에서는 친구관리 > 모든친구 탭에서 친구그룹 버튼을 선택하면 그룹을 인레이로 보여주고, 재 선택시 사라지게 합니다. 인레이의 장점은 페이지 내에 삽입되므로 다른 정보를 가릴 우려가 적다는 점입니다.

그림8. 미투데이 대화상자 인레이

7. 활성화
흐리게 하기와 밝게 하기 효과는 상호작용할 수 있는 대상을 표현할때 사용할 수 있습니다. (p.256) 미투데이에서는 검색을 하면 검색 건 수를 타임라인으로 보여줍니다. 활성화를 하면 짙은 보라색으로 보여주며, 영역이 회색으로 강조됩니다. 현재 선택중인 영역은 흐린 보라색으로 보여주고 있습니다.

그림9. 미투데이 활성화

8. 스포트라이트
스포트라이트는 인터페이스에서 변화가 막 일어났을때 유용합니다. 스포트라이트는 흔히 처음에는 대상의 배경을 하이라이트하고, 점점 희미하게 만드는 방법으로 적용합니다. (p.269) 미투데이에서는 글을 작성하면, 하이라이트 된 상태에서 점점 희미하게 보이는 방식을 사용하고 있습니다. 글을 삭제하면, 글은 상단으로 사라집니다. 이 외에도 미투데이는 글을 저장하거나, 친구신청이 왔을경우와 같은 상황에서 변화를 보여줍니다. 이 방법은 시간이 지나면 사라지며, 별도의 실행이 필요 없는 확인 정보를 간단히 제공하고 자동으로 사라집니다.

그림10. 미투데이 스포트라이트

그림11. 미투데이 변화 나타내기

9. 검색 자동완성
자동완성은 사용자의 행위가 필요한 인터페이스에서 그 행위에 따라 동작해도 되는 효과적인 패턴입니다. 사용자가 창에 입력함에 따라 그에 맞는 값이 자동으로 보여지고, 유사한 항목을 고를 수 있습니다. (p.297) 미투데이는 '글검색+사람찾기' 검색에서 자동완성 기능을 사용하고 있습니다.

그림12. 미투데이 검색 자동완성

참고자료

---

1. 리치 인터페이스 디자인(Designing Web Interfaces), 인사이트, 빌스콧/테레사 닐 지음, 윤지혜, 구신애, 김기형, 이은아 옮김 (2010)
2. Micro SNS 미투데이 http://me2day.net