홈페이지 환경 구축 AtoZ
회사 홈페이지를 만들었는데, 이제 뭐하지?
목차
1. 회사 홈페이지를 만들었다고 끝이 아닙니다.
2. 코딩 없이 데이터 수집 환경 구축하기
3. 홈페이지에서 실험을 해볼까?
4. SEO로 디테일 추가하기
5. 웹 페이지 동향을 보여주는 대시보드 만들기
하나라도 해당되면, 재밌게 읽을 수 있어요!
1. 회사 홈페이지를 거의 다 만들었거나, 오픈한지 얼마 안 됐다.
2. 일잘러 기획자가 되고 싶다.
3. 데이터 툴에 대해 좀 더 공부하고 싶다.
회사 홈페이지를 만들었다고 끝이 아닙니다.
너도나도 운영하는 회사 홈페이지
초기 스타트업에서 프로덕트를 개발하기 전, 이 프로덕트를 고객이 실제로 원하는지 알아내려고 노력하는데, 이때 사용하는 방법이 스모크 테스트(Smoke Test)다. 스모크 테스트는 프로덕트를 실제로 만들기 전, 이게 될 놈인지 알아내기 위해 랜딩 페이지를 만들어 배포하고, 고객의 반응을 확인하는 방법이다. 많은 시간과 노력을 들여서 프로덕트를 만들었는데, 막상 고객이 어떠한 반응도 보이지 않으면 큰 문제가 된다. 제품을 소개하는 웹 페이지를 만들면, 적당한 리소스로 고객의 반응을 충분히 수집할 수 있다.
위와 같이, 많은 스타트업이 자신의 회사와 프로덕트를 알리고, 고객 반응을 확인하고자 웹 페이지를 운영한다. 웹 페이지의 규모는 스타트업의 현재 위치에 따라 다르다. 아직 고객 니즈를 검증하고 있는 스타트업은 싱글 웹 페이지를 운영한다. 반대로, 니즈를 충분히 검증했고 어느 수준의 프로덕트 구현까지 완료한 스타트업은 프로덕트의 세부 설명, 혜택, 케이스 등을 모두 다루고자 멀티 웹 페이지를 운영할 것이다.
내 스모그 테스트를 받아라! <출처 : 원피스>겉과 속이 모두 알찬 웹 페이지를 만들어보자
웹 페이지의 규모가 크든 작든 상관없이, 웹 페이지는 프로덕트와 고객의 접점 채널이다. 그리고 이 채널의 목적은 (1) 회사와 프로덕트를 알리고, (2) 고객 반응을 확인하는 데 있다.
근데, 웹 페이지만 만들었다고 이 목적이 모두 달성되지 않는다. 예를 들어, 웹 페이지에서 고객이 어떤 영역에 더 관심을 가졌는지 알고 싶다면, GA나 Hotjar를 연결시켜야 한다. 이처럼, 웹페이지를 제작했다면, 최소한의 환경을 추가적으로 구축해야 한다. 근데 '환경 구축'이란 말을 들으니 괜히 코딩도 필요하고, 리소스도 많이 들 것 같다. 하지만, 걱정하지 말자! 지금부터 코딩이 별로 필요 없고, 무료인 툴을 다뤄보자.
코딩 없이 데이터 수집 환경 구축하기
예전에 웹 페이지에서 데이터를 수집하려면, 하나하나 코드를 입력해야 했다. 하지만, 다양한 데이터 툴이 보급화 되면서, 이제 별 다른 코딩 없이도 데이터를 수집할 수 있게 됐다.
1. Google Anayltics
웹 페이지의 첫 번째 목적은 '고객 반응 확인'이며, 이 반응을 객관적으로 평가하기 위해선 데이터가 필요하다. 즉, 웹 페이지에 고객이 어떤 행동을 보였고, 무엇에 관심을 가졌는지 데이터에 기반해서 알아내야 한다. Google Anaytics(이하, GA)를 활용하면, 실시간으로 웹 페이지에서 발생하는 고객 데이터를 트래킹 할 수 있다. GA 코드를 웹 페이지에 심어 놓으면, 페이지 별 방문 횟수(PV)나 체류 시간(DT) 등을 알아낼 수 있다. 고객이 웹 페이지에서 어떤 부분에 관심을 주로 갖는지, 해당 데이터를 기반해 파악 가능하다.
나 홀로 사이드 프로젝트에 적용한 GA2. Google Tag Manager(GTM)
하지만, 싱글 페이지로 구성된 웹 페이지는 어떨까? GA는 페이지 단의 데이터는 수집 가능하지만, 이벤트 단의 데이터는 자체적으로 수집하지 못한다. 이때, 사용하는 게 Google Tag Manager(이하, GTM)이다. GTM을 이용하면, 페이지 내 이벤트 트래킹이 가능하다. 예를 들어, 고객이 어떤 버튼을 클릭했는지, 고객이 페이지의 어느 깊이까지 스크롤했는지 등 더 깊이 있는 고객 데이터 수집이 가능하다. GTM은 코딩 없이 이벤트 데이터를 생산해내는 툴이고, 이렇게 생산한 데이터는 GA와 연동해 확인 가능하다. 둘의 시너지가 좋아서, 많은 기업이 GA와 GTM을 함께 쓴다.
나 홀로 사이드 프로젝트에 적용한 GTM3. Hotjar
데이터는 크게 '정량적 데이터'와 '정성적 데이터'로 나뉜다. GA와 GTM은 정량적 데이터와 관련 있는 툴이다. 웹 페이지에서 고객 행동을 정성적으로 수집 및 분석하고 싶다면, Hotjar을 이용하면 된다. Hotjar는 웹 페이지에 접속한 고객을 녹화해서 보여주는 툴이다. 녹화 영상에서 마우스가 어떻게 이동하고, 어디까지 스크롤을 했고, 어떤 버튼을 클릭했는지를 모두 확인할 수 있다. 각 녹화를 합쳐서, 히트맵 형식으로 볼 수도 있다.
홈페이지에서 실험을 해볼까?
Google Optimize
웹 페이지에서 고객 반응을 더 능동적으로 수집하고 싶다면 어떻게 해야 할까? 예를 들어, 프로덕트의 A 기능과 B 기능 중에서 고객이 더 열광하는 기능이 무엇인지 알고 싶다면? 가장 확실한 방법은 고객에게 랜덤으로 1개의 기능만 보여주고, 반응을 알아내는 AB 테스트를 하는 것이다. 이때, Google Optimize를 사용한다. Google Optimize는 별 다른 코딩 없이 AB 테스트를 가능하게 해 준다. 뿐 만 아니라, 2개 이상의 변수를 다루는 다변수 테스트도 가능하다.
SEO로 디테일 추가하기
1. Meta Tag
웹 페이지의 두 번째 목적은 '회사와 프로덕트를 알리기'에 있다. 광고, 마케팅 등도 효과적이지만, 이 방법들은 돈이 많이 들고, 효과가 일시적이다. 돈이 별로 안 들고, 장기적으로 지속되는 방법으로 SEO가 있다. SEO는 Search Engine Optimization의 약자로, 고객이 구글, 네이버 등에서 포탈 검색을 할 때, 웹 페이지가 노출되게 설정하는 과정이다. SEO를 잘만 한다면, 광고나 마케팅 없이도 고객이 검색을 하다가 자연스레 유입된다.
우리가 구글, 네이버 등에서 어떤 프로덕트를 찾기 위해 검색을 한다. 이때, '검색 결과'는 크롤러가 웹 페이지의 HTML을 분석해 서열을 매기고, 이 서열이 높은 순으로 보이는 결과 값이다. 웹 페이지 내 콘텐츠는 모두 HTML에 적혀 있는데, 크롤러는 'HTML'과 '검색 창의 입력 값'을 비교 분석해서 서열을 매긴다. 예를 들어보자. 구글 검색창에 '햄버거'를 검색했다면 (1) 이제 구글에서 HTML에 '햄버거'와 관련된 게 있는 웹 페이지를 모두 확인하고 (2) 서로 다른 웹 페이지 사이에 서열을 매긴 후 (3) 서열 순으로 검색 결과를 보여준다. 크롤러는 복잡한 알고리즘을 사용해 서열을 매긴다. 단순히 '검색 입력 값과 HTML 콘텐츠가 맞느냐?'만 보는 게 아니라, '해당 검색을 한 맥락', '사용자의 이전 검색 결과', '웹 페이지의 신뢰성', '백링크' 등을 모두 고려한다.
따라서, 초기 웹 페이지에서 SEO 작업이 엄청난 효과를 보장하지 않지만 그래도 <meta> 태그를 적절히 만져준다면, 어느 정도 이득을 볼 수 있다. 메타 태그 중에서도 <meta name = "description">과 <meta name = "keywords">에 집중해야 한다. meta description은 '해당 페이지의 요약 설명', meta keyword는 '해당 페이지를 대표하는 키워드'와 같다. keyword 값을 꼭 입력하지 않아도 된다고 하지만, 그래도 안 하는 것보다 하는 게 좋다. 고객이 어떤 단어로 검색할지 생각해서 <description>과 <keyword>를 입력해보자. 고객의 검색 값과 최대한 일치할수록 상위 노출이 될 확률이 높다. 혹은, 경쟁사의 홈 페이지에 접속해 어떤 메타 태그를 사용하는지 참고하는 것도 방법 중 하나다.
개인 포트폴리오에 설정한 메타 디스크립션과 메타 키워드메타 디스크립션은 검색 순위에 반영될 뿐만 아니라, 검색 결과 창에서 그대로 노출돼서 CTR에 직접적 영향을 끼친다. 고객이 어떤 단어로 검색할지 모르겠고 참고할 만한 경쟁사도 없다면, 메타 디스크립션에 후킹 문구를 사용해보자!
메타 디스크립션이 검색 결과에 나옴을 볼 수 있다.2. Search Console
고객이 어떤 단어를 검색해서 웹 페이지에 접속하는지 알고 싶다면, Search Console을 활용하자! Search Console은 구글에서 제공하는 서비스로, 구글 포털 검색 결과 데이터를 보여준다. Search Console에서는 검색 유입 고객(=Organic)이 어떤 단어를 검색해서 들어왔는지 보여준다.
위에서 말했듯이, SEO의 핵심은 '고객이 검색창에 입력한 값과 페이지의 HTML 콘텐츠가 얼마나 잘 맞느냐?'에 있다. 이를 바꿔 말해 고객이 어떤 걸 검색하는지 알아낸다면, 이에 맞춰 SEO 전략을 구성할 수 있고 결과적으로 웹 페이지를 상위 노출시킬 수 있다. 예를 들어, 웹 페이지에 유입된 검색 고객 중 대다수가 A라는 단어를 사용했다고 해보자. 그러면, 이제 A 단어를 주로 활용한 콘텐츠를 만들거나 혹은, <meta descripiton>이나 <meta keyword>에 A 단어를 추가하면 된다.
포트폴리오에 적용한 Search Console웹 페이지 동향을 보여주는 대시보드 만들기
지금까지 다룬 툴만 해도 총 5개(=GA, GTM, Google Optimize, Hotjar, Search Console)다. 서로 다른 데이터 툴을 모두 하나하나 확인하는 게 너무 번거롭고 어려워 보이지 않는가? 그렇다면, Google Studio를 활용해 대시보드를 만들면 된다. Google Studio는 구글에서 제공하는 데이터 대시보드 시각화 툴이다. 여러 외부 데이터 툴과 연동해 데이터를 불러오고, 이를 시각화해서 보여준다. 구글에서 운영하는 서비스인 만큼, GA, GTM, Google Optimize, Search Console과 연동이 매우 쉽고 간편한다.
포트폴리오의 데이터를 구글 스튜디오와 연동했다.
다양한 데이터 툴과 연동할 수 있다.
지금까지 총 6개의 툴(GA, GTM, Hotjar, Google Optimize, Search Console, Google Studio)을 다뤄봤다. 이 모든 툴은 무료라서 큰 리소스를 필요로 하지 않는다. 또한, 별 다른 코딩이 필요한 게 아니라 도입하는 데 개발자가 필요하지도 않다. 겉보기에 툴이 꽤나 많고 복잡해 보이지만, 실제로 몇 번 사용하다 보면 금세 익숙해질 수 있다. 나 같은 경우, 혼자서 사이드 프로젝트를 진행하다가 새로운 툴을 바로 적용하며 공부하고 있다. 책, 유튜브 등에서 이론으로 공부하는 것보다, 개인 프로젝트를 작게 해보면서 시도해보는 건 어떨까?
