반응형 웹 디자인 레이아웃의 유형에 관한 연구

Abstract

웹 환경은 디바이스의 기술적인 발전과 사용자의 요구가 커짐에 따라 지속적으로 다양하게 변화되고 있으며 웹 기술의 발전과 활용은 IT 환경 전반은 물론 현대인의 일생 생활 속에서도 큰 영향을 끼치며 새로운 패러다임 변화를 만들고 있다. 이러한 흐름 속에서 스마트 폰이나 태블릿과 같은 모바일 디바이스들은 점점 영향력을 지속해서 확대하며 디지털 환경에서 핵심 기술로 자리를 잡아가고 있는데 다양한 스마트 디바이스 멀티 플랫폼 환경에서 일관성을 유지하고 사용자의 사용성과 접근성을 높이기 위한 콘텐츠 구현에 대한 필요성과 사용편의성 향상을 위해 반응형 웹이 등장하였다. 이에 본 연구는 다양한 스마트 디바이스에 최적화된 반응형 웹 디자인의 레이아웃에 대한 선행연구 및 이론적 고찰을 통해 연구의 필요성과 연구 방향을 정의하였고, 국·내외 사례들에 관한 동향분석과 연구 내용의 실제적 적용이라 할 수 있는 반응형 웹 디자인의 유형별 실험 모형을 제시하여 실증적 분석을 통한 심층적 연구로 이루어졌다. 웹 환경에서는 콘텐츠의 우선순위에 의하여 정보의 배열과 레이아웃이 달라질 수 있으며, 사용자의 시선의 흐름을 고려한 레이아웃이 중요하다고 할 수 있다. 레이아웃은 다양한 정보들을 효과적으로 전달할 수 있도록 배치하는 것을 의미하는데, 효과적으로 정보를 전달함은 물론이며 각각의 요소들의 조화로운 일관성 및 심미성을 유지하는데 그 목적이 있다. 또한 데스크 톱 PC 환경은 물론 모바일 디바이스 환경에서도 레이아웃이 차지하는 부분은 상당히 중요하다. 따라서 본 연구에서는 다양한 멀티디바이스 환경에 대한 이해, 반응형 웹에 대한 개념, 반응형 웹 레이아웃의 유형, 반응형 웹 레이아웃 유형별 장·단점 등에 대한 이론적 고찰을 통해 반응형 웹의 이해를 도모하였다. 또한 반응형 웹의 요소 중 레이아웃에 집중한 연구를 통하여 반응형 웹 레이아웃의 기본 요소를 도출하고 이 요소들을 반응형 웹 레이아웃에 대해 분석하는 기초 자료로 접목하였다. 사례 연구에서는 국·내외로 공신력 있는 어워드 행사기관에서 수상되었던 사이트들을 중심으로 선별하여 반응형 웹 레이아웃에 대한 적용 유형들을 분류하고 동향을 파악해 보았다. 그리고 사례 연구를 기초로 실제 반응형 웹 레이아웃의 유형들 중 어떠한 것이 사용자 입장에서 가장 편리하게 느껴지는지 알아보기 위해 각 유형에 맞는 웹 사이트 모형들을 제작하여 실험과 설문을 통해 반응형 웹 레이아웃에 대한 디자인적 요소의 사용성, 심미성, 가용성의 요인분석을 실시하였고, 선행연구 단계에서 도출된 각 반응형 웹 레이아웃들의 장·단점들도 실제로 사용자들에게 있어서 적용이 되고 있는지도 검증해 보았다. 본 연구는 제공자 측면이 아닌 사용자입장에서 사용편의성을 위한 선호되어지는 반응형 웹 레이아웃 유형 도출을 통해 실제 프로젝트에 적용할 수 있도록 디자인 연구자와 현 디자이너를 위한 웹 및 모바일 기획, 커뮤니케이션에 기여할 수 있을 것으로 보인다. 또한, 향후 반응형 웹의 레이아웃에 국한되어 있는 연구가 더 나아가 반응형 웹 디자인에 관련된 다양한 요소에 대한 심층적 연구를 통하여 하나의 웹 스타일 가이드로서 제시되고 체계화 및 표준화에 기여하길 기대한다.|Web environment undergoes constant change in many different ways amid technological development for devices and increasing requirements of users. The advancement and application of web technology have a significant impact on daily lives of contemporary people, giving rise to new paradigm shift. With such trend, mobile devices, such as smart-phone or tablet, have increasingly widening influence and extended their capabilities as core technologies in digital environment. Responsive Web has emerged to fulfill the need for creating contents that can increase usability and accessibility for users while maintaining consistency in various smart device multi-platform environment, along with the need to improve convenience of use. In this study, we identified the need for research and defined its direction based on preceding studies and theoretical consideration in connection with Responsive Web Design layout optimized for many different smart devices. We presented the experiment model by type of Responsive Web Design which would represent practical applications of the results of this in-depth study involving empirical analysis, along with analysis of trends based on related domestic and overseas cases. In the web environment, information arrangement and layout may vary, depending on the priority of contents. Layout that considers the flow of users' view is deemed important. Layout means arranging a variety of information in a way that ensures effective conveyance and aims to maintain harmonious consistency and aestheticity of each element. Layout plays a considerably important part in mobile device environment, as well as desktop PC environment. Thus, this study was intended to promote understanding of Responsive Web based on theoretical consideration with respect to various multi-device environments, concept of Responsive Web, type of Responsive Web Design layout, advantage and disadvantage of Responsive Web Design layout by type. In addition, we identified basic elements of Responsive Web Design layout by focusing on layout among the elements of Responsive Web, and applied those elements as basis for analyzing the Responsive Web Design layout. In the case study, we selected primarily the prize-winning sites of domestic and overseas reputable awards to classify applicable types of Responsive Web Design layout and keep a finger on the pulse of trends. Moreover, we built the web site models suited to each type and conducted factor analysis on usability, aestheticity, and availability of design elements incorporated into Responsive Web Design layout through experiment and survey in order to determine the type of practical Responsive Web design layout that users might feel the most convenient based on the case study. Besides, we validated that the advantages and disadvantages of each Responsive Web design layout, identified in the phase of preceding study, were actually applied to users. This study identified the type of Responsive Web Design layout preferred for convenience of use from the standpoint of users, not suppliers, so as to ensure application to real projects, thus contributing to promoting web/mobile planning and communication for both design researchers and current designers. This researcher hopes that in-depth study would be conducted to investigate various elements associated with Responsive Web Design by going beyond the layout of R esponsive Web, thus providing guidance on web styles and spurring both systemization and standardization.; Web environment undergoes constant change in many different ways amid technological development for devices and increasing requirements of users. The advancement and application of web technology have a significant impact on daily lives of contemporary people, giving rise to new paradigm shift. With such trend, mobile devices, such as smart-phone or tablet, have increasingly widening influence and extended their capabilities as core technologies in digital environment. Responsive Web has emerged to fulfill the need for creating contents that can increase usability and accessibility for users while maintaining consistency in various smart device multi-platform environment, along with the need to improve convenience of use. In this study, we identified the need for research and defined its direction based on preceding studies and theoretical consideration in connection with Responsive Web Design layout optimized for many different smart devices. We presented the experiment model by type of Responsive Web Design which would represent practical applications of the results of this in-depth study involving empirical analysis, along with analysis of trends based on related domestic and overseas cases. In the web environment, information arrangement and layout may vary, depending on the priority of contents. Layout that considers the flow of users' view is deemed important. Layout means arranging a variety of information in a way that ensures effective conveyance and aims to maintain harmonious consistency and aestheticity of each element. Layout plays a considerably important part in mobile device environment, as well as desktop PC environment. Thus, this study was intended to promote understanding of Responsive Web based on theoretical consideration with respect to various multi-device environments, concept of Responsive Web, type of Responsive Web Design layout, advantage and disadvantage of Responsive Web Design layout by type. In addition, we identified basic elements of Responsive Web Design layout by focusing on layout among the elements of Responsive Web, and applied those elements as basis for analyzing the Responsive Web Design layout. In the case study, we selected primarily the prize-winning sites of domestic and overseas reputable awards to classify applicable types of Responsive Web Design layout and keep a finger on the pulse of trends. Moreover, we built the web site models suited to each type and conducted factor analysis on usability, aestheticity, and availability of design elements incorporated into Responsive Web Design layout through experiment and survey in order to determine the type of practical Responsive Web design layout that users might feel the most convenient based on the case study. Besides, we validated that the advantages and disadvantages of each Responsive Web design layout, identified in the phase of preceding study, were actually applied to users. This study identified the type of Responsive Web Design layout preferred for convenience of use from the standpoint of users, not suppliers, so as to ensure application to real projects, thus contributing to promoting web/mobile planning and communication for both design researchers and current designers. This researcher hopes that in-depth study would be conducted to investigate various elements associated with Responsive Web Design by going beyond the layout of R esponsive Web, thus providing guidance on web styles and spurring both systemization and standardization.