() translation by (you can also view the original English article)
여러분이 앱을 론칭하고 앱 마켓플레이스에 출시할 준비가 됐을 때 앱에 관한 프로모션과 마케팅을 진행할 계획을 짜기 시작해야 합니다. 앱 프로모션을 할 시기가 오면 앱의 랜딩 페이지를 사용하는 것을 꼼꼼히 따져 보세요. 앱의 랜딩 페이지는 일반 웹사이트보다 마케팅하기에 더 좋은데, 이는 방문객들이 특정한 동작을 하게 하는 데 집중하기 때문입니다.
앱스토어 링크를 통해 다운로드를 유도하거나 방문객들이 앱이 언제 론칭되는지 알려달라는 리뷰를 남기거나 회원가입을 하도록 권하는 등 여러분의 니즈에 맞추어 랜딩 페이지를 조정할 수 있습니다.
템플릿을 사용하여 앱 랜딩 페이지를 제작하는 것은 빠르고 쉽습니다. 앱 랜딩 페이지 템플릿을 이용하는 다른 장점은 앱의 랜딩 페이지를 디자인하는 일보다 앱을 마무리하고 프로모션하는데 집중할 수 있다는 것입니다.
이 글에서 앱 랜딩 페이지 템플릿에서 무엇을 살펴보아야 하고, 랜딩 페이지에 넣어야 할 피처들을 설명하며, 템플릿을 사용해 랜딩 페이지를 제작하는 방법을 보여드리겠습니다.
앱 랜딩 페이지 템플릿에서 살펴볼 것
아름답게 디자인된 앱 랜딩 페이지 템플릿에는 흠 잡을 만한 데가 없습니다. 이는 여러분이 앱에 딱 맞는 랜딩 페이지 템플릿을 고를 때 선택사항을 모두 꼼꼼히 따지느라 시간을 많이 할애할 수 있다는 의미입니다. 다음은 앱 랜딩 페이지 템플릿에서 살펴볼 가장 중요한 피처들입니다.
- 반응형이면서 매력적인 디자인. 반응형이며 눈길을 끄는 웹사이트는 방문객들이 사이트를 즐기고, 어떤 디바이스를 사용하든지 여러분의 앱에서 제공하는 모든 것을 보여줍니다.
- 브랜드 컬러로 템플릿을 맞춤화하는 기능. 브랜드의 일관성을 유지하기에 편합니다.
- 사용자 추천글을 보여주는 기능. 추천글은 사회적인 검증을 쌓는 데 유용하며, 신뢰를 형성하고 방문객을 가입자로 변환하는 데 크게 도움이 됩니다.
- 템플릿 문서화. 상세하게 잘 작성된 문서는 모바일 앱 랜딩 페이지에 관한 답변을 신속히 찾는 데 도움이 되며, 설치 과정을 안내해 줍니다.
- 앱 틈새시장에 맞춰 준비할 템플릿. 아니면 다양한 틈새시장에 폭넓게 걸쳐 사용될 수 있는 다용도 템플릿을 찾아 보세요.
앱 랜딩 페이지를 성공시키는 요인은 무엇일까요?
앱 랜딩 페이지 템플릿에서 어떤 피처를 살펴보아야 하는가에 대해 얘기했으니 전환율을 가장 높게 올리도록 사이트에 있어야 하는 요소들을 알아 보겠습니다.
1. 설득력 있는 카피 문구
랜딩 페이지에서 가장 중요한 요소 중의 하나가 카피 문구입니다. 방문객들이 구매해 다운로드하도록 표제와 부표제, 나머지 본문의 카피 문구에서 앱을 사용해 받을 혜택을 공유해야 합니다. 표제를 이용해 호기심을 유발하고, 부표제를 활용해 방문객이 계속 읽어가게 하며, 최종 결정을 하는 데 나머지 카피 문구를 사용하세요.
2. 앱 스크린샷
단지 디지털 프로덕트라는 이유로 앱의 스크린샷을 아까운듯이 보지 마세요. 홈 화면에 보이는 아이콘을 보여주고, 앱의 인터페이스가 어떻게 생겼는지 보여주는데 스마트폰 목업(mockup)을 활용하세요. 이는 사용자들에게 앱을 어떻게 사용하는지 알려 줍니다.
3. 사용자 후기
앞에서 얘기했듯이 사용자 후기는 방문객들의 신뢰를 쌓는 데 도움이 되며, 전환율을 높이는 데 유용합니다. 일단 방문객이 다른 사용자들이 앱을 즐겁게 사용했다는 내용을 보면, 더 다운로드 하려 하고 직접 써보려고 합니다.
4. 콜 투 액션
마지막으로 여러분은 방문객들이 앱을 다운로드 하고 론칭할 시점에 알림을 받기 위해 회원가입을 하도록 그들을 앱 마켓플레이스로 유도할 여러 가지의 콜 투 액션을 랜딩 페이지에 넣고 싶을 것입니다.
앱 랜딩 페이지 템플릿를 설정하는 방법
앱 랜딩 페이지 템플릿을 설정하기 전에 HTML 템플릿이 어떻게 동작하는지 이해해야 합니다. 일단 HTML 템플릿의 구조를 이해하면 설정 작업은 수월해 집니다.
HTML 템플릿 구조
HTML 템플릿은 웹사이트에 넣을 이미지 뿐만 아니라 HTML과 CSS, 자바스크립트 파일로 구성되어 있습니다. HTML 파일들은 랜딩 페이지에서 보여줄 요소들을 제어합니다. 여기에는 표제와 구절, 추천글, 콜 투 액션, 버튼 외의 요소가 들어 있습니다. CSS 파일들은 템플릿이 어떻게 보여질지 담당합니다. 그 파일들은 컬러와 폰트, 간격 외의 가시적인 요소들을 제어합니다.
자바스크립트 파일은 기능성을 추가하고 일반적으로 애니메이션과 트랜지션, 폼 유효성 검토를 제어합니다.
몇몇 경우에 템플릿에 연락처 폼이나 뉴스레터 등록폼에 사용되는 PHP파일이 들어 있을지 모릅니다.
템플릿에는 모든 HTML 파일들과 CSS, 자바스크립트 파일들이 담겨진 폴더가 따라옵니다. 각 폴더 안에는 하위 폴더가 있습니다. HTML 템플릿 샘플이 어떤 식으로 구조화되었는지 살펴 봅시다.
이 튜토리얼에서 활용할 목적으로 저는 Focus 템플릿을 사용하겠습니다. Focus 템플릿은 다목적의 모바일 앱 랜딩 페이지 템플릿이며, 이는 여러 가지 앱을 진열하는데 사용될 수 있다는 의미입니다. 게다가 반응형이자 SEO에 친화적이며 동영상 백그라운드를 적용할 수 있는 기능이 딸려 있습니다.
Focus 템플릿은 다음과 같은 방식으로 구조가 잡혀 있습니다.
- CSS. 이 폴더에는 템플릿에서 사용하는 모든 스타일시트가 들어 있습니다.
- Fonts. 여러분은 이 폴더에서 서버로 업로드해야 할, 템플릿에서 사용된 폰트를 찾을 것입니다.
- Images. 이미지 폴더에는 견본용 이미지가 들어 있고, 여러분이 템플릿에 쓸 이미지를 넣는데 이 폴더를 사용하면 됩니다.
- js. 템플릿에 필요한 자바스크립트 코드가 있습니다.
- php. 연락처와 뉴스레터 폼 용도의 PHP 코드가 있습니다.
- Index.html. 모바일 앱 랜딩 페이지 템플릿의 메인 페이지입니다.
아래 있는 스크린샷에서 보여지듯이 Focus 템플릿에 자체 폴더로 존재하는 여러 가지 버전이 있습니다. 각각의 폴더는 위와 같은 구조를 따라갑니다.
1. 템플릿을 활용한 앱 랜딩 페이지 제작
HTML 템플릿이 어떻게 구조화되었는지 알아 보았으므로 템플릿으로 앱 랜딩 페이지를 설정하는 단계를 조목조목 살펴보겠습니다.
1. 처음이라면, 브라우저에서 HTML 파일을 열고 싶을 것입니다. 그렇게 하려면, index.html 파일에서 마우스 오른쪽 클릭을 하고 연결 프로그램(Open With)를 선택하고 나서 기본 브라우저를 선택하세요. 그런 다음에 그 파일에서 한 번 더 마우스 오른쪽 클릭을 하고 이번에는 연결 프로그램을 선택하고 노트패드와 서브라임 텍스트 혹은 메모장과 같은 텍스트 편집기를 선택합니다. 그렇게 하면 템플릿과 편집해야 할 코드를 모두 보게 됩니다.
2. 일단 파일이 브라우저에서 열리면 편집하려는 요소를 검토해야 합니다. 그렇게 하려면 커다란 헤딩에서 마우스 오른쪽 클릭을 하고 Inspect를 선택하세요. 화면의 하단에 패널이 나타나는 것을 알게 됩니다. 여러분은 그 패널에서 페이지에서 요소들을 어떻게 보일지 제어하는 CSS 템플릿 뿐만 아니라 모바일 앱 랜딩 페이지 템플릿을 이루는 HTML 코드를 볼 수 있습니다.
아래 있는 스크린샷에서 보듯이 헤딩은 <h1> 태그로 둘러 있습니다. 그 다음 단계는 html 파일에서 그 태그를 찾아서 텍스트를 교체하는 것입니다.
3. 텍스트 에디터로 바꾸고 그 <h1> 태그가 보일 때까지 스크롤을 내리세요. Focus 템플릿에서 105번째 줄에 있습니다.
텍스트를 편집하려면 <h1> 태그 사이에 있는 텍스트를 클릭해 선택하고 삭제합니다. 그러고 나서 여러분의 텍스트를 적으세요.
4. 모바일 앱 랜딩 페이지 템플릿의 나머지를 편집하는데 두 가지 옵션이 있습니다. 브라우저로 되돌아가서 Inspector를 이용해 페이지의 부분들을 검사하고, HTML 파일에서 해당하는 부분 위치로 가서 교체하면 됩니다.
다른 옵션은 텍스트 에디터를 이용해 더미 텍스트가 들어 있는 HTML 태그를 편집하는 것입니다. 아래 있는 스크린샷에서 보이듯이 <h1> 태그 아래에서 즉시 구문을 편집하고 나서 버튼 텍스트, 피처 텍스트 등을 이어서 진행할 수 있습니다.
여러분이 어느 옵션을 선택하든지 데모 콘텐츠를 전부 편집할 때까지 이 단계를 반복하세요.
변경 작업을 마치면, 텍스트 에디터에서 File > Save를 클릭을 한 후에 브라우저 윈도우의 템플릿 탭(tab)을 새로고침 하세요. 모든 변경 사항이 적용된 화면이 보일 것입니다.
5. 다음 단계로 템플릿에서 사용하는 이미지를 교체합니다. 이미지 하나를 교체하기 위해 필요한 단계를 훑어 보고 나서 여러분은 다른 이미지들 모두에 대해 동일한 단계를 반복하면 됩니다.
이미지를 교체하기 위해 우선 이미지 폴더에 여러분의 이미지를 모두 넣어야 합니다. 한 번 더 index.html 템플릿을 브라우저에서 열고, 헤더에 있는 첫 번째 이미지에서 마우스 오른쪽 클릭을 하고 Inspect를 클릭합니다.
HTML 코드에서 이처럼 생긴 이미지 태그를 보게 될 것입니다. <img src="images/iphones-hero.png" alt="picture" class="hero-picture width-100">
6. 이제 남은 할 일은 텍스트 에디터에서 index.html 파일을 편집하는 것입니다. 텍스트 에디터에서 index.html을 열고 위의 코드가 있는 줄을 찾아 보세요. images/ 다음에 오는 모든 텍스트를 지우고 여러분의 이미지로 쓸 이미지 이름을 적으세요.
2. 템플릿 꾸미기
콘텐츠를 편집하고 난 다음 단계는 템플릿이 보이는 방식을 변경하는 것입니다. 먼저 CSS 파일을 편집해서 할 수 있지만, 어떤 스타일이 어떤 HTML 요소와 연관되는지 파악해야 합니다.
1. 브라우저에서 해당 요소 위에 마우스 오른쪽을 클릭하고 Inspect를 선택하는 작업부터 시작합니다. 이번에 화면의 오른쪽을 보면, 해당 요소에 대한 CSS 코드가 있고, 그 코드가 CSS 파일 안에 몇째 줄에 있는지도 알 수 있습니다.
2. CSS 파일을 편집하기 위해 템플릿 폴더에 가서 CSS 폴더를 여세요. 이제는 style.css 파일에서 마우스 오른쪽 클릭을 하고 연결 프로그램을 클릭해서 텍스트 에디터를 선택합니다.
3. 자, Inspector에서 봤던 코드 줄을 찾으세요. 예를 들어, 저는 특색 있는 배경의 배경색을 바꾸고 싶습니다. 해당 코드는 170줄에 있고, 제가 할 일은 CSS 파일에서 페이지 아래로 내려가 색상 코드를 교체하는 것입니다. 코드는 이처럼 생겼습니다.
.section-grey{
background: #f2f7f8;
padding: 70px 0;
}
저는 기존의 헥사 색상 코드를 아래의 코드로 바꾸었습니다.
background: #f4f3f2;
CSS로 텍스트의 폰트와 색상도 바꿀 수 있습니다. HTML파일에서 해본 것처럼 단계를 반복해서 여러분이 좋아하는 스타일로 바꿔 보세요.
3. 서버로 앱 랜딩 페이지 템플릿 업로드하기
템플릿을 편집하고 스타일도 바뀌었으니, 호스팅 서버로 업로드해서 랜딩 페이지를 살아 숨쉬게 하고 여러분은 프로모션을 시작하도록 해야 합니다. 이를 하려면 서버에 대한 FTP 정보가 필요합니다. 호스트 서비스 업체에서 이 정보를 받지 못했다면, 여러분이 그곳에 연락해 보셔야 해요. 게다가 서버로 접속해서 여러분의 파일을 전송할 FTP 클라이언트 프로그램이 있어야 합니다.
플랫폼 전반적으로 사용되는 괜찮은 FTP 클라이언트는 FileZilla입니다. 이 프로그램을 다운로드 하고 실행한 후에 빠른 연결(QuickConnect) 바에서 호스팅 정보를 입력하세요. 그런 다음, 연결(Connect) 버튼을 클릭합니다.
일단 접속되면 FileZilla의 좌측에 템플릿의 HTML 폴더가 있습니다. 그 파일을 전부 선택하고 나서 우측으로 전부 드래그 하세요. 그 파일들을 public_html 폴더에 들어가게 합니다. 남은 작업은 파일 업로드 진행이 끝나서 랜딩 페이지가 방문자들을 맞이할 준비가 되는 것이에요.
템플릿을 이용한 앱 랜딩 페이지 준비 및 신속한 운영
여러분은 막 템플릿을 이용해서 랜딩 페이지를 제작하는 방법을 배웠습니다. 여러분이 적합한 템플릿을 갖추고 설정하는 방법을 알았을 때 앱의 랜딩 페이지를 준비해 신속히 제공하는 것이 쉽습니다. Envato Elements에 가서 앱 랜딩 페이지 템플릿을 고르고, 설정 단계를 전반적으로 안내하는 이 튜토리얼을 이용해 시작해 보세요.
