nsm 사이트 컨설팅 전략 40th.반응형 웹, 변화의 필수인가 선택인가

Web Site Consulting ‘전문가 칼럼’

N SEARCH MARKETING

NSM 사이트 컨설팅 전략에 대한 마흔번째 이야기!

반응형 웹,

변화의 필수인가 선택인가

CONTENTS

01.

02.

03.

4p

반응형 웹에 대한 뜨거운 관심

5~7p

사용자가 바라보는 반응형 웹 1) 로딩 속도의 문제

2) 가독성의 문제

7~8p

관리자가 바라보는 반응형 웹 운영, 유지 보수에 대한 고민

04. 9p

반응형 웹 & 적응형 웹

05. 10p

트렌드에도 전략이 필요하다 마무리하며

반응형 웹에 대한 뜨거운 관심

꽃피는 봄이 오면 여성들은 변신을 꿈꿉니다. 패션, 메이크업, 헤어스타일 등 변화를

기대하며 최신 유행하는 스타일을 열심히 검색해보고 나에게 어울리는 스타일을 고

민해봅니다. 여성들이라면 유행하는 스타일로 변신을 시도했다가 낭패를 겪은 경험

이 한번쯤은 있을 것입니다. 유행하는 스타일이라고 해서 모든 사람에게 다 어울리

는 것은 아니기 때문입니다. 웹 사이트도 마찬가지입니다. 최근 PC, 모바일, 태블릿

PC 등 디스플레이 해상도에 따라 화면 구성이 달라지는 ‘반응형 웹’에 대한 제작 시

도가 많아지며 관심이 뜨겁습니다. (관련내용 : 35번째 칼럼 ‘스크린은 지금 각양각

색, 그 다양함에 맞서기! - 반응형 웹’)

반응형 웹만 전문적으로 제작하는 에이전시까지 늘어나고 있는 추세이니 그만큼 반응형

웹 제작을 원하는 수요가 많다는 이야기일 것입니다. 이번 칼럼에서는 ‘반응형 웹’’이 과연

모든 사용자에게 웹 트렌드를 성공적으로 잘 전달하고 있는지 또 관리자 입장에서는 어떤

어려움과 한계에 부딪히고 있는지에 대해 알아보도록 하겠습니다.

[그림1] 디스플레이 종류에 따라 변화하는 반응형 웹 Layout

http://www.nsm.co.kr/column_view.do?pageNo=1&o_search_text=%EB%B0%98%EC%9D%91%ED%98%95&o_search_type=all&o_type=&seq=23337






























사용자가 바라보는 반응형 웹

1. 로딩 속도의 문제

한국은 하나의 화면에서 많은 컨텐츠를 보여주는 것을 선호하는 편입니다. 대표적인 포털

사이트인 ‘네이버’를 보더라도 미국의 대표적인 포털 사이트 ‘구글’과는 화면 구성이 상당히

다릅니다. 많은 컨텐츠를 표현하기 위해서는 반응형 웹 구축 시 꽤 복잡하게 제작 될 수 밖

에 없으며 이에 따라 로딩속도도 당연히 느려질 수 밖에 없습니다. 특히, PC에서는 로딩속

도에 문제가 없던 이미지가 모바일 플랫폼에서 로딩이 느려져 확인해 보면 용량이 큰 이미

지가 로딩되어 답답함을 주는 경우가 종종 발생하고 있습니다.

보다 빠른 사용성을 제공하기 위해서는 다양한 플랫폼에서의 이미지 소스 코드 최적화가

필요합니다.

[그림 2] 모바일 플랫폼에서 상품 이미지 로딩이 느려지는 쇼핑몰


2. 가독성의 문제

PC와 모바일 플랫폼에서 가독성 차이의 문제는 반응형 웹의 가장 큰 불편함으로 제기되고

있습니다. 테이블을 사용한 설명 방법이나 이미지 텍스트를 사용한 경우 모바일 크기에 맞

춰 강제로 축소하기 때문에 알아 볼 수 없는 형태로 작게 노출되어 사용자가 읽기 어렵게

만들기 때문입니다.

[그림 3] 모바일 플랫폼에서 테이블을 사용한 설명 사례

또 이미지와 텍스트가 함께 설명된 페이지의 경우 PC와 같은 비율의 Layout에 맞춰 그대

로 모바일 화면에도 배치할 것인지에 대한 고민이 필요합니다.


[그림 4] 이미지와 텍스트 모바일 화면 배치 사례(이미지 출처:Mac Developer Library )

관리자가 바라보는 반응형 웹

반응형 웹 제작 업체를 통해 사이트는 만들었지만 정작 관리자는 어떻게 제작된 것인지 또

운영이나 관리는 어떻게 해야 되는지 유지보수에 대한 고민을 하지 않을 수 없습니다. 매일

새로운 컨텐츠나 상품을 업데이트 해야 하는 쇼핑몰의 경우 PC, 모바일, 테블릿 PC 등의

디스플레이 화면 크기별로 테스트를 거쳐야 하는 번거로움이 생깁니다. 특히, 공격적인 마

케팅이 잦은 쇼핑몰은 이벤트와 같은 특화된 컨텐츠 제작 시 정해진 Layout이나 form에

맞추어 디자인을 해야 하기 때문에 창작성의 한계에 부딪히게 됩니다.

관리자가 바라보는 반응형 웹

[그림 5] 디스플레이 종류마다 달라지는 상품 검색 결과 페이지 Layout Check 필요

반응형 웹 & 적응형 웹

물론 반응형 웹은 장점이 훨씬 더 많고 활용 가치가 높습니다. 하지만 모든 업종과 사용자

에게 꼭 필요한 트렌드인지 앞서 언급한 문제들을 어떻게 해결하면 좋을지에 대해 고민이

필요한 것입니다. 컨텐츠 중심의 웹 페이지 구성을 가진 기업 사이트나 주기적인 업데이트

횟수가 다소 적은 사이트에겐 반응형 웹이 사용자와 관리자에게 큰 불편함 없이 트렌드 본

연을 즐길 수 있게 하지만, 방대한 정보를 보여주어야 하는 포털 사이트나 신상품을 수시

로 업데이트 해야 하는 쇼핑몰에겐 오히려 사용자와 관리자에게 불편함을 초래할 수 있기

때문입니다. 이런 불편함을 줄이기 위해 반응형 웹과 비슷한 적응형 웹이 새로운 방법론으

로 등장했습니다. 반응형 웹과 비슷한 개념이지만 반응형 웹은 하나의 페이지가 유동적인

Layout으로 PC와 다양한 해상도의 모바일 웹 화면에 맞추어 구성되는 것과는 달리 적응

형 웹은 미리 정해진 몇 가지 크기의 화면 사이즈를 기준을 두고 비율에 맞추어 페이지를

구성한다는 점이 큰 차이점이라고 볼 수 있습니다.

[그림 6] 적응형 웹과 반응형 웹의 화면 설계 차이

http://basicuse.net/articles/pl/textile/html_css/adaptive_vs_responsive_web_approach_two_sides_of_the_same_coin

적응형 웹은 정해진 해상도로 제작한 내용에 따라 화면이 구성되므로 모든 해상도에 최적

화하기에는 한계가 있지만 반응형 웹에서의 로딩속도와 가독성 문제를 어느 정도 해소할

수 있어 대체 방법론으로 언급되고 있는 것입니다.

트렌드에도 전략이 필요하다.

트렌드에도 전략이 필요하다.

반응형 웹 제작 업체를 통해 사이트는 만들었지만 정작 관리자는 어떻게 제작된 것인지 또

운영이나 관리는 어떻게 해야 되는지 유지보수에 대한 고민을 하지 않을 수 없습니다. 매일

새로운 컨텐츠나 상품을 업데이트 해야 하는 쇼핑몰의 경우 PC, 모바일, 테블릿 PC 등의

디스플레이 화면 크기별로 테스트를 거쳐야 하는 번거로움이 생깁니다. 특히, 공격적인 마

케팅이 잦은 쇼핑몰은 이벤트와 같은 특화된 컨텐츠 제작 시 정해진 Layout이나 form에

맞추어 디자인을 해야 하기 때문에 창작성의 한계에 부딪히게 됩니다.

온라인 비즈니스 스페셜리스트

송정아 [email protected]

[ 칼럼에서 사용된 외부링크는 해당 사이트 사정으로 접속이 불가할 수 있으니 참고하여 주시기 바랍니다. ]

광고문의 1566-3265 [email protected] 엔서치마케팅㈜ www.nsm.co.kr 경기도 성남시 분당구 황새울로 359번길 11, 5층 우편번호 463-824

N Search Marketing 은 2001 년 네이버 검색광고 출시부터 NAVER 내부

조직으로 검색광고 서비스를 시작하여 네이버와 함께 성장해 온 온라인

마케팅 전문 컨설팅 기업으로 네이버 검색광고 취급액 1 위 , 검색광고주 수

1 위 독보적인 1 위로 시장을 선도하고 있습니다 .

검색광고 , 디스플레이 광고 , 타겟팅 광고 등 다양한 광고 상품 분야에서

최고 서비스를 제공하고 있으며 , PC·Mobile 사이트 컨설팅에 이르기까지

온라인 광고와 관련된 전반적인 컨설팅을 수행하고 있습니다 .

Contact Us

mailto:[email protected]



