AI 기반 유사 게시물 추천 기능 추가 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
스태틱 사이트 개발자, Astro 프레임워크 사용자, AI 기반 콘텐츠 추천 기능 구현에 관심 있는 개발자
핵심 요약
text-embedding-3-small모델을 사용해 게시물을 벡터화하고 코사인 유사도 계산으로 유사 게시물 추천- TypeScript 타입 정의(
PostContent,Embedding)와getPostEmbedding함수로 OpenAI API 연동 getCosineSimilarity함수를 통해 유사도 계산 후,SimilarPosts.astro컴포넌트로 UI 구현
섹션별 세부 요약
1. AI 기반 유사 게시물 추천 개념
- Embedding 정의: 텍스트를 실수 벡터로 변환, 벡터 간 거리로 관련성 측정
- OpenAI의 embedding 설명:
text-embedding-3-small모델 사용, 코사인 유사도 기반 유사도 계산 - 핵심 기술: 벡터화 → 유사도 계산 → 상위 3개 게시물 선택
2. 구현 단계 및 코드 예시
- 타입 정의:
```ts
type PostContent = { slug: string; content: string; };
type Embedding = { slug: string; vector: number[]; };
```
- OpenAI API 연동:
getPostEmbedding함수로 벡터 생성
```ts
const getPostEmbedding = async (apiKey: string, post: PostContent): Promise
const openai = getClient(apiKey);
const response = await openai.embeddings.create({ model: "text-embedding-3-small", input: post.content });
return { slug: post.slug, vector: response.data[0].embedding };
};
```
3. 유사도 계산 및 결과 매핑
- 코사인 유사도 계산 함수:
```ts
const getCosineSimilarity = (vectorA: number[], vectorB: number[]) => {
const dot = vectorA.reduce((sum, val, i) => sum + (val * vectorB[i]), 0);
const magnitudeA = Math.sqrt(vectorA.reduce((sum, val) => sum + (val * val), 0));
const magnitudeB = Math.sqrt(vectorB.reduce((sum, val) => sum + (val * val), 0));
return dot / (magnitudeA * magnitudeB);
};
```
- 유사도 기반 매핑:
getSlugToMostRelatedPostsMap함수로 게시물 별 유사도 저장
4. 컴포넌트 통합 및 UI 구현
SimilarPosts.astro컴포넌트:
```astro
{similarPost.data.title}
```
tags-and-posts.ts파일:getRelatedPostsFromSlug함수로 관련 게시물 추출
결론
스태틱 사이트에서 AI 기반 유사 게시물 추천 기능을 구현할 때, OpenAI의 text-embedding-3-small 모델과 코사인 유사도 계산을 활용하면 서버리스 환경에서도 실시간 추천이 가능하다. SimilarPosts.astro 컴포넌트를 통한 UI 구현은 사용자 경험 향상에 기여하며, TypeScript 타입 정의와 함수 분리를 통해 코드 유지보수성을 높일 수 있다.