광고컬럼

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

 

반응형 웹, 변화의 필수인가 선택인가


꽃피는 봄이 오면 여성들은 변신을 꿈꿉니다. 패션, 메이크업, 헤어스타일 등 변화를 기대하며 최신 유행하는 스타일을 열심히 검색해보고 나에게 어울리는 스타일을 고민해봅니다. 여성들이라면 유행하는 스타일로 변신을 시도했다가 낭패를 겪은 경험이 한번쯤은 있을 것입니다. 유행하는 스타일이라고 해서 모든 사람에게 다 어울리는 것은 아니기 때문입니다. 웹 사이트도 마찬가지입니다. 최근 PC, 모바일, 태블릿 PC 등 디스플레이 해상도에 따라 화면 구성이 달라지는 ‘반응형 웹’에 대한 제작 시도가 많아지며 관심이 뜨겁습니다. (관련내용 : 35번째 칼럼 ‘스크린은 지금 각양각색, 그 다양함에 맞서기! - 반응형 웹’)

 


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

 


반응형 웹만 전문적으로 제작하는 에이전시까지 늘어나고 있는 추세이니 그만큼 반응형 웹 제작을 원하는 수요가 많다는 이야기일 것입니다. 이번 칼럼에서는 ‘반응형 웹’’이 과연 모든 사용자에게 웹 트렌드를 성공적으로 잘 전달하고 있는지 또 관리자 입장에서는 어떤 어려움과 한계에 부딪히고 있는지에 대해 알아보도록 하겠습니다.

 

 

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

 

1. 로딩 속도의 문제


한국은 하나의 화면에서 많은 컨텐츠를 보여주는 것을 선호하는 편입니다. 대표적인 포털 사이트인 ‘네이버’를 보더라도 미국의 대표적인 포털 사이트 ‘구글’과는 화면 구성이 상당히 다릅니다. 많은 컨텐츠를 표현하기 위해서는 반응형 웹 구축 시 꽤 복잡하게 제작 될 수 밖에 없으며 이에 따라 로딩속도도 당연히 느려질 수 밖에 없습니다. 특히, PC에서는 로딩속도에 문제가 없던 이미지가 모바일 플랫폼에서 로딩이 느려져 확인해 보면 용량이 큰 이미지가 로딩되어 답답함을 주는 경우가 종종 발생하고 있습니다.
보다 빠른 사용성을 제공하기 위해서는 다양한 플랫폼에서의 이미지 소스 코드 최적화가 필요합니다.

 


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

 


2. 가독성의 문제


PC와 모바일 플랫폼에서 가독성 차이의 문제는 반응형 웹의 가장 큰 불편함으로 제기되고 있습니다. 테이블을 사용한 설명 방법이나 이미지 텍스트를 사용한 경우 모바일 크기에 맞춰 강제로 축소하기 때문에 알아 볼 수 없는 형태로 작게 노출되어 사용자가 읽기 어렵게 만들기 때문입니다.

 

 

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


또 이미지와 텍스트가 함께 설명된 페이지의 경우 PC와 같은 비율의 Layout에 맞춰 그대로 모바일 화면에도 배치할 것인지에 대한 고민이 필요합니다.


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

 

 


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


반응형 웹 제작 업체를 통해 사이트는 만들었지만 정작 관리자는 어떻게 제작된 것인지 또 운영이나 관리는 어떻게 해야 되는지 유지보수에 대한 고민을 하지 않을 수 없습니다. 매일 새로운 컨텐츠나 상품을 업데이트 해야 하는 쇼핑몰의 경우 PC, 모바일, 테블릿 PC 등의 디스플레이 화면 크기별로 테스트를 거쳐야 하는 번거로움이 생깁니다. 특히, 공격적인 마케팅이 잦은 쇼핑몰은 이벤트와 같은 특화된 컨텐츠 제작 시 정해진 Layout이나 form에 맞추어 디자인을 해야 하기 때문에 창작성의 한계에 부딪히게 됩니다.

 

 

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

 

  

반응형 웹 & 적응형 웹


물론 반응형 웹은 장점이 훨씬 더 많고 활용 가치가 높습니다. 하지만 모든 업종과 사용자에게 꼭 필요한 트렌드인지 앞서 언급한 문제들을 어떻게 해결하면 좋을지에 대해 고민이 필요한 것입니다. 컨텐츠 중심의 웹 페이지 구성을 가진 기업 사이트나 주기적인 업데이트 횟수가 다소 적은 사이트에겐 반응형 웹이 사용자와 관리자에게 큰 불편함 없이 트렌드 본연을 즐길 수 있게 하지만, 방대한 정보를 보여주어야 하는 포털 사이트나 신상품을 수시로 업데이트 해야 하는 쇼핑몰에겐 오히려 사용자와 관리자에게 불편함을 초래할 수 있기 때문입니다.

 

이런 불편함을 줄이기 위해 반응형 웹과 비슷한 적응형 웹이 새로운 방법론으로 등장했습니다. 반응형 웹과 비슷한 개념이지만 반응형 웹은 하나의 페이지가 유동적인 Layout으로 PC와 다양한 해상도의 모바일 웹 화면에 맞추어 구성되는 것과는 달리 적응형 웹은 미리 정해진 몇 가지 크기의 화면 사이즈를 기준을 두고 비율에 맞추어 페이지를 구성한다는 점이 큰 차이점이라고 볼 수 있습니다.

 


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


적응형 웹은 정해진 해상도로 제작한 내용에 따라 화면이 구성되므로 모든 해상도에 최적화하기에는 한계가 있지만 반응형 웹에서의 로딩속도와 가독성 문제를 어느 정도 해소할 수 있어 대체 방법론으로 언급되고 있는 것입니다.

 

 

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


반응형 웹과 적응형 웹 모두 근본적으로는 웹 사이트를 다양한 해상도의 모바일 기기에서 최적화 된 화면을 보여주어 정보를 원활하게 전달하고 더 나은 사용자 경험을 제공하기 위한 웹 트렌드입니다. 하지만 설계에서부터 유지보수에 이르기까지 철저한 테스트를 거치지 않으면 사용자와 관리자 모두에게 오히려 불편함을 초래할 수 있습니다. 사이트 리뉴얼을 최신 웹 트렌드로 제작한다고 해서 사용자 모두에게 매력을 줄 수 있는 것은 아닙니다. 웹 트렌드 본연의 가치를 높이기 위해서는 각 기업의 특성과 사용자 특성에 맞는 전략이 가장 먼저 필요한 것입니다.

 

 

 글 – 송정아 (온라인 비즈니스 스페셜리스트)
 bluewings20@nsm.co.kr