웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
효과적인 랜딩페이지 제작을 위한 6가지 팁
Posted by kimdirector | 2017.04.27 | Hit : 3593
랜딩페이지 스토리텔링
목록보기이전보기
 
인터넷 접속 시 어디에서나 볼 수 있는 랜딩페이지는 비즈니스에 있어서 신제품을 소개하고, 제품의 중요한 특징을 부각시키거나, 방문객들이 특정 액션을 취하도록 장려할 수 있는 필수적인 수단입니다.
 
구글도 애플도 랜딩페이지를 사용합니다. 심지어는 백악관 까지도.. 셔터스톡 또한 랜딩페이지를 사용하고 있습니다. 랜딩페이지는 당신의 고객이 브랜드의 어떤 한 측면에 집중하도록 돕고, 특정 제품의 특징에 대하여 자세히 설명할 수 있도록 해줍니다. 흔히 구매 의도나 구매 전환율을 높이려는 목적으로 사용됩니다. 랜딩 페이지 제작의 목적과 규칙은 웹사이트 제작과는 다르기 때문에, 고객들에게 웹사이트 홈페이지에서와는 다른 경험을 제공해야 합니다.
 
셔터스톡은 인하우스 디지털 디자이너인 아드리아나 마린 (Adriana Marin)에게 훌륭한 랜딩페이지를 만드는 팁에 대하여 물었습니다. 그녀의 유용한 팁과 기술에 대하여 읽고 난 후, 셔터스톡이 엄선한 랜딩페이지 이미지를 둘러보세요! 랜딩 페이지 제작 시에 매우 유용하게 쓰일 거에요!
 
 
1.주요 목표를 정하라

 
Vector set of simple flat website templates icons on blue background by filborg

만약 여러분이 랜딩 페이지를 구축할 예정이라면, 자세히 소개될 공간이 필요한 특정 상품이나 메시지가 있어서 일 것입니다. 유저들은 일반적으로 사이트나 홈페이지, 이메일 캠페인 또는 디스플레이 광고와 SEM (Search Engine Marketing) 광고를 통하여 랜딩 페이지에 접근하게 됩니다.
 
비즈니스를 위한 랜딩페이지는 단일 제품 소개에 초점이 맞춰져 있거나, 유저들이 회원가입 또는 질문을 하거나 더 많은 정보를 위해 이메일 주소를 기입할 수 있는 연락 페이지를 제공할 수 있습니다. 개인 사이트나 블로그에서는 사이트 자체를 설명하거나, 연락을 취할 수 있는 연락처 또는 소셜 미디어 링크를 제공하는 용도로 사용될 수 있습니다.
 
여러분이 제작할 랜딩페이지의 근본적인 목표를 설정하고 나면, 전달할 메시지를 명확히 해야 합니다. 자 이렇게 무엇을 위하여 랜딩페이지를 제작할 지를 결정하고 나면 힘든 일의 절반은 끝난 것입니다. 이제 남은 일은 여러분이 페이지에서 전하고자 하는 바 (벡터이미지를 예로 들어봅시다.) 를 직접적인 언어와 이미지를 통하여 확실히 전하는 것입니다.
 
 
2. 페이지를 스토리 텔링의 공간으로 이용하라.
 
한 랜딩 페이지에서는 하나의 연결된 스토리를 말해야 하고, 그러기 위해서는 페이지의 각 섹션이 전체 이야기의 일부가 되야 합니다.

앞서 예시로 든 ‘벡터이미지’ 랜딩 페이지는 여러 부분으로 나누어져 있습니다. 주요 섹션 (유저들을 가격 정보로 이끄는 부분), 인기 있는 벡터 이미지들, 엄선된 벡터 컬렉션으로 나누어져 있고, 가장 아래에는 벡터가 무엇이며 어떻게 쓰일 수 있는지에 대한 설명과 함께 무료 다운로드 버튼이 있습니다. 각각의 섹션은 이들을 클릭하면 어디로 연결될 지 명확하게 표시되어 있습니다.
 
 
3. 중요한 정보와 CTA (Call To Action) 버튼은 폴드 (Fold-페이지 접속 시, 스크롤을 내리지 않고 보이는 첫 화면) 위에 둘 것.
 
로고와 헤드라인, 부제, 주요 CTA (Call To Action: 액션을 불러일으키는 것-어플을 다운로드하거나 회원가입 창으로 이동하거나 등) 버튼은 항상 폴드 위에 위치 시키세요. 이는 유저들이 스크롤을 내리지 않아도 페이지에 접속하자 마자 중요 링크와 정보를 즉각적으로 볼 수 있도록 해줍니다. 이는 가장 중요한 세부 정보를 빠르게 제공하고, 유저들이 다음에 취해야 할 액션을 명확히 보여줌으로써 전체 과정을 더 효율적으로 만들어줍니다.
 
 
4. CTA(call To Action)와 이야기 사이에 간격을 둘 것.
 
만약 랜딩 페이지에 한 개 이상의 CTA 버튼을 두고자 한다면 (흔히 한 개 이상을 두죠.), 서로 떨어져 있도록 하세요. CTA 버튼이 집중되어 있거나 너무 많으면 정신이 없기 때문에, 유저들이 취해야 할 행동을 명확히 볼 수 있도록 해야 합니다. 밸런스가 중요하다는 말이죠.
 
CTA 버튼은 유저들이 버튼 전에 있는 주요 메시지를 잘 보았는지를 확인하는 역할을 합니다. CTA 버튼의 레이아웃을 결정할 때는 다음과 같이 생각하면 쉽습니다. “여기 정보가 있고, 이를 확인하고 당신이 해야 할 행동은 다음과 같습니다.”
 
 
5.방문자를 페이지 아래로 이동시킬 수 있는 시각적인 단서를 이용하라.

 

랜딩 페이지가 긴 편이라면, 유저들을 오랫동안 집중하게 하는 것이 중요합니다. 이를 위해서는 자연스럽게 시선이 아래로 가는 이미지나 스크롤을 해야만 볼 수 있는 텍스트를 사용하세요.
 
원래 랜딩페이지는 하나의 특정 주제에 집중하기 때문에 간결해야 합니다. 하지만 자세한 정보를 제공하고자 하는 경우에는 유저들이 계속해서 이를 읽어나가도록 해야 하는데, 여기서 중요한 것은 그들이 집중하여 스크롤을 내리는 도중에 이야기를 끊어버려서는 안 된다는 것입니다.
 
 
6.완벽한 랜딩페이지는 없다.
 

A road runs through it in the Valley of Fire State Park near Las Vegas Nevada by TFoxFoto
 
셔터스톡은 테스트와 데이터를 사랑하지만, 현실적으로 모든 것에 대하여 A/B테스트(두 개의 소재를 약간씩 바꿔 A와 B 둘 중에 뭐가 더 좋은지 선택하는 것)를 할 시간이 없다는 것을 알고 있습니다. 어떤 사항을 테스트할 지 선택할 때, 랜딩 페이지 테스트를 우선 순위로 놓으세요. 랜딩 페이지를 테스트 하는 것은 마케팅 효율화에 큰 변화를 가져올 것입니다. 일단 테스트를 통하여 적합한 페이지를 찾고 나면, 그 페이지에 유저들을 도달시킬 수 있는 다양한 방법을 테스트할 수 있습니다.
 
여러분의 랜딩 페이지의 목표 (구매, 트래픽, 이메일 구독)를 미리 결정하고, A/B 테스트를 통하여 가장 적합한 페이지를 찾아보세요!
 
 
Posted by kimdirector | 2017.04.27 | Hit : 3593
Origin http://m.blog.naver.com/shutterkr/220453851681
Tags 랜딩페이지 스토리텔링
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=491

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD  IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
디자이너 웹디자인 조합 플러그인 PC 기획 교육 HTML5 고객지원센터 프로젝트 타이포그래피 글꼴 리뉴얼 리소스 폰트 스마트폰 경영자 아이폰 디자인 플랫 디자인 웹2.0 웹페이지 아이폰 이메일 매력 무료 Draft UI 시간관리 인터페이스 디자인 소프트웨어 트랜드 제안 모바일 플랫폼 애플리케이션 CIO Android