2

머리말

NHN Search Marketing, WDC팀 홍재일 팀장

송정아_과장

고은경_차장

김설희_대리 * 홍현지_대리

김지영_과장

안기민_과장 *

임우정_주임

박만수_주임

조현영_사원

칼럼니스트 디자이너

불과 일 년 사이에 많은 변화가 있었습니다. PC에서 모바일로 마케팅의 무대가 확장되기도 했고

우리의 행동은 빅데이터로 분석되어져 마케팅에 활용되기도 했으며, IoT(사물인터넷)라는 새로

운 시장이 점차 윤곽을 드러내 치열한 전쟁터를 예고했습니다.

그럼에도 NSM이 업계 1위를 유지하며 최고의 마케팅을 계속해서 해 나갈 수 있었던 원동력은

사람에 대한 고민을 우선했기 때문입니다. 장보기의 터가 시장일지 마켓일지 백화점일지는 사용

자가 결정하지만 다시 찾게 만드는 것은 결국 운영자의 몫입니다. 광고주의 웹사이트가 사용자에

게 인정받는 좋은 터가 될 때까지 NSM은 꾸준히 고민하고 컨설팅할 것입니다.

이 매거진에는 사이트 운영전략과 웹 트렌드, UI/UX디자인, 웹 접근성 등 사이트를 운영하는 데

필요한 지식이 담겨 있습니다. 일부 업체에 특화된 내용은 최대한 제외하고 가장 범용적인 부분

을 담아내려고 노력했습니다. 지식이 회사 안에만 머무르지 않고 함께 공유되어 진다는 것은 기

분 좋은 경험입니다. 널리 활용하셔서 성공적인 비즈니스를 이어나가시길 희망합니다.

PC / 모바일 웹 운영전략

웹 접근성 Website Edit 디자인 모바일 웹 운영전략, 웹 트렌드

웹 접근성 홍보 디자인

웹 접근성, 모바일 웹 운영전략

PC 웹 운영전략

모바일 웹 운영전략

* Website Edit 편집위원

3

스웨덴 스톡홀름의 odenplan이라는 지하철역에서는 행인들이 에스컬레이터 대신에 계단을 이

용하도록 하기 위해 재미있는 아이디어를 냈습니다. 바로 계단을 피아노 건반처럼 디자인 한 것

인데요, 계단을 오를때 마다 마치 건반을 누르듯이 소리가 나도록 만들었습니다.

User eXperience..

이 작은 변화는 사용자들의 행동변화를 이끌어 내며, 설치한 첫날 66%의 계단 사용률을 기록하

였고 에너지 절약과 더불어 운동이 부족한 현대인들의 발걸음을 자연스럽게 계단으로 유도하는

데 성공하게 됩니다. 사용자에게 ‘불편’,’불만’으로 다가올 수 있는 계단을 ‘수긍’,’유쾌함’,’이해’의

상황으로 풀어낸 것이지요.

웹도 이와 비슷합니다. 불편하거나 번거로운 경험을 주는 웹은 당장 사용자의 탐색을 중지하게

만들기도 하고 다시는 그 사이트에 찾아오지 않을 가능성을 주기도 하며 치명적일 경우 안티 유

저(Anti user)를 만들 수도 있습니다. 때문에 통계에 따르면 77%의 사용자는 사이트 접근에 실

패 후 다시는 그 사이트에 접속을 시도하지 않는다고 합니다.

(참고 : 고메즈 벤치마크 리서치 한국컴퓨터웨어 2012)

지금도 사용자의 감정은 요동치고 있습니다. 사람을 연구하고 경험을 분석한다는 것은 운영자의

입장이 아닌 사용자 입장에서의 고민이 그 출발일 것입니다.

작은 변화가 가져온 생활의 변화 - 동영상바로보기 ▶

4

INSIGHT.1 PC웹 운영전략 - 사용자의 감정을 읽는 Web - 상세 페이지에서의 +α 전략 - 검색이 잘 되는 비밀! 웹 개방

INSIGHT.2 모바일웹 운영전략 - 모바일웹 UI 가이드 이것만은 필수! - 핵심은 곳곳에! Touch를 부르는 업종별 전환 전략 - 모바일 웹에서 효율적인 정보전달을 위해 꼭 지켜야 할 10가지 가이드

ISSUE. 웹접근성 차별 없는 웹 환경 만들기

TREND. 사이트 트렌드 웹 사이트 트렌드 어제, 오늘 그리고 내일

CONTENTS

5

INSIGHT.1

PC웹 운영전략

6

사용자의 감정을 읽는 Web

사람은 잘못으로 여겨지는 상황을 맞이하면 먼저 감정부터 변화가 옵니다. 예를 들어, 유명하

다는 음식점에 갔는데 종업원의 서비스가 형편 없을 때 아무리 음식이 맛있다고 해도 다시는

그 음식점에 발걸음을 옮기지 않게 되는 것 처럼 말이지요. 때문에 ‘불편’과 ‘불만’은 전혀 다른

이야기 입니다. 불편은 개선해 볼 여지가 있지만 불만은 감정의 영역이라 그 마음을 회복시키

기 위해서는 엄청난 노력과 시간이 필요하기 때문입니다. 게다가 이러한 노력과 시간에도 불

구하고 감정의 100%회복은 보장할 수 없기 때문에 사용자의 감정을 예측하고 좋은 웹 환경

을 만들어 주는 것은 언제나 고민해야 할 과제입니다.

웹 페이지를 찾을 수 없습니다 – 404 에러

인터넷을 하다 보면 ‘404에러( 404 page not found error)’를 한번쯤은 보셨을 것

입니다. 링크된 페이지의 주소가 잘못되어 해당 링크를 찾을 수 없을 때 출력되는 메

시지인데요, 보통 브라우저의 주소 창에 주소를 오타로 입력해서 없는 페이지로 이

동했거나 애초에 잘못된 링크가 걸려있는 경우 [그림 1]과 같이 화면에 표시됩니다.

[그림 1] 인터넷을 사용하다 보면 익숙하게 만나는 404 에러 화면

7

우리에게는 어느 정도 익숙한 화면이긴 하지만 다시 봐도 이런 오류메시지는 굉장히

무뚝뚝하고 불친절해 보입니다. 이런 작은 실수 조차도 사용자에게는 커다란 불만

이 될 수 있고 이 감정이 그 사이트에 대한 전체적인 이미지로 각인될 수 있다는 사실

을 간과해서는 안됩니다.

이런, 길을 잃으셨나요?

[그림 2]는 해외의 영상 디자인 스튜디오의 404 에러 페이지 모습입니다. 미국 드라

마로 유명한 LOST 이미지를 광고판으로 보여주며 당신은 길을 잃었다는 상황을 재

미있게 보여주고 있습니다. 그리고 안내판을 이용해 이 오류페이지에서 벗어날 수

있는 방법도 알려줍니다. 여기에 지하철 역사에 도착한 지하철 문을 클릭하면 히든

영상도 보여 주는 데요, 이렇듯 미안한 마음으로 만들어진 404 error 페이지는 사용

자에게 분명 긍정적인 기억으로 남게 될 것입니다.

[그림 2-1] 404 error 페이지를 지하철 역사로 표현한 디자인 (참고 : http://www.bluedaniel.com/404 )

[그림 2-2] 히든 영상의 재미로 사용자 기억에 남기는 효과까지 덤으로!

지하철이 도착하고

문을 클릭하면 새로운

홍보용 영상을 보여

줍니다.

8

오히려 주목 받는 시간 – 로딩 페이지

웹 사이트는 가벼워야 합니다. 로딩이 길어지면서 이탈하게 되는 마음 급한 사용자

를 막고, 과도한 트래픽으로 웹사이트 방문이 부담스러워지면 안되기 때문입니다.

그럼에도 잘 만들어진 사이트가 장비, 네트워크, 이미지 소스, 서버 등 로딩에 영향

을 주는 다양한 문제들로 인해 어쩔 수 없이 로딩시간이 길어지게 되는 경우가 항상

발생합니다. 이렇듯 로딩시간이 길어짐으로 인해 불만을 느끼는 사용자들에게 우리

는 어떤 경험을 주어야 할까요?

사용자에게 로딩시간이 지루하고 짜증난다는 감정을 갖게하는 요인은 언제 100%

로딩이 될지 예측할 수 없는 상황일 때 발생합니다. 예측이 가능하다면 사용자는 그

만큼을 기다리거나 다음에 다시 찾거나 예고된 시간만큼 다른 활동을 먼저 할 수 있

을 것입니다. 사용자가 로딩 시간을 예측 가능하도록 편의성을 더해주는 것 만으로

도 불만은 줄어들 수 있습니다. 예를 들면, 앞서 이야기 한 404error 페이지처럼 재

미있는 로딩 화면을 구성해 보는 것 처럼 말이지요.

동영상 바로보기 ▶

[그림 3] 로봇이 시간이 지나 사람이 되는 모션으로 기다림을 지루하지 않게 만든 로딩 화면

9

상세 페이지에서의 +α 전략

사용자는 방문한 사이트에서 크게 탐색, 전환, 이탈 이라는 3가지 행동 패턴을 갖습니다. 탐

색은 경쟁사와 차별화된 메인 페이지에서 시작될 것입니다. 전환은 가장 마지막에 도착한 상

세 페이지에서 일어날 것입니다. 그리고 마지막 행동 패턴인 이탈은 사용자의 목적과 연관성

이 가장 높습니다.

그래서 우리들은 많은 시간을 메인에서의 이탈을 줄이기 위해 노력해 왔습니다. 그러나 이탈

은 선택 망설임이 큰 상세페이지에서도 일어나고 있습니다. 전환으로 이어지는 상세페이지에

서의 이탈 방지 전략은 그래서 메인 페이지의 전략 못지 않게 중요합니다.

남들과 다른 전략– 동영상과 포장이미지

사용자가 상세페이지까지 탐색하는 이유는 무엇일까요?

아마도 메인이나 중분류 카테고리에서 노출되는 정보보다 더 상세하고 정확한 정보를 얻고 구매나 서비스

를 이용하기 위한 결정을 고민하기 위해 이동해 왔을 것입니다. 이러한 고민을 흥미로 바꾸고 호감을 높일

수 있도록 ‘볼거리’를 풍부하게 제공한다면 사용자는 상세페이지에 머무는 시간이 늘어남에 따라 구매 선

택을 더 앞당길 수 있을 것입니다. 여기 재미있는 사이트를 한번 살펴보겠습니다.

[그림 1] 동영상을 통해 직관적으로 전달하는 상품 설명

동영상 바로보기 ▶

10

이러한 동영상 컨텐츠 사용시 주의할 점은 로딩속도가 느려지거나 재생에 필요한 추

가 프로그램 설치에 대한 불편함이 없도록 해야 한다는 것 입니다. 동영상 플레이로

웹사이트가 느려진다면 사용자는 당연히 이탈을 하게 될 테니까요. 때문에 이 웹사

이트 처럼 유투브를 활용해 보는 것은 시스템 안정성과 바이럴 측면에 큰 도움이 될

수 있을 것입니다.

여기 또 하나의 볼만한 웹 사이트가 있습니다.

상세페이지에서의 대부분은 사실 상품 이미지에 집중이 되는데요, 이 쇼핑몰의 경우

‘식품’이라는 상품을 판매하기 때문에 배송되는 이미지에 대해서도 크게 신경을 쓴

모습입니다.

일반적인 웹사이트에서는 사용방법을 하단의 설명부분에 이미지로 나열하는 것이

대부분이지만, 이 웹사이트의 경우 동영상을 첨부하여 사용방법을 보기 쉽게 전달하

고 있습니다. 덕분에 아래로 길게 늘어질 이미지 나열을 피할 수 있었고, 마우스 휠을

움직여야 하는 검지는 잠시 휴식 시간을 갖게 되었네요.

[그림 2] 모바일이 활성화되는 시점부터 쇼핑몰에서 동영상 컨텐츠 사용이 급증 하였습니다. (미국의 사례 참고)

비디오 커머스의 확대

11

[그림 3]은 상세페이지 하단에 배송될 상태와 포장 용기의 크기까지 잠정적 소비자

에게 보여줌으로써 믿을 수 있는 식품 배송을 강조하고 있습니다. 이것은 단순했던

사용자의 호기심을 사이트에 대한 신뢰감으로까지 변화시킬 수 있습니다. 배송 현

황만 언급하는 쇼핑몰이 대부분이라는 것을 생각한다면 어떻게 포장되어 소비자가

어떤 모습으로 받게 되는 것까지 보여주는 것은 쇼윈도 앞에서의 사용자 망설임을

구매로 연결시키는데 큰 도움이 될 것입니다.

[그림 3] 이제는 일반적인 상품설명 이외에 포장된 이미지까지 더해 경쟁사와 차별화를 이루고 있습니다.

사이트 바로가기 ▶

12

바로 이해되는 – 직관적 후기

최근에는 물건을 판매하는 쇼핑몰 뿐만 아니라 다른 업종에서도 후기를 활용하면서

사용자들 역시 먼저 상품을 구매했거나 자신과 비슷한 상황에 있는 경험자의 스토리

들을 찾아보고 사용을 결심하는 경우가 많아졌습니다. 그래서 사이트들은 누구나 할

것 없이 후기 이벤트를 하고 있습니다. 그러나 이제는 후기들을 나열하여 노출하는

전략 만으로는 경쟁이 되지 않습니다. 앞으로는 사용자의후기도 사이트의 경쟁력이

기 때문에 지금보다 더 다양한 방법이 필요합니다.

그 중 한가지로 한눈에 ‘이해할 수 있는 후기’를 보여 드리자면, [그림 1]처럼 상품에

대한 후기를 별점이나 점수로 표기하고 평균으로 보여 주는 방법이 있습니다.

[그림 1] 참여인원, 별점, 만족도를 그림으로 표현

그러나 전체적인 상품이 마음에 들었다고 해도 배송이 늦어지는 문제 등으로 후기점

수를 낮게 주는 경우도 있을 수 있습니다. 그런 부분을 방지 할 수 있도록 [그림 2]는

품질/가격/포장/배송 등 항목을 나누고 각각에 점수를 매겨 평균 평점을 주는 방법을

보여주고 있습니다.

이러한 방법들은 사용자 입장에서 구매나 서비스 이용을 결정하기까지의 시간이 매

우 단축됨은 물론 구매자 만족도에 대해 객관적 정보로 보여질 수도 있어 한 번쯤 시

도해 볼만한 후기작성 방법이라고 할 수 있겠습니다.

[그림 1]은 후기를

하나 하나 읽어보지 않

아도 먼저 구매한 사람

들의 평가를 총체적으

로 이해 하기가 매우

쉽습니다.

[그림 2] 별점에 대해서도 품질, 가격, 포장, 배송기간으로 나누어 상세 만족도를 표기

13

감동은 더 디테일 해야 한다 – 고객에게 필요한 것

사용자를 넘어오게 만드는 결정적 한방이라고 한다면 바로 제공되는 혜택들을 여기

저기 보여주는 것 일 텐데요, 이런 사용자 혜택이라고 해도 웹 사이트에서 집중적으

로 진행하는 내용은 대부분 할인이나 쿠폰 위주로 메인에서만 집중적으로 노출하는

경우가 많습니다.

[그림 3] 사용자에게 더 디테일 한 서비스라는 것의 차이

[그림 3]을 살펴보면 A쇼핑몰은 쿠폰과 적립금을 나눠주는 일반적인 마케팅을 하고

있는 반면, B쇼핑몰의 경우에는 일반적인 할인 혜택 이외에도 고가 브랜드 구매자가

가장 궁금해하고 걱정하는 것들 - 구매 후 3년 무상 A/S, 시계 배터리 무료 교환, 보

증서 동봉, 정식 A/S가능 등- 까지 구성하여 구매결정에 대한 고민을 덜어주고 있습

니다.

사용자는 빠르게 변화하는 기술과 마케팅에 스스로 진화하여 방법을 습득하고, 또

당연하게 다른 사이트에서 같은 모습을 기대하고 있습니다. 그러나 그들의 기대 만

족이 웹에 화려한 색을 입히거나 특이한 구조변화에서 오는 것은 아닐 것입니다. 사

용자에게 다가오는 감동은 ‘사용자는 누구인가?’ 라는 생각에서 시작된 운영자의 작

은 배려들을 그들이 느꼈을 때 시작되는 것이기 때문입니다.

14

국제적인 행사의 홈페이지가 검색이 안된다면 어떨까요?

검색이 잘 되는 비밀! 웹 개방

2010년 국제 정상회담 G20 개최 시 국문, 일어, 중어, 영어로 만든 공식 홈

페이지는 해외에서 검색이 되지 않아 어렵게 만들어 놓은 컨텐츠들이 노출도

되지 못한 채 잊혀진 사례가 있습니다. 또, 세계적인 가수 반열에 오른 싸이

(Psy)의 홈페이지 역시 빌보드 2위까지 올라갔음에도 그 소개 홈페이지가 해

외에서 검색되지 못하는 해프닝이 있었습니다. 이렇듯, 인터넷에 무한한 정보

가 있고 그 정보를 앉은 자리에서 찾는다고 하는 오늘임에도 검색이 되지 않

는 사이트들은 지금도 허다합니다.

15

검색이 안되는 이유

검색 창에 운영하고 있는 웹 사이트를 직접 검색해 본 경험이 있으신가요?

만일, 검색이 되지 않고 있다면, 검색이 안되는 이유는 또 무엇일까요?

검색 엔진에 키워드를 입력하였을 때 웹 서버는 검색 결과를 보여주기 위해 웹 페이

지들을 찾아보고 수집한 문서를 게시할 수 있게 선별하는 작업을 합니다. 이 과정에

서 검색 로봇이 웹 페이지를 탐색할 수 있어야 하는데요, 만일 해당 웹 페이지에 접근

차단이 설정되어 있게 되면 검색 로봇은 정보를 찾을 수 없게 되므로 찾지 못한 정보

를 제외한 결과만을 보여주게 되는 것입니다. 즉 검색이 안되는 이유는 웹 페이지에

대한 접근 차단인 것입니다.

검색 로봇의 접근 제한은 개인정보 또는 기밀문서 등에 대한 노출을 일부 제한하는

데 그 목적이 있습니다. 그러나 유독 국내에서는 완전 차단되거나 완전 개방된 경우

가 대부분입니다. 사용자의 불편함과 운영자의 목적이 모두 엇갈릴 수 있는 이 상황

을 해결해 나가기 위한 방안, 그것이 웹 개방성의 확대이며 잘못된 보안 인식 개선을

통해 사용자들의 정보 접근성을 높여야 한다는 것이 웹 개방성의 핵심입니다.

• 검색로봇이란?

스파이더(spider) 혹은 크롤러(crawler)라고도 불리며 검색 로봇은 웹에 있는 웹 페이지

를 방문해서 내용을 읽어오는 기능을 합니다. 참고로 각 검색엔진의 로봇에는 고유한 이름

이 존재하며, 네이버 로봇의 이름은 Naverbot이라고 부릅니다.

16

웹 개방 확인 방법 – 5가지

로봇 차단을 확인할 때는 웹 사이트(예 : http://www.example.com/ ) 에 접속한 후 브라우

저 주소창에 해당 웹 사이트의 주소 뒤에 /robots.txt (예 : www.example.com/robots.txt)

를 추가로 입력하고 엔터키를 누른 후 해당 페이지에 나타나는 결과에 따라 로봇을 배제하는

지 여부를 확인 할 수 있습니다.

① Not Found와 같이 페이지를 찾을 수 없다는 error 메시지는 모든 로봇에 대한

모든 문서 접근을 허용하는 형태 입니다.

② User-Agent에서 *은 모든 로봇을 지칭하며 모든 디렉터리에서 로봇의 접근을

허용(Allow)하는 형태 입니다.

1) robots.txt 파일을 통한 차단 확인 방법

③ Disallow라는 단어가 보여지는 형태는 검색 로봇이 모든 문서에 접근할 수 없도

록 완전 차단시킨 상태로 이와 같은 경우가 검색에서는 웹 페이지를 볼 수 없습니다.

④ 이와 같은 모습은 모든 로봇에 대해 /PDG/, /clife/ 이하의 페이지만 접근을

차단하고 나머지는 허용한다는 의미로 부분 개방, 부분 차단한 형태입니다.

1

2

3

4

17

noindex는 색인(게시)이 되지 않도록 하고 nofollow는 해당 웹 페이지에 포함된 링

크를 따라가지 않도록 하는 역할을 합니다. noindex/nofollow 태그는 해당 웹 페

이지에서 마우스 우측 클릭 시 ‘소스보기’에서 해당 태그가 포함되어 있는지를 찾기

(Ctrl+F)를 통해 쉽게 확인할 수 있습니다.

2) Noindex / Nofollow 태그 확인

만일, 소스보기를 통해 확인했을 때 [그림 2]처럼 표시되어 있으면 로봇은 색인을 하

지 못해 해당 페이지에 대한 정보를 저장하지 못하게 되어 해당 웹 페이지를 찾지 못

하게 됩니다.

따라서 무조건적인 색인 차단과 무분별한 보안 강화 보다는 합리적이고 효율적인 공

개로 컨텐츠의 존재 여부는 공개하고 실제 정보에는 접근하지 못하도록 조절이 가능

하므로 합리적인 판단에 의해 적절히 공개하는 것이 좋습니다.

[그림 1] 소스보기를 통해 어렵지 않게 확인할 수 있는 Noindex / Nofollow 태그

그리고 [그림 3]과 같이 설정되어 있다면 검색 로봇이 해당 페이지에 수록된 링크를

따라갈 수 없게 제한을 두게 되므로 효율적인 검색을 방해할 수 있습니다.

[그림 2] Noindex 소스보기

[그림 3] Nofollow소스보기

18

웹 사이트를 이용하다 보면 Active X 설치하라는 [그림4]와 같은 경고 문구를 본 경

험이 많이 있을 것 입니다.

3) Active X / Image / Flash 사용여부 확인

국내 상당수의 웹 사이트는 ActiveX로 인해 검색 로봇이 접근할 수 없어 웹 개방성

의 취지를 잘 반영하지 못하고 습니다. 또한 이미지나 플래시 위주로 만들어진 웹사

이트 역시 검색 로봇이 내용을 인식할 수 없어 웹문서 검색에서 누락시키게 됩니다.

이를 해결하는 방법은 웹 사이트 제작 시 웹 표준을 준수하여 ActiveX 사용을 지양

하고, 이미지 위주일 경우에는 Alt 태그를 입력하여 검색 로봇 접근이 가능하도록 해

야 합니다.

이 방법은 Chrome 또는 Firefox 등의 브라우저에서 User-agent Switcher기능을

설치하여 테스트 할 수 있는 방법으로 마치 검색 로봇이 사이트를 접근한 것으로 인

식하게 하여 웹 사이트가 검색엔진 로봇을 차단하고 있는지 쉽게 확인할 수 있는 방

법입니다. 사용자의 PC가 웹 사이트에 접근 할 때 해당 사이트가 로봇을 차단하고

있다면 [그림 6]과 같은 차단 메시지가 나타나 로봇 검색 차단 여부를 쉽게 알 수 있

습니다.

[그림 4 ] ActiveX를 설치를 안내하는 메시지

[그림 5] 좌 : 일반적으로 보여지는 이미지 ▶ 이 상태로는 검색 로봇이 인식할 수 없습니다. 우 : 커서를 올리면 보여지는 설명 텍스트 (Alt 태그 적용상태) ▶ 검색 로봇이 인식!

4) User-agent 기반으로 접근 차단 확인

19

User-agent의 접속 차단은 방화벽이나 서버에서 이루어지고 소프트 웨어마다 설정

하는 방법이 다르기 때문에 웹 사이트의 환경 및 보안 정책에 알맞은 방법으로 User-

agent 차단을 관리하고 있는지 확인해 보시는 것이 좋습니다.

웹 사이트와 그 안에 포함된 컨텐츠는 고유의 URL을 가지고 있습니다. 다만 해당 페

이지의 URL이 변경되었음에도 불구하고 주소창의 URL이 변하지 않는 경우 검색 로

봇은 이를 인식하지 못해 검색이 제한될 수 있습니다. 따라서 개인정보와 같은 보안

이 필요한 페이지를 제외하고 URL이 페이지에 맞게 변경되도록 설정 하는 것이 좋

습니다.

[그림 6] User-agent Switcher로 확인해 본 웹 사이트 차단 검사

5) URL 공개 또는 비공개 여부 확인

[그림 7] 메인에서 상세까지 url이 동일하면 검색 로봇은 검색을 할 수 없습니다.

User-agent Switcher

다운로드 바로가기

(IE에서는 다운로드 받으실

수 없으니 Chrome으로

접근해 주시기 바랍니다.)

Chrome 다운받기 ▶

Firefox 다운받기 ▶

20

“삼청동김C” Site Optimizer

새해엔 어른 될래요.

(올해, Mrs. 예약자 이십니다.祝)

“홍” Site Optimizer “수만이또” Creative Designer

1등!! 하고 싶습니다.

그 동안 참 운이 없었죠. 1주일의

행복이 이젠 현실이 되었으면 좋

겠습니다. 로또 대박을 꿈꿉니다.

2014년에는 재정 관리 똑순이가

되는 거에요. 서른을 앞두고 좀더

탄탄한 통장을 만들어놓고 싶어요.

생각만해도 벌써 부자가 된 것 같

아요

“꼬꼬” Site Optimizer

올해에는 가까운 문화센터에서 베

이킹을 배워보려고 합니다. 몇년

전 잠깐 흥미를 갖고 재료만 잔뜩

사놓고 사용을 안 했었는데요, 이

번엔 제대로 배워 주변에 선물도

주고 저만의 취미생활로 만들어보

려고요.

어렸을 때부터 이루고 싶었던 간절

한 꿈이 이루어졌으면 좋겠습니다.

그리고 함께 미래를 꿈꿀 수 있는

사람을 만났으면 좋겠습니다. (소곤

소곤) 꿈은 이루어진다★

“비타민” Site Optimizer “토토로” Creative Designer

“캐롤송” Site Optimizer

아가씨 때는 해마다 해외여행을

다녔는데, 유부녀가 되고 나니 맘

처럼 안되네요. 올해는 꼭!해외여

행을 가고 싶습니다.동남아,미국,

유럽,남태평양 어디든 골라 골라~

꽃보다 유부!!

몸꽝에서 몸짱되기 !!

체지방을 근육으로 바꾸기 위해

운동을 시작했습니다.

올해에는 비키니 입을 수..있겠죠?

여러분도 함께 운동해요.

전세 값 안정화!! 아흙흙...

매년 오르는 전세 때문에 첫 차를

살 돈이 몽땅 오른 전세비용으로

나가고 있습니다. 올해에는 제발

전세 값 좀 떨어졌으면 좋겠어요.

“꺽정이” Site Optimizer “설양” Site Optimizer

Web

site

ED

IT 칼럼니스트를

소개합니다

. 2014년에는

..?

비타민이란 닉처럼 나와 인연이

된 분들의 삶에 탄,단,지(아시죠?

3대 영양소^^)는 될수 없을지라

도 비타민의 존재로나마(소량이지

만 그래도 꼭 필요한) 남고 싶어요

^^

21

INSIGHT.2

모바일 웹 운영전략

22

모바일웹 UI 가이드, 이것만은 필수!

스마트폰으로 인해 전혀 모르는 곳에 가는 것이 두렵지 않는

모바일 라이프 시대.

뿐만 아니라 머무르는 공간에서도

활발한 트래픽을 일으키고 있어 PC 대체수단으로까지 떠오르고 있지만

그럼에도 사용자가 원하는 페이지까지 이동하기에는

불필요한 이동경로를 거쳐야 하는 경우가 아직도 허다합니다.

때문에 모바일 사용자의 특성을 파악하여

모바일에 최적화된 UI로 사용자의 중도 이탈을 방지하고

사용성을 늘릴 수 있는 모바일 웹 전략을 세우는 것은

놓칠 수 없는 모바일 웹의 핵심일 것입니다.

스마트 폰 사용은 이제 우리들의 일상입니다...

23

UI 네비게이션 일관성 유지

제한된 화면에서 제공하는 정보를 사용자가 한눈에 파악하고 원하는 페

이지로 자유롭게 이동하도록 하는 것은 모바일 웹에서 매우 중요합니다.

특히, 웹 페이지마다 메뉴의 위치와 모양이 다르다면 새로운 페이지로 이

동할 때마다 사용자는 같은 페이지를 보고도 서로 다른 페이지로도 인식

할 수 있고, 사용법을 다시 익혀야 하는 불편함이 생기기 때문입니다.

[그림 1] 메뉴의 위치와 디자인이 모든 페이지에서 동일해야 혼란스럽지 않습니다.

그 사례로 [그림 1]을 살펴보면 일정한 크기의 타이포와 컬러를 사용하고

있지만 메뉴 영역의 모습이 서로 다른 상태임을 볼 수 있습니다. 다른 페

이지로 이동했을 때 이와 같이 모습이 달라진다면 사용자가 겪을 불편함

을 우리는 예상할 수 있습니다.

메뉴 가독성 잠들기 전 어두운 침대에서나 출퇴근길 대중교통을 이용하며 모바일 웹

에 접속했을 때 화면의 배경과 컨텐츠의 컬러구분이 명확하지 않아 불편

했던 경험이 한번쯤은 있으실 텐데요, 이러한 불편함은 화면에 표시되는

모든 정보를 전경색과 배경색이 구분 될 수 있도록 최소 명도대비 3:1 이

상을 유지하면 좋은 가독성을 확보할 수 있습니다.

24

또한 화면 이동 요소들이 텍스트로 되어 있는 것 보다는 메타포가 강조된

효과적인 디자인이 적용 된다면 사용자는 더 편리하게 모바일 웹 사이트

를 이용할 수 있을 것입니다.

홈,뒤로가기 버튼의 사용

쇼핑사이트와 같이 원하는 목표까지의 방문 페이지가 많거나 상품이 많

아 여러가지를 비교해야 하는 경우를 위해 ‘뒤로 가기’ 기능이 있어야 합

니다. 만일 이 기능이 없다면 사용자는 이전화면으로 복귀가 어려워 어쩔

수 없이 종료를 하게 되거나 시간만 끌게 될 것입니다. 이렇듯 의도하지

않은 화면으로 이동 하였을 때, 전 단계 또는 초기 단계로 돌아가기 위한

통로로서 홈, 뒤로 가기 버튼은 꼭 필요하며 이러한 버튼 디자인은 직관

적일수록 좋습니다.

[그림 2] 홈, 뒤로 가기 버튼의 가시성 비교

[그림 3] 전 단계 또는 초기 단계로 돌아가기 위한 아이콘 및 버튼의 유무

AS-IS TO-BE

AS-IS TO-BE

▶

▶

25

코끼리를 냉장고에 집어넣는 법! Fly-out 메뉴

모바일 기기의 화면은 매우 한정적입니다. 이럴 때는 모바일 웹의 왼쪽에

메뉴를 숨기는 방식을 사용하는 것도 사용자의 이동을 줄이는 방법 중 하

나입니다. 이 방법은 한번의 터치로 메뉴전체를 노출하되 현재페이지는

잃지 않는 장점이 있으며, 이 방법은 페이스북에서 적용된 방식이기도 합

니다.

근래 에 비슷한 구조의 모바일 웹(혹은, 어플리케이션) 의 사용율이 높아

지면서 이러한 메뉴패턴은 대중화 되었습니다. 덕분에 많은 사용자들이

손쉽게 사용할 수 있는 방식이 되었기 때문에 사용자에게 낯설 수 있다는

걱정은 덜어 내시고 Fly-out을 활용해 보시기 바랍니다.

.

[그림 4] 화면전환 없이 예측 가능한 Fly-out 메뉴

26

핵심은 곳곳에! Touch를 부르는 업종별 전환 전략

쇼핑몰 구매 전환 (의류 및 잡화, 화장품 쇼핑몰 등)

모바일 상거래 초기, 모바일 웹사이트는

PC 웹 사이트의 보조 역할로 접속만 된다

면 그 역할을 다했다고 느낄 만큼 사용자

들의 기대치가 낮은 채널이었습니다. 하

지만 스마트 폰 사용자가 크게 증가하고,

다양한 기능과 기술로 무장한 모바일 서

비스와 결제 모듈이 등장 하면서 사용자

들의 시각도 점차 달라지게 되었습니다.

과거의 ‘접속만 잘 되면~’ 의미를 넘어서

모바일 웹의 탐색과 전환(Goal)까지 사

용자를 스마트하게 이끌어 줄 수 있는 모

바일 웹사이트를 기대하게 된 것이지요.

이렇듯 높아진 사용자들의 기대를 만족

시키는 것과 동시에 업종별 맞춤형 전환

전략이 필요해 진 것은 어쩌면 당연한 과

정일 것입니다.

작은 화면의 특성상 모바일 화면은 PC 모

니터에 비해 탐색 피로도가 높습니다. 때

문에 사용자가 자주 사용하는 컨텐츠를

사용자의 시선이 먼저 닿는 순서대로 배

치하여 사용자가 무엇을 보아야 할지 화

면 속에서 고민하지 않도록 하는 것이 가

장 중요합니다.

즉, 가능한 사용 횟수가 높은 컨텐츠를 우

선으로 배치하고, 동일한 기능들은 묶어

서 한눈에 들어 오도록 구성하는 것이 좋

습니다. 덧붙여, 비슷한 성격을 지닌 컨텐

츠끼리는 서로 가까운 위치에 배치시키

면 사용자의 주목도를 더 높일 수 있습니

다.

효율적인 정보제공 순서와 배치

27

색상/사이즈

바로 구매

하늘 청 자켓 [NEW 5%할인]

판매가

구매수량

상품옵션

75,000원

1 개

장바구니 찜하기

색상

바로 구매

하늘 청 자켓 [NEW 5%할인]

배송비 ( 2,500원, 3만원 이상 무료배송 )

장바구니 찜하기

사이즈

1 + -

색상/사이즈 PD2WO407 네이비 M PD2WO407 네이비 S PD2WO407 오렌지 M PD2WO407 오렌지 S

판매가 75,000원

[그림 1] 순서에 따른 배치, 그룹 구성의 예

아래 [그림 1] 사례를 비교해 보면, 사용자가 먼저 확인하는 정보대로 순서를 배치하고 기능별로 구분하여 묶어서 구성

한다는 것에 대한 느낌을 이해 하실 수 있을 것입니다.

색상/사이즈 혼재

AS-IS TO-BE

사용자에게 궁금한

가격배치

색상,사이즈를 분리 배치시킨

옵션 선택

▶

28

최소한의 정보입력을 통한 상품주문

모바일 웹의 입력 방법은 바로 손가락, 즉 터치 입니다. 모바일 웹에서 정

보를 입력하면서 오타 발생 문제라든지 버튼이 눌리지 않는 불편함에 대

한 경험은 누구나 겪어 보셨을 텐데요, 이 때문에 화면의 절반을 차지하

는 모바일 키보드를 통한 입력 방법은 가능한 지양하는 분위기 입니다.

그러므로 사용자가 구매나 상담을 위해 정보를 입력할 때, 최소한의 필요

항목들을 선별하여 보여주고 직접 타이핑보다는 항목 체크를 통해 입력

할 수 있도록 사용 환경을 개선해 준다면 입력 오류에 대한 불편함은 크

게 사라질 것입니다.

[그림 2] 키 입력 횟수를 최소화 ▶ 선택형으로 바꾸면 입력의 불편함을 개선할 수 있습니다.

AS-IS TO-BE

▶

29

비회원 구매를 놓치지 말자 – 체크아웃서비스

모바일 사용 경험으로 터치가 많이 되는 영역을 하나 더 꼽아본다면 회원

가입일 것입니다. 회원 가입 단계에서 사용자는 두 가지 케이스로 나뉘

게 되는데요, 가입 후 구매로 이어지는 케이스와 비회원 구매를 택하는

케이스 입니다. 하지만 이 두 케이스 모두 ‘많은 타이핑’이라는 번거로움

이 있습니다.

이 번거로움을 피할 수 있는 방법 중 한가지가 바로 결제시스템 제휴 서

비스입니다. 네이버에는 대표적으로 체크아웃 서비스가 있습니다. 번거

로운 모바일 웹에서의 회원 가입 없이 체크아웃 서비스 로그 인으로 즉시

구매를 진행할 수 있어 간편한 구매 단계를 원하는 모바일 사용자들에게

좋은 서비스가 되고 있습니다.

[그림 3] 많은 타이핑이 필요한 회원 가입 양식(좌)과 네이버 로그 인으로 바로 결제 가능한 체크아웃 페이지(우)

많은 타이핑이 소요되는 회원가입 양식

업체명

청자켓

VS

30

서비스업종 구매 전환 (배달, 금융, 병의원, 렌터카 등)

이렇듯 상세 제품명을 검색 한다는 의미는 다른 말로 모바일 사용자는 목

표지향적인 경향이 크다 라고 할 수 있을 것입니다. 그래서 가능한 모바일

웹의 전환 요소는 찾지 않아도 볼 수 있는 위치에 배치 시키고, 전환 요소

로 가는 이동경로를 최소화 시켜 사용자의 탐색에 대한 수고로움을 덜어주

어야 사용자의 이탈을 막을 수 있습니다. 특히, 서비스 업종의 경우 전화

통화가 가능한 스마트폰의 이점을 100% 활용하여 ‘바로 전화 걸기(Click-

to-call)’ 컨텐츠를 구성한다면 사용자의 상담/문의로의 전환에 효과적일

것입니다.

직관적인 상담/예약/견적

모바일 사용자는 pc대비 결과가 명확한 정답형 검색을 합니다.

예를 들어, pc에서 나이키, 백팩이라는 브랜드 명이나 제품군으로 검색

을 한다면 모바일에서는 나이키바람막이, 키플링 백팩과 같은 상세제품

명 검색이 상대적으로 많이 이루어지는 것을 확인할 수 있습니다.

[그림 4] 사용자 니즈와 효율성을 고려한 메뉴 구성

31

통화 실패로 빠져나가는 전환을 막자

덧붙여, 사용자가 원하는 일자와 시간을 선택 할 수 있도록 구성하여 사

용자가 원할 때 상담이 진행된다면, 사용자의 만족도도 높아지는 동시

에 통화 실패 확률은 낮아져 효율적인 상담이 가능해 질 수 있습니다. 사

용자를 배려한 적절한 통화 타이밍 설계로 통화 실패로 빠져 나가고 있는

전환까지 꼭 잡아보시기 바랍니다.

사용자 맞춤 전화 예약 서비스

방문 전환 (웨딩박람회, 병/의원, 커피숍 프랜차이즈 등)

1. 방문을 원하는 사용자에게 필요한 주변 위치 정보

음식점이나 병원 등은 방문의 목적이 크기 때문에 위치 정보가 중요한 전

환 요소입니다. 목적지에 도달하기 위해 사용자는 지도의 어떤 정보들을

확인하게 될까요? 바로 자신이 지나가게 될 경로에 있는 건물명 또는 지

하철역 등 위치 정보일 것입니다. 이런 사용자들에게 제공해 줄 수 있는

좋은 위치 정보 서비스는 모바일 지도 API 지도 입니다.

상담 신청

상담신청하기

성명

휴대전화

010 - -

개인정보 이용동의

항목을 입력하시면 상담원이 고객님께 전화로 안내 드립니다.

간편 전화 예약 서비스

성명

휴대전화

010 - -

통화시간

-일자 선택-

오전(09:00~12:00)

오후(13:00~18:00)

상담 예약하기

개인정보 이용동의

항목을 입력하시면 상담원이 고객님께 전화로 안내 드립니다.

AS-IS TO-BE

[그림 5] 전화 상담 신청&예약 화면 일방적인 상담 신청 페이지 예시(좌)와 사용자를 배려하여 통화시간 설정이 가능한 예시(우)

▶

32

모바일 지도 API [그림6]을 보시면 한눈에 이해가 되실 텐데요, 업체 기준으로 제작된 이

미지 지도와 모바일 API 지도 두가지 방식 중에 어느 것이 사용자가 선호

하는 위치정보 안내인지는 이미 짐작하실 수 있으리라 생각됩니다.

지금 나에게 가장 가까운 매장 정보

다수의 지점이 있는 경우, 사용자는 자신에게 가장 인접한 지점 정보를

얻고 싶어 할 것입니다. 위치 기반 서비스(LBS)는 이러한 사용자의 니즈

에 빠르고 쉽게 답을 제공합니다. 사용자의 현재 위치 정보 제공 동의 후

보여지는 가까운 지점들에 대한 정보는 어느 곳을 방문 할 것인지에 대한

사용자의 고민을 해결해 줄 것입니다.

[그림 6] 이미지 지도(좌)와 주변 확대/이동이 가능한 네이버 지도 API를 활용한 지도 예시(우)

위치 기반 서비스 (LBS)

가까운 지점 지역별 지점

내 현재 위치 사용에 동의 하시면 주변 지역의 가까운 지점의 정보를 조회할 수 있습니다.

가까운 지점 지역별 지점

지점 정보 <

분당점 경기도 성남시 분당구 서현동 254-1번지

1566-0000 매장지도

“http://m.naver.com에서 현재 위치 정보를 사용하고자 합니다. “

허용안함 승인

현재 위치에서 찾기

AS-IS TO-BE

▶

[그림 7] 위치 정보를 사용한 가까운 지점 예시

33

한국형 모바일 웹 모범사례 (Mobile Web Best Practices 1.0)

표준 규격

모바일 웹에서 효율적인 정보전달을 위해 꼭 지켜야 할

10가지 가이드

‘모바일 웹 표준 제작 가이드’가 필요해짐에 따라

2010년 7월 지식경제부에서는 사용자의 불편함을 최

소화하고 모바일 웹 편의성을 높이고자 ‘모바일 웹 콘

텐츠 구축 가이드’를 마련하였습니다. 이 가이드는

W3C(웹 표준을 제정하는 등 웹의 장기적인 발전을

위해 1992년에 창립된 인터넷 관련 국제 컨소시엄)에

서 제정한 웹표준을 준수하였으며, ‘한국형 모바일 웹

모범사례(Mobile Web Best Practices 1.0) 표준 규

격’이라는 제목으로 다음의 10가지 내용을 안내하고

있습니다.

본 10가지 가이드는 모바일 웹 환경에 맞는 사이트를

만들기 위한 기본적인 지침이므로 유저에게 좀 더 쉽

고 편리한 모바일 웹 제작을 위해 반드시 실현시켜 보

시기 바랍니다

34

3. 유해요소 제거

PC 웹에서 주로 많이 사용되는 팝업창, 프레임, 이미지 맵 등은 모바

일 기기에서는 사용에 제한적일 수 있으며 기능에도 문제가

발생할 수 있으므로 사용하지 않도록 설계되어야 합니다.

4. 장비 제한 주의

애플의 아이폰은 Mobile Flash Player를 지원하고 있지 않기 때문에, Flash로 제작된 웹사이트에 접근 시 Flash 영역이 Blank로 보여지는 등 웹사이트를 이용하는데 커다란 제약이 존재합니다. 따라서 이러한 대안으로 요즘은 차세대 표준규격이라 일컬어지는 HTML5를 사용하여 ActiveX, Flash, 실버Q라이트 없이도 그에 못지않은 동적인 구현을 처리하고 있고 호환성도 좋기 때문에 모바일 기기에서는 HTML5를 선호하고 있는 추세입니다.

5. 웹 네비게이션 최적화

웹 네비게이션을 최적화하기 위해서는 URI(Uniform Resource

Identifier)*를 짧게 하여 입력을 쉽게 하고 페이지 상단에는 최소한

의 네비게이션 메뉴바를 제공하는 등 사용자가 최소화된 행동으로

목적 페이지까지 이동할 수 있도록 하는 것을 고려해야 합니다.

6. 그래픽과 색상 확인

모바일 기기에서 그래픽과 색상 표현은 좁은 화면에서 가독성을 높힐

수 있는 가장 쉽고도 중요한 방법입니다. 텍스트가 아닌 이미지나 동

영상 등을 제공할 때에는 이를 설명하는 텍스트를 함께 제공해주어 사

용자의 이해를 도울 수 있도록 해야 합니다. 또한, 배경색이 있는 이미

지 텍스트를 사용할 경우에는 3대 1 이상의 명암대비를 유지하여 제

작하도록 합니다.

7. 가볍고 간결한 사이트

인터넷 접속이 불안정한 상태에서 모바일 웹 사용자가 이미지로 가득 찬 페이지를 보고 있다면, 이미지가 다 보이기도 전에 창을 닫게 될 확률은 높아질 것입니다. 스타일 시트의 용량 크기를 최소화하여 서버 사용의 무게를 가볍게 한다면 이러한 문제를 줄일 수 있습니다, 또한 스크롤은 될 수 있으면 한 화면에서는 한 방향으로만 스크롤하도록 하여 사용자가 쉽고 논리적으로 이용할 수 있도록 하는 것도 사용자의 시간과 비용을 절약하는 데에 도움을 줄 수 있습니다.

8. 네트워크 자원 절약

페이지 오픈 시, 웹 프로토콜* 기능을 활용하면 네트워크 부하와 대

기시간을 줄일 수 있습니다. 열린 페이지에서 사용자에게 제대로 알

려주거나 중지 방법을 제공하지 않는 한, 오토 리프레시(새로고침)

기능은 사용하지 않도록 합니다.

이 기능은 네트워크 부하와 로딩 시간이 길어져 사용자의 불편함을

초래합니다.

9. 사용자 입력 가이드

모바일 기기에서 키보드 입력은 불편하게 느껴집니다. 따라서 키보

드 입력 횟수를 최소화할 수 있도록 하고 가능하면 미리 선택된

기본값(Default)을 사용할 수 있도록 제공하며, 입력 폼에는 설명 레

이블을 넣어 사용자가 직관적으로 이해하고 입력할 수 있도록

해야 합니다.

10. 모바일 유저 배려

시간이 부족하고 다양한 상황에 있을 수 있는 모바일 사용자들을 위해 한 눈에 의미를 파악할 수 있도록 간단 명료한 페이지 제목을 제공해야 합니다. 또, 페이지의 내용도 간단 명료하게 서브 타이틀로 정리하여 다음 페이지의 내용까지 예측할 수 있어야 합니다. 상황에 따라 보고 있던 페이지를 일정 시간 뒤에 다시 볼 수도 있으므로 페이지 내에 현재 로케이션을 파악할 수 있도록 하여 다양한 상황에 놓인 모바일 유저를 배려할 수 있어야 합니다.

1. 하나의 웹을 위한 설계

다양한 디바이스와 플랫폼들간의 크로스 사용이 어려움에 따라, 어

떤 모바일 기기와 OS를 사용하여 사이트에 접속하더라도

동일한 기능과 정보를 제공하여 일관성을 갖추어야 합니다. 만약,

안드로이드와 iOS 플랫폼에서 같은 주소의 모바일 웹 사이트 접속

시 다른 UI를 보인다거나 어느 한쪽의 플랫폼에서는 보이지 않는

기능이 구현되고 있다면 사용자에게 동일한 웹사이트를 제공하였

다고 보기 어렵습니다.

2. 웹 표준 준수

웹 표준은 다양한 접속 환경 속에서 인터넷 사용자가 정보를 동등하

게 이용할 수 있도록 하기 위해 국제 표준 방식에 따라 제작하는 것

을 말합니다. 웹 표준을 지키기 위해서는 국제 웹 표준 기구인

W3C(World Wide Web consortium)가 제안하는 표준 방식에

따라 개발되어야 하고, 일부 디바이스에서 지원되지 않는 기술과 포

맷은 사용하지 않도록 해야 합니다.

35

4%

54%

69%

41%

7%

6%

4%

13%

한국

Glob

al

Small phones

Medium phones

Phablets

Small tablets

Full-size tablets

스마트폰 세상 들여다보기

한국에는 3.5인치 이하는

없었으며 최대 4.9인치

일반 스마트폰이 54%,

5~6.9인치 패블릿 제품이

41%를 차지!

패블릿의 시발점인

삼성전자의 갤럭시노트

(Galaxy Note)가 삼성전자의

국내 시장 점유율

60% 장악의 발판

전세계 5~6.9인치 태블릿 7%, VS 한국 5~6.9만 패블릿(노트) 41%

출처 : Post 모바일 앱, What's next?, KT경제연구소 2013.12

전세계 97,963 iOS/Android 기기 분석 결과, 한국 태블릿 점유율 특이

한국은 태블릿 아닌 패블릿(태블릿+폰) 세상!

1. 스마트폰 첫 포화 진입 국가, 한국의 특이점은 무엇일까요?

36

스마트폰 세상 들여다보기

51%

49% 24%

17%

14%

14% 15%

7%

Android

iOS

Games Entertainment

SNS Utilities

Music Other

iOS 카테고리는

엔터테인먼트 위주

안드로이드는

활용성 위주 소비

iOS 엔터테인먼트 24% VS 안드로이드 SNS 17% 유틸리티,툴 14%

출처 : Post 모바일 앱, What's next?, KT경제연구소 2013.12

OS별 상이한 앱 소비시간. 모바일 OS 상관없이 1위 게임.

다음순위로 iOS는 엔터테인먼트, 안드로이드는 SNS!

2. 모바일운영체제 안드로이드 vs iOS. 어떤 앱을 가장 많이 활용하나요?

37

ISSUE

웹 접근성

38

오히려 주목 받는 로딩시간

차별 없는 웹 환경 만들기

“웹의 힘은 그것의 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할

수 있는 것이 필수적인 요소이다!”

(The power of the Web is in its universality, Access by everyone regardless of disability is

an essential aspect.)

-팀 버너스 리(Tim Berners-Lee)

여기서 모든 사람이라 함은 웹을 직업으로 가진 저 뿐만 아니라 어린이, 노인,

외국인, 그리고 장애인들까지 모두를 말합니다. 하지만 대다수의 사이트에서 그

사용자의 영역 안에 장애인들은 늘 배제되어 왔던 것이 사실입니다. 보지 못하

는 시각장애인이 웹을 이용하거나, 듣지 못하는 청각장애인이 웹을 이용하는 환

경을 고민하면서 사이트를 만들기에는 우리나라 웹의 발전 속도가 그 이상으로

빨랐던 것 같습니다.

불편함과 복잡함 속에서 인터넷을 이용하고 있는 사람들

“장애인에게 필요한 것은 줄기세포가 아니라 IT기술!” - 서울대 이상묵교수

‘서울대의 스티븐 호킹’으로 불리는 이상묵 교수의 재활 사례는 충격적이다.

2년 전 미국에서 자동차 사고를 당해 목 아래로는 모두 마비됐지만 정보기

술(IT)의 도움으로 다시 강단에 서게 된 것이다. 이 교수가 장애인에게 당장

필요한 것은 줄기세포가 아니라 IT 기술이라고 지적한 그 한마디는 우리 사

회를 향해 보조공학의 유용성과 절실함을 깨우치는 일갈로 들렸다. 당장 고

통 받고 있는 사람들에게 이미 개발된 기술들을 접목해 일상과 직업생활에

참여할 수 있게 도와주는 효율적인 행정서비스체계를 구축해야 한다.

(출처 : 동아닷컴. 이상묵 교수 재활, 한국에선 가능했을까)

39

차별

없는

웹 환

경 만

들기

주위의 도움을 받지 못하면 방에서만 지내야 하는 이들에게 인터넷은 우리의 ‘눈’과도 같은 존재일

것입니다. 비장애인들이 아무런 불편을 느끼지 못하는 웹 컨텐츠라도 장애인들이 사용하기에는 어

려울 수 있습니다. 그렇기에 웹을 이용하는 사람들간의 정보격차를 줄이는 것은 더욱 필수적인 요

소로 자리잡고 있습니다.

[그림 1-1] 유투브에서의 웹 접근성 적용 : 동영상 자막 無

[그림 1-2] 유투브에서의 웹 접근성 적용 : 동영상 자막 有

40

차별

없는

웹 환

경 만

들기

[그림 1]은 전체적으로 동영상 이지만, [그림 1-1]과 다르게 [그림1-2]에는 ‘자막’이 있습니다. 만

일 여러분에게 스피커가 없다면 위에 있는 동영상 이미지를 보고 무엇을 설명하고 있는지 단박에

알 수는 없을 것입니다. 청각 장애인도 마찬가지 입니다. 소리를 듣지 못하니 위에 있는 이미지를

보고 무슨 설명이 나오고 있는지 알 수 없을 것입니다. 그러나 [그림 1-2]처럼 자막이 제공된다고

하면 이야기는 달라질 것입니다. 스피커가 없는 비 장애인도, 듣지 못하는 청각 장애인도 동영상의

내용을 자막을 통해 이해할 수 있게 됩니다.

• 웹 접근성의 탄생 배경

한국에서는 2008년 ‘장애인 차별금지법’이 도입되면서 제도적인 장애인 권리향상 움직임이 본격화됐다

고 볼 수 있습니다. 이 가운데 있는 것이 웹 접근성이며 정보통신, 의사소통 관련 편의제공 차원에서 장애

인이나 고령자 등이 신체적, 기술적 여건과 관계없이 웹사이트를 통해 일반인과 동등하게 원하는 서비스

를 이용할 수 있도록 적절한 수단이 제공돼야 함을 강조한 제도라고 볼 수 있습니다.

이에, 우리나라는 2008년 ‘장애인차별금지 및 권리구제 등에 관한 법률(이하, 장차법)’을 제정하게

되었습니다. 장차법은 장애인 및 고 연령층의 약자들과 더불어 살아가는 차별 없는 사회를 목표로

2015년까지 단계적으로 적용범위를 늘려나갈 계획으로 수립되었으며, 5단계였던 2013년 4월

11일에는 모든 법인 사업장까지 ‘장애인 차별금지’에 대한 내용이 확대 되면서 웹 접근성이 중요하

게 자리잡게 되었습니다.

[그림 2] 장애인차별금지법의 단계적 시행

41

차별

없는

웹 환

경 만

들기

해외사례 )

미국의 Target사는 우리나라의 이마트, 홈플러스와 같은 대형 할인매장으로, 미국 내 47개 주에

1,648개의 점포와 함께 온라인 쇼핑몰도 함께 운영하고 있습니다.

이제는 법으로 규제한다 - 웹 접근성 소송

[그림 3] 미국 Target 쇼핑몰 (국내 이마트와 같은 대형 할인매장)

어느 날, Bruce Sexton 학생은 물건을 구매하기 위해 이 온라인 쇼핑몰에 접속하였습니다. 그러나

시각장애인인 자신이 이 웹사이트를 이용하기에 어렵다는 것을 알게 되었습니다. 이러한 불편했던

경험은 -장애인을 위한 대체 텍스트를 제공하지 않고, 키보드만으로 구매가 불가능한 상황- 미국

장애인 법(ADA : Americans with Disabilities Act) 위반을 근거로 소송에 이르게 됩니다.

이 소송은 가장 대표적인 웹 접근성 소송으로 2006년에 시작되어 2008년 8월 27일이 되어서야

그 결과가 발표되었는데요, 결과적으로 Target사는 미국 장애인 법을 위반한 것으로 판결 되었고

소송인들에게 600만 달러( 약 70억 원)를 배상하라는 판결을 받게 되었습니다.

여기서 우리가 중요하게 살펴야 할 내용은 Target사는 금전적 보상 뿐만 아니라 웹 접근성을 위해

노력하겠다는 취지로 이후 3년 동안 장애인이 편리하게 쇼핑몰을 이용할 수 있도록 노력하겠다고

자체적인 발표도 했다는 것입니다. 이후, 미국 장애인 법 (ADA)이 20주년이 되었던 2010년에는

인터넷도 미국 장애인 법의 편의제공 의무에 포함 됨을 명시하게 되었습니다.

42

차별

없는

웹 환

경 만

들기

국내사례 )

한국에서는 대표적으로 한국 장애인 재단의 시각 장애인 10여명이 대한항공을 대상으로 한 소송

이 있었습니다. 소송의 내용은 대한항공 홈페이지가 시각장애인 웹 접근성을 보장하지 않아 재산

적·정신적 손해에 대한 내용이었습니다. ( 2012년 11월 )

[그림 4] 국내 웹접근성 소송을 통해 홈페이지 수정을 조정 결정한 대한항공 - 관련기사 바로가기 ▶

법원은 이 소송을 조정 절차로 넘겼고, 조정 절차에서 확정된 내용에 따라 대한항공은 2014년 11

월까지 '한국형 웹컨텐츠 접근성 지침(KWCAG 2.0)'에 맞춰 시각장애인들이 불편 없이 웹사이트

를 이용할 수 있도록 2014년 5월 31일까지 홈페이지를 KWCAG 2.0에 따라 수정 보완하기로 하

였습니다. 또한 수정, 보완 후에도 대한항공 홈페이지가 KWCAG 2.0에 미치지 못할 경우 2014년

11월 30일까지 2차적으로 수정, 보완하기로 협의 되었습니다. 국내 법원의 판결이 아닌 조정 결정

이었다는 점은 아쉬움으로 남지만, 장애인차별금지법의 구체적 규범력을 확인한 의미 있는 결정이

었다고 할 수 있습니다.

사실, 대다수의 기업들은 적절한 대체수단을 제공하면 그것으로 된 것 아니냐는 항변을 하곤 합니

다. 대한항공도 비슷한 주장을 하였습니다만, 이것은 장애인을 일반 소비자로 생각하기보다 부가

적 서비스 이용대상자로 여기는 것으로 이러한 분리 수용(segregation)은 그 자체로 이미 장애인

을 차별하고 있다는 것임을 우리는 깨달아야 할 것입니다.

웹 접근성의 이해를 돕기 위해 준비했습니다.

웹 접근성의 이해 파일 다운받기 ▶

*본 칼럼을 보시려면 PDF 전용뷰어가 필요합니다.

43

차별

없는

웹 환

경 만

들기

내 손안의 웹에서도 차별 없는 세상

“단언컨대, 본다는 것은 가장 큰 축복입니다.”

어릴 적 열병을 앓아 눈과 귀를 잃은 헬렌켈러의 자서전 ‘ 사흘만 볼 수 있다면 ’에 나오는 구절입니

다. 국내 스마트 폰 제조사의 TV-CF에 이 구절이 등장하면서 우리에게는 이제 익숙한 메시지가 되

었는데요, 이제는 이 메시지를 통해 장애인들이 어떻게 스마트 폰을 사용하는지에 대한 생각을 해

야 할 시기가 되었다고 생각됩니다.

[그림 5] 휴대폰 제조사 P사의 TV-CF 영상

[그림 6] 자료는 NIA 한국정보화진흥원의 최근 5년간의 정보격차 실태조사(2012년 발표) 내용으

로 소외계층 (장애인/장노년층/농어민/저소득층) 모바일 정보화 수준은 평균적으로 일반 국민대비

27.8%로, PC기반에서의 정보화 수준인 74%와 비교하여 스마트기기인 모바일 환경에서 격차가

더 큰 것을 확인할 수 있습니다. 국내 스마트 폰 보급이 4,000만대를 향해 달려가고 있지만 자료에

서 보듯이 소외계층은 정보화라는 시대 흐름 속에서 오히려 스마트폰을 통해 소외되고 있습니다.

[그림 6] 2012 한국정보화진흥원 정보격차 실태조사 - 소외계층 모바일정보화수준

44

이를 해결하기 위해서 우리가 시급하게 준비해야 하는 것이 모바일 웹 접근성 입니다. PC웹에서

한발 더 나간 모바일 웹에서의 차별 없는 사용성은 아침부터 잠들 때까지 놓을 수 없는 스마트 폰

사용의 특수성 때문에 사실 더욱 중요합니다.

조선 시대 태종은 '명통시(明通寺)'라는 시각장애인 단체를 만들어 적극적으로 시각장애인들을 지

원했다고 합니다. 조선 시대의 장애인은 지금에 비해 편견과 차별로부터 자유로웠으며, 장애인과

비장애인을 구분 짓고 장애를 '특별히' 차별하기 시작한 건 오히려 근현대의 일이었다는 어느 역사

학자의 주장은 2014년을 살아가고 있는 우리들을 부끄럽게 합니다.

온 국민이 2년에 한 번씩 스마트 폰을 바꾸는 오늘날 장애를 이유로 인터넷 세계에서 차별 받지 않

아야 한다는 요구는 아주 소박한 바램이지 않을까요? 더 이상 인터넷의 바다에서 어떤 환경의 사

용자라도 길을 잃는 일이 없도록 해야 하는 것은 현재를 살아가고 있는 우리의 의무이자 책임일 것

입니다.

차별

없는

웹 환

경 만

들기

45

웹 접근성, 누구를 위한 것일까요?

쉽게 풀어보는 Web Accessibility Quiz

웹접근성 지침은 언제부터 적용해야 하나요?

악의적인 차별이 확인될 경우 법적으로 ■년 이하 징역 또는 ■ 천만원 이하

의 벌금이 부과됩니다. ■ 에 들어갈 공통적인 숫자는 무엇일까요?

아래 도표를 비교해 보았을 때, 웹 접근성 지침이 반영된 도표는 어느 것일까요?

파란색 = A 빨간색 = B 초록색 = C

A

B

1

* 힌트 : 2013년 4월 1일부터 웹접근성 의무화가 진행 되었습니다.

2

3

4 * 힌트 : 흑백 모니터로

출력했을 때 컨텐츠를 구분할 수 있어야 합니다.

.

1. 숫자 9 2. 숫자 70 3. 숫자 3 4.숫자 200

1. 롸잇나우~ 2. 3000년 부터~ 3. 10년 전부터 4.모레부터

1. 포유동물 2. 90세 이상 노인 3. 외계인 4.모든 사람

1. 2. 3.

46

TREND

웹사이트

트렌드

47

인터넷을 둘러싼 환경이 시시각각 변하는 만큼 웹 디자인의 트렌드도 빠르게 변화

하고 있습니다. PC에 한정 되었던 웹 환경은 태블릿, 스마트 폰 등 다양한 디바이

스가 수시로 출시됨에 따라 큰 폭으로 확대 되었으며 이런 흐름에 따라 사용자들

은 디바이스 별로 최적화된 모습을 원하고 있습니다. 여기에 소셜화와 개인화가

강조되면서 컨텐츠와 메뉴 구성도 개개인 취향에 맞게 구성할 수 있는 플랫폼까지

요구되고 있는 상황이 바로 오늘 입니다.

웹 사이트 트렌드 어제, 오늘 그리고 내일

올해는 유난히 반응형 웹에 대한 관심이 높았던 한 해였습니다.

반응형 웹 이란, 다양한 디바이스 (휴대폰에서부터 데스크 탑, 태블

릿PC에 이르기까지)에 대응하여 최소한의 변화로 내용 탐색을 쉽게

하고, 사이트를 최적의 형태로 제공하는 기술입니다. 쉽게 말해, 그

릇의 모양에 맞추어 형상을 변화시키는 액체처럼 컨텐츠를 담고 있

는 디바이스에 맞추어 그 형태를 변화시켜 보여주는 디자인이 반응

형 웹 디자인 입니다. 반응형 웹 디자인은 유연한 레이아웃에 대응하

여 항상 최적의 화면을 제공하기 때문에 다양한 스크린 사이즈를 지

닌 디바이스에 적용 될 수 있습니다.

2013년 웹 디자인 트렌드 돌아보기

반응형 웹 (Responsive web)

48

플랫디자인 (Flat design)

최근 웹뿐만 아니라 모바일 전반을 아우르며 UI디자인의 트렌드도

변화하고 있습니다. 실제 모습 또는 재질감 등을 다른 매체에 그대로

구현하는 방식인 스큐어모픽 디자인은 최근까지도 많은 애플리케이

션에서 사용되고 있었습니다. 그러나 다양한 해상도 기기에서는 일

관된 느낌을 전달하기가 어렵고 그래픽요소가 많이 들어간 장식적

인 요소 때문에 공간의 효율을 떨어뜨린다는 단점이 드러나다 보니

유행은 점차 평평한 느낌의 깔끔한 인터페이스와 심플한 모습의 플

랫디자인이 2013년의 웹 트렌드로 자리잡게 되었습니다.

플랫디자인의 본질은 심플하고 전체적으로 미니멀리즘 한 디자인입

니다. 너무 많은 부가적인 요소들은 생략하고 심플한 컬러와 텍스트

로 디자인 된다는 것이 주요 특징입니다.

플랫디자인은 ‘Flat’의 평평한, 고른, 이라는 사전적인 뜻과 같이 디자인의 입체적인 기능과 같은 복잡한 요소를 배제하고 기본적인 요소들인 레이아웃, 대비, 색상, 폰트 등을 이용해 디자인한 것 입니다. 쉽게 말해 '납작한’ 그래픽 요소라고 할 수 있습니다. 플랫디자인의 차별화된 디자인적 특징은 다음과 같이 다섯 가지로 요약해 볼 수 있습니다. ① 심플한 아이콘 ② 배제된 효과 ③ 타이포그래피 ④ 단순한 컬러

AS-IS TO-BE

[그림 1] 좌: 스큐어모픽 디자인 / 우 : 플랫디자인

▶

49

해상도 발전에 대처하는 우리들의 자세

디스플레이의 종류가 늘어나면서 디스플레이를 구성하는 화소수도

다양해지고 있고, 모니터와 스마트 폰의 해상도도 그에 따라 점차 높

아지고 있습니다. 이러한 해상도 변화에 따라 기업들은 앞다투어 레

티나 디스플레이를 탑재하여 가벼우면서도 고밀도의 해상도를 가진

제품들이 출시하고 있으며 레티나를 지원하는 웹도 함께 증가하고

있습니다.

레티나 디스플레이란 망막이라는 뜻을 가진 ‘레티나(Retina)’와 ‘디스플레이(Display)’라는 단어를 결합하여 만든 용어로, 인간의 망막으로 구별할 수 있는 인치당 픽셀 수를 넘어서는 고해상도의 의미를 강조하고자 붙여진 이름입니다.

2014년 웹 디자인 트렌드 예측

[그림 2] 일반디스플레이(좌)와 레티나 디스플레이(우) 해상도 비교

더 나아가 현재는 시네마 스타일의 스마트 폰이 발표되면서 레티나

보다 더 선명한 고퀄리티 이미지 구현이 가능한 4K 해상도 또한 많

은 관심을 받고 있습니다. 공식적으로 울트라HD 또는 울트라 고화

질로 알려진 4K는 구체적으로 4096 x 2160 픽셀을 말합니다. 레티

나 디스플레이에서 4K로 발전하는 것은 바로 고화질의 다양한 디바

이스의 대중화가 성큼 다가왔기 때문입니다. 이렇듯 빠르게 변하고

있는 해상도 기술의 발전은 2014년에는 특히 눈 여겨 보아야 할 기

술입니다.

50

웹 디자인, 이제 평균이 아닌 보편에 맞춰야 할 때

2013년 ,장차법이 시행되면서 개인 웹사이트와 블로그를 뺀 모든

법인 등록 웹사이트와 공공기관 웹사이트는 장애인도 주요기능을

활용할 수 있도록 웹 접근성을 보장해야 한다는 내용을 이미 많은 매

체를 통해 들어보셨을 것입니다.

이에 따라 보편성에 중점을 둔 디자인 개념인 유니버설 디자인

(Universal design)이 다시 주목받게 되었는데요, 유니버설 디자인

이란 성별, 연령, 국적, 문화, 장애의 유무에 상관없이 누구나 손쉽게

사용할 수 있는 제품 및 사용환경을 만드는 디자인으로, 모든 사람을

위한 디자인 (Design For All)이라고도 합니다.

장차법에서 말하는 웹 접근성의 주요 대상은 장애가 있는 이용자이

며, 목적은 그 대상들이 웹을 사용할 수 있게 하는 것이라면 유니버

설 디자인은 어느 누가 사용하여도 편리한 디자인을 창조하는 것입

니다. 최근에는 누구나 쉽게 읽을 수 있는 가독성 있는 UD 서체까지

사용되어지고 있습니다. 이제 접근성은 기본이고 더하여 사용성을

높이기 위해 고민해야 합니다.

[그림 3] 국내 유니버설 디자인 사례_저상버스

51

진화하는 IT, 사물 인터넷 internet of things

생활 속 사물들을 유무선 네트워크로 연결해 정보를 공유하는 시대

가 다가왔습니다. 사물 인터넷이란, 인터넷을 기반으로 모든 사물을

연결하여 사람과 사물, 사물과 사물 간의 정보를 상호 소통하는 지능

형 기술 및 서비스를 말합니다.

나이키는 퓨얼밴드를 통해 전세계 800만 사용자의 신체 데이터를

실시간으로 수집하고, 그를 분석한 결과를 다시 사용자의 아이폰으

로 전송해 줍니다. 손목에 찬 작은 밴딩 형태의 기기를 통해 착용자

의 운동량과 칼로리 소모량이 측정되는데요, 스포츠의류 회사에서

왜 이와 같은 기기를 만들었을까요? 그것은 바로, 즐겁게 운동하게

만드는 동기부여를 통해 나이키 고객의 충성도를 높이기 위함입니

다.

LG에서는 전세계 3억 명 이상의 가입자를 보유하고 있는 LINE메신

저를 통해 집안의 가전기기를 제어하는 <홈챗>이라는 사물인터넷

시스템을 발표하였습니다. 이 시스템의 특징은 음성 인식 수준을 넘

어선 메신저 대화를 통해 기기를 제어할 수 있다는 것인데요, 이 시

스템은 LG 상품들로 생활을 구성했을 때 가능한 시스템 입니다.

여러분의 브랜드를 사랑하는 충성고객이 있으신가요?

많은 기업들이 사물인터넷과, 웨어러블(wearable, 착용할 수 있는)

디바이스를 활용한 아이디어로 브랜드 가치를 높이는 계기를 마련

하고 있습니다. 좋은 브랜드 경험을 전하기 위해, 브랜드 스토리를

어떻게 만들어야 하는지에 대한 고민이 사물 인터넷이라는 새로운

경험으로 보여지고 있는 것입니다.

나이키사의 웨어러블 디바이스 : 퓨얼밴드

CES2014에서 발표된 LG의 홈챗

52

숫자로 보는 IT 트렌드

40개 설치한 앱 수(평균)

앱 사용의 보편화

59% 스마트 폰 이용 장소-집!

이동중에 사용하는 기기였던 스마트 폰의 이용 장소의 변화. 주 이용 디바이스로 자리 잡혀가는 느낌

2,000만 우리끼리 소통하는 네이버 ‘밴드’ 2000만 다운로드 돌파

부상하는 3세대 SNS. 네이버 ‘밴드’, 카카오의 ‘카카오그룹’,SK컴즈의 ‘데이비’ 등 모바일과 연동한 폐쇄형 SNS의 잇따른 등장 초기 SNS의 불필요한 정보 및 과도한 개인 정보 유출 등 소셜 피로감 증가, 지인 중심 서비스 인기

출처 : ‘the new multi scree world’, Google & Ipsos 2013.08

출처 :'Our mobile planet', Google 2013.05

2013년 10월

2013년, 약 200여 광고주께서 NSM의 웹 컨설팅을 경험하였습니다.

WIZWID

wizwid.com / m.wizwid.com

소녀나라

sonyunara.com / m.sonyunara.com

NANING9 naning9.com / naning9.com/m

규림한의원

kyurim.com / m.kyurim.com

1

2

3

4

1

2

3

4

광고주님의 성공파트너가 되겠습니다!

NHN Search Marketing은 네이버㈜ 내

부 조직으로 검색광고 서비스를 시작했으

며, 보다 전문화되고 고도화된 서비스를

제공하기 위해 NAVER Business

Platform이 2010년에 설립한 온라인 마

케팅 컨설팅 전문 기업입니다.

NHN Search Marketing은 지속적인 서

비스 개선과 혁신을 통해 광고주님에게

보다 나은 서비스를 제공하고 있으며, 국

내 1위 검색광고 시장의 리더로서 건전한

성장을 이끌어 나가고 있습니다.

2010~2013년 4년 연속

네이버 검색광고 광고주 수, 취급액 1위

「2013 온라인광고 마케팅 대상」

마케팅전략기획부문(검색중심) 대상 수상

키워드광고 고객센터

홈페이지

광고주센터

A-Square

Copyright © NHN SEARCH MARKETING Corp. All rights reserved.

1566-3265

http://www.nsm-corp.com

http://searchad.naver.com

http://www.a-sq.co.kr