N스크린 환경에서의 반응형 웹 활성화를 위한 모던UI 적용 연구

국문 초록 (Abstract)

본 연구는 N스크린 환경에서 반응형 웹 기술에 모던UI 요소를 적용하여 사용자가 필요로 하는 콘텐츠를 어떤 디바이스에서도 동일하게 서비스 받을 수 있도록 하는 UI디자인에 대한 방향성을 제시하는데 목적이 있다. N스크린은 하나의 콘텐츠를 스마트폰, TV, PC에서 동일하게 이용이 가능한 환경으로써 반응형 웹 기술과 기존 연구에서 활용되었던 모던UI의 주요 요소들의 반영 정도를 파악하고자 하였다. 분석사례는 선행연구를 기반으로 도출한 대표적 사이트 유형, 콘텐츠 사이트와 태스크 기반의 응용프로그램 사이트를 중심으로 각각의 모바일 웹 사이트 4곳을 선정하여 분석하였다. 분석 결과, 사례 모두 모던UI의 요소를 반영하고 있으나 각 사례에 따라 차이를 보였다. 콘텐츠 사이트는 여백 활용과 그리드, 타이포그래피 부분에서는 반영 정도가 높았으나, 네비게이션, 계층구조, 애니메이션 부분에서는 반영 정도가 낮아 상대적으로 지나치게 단순한 인터페이스로 구성되어 있었다. 태스크 기반의 응용프로그램 사이트는 애니메이션 부분의 반영 정도가 낮았으나 콘텐츠 계층구조 부분에서는 사용자 관점에서 인터페이스를 신속하게 숙지 가능하였다. 결론적으로, 모바일 웹 환경에서 모던UI의 필요성과 활성화 방향을 확인할 수 있었으며, 나아가 N스크린 환경에서의 반응형 웹 활성화의 실천적인 연구와 콘텐츠 개발이 함께 이루어져야 함을 확인하였다.

다국어 초록 (Multilingual Abstract)

The purpose of this study is to propose directionality for UI design that enable users to receive the contents utilizing whatever device they may use in an N Screen environment where Modern UI element is applied to a Responsive web technology. N Screen is a technology that unifies entertainment experience across several devices. We focus on finding out the reflected degree of responsive Web technology and Modern UI main elements. The primary sites that we have utilized for Case Analysis include four contents sites and task-based application sites respectively. Analysis results show that all cases reflect Modern UI elements though there were different degrees of reflection for each case. Contents sites reflected more of margin leverage, grid, and typography but less of navigation, hierarchy, and animation section consisted with overly simplistic interface. The task-based application sites had low reflection of animation section but consist content hierarchy section that is made up of quick and easy interface from the user"s point of view. Consequently, we have ascertained the needs and directionality for Modern UI in mobile Web environment. In addition, it is an essential factor to develop content along with the practical research concerning responsive web activation.

목차 (Table of Contents)

• Abstract
• 국문초록
• Ⅰ. 서론
• Ⅱ. 웹 환경의 변화
• Ⅲ. 반응형 웹 사례 분석
• Ⅳ. 결론
• Reference

참고문헌 (Reference)

1 임양미, "패러다임 변화에 따른 웹 내비게이션 디자인 기능성 확장에 대한 연구" 한국디지털디자인학회 11 (11): 183-192, 2011

2 고설, "웹 모던UI 활용을 위한 어포던스 적용 방안에 관한 연구" 한국디자인문화학회 21 (21): 1-12, 2015

3 강은정, "웹 기획 기초와 설계 : 사이트, 인터페이스, 디자인" 한빛미디어 2007

4 반준철, "오래가는 UX 디자인" 한빛미디어 2013

5 박준우, "스마트 미디어 환경에서의 N-스크린 기반 반응형 웹 콘텐츠 고찰" 한국디지털디자인학회 12 (12): 257-266, 2012

6 우근도, "사용자 감성형 GUI 개발을 위한 디자인 모델 구축 : 터치스크린 모바일 폰을 중심으로" 전북대학교 대학원 2009

7 Ethan Marcotte, "반응형 웹디자인" 웹액츄얼리코리아 2012

8 김성훈, "반응형 웹 퍼블리싱 효율성을 위한 디자인 미니멀리즘에 관한 연구" 한국디자인지식학회 (30) : 211-220, 2014

9 Jim Wilson, "반응형 안드로이드 앱 UI 개발" 에이콘출판 2015

10 Brian Fling, "모바일 디자인&개발" 지앤선 2010

11 김수희, "모던UI가 적용된 스마트 폰 인터페이스의 사례와 발전방향" 한국기초조형학회 15 (15): 71-81, 2014

12 송민정, "레이아웃의 모든 것" 예경 2006

13 민철홍, "디자인 사전" 안그라픽스 1994

14 임양미, "다양한 디지털기기 화면의 최적화를 위한 사용자 조절 UI 화면 설계" 한국디지털디자인학회 14 (14): 483-492, 2014

15 Russ Unger, "UX 디자인 프로젝트가이드" 위키북스 2010

16 김은영, "N스크린 환경에서 반응형 웹 활성화를 위한 요인분석" 건국대학교 정보통신대학원 2013

17 황성준, "N-스크린을 이용한 효과적 콘텐츠 활성화에 관한 방법 연구" 건국대학교 정보통신대학원 2011

18 김진우, "Human computer interaction 개론 : UX innovation을 위한 원리와 방법" 안그라픽스 2012