Web Site Consulting ‘전문가 칼럼’

N SEARCH MARKETING

NSM 사이트 컨설팅 전략에 대한 서른 일곱 번째 이야기!

2015

웹디자인을

스토리텔링하다

CONTENTS

01.

02.

03.

4p

2015년 Visual & UX 디자인 트렌드

5~8p

첫 번째 키워드, Big (크게 더 크게!) 수 만 마디 말보다 단 하나의 이미지가 더 강력하다

1) 화면을 꽉 채우는 현실세계 이미지

2) Big 타이포그래피

9~14p

두 번째 키워드, Quick (빨리 더 빨리!) 액션을 유도하는 (*Call to action) 직관적인 디자인

1) 고스트 버튼(Ghost button)의 활용

2) 소셜 로그인(Social login) 트렌드

04. 15p

웹 디자인 트렌드는 예측이 아닌 발견! 글을 마무리 하며

2015년 웹 Visual & UX 디자인 트렌드

새해가 밝아오면 우리는 설빔을 차려 입고 서로의 복을 빌어주기 위해 인사를 나눕니다.

이와 비슷하게 웹과 관련된 연구소, 컨설팅 기업이나 전문가들도 마치 서로에게 안부 인사

를 나누듯 마케팅과 디자인 전망에 대하여 올해의 트렌드, 키워드 등으로 엮어 공유합니다.

그렇지만 한 해가 바뀌었다고 해서 갑자기 새로운 웹 트렌드가 불쑥 튀어나오지 않으며,

2014년의 트렌드와 크게 다르지 않는 연속선상에 놓여있을 수 있습니다. 하지만 2015년

의 트렌드는 2014년과는 분명 다른 점이 있습니다. 이번 칼럼에서는 2015년의 웹 Visual

& UX 디자인 트렌드가 작년과 무엇이 다른지에 대해 살펴보기로 하겠습니다.

올해의 웹 디자인 키워드는?

시시각각으로 바뀌는 IT환경과 사용자들의 라이프 스타일은 웹 디자인 영역까지 영향을

받습니다. 이러한 변화를 무시한 채 구시대적인 방식을 고수한다면 사용자의 관심을 끌고

마케팅을 활성화 하기에는 다소 무리가 있습니다. 따라서 기존의 UI, UX 디자인 트렌드를

활용하고 유지하는 것은 중요합니다.

최근의 웹 디자인 동향은 편의성이 조금 불편해 지더라도 사용자들의 감성을 이끌어 낼 수

있다면 사용자가 더 필요로 하는 것을 더 중요하게 표현하도록 하는 것에 초점이 맞춰지고

있습니다. 때문에 빠르게 정보를 습득할 수 있도록 부수적인 것들을 배제시켜 사용자나 운

영자가 원하는 액션만을 취할 수 있는 단 하나의 정보만 남기는 형태의 웹 디자인이 등장

하게 되었습니다.

간단히 말하자면, 보여져야 하는 것은 크게 강조시키고 필요 없는 것은 줄이거나 버리는

형태로 발전하고 있다고 말할 수 있습니다. 그래서 이러한 상황을 쉽게 대표할 수 있는

Big & Quick 라는 키워드를 사용하여 웹 디자인 트렌드를 설명해 보려고 합니다.

올해의 웹 디자인 키워드는?

첫 번째 키워드,

Big (크게 더 크게!)

이제는 예쁘고 잘 만들어진 디자인만으로는 사용자들의 기억에 남을 수 없습니다. 그래서

사용자들의 시선을 집중 시키고 기억시키기 위해서는 배경화면을 전면 이미지로 채운 풀

스크린과 큰 텍스트 중심의 웹 디자인이 웹과 서비스를 어필하는 요소로 등장하게 되었습

니다.

역동적인 풀 사이즈 이미지는 올해에도 인기

때로는 수 만 마디 말보다 단 하나의 이미지가 더 강력할 수 있습니다. 기술의 발달로 다양

한 해상도의 브라우저가 출시되고 인터넷, 로딩속도의 걱정이 줄어든 시점에서 브라우저

화면을 꽉 채우는 풀 사이즈 배경화면은 웹사이트를 가장 잘 어필할 수 있는 방법이 될 수

있습니다. 이는 최근 트렌드로 자리잡은 시차스크롤(패럴랙스 스크롤, Parallax Scroll)과

도 연관이 있습니다. 한 화면에서 스크롤을 굴리면 배경이나 개별 컨텐츠가 상하, 좌우로

시차를 주어 움직이는 기법입니다.

현실 세계를 담은 풀 사이즈 이미지 활용이 높아질 것

시차스크롤 기법에 현실의 이미지를 적용하면 배경화면이 더욱 역동적이면서 방문자에게

는 감성적인 접근으로 다가갈 수 있습니다. 이처럼 현실 세계 이미지는 차별화된 웹 사이트

분위기를 전달하는 방법으로 활용되고 있습니다.

첫 번째 키워드, Big (크게 더 크게!)

[그림 1] 패럴랙스 스크롤링 기법의 실제 배경화면 이미지를 사용한 웹사이트 (하이퍼링크 : http://www.spaceneedle.com/home/ )

상하 스크롤

첫 번째 키워드, Big (크게 더 크게!)

마치 오프라인 상점을 들린 것처럼

혹시 *‘옴니채널’이라는 단어를 들어보셨나요? 쉽게 말하면 상품 구경은 매장에서 하고 구

매는 온라인에서 하는 것을 의미합니다.

*옴니채널 (Omni-channel) ‘모든 것, 모든 방식’ 등을 뜻하는 접두사 ‘옴니(omni)’와 유통경로를 뜻하는 ‘채널(channel)’이 합쳐진 신조어로 각 유통 채널의 특성을 결합해 어떤 채널에서든 같은 매장을 이용하는 것처럼 느낄 수 있도록 한 쇼핑 환경을 말한다. [출처: 네이버 지식백과]

모바일 쇼핑 성장에 힘입어 활성화 되고 있는 옴니채널 쇼핑 행태는 실제 매장 이미지를 꽉

채운 배경 화면으로 웹사이트를 디자인하게 만든 계기가 되었습니다. 이러한 디자인은 오

프라인 샵을 방문하여 구매하는 리얼한 감정을 전달하게 되어 사용자에게 브랜드나 상품에

대한 이미지를 좀 더 명확하게 각인시킬 수 있습니다.

[그림2] 실제 상점이미지를 사용하는 와이드 메인 이미지 (하이퍼링크 : http://www.hointer.com/ )

첫 번째 키워드, Big (크게 더 크게!)

Big 타이포그래피를 선두로!

앞서 설명한 풀 사이즈 배경화면과 지금 이야기 하려는 타이포그래피는 뗄 수 없는 죽마고

우입니다. 지난 해 웹폰트를 주제로 게재된 *전문가칼럼에서도 언급 되었듯이 정보 전달성

과 심미성을 겸비한 타이포그래피의 중요성은 지속적으로 대두되고 있습니다. 또한 나날이

발전하는 *스크린 해상도 때문에 더 이상 웹 페이지에서는 가장 기본이 되는 12폰트의 텍

스트 크기가 표준이 되는 시대는 지났습니다.

웹 사이트 방문자들을 단조로운 폰트로 대면하는 것 보다는 크고 멋진 타이포그래피를 통

해 큰 텍스트를 아름답게 이미지화 시켜 브랜드 아이덴티티를 효과적으로 전달하려는 시도

는 점점 많아질 것입니다. 이는, 전달하려는 중요한 이야기에 집중하기 위해 부수적인 디자

인 사용을 자제하려는 지금의 플랫디자인, 미니멀리즘과 같은 트렌드와 일맥상통 하기도

합니다.

[그림3] 빅 타이포그래피를 활용하여 빠르고 효과적으로 웹사이트가 지닌 목적을 어필 (하이퍼링크 : 좌 http://www.amazeelabs.com/en 우 http://www.soupagency.it/#soup)

이에 따라, 크고 수려한 타이포그래피는 웹사이트의 목적을 분명하게 전달하여 사용자의

웹 페이지를 더 탐색하게 만드는 수단으로 활용될 수 있을 것입니다. 올해는 이러한 타이포

그래피를 더욱 대담하게 사용할 것이며 트렌드를 넘어 스테디한 요소로써 웹 디자인 영역

에서 활용될 전망입니다.

두 번째 키워드. Quick (빨리 더 빨리!)

두 번째 키워드,

Quick (빨리 더 빨리!)

데스크탑에서 모바일까지 사용자가 활용하는 디바이스 플랫폼의 변화로 웹 디자인은 다양

하게 변하였습니다. 사용자의 사용 환경을 고려해 볼 때 데스크탑은 고정된 기기, 큰 화면,

안정적 네트워크가 특징이며 마우스라는 중간 매체가 필요합니다. 반면 모바일은 장소의

제한을 받지 않고 이동 중에 사용하므로 시선이 분산되며, 작은 화면, 가변적 네트워크, 적

은 용량의 배터리가 특징이며 손가락 터치를 기반으로 합니다.

액션을 유도하는 (*Call to action) 직관적인 디자인

모바일 사용자가 늘어나면서 단시간에 컨텐츠를 간편하게 즐기는 현상이 확산되고 있습니

다. 이것을 2014 문화예술 트렌드 분석 및 전망 보고서에서는 ‘스낵컬쳐’라고 표현하고 있

습니다. 이처럼 다양한 디바이스 환경에서 즉각적인 행동을 취하여 원하는 정보, 재미를 취

득하는 사용자들의 이용 행태는 웹 디자인 트렌드의 흐름에서도 직관성이 고려된 디자인으

로 발전할 수 밖에 없는 결과를 가져오게 되었습니다.

*NSM 전문가칼럼 보러가기 굿바이 굴림체, 헬로우 웹폰트 (하이퍼링크 : http://me2.do/FKP5VHLr) 스크린은 지금 각양각색, 그 다양함에 맞서기! (하이퍼링크 : http://me2.do/GMtm0TA7)

*Call to action (콜투액션) 잠재 고객을 랜딩 페이지로 인도하기 위해 어떤 혜택을 알리는 버튼이나 하이퍼링크 페이지. *스낵컬처 (Snack Culture) 시간과 장소에 구애 받지 않고 즐길 수 있는 스낵처럼, 출퇴근 시간이나 점심시간 등에 10∼15분 내외로 간편하게 문화생활을 즐기는 라이프스타일 또는 문화 트렌드를 말한다.

두 번째 키워드. Quick (빨리 더 빨리!)

고스트 버튼(Ghost button)의 활용

‘고스트’라는 어감상 흥미를 유발하는 이 버튼은 어릴 적 보았던 유령 캐스퍼를 생각하면 이

해가 쉬울 것 입니다. 웹사이트에서 외곽선으로 처리한 직사각형의 형태의 텅 빈 버튼 디자

인을 일컫습니다.

플랫디자인의 트렌드가 지속되면서 영향을 받은 고스트 버튼은 가는 선과 투명한 내부로

표현된 버튼으로 사용자의 액션이 필요한 곳에서 배경과 조화롭게 자리잡고 있는 것이 특

징입니다. 따라서 기존 웹사이트에서 많이 본 볼록한 디자인의 클릭 버튼보다 크고, 화면의

중심에 눈에 띌 수 있는 위치에 배치합니다.

[그림4] 생소한 고스트 버튼을 이해하기 위해 유령 캐스퍼를 떠올려 볼까요?

두 번째 키워드. Quick (빨리 더 빨리!)

[그림5] 고스트 버튼은 사용자의 액션이 필요한 곳에서 배경과 조화롭게 자리잡고 있는 것이 특징 사이트 바로가기▶(하이퍼링크 :좌 http://visage.co/ 우 www.audreyazoura.fr/)

고스트 버튼의 일반적인 특징은 다음과 같습니다.

[참고 : Carrie Cousins_ Ghost Buttons in Website Design]

•투명도를 띈 속이 빈 버튼

•윤곽선에 둘러 쌓여있으며 선의 두께로 포인트를 줄 수 있음

•간단한 텍스트를 포함

•색상은 흰색 또는 검정색

•기존의 버튼 보다 다소 큰 형태

•웹페이지 중심에 눈에 띄게 배치

•단독 또는 그룹 형태로 배치

•플랫 디자인 방식과 함께 사용

두 번째 키워드. Quick (빨리 더 빨리!)

[그림6] 고스트버튼의 다양한 디자인 살펴보기 (하이퍼링크: 상-하 avocode.com / marvelapp.com / parall.ax / harbr.co / transitions1020.com)

고스트 버튼은 투명하기 때문에 주변 환경과 잘 매치되어 거의 모든 디자인과 융합이 가능

한 장점이 있습니다. 이는 단순함이 가장 아름답다는 것을 드러내는 적절한 사례일 것입니

다. 다만 이 장점은 반대로 흑과 백으로 채워진 배경화면에서 쓰일 경우에는 자칫 투명한

버튼이 배경 컬러에 묻혀 잘 보이지 않아 사용자가 모르고 지나치게 될 수 있으므로 상황에

따라 컬러에 약간의 변화를 주는 유연성도 필요합니다. 이처럼 고스트 버튼은 웹 디자인 요

소에서 가장 심플하지만 반대로 섬세하고 정교한 디자인이라고 말할 수 있습니다.

두 번째 키워드. Quick (빨리 더 빨리!)

소셜 로그인(Social login) 트렌드

누구나 한 번쯤은 웹사이트를 둘러보다 로그인 페이지에 가로막혀 사이트를 이탈하거나 매

번 똑같은 개인 정보이지만 어쩔 수 없이 회원가입 신청서를 작성한 적이 있을 것입니다.

심지어 키보드가 아닌 엄지 손가락 두 개로 모바일 디바이스에서 회원가입 정보를 작성하

는 일은 여간 번거로운 일이 아닙니다. 이런 상황들을 고려하여 간편하게 로그인하는 방식

이 바로 소셜 로그인 기능 입니다.

[그림7] 소셜 로그인을 통해 이용하는 계정은 페이스북과 구글이 전체에서 90% 이상을 차지 (출처: 통계 포털 스태티스틱스 포털_Statistics Portal)

* 소셜 로그인 (Social login) 별도의 회원가입 없이 기존의 본인 SNS(페이스북, 트위터, 구글 등) 아이디로 로그인하여 사이트를 사용할 수 있도록 하는 기능.

소셜 로그인 서비스를 제공하고 있는 잔레인(Janrain)에 따르면 90% 이상의 사용자가 소

셜 로그인 기능을 이용할 수 있는 대상자이며 그 중의 절반은 이미 적극적으로 기존 트위터

나 페이스북과 같은 소셜 미디어나 이메일 계정을 가지고 회원가입 없이 소셜 로그인을 이

용하고 있다고 합니다.

두 번째 키워드. Quick (빨리 더 빨리!)

소셜 로그인은 사용자에게는 빠른 회원가입이 가능하여 편의성을 도모할 수 있지만 운영자

입장에서는 연계된 소셜 사이트의 정책을 따라야 하기 때문에 자체 회원 데이터를 수집할

수 없다는 아쉬움이 있습니다. 인지도가 낮아 회원가입 유도가 어려우며 신규 회원 데이터

를 확보할 필요성이 낮은 경우라면 소셜 로그인 기능이 웹사이트 활성화에 도움을 주는 요

소가 될 수 있습니다. 이와 같이 운영하는 사이트의 목적과 방문자 성향을 고려하여 사용하

기를 권장 드립니다.

[그림8] 소셜 로그인을 활용하는 핀터레스트 사이트 (하이퍼링크 https://www.pinterest.com/)

웹 디자인 트렌드는 예측이 아닌 발견!

칼럼니스트

임우정 주임 Woojung.im@nsm.co.kr

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

한때는 유행했지만 현재는 사용을 지양하는 웹 디자인은 무엇인지 아시나요? 스킵 버튼 없

는 긴 인트로 페이지, 아쿠아 버튼, 화려한 장식 등 이제는 ‘트렌드’라 하기에는 다소 촌스러

운 디자인이 당시에는 트렌드 였습니다. 웹 디자인의 형태는 영속적으로 지속할 수 없지만

단 한가지 알 수 있는 점은 ‘당시에는 새로운 시도였으며 트렌드는 변한다’라는 것을 확인할

수 있습니다.

[그림9] 요즘 사용하기에는 다소 촌스러운 웹 디자인 (아쿠아버튼, 화려한 장식) (출처: Most Used and Abused Web Design Trends of All Time_Jacqueline Thomas)

트렌드는 우리가 만들어 나가는 것

진정한 트렌드는 미래가 아니라 현재에서 발견하는 것이라고 생각합니다. 2014년 웹 트렌

드에서 발견된 2015년의 웹 트렌드는 사용자에게 조금은 불편함이 생길 수도 있고 이해하

기 어려울 수도 있습니다. 이러한 변화는 사용자가 디바이스 환경에 적응하기 위해서 혹은

뜻밖의 재미로 사용자를 유혹하기 위한 노력에서 찾을 수 있을 것입니다. 트렌드는 전문가

나 협회에서 발표하는 것이 아닌 사용자인 우리가 만들어 나가는 것입니다. 여러분도 웹 디

자인을 지켜보고 앞으로 일어날 트렌드를 발견해 보시길 바랍니다.

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

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

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

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

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

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

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

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

Contact Us