1. 웅덩이 파는 데 포크레인 써보기 2. Design System 흉내를 위해 Figma 힐끗 보기 3. React 기초 훑어보고 Docusaurus 설치하기 4. Docusaurus config 톺아보기 (1) 5. Docusaurus config 톺아보기 (2) 6. Swizzle로 디자인 커스터마이징하기 7. Github Pages로 Docusaurus 웹사이트 호스팅하기
Google Analytics 플러그인 활용하기
Docusaurus에 Google Analytics를 붙이려면 gtag 플러그인을 사용해야 한다. trackingID라는 값을 확인해서 config 파일에 추가만 하면 연결은 끝난다.
Google Analytics 사이트에 접속해서 측정 시작 버튼을 누른다.
가입하기 과정을 시작하면 여러 종류의 이름을 입력해야 하는데, trackingID만 얻을 수 있으면 되므로 적당한 이름으로 지으면 된다. 계정 이름을 입력하고 다음으로 넘어간다.
마찬가지로 적당한 이름을 속성 이름에 입력한다. 그 다음 2단계는 내 사이트의 분야와 사업 규모 등을 물어보는 질문이기 때문에 적당히 해당하는 값으로 선택하면 된다.
마지막 단계에서 어떤 플랫폼을 추적할지 선택지가 나오는데 웹을 선택한다.
그럼 사이트 도메인을 입력하는 곳과 스트림 이름을 적는 곳이 나온다. 여기까지 모든 과정을 끝내면 본격적인 관리 화면에 진입한다.
메뉴 개수가 매우 많고 Docusaurus에서 요구하는 ID 외에도 다양한 속성값이 있어서 헷갈리기 쉽다. Docusaurus 플러그인에서 사용하는 ID는 데이터 스트림의 ID이므로 데이터 스트림 메뉴를 클릭한다.
그러면 앞서 생성 과정에서 맨 마지막 단계에 설정한 도메인 주소와 스트림 이름을 볼 수 있다. 여기서 우측에 있는 측정 ID를 복사해 Docusaurus config 파일에 입력하면 된다.
이번 포스트를 쓰면서 계정, 속성, 데이터 스트림의 관계를 찾아봤는데 Google Analytics에서 데이터를 관리하는 레벨 차이라고 보면 되는 것 같다. 가이드 페이지 맨 아래에 보면 계정/속성/스트림 간의 레벨 차이를 알기 쉬운 비교로 표현하고 있다. 사용자의 터치 포인트이자, 웹 혹은 앱 플랫폼 1개가 데이터 스트림 1개에 대응한다. 1개의 속성은 최대 50개의 데이터 스트림을 가질 수 있는데, 속성은 일종의 프로젝트 단위로 볼 수 있다고 한다. 하나의 기업이 여러개의 사업군을 가질 수 있고, 각 사업에서 앱/웹 서비스를 여러개 가지고 있는 경우가 있으니, 대충 계정은 기업, 속성은 사업군 혹은 프로젝트, 데이터 스트림은 서비스 1개 단위라고 보면 될 것 같다.
Google Search Console에 사이트 등록하기
원래는 위의 Google Analytics 등록으로 끝내려다가, 생각해보니 마냥 기다린다고 유입이 되는 것도 아닌데 좀 더 검색 유입을 높일 수 있는 방법이 있는지 찾아봤다. 국내의 대표적인 검색 엔진인 Google과 네이버에 사이트 등록을 해두면 검색 엔진 봇이 내 사이트를 살펴보게 할 수 있고, 유입 통계 데이터도 같이 볼 수 있다. 특히 네이버에서도 유입이 되게 하려면 사이트 등록을 같이 해주는게 좋다고 판단했다.
Google Search Console에 들어가서 시작하기 버튼을 누른다. 그러면 위와 같이 도메인을 입력하는 화면이 나오는데 여기서 오른쪽 칸에 https://를 포함한 도메인을 입력한다.
그러면 앞서 Google Analytics를 이미 등록했기 때문에 사이트 소유권이 바로 인증되었다는 메시지를 볼 수 있다.
관리 페이지로 들어오면 유입 통계를 볼 수 있는 메뉴와 구글 검색 봇이 사이트에 더 효율적으로 접근할 수 있도록 설정하는 기능들(페이지 색인, sitemap 등)이 보인다. 여기서 Sitemap 버튼을 누른 후, 도메인 주소 입력 칸에 sitemap.xml을 제출해주면 된다. Sitemap은 내 웹사이트 안을 구성하는 콘텐츠의 지도 역할을 하는데, Sitemap 정보가 정확할 수록 검색 봇이 웹사이트 내용을 더 정확하게 파악할 수 있어서 검색 유입에 도움이 된다. Docusaurus는 build할 때마다 알아서 sitemap을 생성하고 그걸 내 도메인/sitemap.xml 주소에 넣어준다. 따라서 sitemap이 어디있는지 주소를 처음 한 번 설정해주는 것만으로 상시 업데이트된 상태로 관리할 수 있다.
페이지 색인이 느릴 때 대처 방법
사이트 등록을 한 지 2-3주는 지났지만 아직 색인이 생성되지 않은 페이지가 꽤 많은 것으로 나온다. 찾아보니 비슷한 증상을 겪는 경우가 자주 있었고 대충 해결방법도 비슷했다.
- 별다른 문제 가 있는 건 아니고 아직 검색 봇이 일을 안 한 거니까 시간이 해결해준다.
- 웹상에 이미 존재하는 콘텐츠는 색인이 느리다. 찾아보기 힘든 독창적인 콘텐츠를 써야 한다.
- 페이지 안에 내용이 너무 많으면 과부하가 걸려서 색인이 느려질 수 있다.
이 중에서 3번을 보고 나서 포스트에 truncate를 넣지 않았다가 전부 넣어주는 것으로 수정했다. 모든 페이지가 색인이 되지 않다가 5페이지 정도가 색인에 성공했기 때문에 효과가 있었던 것 같다. 다만 비슷한 시기에 URL 검사 등 다른 해결책도 시도해봤기 때문에 정확히 어느 정도 효과가 있었는지는 알 수 없다. truncate는 블로그 포스트가 목록에 나열될 때 포스트의 내용을 얼마나 미리 보여줄지를 지정하는 기능이다.
내 블로그의 포스트 목록 페이지는 각 포스트의 세로 길이가 지정되어 있고, 삐져나오는 텍스트는 알아서 숨겨지도록 해놨다. 그래서 굳이 truncate로 일일이 미리볼 내용을 줄여줄 필요가 없기 때문에 모든 포스트에 사용하지 않았다. 이러면 화면에 보이지 않을 뿐, /blog 경로에는 모든 포스트의 모든 텍스트와 사진, 동영상 등이 모두 포함되어 있기 때문에 검색 봇이 페이지 내용을 읽어들이는 데 과부하가 올 수 있겠다 싶었다. 그래서 현재는 모든 포스트에 적당한 위치에 truncate를 넣어주고 있다. 사용법은 간단하다. 미리 보기를 줄이고 싶은 부분에 <!-- truncate --> 라는 문구를 넣어주기만 하면 된다.
Google Search Console과 Google Analytics의 용도 차이
데이터 수가 워낙 적어서 비교하는데 제약이 있긴 하지만 한 눈에 보기에도 양측이 수치 차이가 있고, 보는 데이터도 다르다. Search Console은 말 그대로 구글 검색 결과를 위한 도구다 보니, 실제 검색 결과에 얼마나 노출되었는지, 그리고 그 상태에서 클릭 이벤트가 발생했는지만을 보여주는 것 같았다. 사용자가 검색하다가 알아서 유입되는 경우다 보니, 현재 내 블로그 정도로는 매우 수치가 적다.
반면 Google Analytics 쪽은 사이트에 발생한 모든 이벤트를 추적하다보니, 페이지뷰 이벤트가 나름 몇십번 발생한 것을 볼 수 있었다. 내 IP는 제외해놨기 때문에 다른 사람이 들어오긴 한 건데, 개인 SNS에 사이트 링크를 걸어놓은 걸 타고 들어온 게 아닐까 추측중이다. 실제로 유입된 사용자 데이터를 보니 Referral 수치가 가장 많았다.
네이버 서치 어드바이저에 사이트 등록하기
네이버 사이트 등록을 검색하면 흔히 네이버 웹마스터 도구라는 곳으로 가야 한다고 나오는데, 여길 들어가려면 먼저 네이버 서치 어드바이저 페이지에 들어가야 한다.
사이트 상단에 보이는 웹마스터 도구 버튼을 클릭한다.
사이트를 등록하는 화면에서 https://를 포함한 도메인 전체를 입력한다.
그럼 위와 같은 소유권 인증 화면이 나오는데, Google Search Console 때와 달리 따로 등록한 내용이 없으니 인증을 직접 처리해야 한다. HTML 태그를 head에 넣기에는 head를 편집하는 방법을 찾지 못했기 때문에 HTML 파일을 업로드하는 방법으로 인증해야 한다. 업로드해야 하는 파일을 다운로드하고, 이 파일을 내 Docusaurus 프로젝트 폴더에서 src/static 경로 안에 넣어두면 된다. static 폴더는 React가 사이트를 build할 때 포함하고 싶은 데이터를 넣어두는 폴더기 때문이다.
물론 파일을 프로젝트 폴더에 넣는 것 만으로는 아직 도메인에 반영되기 전이기 때문에 배포 명령어를 한 번 실행해주어야 한다.
배포 후 소유 확인 버튼을 누르면 사이트 소유권이 확인되고, 위와 같이 내 사이트가 목록에 나오는 걸 볼 수 있다. 여기서 사이트 주소를 클릭하면 관리 페이지로 이동한다.
관리 페이지에서 마찬가지로 사이트맵을 등록할 수 있다. 왼쪽 메뉴에서 요청 > 사이트맵 제출 버튼을 누른 후, 사이트맵 파일이 위치한 주소를 입력하면 된다.
네이버 사이트 간단 체크 기능 사용해보기
네이버에서는 사이트 메타 데이터가 잘 들어가있는지 간단히 체크할 수 있는 기능을 제공한다. 앞서 봤던 관리 페이지가 사이트 관리 메뉴인데, 바로 옆에 있는 간단 체크 메뉴에 들어가서 도메인 주소를 입력하면 기본적인 사항을 체크할 수 있다.
robots.txt 추가하기
네이버 웹마스터 도구 관리 페이지에 robots.txt가 있는 걸 보고 생각나서 robots.txt 파일도 만들었다. robots.txt는 검색 엔진의 봇이 사이트에 들어왔을 때 어디까지 사이트 내용을 확인할 수 있도록 허용할지를 규정하는 역할을 한다. 웹크롤링을 해본 사람이라면 익숙할 것이다. 사이트마다 데이터 유출을 막기 위해 robots.txt에 일체의 크롤링을 허용하지 않는다고 적어놓는 경우가 있기 때문이다.
User-agent: *
Allow:/
나는 특별히 데이터 노출을 막을 이유가 없기 때문에 위와 같이 robots.txt 파일을 만들었다. 앞서 네이버 사이트 소유권 인증과 동일하게 static 폴더에 넣어두면 간편히 사이트에 배포할 수 있다.
시리즈를 마치며
이제 웹사이트를 만들면서 겪었던 거의 대부분의 일에 대한 기록이 끝났다. 예상보다 포스팅 개수도 길이도 길어졌다. 고생했던 과정을 다시 복기하면서 부가적인 정보를 더 찾아보기도 하고, 여러모로 새로운 사실을 많이 배울 수 있었다. 완벽함보다 꾸준함이 더 중요한 법이다. 이번 블로그에는 꾸준히 글을 올릴 수 있게 되면 좋겠다.
1. 웅덩이 파는 데 포크레인 써보기 2. Design System 흉내를 위해 Figma 힐끗 보기 3. React 기초 훑어보고 Docusaurus 설치하기 4. Docusaurus config 톺아보기 (1) 5. Docusaurus config 톺아보기 (2) 6. Swizzle로 디자인 커스터마이징하기 7. Github Pages로 Docusaurus 웹사이트 호스팅하기