안녕하세요. FlipB 개발팀 Luna 입니다.
프론트엔드 개발자로서 서비스의 성장을 위해 꼭 챙겨야 할 SEO(Search Engine Optimization)와 생성형 AI 시대의 새로운 표준 GEO(Generative Engine Optimization)에 대해 이야기해보려 합니다.
이 글에서는 Flipb의 brandvis-intro 프로젝트(Next.js 16, App Router 기반)의 실제 코드를 바탕으로, 어떻게 하면 우리 서비스를 사람(검색 엔진)과 AI(챗봇) 모두에게 효과적으로 전달할 수 있는지 구체적인 예시와 함께 알아보겠습니다.
1. SEO (Search Engine Optimization)
검색 엔진이 좋아하는 사이트 만들기
SEO는 구글이나 네이버 같은 전통적인 검색 엔진이 우리 웹사이트를 잘 이해하고, 상위에 노출시켜주도록 최적화하는 과정입니다. Next.js App Router를 사용하면 이러한 SEO 설정을 매우 직관적으로 처리할 수 있습니다.
Next.js의 동적 라우팅 기능을 활용하면 각 페이지별로 메타데이터를 설정할 수 있으며, 이를 통해 검색 엔진이 해당 페이지를 이해하고 색인화하는 데 도움을 줄 수 있습니다. 또한, Next.js는 서버 사이드 렌더링을 지원하므로 페이지가 서버 측에서 사전에 렌더링되어 검색 엔진에 빠르게 색인될 수 있도록 도와줍니다.
또한, Next.js는 코드 스플리팅과 프리페치 기능을 제공하여 웹사이트의 성능을 최적화할 수 있습니다. 이는 사용자 경험을 향상시키고 검색 엔진에서 높은 순위를 유지하는 데 도움이 됩니다.
따라서, Next.js App Router를 사용하여 웹사이트의 SEO를 최적화하고 사용자 경험을 향상시킬 수 있습니다. SEO가 중요한 요소인 현대 웹 개발에서는 Next.js의 이점을 활용하는 것이 좋습니다.
1) 다국어(i18n) 지원과 동적 메타데이터(Dynamic Metadata)
글로벌 서비스를 지향한다면, 언어별로 적절한 메타데이터를 제공하는 것이 필수입니다.
저희 프로젝트는 next-intl과 Next.js의 generateMetadata API를 결합하여 이를 해결했습니다. app/[locale]/layout.tsx에서 URL의 locale 파라미터에 따라 제목(Title), 설명(Description), 오픈 그래프(Open Graph) 정보를 동적으로 생성합니다.
// app/[locale]/layout.tsx
export async function generateMetadata({
params,
}: {
params: Promise<{ locale: string }>;
}): Promise<Metadata> {
const { locale } = await params;
// next-intl을 사용해 메타데이터 번역 파일을 가져옵니다.
const t = await getTranslations({ locale, namespace: "metadata" });
const baseUrl = "<https://brandvis.ai>";
// 한국어(기본)는 루트 경로, 영어는 /en 경로를 사용합니다.
const localePath = locale === "ko" ? "" : `/${locale}`;
return {
title: {
default: t("metadata_title"), // 예: "BrandVis | AI 기반 GEO 솔루션"
template: "%s | BrandVis",
},
description: t("metadata_description"),
// 검색 엔진이 중복 문서로 오판하지 않도록 canonical URL을 명시합니다.
alternates: {
canonical: `${baseUrl}${localePath}`,
languages: {
ko: baseUrl,
en: `${baseUrl}/en`,
},
},
// 소셜 미디어 공유 시 보여질 카드 설정
openGraph: {
title: t("metadata_title"),
description: t("metadata_description"),
url: `${baseUrl}${localePath}`,
siteName: "BrandVis",
locale: locale === "ko" ? "ko_KR" : "en_US",
type: "website",
},
};
}alternates.languages설정을 통해 구글 봇에게 “이 페이지는 한국어 버전이고, 저 페이지는 영어 버전이야”라고 명확히 알려주어 언어별 검색 결과에 정확히 노출되도록 했습니다.
2) 성능 최적화 (Core Web Vitals)와 ISR
검색 엔진은 ‘느린 사이트’를 싫어합니다. 특히 LCP(Largest Contentful Paint)는 검색 순위에 큰 영향을 미칩니다. app/[locale]/page.tsx에서는 다음과 같은 전략으로 성능과 최신성을 모두 잡았습니다.
- ISR (Incremental Static Regeneration):
export const revalidate = 3600;설정을 통해 1시간마다 정적 페이지를 새로 빌드합니다. 덕분에 서버 부하 없이 빠른 속도를 유지하면서도, 콘텐츠 변경 사항을 주기적으로 반영합니다. - 컴포넌트 지연 로딩 (Lazy Loading): 초기 화면(Above the Fold)에 보이지 않는
Pricing,Partner,FAQ등의 무거운 섹션은next/dynamic으로 지연 로딩했습니다.
// app/[locale]/page.tsx
const Pricing = dynamic(() => import("./components/sections/Pricing"), {
loading: () => <div className="h-[800px] bg-gray-50" />, // 로딩 중 레이아웃 밀림 방지(CLS 최적화)
});
- 데이터 병렬 호출: 여러 API 호출이 필요한 경우
await Promise.all()로 묶어 직렬 호출로 인한 지연(Waterfall)을 방지했습니다.
2. GEO (Generative Engine Optimization)
AI 챗봇이 추천하는 브랜드 되기
GEO는 ChatGPT, Claude, Perplexity 같은 생성형 AI가 사용자의 질문에 답변할 때, 우리 브랜드를 인용(Citation)하고 추천하도록 최적화하는 전략입니다. SEO가 “링크 클릭”을 유도한다면, GEO는 “AI의 답변 속에 우리 브랜드가 포함되는 것”을 목표로 합니다.
1) llms.txt: AI를 위한 전용 소개서
가장 효과적이고 새로운 GEO 전략은 llms.txt 파일 제공입니다.
이는 사람을 위한 HTML 페이지가 아니라, 오직 AI 봇이 읽기 위해 만든 마크다운 형식의 명세서입니다. app/llms.txt/route.ts를 통해 /llms.txt 경로로 접속하면 우리 서비스의 핵심 정보를 잘 정리된 텍스트로 반환합니다.
// app/llms.txt/route.ts
export async function GET() {
const content = `
# BrandVis (brandvis.ai) - AI 기반 생성형 검색 최적화 (GEO) 솔루션
## 소개 (Overview)
BrandVis는 검색 엔진 시대(SEO)를 넘어... (중략)
## 주요 기능
- 가시성 측정: AI 플랫폼별 브랜드 언급/인용 분석
- 인사이트 제공: 브랜드 영향력 지수(BII), 점유율 분석
...
`.trim();
return new Response(content, {
headers: { "Content-Type": "text/plain; charset=utf-8" },
});
}
- Perplexity나 ChatGPT 같은 검색형 AI 서비스가 이 파일을 크롤링하면, 우리 서비스가 정확히 어떤 기능을 제공하는지, 누구를 위한 서비스인지 “할루시네이션(거짓 정보)” 없이 정확하게 학습할 수 있습니다.
2) robots.ts: AI 봇 “대환영” 선언
많은 웹사이트가 데이터 유출을 우려해 GPTBot 등을 차단하지만, GEO 관점에서는 오히려 적극적으로 허용해야 합니다. 우리 브랜드 정보를 AI가 알아야 답변해 줄 수 있으니까요. app/robots.ts에서 주요 AI 봇들을 명시적으로 허용(Allow)했습니다.
// app/robots.ts
export default function robots(): MetadataRoute.Robots {
return {
rules: [
{
userAgent: "*",
allow: "/",
disallow: ["/api/", "/_next/", "/admin/"], // 민감한 경로는 차단
},
// AI 크롤러 명시적 허용
{ userAgent: "GPTBot", allow: "/" }, // OpenAI
{ userAgent: "Claude-Web", allow: "/" }, // Anthropic
{ userAgent: "PerplexityBot", allow: "/" }, // Perplexity
{ userAgent: "Google-Extended", allow: "/" }, // Google Gemini
],
sitemap: "<https://brandvis.ai/sitemap.xml>",
};
}
3) 구조화된 데이터 (JSON-LD)로 의미 전달하기
HTML 텍스트만으로는 AI에게 “우리는 어떤 소프트웨어이고, 어떤 문제를 해결해”라는 문맥(Context)을 완벽히 전달하기 어렵습니다. app/[locale]/layout.tsx에 JSON-LD(Linked Data)를 심어 기계가 이해할 수 있는 언어로 정보를 제공합니다. 저희는 단순 WebSite 스키마뿐만 아니라 SoftwareApplication, Organization 스키마를 사용하여 구체적인 정보를 제공합니다.
// app/[locale]/layout.tsx (JSON-LD 부분)
const structuredData = {
"@context": "<https://schema.org>",
"@graph": [
{
"@type": "SoftwareApplication",
name: "BrandVis", // 서비스명
applicationCategory: "BusinessApplication",
operatingSystem: "Web", // 운영체제/플랫폼 명시
description:
locale === "ko"
? "생성형 AI 검색 최적화(GEO) 솔루션..."
: "Generative Engine Optimization (GEO) solution...",
},
// ... Organization 스키마 등 추가
],
};
- AI가 “BrandVis가 어떤 서비스야?”라는 질문을 받았을 때, 웹사이트의 방대한 텍스트를 추론하는 대신 이 JSON-LD 데이터를 통해 “웹 기반의 비즈니스 GEO 솔루션입니다”라고 정확하고 빠르게 답변할 확률이 높아집니다.
3. 마치며
개발자의 역할 확장
이제 프론트엔드 개발자의 역할은 단순히 “예쁜 화면을 빠르게 보여주는 것”을 넘어섰습니다.
- SEO: 구글 봇이 우리 사이트를 잘 읽어가도록 구조를 잡고(Semantic HTML, Sitemap)
- GEO: AI 봇이 우리 브랜드를 잘 학습하도록 전용 콘텐츠(
llms.txt)와 데이터(JSON-LD)를 제공해야 합니다.
brandvis-intro 프로젝트는 이러한 고민을 코드 레벨에서 녹여낸 결과물입니다. 여러분의 프로젝트에도 당장 llms.txt 하나부터 추가해 보시는 건 어떨까요? 작은 텍스트 파일 하나가 다가오는 AI 검색 시대에 큰 차이를 만들지도 모릅니다.
