최근 웹 제작 추세로 모바일 우선 방식이 강조되면서 모바일 단말의 유형이나 화면 크기, 해상도가 다양해짐에 따라 이에 대응하여 웹 사이트 제작 시 효율적인 제작 방법을 제공하는 반응형 웹에 대한 실제적인 필요성이 증가하고 있다. 그러나 공간정보 웹 매핑 분야에서 반응형 웹의 적용은 초기 단계이다. 이번 연구에서는 반응형 웹을 이용하여 실제 공간정보 오픈 플랫폼과 연계한 가변 레이아웃에 대한 실제 시험 구현을 수행하고 그 결과를 예시하였다. 또한 공간정보 웹 서비스 구축에서 반응형 웹 방법을 적용하기 위한 제한 사항과 고려 사항을 제시하고자 하였다. 시험 구현 과정에서는 HTML5, JavaScript, CSS3 등과 같은 개발 환경을 OpenLayers와 연계하는 웹매핑 서비스를 대상으로 하였다. 앞으로 공간정보나 위치정보 등으로부터 파생되는 콘텐츠의 모바일 서비스 개발에서도 반응형 웹을 이용한 연계, 적용 사례가 증가할 것으로 기대한다.
최근 웹 제작 추세로 모바일 우선 방식이 강조되면서 모바일 단말의 유형이나 화면 크기, 해상도가 다양해짐에 따라 이에 대응하여 웹 사이트 제작 시 효율적인 제작 방법을 제공하는 반응형 웹에 대한 실제적인 필요성이 증가하고 있다. 그러나 공간정보 웹 매핑 분야에서 반응형 웹의 적용은 초기 단계이다. 이번 연구에서는 반응형 웹을 이용하여 실제 공간정보 오픈 플랫폼과 연계한 가변 레이아웃에 대한 실제 시험 구현을 수행하고 그 결과를 예시하였다. 또한 공간정보 웹 서비스 구축에서 반응형 웹 방법을 적용하기 위한 제한 사항과 고려 사항을 제시하고자 하였다. 시험 구현 과정에서는 HTML5, JavaScript, CSS3 등과 같은 개발 환경을 OpenLayers와 연계하는 웹매핑 서비스를 대상으로 하였다. 앞으로 공간정보나 위치정보 등으로부터 파생되는 콘텐츠의 모바일 서비스 개발에서도 반응형 웹을 이용한 연계, 적용 사례가 증가할 것으로 기대한다.
As a recent dominant web trend, mobile first strategy has been emphasized, and interests with respect to responsive web that provides effective methodology to various mobile devices and their display resolution are also increasing. However, it is an early adoption stage in web mapping for geo-spatia...
As a recent dominant web trend, mobile first strategy has been emphasized, and interests with respect to responsive web that provides effective methodology to various mobile devices and their display resolution are also increasing. However, it is an early adoption stage in web mapping for geo-spatial applications. This study is to present some practical examples of layouts using responsive web technologies linked to geo-spatial open platform. Suggestive consideration points for further application of responsive web to geo-spatial services are presented. On test implementing, HTML5, JavaScript, and CSS3 were used, and web mapping processing using OpenLayers was performed. It is expected that responsive web applications for contents derived from geo-spatial information or location data increase.
As a recent dominant web trend, mobile first strategy has been emphasized, and interests with respect to responsive web that provides effective methodology to various mobile devices and their display resolution are also increasing. However, it is an early adoption stage in web mapping for geo-spatial applications. This study is to present some practical examples of layouts using responsive web technologies linked to geo-spatial open platform. Suggestive consideration points for further application of responsive web to geo-spatial services are presented. On test implementing, HTML5, JavaScript, and CSS3 were used, and web mapping processing using OpenLayers was performed. It is expected that responsive web applications for contents derived from geo-spatial information or location data increase.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
이번 연구에서는 우선 단말 플랫폼의 사용 현황과 다양한 해상도의 활용 현황 분석을 통하여 일반적인 반응형 웹의 필요성을 제시하고자 하며 반응형 웹의 구성 요소에 대한 정리한 뒤, 공간정보 웹 서비스에 대한 적용성을 제시하고자 하였다.
제안 방법
기본화면을 제외한 width가 768px이상 1360px 이하인 태블릿 기기에서 쓰이는 범위, width가 768px 이하인 스마트폰에서 쓰이는 범위로 나누어져 있다. 각각의 width 범위에 따라 미리 선정한 레이아웃을 표현하기 위해 nav, article, aside의 float, width, height의 비율을 조정한다. 그림 4(b)는 jQuery, CSS3, OpenLayers 등과 연계하는 HTML 소스의 헤드(head) 선언 부분이다.
세 구간 이상으로 세부 분할을 하여 많은 스타일을 적용할 경우 웹 페이지의 로딩 속도가 느려지게 되기 때문에 일반적으로 반응형 웹 디자인은 최하 2개에서 최대 4개의 정도의 구간을 설정한다. 반응형 웹의 5가지 유형 중 3가지를 이용하여 HTML5를 기반으로 JavaScript, CSS3를 사용한 공간정보 웹 페이지를 구현하고 예시하고자 하였다.
com 사이트에서 내려 받은 2014년 5월부터 2015년 5월까지의 관련 자료를 정리하여 나타낸 것이다. 이 사이트는 전 세계 사용자를 대상으로 데스크톱, 스마트폰, 태블릿 기기와 콘솔 플랫폼에서 브라우저, 화면 해상도, 운영체제, 검색 엔진 등의 사용 통계를 제공한다.
이번 연구에서는 이러한 반응형 웹을 이용하여 실제 공간정보 오픈 플랫폼과 연계한 가변 레이아웃에 대한 실제 시험 구현을 수행하였다. 구현 과정에서는 HTML5, JavaScript, CSS3 등과 같은 개발 환경을 OpenLayers와 연계하는 웹 매핑 서비스를 대상으로 하였다.
대상 데이터
이번 연구에서는 이러한 반응형 웹을 이용하여 실제 공간정보 오픈 플랫폼과 연계한 가변 레이아웃에 대한 실제 시험 구현을 수행하였다. 구현 과정에서는 HTML5, JavaScript, CSS3 등과 같은 개발 환경을 OpenLayers와 연계하는 웹 매핑 서비스를 대상으로 하였다.
미디어 쿼리의 속성으로 가로 해상도의 분기점을 적용하였다. 외부 데이터로 OpenStreetMap과 공간정보 오픈 플랫폼 VWorld에서 각각 2D 지도 및 데이터를 사용하였고, 공간데이터 시각화에 필요한 매핑 도구로 OpenLayers 3.3을 사용하였다.
반응형 웹을 구현하기 위해 미디어 쿼리 속성인 가로 해상도를 사용하였기 때문에 장치별로 가로 해상도 값 구간을 설정할 필요가 있다. 이번 연구에서는 장치의 가로 해상도 값을 768px과 1360px의 두 가지의 분기 값에 의한 세 구간을 대상으로 한다. 스마트폰에서 사용하게 될 768px 이하의 범위와 태블릿 기기 혹은 소형 모니터 등에 적용되는 768px 이상 1360px 이하의 범위, 데스크톱에서 사용되는 대형 모니터에 적용되는 1360px 이상의 범위에 대응한다.
후속연구
하지만 모바일 단말 유형이나 해상도 등 미디어 쿼리 속성을 정할 수 있는 여러 가지 값들이 많아지면서 각 속성별로 이에 대응하는 정확한 기준점이 나와 있지 않은 상태이다. 계속적으로 많은 모바일 단말기기가 출시가 되어도 여러 가지 값을 이용하는 속성의 기준이 확실히 정해진다면 공간정보를 포함한 많은 콘텐츠에서 미디어 쿼리를 이용한 반응형 웹의 활용도가 높아질 것이다.
또한 반응형 웹의 단점을 보완하면서 적응형 웹의 장점을 공간정보 웹 분야에 적용할 수 있는 융합형 웹에 대한 기술 개발이나 시험 구현을 통한 실험 연구도 향후 중요한 연구주제가 될 수 있다.
이번 연구를 바탕으로 앞에서 나왔던 5가지의 가변 레이아웃 이외에도 이용 목적에 따른 공간정보 콘텐츠의 특성을 살릴 수 있는 추가적인 레이아웃과 이를 활용 할 수 있는 기본적인 반응형 웹 적용 지침이 마련된다면 공간정보 콘텐츠의 모바일 서비스 개발이 보다 체계적으로 이루어 질 수 있을 뿐만 아니라 이를 활용한 많은 공간정보 응용 콘텐츠들이 나올 것으로 기대한다.
질의응답
핵심어
질문
논문에서 추출한 답변
‘모바일 우선(Mobile First)’이라는 표현이 의미하는 바는 무엇인가?
Wroblewski(2011)은 ‘모바일 우선(Mobile First)’이라는 표현으로 이를 예측한 바 있으며 모바일 서비스 디자인에 대한 중요성을 강조한 바 있다. 이는 웹 사이트 제작 시 모바일 서비스를 제공하는 모바일 환경을 우선하여 고려해야 한다는 것이다. 모바일 환경은 스마트폰, 태블릿 기기 등과 같이 휴대성이 강조된 단말 환경을 의미하고, 결국 모바일 서비스란 다양한 단말에 대응하는 웹 사이트 제작이나 서비스 구축을 나타내는 것이라고 할 수 있다.
미디어 쿼리의 속성은 어떤 항목들로 이루어지는가?
첫 번째는 적용하려는 스타일들을 단말기기의 해상도에 맞게 전환하도록 하는 미디어 쿼리이다. 미디어 쿼리의 속성은 가로 해상도와 세로 해상도(width, height), 기기의 가로 값과 세로 값(device-width, device -height), 색상 비트 수와 색상 색인 수(color, color-index), 기기의 방향(orientation), 화면해상도와 종횡비(resolution, aspect ratio), 기기 종횡비(device-aspect-ratio)와 그리드와 비트맵 설정(grid) 등과 같은 여러 가지 항목으로 이루어져 있다. 미디어 쿼리 경우 여러 가지 속성으로 사용자 단말기기 상태를 확인하여 웹페이지를 제공한다.
반응형 웹 디자인의 중요한 특징 및 장점은 무엇인가?
반응형 웹 디자인은 기본적으로 하나의 HTML(Hyper Text Markup Language) 소스를 다양한 단말에 대응하도록 구현할 수 있다는 점과 다양한 화면 크기에 반응하여 웹 사이트의 사용자 인터페이스가 전환된다는 점이 중요한 특징 및 장점이다. 즉, 데스크톱, 태블릿, 스마트폰 등과 같이 다양한 화면 해상도를 갖는 단말 화면에서 웹 페이지가 해상도에 따라 자동으로 최적화되도록 하는 것이다.
참고문헌 (16)
Baturay, M.H. and M. Birtane. 2013. Responsive web design: a new type of design for web-based instructional content. Procedia-Social and Behavior Sciences 106:2275-2279.
Frain, B. 2012. Responsive Web Design with HTML5 and CSS3. Packt Publishing 305pp.
Gratier, T., P. Spencer and E. Hazzard, 2015. OpenLayers 3 Beginner's Guide, Packt Publishing 488pp.
Gustafson, A. 2011. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Easy Readers, LLC., 144 pp.
Han, J.G. and Y.K. Yeon. 2014. Development of multi-platform GEOscience information system(MGEO) based on responsive web. Journal of the Geological Society of Korea 50(4):551-564 (한종규, 연영광. 2014. 반응형 웹기반 멀티플랫폼 지질정보시스템(MGEO) 개발. 지질학회지 50(4):551-564).
Jeong, J.D., H.S. Sagong, J.-Y. Lee, 2015. Inter-industry convergence strategies of geospatial information industry for overseas expansion. Journal of Korea Association of Geographic Information Studies 18(2):105-119 (정진도, 사공호상, 이재용. 2015. 공간정보산업 해외진출을위한 산업 간 융합 방안 연구. 한국지리정보학회지 18(2):105-119).
Kim, G.Y, S.M. Kim and E.R. Hyun, 2015. A study on the evaluation of the UI-based usability of different sorts of responsive web interfaces. Journal of Korea Design Knowledge 33:181-190 (김가연, 김수민, 현은령. 2015. 반응형 웹인터페이스 유형에 따른 UI기반 사용성 평가 연구. 디자인지식저널 33:181-190).
Kim, J.J., J.M. Park and S.K. Hong. 2014. A study on interface component for the realization of responsive Web. Korea Science and Art Forum 15:153-164 (김정진, 박종미, 홍석기. 2014. 반응형 웹 구현을 위한 인터페이스 구성 요소 연구. 한국과학예술포럼 15:153-164).
Kim, K.S. and K.W. Lee. 2014. A web application for open data visualization using R. Journal of Korea Association of Geographic Information Studies 17(2): 72-81 (김광섭, 이기원. 2014. R 이용 오픈데이터 시각화 웹 응용. 한국지리정보학회지 17(2):72-81).
Kim, S.H. and Y.K. Yoon. 2014. A study on minimalism in design for effectiveness of responsive web publishing. Journal of Korea Design Knowledge 30:211-220 (김성훈, 윤여경.2014. 반응형 웹 퍼블리싱 효율성을 위한디자인 미니멀리즘에 관한 연구. 디자인지식저널 30:211-220).
Lee, G.J. 2014. Why are your websites failed. Seminar on HTML5 Development Strategy with NAVER (이건준. 2014. 당신의 반응형 웹이 실패한 이유. 네이버와 함께 하는 HTML5 개발 전략 세미나).
Lee, G.S., K.J. Kim and H.J. Kim. 2013. Technology of location-based service for mobile tourism. Journal of Korea Association of Geographic Information Studies 16(3):1-11 (이근상, 김기정, 김형준. 2013. 모바일 관광을 위한 위치 기반서비스 기술. 한국지리정보학회지 16(3):1-11).
Marcotte, E. 2011. Responsive Web Design. A Book Apart Publisher, 150pp.
AI-Helper
※ AI-Helper는 부적절한 답변을 할 수 있습니다.