Embed Size (px)
Citation preview
Web Site Consulting ‘전문가 칼럼’
N SEARCH MARKETING
NSM 사이트 컨설팅 전략에 대한 서른 다섯 번째 이야기!
스크린은 지금 각양각색
그 다양함에 맞서기
: 해상도 대응
CONTENTS
01.
02.
03.
4~5p
해상도란 무엇인가
6~7p
우리 고객이 보고 있는 화면은?
1) 대한민국 유저 최근 해상도 추이
2) 빅빅빅, 대한민국은 지금 대형스크린
8~9p
다양한 해상도 테스트하기
웹브라우저 이용 해상도별 테스트 방법
04. 10~12p
해상도에 대응하기
1) 반응형 웹 디자인
2) 메타태그 뷰포트 설정하기
INTRO
해외 유명 PC제조사인 DELL과 APPLE에서 연이어 27인치 ‘5K’ 초고해상도 모니터를 발표
하여 화제인데요. 본체와 화면이 일체형인 이 제품은 27인치 화면의 5120*2880 해상도
로 지금까지 시판된 디스플레이 중 해상도가 가장 높고, 요즘 가정용으로 널리 쓰이는 풀
HD 모니터 1920*1080 와 비교하면 7배가 넘는 수치입니다.
이는 국내 제조사에서 발표한 105인치 곡면 5K UHD TV와 비교해도 화소 수가 33.3%
많아 TV보다도 더 정교한 이미지를 PC화면으로도 누릴 수 있는 시대가 도래한 것입니다.
[그림 1] 5120*2880 27인치 모니터 출시, APPLE & DELL (사진출처. http://www.ibtimes.com )
이번 칼럼에서는 이렇게 더 커지고 정교해진 PC화면과 더불어, 내 손안의 web까지 다양
한 N스크린 환경에 접속해 있는 우리 고객들의 시스템 환경인 해상도에 대해 알아보려고
합니다.
해상도란 무엇인가?
화면 해상도(graphic display resolution)는 컴퓨터 모니터와 같은 디스플레이 너비와 높이의 치수를
pixel 단위로 설명하는 것으로 종이나 스크린 등에 표현된 그림이나 글씨가 표현된 섬세함의 정도를 나
타내는 말이다. 1인치당 몇 개의 픽셀로 이루어졌는지를 나타내는 ppi(pixel per inch), 1인치당 몇 개
의 점(dot)으로 이루어졌는지를 나타내는 dpi(dot per inch)를 주로 사용하며 픽셀 혹은 도트 수가 많
을수록, 즉 해상도가 높을수록 더 깨끗하고 정교한 이미지를 구현할 수 있다.
* 참고. http://ko.wikipedia.org
해상도란 (resolution) 무엇인가?
[그림 2] 해상도 종류별 비율 (사진출처. http://commons.wikimedia.org/wiki/File:Vector_Video_Standards6.svg)
모니터 해상도는 한 화면에 픽셀이 몇 개나 포함되어 있는지를 의미하며, 대게 가로의 픽
셀 수와 세로의 픽셀 수를 곱하기 형태로 표시합니다. 최근 발표된 5K모니터 5120*2880
는 가로 5,120개, 세로 2,880개의 픽셀을 모니터에 나타내는 것으로 생각할 수 있습니다.
(2-1) VGA – 640*480 해상도 (Video Graphic Array)
1887년에 IBM사가 제정한 아날로그 방식의 컴퓨터 디스플레이 표준으로, ‘기준’이 되는 해상도
(2-2) HD – 1920*1080 해상도 (High Definition)
고화질 HD해상도의 하나로 현재 국내 PC 유저의 절반이 사용하는 해상도로 (참고. 그림3 도표)
모바일에서는 4.7인치~6인치를 넘는 다양한 크기로 출시되고 있음
우리 고객이 보고 있는 화면은 어떨까요?
육안으로 보는 것에 점점 가깝게 다가가고 있는 요즘, 다양한 해상도 규격이 있음을 알
수 있었는데요. 우리 고객이나 국내외 방문자들은 어떤 환경, 어떤 화면에서 접속하고
있을까요?
[그림 3] 국내 모니터 해상도 월별 점유 현황 / 통계기간. 2013년 5월~ 2014년 9월, (자료출처. http://gs.statcounter.com/ 모바일 제외)
▶ 더 알고 싶다면 참고하세요! > 관련 통계. 카테고리별 방문자 해상도 환경 보러가기 http://www.internettrend.co.kr/trendForward.tsp
대한민국은 지금 대형 스크린
빅 빅 빅, 대한민국은 지금 대형스크린
[그림3]은 국내 사용자들의 해상도 환경을 나타낸 그래프로, 2013년 5월 ~ 2014년 9월
까지의 국내 모니터 사용 현황을 볼 수 있습니다. 2013년 상반기까지 20%내외이던
1920px 이상의 스크린 비율이 전체 스크린의 절반을 차지할 정도로 국내는 최근 1년 사
이 빅 빅 빅, 가히 대형스크린의 시대라고 해도 과언이 아닙니다.이는 고해상도 스크린 점
유율이 더디게 상승하고, 여전히 1280px~1600px 대의 해상도가 주류를 이루는 국외의
상황과는 좀 다른데요. 대한민국은 과거 인터넷이나 스마트폰 보급률이 그 어느 나라에서
보다 급상승 했던 것을 생각해보면 놀랍기만 한 일도 아닌 것 같습니다.
다시 말해, 국내 전체 유저의 절반에 해당하는 53%가 1800 이상의 고해상 모니터를 사
용하고 있고 또 그 절반에 해당하는 1/4 (약 26%)는 여전히 1200px 대를 이용하고 있으
므로, 국내 사용자를 타겟으로 하는 사이트의 경우, 1200~1900px 전반적으로 사용자를
아우를 수 있는 웹 디자인 테스팅이 필요하겠습니다. 그럼 내 사이트가 해상도별로 어떻게
보여지는지를 모니터링하고 고객들의 다양한 시스템 (해상도) 환경에 대응하기 위한 방법
을 살펴볼까요?
해상도 대응! 우선, 고객의 화면에서 내 사이트 살펴보기
고객이 보고 있는 다양한 스크린 화면에 대응하기 위해서는 우선 각각의 해상도에서 내 사
이트가 어떻게 보여지고 있는지를 테스트해보아야 합니다. 테스트 방법으로는 웹 브라우
저에서 제공하는 기능 ( 크롬 TEST IE 부가기능 및 파이어폭스 v.15 브라우저 개발자도구 )
이외에도 국내 검색엔진 다음 웹표준 기술팀에서 제공하는 서비스인 트로이를 통해서 현
존하는 모바일 기기와 PC의 해상도를 테스트할 수 있습니다. 파이어폭스 브라우저를 이
용한 방법은 다음과 같습니다.
1) 해상도 테스트하기 1/2
다양한 해상도 테스트하기
[그림 4-1] Firefox 한글판 v.15 에서 제공하고 있는 해상도별 테스트 화면 ‘반응형 웹 디자인 보기’ ① 개발자 메뉴 들어가기 ② 반응형 웹 디자인 보기 선택
1) 해상도 테스트하기 2/2
다양한 해상도 테스트하기
[그림 4-2] Firefox 에서 자사 홈페이지 해상도 테스트하기 (4-1에 이어) ③ 테스트하려는 url 입력하기 ④ 해상도 조절하여 테스트하기 (드롭다운 버튼 셀렉트 혹은 화면 드래그로 직접 조절 가능) 예시는 구 'N Search Marketing 이전 홈페이지' 이며, 리뉴얼된 홈페이지는 다양한 해상도에 대응 가능한 반응형 웹으로 제작 되었습니다.
[그림4-2]의 경우, 800px 이하 해상도에서는 로고 및 좌측 배너 부분의 이미지 일부의 잘림 현
상이 있고 평균 유저들의 사용환경인 1280px 대로 테스트해 본 결과, 홈페이지 로고, 메뉴, 메
인 배너 등의 콘텐트가 무리 없이 잘 보여지고 있음을 알 수 있습니다.
▶ 더 알고 싶다면 참고하세요! > 관련 서비스. 다음 TROY 웹 테스터 보러가기 http://troy.labs.daum.net/browserSupport
a. 반응형 웹 (Responsive Web Design, 이하 RWD)
다양한 해상도에 대응하기
반응형 웹은 데스크탑에서부터 태블릿PC에 이어 스마트폰까지 하나의 소스로 다양한 디바이스
에 반응하여 각각의 환경에서 최적화된 UI를 구현해주는 것으로, 최초로 정의한 미국 개발자 이
단 마콧 (Ethan Marcotte)에 따르면 RWD를 구현하는 방법은 다음과 같습니다.
① 가변 이미지 (Flexible Image, Flexible media)
이미지나 동영상 미디어의 크기가 웹 브라우저 해상도 가로 크기에 맞게 줄어들거나 늘어나게 유
동적으로 변하도록 함
② 가변 그리드 (Flexible Grid)
그리드가 해상도에 최적화되어 변화하는 것으로, width값을 고정형이 아닌 비율로 제작하여 브
라우저 크기에 따라 레이아웃의 비율도 변경되어 콘텐트가 같이 움직이어 보여지게 됩니다.
③ 미디어쿼리 (Media Query)
해상도의 width 값에 따라 변화를 감지하여 레이아웃을 유동적으로 보여줄 수 있도록, 그 변화
에 따른 스타일시트(CSS)를 설정하는 것으로 CSS3 속성을 이용한 UI기법입니다.
그러나 모든 웹사이트에 반응형 웹을 구현하는 것만이 답은 아니며, 간단한 태그 설정으로도 모
바일에 최적화된 콘텐트를 보여줄 수 있습니다.
[그림 5] 반응형 웹 디자인 디바이스별 예제 (자료출처. http://developas.com/responsive-web-design/ )
다양한 해상도에 대응하기
▶ 더 알고 싶다면 참고하세요! > 관련 칼럼. 웹 디자인 트렌드의 어제, 오늘 그리고 내일 보러가기 http://me2.do/GnApci3Y
b. 뷰 포트 (viewport) 메타태그
모바일 브라우저에서 사이트에 접속했을 때 페이지 전체가 축소되어 보이는 경험해 본 적 있으
신가요? 페이지 내용이 스크린 크기보다 클 경우를 대비하여 자동 축소모드로 렌더링 하기 때
문에 PC웹을 모바일 브라우저에서 접속할 경우, 화면이 작아지면서 가독성이 낮아지게 되는데
요. 모바일 브라우저에서 화면폭에 맞게 이미지나 콘텐트를 노출하여 가독성을 확보하는 방법
으로 태그의 viewport 속성을 설정합니다.
태그에서 페이지 초기 비율과 최대, 최소 비율 그리고 사용자에 의한 스케일 조정 여부 등을 설
정하여 다양한 디바이스 화면에서도 최적화된 내 모바일 웹을 보여줄 수 있습니다.
[그림 6] 메타태그 뷰포트 태그 전후에 따른 콘텐트 노출 예. (우측 이미지. 뷰포트 width를 화면 가로폭에 맞추어 전환되도록 태그 지정한 모습
[그림6] 왼쪽 이미지는 뷰포트 설정 이전 상태로 원래 콘텐트 용량이 브라우저 크기 비율대로 축소되어
모바일에서 이미지나 텍스트를 정확히 식별하기 번거로움이 있는 반면, 뷰포트 설정에 따라 화면 폭에
맞추거나 보여지는 픽셀 너비나 높이 값을 지정하여 최적화된 화면으로 보여지게 할 수 있습니다.
The End
[그림 7] 메타태그 뷰포트 설정값 (자료출처. http://www.karmaloop.com )
[그림7]의 한 쇼핑몰에서는 콘텐트가 가로 화면에 맞추어 폭이 전환되게 하고 (width=device-width)
초기 화면 비율로 확대하여 보여주는 옵션 설정 (intial-scale;1.0), 사용자가 화면을 확대할 수 있도록
허용 (user-scalable=yes)하는 태그가 지정되어 있어, 아이폰이나 안드로이드폰 다양한 해상도에서도
잘리거나 넘치지 않도록 비율에 따라 보정될 수 있도록 모바일 웹을 구현하고 있습니다.
배너나 메뉴의 위치, 크기를 점검하는 것부터
최적화되지 않은 사이트 화면 잘림 등으로 이탈하는 고객들을 언제까지 바라만 보고 계실 건가요?
소개해드린 해상도 테스트를 통해 사용자들이 많이 접속하는 환경에서 상품 카테고리 일부가 잘려져
보이지는 않는지, 지금 하고 있는 시즈널 이벤트 배너가 문제없이 노출되고 있는지 주요 전환요소인
버튼의 위치가 적절한지 등을 살피는 것부터 시작하면 될 것입니다.
우리 고객들의 시스템 환경을 이해하고 웹 표준에 맞는 사이트에 하나씩 대응하는 것이야말로 머물고
싶은 사이트, 다시 찾고 싶은 사이트로 가는 길이 되지 않을까 하는데요, 고객만족을 통한 브랜드 가치
를 높이는 방법은 생각보다 멀리에 있지 않습니다. 고객을 위한 한걸음을 내딛어야 할 때입니다.
칼럼니스트
김지영 과장 [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
