본 연구는 최근 뉴미디어 시대에 매우 활발하게 진행되고 있는 UI/UX 분야에 대해 짚어보고 전국의 국립대학을 대상으로 홈페이지를 조사분석하여 모바일웹에 적용된 UI/UX에 대한 다양한 연구를 시도하였다. 먼저 PC웹, 모바일웹, 모바일앱에 대한 비교 분석, 전국 국립대 홈페이지 현황 조사, 대학의 PC웹과 모바일웹의 표현 및 사용 비교 조사, 계명대학의 모바일웹이 UI/UX 원칙에 어느 정도 적용하였는지 등을 분석하였다. 이 연구를 통해 대부분의 모바일웹 페이지는 UI/UX를 적용한 사용자 입장의 설계가 많이 부족하였고, PC웹의 방대한 자료를 최적화시켜서 표현할 필요가 있었다. 또한 UI/UX 디자인의 방향을 제시하여 모바일웹 설계에 적용하여야 할 사용자 경험을 적용하기 위한 방법을 모색하고자 한다.
본 연구는 최근 뉴미디어 시대에 매우 활발하게 진행되고 있는 UI/UX 분야에 대해 짚어보고 전국의 국립대학을 대상으로 홈페이지를 조사분석하여 모바일웹에 적용된 UI/UX에 대한 다양한 연구를 시도하였다. 먼저 PC웹, 모바일웹, 모바일앱에 대한 비교 분석, 전국 국립대 홈페이지 현황 조사, 대학의 PC웹과 모바일웹의 표현 및 사용 비교 조사, 계명대학의 모바일웹이 UI/UX 원칙에 어느 정도 적용하였는지 등을 분석하였다. 이 연구를 통해 대부분의 모바일웹 페이지는 UI/UX를 적용한 사용자 입장의 설계가 많이 부족하였고, PC웹의 방대한 자료를 최적화시켜서 표현할 필요가 있었다. 또한 UI/UX 디자인의 방향을 제시하여 모바일웹 설계에 적용하여야 할 사용자 경험을 적용하기 위한 방법을 모색하고자 한다.
This study aims to examine the field of UI/UX being actively adopted in this new media age, investigate and analyze homepages targeting national universities in Korea, and attempt diverse researches on UI/UX applied to mobile webs. First of all, the paper comparatively analyzed PC webs, mobile webs,...
This study aims to examine the field of UI/UX being actively adopted in this new media age, investigate and analyze homepages targeting national universities in Korea, and attempt diverse researches on UI/UX applied to mobile webs. First of all, the paper comparatively analyzed PC webs, mobile webs, and mobile apps, investigated the current status of Korean national university homepages, comparatively examined the expressions and use of PC webs and mobile webs in those universities, and analyzed to what extent a certain university's mobile web was applied to the principle of UI/UX. According to the result of this research, most of the mobile web pages considerably lack in user-oriented design applying UI/UX, and it will be needed to optimize a vast amount of data on PC webs for better expression. Moreover, this study intends to figure out ways to apply user experience to be applied to mobile web design by suggesting directions for UI/UX design.
This study aims to examine the field of UI/UX being actively adopted in this new media age, investigate and analyze homepages targeting national universities in Korea, and attempt diverse researches on UI/UX applied to mobile webs. First of all, the paper comparatively analyzed PC webs, mobile webs, and mobile apps, investigated the current status of Korean national university homepages, comparatively examined the expressions and use of PC webs and mobile webs in those universities, and analyzed to what extent a certain university's mobile web was applied to the principle of UI/UX. According to the result of this research, most of the mobile web pages considerably lack in user-oriented design applying UI/UX, and it will be needed to optimize a vast amount of data on PC webs for better expression. Moreover, this study intends to figure out ways to apply user experience to be applied to mobile web design by suggesting directions for UI/UX design.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
UX디자인은 사용자들에게 강력한 사용의 이미지를 만들어주고 제품의 사용 만족도에 큰 영향을 주는 요인이다[9]. 따라서 본 연구는 여러 대학의 홈페이지들을 조사, 분석하여 다음과 같은 목적을 두고 연구하였다.
따라서 본 연구에서는 전국 대학홈페이지를 대상으로 PC웹, 모바일웹, 모바일앱의 UI/UX를 비교 분석해 보고, 좋은 UI/UX 활용 사례를 통해서 UI/UX 적용 원칙들을 정리해 보았다.
본 연구를 통해 스마트기기로 통칭되는 새로운 도구를 사용할 때, 모바일웹이나 모바일앱의 UI/UX디자인의 방향을 제시하고 좋은 사용자 경험을 제공하기 위한 기준을 마련하고자 한다.
그러나 모바일웹도 기존의 PC웹 형태를 보이고 있는 경우가 더러 있었고, UI/UX를 적용한 사용자 입장에서 설계가 이루어진 사이트는 많지 않았다. 이에 UI/UX를 적용할 필요가 있다는 분석을 하였다. 또한 일부 대학의 모바일웹을 분석한 결과 아직 PC웹에서 이루어지고 있는 대부분의 기능들을 지원하지 못하는 경우가 많았다.
가설 설정
1) UI디자인이란?
2) UX디자인이란?
제안 방법
PC웹에서 표현된 링크들을 모바일웹에서 어느 정도 복잡도를 줄였는가에 대해 알아보기 위해 몇 개의 대학을 무작위로 선정하여 좀 더 상세히 비교, 분석하였다. 그 결과는 Table 3과 같다.
넷째, UI/UX 적용 분석에서는 UI/UX의 디자인 원칙을 정리하고 계명대학교 사이트의 UI/UX의 원칙 적용을 분석하고, 설문조사를 통해서 사용자 요구사항을 알아보고 기존의 모바일웹이 어떻게 설계되어야 하는지를 살펴보았다.
넷째, UI/UX 적용 분석에서는 반드시 지켰으면 좋을 UI/UX의 디자인 원칙을 정리하였고, 계명대학 모바일웹 사이트를 UI/UX의 원칙을 적용하여 분석하였으며, 사용자의 설문조사를 통해서 사용자 요구사항을 알아보았다. 기존의 모바일웹에 반드시 사용자 요구사항들을 적용시켜야 좋은 UI/UX가 될 것이라 생각된다.
둘째, 전국 국립대의 웹과 앱의 현황 조사를 하였고 일부 대학의 웹과 앱의 상세 사용을 분석하였다. 현재 PC웹은 모두 존재하겠지만 모바일웹과 앱이 어느 정도 개발되어있는지 파악하고, 개발되어있다면 UI/UX를 잘 적용하였는지 분석할 수 있기 때문이다.
셋째, 좋은 UI/UX를 활용한 사례들을 분석하였다. PC웹에 표현된 모든 정보는 모바일에 표현하기에 복잡하고 너무 많은 양의 정보이다.
PC웹에 표현된 모든 정보는 모바일에 표현하기에 복잡하고 너무 많은 양의 정보이다. 이를 UI/UX를 잘 활용하여 화면분할방식, 반응형 웹, 슬라이드 방식을 적용한 사이트들을 조사하였다.
셋째, 좋은 UI/UX를 활용한 사례들을 살펴보면, PC웹에 표현된 모든 정보는 모바일에 표현하기에 복잡하고 너무 많은 양의 정보이다. 이에 UI/UX를 잘 활용하여 화면분할 방식, 반응형 웹, 슬라이드 방식을 적용한 사이트들을 조사하였다. 표현 방법에 있어 모바일웹의 특징에 맞는 화면 디자인이 될 수 있으리라 생각된다.
첫째, UI/UX 현황 분석을 통해서 PC웹, 모바일웹, 모바일앱을 비교 분석하였다. 이는 각각의 특징들을 정확하게 파악하여야 정확한 UI/UX 설계를 할 수 있기 때문이다.
대상 데이터
본 연구는 계명대학 학생 120명을 대상으로 학교 홈페이지[14] 사용에 대한 간단한 설문조사를 실시하였다. PC웹, 모바일웹, 모바일앱의 사용빈도에 대한 조사에서는 90% 이상이 모바일에서 접속을 많이 하고 있으나, 아직도 PC웹을 많이 사용하고 있었다.
전국 국립대 53곳을 대상으로 PC웹, 모바일웹, 모바일앱에 대한 홈페이지 구축 현황을 조사하였고 그 결과는 Table 2와 같다. PC웹의 홈페이지는 모두 구축되어있으나 모바일웹과 모바일앱은 서서히 구축해나가고 있었다.
이론/모형
UI/UX 디자인 원칙을 기준으로 대표적으로 계명대학 사이트의 모바일웹을 UI/UX 원칙을 적용해서 분석해보았다. 그 결과는 Table 4와 같다.
성능/효과
둘째, 전국 국립대의 웹과 앱의 현황 조사에서는 PC웹은 모두 웹 사이트가 구축되어있었으나 모바일웹은 70%가 구축되어있었고, 모바일앱은 15%만이 OS별로 모두 구축되어 있었다. 이는 사용자가 모바일 기기에 소프트웨어를 설치하는 번거로움과 OS별로 구축해야 한다는 부담감 때문에 모바일웹을 많이 구축한 것으로 보인다.
또한 사용자 요구사항 및 UI/UX를 분석하지 않고 기능상 표현할 수 있는지 없는지를 검사하고 표현한 것이 대부분이었고 되도록 PC웹에 있는 기능을 모두 표현하고자 하다 보니 UI 원칙의 경제성에 위배되는 형태를 띠고 있었으며, UX를 적용한 경우는 드물었다. 이는 사용자 요구 분석을 통해서 또는 사용자 사용 빈도 조사를 통해서 많이 사용하는 기능을 위주로 메뉴를 구성하는 것이 좋은 UX를 적용하는 방법이 될 것이다.
셋째, 좋은 UI/UX를 활용한 사례들을 살펴보면, PC웹에 표현된 모든 정보는 모바일에 표현하기에 복잡하고 너무 많은 양의 정보이다. 이에 UI/UX를 잘 활용하여 화면분할 방식, 반응형 웹, 슬라이드 방식을 적용한 사이트들을 조사하였다.
첫째, PC웹과 모바일웹, 모바일앱의 비교 분석에서는 기존의 PC웹은 빠른 속도로 다양한 표현과 기술들을 적용시킬 수 있었으나 모바일웹과 앱은 모바일이라는 특성 때문에 속도 문제를 고려한 디자인이 필요했다.
후속연구
향후 과제로는 전체 학생을 대상으로 설문조사를 통해 사용자 요구사항을 알아보고 사용자 요구를 적용하고, 제시된 UI/UX 설계에 따라 디자인을 적용해보며, 사용자들의 설문조사를 통한 다양한 평가가 이루어져야 할 것이다.
질의응답
핵심어
질문
논문에서 추출한 답변
디지털 기술의 발전을 바탕으로 UI.UX디자인도 함께 발전한 이유는?
또한 스마트폰이나 스마트패드로 불리는 새로운 모바일 정보기기가 보급되고, 디지털 기술의 발전으로 UI/UX[3, 4] 디자인도 함께 발전하고 있다. 이제는 제품의 외형적 성능보다는 사용성이 제품의 가치를 결정하는 기준이 되었기 때문이다. 이러한 사용자 중심의 체계적인 사용자 인터페이스 설계는 개발 기간은 물론이고 유지보수 비용을 단축시켜 궁극적으로 제품 및 서비스의 경쟁력을 확보할 수 있다는 인식이 보편화되고 있다.
앱의 개발은 어떠한 단계를 거쳐서 완성되는가?
앱의 개발은 기획단계, 개발단계, 인도단계를 거쳐서 완성된다. 기획단계에서 기획과 요구분석, 설계의 활동이 수행되며, 개발단계에서는 UI 디자인과 코딩, 테스트 활동이 수행된다.
기존 UX디자인의 목적은?
사용자에게 정보의 구조를 파악할 수 있도록 하기 위해 정보 설계가 적용되었고, 다양한 조작을 위해 새로운 기술들이 적용되었다[7]. 기본적으로 UX디자인은 기능에 집중하고 있었고, 오류를 줄이고 핵심기능을 원활히 수행하는 목적을 위해 디자인 되어왔다[8].
참고문헌 (14)
Helen Sharp, Yvonne Rogers, and Jenny Preece, "Interaction Design: beyond human-computer interaction," 2nd edition, John Wiley & Sons, 2007.
Ben Shneiderman, Catherine Plaisant, "Designing The User Interface: Strategies for Effective Human-Computer Interaction," 5th edition, Addison-Wesley, 2009.
Russ Unger, Carolyn Chandler, "A Project Guide to UX Design: For User Experience Designers in the Field or in the Making," New Riders, 2009.
Hokyoung Ryu, "Mobile User Interface Analysis and Design: A Practitioner's Guide to Designing User Interfaces for Mobile Devices," NOVA, 2009.
Youngsam Kim, "Eye-catching smartponae App UX&UI Design," Wikibooks, 2013.
Jinwoo Kim, "UX and HCI: Design of a new user experience with information and communication technologies," Telecommunications Union Newsletter, 2009.
Dongmin Lee, Huhyun Jeon, "A Study on Developmental Directivity of the Design with UX(User eXperience) Characteristics," Journal of the Ergonomics Society of Korea, Vol.29, No.4, pp.595-604, 2010.
Jonghong Jeon, Seungyun Lee, "UI/UX Technology Trends in the Next Generation Web," Communications of the Korean In of Information Scientists and Engineers, Vol.29, No.8, 2011.
Seungmikn Kim, "Communication Focused UX Design Paradigm-Based on Using Behavior of Mobile Information Technology Equipment," Design, Dept, of Design, The graduate school seoul national university, 2012.
Sanghwan Kung, "Smart Design for App," The Society of Digital Policy & Management, Vol.10, No.6, pp.269-274, 2012.
T Academy, "Mobile UX/UI Planning Ver2.2," 2011.
IT Today, Smartphone and User, Lead to UI. http://www.ittoday.co.kr/news/articleView.html?idxno23033. 2013.
Myungsuk Lee, "A Study on UI/UX Applying Method based on Mobile Web," The Korean Association of Computer Education, Vol.18, No.1, pp.211-215, 2014.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.