웹툰 산업은 스마트폰의 등장과 대중화로 모바일 애플리케이션 형태의 웹툰 플랫폼을 중심으로 성장하여 코로나 팬데믹 시대에 주요 비대면 콘텐츠로 자리매김하고 있다. 이러한 흐름 속에 각각의 웹툰 플랫폼은 사용자 확보를 위해 사용편의성을 높이려는 움직임을 보이고 있으며 모바일 웹툰 애플리케이션의 사용성에 관한 여러 연구도 꾸준히 진행되고 있다. 그러나 UX 측면의 연구가 주로 이루어졌으며 UI 디자인을 통한 사용성 연구는 미비한 상황이다. 이에 본 연구는 UI 디자인 구성요소에 초점을 두고 모바일 웹툰 애플리케이션의 사용성 향상을 위한 UI 디자인 가이드라인 제시를 목적으로 하였다. 본 연구의 구성은 다음과 같다.
문헌 연구를 통해 모바일 웹툰 애플리케이션, UI 디자인, 사용성 평가를 고찰한 뒤 본 연구의 모바일 UI 디자인 구성요소와 사용성 평가 기준을 확립하였다. 이후 사례 분석에서는 네이버 웹툰, 다음 웹툰, 레진코믹스, 카카오페이지를 대상으로 앨리슨 제이 헤드의 UI 평가 원칙에 근거하여 콘텐츠 정보구조, 내비게이션, 레이아웃, 아이콘, 타이포그래피, 컬러의 UI 디자인 구성요 소를 비교 분석하여 문제점을 발견하였다. 모바일 웹툰 애플리케이션의 유경험자를 대상으로 진행한 사용성 조사에서는 사용성 테스트를 통해 사용자가 이용과정 중 겪는 문제점을 관찰하였고 거시적인 인사이트를 얻기 위해 사용자 인터뷰를 진행하였다. 이후 사용성 조사 내용을 바탕으로 어피니티 다이어그램을 구축하여 사용자의 요구사항을 도출하였다. 최종적으로 사례 분석과 어피니티 다이어그램 결과를 바탕으로 앨리슨 제이 헤드의 UI 평가 원칙과 유용성, 사용성, 접근성, 유연성, 매력성으로 재구성된 피터 모빌의 허니콤 모델 평가 요소에 따라 모바일 UI 디자인 구성요소별 가이드라인을 제안하였다.
첫째, 콘텐츠 정보구조에서는 부가적인 메뉴와 기능은 필요 이상 노출시키지 않으며 제작자 중심의 약어나 일반적이지 않은 용어로 된 메뉴명은 지양한다.
둘째, 조작순서에서는 서비스 이용과정은 탐색적이지 않은 단일에 짧은 경로로 제시하여 이동을 최소화하며 피드백은 텍스트가 포함된 시각적 표현으로 제공한다.
셋째, 내비게이션에서는 사용자의 태스크와 내비게이션 디자인을 기반으로 목적지향적인 내비게이션을 제공한다.
넷째, 레이아웃에서는 한 화면의 82 ~ 84%는 콘텐츠 영역으로 하여 그 안에 작품 영역은 최소 65% 이상이어야 하며 윤곽선보다는 여백을 통해 시각적 경계를 표현한다.
다섯째, 아이콘에서는 정보의 우선순위 표현과 강조에 사용되는 아이콘은 모양보다 크기와 색상을 통해 가시성을 높이며 기능에 대한 이해가 필요한 경우 아이콘과 레이블을 함께 표기한다.
여섯째, 타이포그래피에서는 산세리프체 계열에 9pt(12px) 이상의 폰트를 사용하며 작품명과 작가명, 작품 정보는 130 ~ 150% 사이의 행간 간격을 가져야 한다.
일곱째, 컬러에서는 채도 높은 주조색을 중심으로 채도와 명도에 차이를 둔 두 가지 이내에 보조색을 사용하여 각 페이지의 구성요소에 조화로운 배색을 하고 흰색 또는 회색 계열의 무채색 배경을 통해 구성요소들과 대비와 조화가 이루어질 수 있도록 한다.
본 연구는 UI 디자인 구성요소에 초점을 두고 사용자의 요구사항을 반영하여 UI 디자인 가이드라인을 제시함에 의의가 있으며 제시한 가이드라인을 통해 모바일 웹툰 애플리케이션의 사용성이 향상되기를 바란다. 또한 앞으로의 관련연구에 있어 선행 자료로서 활용되기를 기대한다.