무선 인터넷 접근성이 개선된 스마트폰과 태블릿PC의 등장으로 개인 컴퓨팅 환경이 PC중심에서 모바일 웹(Mobile web) 기반의 모바일 단말기 중심으로 이동하면서, 정보의 이용과 소통 방식이 빠르게 변화하고 있다. 이러한 시점에서 국내 대학들 역시 스마트폰 사용자들을 위한 모바일 웹 사이트 구축이 활발하게 진행 되고 있다. 하지만 이러한 대학들의 모바일 웹사이트들은 사용성이나 접근성을 고려하기 한 사이트가 아닌 다양한 기능과 화려한 디자인에 주력하여 개발하거나 단순한 홍보용으로 제작되고 있기 때문에 이를 사용하는 학생들은 많은 불편을 겪고 있다. 이에 본 논문은 스마트폰 환경에서 사용성과 접근성을 고려한 웹 인터페이스를 새롭게 제안함으로써 사용자들이 원하는 정보로 쉽게 접근할 수 있도록 구현하였다. 모바일 웹사이트 구축 시 고려해야 할 사항은 직관적인 인터페이스 디자인, 사용자 경험(User Experience)에 대한 고려, 사용자 맞춤형 인터페이스, 그리고 웹표준(Web Standard) 준수이다.
무선 인터넷 접근성이 개선된 스마트폰과 태블릿PC의 등장으로 개인 컴퓨팅 환경이 PC중심에서 모바일 웹(Mobile web) 기반의 모바일 단말기 중심으로 이동하면서, 정보의 이용과 소통 방식이 빠르게 변화하고 있다. 이러한 시점에서 국내 대학들 역시 스마트폰 사용자들을 위한 모바일 웹 사이트 구축이 활발하게 진행 되고 있다. 하지만 이러한 대학들의 모바일 웹사이트들은 사용성이나 접근성을 고려하기 한 사이트가 아닌 다양한 기능과 화려한 디자인에 주력하여 개발하거나 단순한 홍보용으로 제작되고 있기 때문에 이를 사용하는 학생들은 많은 불편을 겪고 있다. 이에 본 논문은 스마트폰 환경에서 사용성과 접근성을 고려한 웹 인터페이스를 새롭게 제안함으로써 사용자들이 원하는 정보로 쉽게 접근할 수 있도록 구현하였다. 모바일 웹사이트 구축 시 고려해야 할 사항은 직관적인 인터페이스 디자인, 사용자 경험(User Experience)에 대한 고려, 사용자 맞춤형 인터페이스, 그리고 웹표준(Web Standard) 준수이다.
Since the emergence of the smartphone and tablet PC whose wireless internet accessibility has improved, personal computing environment has shifted from PCs to mobile web based mobile devices, and therefore the use of information and the communication method have been changing rapidly. Under the circ...
Since the emergence of the smartphone and tablet PC whose wireless internet accessibility has improved, personal computing environment has shifted from PCs to mobile web based mobile devices, and therefore the use of information and the communication method have been changing rapidly. Under the circumstance, domestic universities have actively been establishing mobile websites for smartphone users. Such mobile websites, however, focused on diverse functions and a showy design rather than on usability or accessibility, and were developed simply for the purpose of public relations. For this reason, students are now faced with difficulties in using the websites. Therefore, this paper proposes a novel web interface with the consideration of usability and accessibility in order for users to easily use and assess proper information. The matters to be taken into account in developing a mobile website are an intuitive interface design, user experiences, a user customized interface and compliance with web standards.
Since the emergence of the smartphone and tablet PC whose wireless internet accessibility has improved, personal computing environment has shifted from PCs to mobile web based mobile devices, and therefore the use of information and the communication method have been changing rapidly. Under the circumstance, domestic universities have actively been establishing mobile websites for smartphone users. Such mobile websites, however, focused on diverse functions and a showy design rather than on usability or accessibility, and were developed simply for the purpose of public relations. For this reason, students are now faced with difficulties in using the websites. Therefore, this paper proposes a novel web interface with the consideration of usability and accessibility in order for users to easily use and assess proper information. The matters to be taken into account in developing a mobile website are an intuitive interface design, user experiences, a user customized interface and compliance with web standards.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
본 논문은 국내 모바일 웹2.0 포럼에서 제안하는 모바일 웹 가이드라인 및 웹 스타일 가이드를 기반으로 하여 스마트폰에서 사용성과 접근성을 고려한 모바일 웹 인터페이스를 구현함으로써 사용자들에게 모바일 웹 환경에서도 쉽게 인터넷을 사용할 수 있도록 모바일 웹 인터페이스 디자인 및 사용성 개선을 목적으로 한다.
본 연구는 모바일 웹사이트를 운용하고 있는 국내 4개 대학교를 선정하여 모바일 웹사이트에 나타난 정보의 구조와 구성, 내비게이션 체계에 대해 분석하였다.
지금까지 살펴본 문헌연구와 타 대학들의 모바일 웹 분석을 바탕으로 제4장에서는 스마트폰에 최적화된 모바일 웹 인터페이스 디자인을 구현하고자 한다. 이를 바탕으로 모바일 웹사이트 디자인에 긍정적인 영향을 주는지 확인하고, 간단한 사용성 평가를 통해서 연구의 신뢰도와 타당성을 검증하고자 한다.
제안 방법
개발된 모바일 웹사이트는 위에서 제시한 웹 스타일 가이드를 충실히 따랐고 전체적인 디자인(design look & feel)은 PC버전의 웹사이트의 컬러 컨셉 및 스타일을 그대로 유지하면서 사용성 및 접근성을 고려하여 사용자가 원하는 정보를 쉽게 찾을 수 있도록 인터페이스를 설계하였고, 아이폰뿐만 아니라 안드로이드 기반 스마트폰에서도 쉽게 접근할 수 있도록 웹표준 HTML4.0, XHTML, CSS1/2를 준수해 개발하였다.
[그림 8]은 위의 결과를 반영해서 새롭게 제안하는 메인화면의 인터페이스 레이아웃을 나타내고 있다. 그리드 형식의 레이아웃은 정보의 확장이 수평방향으로 진행되기 때문에 모바일 환경에서 화면공간의 어려움으로 어려움이 따르기 때문에 초기화면에서부터 최신 정보들을 얻을 수 있도록 개선하였다. 또한 상단 부분에 드롭다운 형태의 메뉴를 추가하여 원하는 페이지로의 이동이 쉽게 하였다.
앞서 살펴본 A대학교 모바일 웹사이트의 경우 같은 레벨의 하위메뉴의 내용을 확인 하려면 같은 레벨의 메뉴의 끼리 페이지 이동을 하기 위해서는 전 단계로 돌아가거나 아니면 처음 화면으로 돌아가서 원 하는 페이지로 이동해야 하는 번거로움이 있었다. 따라서 이를 해결하기 위해 2단계 메뉴 페이지의 구조를 위의 그림처럼 개선하여 메뉴 제목을 선택하면 내용이 아래로 확장하는 구조로 디자인 하여 같은 레벨의 메뉴들의 이동을 한 페이지에서 이루어지도록 구현하였다. 이는 웹 스타일 가이드의 “Navigation” 항목과 “Structure” 항목을 반영한 결과이다.
참가자들에게 먼저 앞서 언급했던 타 대학의 모바일 웹사이트를 먼저 사용하게 해보고 나중에 본 연구에서 구현한 모바일 웹사이트를 사용하게 하였다. 테스트를 진행 하는 동안 연구대상 웹사이트와 타 대학 사이트를 사용하는 모습을 비교 관찰함으로써 참가자들의 행동 양식을 파악하였다.
대상 데이터
본 연구에서 언급하고 있는 모바일 디바이스는 스마트폰이며, 애플사의 아이폰(iPhone 4)이 연구를 위해 사용되었으며, 상대적인 비교를 위해 삼성 갤럭시S를 부가적으로 사용되었다.
사용성 평가에 필요한 인원은 Nielsen, Molich, Virzi의 연구에서 제시한대로 5명이면 충분하다고 제안하고 있는데, 사용자 한 사람을 테스트하여 이로부터 정보를 수집할 때 관찰자는 사용자로부터 사용성 문제에 대해 1/3을 알 수 있기 때문에 두 번째 관찰자부터는 어느 정도 중복되는 내용을 발견하게 된다[21]. 이러한 연구를 근거로 하여 본 논문에서도 5명이 테스트에 참가하였고, 테스트의 객관성을 확보하기 위해 참가자는 아이폰과 안드로이드폰 등 스마트폰 에서 모바일 웹에 능슥한 사용자(Mobile web power user)2명, 모바일 웹 사용 가능자(Mobile web literate user)2명, 모바일 웹에 대한 경험이 없는 사용자(Mobile web novice user)1명이 테스트에 참가하였다.
참가자들에게 먼저 앞서 언급했던 타 대학의 모바일 웹사이트를 먼저 사용하게 해보고 나중에 본 연구에서 구현한 모바일 웹사이트를 사용하게 하였다. 테스트를 진행 하는 동안 연구대상 웹사이트와 타 대학 사이트를 사용하는 모습을 비교 관찰함으로써 참가자들의 행동 양식을 파악하였다.
성능/효과
두 번째, 참가자들이 현재 페이지에서 다른 페이지를 이동할 때 사용자들은(특히 PC에서 인터넷 사용이 익숙한 사용자 일수록) 브라우저에 있는 “뒤로 가기” 버튼을 제일 많이 사용하는 것을 관찰 할 수 있었다.
마지막으로 페이지의 최상단에 “메뉴보기” 버튼을 통해서 다른 메뉴들을 볼 수 있게 하였고 ([그림 6]의 서브메뉴보기), [그림 5]의 서브페이지에서 볼 수 있듯이 2 depth 메뉴의 동일한 레벨의 메뉴들은 탭 바 형식으로 배치하여 사용자가 언제든지 다른 메뉴로 이동하는 것이 쉽도록 하였다.
마지막으로, 웹사이트의 메인 화면의 기능인데, 참가자 중 한 명은 초기 화면에서 자신이 관심 있는 새로운 소식을 확인 할 수 있는 기능이 있으면 좋겠다는 의견을 나타냈다. 즉, 메인 화면이 브로슈어의 목차가 아닌 처음부터 원하는 정보를 찾을 수 있는 역할을 수행해야 함을 알 수 있었다.
마지막으로 아직 까지도 미비한 웹 표준 준수이다. 본 연구에서 사용한 웹 표준 기술은 HTML4.0, XHTML, CSS1/2를 준수하여 개발하였지만, 자바스크립트와 연동되는 부분에서 많은 한계가 있었음을 알 수 있었다. 따라서 HTML5 및 CSS3로 전환하는 것이 무엇보다 중요한 일 일 것이다.
그렇기 때문에 박스메뉴의 기능을 처음부터 인지하지는 못하는 것을 알 수 있었다. 이번 테스틀 통해서 우리가 알 수 있었던 중요한 사실은 스마트폰 사용자들은 어느 정도 인터넷 사용 경험이 있기 때문에 이전과 전혀 다른 파격적인 레이아웃이나 기능은 오히려 사용성이 낮아질 수 있음을 알았다.
즉, 메인 화면이 브로슈어의 목차가 아닌 처음부터 원하는 정보를 찾을 수 있는 역할을 수행해야 함을 알 수 있었다.
첫 번째, 디자인적인 측면에서 박스 메뉴의 컬러가 모든 페이지에서 동일한 색상이어서 주메뉴를 구분하는 것이 혼란스럽다고 응답했다. 즉, 사용자가 머물러 있는 현재의 위치를 정확하게 보여주고 있지 못한다는 문제점을 발견 할 수 있었다.
테스트 결과 “사용편리성”, “네비게이션” 측면에서 매우 긍정적인 답변을 얻을 수 있었다.
후속연구
두 번째, 사용자 경험에 대한 고려이고, 세 번째는 사용자들의 개인화된 성향에 따른 사용자 맞춤형 인터페이스에 대한 보다 깊이 있는 연구가 필요하다. 앞서 제시한 웹 스타일 가이드 항목에서 사용자 경험에 대한 항목도 추가되어야 할 필요가 있다.
따라서 모바일OK 및 모바일 웹 스타일 가이드라인을 보완·수정에 관한 보다 더 깊이 있는 연구가 필요할 것이다.
또한 스마트폰 및 태블릿 PC기반의 모바일웹은 모바일 클라우드 환경과 결합하여 앞서 언급한 바와 같이 ‘모바일화’, ‘개인화’로 발전될 것으로 전망되고 있다. 따라서 사용자 개개인의 성향에 맞는 모바일 웹 인터페이스 디자인 환경에 대한 보다 깊이 있는 연구가 이루어져야 할 것이다.
선행 연구를 통하여 본 저자 등이 제안한 태블릿 PC 환경에 최적화된 웹 인터페이스는 그 사용성이 크게 개선되었음을 입증하였다[8][9].
구현된 모바일 웹사이트의 사용성을 알아보기 위해 선행 연구와 비슷한 방법으로 사용성 평가를 실시하였다[8][9].
H. Y. Oh, B. W. Min, and Y. S. Oh, "An Improvement of Mobile Web Interface Design Optimized for Tablet PC Environment," ICHIT2011, LNCS 6935, pp.770-777, 2011(9).
따라서 모바일 웹사이트를 만들 때에는 모바일 디바이스에 대한 이해를 바탕으로 일반 PC용 웹 환경과의 차이점과 특성을 다음과 같이 고려해야 한다[14].
이용자의 내비게이션 과정은 대략적으로 네 단계로 구분할 수 있는데 첫째, 웹사이트 내에서 현재의 위치를 파악하고 둘째, 이를 통해 적절한 경로를 선택 하며 셋째, 이동 중 올바른 경로인지 진행 상황을 살펴본 뒤 넷째, 최종 목적지에 도착하여 원하는 정보가 아닌 경우 새로운 탐색을 시작한다[14][17].
모바일 웹(모바일OK) 표준은 모바일 웹 콘텐츠 구축에 대한 국가적 기준이 되어, 국민 누구나가 모바일 단말에 최적화된 웹 콘텐츠를 편리하게 사용할 수 있는 웹 사이트 구축을 통해, 다양한 IT 서비스의 공급·확산을 유도하고 관련 산업을 활성화 시킬 수 있는 기폭제가 될 것으로 기대하고 있다[15].
이용자의 내비게이션 과정은 대략적으로 네 단계로 구분할 수 있는데 첫째, 웹사이트 내에서 현재의 위치를 파악하고 둘째, 이를 통해 적절한 경로를 선택 하며 셋째, 이동 중 올바른 경로인지 진행 상황을 살펴본 뒤 넷째, 최종 목적지에 도착하여 원하는 정보가 아닌 경우 새로운 탐색을 시작한다[14][17].
J. Nielsen, Designing Web Usability: The Practice of Simplicity, New Riders Publishing, pp.188-191, 2000.
사용성 평가에 필요한 인원은 Nielsen, Molich, Virzi의 연구에서 제시한대로 5명이면 충분하다고 제안하고 있는데, 사용자 한 사람을 테스트하여 이로부터 정보를 수집할 때 관찰자는 사용자로부터 사용성 문제에 대해 1/3을 알 수 있기 때문에 두 번째 관찰자부터는 어느 정도 중복되는 내용을 발견하게 된다[21].
※ AI-Helper는 부적절한 답변을 할 수 있습니다.