メニュー
AEO(Answer Engine Optimization) 및 GEO(Generative Engine Optimization) 최적화 스킬. AI 검색 엔진과 생성형 AI가 콘텐츠를 이해하고 인용할 수 있도록 최적화합니다.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/aksel26/hmkim-blog-keystatic --skill aeo-geo-optimizationコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | aeo-geo-optimization |
| description | AEO(Answer Engine Optimization) 및 GEO(Generative Engine Optimization) 최적화 스킬. AI 검색 엔진과 생성형 AI가 콘텐츠를 이해하고 인용할 수 있도록 최적화합니다. |
| triggers | ["AEO 최적화해줘","GEO 최적화해줘","AI 검색 최적화","ChatGPT/Perplexity 최적화"] |
Google Featured Snippets, People Also Ask, Voice Search 등 답변 중심 검색 결과에 최적화합니다.
ChatGPT, Perplexity, Gemini, Claude 등 생성형 AI 검색 엔진이 콘텐츠를 인용하고 참조할 수 있도록 최적화합니다.
## Next.js란 무엇인가?
Next.js는 React 기반의 풀스택 웹 프레임워크입니다.
서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG),
API 라우트를 기본 제공하여 SEO 친화적인 웹 앱을 쉽게 구축할 수 있습니다.
// components/FAQSchema.tsx
export function FAQSchema({ faqs }: { faqs: FAQ[] }) {
const schema = {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: faqs.map((faq) => ({
'@type': 'Question',
: faq.,
: {
: ,
: faq.,
},
})),
};
(
);
}
const howToSchema = {
'@context': 'https://schema.org',
'@type': 'HowTo',
name: 'Next.js 프로젝트 시작하기',
description: 'Next.js 프로젝트를 처음부터 설정하는 방법',
step: [
{
'@type': 'HowToStep',
name: '프로젝트 생성',
text: 'npx create-next-app@latest 명령어로 프로젝트를 생성합니다.',
},
{
'@type': 'HowToStep',
name: '개발 서버 실행',
text: 'npm run dev로 개발 서버를 실행합니다.',
},
],
};
## 핵심 용어 정의
**SSR (Server-Side Rendering)**
: 서버에서 HTML을 생성하여 클라이언트에 전달하는 렌더링 방식입니다.
**SSG (Static Site Generation)**
: 빌드 시점에 HTML을 미리 생성하여 CDN에서 제공하는 방식입니다.
AI 모델이 신뢰할 수 있는 출처로 인식하도록 합니다.
// 저자 정보 명시
const authorSchema = {
'@context': 'https://schema.org',
'@type': 'Person',
name: '홍길동',
jobTitle: '시니어 프론트엔드 개발자',
url: 'https://yourdomain.com/me',
sameAs: [
'https://github.com/username',
'https://linkedin.com/in/username',
],
};
## Next.js 15의 주요 변경사항
Next.js 15는 2024년 10월에 출시되었으며,
React 19 지원과 Turbopack 안정화가 핵심 업데이트입니다.
### 성능 개선
- 빌드 시간: 평균 50% 단축
- 콜드 스타트: 25% 개선
- 번들 사이즈: 최대 30% 감소
// components/TLDRSection.tsx
export function TLDRSection({ summary }: { summary: string }) {
return (
<aside className="tldr-box" aria-label="요약">
<h2>TL;DR (요약)</h2>
<p>{summary}</p>
</aside>
);
}
## 참고 자료
1. [Next.js 공식 문서](https://nextjs.org/docs) - 공식 가이드
2. [Vercel 블로그](https://vercel.com/blog) - 최신 업데이트
3. [React 문서](https://react.dev) - React 핵심 개념
export const metadata: Metadata = {
title: '제목',
description: '설명',
// AI 검색 엔진용 추가 메타데이터
other: {
'article:author': '작성자명',
'article:published_time': '2024-01-15',
'article:modified_time': '2024-01-20',
'article:section': 'Technology',
'article:tag': 'Next.js, React, Web Development',
},
};
// components/DefinitionBox.tsx
export function DefinitionBox({ term, definition }: Props) {
return (
<dl className="definition-box" itemScope itemType="https://schema.org/DefinedTerm">
<dt itemProp="name">{term}</dt>
<dd itemProp="description">{definition}</dd>
</dl>
);
}
// components/ComparisonTable.tsx
export function ComparisonTable({ data }: Props) {
return (
<figure>
<table aria-describedby="table-description">
<caption id="table-description">SSR vs SSG 비교표</caption>
<thead>
<tr>
<th scope="col">특성</th>
<th scope="col">SSR</th>
<th scope="col">SSG</th>
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr key={row.feature}>
<th scope="row">{row.feature}</th>
<td>{row.ssr}</td>
<td>{row.ssg}</td>
</tr>
))}
</tbody>
</table>
</figure>
);
}
변경된 코드를 분석하여 관심사별로 그룹화하고, 각 그룹을 별도로 git add 하여 단계별 커밋을 수행합니다.
Git 커밋 내역을 분석하여 Obsidian 형식의 개발 기록 마크다운 자동 생성. "오늘 커밋 정리", "개발 기록 작성", "커밋 분석", "작업 로그" 요청 시 트리거. 커밋 메시지, 변경 파일, diff를 분석하여 frontmatter 메타데이터와 기술 개념 설명이 포함된 체계적인 문서 생성 후 Obsidian MCP로 저장.
블로그 SEO(검색 엔진 최적화) 전문 스킬. 메타데이터, sitemap, robots.txt, 구조화된 데이터, 캐노니컬 URL 등 기술적 SEO 구현을 담당합니다.