모바일 웹 인터페이스 사용편의성 향상을 위한 레이아웃 연구

Abstract

모바일 웹 환경은 단말기의 기술적인 발전과 사용자의 요구(Needs)가 커짐에 따라 지속적으로 다양하게 변화되고 있다. 즉, 모바일 기기의 스크린 크기가 점점 커지고 터치 기능을 이용한 보다 편리해진 다양한 입력 방식들이 개발되면서 모바일 산업의 활성화를 촉진시키고 있다. 사용자의 요구는 단순한 정보소비형의 모델이 아닌 사용자가 참여하고 변화시키는 개방된 인프라 및 서비스 모형을 구축하고 있다. 이러한 흐름에 맞춰 모바일 웹 환경도 변화하고 있다. 처음에는 저속의 데이터 환경에서 이동통신사 자체 포탈의 콘텐츠만 다운로드 했었지만 고속의 데이터 전송 기술이 도래하면서 멀티미디어 콘텐츠를 제공하는 기반을 마련하게 되었고, 더 나아가 기술보다 고객가치를 중심으로 다양한 주체들이 참여할 수 있는 공간을 마련해 가고 있다. 특히 모바일 웹 2.0의 등장은 모바일에서도 개방, 공유, 참여의 가치를 중요시 여기는 서비스로 웹 2.0 시대에 맞춰 변해갈 것으로 예상되고 있으며, 모바일 웹 이용에 대한 사용자의 요구가 커지고 있다. 웹의 활용 범위가 데스크탑 PC를 넘어서 모바일 기기에서 새로운 서비스와 비즈니스의 가능성을 제시하며 모바일 웹으로 확대되고 있지만 모바일에 맞춘 사용자 인터페이스(UI)가 체계적으로 구축되어 있지 않은 실정이다. 유선과 무선의 웹 콘텐츠와 서비스가 단일화된 플랫폼 상에서 서비스되는 One Web을 실현시키는 것이 이상적이지만 화면이 큰 데스크탑 PC와 달리 화면의 크기가 제한적인 모바일 디바이스에 따라 전체 화면을 한 번에 보여주는 것은 현실적으로 어렵다. 따라서 본 연구에서는 모바일 웹 인터페이스의 사용편의성 향상을 위한 방안으로 모바일 웹 레이아웃을 제안하고자 하였다. 본 연구가 제시한 모바일 웹 인터페이스의 레이아웃 요소를 중심으로 한 모바일 웹 레이아웃 제안은 방대한 정보 및 콘텐츠를 사용자가 좀 더 효과적으로 이용하고 지속적인 이용과 만족을 유도하기 위하여 콘텐츠의 성격과 모바일 기기의 환경, 사용자의 조작 및 사용성을 고려하여 구성하였다. 이를 위하여, 모바일 웹의 개념, 동향에 대해 알아보고, 웹 인터페이스의 개념, 인터페이스 디자인의 목표인 사용성, 모바일 웹 인터페이스의 이해와 고려사항 등 이론적 고찰을 통해 인터페이스의 이해를 도모하였다. 또한, 인터페이스의 요소 중 레이아웃에 집중한 연구를 통하여 모바일 웹 레이아웃의 기본요소를 도출하고 이 요소들을 모바일 웹 레이아웃을 제안하는 기초 자료로 접목하였다. 사례 연구에서는 데스크탑 PC웹과 모바일 웹의 브라우저 환경, 서비스 환경, 사용자 측면, 웹 접근성에 대한 비교를 통해 데스크탑 PC 웹의 시각에서 모바일 웹을 보는 것은 무리가 있으며 별도의 인터페이스가 필요하다는 것을 알 수 있었다. 또한, 모바일 선진국이라 불리는 일본과 우리나라의 모바일 웹 현황 비교를 통하여 앞으로 우리나라 모바일 웹의 발전 방향에 대해 정의내리고, 사이트 분류에 따른 레이아웃 요소와 모바일 웹 인터페이스의 공통 요소를 도출하였다. 실증 분석의 한 방안으로 설문 조사를 통하여 사용자의 이용 실태, 니즈 파악 및 콘텐츠의 중요도 파악, 모바일 웹 인터페이스의 만족도 평가를 통해 사용편의성 향상을 위한 모바일 웹 레이아웃을 제안하였다. 본 연구가 제안하는 모바일 웹 레이아웃은 사용자가 많이 이용하는 포털 사이트, 커뮤니티 사이트, 뉴스 사이트, 쇼핑몰 사이트로 정하여 각 사이트의 콘텐츠 성격과 중요도를 파악하였으며, 현황 분석과 실증 분석을 통해 도출된 모바일 웹 레이아웃의 핵심요소인 주목 및 강조, 통일, 가독성, 조합, 여백, 콘텐츠 중요도를 접목하여 각 사이트에 맞는 레이아웃의 기준을 제시하였다. 즉 본 연구 결과, 메뉴를 쉽게 확인하고 실행할 수 있도록 콘텐츠의 성격을 고려하고, 사용자의 시선의 중심으로 콘텐츠를 구성하여 ‘사용성’을 만족시키고자 하였으며, 사용자가 원하는 정보를 빠른 시간 안에 효과적으로 찾아낼 수 있게 콘텐츠의 중요도 순서를 참고하여 배치함으로써 ‘강조 및 주목성’을 만족시키고자 하였다. 또한, 사용성을 고려한 폰트 크기 및 선택, 1단 그리드 시스템의 구축, 행간 및 콘텐츠 구분을 위한 공간(여백) 활용의 제안을 통해 ‘가독성’을 만족시키고, 메인 페이지와 서브 페이지에서 일관된 구분선 및 BAR 등의 사용을 통한 자연스런 흐름의 이동을 통해 ‘통일성’을 만족시키고자 하였으며, 이미지와 텍스트와의 관계를 통해 ‘조화’를 만족시키고자 하였다. 그리고 적절한 위치에 적절한 버튼을 제공하여 ‘편의성’을 만족시키고자 하였다. 본 연구가 제안한 모바일용 웹 레이아웃을 통하여 모바일 웹 인터페이스의 체계화에 우조하고 효과적인 인터페이스를 제공하는 데 있어 지침서의 역할을 할 수 있을 것으로 기대한다. 본 연구에는 제 3자의 입장에서 포괄적이면서 제한적인 연구가 진행되었으므로 각 사이트의 연구자들과 함께 더 심층적인 연구가 이루어졌으면 한다. 또한, 레이아웃에 국한되어 있는 연구가 더 나아가 인터페이스의 다양한 요소에 대한 연구를 통하여 하나의 모바일 웹스타일가이드로 제시되어 모바일 웹 인터페이스의 체계화 및 표준화에 기여하길 기대한다.

· 핵심어 : 모바일 웹 인터페이스(Mobile Web Interface), 레이아웃(Layout), 사용성(Usability); The mobile web environment is continuously changed in various ways as the technical power generation of the terminal and needs of a user grow. And the demand of a user constructs an opened infra and the service model that make the user who is not only the simple model of the information customer type participates in it and diversifies. The mobile web environment changes with this kind of pace. The application range of the web exceeds a desktop and the possibility of the service and business in which it is new in the mobile apparatus is presented and it is magnified to the mobile web but it is the actual condition in which the user interface in which it keeps pace with a mobile is not systematically constructed. In this research, the mobile web layout is suggested to improve the use convenience improvement of the mobile web interface as a method. The mobile web layout proposal around the layout element of the mobile web interface suggesting in this research, we present in consideration of a character of contents and environment of the mobile devices, the manipulation of a user, and an usability so that a user could more effectually use the huge information and the contents and derive an continued usage and the satisfaction. Accordingly, it is needed to inquire about the concept of the mobile web, and a trend through the theoretical consideration. The understanding of an interface including the concept of the web interface, the usability, that is the goal of the interface design, an understanding and consideration of the mobile web interface, and etc. was planned. Moreover, the base element of the mobile web layout was drawn through the research that it focuses on a layout among the element of an interface and these constituents were harmonized with the basic materials in which we propose the mobile web layout. In the case study, we define about the development direction of the Korea mobile web in the future through the mobile web present condition comparison of the called the mobile advanced country Japanese and Korea. And the common denominator of the layout element and the mobile web interface according to the site classification were drawn. The mobile web layout which went with this research grasped the contents character and significance of each site which is determined as the internet portal site, the community site in which a user uses very often, the news site, and the shopping mall site. The standards of the layout grafting together each site, that is the core element such as accentuation, the unification, the readability, a combination, a margin, and the contents significance of the mobile web layout drawn through the analysis of current situation and of actual proof, was presented. That is, according to the research result, the character of the contents was considered that we can check the menu out and practice. And the contents was comprised of the center of the eyes of a user and 'usability' tried to be satisfied. By arranging and referring to an important order of the contents to be able to effectually seek out the information in which a user wants in the fast time 'an accentuation and attentiveness' tried to be satisfied. Moreover, 'readability' tried to be satisfied with the font size in which it considers an usability and selection, the build-up of 1 shift grid system, and the proposal of the space(margin) application for the line spacing and contents division. 'Unity' tried to be satisfied with the movement of the natural flow through usage including the separator line which is consistent in a main page and sub page and bar and etc. And 'harmony' tried to be satisfied with a relation between image and text. Moreover, the button in which it is appropriate for the proper location was provided and 'convenience' tried to be satisfied. Through the mobile web layout with this research, It expects to play the role of a tatorial in providing the effective interface and we propose to the systematization of the mobile web interface. The research that it is limited to a layout expects to contribute to a systematization and normalizing of th mobile web interface as the mobile web style guide of one through a research about the various element of an interface.