제목은 효과적인 홈페이지 만드는 방법 아티클 공유로 하겠습니다. 근데 이제 요약을 곁들인…
PMC(Product Makers Club) S24에 참여 중인 메이커라면 9월 30일에 런칭할 랜딩 페이지를 이미 만들었거나, 만들기 위해 준비 중일 거로 생각하는데요.
“어디서부터 시작해야 하지…” 하며 고민하고 있는 메이커와
“내가 잘 한 게 맞나?” 하는 생각이 드는 메이커를 위해
제가 이번에 랜딩 페이지를 기획하면서 참고한 아티클을 제 생각과 함께 요약해봤습니다.
필요한 내용만 쏙쏙 빼서 번역했으니, 가볍게 쓱쓱 읽어보세요 😉
노션, MS Word, Pages, 메모장 뭐든 좋습니다. 텍스트를 적을 수 있는 앱이나 종이를 준비하세요.
다음 4가지를 정리해봅니다. 길게 적을 필요 없어요.
1) 누굴 위한 프로덕트인가?
2) 어떤 문제를 해결하는가?
3) 어떤 솔루션을 가지고 있는가?
4) 다른 것보다 왜 좋은가?위에서 정리한 4가지를 기반으로 랜딩 페이지 레이아웃과 내용을 구성합니다.
Top nav : 상세 기능 소개, 가격 등에 대한 링크, 로그인 버튼, CTA 버튼을 배치합니다.
Hero : 프로덕트의 가치를 잘 드러내는 카피와 제품 스크린샷, 동영상 등을 배치합니다.
Social proof : 프로덕트를 사용 중인 고객이 있다면 후기와 함께 배치합니다 (없어도 괜찮아요)
Benefit section : 프로덕트를 사용했을 때 얻을 수 있는 혜택을 배치합니다. 저는 개인적으로 10번 기능 설명 (How it works section) 다음에 benefit section을 배치하는 걸 선호합니다.
Use case / persona section : 프로덕트 활용 예시, persona마다 얻을 수 있는 이점을 설명합니다. 3개를 넘지 않는 게 좋습니다 (없어도 괜찮아요)
How it works : 프로덕트 동작 방식, 핵심 기능을 설명하는 적합한 텍스트, 이미지, 동영상을 배치합니다.
CTA : 무료 체험/무료 사용이 가능하다면 바로 사용해 볼 수 있도록 유도하거나, 도입 문의 미팅을 할 수 있는 스케줄링 페이지로 연결합니다.
레이아웃과 내용을 정했다면 바로 디자인하려 하지 말고, 와이어프레임을 만들어 보세요.
랜딩 페이지 와이어프레임을 팀 동료, 지인, 잠재고객에게 보여주고 피드백을 들어보세요.
우리 프로덕트를 전혀 모르는 사람도 누굴 위한 건지, 어떤 문제를 해결하는지, 어떻게 해결하는지, 어떤 이점이 있는지 이해할 수 있을 때까지 3번 ~ 13번을 반복합니다.
랜딩 페이지의 내용을 대부분의 사람이 이해할 수 있게 되었다면, 이제 디자인과 개발에 착수할 때입니다.
마지막으로, 랜딩 페이지는 포트폴리오 사이트가 아니라는 점을 기억하세요. 화려한 애니메이션보다는 핵심 메시지를 간결하고 명확하게 전달하는 데 집중하는 것이 더 효과적입니다.
랜딩 페이지 레퍼런스는 Pinterest나 Dribbble에서 봐도 되고, 랜딩 페이지만 따로 모아놓은 사이트들을 참고해도 좋아요 👍
댓글
로그인 후 댓글을 남길 수 있습니다.
잘 읽었습니다. 제작 '툴' 관점에서는 추천해주실만한 옵션들이 뭐가있는지도 궁금하네요 ㅎㅎ
저희 팀은 Framer를 사용해서 랜딩 페이지 만들었습니다! Figma에서 Framer로 옮기는 게 너무 쉬어서요 webflow도 괜찮은 선택지고, 더 간단하게 하려면 notion으로 프로덕트 소개하고 oopy 연동해도 홈페이지처럼 활용할 수 있습니다.