기획자가 만드는 랜딩페이지(1)

얼마전 ask 를 통해 웹개발자 없는 팀에서 랜딩페이지 만드는 방법에 대해서 물어보는 질문이 들어왔었다. 음; 나의 허접한 노하우가 만천하에 드러날 것 같지만, 그럴듯한 랜딩페이지가 필요한 스타트업들에게 도움이 되지않을까하여 조금 썰을 풀어본다.

내가 웹랜딩페이지 개발을 직접한걸로 아시는 분들이 있어 미리 밝혀두는데 커.스.터.마.이.징이다. 개발자와 웹디자이너와 퍼블리셔가 없는 상태에서 퀄리티 있는 랜딩페이지를 뽑기란 상당히 어렵고, 웹개발을 조금 할 줄 안다해도 새로 기획하고 구성하는걸 맨땅에서 해본 사람이 아니니 거의 불가능에 가깝다. 내가 쓰는 방법은 개발을 모르는 기획자가 필요에 의해 터득한 생존코딩이랄까. 여튼 각설하고.

준비물은 해외결제가 되는 신용카드(?).

랜딩용 페이지와 간단한 서비스 소식같은 블로깅 수준의 랜딩페이지는 텀블러 tumblr를, 조금 하드하거나 다양한 위젯, 카테고리, 플러그인 등을 활용한 그럴듯한 홈페이지를 원한다면 워드프레스 wordpress 를 추천한다(지만 워드프레스는 어려운 편이다. 후벼팔 자신없으면 안하는게…)

우선 텀블러를 가입한다.

텀블러는 여러개의 블로그를 만들 수 있다. 하지만 메인계정과 서브계정으로 나눠지면서 지원되는 기능이 다르다.

  • 메인블로그 : 소셜활동을 할 수 있다. 즉, 다른 텀블러를 팔로잉하거나 댓글을 남길 수 있다. 프라이빗으로 설정할 수 없다.
  • 서브블로그 : 블로그 잠금이 가능하다. 등록된 멤버들만 볼 수 있는 프라이빗 텀블러를 만들 수 있다. 서브블로그를 메인블로그로 바꿀 순 없다.

그러므로 만약 회사에 서비스가 여러개라면 회사의 블로그를 메인으로 하고, 서비스의 블로그를 서브로 두는 방법을 고려할 수 있다. 어떻게 할지 결정한 후에 계정을 만들자.

도메인을 산다.

도메인은 저렴하게 판매하는 곳들이 있다. 국내업체는 의외로 운영하는데 제약사항이 좀 있어서 해외업체에서 도메인을 구입했다.

상위 도메인(예. naver.com)을 등록하고 싶으면 A레코드를 66.6.44.4로 등록해주면 되고, 하위 도메인(예. blog.naver.com)을 등록하고 싶으면 도메인 구입 후 DNS관리 페이지에서 Hostname을 blog을, Record type은 CNAME을, Target Host는 domains.tumblr.com로 지정해주면 된다.

스크린샷 2014-10-10 오전 3.03.44.png

자세한 설명은 여기를 참조.

그리고나서 블로그 설정메뉴에서 도메인의 수정을 누르고 입력해준 후, ‘테스트도메인’을 눌러보자. 오류가 있으면 다시하라고 한다. 저장을 누르면 최소 1일, 최대 3일내에 처리가 된다.
스크린샷 2014-10-10 오전 2.17.44.png

테마를 산다.

스타트업은 무조건 아껴야한다는 일념하에 무엇이든 무료로만 해야한다고 생각하지만, 의외로 적은 돈으로 효과를 극대화 시킬 수 있으면 그건 지를만한 가치가 있다고 생각한다. 시간과 돈, 노력을 모두 절충하는, 한마디로 블로그의 유료테마는 가성비가 높은 녀석. 테마를 사면 파일로 다운로드 할 수 있다.

테마는 자체적인 마켓도 있지만, 구글에서 검색해보면 테마전문업체들이 많이 나온다. 그 중 가장 무난하고 유명한 곳중에 Themeforest를 추천한다. 왜 유료테마를 써야하냐고 묻는다면, 무료는 무료값을 한다. 차마 싸보인다 말은 못하고.. 사실 무료테마는 개인블로그형태가 많아서 랜딩페이지로 활용하기에는 조금 무리가 있는 편이다. premium theme, business theme 등의 키워드를 넣어 검색하면 서비스용으로도 충분한 테마들이 많으니 Themeforest가 아니더라도 다른 곳을 더 찾아보길.

여튼 테마를 구입한 후 압축파일을 열면 text 파일로 되어있는 녀석이 있다. 블로그 꾸미기 > HTML 편집 화면에다가 복사 + 붙여넣기 하면된다. 쉽다.

커스텀을 한다.

어떤 테마를 어떻게 고르냐에 따라 다르다. 옵션이 나와있는 녀석도 있고, 숨어있는 녀석도 있다. 나와있는 녀석은 ‘블로그 꾸미기’ 메뉴에서 하면 되지만, 숨어있는 녀석은 조금 만져줘야할 필요가 있긴 하다. 텀블러의 구조만 알면 만지는건 비교적 쉬운편이니 텀블러의 구조와 CSS 만지는 방법은 2탄에서. 슝-!

앱 & 서비스 기획자입니다. 잘하고 싶어요.

Sliding Sidebar