안티그래비티·젬마로 개인 웹사이트 만들기: 오프라인 벡터 추천 구현 사례

핵심 메시지

• 구글 안티그래비티(Antigravity)로 HTML·CSS 기반의 VS Code 스타일 개인 웹사이트를 만들고 테마까지 바꿀 수 있게 구성했다.
• 관련 글 추천 기능을 별도 서버 없이 구현하기 위해 각 글 요약을 젬마(Gemma)로 만들고, 임베딩 젬마로 벡터화했다.
• 추천 계산을 빌드(컴파일) 시점에 미리 수행해 정적 사이트를 생성하므로 외부 서비스 연결 없이 동작한다.
• AI 추천이 보고 있는 글에 따라 동적으로 바뀌면서도, 인터넷 연결 없이 오프라인에서 작동한다는 점이 핵심이다.

쉽게 이해하기

발표자는 여러 번 시도했지만 CSS나 예외 상황 때문에 매번 막혔던 개인 웹사이트를, 이번에는 구글의 AI 개발 도구 안티그래비티를 이용해 완성했다고 소개한다. 이 사이트는 VS Code처럼 전체 화면 구성을 한눈에 보며 작업하는 방식이 마음에 들어 그런 스타일로 만들었고, 실제 VS Code를 쓰는 것은 아니지만 비슷한 문법으로 다룰 수 있다.

화면은 모두 HTML과 CSS로 구성되며 테마 변경도 가능하다. 발표자가 특히 원했던 기능은 글마다 붙는 "관련 글" 섹션이었다. 다만 이를 위해 추천용 서버를 따로 띄우고 싶지는 않았던 것이 출발점이었다.

그래서 안티그래비티에게 각 글의 요약을 젬마로 생성하게 하고, 그 요약을 임베딩 젬마로 벡터화했다. 그리고 빌드 시점에 사이트를 생성하면서 각 페이지의 관련 글을 미리 계산해 두는 제너레이터를 만들어, 발행 전에 추천이 완성되도록 했다.

결과적으로 외부 서비스에 접속하지 않고도 보고 있는 글에 맞춰 관련 글이 동적으로 추천된다. 온디바이스 모델과 사전 계산을 결합하면 서버 인프라 없이도 개인 사이트에 의미 기반 추천을 넣을 수 있음을 보여 주는 사례다.

주요 인사이트

• AI 코딩 도구는 단순한 코드 자동완성을 넘어, 막혔던 사이드 프로젝트를 완성까지 끌고 가는 보조자 역할을 할 수 있다.
• 추천처럼 무거워 보이는 기능도 빌드 시점에 미리 계산해 정적 결과로 굽는 방식으로 런타임 서버 없이 구현할 수 있다.
• 온디바이스 모델(젬마·임베딩 젬마)을 쓰면 외부 API 호출이나 상시 연결 없이 오프라인에서도 의미 기반 기능이 동작한다.

자주 묻는 질문

관련 AI 소식