모바일 웹툰 애플리케이션 사용성 향상을 위한 UI 디자인 연구

Abstract

웹툰 산업은 스마트폰의 등장과 대중화로 모바일 애플리케이션 형태의 웹툰 플랫폼을 중심으로 성장하여 코로나 팬데믹 시대에 주요 비대면 콘텐츠로 자리매김하고 있다. 이러한 흐름 속에 각각의 웹툰 플랫폼은 사용자 확보를 위해 사용편의성을 높이려는 움직임을 보이고 있으며 모바일 웹툰 애플리케이션의 사용성에 관한 여러 연구도 꾸준히 진행되고 있다. 그러나 UX 측면의 연구가 주로 이루어졌으며 UI 디자인을 통한 사용성 연구는 미비한 상황이다. 이에 본 연구는 UI 디자인 구성요소에 초점을 두고 모바일 웹툰 애플리케이션의 사용성 향상을 위한 UI 디자인 가이드라인 제시를 목적으로 하였다. 본 연구의 구성은 다음과 같다. 문헌 연구를 통해 모바일 웹툰 애플리케이션, UI 디자인, 사용성 평가를 고찰한 뒤 본 연구의 모바일 UI 디자인 구성요소와 사용성 평가 기준을 확립하였다. 이후 사례 분석에서는 네이버 웹툰, 다음 웹툰, 레진코믹스, 카카오페이지를 대상으로 앨리슨 제이 헤드의 UI 평가 원칙에 근거하여 콘텐츠 정보구조, 내비게이션, 레이아웃, 아이콘, 타이포그래피, 컬러의 UI 디자인 구성요 소를 비교 분석하여 문제점을 발견하였다. 모바일 웹툰 애플리케이션의 유경험자를 대상으로 진행한 사용성 조사에서는 사용성 테스트를 통해 사용자가 이용과정 중 겪는 문제점을 관찰하였고 거시적인 인사이트를 얻기 위해 사용자 인터뷰를 진행하였다. 이후 사용성 조사 내용을 바탕으로 어피니티 다이어그램을 구축하여 사용자의 요구사항을 도출하였다. 최종적으로 사례 분석과 어피니티 다이어그램 결과를 바탕으로 앨리슨 제이 헤드의 UI 평가 원칙과 유용성, 사용성, 접근성, 유연성, 매력성으로 재구성된 피터 모빌의 허니콤 모델 평가 요소에 따라 모바일 UI 디자인 구성요소별 가이드라인을 제안하였다. 첫째, 콘텐츠 정보구조에서는 부가적인 메뉴와 기능은 필요 이상 노출시키지 않으며 제작자 중심의 약어나 일반적이지 않은 용어로 된 메뉴명은 지양한 다. 둘째, 조작순서에서는 서비스 이용과정은 탐색적이지 않은 단일에 짧은 경로로 제시하여 이동을 최소화하며 피드백은 텍스트가 포함된 시각적 표현으로 제공한다. 셋째, 내비게이션에서는 사용자의 태스크와 내비게이션 디자인을 기반으로 목적지향적인 내비게이션을 제공한다. 넷째, 레이아웃에서는 한 화면의 82 ~ 84%는 콘텐츠 영역으로 하여 그 안에 작품 영역은 최소 65% 이상이어야 하며 윤곽선보다는 여백을 통해 시각적 경계를 표현한다. 다섯째, 아이콘에서는 정보의 우선순위 표현과 강조에 사용되는 아이콘은 모양보다 크기와 색상을 통해 가시성을 높이며 기능에 대한 이해가 필요한 경우 아이콘과 레이블을 함께 표기한다. 여섯째, 타이포그래피에서는 산세리프체 계열에 9pt(12px) 이상의 폰트를 사용하며 작품명과 작가명, 작품 정보는 130 ~ 150% 사이의 행간 간격을 가져야 한다. 일곱째, 컬러에서는 채도 높은 주조색을 중심으로 채도와 명도에 차이를 둔 두 가지 이내에 보조색을 사용하여 각 페이지의 구성요소에 조화로운 배색을 하고 흰색 또는 회색 계열의 무채색 배경을 통해 구성요소들과 대비와 조화가 이루어질 수 있도록 한다. 본 연구는 UI 디자인 구성요소에 초점을 두고 사용자의 요구사항을 반영하여 UI 디자인 가이드라인을 제시함에 의의가 있으며 제시한 가이드라인을 통해 모바일 웹툰 애플리케이션의 사용성이 향상되기를 바란다. 또한 앞으로의 관련연구에 있어 선행 자료로서 활용되기를 기대한다.;Popularizing of the smartphone has changed the dominant digital environment from PC to mobile, and it causes various webtoon platforms to be created. Afterward, the webtoon industry has grown and established itself as a major non-face-to-face content in the COVID-19 Pandemic era. In this trend, each webtoon platform tries to increase ease of use for attracting more users, and various studies on the usability of mobile webtoon applications are also continuing. Mainly prior research on UX has been conducted, but usability research through UI design is not sufficiently studied. Thus, in this study, this thesis aims to present UI design guidelines for improving usability of mobile webtoon application based on UI design components. This study is described as follows: Through literature research, this research considers mobile webtoon applications, UI design and evaluations of usability. Through this consideration, this thesis establishes mobile UI design components and usability evaluation criteria for this study. Later, a case analysis based on "Alison J. Head's UI evaluation principles" includes comparison and analysis of contents information structure, navigation, layout, icon, typography, and UI color about Naver Webtoon, Daum Webtoon, RezhinComics, and Kakaopage. The usability research on webtoon application's users found problems that users experienced when they use the application. To gain wider insights, this research executed user interviews. Then, based on the contents of the usability research, the study constructs an affinity diagram to derive user needs. Finally, based on findings derived from case analysis and usability research, this study proposes specifically each components' mobile UI design guidelines. First, in contents information structure, it does not expose incidental menus and functions, if it is not necessary. It also avoids using menu names in abbreviations or non-common terms for users. Second, in the manipulation sequence, a process of utilization of service presents a short single path to minimize movement. And feedback is provided as a visual representation with text. Third, navigation provides goal-oriented navigation based on users' tasks and navigation designs. Fourth, in a layout, 82–84% of a screen is a content area, so the content information should take at least 65% of the content area. it is better to use Margin or padding for visual boundaries than outlines. Fifth, in icons, icons to represent and highlight priorities of information increase visibility through size and color than shape. If comprehension of the feature is required, label the icons. Sixth, typography should be larger than 9pt(12px) in the sans serifs family. And works' titles, artist names, and each works' information leading space must be 130 and 150% between lines. Seventh, in color, saturated dominant colors with two secondary colors in different chroma and brightness would harmonize the UI components of the page. Through using white or gray achromatic background, it allows contrast and harmony of the components. It is hoped that the UI design guideline in this study will improve the usability of mobile webtoon applications and be used as prior materials for future related research.