brunch

매거진 주니어 PM의 무작정 뜯어보기

라이킷 14 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이정 Sep 24. 2022

교육 플랫폼은 왜 메인 카피를 내세웠을까?

코드스테이츠 PMB 14기 / 코드스테이츠 랜딩 페이지 분석

코드스테이츠 랜딩 페이지 분석

: 코드스테이츠는 과연 수강생을 친절하게 맞이할 준비가 되었을까?

들어가며 나는 매일매일 데일리 과제를 하면서 소소하게 꾸는 꿈이 있다. 내가 공들여서 쓴 과제 포스팅을 기업 관계자가 봐주었으면. 그리고 내가 말한 개선점을 고려해줬으면. 그래서 이번에는 기업 관계자가 무조건 볼 수 밖에 없는 프로덕트로 선정해왔다. 바로 코드스테이츠다. 매일 매일 저희의 과제를 체크해주고 계시니, 아무래도 제 글도 읽으시겠지요. 내 글을 기업 관계자가 읽어줬으면 하는 바람은 오늘 과제 이후에 소소하게 이루게 되었다. 기쁘다. 코드스테이츠에게 제 혼이 담긴 과제를 바칩니다.

그래서 아무튼 이러한 이유로 코드스테이츠의 랜딩 페이지에 대해 얘기하게 되었다는 뭐 그런 이야기. 사실 다른 것보다 강의 관련 사이트들이 랜딩페이지가 복잡하게 구성되어있는 경우가 많아서 분석하기 좋겠다. 싶기도 했다.

1. 코드스테이츠는?

Education for the real world

코드스테이츠 홈페이지에 볼 수 있는 문구이다. 코드스테이츠는 여러가지 소프트웨어 분야의 부트캠프 교육을 진행하여, 수강생들이 새로운 커리어에 도전할 수 있도록 만들어주는 교육기관이다. 현재 IT분야 중에서 7개의 분야의 부트캠프 교육을 진행하고 있고, 좋은 수강생들을 뽑고, 좋은 강의를 제공하고, 좋은 커리어 코칭을 제공하여, 수강생들을 수업부터 취업까지 이끌어주는 것이 코드스테이츠가 하는 일이다. 현재 몇년동안 4차 산업 분야가 폭발적으로 증가하면서, 관련해서 취업을 하고 싶어하는 수요자들도 확실히 늘었는데, 이러한 흐름에 발맞추어서 교육을 통해 비전공자도 IT 업계에 취업을 할 수 있게 해주는 것이 코드스테이츠의 셀링 포인트다.

그래서, 코드스테이츠는 수강생들을 많이 모았냐고요? 아마도 YES. 이미 IT 교육 분야에서는 꽤나 높은 경쟁률을 자랑하면서 수강생들을 모집하고 있는 것으로 안다. 그리고 여기 수강생 한 명이 실제로 존재하기도 하고요. 저요!

코드스테이츠 공식 인스타그램 마케팅

항상 느끼는 거지만, 코드스테이츠 뿐만 아니라 많은 교육 플랫폼들은 상당히 공격적인 마케팅을 실행한다. 아무래도 경쟁이 치열한 분야이기 때문이기도 하고, 사용자가 여러가지를 비교하면서 선택하는 구조이기 때문에 어떻게든 장점을 내세워서 수강생을 끌어모아야 하기 때문이기도 하다. 실제로 이 주제가 토론 수업에 나왔는데, 코드스테이츠가 사용자의 알고리즘을 상당히 따라다닌다고. 물론 저도 마찬가지다. 이미 수강생인 나한테도 계속해서 광고를 띄우는 중.

아무튼 이렇게 교육 프로덕트는 잠재 고객에게 먼저 다가가 자신의 존재를 알리고, 수강 완료버튼을 누르기까지 자신을 선택해달라고 '어필'을 상당히 많이 하는 편이다. 그래서 나의 고객이 될지도 모르는 사용자와의 첫 대면인 랜딩페이지에도 이러한 경향이 아주 잘 돋보인다.

2. 랜딩페이지가 대체 뭔데?

예시 : '스파르타 코딩 클럽' 랜딩 페이지

아 그전에 랜딩 페이지가 뭐냐면, 바로 고객이 다이렉트로 보게 되는 페이지. 즉, 고객이 어떠한 유입 경로를 통해서, 자사 제품에 처음 접속하게 됐을 때 마주하게 되는 페이지를 말한다.

그래서 랜딩페이지에는 고려해야할 것이 아주 많다. 자사의 브랜딩, 신뢰도, 친절함 등등. 그리고 그중에서 가장 중요한 것을 꼽으라면 바로 '전환율'이다. 광고와 마케팅을 때려 자사 홈페이지까지 어찌저찌해서 고객을 끌어모았다면, 이제는 이 랜딩 페이지를 통해서 우리의 제품을 구매하게 해야한다. 사람의 첫인상이 중요하듯이, 프로덕트에 있어서도 첫인상이 중요하다는 이 말씀!

그래서 프로덕트가 어떠한 성격을 가지고 있는지에 따라 랜딩 페이지를 어떻게 배치할지 천차만별이다. 누구는 브랜드의 감성을 내세울수도 있고, 위에 적은 스파르타코딩클럽처럼 한줄의 카피를 전면으로 내세울 수도 있다.

그렇다면 교육 프로덕트가 가져야할 랜딩 페이지는 어떠한 자세일까? 어떠한 전략을 내세워서 수강생을 '내 것'으로 만들까? 밑에 코드스테이츠의 랜딩 페이지를 신랄하게 분석(?)해보면서 알아가보도록 하자.

3. 그래서, 코드스테이츠의 랜딩 페이지는?

코드스테이츠 랜딩 페이지 : https://www.codestates.com/

들어가기 전에 하나 묻고 싶다. 교육을 결정하는데 있어서 수강생들이 가장 원하는 정보는 무엇일까? 아무래도 얼마나 합격(취업)했는지? 가 아닐까. 사실 코드스테이츠로 흘러들어오는 (예비) 고객들은 배경은 다양하겠지만, 동일한 욕망을 가지고 있다. 바로 취업하고 싶다.

그래서 교육 프로덕트들은 이 지점을 잘 자극해야한다. 마치 이 교육을 들으면 합격(취업)할 수 있다! 라는 자신감을 심어줘야 (예비)고객들이 바로 수강신청하기 버튼으로 향할 것이다.

그래서 다른 교육 프로덕트 사이트들도 마찬가지로, 랜딩 페이지에서 대체적으로 뿜어져오는 분위기는 바로 '자신감'이다. 우리 교육을 들으면 합격(취업)할 수 있어. 수강신청만 해! 이런 느낌. 그래서 대체적으로 많은 단계와 많은 정보를 제공하고, 자신감 넘치고 눈에 들어오는 카피를 사용하고 있다.

코드스테이츠 랜딩 페이지 단계

0단계 : 메뉴바

메뉴바 : About, 수업 탐색, 채용 파트너십, 기업교육, 블로그, 자주 묻는 질문

각각의 페이지를 카테고라이징하여 사용자가 이용하기 편하게 제일 처음으로 메뉴바를 배치시켰다.

1단계 : 배너 (CTA)

첫번째로 가장 먼저 노출하고 있는 것은 움직이는 배너다. 현재 5가지의 배너를 노출하고 있다. 각 배너를 클릭하면 다음과 같은 페이지로 이동된다.

1. 현재 수강 신청중인 PM 부트캠프 신청 페이지

2. 코딩 부트캠프 미리보기 페이지

3. 공식 블로그

4. 수료생 후기

5. 코드스테이츠 미션 소개

이렇게 차례로 5가지의 배너가 노출되고 있어, 관심이 있는 배너를 클릭하도록 사용자에게 유도하고 있다.

2단계 : 부트캠프 코스 소개 (CTA)

메인 카피 : 내게 맞는 코스를 찾아보세요

서브 카피 : 개발자부터 프로덕트 매니저, 마케터까지 IT 취업에 특화된 부트캠프를 소개합니다.

그리고 각 코스 수강페이지로 넘어가는 CTA 버튼으로 배치되어있다. 아마도 모집중인 부트캠프를 앞으로 배치한 것으로 보인다.

코드스테이츠에서 진행 중인 부트캠프 코스를 한눈에 소개하고 수강생이 마음에 드는 코스를 살펴볼 수 있게 유도하고 있다.

3단계 : [브랜드] 설명

메인 카피 : 직무 부트캠프, 왜 코드스테이츠일까요?

서브 카피 : 실무 역량을 빠르게 강화하는 단기간 몰입형 부트캠프, 취업에 성공할 때까지... (생략)

코드스테이츠가 장점으로 내세우고 있는 이유들을 5가지의 배너로 나누어서 설명하고 있고, 각 배너를 클릭하면 다음과 같이 세부설명이 나오도록 설계되어있다. 수강생들이 다른 교육 사이트와 비교해서 왜 코드스테이츠를 선택하야 하는지, 어떤 장점을 가지고 있는지에 대해서 내세우고 있다.

4단계 : [수료생 후기] CTA

메인카피 : 도전에 성공한 슈료생들의 후기가 이어지고 있어요

CTA 카피 : 더 많은 후기 보기

이미 수료한 수료생들의 후기를 배너 형식으로 만들어서 자동 스크롤 되게 설계하였다. 그다음에 CTA 버튼으로 더 많은 후기를 볼 수 있게 유도하여 코드스테이츠 내에 후기 페이지로 사용자를 유도했다.

5단계 : [수료생 현황] 설명

메인 카피 : 함께한 수료생 현황을 투명하게 공개합니다

수강생이 가장 궁금해할 곳. 그래서 얼마나 취업이 되는가? 그 부분을 아이콘과 함께 자신있게 내세우면서 우리가 이렇게 취업을 잘 시킨다! 라는 것을 사용자에게 설명하고 있다.

6단계 : [취업 기업] 설명

메인 카피 : 수료생들이 취업한 기업들

지금까지 수료생들이 취업한 기업 배너를 스크롤 형식으로 배치하여, 수많은 기업에 수료생들이 취업했다는 것을 보여주고 있다.

7단계 : 브랜드 설명 CTA

메인 카피 : 코드스테이츠 STORY

CTA 카피 : 더 많은 콘텐츠 보기

그다음으로 보여지는 건 코드스테이츠가 가진 브랜딩 스토리입니다. 여러개의 배너 형식으로 브랜드 스토리 글을 소개하고 있다.

더 많은 버튼 보기를 누르면 코드스테츠가 자체적으로 블로깅한 글들을 볼 수 있는 코드블로그로 이동된다.

8단계 : [브랜드] 설명

메인 카피 : 꿈꾸는 커리어의 시작, 코드스테이츠와 함께 하세요

서브 카피 : 수강생의 성공이 코드스테이츠의 성공입니다.

마지막으로 브랜드를 보여주는 카피문구를 보여주면 수강생의 수강신청을 독려하고있다. '꿈꾸는 커리어의 시작' 이라는 카피를 이용하여 마지막까지 사용자의 마음을 세심하게 건들이고 있다.

9단계 : 정보고지

메인 카피 : Education for the real world

마지막으로 하나의 간단한 카피 문구를 두고 맨 위로 가기 버튼을 배치하였다. 처음부터 다시 둘러보고 싶은 유저들을 위해서 세심하게 놓아둔 버튼으로 보인다.

아이고 길다 길어. 이렇게 코드스테이츠는 총 9단계의 랜딩페이지를 이용하여, 예비 수강생들을 유혹하고 있다!

4. 개선점

1) 메인 카피를 내세워보자

흠... 아 이거 뭔가 아쉬운데. �

뭐가 아쉽냐면 바로 끝까지 봐도 확 꽂히는 메인 문구가 없다! 가 아쉽다.

좀 더 쉬운 이해를 위해 다른 비슷한 부트캠프류 교육 사이트의 랜딩 페이지를 잠시 들려보았다.

첫번째로 코드 캠프의 랜딩 페이지.

첫 단락에 '개발 회사에서 만든 실무 코딩 부트캠프' 라는 메인카피를 전면으로 걸어서 신뢰감과 브랜딩을 주어, 사용자에게 단박에 각인 시켰다.

아까 위에서 잠깐 언급했던 스파르타 코딩 클럽의 랜딩페이지.

"완주까지 함께하는 스파르타 코딩클럽" 이라는 메인 카피를 단박에 내세워서 사용자에게 각인 시켰다. 그 뒤로 실제 수강생 완주율을 내세워서 그에 따른 신뢰감을 더했다.

왜? 교육 플랫폼들은 메인 카피를 전면에 내세웠을까?

이유를 생각하보면 다음과 같다. 사용자가 랜딩 페이지를 보고 이탈할지 말지를 결정하는 시간은 평균 2.6초라고 한다. 그러니 처음에 보여지는 것은, 플랫폼이 가장 중요하게 생각하고 있는 것이다. 그리고 메인카피를 내세웠다는 것은? 교육 플랫폼들은 지금 '브랜딩'을 가장 중요하게 생각하고 있다는 반증과 같다. 왜냐면 이제는 부트캠프가 너무 많으니까! 사용자가 선택할 수 있는 옵션이 너무 많으니, 각 사이트별로 한방에 각인될 수 있는 메인 카피를 사용자에게 각인 시키려고 내세운 것이다. 아마도 하나의 부트캠프를 듣기 위해서 사용자는 적어도 4~5개의 사이트를 돌아다니면서 비교하고 분석하면서, 자신에게 맞는 플랫폼을 신중하게 선택할 것이다. 그렇다면 많은 플랫폼 중에서 눈에 띄고, 뇌리에 남아야 할 필요가 있다.

코딩 부트캠프를 듣기 위해서 여러가지 사이트를 돌아보고 있는 사용자는 이렇게 생각할 것이다.

코드캠프는 실제 개발회사에서 만드니까 믿음직스러워.

스파르타 코딩클럽을 들으면 완주를 할 수 있구나.

수많은 선택지 중에서, 우리만의 눈에 띄는 장점을 내세워서 사용자에게 선택을 해달라고 어필을 하고 있는 것이다.

그래서 한 번 해보자. 메인 카피 내세우기.

그래서 코드스테이츠도 메인 카피를 내세울 필요가 있지 않을까? 부트캠프 수업을 듣기 위해서 수많은 플랫폼을 전전하고 있는 예비 수강생 A의 뇌리에 각인되면 얼마나 좋을까, 싶은 마음이 든다. 그래서 1단계에 배너 대신 메인 카피를 내세운 CTA 버튼을 제안해본다. 움직이는 배너는 아무래도 너무 빨리 지나가서 어떤 내용인지 모르고, 사실상 코드스테이츠를 모르는 사람이 한눈에 파악하기에는 좀 아쉬운 느낌.

그러니깐 약간 이런 느낌.

전

리디자인 후

배너 대신 코드스테이츠를 한눈에 표현할 수 있는 메인 카피를 메인으로 내세웠다. 그리고 유저가 바로 반응할 수 있는 CTA 버튼을 배치했다. (문구는 코드스테이츠내에 미션 페이지에서 슬쩍 참고해서 적어왔다.)

코드스테이츠는 경제적 사회적 배경없이 누구나 평등한 교육의 기회를 제공하는게 미션이다. 이러한 회사의 비전을 앞세우고, 지방에 살아도, 비전공자라도, 누구든지 코드스테이츠에서는 커리어 전환을 할 수 있다는 브랜딩 이미지를 사용자에게 각인 시켰다!

그 밑에는 바로 사용자가 반응할 수 있도록 CTA 버튼을 삽입하여, 관심이 간다면 바로 전환을 할 수 있게 만들었다. CTA 버튼은 예비 수강생이 관심을 가질만한 수강후기로 이어지면 좋을 것 같다.

그럼 이제 이 랜딩 페이지로 접속한 예비 고객은 이렇게 생각하겠지 않을까?

오, 코드스테이츠는 누구나 어디서든 들을 수 있다는게 장점이네?

2) 끝까지 세심하게 챙겨주기

'항해99' 랜딩 페이지 마지막 단계

'스파르타 코딩 클럽' 랜딩 페이지 마지막 단계

앞서 레퍼런스로 들고온 두개의 페이지를 살펴보면 찾을 수 있는 공통점이 있다. 바로 교육 플랫폼들은 끝까지 예비 고객들을 놓치 않았다. 수많은 설명 끝에 스크롤을 내린 고객들에게 마지막에 마지막까지 설득하고 있는 것이다.

정보량이 많은 교육 플랫폼의 랜딩 페이지 특성상 아마 스크롤을 끝까지 내렸다는 것은 설명을 끝까지 보고 관심이 있을 가능성이 높다고 판단하고 마지막 설득으로 CTA 버튼을 삽입하여 예비 고객들의 마음을 흔들고 있다.

이렇게까지 하는데 한번 살펴보고 가지 않을래? 여기까지 왔는데 마음에 드는거 아냐? 라고 말하고 있는 거 같은 느낌.

그에 비해 코드스테이츠의 랜딩 페이지 마지막은 행동을 유도하는 CTA 버튼 없이 메인 카피와 함께 단계가 끝나버리니 좀 아쉬운 느낌이 들었다. 마지막까지 코드스테이츠의 브랜딩을 돋보이게 하는 카피와 함께 CTA 버튼을 삽입하면, 조금이라도 유저의 마음이 흔들리지 않을까? 더군다나 코드스테이츠의 랜딩 페이지 단계는 꽤나 긴 편인데, 정작 직접적인 수업 신청과 연결된 CTA는 초반부에 한번만 존재해서 아쉬웠다.

그러니 아주 간단하게 지금 마지막 9단계에서 존재하는 페이지 업 버튼을 조금만 수정해보면 어떨까? 라는 생각이 들었다.

참고로 지금 페이지 업 버튼을 누르면 랜딩 페이지 가장 위로 올라간다.

그러니까 이런 느낌?