랜딩 페이지 디자인: 궁극적인 랜딩 페이지 구축

효과적인 방문 페이지는 제품의 성공에 중요합니다

마케팅은 대부분의 디자이너와 개발자에게 낯선 개념입니다. 우리는 제품 개발과 기술적인 도전에 탁월하지만 제품을 홍보할 때가 되면 능숙하지 못합니다.

그러나 마케팅은 제품의 성공에 매우 중요하며 간과해서는 안 됩니다. 이것은 개발자를 위한 세계 최고의 키보드인 Ultimate Hacking Keyboard를 출시하기 위해 설계하고 준비한 도전이었습니다.

고맙게도 저는 매력적인 랜딩 페이지의 중요성을 깨달은 팀의 일원이었습니다. 특히 크라우드펀딩 캠페인이 성사되기 몇 달 전이었습니다. 우리는 함께 상상력을 자극하고 구독자를 생성하며 성공적인 출시를 위해 제품을 준비할 수 있는 랜딩 페이지를 디자인하기 시작했습니다.

궁극의 해킹 키보드 궁극의 랜딩페이지 이야기입니다.

기술 조언. 실용적인 단계 앞으로.

Google에서 "랜딩 페이지 디자인"을 검색하면 다음과 같은 중요한 팁이 포함된 수십 개의 훌륭한 기사가 나옵니다.

• "콘텐츠가 순식간에 로드되어야 합니다."
• "사진은 사이트의 청중과 관련이 있어야 합니다."
• 및 "리드 수집을 위한 양식 포함".

이는 유용한 포인트이지만 랜딩 페이지 성공에 더 많은 요소가 있습니다. 이 랜딩 페이지 디자인 가이드는 기술적 조언을 제공할 뿐만 아니라 디자이너와 개발자가 올바른 타사 서비스를 선택하고 뒤에서 작동하는 기술을 통합하는 데 도움이 되는 실용적인 통찰력도 제공합니다.

궁극적으로 이 가이드의 목표는 디자이너와 개발자의 시간과 돈을 절약하는 것입니다. 그렇지 않으면 무익한 시행착오로 낭비될 수 있습니다.

하이엔드 영상 제작 및 호스팅을 목표로

웹에서 비디오를 표시하는 것이 그 어느 때보다 쉬워졌지만 이를 사용하는 사이트는 상대적으로 적습니다. 웹 관점에서 볼 때 이것은 기술적인 문제가 아니라 시간과 돈과 같은 자원의 투자입니다.

UHK(Ultimate Hacking Keyboard)의 랜딩 페이지 트레일러 비디오는 12번의 반복을 거쳤으며 각 새 버전은 모든 작은 세부 사항을 점진적으로 개선했습니다. 디자인 과정은 고단했지만 보람이 있었고, 트레일러 비디오는 우리 랜딩 페이지의 최고봉입니다. 그것은 우리 제품을 나머지 팩과 완전히 차별화합니다.

고품질 콘텐츠 제작에는 비용이 많이 든다는 점을 명심하십시오. 전문 전문가가 제품을 빛나게 만들 수 있지만 감당할 수 있는 금액을 이해하는 것이 중요합니다. 그렇지 않으면 제품이 땅에서 떨어지기 전에 탱크에 걸릴 수 있습니다.

귀하 또는 팀의 다른 디자이너에게 기술과 장비가 있다면 자신만의 비디오 콘텐츠를 만들 수 있지만 비디오는 짧고 단순하게 유지하십시오. 아마추어의 손에 있는 지나치게 야심찬 제작은 거의 성공하지 못합니다.

UHK 팀은 랜딩 페이지에서 키보드의 기본 기능을 보여주기 위해 동적 3D 애니메이션으로 결정했습니다. 2D 애니메이션이 필요한 경우(앱 또는 웹 서비스용) 또는 실사 카메라 영상이 필요한 경우 프로세스는 다른 문제를 제시합니다.

동영상이 만들어지면 웹사이트에서 호스팅해야 합니다. 고맙게도 다음과 같은 많은 옵션이 있습니다.

YouTube는 논쟁의 여지가 없는 시장 리더이자 웹상의 동영상과 동의어입니다. 유능한 서비스와 합리적인 선택이지만 내장 플레이어가 미학적으로 가장 만족스러운 옵션은 아닙니다.

Vimeo는 매우 우아한 미니멀리즘 디자인의 임베디드 플레이어를 제공합니다. 고품질 콘텐츠를 호스팅하고 우수한 고화질을 제공하는 것으로 유명합니다.

Wistia는 마케터들 사이에서 인기 있는 또 다른 선택입니다. 그것은 비디오의 어떤 부분이 시청, 건너뛰기 및 재시청되었는지를 보여주는 비디오 히트 맵과 같은 고급 기능을 제공합니다.

궁극적으로 UHK 팀은 Vimeo가 우리의 요구 사항을 가장 잘 충족한다고 결정했습니다. 다음은 방문 페이지 예고편입니다. Ultimate Hacking Keyboard

또한 Vimeo의 API(응용 프로그래밍 인터페이스)를 활용하여 동영상이 랜딩 페이지 방문자의 관심을 더 잘 끌 수 있도록 했다는 점도 주목할 가치가 있습니다. Vimeo의 JavaScript API를 사용하여 예고편이 끝난 후 사이트의 "I want one" 버튼이 연속으로 세 번 펄스되도록 만들었습니다. 적절히 사용하면 이와 같은 약간의 조정이 방문 페이지 전환율을 높일 수 있습니다.

3D 콘텐츠로 몰입형 경험 만들기

때로는 방문 페이지 방문자에게 몰입형 경험을 제공하는 것이 중요합니다. 우리는 방문자가 Ultimate Hacking Keyboard를 3D로 탐색할 수 있기를 원했기 때문에 이를 위해 특별히 제작된 WebGL 기반 서비스를 조사해야 했습니다.

Sketchfab은 가장 인기 있는 WebGL 기반 서비스입니다. 마스터하기 쉽고 다양한 시각적 설정을 제공하며 널리 사용되는 다양한 호스팅 서비스에 포함할 수 있습니다.

P3d.in은 사용 편의성에 중점을 둔 단순한 WebGL 서비스이지만 특정 고해상도 텍스처에 대한 지원이 제한적입니다.

신중한 고려 끝에 Sketchfab을 선택했습니다. 이것이 Ultimate Hacking Keyboard의 3D 모습입니다.

2D 애니메이션으로 문제 및 솔루션 시각화

Ultimate Hacking Keyboard의 주요 장점 중 하나는 손의 움직임을 크게 줄여준다는 것입니다. 팀은 일반 키보드와 나란히 작동하는 UHK의 애니메이션을 표시하여 방문 페이지에서 이를 시각화하고 싶었습니다. 이것을 구현하는 것은 말처럼 간단하지 않았습니다.

포함된 비디오를 사용하는 것은 과도하게 느껴지고 렌더링 작업도 추가로 필요합니다. 애니메이션 GIF는 파일 크기가 크고 색상 팔레트가 제한되어 있기 때문에 옵션이 아니었습니다. 궁극적으로 우리는 인라인 SVG 애니메이션을 사용하기로 결정했는데, 그 이유는 손 그래픽이 페이지의 다른 그래픽과 독립적으로 움직일 수 있었기 때문입니다.

이 방법으로 랜딩 페이지 애니메이션을 만드는 것은 예상보다 많은 시간이 소요되었습니다. 단순한 애니메이션을 만들기 위해 브라우저 간 문제, JavaScript 라이브러리 버그 및 기타 예상치 못한 기술적 문제를 탐색해야 했습니다. 그러나 최종 결과는 매우 멋지게 보이며 추가 작업의 가치가 있는 것으로 판명되었습니다.

현명한 사람에게 한 마디, 잘못될 수 있는 일의 수를 과소평가하지 마십시오!

실시간 분석 측정

구글 애널리틱스는 훌륭합니다. 널리 사용되며 작업하기 쉽습니다. 그러나 실시간 작업에 더 나은 후보가 있습니다.

Chartbeat는 웹사이트가 특정 임계값, 특히 사이트의 동시 사용자 수를 초과할 때 알림을 보내는 훌륭한 작업을 수행합니다. 예를 들어 UHK 사이트는 때때로 온라인 포럼에 연결되어 갑자기 트래픽이 급증합니다. Chartbeat 덕분에 우리는 바로 알고 진행 중인 대화에 일찍 참여할 수 있었습니다.

Mixpanel은 웹 관리자가 사이트 방문, 구독 대화 상자 열기, 구독 확인과 같은 이벤트를 분석하는 데 도움이 됩니다. 또한 이러한 이벤트에서 퍼널을 구축하고 전환율을 시각화하여 수치를 실행 가능하게 만들 수 있습니다.

Clicky는 방문자가 사이트를 클릭하는 위치를 알려주는 멋진 히트맵 기능을 제공합니다. 결과에 따라 사이트의 레이아웃이나 콘텐츠를 개선하여 더 나은 결과를 얻을 수 있습니다.

HotJar를 사용하면 웹 사이트 소유자가 모든 마우스 및 키보드 동작을 저장하고 비디오로 변환하여 방문자의 상호 작용을 기록할 수 있습니다.

이러한 각 서비스에는 고유한 기능과 이점이 있지만 모두 웹사이트 방문자 활동에 대한 귀중한 즉각적인 피드백을 제공합니다. 어떤 유형의 정보가 마케팅 목적으로 가장 가치가 있는지 결정하는 것은 개별 기업의 몫입니다.

오류 기록 및 불필요한 두통 방지

웹사이트는 점점 더 JavaScript에 의존하고 있어 중요한 사이트 기능이 JavaScript에 의존하는 경우가 많습니다. 예를 들어 Ultimate Hacking Keyboard 랜딩 페이지의 구독 대화 상자는 JavaScript 코드에 의해 트리거됩니다.

구독 기능을 구현할 때 주요 브라우저에서 테스트했으며 필요한 모든 작업을 수행했다고 확신했습니다. 그러나 나중에 방문자로부터 방문 페이지 구독 기능이 작동하지 않는다고 불평하는 이메일을 받았습니다.

결과적으로 문제의 방문자는 가장 엄격한 모드에서 Adblock Plus를 사용하여 Clicky 분석 스크립트를 차단했습니다. 다른 분석 서비스와 달리 Clicky의 내장 코드는 이 점에서 탄력적이지 않았기 때문에 구독 작업을 기록하고 Clicky 개체를 참조하면 코드에서 오류가 발생했습니다.

이 사건 이후 우리는 앞으로 비슷한 상황이 발생하지 않도록 하는 방법에 대해 신중하게 생각했습니다. 이러한 오류를 포착하고 기록하기 위해 전역 window.onerror 이벤트 핸들러를 사용해야 한다는 생각이 팀에서 발생했습니다. 그런 다음 적절한 로깅 서비스를 검색했고 결국 Errorception을 선택했습니다.

Errorception은 JavaScript 오류를 찾는 한 가지 작업을 수행하고 매우 잘 수행하기 때문에 놀랍습니다. 사용자 인터페이스는 최소한이며 기능적이며 지원이 훌륭하며 사이트 관리자가 개별 오류를 보고 스택 추적을 조사할 수 있습니다. 무엇보다도, 그것은 당신의 돈에 대한 진정한 강타를 제공합니다.

Errorception을 통합한 이후로 우리는 대략 12개의 버그를 해결했으며 그 중 일부는 가능성이 낮고 예상치 못한 버그였습니다. 예를 들어, 우리는 한 번 localStorage 관련 오류를 받았고 Safari가 개인 브라우징 모드에 있을 때 localStorage.setItem() 에서 오류가 발생한다는 것을 발견했습니다.

모든 이상치 오류 사례를 설명하는 것은 불가능하므로 로깅은 주요 골칫거리가 되기 전에 결함을 포착하는 좋은 방법입니다.

유지 관리가 적은 빌드 프로세스 설계

처음에 UHK 색인 페이지는 WordPress에서 호스팅되는 단일 HTML 페이지로 시작했으며 여기에는 모든 CSS, HTML 및 JavaScript 코드가 포함되어 있습니다. 처음에는 이것이 가능한 솔루션이었지만 페이지가 커질수록 유지 관리 부담이 되었고 보다 모듈화된 접근 방식이 필요했습니다.

우리의 솔루션은? 먼저 CSS, HTML 및 JavaScript 코드를 여러 개의 개별 파일로 나눕니다. 그런 다음 유지 관리를 훨씬 쉽게 하기 위해 CSS 파일을 Less 파일로 변환했습니다. 마지막으로 모든 작은 파일을 조합하는 빌드 프로세스를 고안했습니다.

항상 성능 최적화

UHK 팀은 웹사이트 성능이 매우 중요하다는 것을 경험을 통해 알고 있습니다. 예를 들어 랜딩 페이지가 Slashdot이고 동시에 260명의 방문자가 방문했을 때와 같습니다. 고맙게도 월 20달러의 Linode VPS는 챔피언처럼 작동했지만 이것은 맹목적인 것보다 더 많은 것이 필요했습니다. 따라서 다음은 몇 가지 성능 향상 팁입니다.

• 이미지 지연 로딩은 특히 우리와 같은 페이지에 많은 이미지가 포함되어 있는 경우에 유용합니다. WordPress Unveil Lazy Load 플러그인을 사용하고 있습니다.

• 자산을 지연 로드할 수도 있습니다. 페이지의 섹션이 추가 스크립트에 의존하는 경우 뷰포트 내에 들어갈 때 페이지를 지연 로드할 수 있습니다. jQuery inview 플러그인으로 뷰포트 가시성을 확인하고 jQuery.getScript() 또는 다른 스크립트 로더를 사용하여 스크립트를 로드합니다.

랜딩 페이지 디자인은 중요한 디자인 분야입니다

이 게시물에서 몇 가지 랜딩 페이지 디자인 문제를 다루었으므로 가장 중요한 사항을 요약해 보겠습니다.

• 텍스트 기반 콘텐츠를 넘어 비디오, 3D 모델 및 2D 애니메이션과 같은 리치 미디어를 포함합니다. 이러한 유형의 콘텐츠는 방문 페이지를 더 매력적으로 만들고 방문자가 다른 사람들과 공유하도록 권장합니다.
• 실시간 분석을 사용하여 갑작스러운 트래픽 급증에 신속하게 대응하고 진행 중인 대화에 참여할 수 있습니다.
• 항상 오류를 기록합니다. 잘못될 수 있는 일들이 많이 있으므로 추적하는 것이 중요합니다.
• 가장 높은 트래픽 부하에서도 사이트가 유지되도록 성능을 최적화하십시오.

모든 디자인 분야와 마찬가지로 랜딩 페이지 디자인에는 새로운 도구, 기술 및 프로세스에 대해 배우려는 지속적인 노력이 필요합니다. 기술과 취향은 필연적으로 진화합니다. 오늘의 최첨단은 내일의 유물입니다.

고맙게도 명확하게 전달하고 청중을 사로잡는 랜딩 페이지 디자인은 전적으로 기술에 의존하지 않습니다. 노련한 디자이너는 최신 도구를 통합하는 방법을 알고 있지만 그들의 디자인 프로세스는 주로 올바른 질문을 하고 프로젝트를 탈선시킬 위협이 되는 문제를 능숙하게 탐색하는 방식으로 진행됩니다.

궁극적으로 매력적인 랜딩 페이지는 새로운 브랜드나 제품의 마케팅 계획에서 필수적인 부분이어야 합니다. 웹 기반 세계에서 잘 디자인된 랜딩 페이지는 팔로워를 구축하고, 입소문을 일으키며, 매출을 증가시킬 수 있는 능력을 가지고 있습니다. 이 모두는 유망한 회사의 지속적인 번영에 매우 중요합니다.