23시간만에 실험보고서 생성 AI 웹서비스 만들기(4) - 웹서비스 최적화

이 글은 시리즈로 이루어져 있으므로 1편부터 읽으시는 것을 추천합니다.

1편: 웹서비스 기획하기 [바로이동하기]
2편: 웹서비스 개선하기 [바로이동하기]
3편: 웹서비스 배포하기 [바로이동하기]
4편: 웹서비스 최적화하기 [읽고있는글]

더 많은 이야기를 듣고싶다면 위드의 메이커 레터 [구독하러가기]

웹사이트 분석이 필요해!

나의 웹서비스에 누가, 얼마나, 언제 접속했는지 등등 여러 정보를 알기 위해선 웹사이트 분석 서비스가 필요합니다. 

대표적인 웹사이트 분석 서비스로 GA4(구글 애널리틱스)가 이용되고 있어요. 

무료로 사용할 수 있고 통계도 직관적이에요. 웹사이트 html 코드에 구글 애널리틱스에서 주는 유저코드를 삽입해주면 바로 사용해볼 수 있어요. 

바로 유저 트래픽이나 여러 통계를 확인할 수 있었어요. 

어느 접속 지역과 어떤 경로를 통해 유입되었는지도 알려줍니다. 사실상 구글 애널리틱스는 웹서비스를 운영한다면 필수라고 할 수 있어요. 

가끔식 들어가보며, 통계를 보는 재미가 있어요. 😁

내가 만든 코드는 내가 지킨...코드 보안

어떤 웹사이트든 접속하여 'F12' 개발자모드를 실행시키면 html, css, Js 코드를 볼 수 있어요. 

F12를 누르고 Sources 탭에서 웹사이트의 html, Js 코드가 노골적으로 보여주고 있어요. 

 "혹시..? 내 코드들을 빼앗긴다고?" 

html 코드들은 웹을 이루는 기본적인 구조이기 때문에 코드를 보는것을 막을 수 없고, 코드가 드러난다하더라도 문제가 없어요. 

 "그러나, Js 코드는?" 

html 코드와 달리 Js 코드는 탈취당하면 문제가 발생할 수 있어요. 열심히 노력한 코드를 빼앗긴다는 것은 일어나지 말아야 해요. 

저는 특히 다른 백엔드 언어를 사용하지 않고 Js로만 웹서비스를 구축했기 때문에 Js 코드가 털리면 장사 밑천을 털리는 것과 비슷해요.

그래서 Js 코드를 바로 암호화 시켜주는 사이트를 찾았어요. Js 코드를 통채로 넣고 암호화를 진행했어요. 

https://obfuscator.io/

Js 코드가 알아볼 수 없도록 암호화가 됩니다. (암호화된 상태에서도 정상적으로 작동해요!)

암호화된 Js 코드를 웹사이트에 업로드하고 살펴보았어요. 웹사이트는 정상적으로 작동하고, Js 코드는 알아볼 수 없도록 암호화 된 것을 볼 수 있어요. 

이렇게 간단한 암호화 방법으로 코드 탈취를 예방할 수 있었어요. 코드는 끝났으니 웹사이트를 좋게좋게 만들어 봐야겠네요!

웹서비스 최적화...널 찾아야해(검색등록)

만든 웹사이트를 사람들이 들어오도록 만들기 위해선 찾을 수 있게 만들어야 해요. 

아무리 좋은 사이트도 찾을 수 없으면...의미가 없게되요.

구글, 네이버, 다음과 같은 검색 엔진 사이트에서 저의 웹사이트가 검색되도록 해야해요. 

1. 구글 서치콘솔(https://search.google.com/search-console/about)

2. 네이버 서치어드바이저(https://searchadvisor.naver.com/)

이렇게 한국에서 가장 많이 이용하는 구글과 네이버에 저의 사이트를 검색 등록해볼께요. 

사이트 검색 등록을 하게되면 사이트 통계도 제공해줘요. 실제로 검색이 되는지 확인해야겠죠?

실제로 구글로 검색이 된다면 성공이에요. '실험 보고서 생성기'라고만 입력했는데 윗 상단에 웹사이트가 떠 있네요. 

네이버에서도 검색 등록을 하고...검색해보았어요. 

네이버에서도 바로 상단에 웹사이트가 노출된 모습을 볼 수 있었어요. 보통 검색을 하더라도 상단에 뜨는 경우가 드문데, 좋은 모습을 보여주고 있어요. 

 "검색창아, 내 웹사이트가 뭐하는 건지 알아?" 

검색창에 키워드를 넣고 검색을 하더라도, 다른 웹사이트나 블로그 게시물에 묻힐 수 있어요. 

다른 웹사이트와의 경쟁을 뚫고, 내 웹사이트를 상단으로 끌어올리기 위해선 "SEO(검색엔진최적화)"가 필요해요. 

검색 엔진의 알고리즘이 나의 웹사이트를 인식하려면 반복되거나 다양한 키워드를 사용해야해요. 이를 위해 가장 쉽게 할 수 있는 방법은 "메타 태그"에요.

간단히 검색엔진이 인식할 수 있도록 사이트의 성격을 나타내는 키워드들을 html 코드에 삽입하는 것이에요. 

html 코드에 메타 태그를 등록하여 "실험, 보고서, AI" 라는 키워드들을 넣었고 영어로도 넣어주었어요. 저는 메타 태그를 gpt에게 추천받았어요.

이렇게 메타 태그를 등록하면 검색 엔진에서 노출될 확률이 늘어날 수도 있어요. (없는 것 보다는 좋아요!)

이번 편은 웹사이트 최적화를 저의 수준에서 해봤어요. 보안이나 분석, 최적화 전부 초보자 수준이었어요. 부족한 부분이 정말 많았어요.😂

그리고 요번 웹서비스 만들기 시리즈는 토이 프로젝트에 가까운 자그만한 개발이었지만 정말 쉽지 않았어요. 코드 한줄만 바꾸면 해결되는 것도 코드를 읽을 줄 몰라 해결하지 못해, 많이 헤맸어요. 

결국 작은 결과물을 만들어 냈고 코딩을 하나도 모르던 제가 여기까지 왔다는 것이 정말 신기하네요::

이제 이번 시리즈도 곧 마무리를 향해 달려가네요. 

다음편은 "23시간만에 실험보고서 생성 AI 웹서비스 만들기"에서 배운점을 이야기해보려 합니다. 

5편에서 계속....