53-09 모바일 환경변화에 적합한 웹사이트 개선방향에 관한 연구.hwp

모바일 환경변화에 적합한 웹사이트 개선방향에 관한 연구 - 전국대학 웹사이트를 중심으로 - A Study In Improving ptimal Websites For The Evolving Mobile Environment - Focused on College Websites in Korea - 신 승 훈 Shin, Seong-Hoon 서울예술대학교 디자인학부 부교수 School of Design, Seoul Institute of the Arts sshin@seoularts.ac.kr 투고일 2015.09.19 심사일 2015.09.24 게재확정일 2015.10.08

목 차 1. 서론 1.1. 연구의 필요성 2. 모바일 중심환경 2.1. 모바일 기기의 보급 2.2. 모바일 기기를 위한 요구 2.3. 표준화의 동향 3. 모바일 앱(Application) 4. 모바일 웹사이트 4.1. 모바일 웹사이트 기술요소 5. 본론 5.1. 반응형 웹디자인(Responsive Web Design) 5.2. 적응형 웹디자인(Adaptive Web Design) 5.3. 사례분석결과 6. 결론 참고문헌 Abstract Recent web design which is being modified to respond to changing screen sizes on mobile devices is receiving the spotlight. These web sites with modified web design are being optimized for mobile devices due to the rapid dissemination of smart phones and the advent of mobile environments. For many years, web standardization has been widely debated and recently, there is a consensus for an international agreement. The core of the change behind mobile environments is the increasing dissemination and availability of smart phones. With the advent of smart phones, new web site production technologies with developed subtleties have emerged optimizing existing mobile and desktop technologies. We will look at the pros and cons of adaptive web design which is correcting the shortcomings of responsive web design, a web site production technology currently in use. This study will propose guidelines for choosing the appropriate web site production techniques for the evolving and accelerating mobile web production field. Moreover, this study will report the current mobile site conditions of Korean educational institutions by researching the mobile-friendly web sites operated by 2, 3, 4 year colleges and universities. 논문요약 Keyword 반응형 웹디자인, 적응형 웹디자인, 모바일 웹사이트 Responsive web design, Adaptive web design, Mobile website 최근 국내에서는 모바일 환경의 도래와 스마트폰 의 급속한 보급으로 인한 모바일 기기에 최적화된 웹 사이트를 구현하기 위해 사용자의 화면크기에 반응하 도록 변형되는 웹디자인이 많은 각광을 받고 있다. 이 와 때를 같이하여 수년간 제기돼 온 웹 표준화에 관한 협의도 많은 진전을 보아 국제적인 합의도 이루어져가 고 있다. 무엇보다 모바일 환경변화의 핵심에는 세계 적으로 급속하게 진행되는 스마트폰의 보급이 그 중심 에 있다. 스마트폰의 등장에 따라 모바일과 기존의 데 스크톱 모두에서 최적화가 가능한 웹사이트제작기술이 등장하였으며 이를 구현하기 위한 세부요소들도 개발 되었다. 본 연구에서는 먼저 모바일용 웹사이트와 앱 이라 불리는 스마트폰용 애플리케이션과의 차이점과 그 특징에 따른 각 각의 역할을 구분하였다. 다음으로

현재 모바일 웹사이트제작방법을 대표하는 반응형 웹 사이트디자인의 단점을 보완할 수 있는 적응형 웹사이 트디자인의 특성과 장단점을 살펴보았다. 그 동안 반 응형 웹사이트디자인과 적응형 디자인은 기술적 차이 에도 불구하고 그 구분이 모호하였다. 이 같은 상황은 명확한 용어의 정의 없이 사용되었던 점에도 그 원인 이 있다. 본 연구는 앞으로 더욱 가속화될 모바일 웹 사이트제작 시에 웹사이트의 목적에 상응하는 제작방 법을 선택하는데 필요한 지침을 제시하고자 한다. 국 내 모바일사이트 현황을 살펴보기 위해 교육기관을 대 상으로 전국 2, 3, 4년제 대학 중 모바일 친화적으로 운영되고 있는 웹사이트의 실태를 조사하였다. 1. 서론 1.1. 연구의 필요성 많은 국가에서 인터넷 사용자의 대다수는 모바 일 기기를 사용한다. 예를 들어 인도에서는 모 바일 기기를 통해 웹 사이트에 접속하는 사용 자가 전체 접속자 수 중 55%에 달한다. 또한 이집트에서는 70%가량이 휴대전화를 통해서 만 웹에 접속한다. 전 세계 모바일 웹 사용자 수는 2014년에서 2015년 사이에 데스크톱 컴 퓨터 웹 사용자 수를 넘을 것으로 예상된다. 2011년에 스마트폰 판매량은 세계시장에서 27%를 차지했다. 2012년 말에는 10억 개의 스마트폰이 사용 중인 것으로 추산됐으며 2015년에는 그 수가 두 배로 증가할 것으로 보인다. 2012년 구글에서 조사한 바에 따르면 참가자 중 81%가 TV를 시청하면서 스마트폰 을 사용했고, 66%는 데스크톱을 사용하는 중 에 스마트폰을 사용하는 것으로 나타났다. 예 를 들어 해당 참가자들은 스마트폰으로 인터넷 쇼핑몰을 살펴본 후 상품을 구매할 때에는 데 스크톱으로 옮겨가 작업했다. 이처럼 기기를 이동해 연달아 다른 기기를 사용하여 수행하는 작업을 Subsequent screening라고 한다. 즉 사 용자는 두세 개의 기기로 사이트를 방문하며 매번 방문 목적이 약간씩 다를지라도 접속하고 자 하는 정보는 여전히 같다. 1) (Gasston, 2014a, pp.25-30) 이와 같은 사실에서 보듯 이 최근 몇 년간 전 세계는 스마트폰 중심의 모바일 기기의 급속한 확산으로 인한 웹사이트 1) The Modern Web. 에이콘출판. 제작방식에 있어서 큰 변화가 일어나고 있다. 본 연구에서는 최근의 온라인 환경변화에 따른 기술적 대응을 살펴보고 데스크톱에서부터 스 마트폰에 이르기까지 다양한 모바일 기기화면 에 대응하여 변형되는 반응형 웹사이트디자인 과 국내에서는 이에 비해 주목받지 못하고 있 는 적응형 웹사이트디자인의 특징들을 비교하 여 모바일 웹사이트제작 시에 필요한 지침을 제시하고자 한다. 더불어 앱(App)이라 불리는 모바일 애플리케이션의 역할도 살펴보았다. 2. 모바일 중심환경 2.1. 모바일 기기의 보급 [Table 1] Worldwide Smartphone Forecast by S, Shipments, Market Share(units in millions) 2015 2019 Region Market Market Volumes Growth Volumes Share Share Android 1,149.3 79.4% 8.5% 1,524.1 79.0% is 237.0 16.4% 23.0% 274.5 14.2% Windows 46.8 3.2% 34.1% 103.5 5.4% thers 14.2 1.0% 3.9% 26.3 1.4% TTAL 1,447.3 100.0% 11.3% 1,928.4 100.0% 최근 International Data Corporation(IDC) 2) ( http://www.idc.com, 2015)의 통계를 보면, 전 세계 스마트폰 판매량은 2015년 대비 2019년까지 계속 증가할 것으로 전망했는데 그 수치는 표1과 같다. 스마트폰의 판매는 2014년에 27.6% 증가한 이후 2015년에도 11.3% 증가할 것으로 예상되며 이후에도 스마 트폰 판매는 전 세계적으로 매년 증가하여 2019년에는 연19억대가 판매될 것으로 예측되 었다. 또한 2014년 1분기에 비하여 2분기는 모바일 폰의 화면크기가 4.0인치 이상인 부문 에서 모두 증가하였으며 그 중에서 6인치이상 의 부문이 가장 빠르게 증가하고 있다.(표2) 스마트폰의 디스플레이 화면해상도가 높아지면 서 멀티미디어를 표현하는 기능의 향상됨에 따 라 2014년도 2분기에는 1136x640 픽셀이 가 장 보편적인 것으로 나타났다.(표3) 2) http://www.idc.com/getdoc.jsp?containerid=prus25641615

[Table 2] Proportion of Top 100 device traffic, by physical screen size Size(inches) Q1 2014 Q2 2014 under 3.0 2% 1% 3.4 3.9 30% 26% 4.0 4.49 36% 39% 4.5 4.9 15% 17% 5.0 5.9 16% 17% 6.0 over 0.1% 0.3% 최근 스마트폰과 태블릿과 같은 모바일 미디어 의 성장으로 사용자의 인터넷 접근방법의 다양 화에 따라 인터넷 서비스도 변화된 환경에 맞 추어 모바일 미디어 중심으로 급격이 변화하고 있으며 다양한 모바일 디바이스에서도 데스크 톱과 같은 일관된 경험을 위한 사용자 인터페 이스의 통합이 시도되고 있다. 특히 포탈, 검 [Table 3] Screen dimensions as proportion of mobile phone traffic, Q1 2014 vs. Q2 2014 Resolution(pixels) Q1 2014 Q2 2014 1136 x 640 17% 20% 1920 x 1080 14% 18% 960 x 640 19% 16% 1280 x 720 13% 14% 800 x 480 15% 13% 960 x 540 4% 5% 480 x 320 7% 5% 색사이트 뿐 만 아니라 트위터, 페이스북 등의 소셜 네트워크 서비스(SNS)부문에서 모바일 디바이스로의 급격한 이동이 감지되고 있다. 3) (김정진 등 2014, p.156) 특기할 점은 스마트 폰이 보급된 이후 포털섹션 중 뉴스미디어, 커 뮤니케이션, 생활섹션 등의 이용자는 증가한 반면, 커뮤니티, 모바일, 게임섹션 등은 이용이 감소하였다. 이는 스마트폰에서는 SNS, App과 같이 커뮤니티 서비스에 특화된 전용 애플리케 이션이 다수 제공되기 때문으로 판단된다. 4) (김위근, 2013, pp.130-131) 2.2. 모바일 기기를 위한 요구 데스크톱을 전제로 제작된 웹 사이트의 대부분 은 모바일 기기에서 사용할 경우 주로 다음의 3) 반응형 웹 구현을 위한 인터페이스 구성 요소 연구. 한국과학 예술포럼. 4) 스마트폰 도입이 포털사이트 이용에 미친 영향. 한국언론정보 학보. 문제 및 과제가 발생한다. 1) 비교적 통신 속도가 느린 네트워크를 이용 하므로 페이지 로딩에 시간이 소요된다. 2) 스마트폰 화면 크기는 4.0인치 전후이므로 페이지를 조회하기 불편하다. 3) 웹사이트에는 동적인 콘텐츠(Adobe Flash 등)와 인터액티브 콘텐츠가 이용되어 있으나, 이것 중 일부는 스마트폰이나 태블릿에서는 제 대로 동작하지 않아 의도한대로 반응을 하지 않거나 표시되지 않는다. 4) 데스크톱사이트는 마우스 조작을 전제로 디자인되어 있으므로 터치 디바이스(손가락으 로 조작하는 디바이스)인 스마트폰이나 태블릿 에서는 조작이 어려운 인터페이스이다. 5) (야마 자키 다이스케, 2013a, pp.5-6) 그러므로 모바일 기기는 데스크톱에는 없는 멀 티 터치나 화면의 회전, 위치 정보의 취득 등 의 이벤트나 기능이 많이 탑재되어 있어 인터 액티브 표현이 가능하다. 이러한 이벤트나 기 능을 충분히 살려서 사이트를 제작할 때 모바 일 기기를 염두에 두고 사이트를 기획, 설계하 는 것이 효과적이다. 반면에 모바일 기기에서 접속이 거의 없는 사이트는 데스크톱에 최적화 하는 것이 바람직하다. 즉, 어떤 디바이스를 대상으로 하는가에 따라서 제작해야 할 사이트 디자인이 바뀐다는 점이 중요하다. 6) (야마자키 다이스케, 2013b, pp.81-82) 2.3. 표준화의 동향 1990년에 등장한 Netscape, Internet Explore 등 각 웹 브라우저제작사들 간의 치열한 시장 점유율 경쟁 속에서 각 회사는 자사의 사용자 들을 확보하기 위해 비표준 태그를 남용하였 다. 이로 인해 각 인터넷브라우저에서 웹페이 지가 저마다 다르게 실행되는 문제점들이 발생 하면서 인터넷이용자 및 웹사이트 개발자 양측 모두가 불편을 겪게 된 것이다. 더욱이 모바일 기기가 급부상 하면서 다양한 웹 브라우저들은 고유 plug-in이 사용된 웹페이지를 정상적으 로 이용할 수 없어 사용자 불편이 급증하였다. 이에 비표준 태그 및 Plug-in이 야기하는 웹 생태계의 문제점을 해결하고자 HTML5가 웹 5) 반응형 웹 디자인. 비제이퍼블릭. 6) 반응형 웹 디자인. 비제이퍼블릭.

표준으로 등장하였다. 웹 표준을 지킨 문서는 검색엔진이 검색할 때 유리하다는 점, 내용과 디자인이 분리되기 때문에 개발 시간이 단축되 는 점 등 장점이 많다. 애플과 모질라, 오페라, 구글 등 주요 브라우 저 업체들은 웹 표준 제정에 대해 필요성을 강 조하며 XHTML이라는 새로운 표준을 만들기 보다 페이지의 기본 기능인 HTML을 확장하 여 동적인 웹 서비스를 구현하자는 데 의견을 같이하였다. 이에 국제표준화기구인 W3C 7) 도 결국 2007년 공식적으로 HTML 워킹그룹을 발족, 웹 애플리케이션 1.0 을 HTML5 로 부르 게 된다. HTML5는 2010년 2월에 실용초안으 로 발표되어 조만간 표준화될 것으로 보이나 아직 완성되지 않았다. 하지만, 이미 많은 부 분이 마이크로소프트의 익스플로러9, 크롬, 애 플 사파리, 모질라, 파이어폭스 그리고 오페라 등에서 HTML5을 표준초안으로 채택하였다. HTML5의 특징으로는 플래시나 ActiveX 같은 플러그인 없이 인터랙티브한 사이트를 만들 수 있으며 애플리케이션 구축을 용이하게 하는 다 양한 폼 기능과 UI 컨트롤, 플러그인이 필요 없는 네이티브 비디오도 포함한다. 우리나라는 모바일 웹의 장애인 접근성을 보장하기 위한 검사항목이 추가된 2015년 3월 개정된 한국 형 웹 콘텐츠 접근성 지침 2.1 을 법률로 제정 하였으며 모든 웹사이트제작은 웹 접근성을 준 수해야 한다. 3. 모바일 앱(Application) 앱(App)은 브라우저에서 보이는 웹사이트와는 다르게 스마트폰에 다운로드받아 설치되는 프 로그램이다. 즉, 일반적으로 애플스토어나 안 드로이드 마켓에서 검색하여 다운받아 설치하 게 된다. 설치된 앱은 인터넷을 통하여 콘텐츠 나 데이터를 보여주므로 웹사이트와 유사하게 보이지만 인터넷망과는 관계없이 콘텐츠를 다 운로드해서 보여주기도 한다. 애플리케이션 시 장은 크게 애플의 is와 안드로이드S의 두 구도이다. is는 애플에서 만들어진 기기에만 적용된 운영체제로 폐쇄적인 반면, 안드로이드 7) World Wide Web Consortium. 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 팀 버너스 리를 중심으로 1994 년 10월에 설립되었다. 는 is와 달리 공개된 운영체제로 개방성을 가졌다. 앱들은 앱스토어를 통해서만 배포가 되고 디바이스 종류에 따라 각기 별도의 앱을 만들어야하기 때문에 개발 기간이나 비용이 추 가로 발생하는 단점이 있다. 즉 애플의 is용 과 안드로이드용을 각각 만들어야 하고 경우에 따라서는 동일한 S에서도 다른 버전에 따라 추가적인 작업을 해야 하는 번거로움이 있 다. 8) (이충영, 2012, pp.27-28.) 다음은 모바 일 애플리케이션의 몇 가지 유형들 이다. 네이티브 앱 : S X, is, 윈도우, 안드로 이드 같은 특정 플랫폼에 종속적이며 HTML 을 이용하지 않고 모바일 S별, 각각 다른 방 식으로 개발된 애플리케이션 웹 앱 : HTML5를 이용하여 한 번의 제작 으로 is뿐만 아니라 안드로이드 S에서도 똑 같이 실행할 수 있는 애플리케이션 하이브리드 앱 : 표준 웹 기술과 네이티브 앱 기술을 혼용하여 만든 애플리케이션 애플리케이션 방식은 소형컴퓨터에 해당하는 스마트폰에 응용프로그램을 다운로드 받아 설 치하므로 웹 방식에 비해 상대적으로 구동속도 가 빠르며 맞춤형 인터페이스를 제공할 수 있 는 장점이 있다. 일반적으로 앱의 개발 이유는 브라우저상에서 효율적으로 구동할 수 없는 특정한 목적을 달 성하기 위한 것으로 볼 수 있다. 특히 네이티 브 앱은 단골고객과 기존고객들에게 모바일 전 용서비스를 제공할 수 있는 장점이 있는 반면 폐쇄적인 환경에서 작동하므로 검색엔진에서 검색되지 않기 때문에 모바일 앱으로 방문자들 을 유도할 방법도 강구해야한다. 일례로 인터 액티브 게임을 개발한다면 앱의 형태가 가장 적절할 것이지만 대중을 상대하는 포탈과 같이 모바일에서 접근성을 높이려면 모바일 웹사이 트 방식이 적절하다. 이 같은 맥락에서 현재 국내의 행정기관들은 이미 모바일 공공서비스 부문에서 애플리케이션 방식대신에 웹 방식을 표준으로 채택했으며 모바일 웹의 KS표준을 준비하고 있다. 이는 특정 플랫폼에 제한받지 않는 모바일 웹의 접근성이 공공을 대상으로 한 서비스에 적합하다고 평가되었기 때문이라 8) 차세대 웹 표준 HTML5 연구. 애니메이션연구.

할 수 있다. 9) (남재우, 2010, pp.157-159) 4. 모바일 웹사이트 2013년 미국 67% 의 구매자들은 데스크톱 이 외의 기기에 최적화되지 않은 웹사이트에서 보 다는 모바일에 최적화된 웹사이트에서 구매하 는 일이 많다고 응답했다. 10) (Honigman, 2014) 모바일 웹사이트는 다른 웹사이트(데스 크톱 용)처럼 HTML 을 기본으로 하는 브라 우저용 사이트와 흡사하며 인터넷망(3G, 4G, wi-fi)으로 접속한다. 모바일 웹사이트가 일반 사이트와 다른 가장 큰 차이점은 스마트폰과 같이 작은 화면에 적당하도록 디자인되었다는 점이다. 그리고 일반 웹사이트와 동일하게 텍 스트, 이미지, 영상을 보여주는 한편 모바일의 기능인 전화걸기, 위치기반 지도기능도 추가되 어 있다. 최근 개발커뮤니티의 전문가들 사이 에서 웹 사이트 구축의 가장 인기 있는 두 가 지 방법은 적응형 웹사이트디자인과 반응형 웹 사이트디자인이다. 적응형 디자인은 고정 그리 드로 기기마다 최적화된 레이아웃을 제공하며 이에 반해 반응형 디자인은 동적인 그리드, 이 미지, 타이포그래피 처리를 특징으로 한다. 4.1. 모바일 웹사이트 기술요소 [Table 4] Break Point URL //adobe-html5.jp //www.microsoft. com/ko-kr/defaul t.aspx web site Adobe HTML5 Microsoft break point screen size column 520px 0 520px 1 920px 521 920px 2 921px more 3 540px 0 540px 1 680px 541 680px 2 900px 681 900px 2 901px more 3 반응형 웹사이트를 구축할 때 매우 유용한 두 가지 체계는 모바일 우선(Mobile First)과 분 기점이다. 먼저, 모바일 우선의 방법론은 앞서 언급한 대로 작은 기기를 우선대상으로 삼는 다. 그런 다음 복잡한 레이어를 추가해 큰 기 9) 도서관 모바일 웹사이트의 콘텐츠 구성에 관한 연구. 정보관 리학회지. 10) http://thenextweb.com/dd/2014/02/08/decide-responsivewebsite-native-mobile-app/ 기까지 수용할 수 있도록 한다는 것이다. 모바 일 우선(Mobile First)은 본질적으로 작은 기 기에 필요한 최소한의 레이아웃 규칙뿐만 아니 라 색상, 타이포그래피 등과 같이 모든 기기에 제공되는 스타일 작업도 여기에서부터 시작된 다는 점을 의미한다. 11) (Gasston, 2014b, p.105) 다음 단계는 미디어 쿼리(Media Queries)를 더하여 새로운 규칙을 추가하는 것 이다. 즉 분기점을 지정하여 최적화하려는 기 기에 따라 레이아웃이 변형될 수 있도록 한다. 1) 모바일 우선(Mobile First) Luke Wroblewski는 자신의 블로그 12) (2011) 에서 Mobile First 에 대하여 다음과 같은 다 섯 가지 요소를 강조하였다. Ÿ 사용자가 모바일 단말기를 어떻게 그리고 왜 사용하는가를 고려해 설계할 것 Ÿ 내비게이션보다도 콘텐츠를 중시할 것 Ÿ 탐색, 서핑하기 용이한 정보를 제공할 것 Ÿ 명료하게 초점을 확실하게 할 것 Ÿ 모바일의 행동양식에 입각해 설계할 것 다양한 기기에 대응하도록 웹사이트를 제작할 때는 표시영역이 좁고 게재 가능한 콘텐츠의 제한이 있는 스마트폰용 사이트를 가장 먼저 설계하는 것이 효율적이다. 대부분의 경우 스 마트폰 사이트는 1칼럼 레이아웃으로 되어있 고, 이 경우 기본적으로 콘텐츠를 위에서 순차 적으로 게재하도록 되어 있으므로 위쪽에서부 터 [헤더] > [글로벌 내비게이션] > [메인 콘텐츠] > [서브 콘텐츠] > [푸터]의 순서가 되는 경우가 많다. 또한 필요한 콘텐츠를 가장 작은 스마트폰부터 생각함으로써 중요도가 높 은 콘텐츠와 정보의 순서를 명확히 할 수 있게 된다. 그러므로 Mobile First에서는 사용자에 게 필요한 정보만을 최대한 선별하라고 제안하 고 있다. 콘텐츠의 제한된 선택은 모바일 디바 이스에 따른 가독성의 향상뿐만이 아니라 데스 크톱에서의 편리성의 향상으로 이어지기 때문 에 결과적으로 사용자 만족도를 높일 수 있다. 2) 분기점(Break point) 분기점이란 반응형 혹은 기능형 웹디자인을 표시할 레이아웃을 전환하는 화면 크기 를 말 하며 미디어 쿼리를 사용해 윈도우크기에 따라 11) The Modern Web. 에이콘출판. 12) http://alistapart.com/article/organizing-mobile

페이지의 레이아웃을 전환한다. 미디어 쿼리는 CSS3모듈 중 하나로 접속기기에 따라 특정한 CSS스타일을 사용하도록 해주는 기능이다. 미 디어 쿼리에서 사용하는 조건은 주로 화면의 크기와 관련된 조건들이다. 화면의 크기를 탐 지하여 그 크기에 따라 다른 CSS가 적용되도 록 한다. 표4 13) (야마자키 다이스케, 2013c, pp.122-123)에서 보는 바와 같이 어떤 화면 크기 이하에서 스마트폰 대상의 레이아웃을 표 시할 것이며 어떤 화면 크기 이하에서 태블릿 대상의 레이아웃을 표시하는가를 결정한다. 즉 최적의 분기점은 사이트의 디자인, 레이아웃, 정보량 등에 따라 달라진다. 여기에 더하여 기 기에 대한 분기점과 동시에 콘텐츠에 대한 분 기점 설정을 고려해야 한다. 즉 태블릿에서 콘텐츠의 너비는 얼마나 되어야 하는가? 를 생 각하기보다 콘텐츠 읽기가 가능한 콘텐츠 너 비의 한계는 얼마인가? 가 우선이다. 다수의 연구에 의하면 한 줄의 텍스트 내 최대 문자수 가 45개에서 75개 사이일 때 최적의 가독성을 보이며, 그중 66개가 가장 이상적인 것으로 나 타났다. 14) (Gasston, 2014c, p.107) 3) CSS3 CSS3는 다양하면서도 유연한 레이아웃에 특화 된 새로운 속성을 갖추게 되었다. 첫째로 CSS3는 다른 소스로 부터 폰트를 사용하거나, 둥근 모서리 효과나, 텍스트나 박스에 그림자 표현 등이 가능해져서 기존에는 편법적인 방식 으로 구현했던 효과들이 가능해졌다. 둘째, 다 양한 종류의 선택자(Selector)가 추가됨으로써 문서에 더 쉽게 스타일을 적용하고 2 3차원 전환(Transition) 효과와 전환 애니메이션 같 은 더욱 동적인 효과가 가능하다. 하지만 이렇 게 새롭게 선보인 시각적 효과보다는 CSS3의 진정한 혁신은 브라우저의 크기나 특성에 따라 브라우저에 스타일을 적용할 수 있도록 하는 미디어 쿼리를 통해서 이루어진다. 즉, 미디어 쿼리에 의하여 반응형과 적응형 웹사이트 구축 에 유용한 다양한 종류의 스타일속성 및 레이 아웃과 관련된 문제들을 해결해준다. 즉 사용 자 기기의 특성에 맞게 최적화된 레이아웃을 구성한다. 13) 반응형 웹 디자인. 비제이퍼블릭. 14) The Modern Web. 에이콘출판. 4) 미디어 쿼리(Media Queries) 미디어 쿼리는 사실 새로운 기술이 아니다. 이 미 오래 전에 미디어타입(Media Type)이라는 이름으로 선을 보인 적이 있는데, 미디어타입 은 말 그대로 미디어의 종류만 감지하기 때문 에 기기의 세부적인 사항들은 감지할 수가 없 었다. 또한 예전에는 기기의 종류가 다양하지 않아 필요성이 높지 않은 이유로 거의 사용하 지 않았던 기술이었으나 CSS3가 등장하면서 이 미디어타입 기술은 Media Queries 라는 이 름으로 바뀌었고 기기의 종류뿐만 아니라 해상 도, 비트 수, 가로, 세로 여부 등 세밀한 부분 까지 감지할 수 있는 기술이 탑재되면서 반응 형 웹의 시작과 함께 웹 개발의 새로운 지평을 열고 있다. 미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타 일을 전환할 수 있는 CSS3의 속성 중 하나이 다. 15) (김운아, 2014, p.74) 여기서 두 가지 크 기를 함께 고려해야 한다. 첫째는 기기 자체의 크기이고, 둘째는 해당 기기에 있는 뷰포트 크 기다.(대부분의 경우 뷰포트는 웹 브라우저이 나 앱 윈도우가 될 수도 있다) 5) 뷰포트(Viewport) 설정 실제 웹 문서 내용이 화면에 보이는 영역을 뷰포트 라고 하는데, 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있다. 스마 트폰용으로 웹 페이지 너비를 320px로 맞춰 웹사이트를 제작하더라도, 스마트폰의 모바일 브라우저의 기본 뷰포트 너비가 980px이기 때 문에 웹 페이지 너비를 무조건 980px로 표시 하려고 한다. 결국 스마트폰용으로 제작한 웹 페이지의 내용들은 의도한 것과 달리 작은 글 씨와 작은 그림으로 표시된다. 이런 상황이 발 생하지 않게 하려면 <meta>태그를 이용해 뷰 포트크기나 배율을 조절해야 한다. 16) (고경희, 2014, p.641) 또한 스마트폰이나 태블릿에서 는 기기를 세로나 가로로 보는데, 이 때 웹사 이트의 화면 방향도 달라지기 때문에, 미디어 쿼리로 rientation 속성을 작성하면 화면의 방향을 감지한다. 15) 반응형 웹 디자인. 이지스퍼블리싱. 16) HTML5 + CSS3 웹 표준의 정석. 이지스퍼블리싱,

5. 본론 앞서 말한 대로 적응형 웹 디자인과 반응형 웹 디자인 모두 분기점사용의 개념을 공유하는데, 분기점이란 미디어 쿼리를 사용해 생성한 경계 로, 이 지점에서 사이트 레이아웃의 변경이 적 용된다. 적응형 디자인과 반응형 디자인의 주 요 차이점 중 하나는 분기점 간에 사이트의 레 이아웃을 변경하는 방법이라고 할 수 있다. 적 응형 디자인은 본질적으로 일련의 너비가 고정 된 레이아웃인 반면에, 반응형 디자인은 유연 한 크기를 사용하여 분기점 사이에서도 유동적 으로 변형된다. 5.1. 반응형 웹디자인(Responsive Web Design) 반응형 웹 디자인이란 화면 크기가 다른 각 디 바이스(데스크톱, 태블릿, 스마트폰)에 대해 최적화된 사이트를 구현하기 위한 제작 방법으 로 미국의 디자이너 Ethan Marcotte가 고안해 2010년 5월에 발표하였다. 17) 만약 데스크톱환 경의 웹사이트가 1024 또는 1280의 해상도에 최적화 되어있다면 모바일 해상도에서 최적화 될 수 있도록 브라우저 해상도에 따라 화면의 텍스트의 크기나 레이아웃이 자동으로 변형된 다. 반응형으로 구축하는 비결은 유동형 디자 인(Fluid Design)이라고 알려진 것을 사용한 다. 유동형 디자인이란 뷰포트의 크기와 관련 된 페이지에서 요소의 크기를 작성할 때 길이 값에 퍼센트를 사용한다. 반응형 웹디자인의 기술적 요소는 크게 다음 세 가지로 구성된다. 1)미디어 쿼리(Media Queries) 미디어 쿼리는 윈도우 폭, 이미지해상도, 대 상 디바이스 등의 조건에 따라 HTML에 적용 하는 스타일을 전환할 수 있는 CSS3의 신기능 이다. CSS2의 미디어타입(Media Type)을 확 장한 기능으로써 앞서 말한 기능형 웹디자인에 서처럼 적용하는 스타일을 디바이스마다(화면 크기마다) 전환한다. 2)유동형 그리드(Fluid Grid) 플루이드 그리드란 페이지의 구성요소를 임의 의 그리드에 맞춰 배치하는 그리드 디자인 의 방법과 브라우저의 윈도우 크기에 따라 각 요 소의 크기를 맞추는 유동형 레이아웃 의 방법 17) http://alistapart.com/article/responsive-web-design 을 조합한 레이아웃 방법이다. 반응형 웹디자 인 레이아웃에서 그리드의 각 요소를 px(픽 셀) 단위로 지정된 곳을 % 단위로 변경하여 여러 화면 크기에 맞는 페이지를 제작한다. 3)유연한(Flexible) 이미지 유연한 이미지는 브라우저의 윈도우 넓이(레이 아웃의 크기)에 맞추어 그림의 크기를 확대 및 축소하는 방법이다. 유동형 그리드와 조합함으 로써 이미지를 포함한 모든 요소를 화면 크기 에 맞출 수 있다. 다음은 반응형 웹디자인의 특징이다. Ÿ 한 개의 HTML 파일로 모든 디바이스대상의 페이지를 제작한다. 또한 사이트의 URL은 1개 이므로 검색엔진에 따른 인덱스 문제나 검색엔 진최적화(Search Engine ptimization)도 종래 의 방법보다 유리하다. Ÿ 미디어 쿼리로 사용자 기기를 탐색하고, 유 연한 이미지와 유동형 그리드가 화면에 맞게 레이아웃 된다. Ÿ 스마트폰 혹은 모바일 사이트를 기존의 웹사 이트로부터 제작하기 어렵다. 반응형 디자인을 제작하기 위해서는 기존의 HTML 코딩을 삭 제하고 새로 만들어야 한다. Ÿ 데스크톱, 태블릿, 스마트폰에서 파일을 읽 어 들일 때에 해당 기기에는 필요 없는 요소까 지 읽어 들일 수 있다. 그 때문에 페이지의 로 딩과 렌더링 속도가 늦어진다. 왜냐하면 이미 지나 고용량의 내용은 크기가 축소될 뿐 용량 을 줄이거나 제거되지 않기 때문이다, 그러므 로 반응형 웹사이트디자인은 사용자에게 신속 한 정보나 상품구입의 편의성 보다는 시각적인 면과 상호작용성에 더 초점을 맞추고 있다. 5.2. 적응형 웹디자인(Adaptive Web Design) 적응형 웹 디자인은 반응형 디자인과는 다르게 항상 변화하는 레이아웃이 아니다. 대신에 몇 가지 특정한 레이아웃을 다양한 스크린사이즈 에 맞도록 준비하여 사용되는 스크린사이즈에 반응하도록 한다. 예를 들면 스마트 폰, 태블 릿, 데스크 탑 컴퓨터에 맞추어 미리 레이아웃 이 만들어져 있도록 한다. 사용자가 사이트에 방문할 때 사이트는 그 기기를 감지하여 미리 마련된 레이아웃을 기기에 맞도록 보내는 것이 다. 다음은 적응형 웹 디자인의 특징이다.

Ÿ 기존의 사이트를 수정하여 모바일 사이트를 추가해나갈 수 있다. Ÿ 서버에서는 CSS를 통해 사용기기에 따라 준 비된 HTML을 선별하여 제공한다. Ÿ 고해상도 이미지나 부가적인 콘텐츠를 제거 하므로 모바일 사용자에게 반응형 웹디자인에 비해 원하는 콘텐츠를 빠르게 제공한다. 그러 므로 한편 모바일 플랫폼에서는 레이아웃이나 기능이 바뀔 수 있다. 아래는 www.alexa.com Top 100 rankings 에 서 15개 사례를 선별하여 미국 주요 5대 도시 에서 4G 네트워크를 통한 반응형 웹사이트가 적응형 웹사이트에 비하여 어느 정도의 데이터 양에서 얼마나 느려지는지를 나타낸 그래프이 다. 그림1 에서 보는 바와 같이 웹페이지의 반 응속도(모든 데이터를 다운로드하는 시간을 측 정)은 적응형 웹사이트가 무선네트워크 접속 시에 평균적으로 40.2 % 빠른 것으로 나타났 는데 이는 적응형 사이트가 훨씬 적은 데이터 양(평균 791 KB으로 반응형 사이트의 1.2 MB 와 비교)을 받기 때문이다. 실제로 데 이터사용에 상한선이 있는 모바일 사이트방문 자에게는 추가비용을 절약할 수 있도록 한다. 그러나 데스크 탑에서의 실험에서는 데이터전 송 속도의 차이는 훨씬 줄어든다. 18) (Lowell, 2014) 5.3. 사례분석결과 [Fig. 1] mobile webpage response times 다양한 웹사이트가 존재하는 이유는 사이트가 추구하는 목적이 각 각 다르기 때문이다. 즉, 포탈, 온라인쇼핑몰, 공공기관, 각 종 규모의 기업 등은 해당목적에 부합하는 웹사이트를 제 작하여 운영한다. 본 연구에서는 현재 전국대 18) blog.catchpoint.com/2014/06/02/adaptive-vs-responsive-web-d esign-right-site 학 웹사이트를 대상으로 모바일 기기에 친화적 으로 제작된 모바일 웹사이트를 조사하여 각 사이트의 운영방식을 분류하였다. 그 결과 표5 와 같이 나타났다. 전국의 조사대상 4년제 대학과 2/3년제 대학 의 웹사이트 중에서 모바일 웹사이트는 전체의 7.3%(24개교)로 나타났으며 이들 중 반응형 은 9개교, 적응형은 8개교로 조사되었다. 앱 방식으로 운영하는 1개 대학을 제외한 나머지 23개교 중 3개 대학이 Redirect방식을 사용하 며 3개 대학은 웹사이트의 일부페이지에만 적 용하고 있다. Redirect방식은 javascript에 의 해 별도의 URL로 자동 전환됨을 말한다. 6. 결론 일반적으로 반응형 웹디자인이라 통칭하여 불 리는 사용자의 기기에 따라 변형되는 웹사이트 디자인방식은 적응형 웹디자인과 반응형 웹디 자인으로 구분되어야 한다. 이 두 방식은 각각 의 기술적 장단점이 있으므로 이를 고려하여 모바일용 웹사이트제작 시에 그 목적에 부합하 [Table 5] Mobile Website for Universities/Colleges 2015. 03 Responsive Adaptive index only URL gwangju.ac.kr www.knu.ac.kr www.cnu.ac.kr www.bnue.ac.kr www.korea.ac.kr www.wku.ac.kr www.kut.ac.kr www.hanseo.ac.kr www.mjc.ac.kr Redirect m.sewc.ac.kr Redirect web.kit.ac.kr Redirect unist-kor.unist.ac.kr/ www.dongju.ac.kr www.dhc.ac.kr www.ansan.ac.kr www.klc.ac.kr www3.saekyung.ac.k r/home daewon.ac.kr hj.ac.kr/main.do App suncheon.ac.kr bwc.ac.kr soeularts.ac.kr cku.ac.kr m.dankook.ac.kr

는 방법을 선택해야하기 때문이다. 특히 데스 크톱 웹사이트에서 모바일 기기용 웹사이트로 확대개편을 계획하는 경우라면 적응형 웹디자 인의 장점에 주목할 필요가 있다. 특히 대학들 이 모바일 웹사이트로 확장을 고려한다면 적응 형 웹사이트디자인의 이점으로는 첫째, 기존의 웹사이트에서 추가로 작업이 가능하며 둘째, 예비생, 재학생, 교직원 등의 사용자접근형태 에 맞추어 대응할 수 있다. 또한 대학의 특화 된 서비스로서 모바일 앱를 활용할 수 있다. 예를 들어 대학도서관 앱은 재학생에게 편의를 제공할 수 있다. 이와 관련하여 모바일 친화적 인 웹사이트의 제작여부나 방식을 결정하기 전 에 Google Analytics 나 mniture 같은 분석 기능을 활용하면 지난 몇 달 동안 방문자들이 어떤 모바일 기기를 가장 많이 사용했는지를 알아볼 수 있다. 본 연구의 결과는 대학의 모 바일 웹사이트 제작 시 사전에 고려되어야 할 지침으로 사용될 수 있다. 따라서 모바일용 웹 사이트제작을 고려하는 대학의 주체가 지향하 는 목적에 따라 그에 가장 부합하는 방식을 선 택하는 것이 중요하며 각 방식의 우열을 가리 는 것은 큰 의미가 없다. 그러므로 최종적으로 완성된 모바일 사이트의 성패나 적합성은 대학 주체와 사용자가 함께 판단해야할 몫이다. 1) 반응형 웹디자인이나 적응형 웹디자인 중 어느 것을 선택할 것이냐는 웹사이트의 목적과 방문자의 요구에 따라 결정되어야한다. 2) 반응형 웹디자인의 선택이 유리한 경우는 다음과 같다. Ÿ 사용자에게 신속한 정보나 상품구입의 편의 성 보다는 시각적인 면과 상호작용성에 더 초 점을 맞추어 제작할 경우 Ÿ 웹사이트제작의 목적이 사용자들에게 많은 콘텐츠를 전달하는 것이 중요할 경우 Ÿ 사이트방문자들이 대부분 데스크톱 컴퓨터의 브라우저로 방문하며 동시에 모바일 기기에서 도 같은 내용을 전달하기 원할 경우 3) 적응형 웹디자인의 선택이 유리한 경우는 다음과 같다. Ÿ 고해상도 이미지나 부가적인 콘텐츠를 제거 하여 모바일 사용자에게 신속하게 원하는 콘텐 츠를 선별하여 제공하기를 원하는 경우 Ÿ 기존의 사이트를 수정하여 제작을 원할 경우 Ÿ 모바일 웹사이트가 주요목적이며 상거래나 다른 복잡한 기능들이 필요할 경우 Ÿ 모바일 플랫폼에서는 레이아웃이나 기능이 바뀌어도 문제가 없는 경우 4) 통상적으로 모바일 앱은 브라우저상에서 효율적으로 구동할 수 없는 특정한 목적을 성 취하기 위한 것이라고 할 수 있다. 5) 모바일 앱의 특징은 다음과 같다. Ÿ 제작기간이 지연될 수 있으며 그 이유는 앱 스토어의 승인을 얻거나 구글 플레이어나 애플 앱 스토어의 규정에 맞추어야하기 때문이다. Ÿ 일반적인 모바일 앱은 폐쇄적인 환경에서 작 동하여 검색엔진에서 검색되지 않아 모바일 앱 으로 방문자들을 유도할 다른 방법을 찾아야한 다. 즉, 모바일용 웹서비스를 동시에 제공할 필요가 있다. Ÿ 네이티브 모바일 앱은 단골고객과 기존고객 들에게 모바일 전용서비스를 제공할 수 있는 경우에 유용하다. 참고문헌 고경희.(2014). HTML5+CSS3 웹 표준의 정석. 이지스퍼블리싱. 김운아.(2014). 반응형 웹 디자인. 이지스퍼블리싱, 야마자키 다이스케.(2013). 반응형 웹 디자인. (김대희 역). 비제이퍼블릭. (원서출판 2013). Gasston, P.(2014). The Modern Web. (홍영표, 최윤정 역). 에이콘출판. (원서출판 2013). 김위근.(2013). 스마트폰 도입이 포털사이트 이용에 미친 영향. 한국언론정보학보.. Vol.64. 김정진, 박종미, 홍석기.(2014). 반응형 웹 구현을 위한 인터페이스 구성 요소 연구. 한국과학예술포럼, Vol.15. 남재우.(2010). 도서관 모바일 웹사이트의 콘텐츠 구성에 관한 연구. 정보관리학회지, 제27권 제4호. 이충영.(2012). 차세대 웹 표준 HTML5 연구. 애니메이션연구, Vol.8. No.2. Honigman, B.(2014.2.8). How to decide between a responsive website or a native mobile app. Retrieved 2015.7.17. from http://thenextweb.com/dd/2014/02/08/decide-resp onsive-website-native-mobile-app/ Lowell, C.(2014.6.2). Adaptive vs. Responsive Web Design: Which Is Right for Your Site?. Retrieved 2015.6.10. from

http://blog.catchpoint.com/2014/06/02/adaptive-v s-responsive-web-design-right-site Marcotte, E.(2010.5.25.). Responsive Web Design. Retrieved 2015.6.25. from http://alistapart.com/article/responsive-web-desi gn Nanji, A.(2014.8.6). Mobile Trends: Most Popular Phones, Screen Sizes, and Resolutions. Retrieved 2015.7.17. from http://www.marketingprofs.com/charts/2014/25740 /mobile-trends-most-popular-phones-screen-size s-and-resolutions Wroblewski, L.(2011.10.18). rganizing Mobile. Retrieved 2015.6.25. from http://alistapart.com/article/organizing-mobile