Metro UI 기반 반응형 웹 프레임워크

국문 초록 (Abstract)

Metro UI 기반 반응형 웹 프레임워크

최근 스마트폰을 필두로 태블릿 PC, 스마트 TV 등 다양한 해상도와 화면의 디지털 디바이스가 등장함에 따라 웹 환경 또한 변화를 맞이하고 있다. 스마트폰의 등장으로 해상도와 화면 크기 문제 등으로 인해 PC 웹 사이트와 별개로 모발일 웹 사이트를 제작하여 서비스를 하였지만 'N-Screen'으로 통칭되는 멀티디바이스 디지털 환경에서 더 이상 대안이 되지 못하고 있다.
이러한 상황에서 기존 웹 환경에 국한되지 않고 스크린 사이즈에 관계없이 다양한 디바이스에 대응하는 반응형 웹(Responsive Web)이 대두되고 있다. 반응형 웹을 통해 통합된 웹 페이지를 구축할 수 있으며, 이에 따라 기존 디바이스에 따라 개별적으로 사이트를 제작했던 것에 비해 생산성, 효율성 측면에서 좋은 방법이라 할 수 있다.
하지만 반응형 웹으로 제작된 사이트도 많지 않으며, 다양한 디바이스 화면 해상도에 대응하여 콘텐츠를 제공하지만 기존 UI/UX(User Interface / User Experience)를 그대로 사용하는 정도에 머무르고 있기 때문에 UI 또한 반응형 웹에 대응하는 UI/UX를 제공해야 한다.
본 연구는 이러한 반응형 웹에 현재 Microsoft의 Windows 8, Windows Phone에 사용 된 Metro UI 기반의 UI를 접목 시킨 새로운 프레임워크를 제안한다.
먼저 Microsoft의 Metro UI의 요소를 분석 하고 웹으로 구현 할 주요 요소를 후 웹 개발 툴을 이용하여 웹 사이트 요소로 구현하고 CSS, JS 파일 등을 통해 프레임워크화 시킨다. 프레임워크를 개발 및 구현하고 본 연구에서 제안된 프레임워크의 유용성을 검증하기 위해 실제 사이트를 개발하여 웹 서비스를 시작한다. 해당 웹 서비스에 대한 사용자들의 인식이 기존 웹 서비스와 비교해 개선되는지 ‘소리내며 생각하기 기법(think-aloud technique)’을 통해 그 유용성을 검증한다.
검증결과 기존 웹 사이트에서 볼 수 없었던 새로운 UI와 디바이스에 상관없이 동일한 UI와 컨텐츠를 제공하는 것에 대하여 긍정적인 평가를 확인 할 수 있었으며 기존 사이트 보다 컨텐츠 접근이 용이함과 다양한 화면에서도 유용한 화면 레이아웃과 UI에 호응을 얻을 수 있었다.
이러한 결과를 바탕으로 반응형 웹에 Metro UI를 적용한 사이트를 프레임워크를 통해 쉽고 편리하게 구축할 수 있을 것으로 예상되며, 구축된 사이트 또한 사용자들로부터 긍정적인 평가를 받을 것으로 기대된다. 다만, Active X 의존도가 큰 우리나라 웹 환경에서 동일한 컨텐츠를 제공할 수 없는 만큼 대체되는 컨텐츠를 표현할 수 있는 기능이 추가될 필요가 있다.

목차 (Table of Contents)

• 목 차
• 1. 서 론 1
• 1.1. 연구의 배경 및 목적 1
• 1.2. 연구의 방법 및 범위 2
• 2. 이론적 배경 3
• 2.1. 웹 프레임워크 3
• 2.2. 반응형 웹 4
• 2.2.1. 그리드 형식 5
• 2.2.2. 시스템 폰트의 사용 6
• 2.2.3. 세로스크롤의 중요 6
• 2.2.4. 모듈성의 인터페이스 구조 6
• 2.3. Metro UI 7
• 3. 제안 프레임 워크 9
• 3.1. 프레임 워크 구성 요소 9
• 3.1.1. CSS (Cascading Style Sheets) 9
• 3.1.2. JS(Javascript) 10
• 3.1.3. Images 10
• 3.1.4. Photo 10
• 3.2. 프레임 워크 구현 방법 11
• 3.2.1. metro.css 11
• 3.2.2. site.css 14
• 3.2.3. accordion.js 16
• 3.2.4. tile-slider.js 17
• 4. 구현 및 검증 18
• 4.1. 구현 18
• 4.1.1. 메인페이지 19
• 4.1.2. 서브 페이지 22
• 4.2. 검증 24
• 4.2.1. 검증 방법 24
• 4.2.2. 검증 결과 26
• 5. 결 론 28
• 5.1. 학술적 의의 28
• 5.2. 실무적 의의 29
• 5.3. 연구 한계점 30
• 6. 참고문헌 31
• 7. ABSTRACT 33