B2B SaaS 제품에서 가장 중요한 것은 OOO이다.
가치 제안 기반으로 디자인한 랜딩 페이지 추천
B2B SaaS 제품에서 가장 중요한 것은 *랜딩페이지라고 생각합니다.
랜딩페이지는 곧 제품의 첫인상이자 세일즈덱 역할을 하기 때문입니다.
*랜딩페이지란? 사용자가 사이트를 클릭했을 때 제일 먼저 보이는 페이지
이때 우리 제품이나 서비스를 알리기 위해 하고 싶은 말이 많고 많은 것을 제공하면 좋을 것이라고 생각합니다. 하지만 반대로 사용자는 짧은 시간에 핵심 정보와 경험을 확인하고 싶어 합니다.
서비스의 기능보다는 혜택과 가치에 초점을 맞춰, 비즈니스 메시지를 효과적으로 전달하여 회원가입 및 데모 신청 등 비즈니스 목표 전환을 기대해 볼 수 있습니다.
또한 랜딩페이지는 가장 저렴하게 사업을 검증할 수 있는 수단입니다. 제품이 만들어지기 전 어느 정도 수요를 확인해 볼 수 있어 스타트업에서 가설 검증 단계로 많이 사용되곤 합니다.
*가치 제안 기반으로 디자인되어 있는 사이트를 몇 개 소개해드리겠습니다.
가치 제안에 대해 자세히 알고 싶다면 아래 링크를 참고해 주세요.
가치 제안 기반으로 디자인되어 있는
추천 사이트 6가지
�여기서 잠깐
Value Proposition(가치 제안)을 표현할 때 Mission statement(회사 미션)와 자주 혼동하곤 합니다.
Mission statement는 기업이 무엇을(What) 하는지 정의하는 문구이며, 기업의 관점에서 쓰입니다.
반면에 Value Proposition은 고객의 관점에서 만들어지는 차이가 있습니다.
차이점 예시(프레이머)
Mission statement: 우리는 웹 디자인의 미래를 만들어가고 있으며, 고품질 소프트웨어 플랫폼을 구축하는 데 집중하고 있습니다.
Value proposition: 성공의 시작은 사이트에서 시작됩니다.
1. 피그마(https://www.figma.com/)
2. 프레이머(https://www.framer.com/)
3. 슬랙(https://slack.com/intl/ko-kr/)
4. 스트라이프(https://stripe.com/)
5. 토스 페이먼츠(https://www.tosspayments.com/)
6. 채널톡(https://channel.io/ko)
일반적인 랜딩페이지 구조
#1. 랜딩페이지 가장 상단에 있어 제일 먼저 보이는 영역입니다.
직관적인 Value Proposition 문구, 행동을 유도하는 CTA 버튼이 존재합니다. 텍스트뿐만 아니라 강렬한 이미지 혹은 애니메이션과 같은 비주얼 콘텐츠를 활용하여 스크롤 유도와 체류시간 높이는 것이 중요합니다.
#2. 제품을 소개해주는 영역입니다.
이곳에서도 마찬가지로 텍스트뿐만 아니라 이미지 혹은 애니메이션을 활용하여 제품을 간접체험할 수 있는 경험을 제공하는 것이 중요합니다.
#3. 하단 영역에 한번 더 전환을 유도하는 영역입니다.
하단 영역까지 스크롤을 내린 사용자들은 제품에 최소 호기심은 생긴 사용자일 것입니다. 그들에게 마지막으로 혜택 혹은 다른 가치들을 강조하여 전환을 유도합니다.
#4. 최하단 영역에 관습적으로 존재하는 영역입니다.
보통 회사소개, 개인정보처리 방침, 이용약관처럼 정책 페이지 링크를 두거나 다른 페이지로의 이동을 유도하여 사용자가 이탈하는 것을 예방합니다. 푸터를 잘 활용하여 내부 PV 수를 증가시키는 노력이 필요할 수 있겠지만 최하단에 있다 보니 항상 우선순위가 떨어지는 것은 사실입니다.
랜딩페이지
어떻게 만들 수 있나요?
랜딩페이지는 가장 저렴하게 사업을 검증할 수 있는 수단인 만큼 계속해서 실험하며 변경이 이루어질 가능성이 높습니다.
때문에 개발자의 손을 거치지 않아도 되는 노코드툴을 활용하는 것을 추천드립니다.
추천 노코드 툴
1. 우피 - https://www.oopy.io/
노션 페이지를 활용하여 쉽게 홈페이지를 제작해 볼 수 있습니다. 다만 데이터 베이스 활용의 한계와 디자인 템플릿 같은 것이 없어 디자인에 대한 지식이 없는 경우 매력적인 홈페이지를 제공하지 어려운 것이 단점입니다.
2. 웹플로우 - https://webflow.com
높은 디자인 자유도, 다양한 템플릿, 다양한 연동 서비스가 있지만 치명적인 단점은 학습 난도가 높은 편에 속합니다. 코딩 없이 거의 모든 기능이 구현 가능하지만 개발적인 관점과 지식이 없다면 기능 구현하는 데에 많은 노력이 필요합니다.
3. 프레이머 - https://www.framer.com/
장단점은 웹플로우와 비슷합니다.
다만, 프레이머가 조금 저렴하고 이용하는 기능들마다 튜토리얼이 배치되어 있는 등. 사용성 측면에서 프레이머가 조금 더 직관적이고 배우기 쉽습니다.
개발 측면에서는 웹플로우가 우수하기 때문에 목표나 서비스에 맞게 선택하는 것이 좋겠습니다.
