이용자는 아래의 조건을 따르는 경우에 한하여 자유롭게
l 이 저작물을 복제, 배포, 전송, 전시, 공연 및 방송할 수 있습니다. 다음과 같은 조건을 따라야 합니다:
l 귀하는, 이 저작물의 재이용이나 배포의 경우, 이 저작물에 적용된 이용허락조건 을 명확하게 나타내어야 합니다.
l 저작권자로부터 별도의 허가를 받으면 이러한 조건들은 적용되지 않습니다.
저작권법에 따른 이용자의 권리는 위의 내용에 의하여 영향을 받지 않습니다. 이것은 이용허락규약(Legal Code)을 이해하기 쉽게 요약한 것입니다.
Disclaimer
저작자표시. 귀하는 원저작자를 표시하여야 합니다.
비영리. 귀하는 이 저작물을 영리 목적으로 이용할 수 없습니다.
변경금지. 귀하는 이 저작물을 개작, 변형 또는 가공할 수 없습니다.
온라인 서비스 초기 구축을 위한 태스크 기반 디자인 가이드 연구
A Study of Task Oriented Service Design Guide
2021년 2월
서울대학교 대학원
디자인학부 디자인전공
김 나 은
태스크 기반 디자인 가이드 연구
지도 교수 김 수 정
이 논문을 디자인학박사 학위논문으로 제출함
2021년 1월
서울대학교 대학원
디자인학부 디자인전공
김 나 은
김나은의 디자인학박사 학위논문을 인준함
2021년 2월
위 원 장 김경선 (인)
부위원장 이장섭 (인)
위 원 이병학 (인)
위 원 채정우 (인)
위 원 김수정 (인)
국문 초록
사용 목적이 유사한 서비스는 유사한 화면 구조를 갖고 있다. 맛집 발견 및 주문이 주된 사용 목적인 배달 앱은 사용자가 빠르게 원하는 장소의 맛집을 발견할 수 있도록 홈 화면을 구성하며, 주문 화면에서는 주문 및 결제가 빠르게 처리될 수 있도록 디자인한다.
앱 서비스 시장의 호황으로 수많은 서비스들이 출시되었고, 각 서비스들은 보다 많은 수의 활성 사용자 확보와 사용자가 보다 오래 서비스에 머물게 하기 위해 사용성을 실험하고 경쟁해왔다. 서비스 디자인은 시장에 최적화하며 사용 목적에 따라 점점 좋은 사용성의 답을 찾아왔다. 이렇게 사용 목적에 따라 필요한 태스크(task, 과업)와 그에 따른 화면이 패턴화되고 있지만 현재 서비스를 초기에 출시하려는 비전문가나 디자이너가 참조할 수 있는 자료는 ‘사용 목적’이라는 맥락이 배제된 파편화된 인터페이스 컴포넌트 가이드 뿐이다. 따라서 본 연구는 사용 목적과 필요 태스크에 따른 인터페이스 패턴을 연구하여 서비스 구조를 손쉽게 제작할 수 있게 하기 위한 연구자의 시도이다.
본 연구를 위해 먼저 사용 목적 별 인터페이스 특징 데이터를 수집하였다. 데이터를 수집한 패턴스(pttrns.com) 웹사이트는 웹 상에서 가장 큰 인터페이스 라이브러리 중 하나로 디자이너들이 참조할만한 최신 출시 앱의 대표적인 사용 화면의 스크린샷이 선별되어 업로드된다. 각 스크린샷에는 패턴스 웹사이트에서 인터페이스 특징을 분류하는 85개 태그 중 해당되는 특징이 태깅되어 있고, 앱 이름을 선택하면 앱 스토어로
범주화를 위해 ‘앱 마켓 내 카테고리’가 같으면 ‘사용 목적’이 같은 것으로 간주하였다. 패턴스 웹사이트 스크래핑으로 인터페이스 특징 데이터를 수집하였고, 수집된 인터페이스 특징 데이터의 사용 목적에 따른 특수성, 고유성 정도에 따라 범주를 재분류하였다. 그리고 각 마켓 카테고리 별 인터페이스 특징성이 높은 태그들을 카드 소팅하여 각 마켓 카테고리, 즉 사용 목적 달성을 위한 태스크를 도출하였다.
마켓 카테고리 별 태스크를 도출하는 과정에서 사용 목적 별로 필요한 태스크가 중복된다는 사실이 증명되었다. 예를 들어 게시글을 작성하는 태스크의 경우 어떤 특정 마켓 카테고리의 서비스가 아닌 게시글을 작성할 수 있는 모든 서비스에서 나타날 수 있는 특성이다.
이렇게 서비스의 특성은 어떤 마켓 카테고리에 속해있는지 보다 어떤 태스크를 갖고 있는가에 따라 구분된다. 따라서 본 연구의 결과물 또한 태스크를 중심으로 제작하게 되었다.
태스크를 조합하여 온라인 서비스 구조를 제작하는 방법은 다음과 같다. 먼저 제작하고자 하는 서비스의 사용 목적을 정의한다. 그리고 사용 목적 달성을 위해 필요한 기능을 정의한다. 이후 각 기능을 본 가이드의 태스크로 맵핑하고, 태스크에 정의된 화면 흐름을 연결한 뒤 홈 화면을 정의하면 완결성을 갖춘 서비스 구조를 손쉽게 설계할 수 있다.
주요어 인터페이스 패턴, 인터페이스 디자인, 온라인 서비스 디자인, 사용자 경험 디자인
학번 2014-21923
목차
국문 초록 1
목차 4
도표, 그림, 표 목차 8
제 1 장 서론 1 3
제 1 절 연구 배경 1 4
제 2 절 연구 방법 19
제 2 장 사용자 경험 설계 디자인 방법 중 구조화 가능 영역 연구 2 2
제 1 절 사용자 경험 디자인 방법 2 3
제 2 절 구조화 가능 방법 구분 28
제 3 장 서비스 사용 목적 별 인터페이스 특징 연구 3 0
제 1 절 서비스 카테고리 별 유사성 랭크 조사 3 1
제 2 절 인터페이스 특징 태그 고유성 분류 38
제 3 절 인터페이스 특징 태그 유형 별 분류 4 2
제 4 장 서비스 사용 목적 별 태스크 연구 4 6
제 1 절 서비스 사용 목적 별 태스크 연구 방법 4 7
제 2 절 서비스 사용 목적 별 태스크 연구 49
제 1 항 ‘소셜 네트워킹(Social Networking)’ 서비스 태스크 정의 5 0 제 2 항 ‘사진 및 비디오(Photo & Video)’ 서비스 태스크 정의 5 3 제 3 항 ‘음식 및 음료(Food & Drink)’ 서비스 태스크 정의 5 5
제 5 항 ‘생산성(Productivity)’ 서비스 태스크 정의 59
제 6 항 ‘뉴스(News)’ 서비스 태스크 정의 6 1
제 7 항 ‘여행(Travel)’ 서비스 태스크 정의 6 3 제 8 항 ‘엔터테인먼트(Entertainment)’ 서비스 태스크 정의 6 6 제 9 항 ‘라이프스타일(Lifestyle)’ 서비스 태스크 정의 68 제 10 항 ‘건강 및 피트니스(Health & Fitness)’ 서비스 태스크 정의 7 0 제 11 항 ‘비즈니스(Business)’ 서비스 태스크 정의 7 2 제 12 항 ‘금융(Finance)’ 서비스 태스크 정의 7 4 제 13 항 ‘교육(Education)’ 서비스 태스크 정의 7 6 제 14 항 ‘날씨(Weather)’ 서비스 태스크 정의 78 제 15 항 ‘음악(Music)’ 서비스 태스크 정의 8 0 제 16 항 ‘유틸리티(Utilities)’ 서비스 태스크 정의 8 2 제 17 항 ‘도서(Books)’ 서비스 태스크 정의 8 4 제 18 항 ‘내비게이션(Navigation)’ 서비스 태스크 정의 8 6 제 5 장 태스크 별 화면 플로우, 컴포넌트 및 디자인 시 유의사항,
태스크 조합 방법 연구 88
제 1 절 태스크 목록 정리 89
제 2 절 태스크 별 화면 플로우, 컴포넌트 및 디자인 시 유의사항 연구 9 4
제 1 항 서비스 기본(Base) 9 5
제 2 항 활동 피드(Activity Feeds) 10 1
제 3 항 서적(Book) 10 4
제 4 항 계산(Calculator) 10 7
제 5 항 날짜 및 시간(Calendar & Time) 1 09
제 6 항 체크인(Check In) 11 3
제 7 항 콘텐츠(Content) 11 5
제 8 항 게시글 작성(Create Post) 12 0
제 9 항 대시보드(Dashboard) 12 3
제 10 항 콘텐츠 발견(Discovery) 12 6
제 11 항 그리기(Drawing) 1 28
제 12 항 필터(Filter) 13 0
제 13 항 친구 초대(Invite Friends) 13 2
제 14 항 지도(Maps) 13 4
제 15 항 메시징(Messaging) 13 7
제 16 항 내비게이션 메뉴(Navigation Menu) 14 0
제 17 항 네트워킹(Networking) 14 3
제 18 항 뉴스피드(News Feed) 14 6
제 19 항 구매 및 예약(Purchase & Reservation) 1 48
제 20 항 검색(Search) 15 2
제 21 항 유료 버전 업그레이드(Upgrade to Premium) 15 5
제 3 절 태스크 조합 방법 연구 1 58
제 1 항 서비스 사용 목적 및 태스크 정의 1 59 제 2 항 태스크에 정의된 화면 플로우 간 연결 및 부가 태스크 정의 16 2 제 3 항 ‘서비스 기본(Base)’ 태스크 화면 플로우 연결 16 6
제 6 장 결론 1 68
참고문헌 17 2
부록 2: 데이터 수집 서비스 목록 195
Abstract 2 05
도표, 그림, 표 목차
도표 1-1-1 ‘쇼핑’ 서비스 카테고리의 ‘구매’ 사용 목적 별 화면 및 컴포넌트 예시 도표 5-2-1 ‘서비스 기본(Base)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-2 ‘활동 피드(Activity Feeds)’ 태스크 화면 플로우 및 컴포넌트 도표 5-2-3 ‘서적(Book)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-4 ‘계산(Calculator)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-5 ‘날짜 및 시간(Calendar & Time)’ 태스크 화면 플로우 및 컴포넌트 도표 5-2-6 ‘체크인(Check In)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-7 ‘콘텐츠(Contents)’ 태스크 화면 플로우 및 컴포넌트 도표 5-2-8 ‘게시글 작성(Create Post)’ 태스크 화면 플로우 및 컴포넌트 도표 5-2-9 ‘대시보드(Dashboard)’ 태스크 화면 플로우 및 컴포넌트 도표 5-2-10 ‘콘텐츠 발견(Discovery)’ 태스크 화면 플로우 및 컴포넌트 도표 5-2-11 ‘그리기(Drawing)’ 태스크 화면 플로우 및 컴포넌트 도표 5-2-12 ‘필터(Filter)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-13 ‘친구 초대(Invite Friends)’ 태스크 화면 플로우 및 컴포넌트 도표 5-2-14 ‘지도(Maps)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-15 ‘메시징(Messaging)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-16 ‘내비게이션 메뉴(Navigation Menu)’ 태스크 화면 플로우 및 컴포넌트 도표 5-2-17 ‘네트워킹(Networking)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-18 ‘뉴스피드(News Feed)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-19 ‘구매 및 예약(Purchase & Reservation)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-20 ‘검색(Search)’ 태스크 화면 플로우 및 컴포넌트
도표 5-2-21 ‘유료 버전 업그레이드(Upgrade to Premium)’ 태스크 화면 플로우 및 컴포넌트
도표 5-3-1 ‘지인 추천 기반의 맛집 예약 서비스’ 기능 정의 및 태스크 맵핑 도표 5-3-2 ‘지인 추천 기반의 맛집 예약 서비스’ 태스크에 정의된 화면 플로우 간
연결 및 부가 태스크
도표 5-3-3 ‘지인 추천 기반의 맛집 예약 서비스’ 의 ‘서비스 기본(Base)’
태스크 연결
그림 1-1-1 구글에서 제공하는 컴포넌트 디자인 가이드 그림 3-1-1 패턴스(pttrns.com) 메인 화면
그림 4-1-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘소셜 네트워킹(Social Networking)’ 카테고리) 그림 4-2-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘사진 및 비디오(Photo & Video)’ 카테고리) 그림 4-3-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘음식 및 음료(Food & Drink)’ 카테고리) 그림 4-4-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘쇼핑(Shopping)’ 카테고리) 그림 4-5-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘생산성(Productivity)’ 카테고리) 그림 4-6-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘뉴스(News)’ 카테고리) 그림 4-7-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘여행(Travel)’ 카테고리) 그림 4-8-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘엔터테인먼트(Entertainment)’ 카테고리)
그림 4-9-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘라이프스타일(Lifestyle)’ 카테고리) 그림 4-10-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘건강 및 피트니스(Health & Fitness)’ 카테고리) 그림 4-11-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘비즈니스(Business)’ 카테고리) 그림 4-12-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘금융(Finance)’ 카테고리) 그림 4-13-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘교육(Education)’ 카테고리) 그림 4-14-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘날씨(Weather)’ 카테고리) 그림 4-15-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘음악(Music)’ 카테고리) 그림 4-16-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘유틸리티(Utilities)’ 카테고리) 그림 4-17-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘서적(Books)’ 카테고리) 그림 4-18-1 인터페이스 특징 기반 태스크 도출
(고유성 ‘높음(High)’, ‘내비게이션(Navigation)’ 카테고리)
표 1-1-1 애플 앱스토어 카테고리
표 2-2-1 사용자 경험 설계 디자인 방법 중 태스크 기반 구조화 가능 영역 표 3-1-1 패턴스 인터페이스 특징 분류 태그
표 3-1-2 앱 마켓 서비스 카테고리 별 인터페이스 특징 상위 5개 랭크 표 3-2-1 인터페이스 특징 태그 고유성 분류 기준
표 3-2-2 인터페이스 특징 태그 고유성 기준 분류
표 3-3-1 인터페이스 특징 태그 유형 별 분류 체계 및 기호 표 3-3-2 인터페이스 특징 태그 고유성 ‘높음(High)’ 유형 분류 표 3-3-3 인터페이스 특징 태그 고유성 ‘중간(Medium)’ 유형 분류 표 3-3-4 인터페이스 특징 태그 고유성 ‘낮음(Low)’ 유형 분류 표 4-1-1 인터페이스 특징 태그 고유성 분류
(‘소셜 네트워킹(Social Networking)’ 카테고리) 표 4-2-1 인터페이스 특징 태그 고유성 분류
(‘사진 및 비디오(Photo & Video)’ 카테고리) 표 4-3-1 인터페이스 특징 태그 고유성 분류
(‘음식 및 음료(Food & Drink)’ 카테고리) 표 4-4-1 인터페이스 특징 태그 고유성 분류
(‘쇼핑(Shopping)’ 카테고리) 표 4-5-1 인터페이스 특징 태그 고유성 분류
(‘생산성(Productivity)’ 카테고리) 표 4-6-1 인터페이스 특징 태그 고유성 분류
(‘뉴스(News)’ 카테고리) 표 4-7-1 인터페이스 특징 태그 고유성 분류
(‘여행(Travel)’ 카테고리) 표 4-8-1 인터페이스 특징 태그 고유성 분류
(‘엔터테인먼트(Entertainment)’ 카테고리) 표 4-9-1 인터페이스 특징 태그 고유성 분류
(‘라이프스타일(Lifestyle)’ 카테고리) 표 4-10-1 인터페이스 특징 태그 고유성 분류
(‘건강 및 피트니스(Health & Fitness)’ 카테고리) 표 4-11-1 인터페이스 특징 태그 고유성 분류
(‘비즈니스(Business)’ 카테고리) 표 4-12-1 인터페이스 특징 태그 고유성 분류
(‘금융(Finance)’ 카테고리)
표 4-13-1 인터페이스 특징 태그 고유성 분류 (‘교육(Education)’ 카테고리) 표 4-14-1 인터페이스 특징 태그 고유성 분류
(‘날씨(Weather)’ 카테고리) 표 4-15-1 인터페이스 특징 태그 고유성 분류
(‘음악(Music)’ 카테고리) 표 4-16-1 인터페이스 특징 태그 고유성 분류
(‘유틸리티(Utilities)’ 카테고리) 표 4-17-1 인터페이스 특징 태그 고유성 분류
(‘도서(Books)’ 카테고리) 표 4-18-1 인터페이스 특징 태그 고유성 분류
(‘내비게이션(Navigation)’ 카테고리)
제 1 장 서론
제 1 절 연구 배경
기획, 디자인, 개발 등의 전문 지식이 없어도 웹 및 애플리케이션 서비스를 출시할 수 있는 기술 환경이 비전문가의 시장 진입 장벽을 낮추고 있다. 비전문가들 또한 생활 혹은 본인의 생업 속에서 새로운 서비스 아이디어를 발굴할 수 있고 아주 낮은 수준의 코딩으로 앱이나 프로그램을 만들 수 있게 도와주는 로 코드(low code), 또는 아예 코딩이 필요하지 않은 노 코딩(no coding)이 등장하여 실제로 코딩을 잘 모르는 사람들도 어렵지 않게 앱이나 간단한 프로그램을 개발할 수 있게 되었다.
미국에서 로 코드 플랫폼 시장 규모 는 2020년 150억 달러로 시장에 1 등장하고 활성화되기 시작한 2015년 대비 9배 증가할 것이라 예상되고 있다.
물론 서비스 출시 후 사용자 요구나 시장 상황의 변동에 따른 다양한 유지보수와 시스템 작동 효율을 위해 전문가의 투입이 필요하다.
하지만 서비스 초기 출시의 장벽은 점점 더 낮아지고 있는 추세임은 분명하다. 서비스 기획과 개발의 장벽 뿐만 아니라 디자인의 장벽 또한 낮아지고 있다. 서비스 디자인에서 활용할 수 있는 다양한 그래픽 스타일의 인터페이스 컴포넌트 라이브러리와 템플릿의 등장이 이를 반증한다.
웹 및 애플리케이션 서비스 제작에서 사용자 경험 디자이너(User Experience Designer)의 역할은 사용자가 서비스 사용 목적을 빠르고
효과적으로 달성할 수 있도록 서비스 구조를 설계하고 평가하는 것이다.
실제 개발에 앞서 미리 사용성을 검증하여 개발 리소스를 절약할 수 있도록 개발 기준 문서인 상세설계서를 작성하는 것 또한 사용자 경험 디자이너의 역할이다. 사용자 경험 디자인 이전에는 이 서비스가 현재 시장에 필요하다는 당위성, 즉 사용자에게 소구되는 사용 목적이 존재해야 한다. 사용자 경험 디자인은 실제 서비스 제작에 앞서 이 당위성을
증명하거나 서비스로 현실화하는 방법으로서 사용된다.
앱 시장의 성숙과 함께 각 서비스 카테고리 를 대표하는 2
서비스들이 생겨나고 사용자의 요구에 맞춰 서비스 사용성이 최적화되고 있다. 시장 후발 주자들은 이미 선발 주자들이 구조화한 인터페이스를 차용하여 서비스를 출시하고 있다. 이는 서비스 이용 목적과 기능이 유사한 서비스들이 상호 유사한 화면 구조를 띠고 있기 때문이다.
2008년 출시된 애플리케이션 소비 시장의 주요 마켓인 애플의 앱스토어, 구글의 플레이스토어는 현재 각 200만 개, 350만 개 이상의 애플리케이션이 등록되어 있으며, 한 달에만 약 수만 개의 앱이 새롭게 출시되고 있다. 수많은 애플리케이션은 사용자의 시간과 돈의 소비 양상을 바꿔놓았다. 2018년 사용자의 앱스토어 지출은 1,000억 달러를 넘어서며 시장 성숙도를 증명했다. 3
서비스들은 앱 마켓에서 서비스가 제공하는 유익, 즉 사용자의 서비스 사용 목적에 따라 서비스 카테고리가 분류된다. 아래는 애플
2
쇼핑, 소셜 네트워킹, 비즈니스 등 사용자가 필요로 하는 앱을 빠르게 찾을 수 있도록 앱 마켓에서 제공하는 서비스 특성 별 분류 체계
3
2018년 앱 전망: 앱스토어 수익, 신기록 경신 예고, App Annie,
앱스토어의 서비스 카테고리이다. 건강 및 피트니스, 교육, 금융, 날씨, 소셜 네트워킹 등의 서비스 카테고리는 해당 서비스가 어떠한 태스크를 탑재하고 있을 것이라 짐작하게 한다.
표 1-1-1 애플 앱스토어 카테고리
수많은 앱이 시장에 출시되면서 좋은 사용성 또한 하나의 시장 경쟁력으로 작용했다. 하지만 아이러니하게도 사용성 경쟁은 동일 서비스 카테고리 간 인터페이스 획일화를 낳았다. 동일 서비스 카테고리, 즉 유사한 사용 목적에 따라 인터페이스는 유사한 구조를 띤다. 예로 ‘쇼핑’
카테고리는 빠르게 원하는 상품을 검색하고 구매하는 것, ‘소셜 네트워킹’
카테고리는 관심사 등에 기반하여 빠르게 네트워킹을 설정하고 피드를 내비게이션하는 것이 사용 목적이며 같은 서비스 카테고리 내 서비스들은 모두 유사한 사용 목적을 갖고 있다. 이렇듯 앱의 카테고리에 따라 유사 사용 목적을 갖고 유사 인터페이스 구조를 띠고 있지만, 서비스를 초기 출시하려 하는 비전문가나 사용자 경험 디자이너가 참조할 수 있는 현존 자료는 사용 목적이라는 맥락이 배제된 파편화된 컴포넌트 가이드 뿐이다.
건강 및 피트니스 뉴스 생산성 엔터테인먼트 의학
교육 도서 소셜 네트워킹 여행 잡지 및 신문
금융 라이프 스타일 쇼핑 유틸리티 참고
날씨 비즈니스 스포츠 음식 및 음료 Apple Watch 앱
내비게이션 사진 및 비디오 어린이 음악 AR 앱
도표 1-1-1 ‘쇼핑’ 서비스 카테고리의 ‘구매’ 사용 목적 별 화면 및 컴포넌트 예시
그림 1-1-1 구글에서 제공하는 컴포넌트 디자인 가이드 4
서비스가 어떤 카테고리에 속해 있는지에 따라 일반적으로 사용 목적이 유사하며, 그에 따라 유사한 화면 및 인터페이스 컴포넌트를 사용한다. 하지만 서비스 초기 설계 디자이너들이 참조할 수 있는 자료는 사용 목적이 배제된 인터페이스 컴포넌트 가이드 뿐이다. 예를 들어 서비스에 검색 기능을 추가하고자 할 때, 검색 창 컴포넌트, 검색어 입력시 노출되는 추천 검색어 컴포넌트, 검색 결과 화면 및 소팅 필터링
컴포넌트, 검색 결과 없음 화면 등 일반적인 화면과 컴포넌트 조합이 서비스 설계 단계에서 다시 한번 정의되어야 한다.
제 2 절 연구 방법
연구는 각 단계 별 다음과 같은 방법으로 진행한다.
1 서비스 사용 목적에 따라 구조화할 수 있는 사용자 경험 설계 방법 선별
사용자 경험 설계 디자인 방법을 정리하고 정성 혹은 정량적 디자인 연구가 필요한 디자인 방법과 서비스 사용 목적에 따라 구조화할 수 있는 디자인 방법으로 구분하여, 후자를 이후 연구의 기준으로 활용할 수 있도록 한다.
2 서비스 사용 목적 별 인터페이스 특징 연구
본 연구에서는 앱 마켓 서비스 카테고리를 기준으로 서비스 사용 목적을 구분하고 서비스 카테고리 별 인터페이스 특징 조사를 위한 정량적 데이터를 수집한다. 기본 데이터는 웹 상에서 가장 큰 인터페이스
라이브러리 중 하나인 패턴스(pttrns.com) 웹사이트에서 수집한다. 5 패턴스 웹사이트에는 디자이너들이 참조할만한 최신 출시 앱의 대표적인
5
패턴스는 애플리케이션 시장이 활성화되기 시작한 2011년 오픈되었다. 디자이너
로빈 라즈카(Robin Raszka) 외 선별된 디자이너들이 편집자로 활동하며 실용적이고 유려한
디자인으로 디자이너들에게 영감을 줄 수 있는 애플리케이션들의 스크린샷을 아카이빙해왔다.
사용 화면의 스크린샷이 선별되어 업로드된다. 이때 스크린샷에는 패턴스 웹사이트에서 인터페이스 특징을 분류하는 85개 태그 중 해당되는 특징이 태깅되어 있어 서비스 카테고리 별 인터페이스 특징 데이터를 수집할 수 있다. 이후 수집된 데이터를 서비스 카테고리로 그룹핑하여 해당 카테고리의 인터페이스 특징 랭크를 추출할 수 있다. 또한 각 서비스 카테고리 별 인터페이스 특징 랭크 결과값이 상이한지의 여부, 이용 목적이 인터페이스 특징을 반영하는지의 여부가 사용 목적이 유사할 경우 유사한 인터페이스 구조를 띠고 있다는 본 연구의 가설을 뒷받침할 수 있다.
3 서비스 사용 목적 별 태스크 연구
서비스 사용 목적이 각 앱의 대표적인 특징이라면, 태스크는 해당 사용 목적을 달성하기 위한 검색, 콘텐츠 탐색, 구매 등의 과업을
지칭한다.
패턴스 웹사이트의 인터페이스 특징 태그는 ‘About’, ‘Search’,
‘Browser’, ‘Charts’, ‘Confirmation’, ‘Drawing’, ‘Login’, ‘Recipe’ 등으로
‘Login’, ‘About’ 등 서비스 카테고리와 관계 없이 여러 서비스에서 공통적으로 나타날 수 있는 특징과 ‘Recipe’, ‘Charts’와 같이 특정 서비스 카테고리에서 나타나는 특징들로 구분된다. 패턴스의 인터페이스 특징 태그 85개가 서비스 카테고리에 얼마나 특화되어 있는지 나타내는 고유성(Uniqueness) 정도에 따라 분류하여 해당 카테고리에 귀속되는
인터페이스 특징을 선별하는 기준으로 활용하고, 이 선별된 인터페이스 특징을 그룹핑하여 서비스 사용 목적 별 필요 태스크를 정의할 것이다.
4 태스크 별 화면 플로우, 컴포넌트 및 디자인 시 유의사항, 태스크 조합 방법 연구
각 태스크를 수행하기 위해 필요한 화면과 화면 간 연결을 나타낸 화면 플로우, 각 화면에 노출되어야 할 인터페이스 컴포넌트를 정의한다.
그리고 태스크의 특징 별 디자인 시 유의사항도 함께 정의한다. 태스크 별 화면 플로우는 각 태스크가 지닌 인터페이스 특징 태그를 기준으로 앱 스크린샷을 정성적으로 분석할 것이다. 태스크 별 화면은 브랜딩이 배제된 로우파이 프로토타입 형태로 제작되어 화면을 이루는 컴포넌트를 6
구조적으로 살펴볼 수 있도록 할 것이다.
또한 서비스 사용 목적에 따른 태스크 맵핑으로 하나의 완성된 서비스를 구조화하는 방법을 정의하여 연구 결과물 활용안을 제시할
것이다.
6
Low-fidelity prototyping: 실제 화면과 같이 구체적인 화면이 아닌, 기능 확인이
가능한 최소 수준의 구체성으로 사용성 테스트를 진행할 수 있는
제 2 장 사용자 경험 설계 디자인 방법 중 구조화 가능 영역 연구
제 1 절 사용자 경험 디자인 방법
사용자 경험 디자이너는 사용성과 개발 효율성 제고를 위해 일반적으로 아래와 같은 작업 단계 를 거쳐 서비스 구조를 설계하고 7 평가한다.
1. 서비스 사용자 이해 2. 사용자 소구점 정의
3. 서비스 디자인 아이디어 도출 4. 프로토타입핑
5. 평가
서비스 사용자를 이해하고, 소구점을 정의하는 단계는 일반적으로 사용자 리서치라 불리며 아래와 같은 방법이 사용된다.
1. 퍼소나(Personas): 서비스를 사용할 법한 가상의 캐릭터, 스테레오 타입이다. 퍼소나에는 사용자의 서비스 이용 목적과 동기, 애로사항과 역량 등이 정의된다. 성별, 나이 등 인구 통계학적 정보나 교육 배경 등과 같은 정보들도 퍼소나를
완성하는 요소이다. 서비스의 범위에 따라 퍼소나는 여러 명이 될 수 있다. 퍼소나 제작은 사용자 경험 디자이너 뿐만 아니라 서비스 개발에 참여하는 주체들이 사용자의 상황과 이용 동기에 대해
7
7 UX Deliverables: What will I be making as a UX designer?, Andreas Komninos,
충분히 공감하고 서비스 이용 목적을 분명히 밝힐 수 있도록 돕는다.
2. 스토리보드(Storyboards): 사용자가 처한 환경과 그에 따라 왜, 어떻게 행동하는지 시각화하는 도구이다. 서비스 제작 초기에 사용자 이해를 위해 제작되기도 하지만, 아이디어 도출 단계나 프로토타입 제작 단계에서 시안을 설명하는 도구로 사용되기도 한다.
3. 고객 여정 지도(Customer Journey Map): 타임라인을 기반으로 사용자가 특정한 목적을 달성하기 위한 과정을 나열한
다이어그램이다. 각 과정 별 사용자의 상황과 동기, 문제나 소구점의 변화들을 파악할 수 있다. 이 과정에서 목적 달성을 위한 장애물을 보다 명확히 파악하여 서비스 제작의 과제로 연결할 수 있다.
사용자 리서치를 통해 이해한 서비스 이용 목적과 동기를 기반으로 디자인 아이디어를 도출하는 단계에서는 아래와 같은 방법이 사용된다.
1. 브레인스토밍(Brainstorming): 사용자 리서치 단계에서 정의된 문제점들을 해결할 수 있는 아이디어를 생산하는 과정으로, 가능한 한 다양한 각도에서 많은 아이디어를 도출하고 선별할 수 있도록 한다.
2. 사용자 흐름도(User Flow): 사용자가 서비스에서 목적을
달리 서비스 상에서 일어나는 단계들로만 구성되며, 디자이너가 서비스 상에서 사용자가 목표를 보다 빠르게 달성할 수 있도록 효율적인 과정을 설계할 수 있도록 한다. 또한 이 방법을 통해 브레인스토밍에서 도출된 아이디어의 실행 단계와 방법을 발견할 수 있다.
도출된 아이디어를 테스트할 수 있는 시제품인 프로토타입핑 제작 단계에서는 아래와 같은 방법이 사용된다.
1. 사이트맵(Sitemaps): 서비스를 구성하는 요소들의 위계이자 내비게이션으로, 서비스를 화면 혹은 섹션으로 구성하는 방법과 화면 혹은 섹션 간 이동 방법을 파악할 수 있다.
2. 로우파이 프로토타입(Low-fidelity prototypes): 사이트맵을 구성하는 개별 화면의 콘텐츠를 정의하는 단계이다. 시각적인 디테일이 생략된 콘텐츠 구성을 정의하며, 보통 핸드 드로잉 스케치에서 컴퓨터를 활용한 와이어프레임으로 옮겨진다.
3. 상세설계서(Functional specification): 화 면 흐름, 화면을 구성하는 컴포넌트 타입, 작동 방식, 로직 등을 상세히 기술한 문서로 개발 기준 문서로 활용된다. 사용자 경험 설계 디자이너는 이 과정에서 하이파이 프로토타입 디자이너 혹은 유관 개발자와 커뮤니케이션을 통해 실행성(feasibility)을 상세히 검증하며 모든 유관 작업자와 협의된 내용을 바탕으로 상세설계서를 지속적으로
업데이트한다. 상세설계서는 서비스 개발 이후 출시 전 QA(quality assurance) 기준 문서로 활용되기도 한다.
4. 하이파이 프로토타입(High-fidelity prototypes): 사용자에게 실제로 제공될 서비스 화면을 정의하는 단계로 타이포그라픽, 컬러 등 시각적인 디테일이 실제 화면 크기로 제작된다.
5. 인터랙티브 프로토타입(Interactive prototypes): 실제 개발 전 사용성 검증을 위해 정적인 하이파이 프로토타입을 사용자 흐름으로 연결하는 단계이다. 클릭 영역과 트랜지션 등을 가시적으로 살펴볼 수 있다.
서비스 출시 전 프토토타입이나 출시 후 서비스 개선을 위한 사용성 평가 방법은 다음과 같다.
1. 사용성 리포트(Usability report): 포커스 그룹을 설정하여 평가하며 보통 프로토타입 혹은 실제 제품을 직접 사용해본 뒤 인터뷰를 진행한다. 피험자에게 특정 태스크를 부여하고 에러 개수, 클릭 개수, 태스크 달성 시간 등을 측정한다. 이 과정에서 아이트래킹 카메라와 같은 도구를 활용하기도 하며, 여러 시안이 있을 경우 A/B 테스트를 실행하기도 한다.
2. 분석 리포트(Analytics report): 서비스 출시 후 사용성 개선을 위해 데이터를 분석하는 단계이다. 보통 데이터 분석 툴을 활용하여 장바구니 담기, 구매하기 등 서비스 핵심 지표의 증감
트래킹과 서비스 이탈 지점을 파악하거나 아이트래킹 , 히트맵 8 9 등으로 서비스 사용 흐름을 분석한다.
8
Eye tracking: 눈의 위치와 눈의 움직임을 측정하는 아이 트래커로 사용자가 보고있는 위치와 눈의 움직임을 측정하는 방법으로 시각 시스템, 심리학, 심리 언어학, 마케팅, 인간-컴퓨터 상호 작용을 위한 입력 장치 및 제품 디자인에 대한 연구에
사용된다.(
https://en.wikipedia.org/wiki/Eye_tracking)9
Heat map: 현상의 크기를 2차원 색상으로 표시하는 데이터 시각화 기술로, 웹 및
제 2 절 구조화 가능 방법 구분
쇼핑 서비스 카테고리에서 구매의 태스크를 유추할 수 있듯이, 일반적으로 서비스가 어떤 앱 마켓 카테고리에 속하는가에 따라 사용 목적이 유사하므로 관련 태스크를 개략적으로 파악할 수 있다. 서비스 사용 목적에서 파악할 수 있는 태스크 외의 영역은 일반화하여 구조화할 수 있는 영역이 아니며, 서비스 제작자가 정성 혹은 정량적 디자인 연구 방법으로 정의해야 하는 부분이다. 예를 들어 하이파이 프로토타입이나 인터랙티브 프로토타입은 브랜딩과 서비스 차별화를 위해 디자이너가 정성적으로 연구해야하는 영역이며, 사용성 리포트와 분석 리포트는 서비스의 핵심 퍼포먼스 지표 별로 사용자의 데이터를 트래킹하는 정량적 연구가 필요한 영역이다. 앞서 열거한 사용자 경험 디자인 방법 중 서비스 사용 목적에 따라 필요한 태스크로 구조화하고 그에 따른 인터페이스를 정의할 수 있는 영역은 다음과 같다.
표 2-2-1 사용자 경험 설계 디자인 방법 중 태스크 기반 구조화 가능 영역 단계 목적 디자인 방법 정성/정량적
연구 영역
태스크 기반 구조화 가능 영역
1 서비스 사용자 이해 퍼소나
●2 사용자 소구점 정의
스토리보드
●고객 여정
지도
●3 서비스 디자인 아이디어 도출
브레인스토밍
●사용자 흐름도
●4 프로토타입핑
사이트맵
●로우파이
프로토타입
●상세설계서
●하이파이
프로토타입
●인터랙티브
프로토타입
●5 평가
사용성 리포트
●분석 리포트
●제 3 장 서비스 사용 목적 별 인터페이스 특징 연구
제 1 절 서비스 카테고리 별 유사성 랭크 조사
앱 마켓 서비스 카테고리 별 인터페이스 특징 조사를 위해 각 카테고리 별 인터페이스 특징 값이 태깅된 패턴스(pttrns.com)
웹사이트에서 데이터를 수집하였다. 패턴스 웹사이트는 웹 상에서 가장 큰 인터페이스 라이브러리 중 하나로, 디자이너들이 참조할만한 최신 출시 앱의 대표적인 사용 화면의 스크린샷이 선별되어 업로드된다. 이때 스크린샷에는 패턴스 웹사이트에서 인터페이스 특징을 분류하는 85개 태그 중 해당되는 특징이 태깅되어 있어 서비스 카테고리 별 인터페이스 특징 데이터를 수집할 수 있다. 이후 수집된 데이터를 서비스 카테고리로 그룹핑하여 해당 카테고리의 인터페이스 특징 랭크를 추출할 수 있다.
그림 3-1-1 패턴스(pttrns.com) 메인 화면
다음은 패턴스 웹사이트의 인터페이스 특징 분류 체계이다.
표 3-1-1 패턴스 인터페이스 특징 분류 태그
About Activity Feeds Ask Permission Book Bots/Conversati ons
Browser Calculators Calendars &
time Capture Cards Charts Check In Coach Marks Comments Comments Confirmation Content Screen Coverpage Create Post Discovery
Drawing Editing Empty States Events Filter Find Friends Friends Games Glances Grid
Home Invite Friends ITunes
Screenshots Launch Screen Library Lists Loading Logins Maps Messaging Navigations News Notifications Photos Popovers
Privacy Product Profiles Progress Purchase Recipe Recording Search Settings Share Shopping Cart Sidebars Signups Storefront Tab Bars
Timeline Venue Video Walkthroughs Widgets Alien Big Type Busy Collage Column Layout
Dark Fun Grid Layout Horizontal
Layout Luxury Minimal Native Looking Novel Retro Simple
Tabbed Unusual Layout Unusual
Navigation Use Of Photos Use of Video
패턴스 웹사이트에서 파이썬 을 활용한 웹 스크래핑 으로 총 10 11 4,213개 스크린샷, 320개 앱 서비스, 20개 서비스 카테고리 정보를 수집했다. 수집된 데이터를 앱 마켓 서비스 카테고리로 그룹핑한 결과는 다음 표와 같다.
10
Python: 언어 구조와 객체 지향 접근 방식으로 프로그래머가 명확하고 논리적인 코드를 작성하도록 돕는 것을 목표로 하는 프로그래밍
언어이다.(
https://en.wikipedia.org/wiki/Python_(programming_language))
표 3-1-2 앱 마켓 서비스 카테고리 별 인터페이스 특징 상위 5개 랭크
건강 및 피트니스 노출 수 교육 노출 수 금융 노출 수
Walkthroughs 7 Walkthroughs 6 Walkthroughs 7
Charts 7 Content Screen 6 Logins 6
Profiles 5 Settings 3 Lists 5
Notifications 5 Navigations 3 Signups 4
Lists 5 Home 3 Purchase 4
날씨 노출 수 내비게이션 노출 수 뉴스 노출 수
Widgets 7 Lists 3 Home 24
Settings 4 Maps 2 Content Screen 22
Walkthroughs 3 Discovery 2 Timeline 15
Navigations 3
Walkthroughs 14
Lists 3 Sidebars 12
도서 노출 수 라이프 스타일 노출 수 비즈니스 노출 수
Walkthroughs 3 Walkthroughs 8 Logins 7
Content Screen 3 Navigations 6 Profiles 6
Lists 2 Logins 5 Lists 6
Library 2 Discovery 5 Content Screen 5
Book 2 Timeline 4 Messaging 4
사진 및 비디오 노출 수 생산성 노출 수 소셜 네트워킹 노출 수
Walkthroughs 36 Create Post 38 Timeline 28
Capture 19 Walkthroughs 23 Logins 25
Navigations 16 Lists 20 Profiles 23
Logins 14 Settings 13 Signups 19
Popovers 12 Logins 13 Create Post 18
쇼핑 노출 수 스포츠 노출 수 엔터테인먼트 노출 수
Product 26 Notifications 3 Library 9
Logins 22 Content Screen 2 Content Screen 9
Discovery 21
Video 8
Storefront 18 Sidebars 8
Signups 17 Discovery 8
여행 노출 수 유틸리티 노출 수 음식 및 음료 노출 수
Navigations 10 Walkthroughs 4 Search 21
Lists 10 Lists 4 Lists 19
Venue 9 Settings 3 Logins 18
Search 9 Search 3 Signups 17
Discovery 9 Popovers 3 Walkthroughs 15
음악 노출 수 참고 노출 수
Lists 6 Profiles 4
Logins 5 Notifications 3 Walkthroughs 3
Video 3
Signups 3
표 3-1-2 에서 정의한 상위 5개 랭크가 각 서비스의 고유한 인터페이스 특징이라 해석하기 어렵다. 아래와 같이 총 20개 서비스 카테고리에 중복하여 나타나는 특징들이 발견되었기 때문이다.(괄호 안은 해당 인터페이스 특징이 나타난 서비스 카테고리 수)
1. Walkthroughs(12) 2. Lists(11)
3. Logins(9)
4. Content Screen(6) 5. Signups(5)
6. Discovery(5) 7. Navigations(5) 8. Profiles(4) 9. Settings(4) 10. Timeline(3) 11. Search(3) 12. Notifications(3) 13. Create Post(2) 14. Home(2) 15. Sidebars(2) 16. Popovers(2) 17. Library(2) 18. Video(2) 19. Product(1)
21. Storefront(1) 22. Venue(1) 23. Charts(1) 24. Widgets(1) 25. Purchase(1) 26. Messaging(1) 27. Book(1) 28. Maps(1)
패턴스 웹사이트의 인터페이스 특징들은 ‘Walkthrough’, ‘Lists’,
‘Logins’ 등 서비스 카테고리와 관계 없이 웹 혹은 앱 서비스라면 공통적으로 나타날 수 있는 특징과 ‘Product’, ‘Capture’, ‘Storefront’ 등 서비스 카테고리를 특정할 수 있는 특징으로 구분된다. 이에 패턴스 웹사이트의 인터페이스 특징 분류 태그를 카테고리에 특화된 정도, 즉 고유성(Uniqueness)에 따라 재분류하여 해당 서비스 카테고리의 특징을 판별하고자 하였다.
제 2 절 인터페이스 특징 태그 고유성 분류
패턴스 웹사이트의 인터페이스 특징 태그는 ‘About’, ‘Search’,
‘Browser’, ‘Charts’, ‘Confirmation’, ‘Drawing’, ‘Login’, ‘Recipe’ 등으로
‘Login(로그인)’, ‘About(서비스 소개)’ 등 서비스 카테고리와 관계 없이 여러 서비스에서 공통적으로 보여질 수 있는 특징과 ‘Recipe(레시피)’,
‘Charts(차트)’와 같이 특정 서비스 카테고리에서 노출되는 특징들로 구성되어 있다. 패턴스의 인터페이스 특징 태그 85개를
고유성(Uniqueness)에 따라 분류하여 카테고리 인터페이스 특징 랭크에서 해당 카테고리에 귀속되는 인터페이스 특징을 선별하는 기준으로 활용할 것이다.
인터페이스 특징 태그의 고유성 분류 기준은 아래와 같다.
특징 태그의 고유성(Uniqueness) 설명
높음(High)
전체 서비스 카테고리에 노출되지 않고, 특정 서비스 카테고리에서 특징적으로 노출될 수 있는 태그
(해당 서비스 카테고리: 0~1개)
중간(Medium)
전체 서비스 카테고리에 노출되지 않으나 어떤 특정 서비스 카테고리가 아닌 서비스 특징이 유사한 카테고리들에 노출될 수 있는 태그
(해당 서비스 카테고리: 2개 이상)
낮음(Low) 전체 서비스 카테고리에 노출될 수 있는 태그
(해당 서비스 카테고리: 10개 이상)
인터페이스 특징 태그의 고유성 분류 결과는 다음과 같다.
표 3-2-2 인터페이스 특징 태그 고유성 기준 분류
특징 태그의 고유성(Uniqueness) 관련 인터페이스 특징 태그
높음(High)
1. Activity Feeds 2. Book
3. Bots/Conversations 4. Calculators 5. Calendars & Time 6. Capture 7. Charts 8. Check In 9. Checkout 10. Comments 11. Content Screen 12. Coverpage 13. Create Post 14. Drawing 15. Editing 16. Events 17. Find Friends 18. Friends 19. Games 20. Maps 21. Messaging 22. News 23. Photos 24. Product 25. Profiles 26. Purchase 27. Recipe 28. Recording 29. Shopping Cart 30. Storefront 31. Timeline 32. Venue 33. Video
중간(Medium)
1. About 2. Browser 3. Cards 4. Coach Marks 5. Discovery 6. Filter 7. Navigations 8. Search 9. Share 10. Walkthroughs 11. Invite Friends
낮음(Low)
1. Ask Permission
2.
