feat: Phase 2 — SEO 인프라 + GA 이벤트 + 콘텐츠 엔진 구축

[SEO 인프라] - app/sitemap.ts: Next.js App Router 사이트맵 자동 생성 (/sitemap.xml) - app/robots.ts: 크롤러 허용/차단 규칙 + 사이트맵 경로 등록 - app/layout.tsx: JSON-LD 구조화 데이터 추가 (Person + LocalBusiness + OfferCatalog 스키마) - GA4 config 업데이트 (send_page_view, custom_map) [서비스 페이지 SEO 메타태그 강화] - automation: 'AI 업무 자동화 외주' 키워드 12종 최적화 - prompt: 'ChatGPT 프롬프트 잘 쓰는 법', '이미지 생성 프롬프트' 등 구매형 키워드 추가 - website: '소상공인 홈페이지 제작 외주', '홈페이지 제작 비용' 등 롱테일 키워드 추가 [GA 이벤트 트래킹] - ContactModal: contact_attempt / generate_lead / contact_error 이벤트 추가 (전환 추적 핵심 — 어떤 서비스에서 문의가 오는지 GA에서 확인 가능) [홈페이지 콘텐츠 위젯] - 'AI 자동화 실전 팁' 블로그 포스트 3종 카드 섹션 추가 (블로그 연동 준비) [콘텐츠 자산 (CONTENT/ 폴더)] - brand-story.md: 풀/숏/초단문/유튜브 채널 소개용 4종 브랜드 스토리 원고 - youtube-scripts.md: 유튜브 숏츠 스크립트 10편 (훅→문제→시연→CTA 구조) - sns-calendar.md: 30일 SNS 포스팅 캘린더 (블로그·스레드·카카오·블라인드 채널별) - blog-drafts.md: 네이버 블로그 SEO 초안 10편 (키워드·소제목·본문 완성) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 11:31:20 +09:00
parent 2dd42c7f6b
commit 9be23a5d00
13 changed files with 1119 additions and 33 deletions
--- a/app/components/ContactModal.tsx
+++ b/app/components/ContactModal.tsx
@@ -63,10 +63,23 @@ export default function ContactModal({
    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

+  // GA4 이벤트 헬퍼
+  const trackEvent = (eventName: string, params?: Record<string, string>) => {
+    if (typeof window !== 'undefined') {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const w = window as any;
+      if (typeof w.gtag === 'function') {
+        w.gtag('event', eventName, params);
+      }
+    }
+  };
+
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus('loading');
    setErrorMessage('');
+    // 문의 시도 이벤트
+    trackEvent('contact_attempt', { service: formData.service });
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
@@ -76,9 +89,16 @@ export default function ContactModal({
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || '문의 전송에 실패했습니다.');
      setStatus('success');
+      // 문의 성공 이벤트 (전환 추적 핵심)
+      trackEvent('generate_lead', {
+        event_category: 'contact',
+        event_label: formData.service,
+        value: '1',
+      });
    } catch (error) {
      setStatus('error');
      setErrorMessage(error instanceof Error ? error.message : '문의 전송에 실패했습니다.');
+      trackEvent('contact_error', { service: formData.service });
    }
  };

--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -53,6 +53,45 @@ export const metadata: Metadata = {
  },
 };

+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    {
+      '@type': 'Person',
+      '@id': 'https://jaengseung-made.com/#person',
+      name: '박재오',
+      url: 'https://jaengseung-made.com',
+      jobTitle: '백엔드 개발자 · AI 자동화 전문가',
+      worksFor: { '@type': 'Organization', name: '대기업 재직 중' },
+      email: 'bgg8988@gmail.com',
+      telephone: '010-3907-1392',
+      knowsAbout: ['Python', 'Java', 'Spring Boot', 'Next.js', 'RPA', 'AI 자동화', '업무 자동화'],
+      description: '현직 대기업 백엔드 개발자. 계약서 먼저, 납기 보장, 소스코드 100% 인도 원칙으로 외주 개발·AI 자동화·프롬프트 엔지니어링 서비스를 제공합니다.',
+    },
+    {
+      '@type': 'LocalBusiness',
+      '@id': 'https://jaengseung-made.com/#business',
+      name: '쟁승메이드',
+      url: 'https://jaengseung-made.com',
+      description: '현직 대기업 개발자가 운영하는 AI 자동화·외주 개발 서비스. 계약서 포함, 납기 패널티, 소스코드 인도.',
+      email: 'bgg8988@gmail.com',
+      telephone: '010-3907-1392',
+      priceRange: '₩₩',
+      areaServed: '대한민국',
+      hasOfferCatalog: {
+        '@type': 'OfferCatalog',
+        name: '쟁승메이드 서비스 목록',
+        itemListElement: [
+          { '@type': 'Offer', itemOffered: { '@type': 'Service', name: '업무 자동화 개발', url: 'https://jaengseung-made.com/services/automation' } },
+          { '@type': 'Offer', itemOffered: { '@type': 'Service', name: '외주 개발', url: 'https://jaengseung-made.com/freelance' } },
+          { '@type': 'Offer', itemOffered: { '@type': 'Service', name: '프롬프트 엔지니어링', url: 'https://jaengseung-made.com/services/prompt' } },
+          { '@type': 'Offer', itemOffered: { '@type': 'Service', name: '홈페이지 제작', url: 'https://jaengseung-made.com/services/website' } },
+        ],
+      },
+    },
+  ],
+};
+
 export default function RootLayout({
  children,
 }: {
@@ -61,6 +100,10 @@ export default function RootLayout({
  return (
    <html lang="ko">
      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-WG77RNHXRK"
          strategy="afterInteractive"
@@ -70,7 +113,10 @@ export default function RootLayout({
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
-            gtag('config', 'G-WG77RNHXRK');
+            gtag('config', 'G-WG77RNHXRK', {
+              send_page_view: true,
+              custom_map: { dimension1: 'service_type' }
+            });
          `}
        </Script>
      </head>
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -618,6 +618,47 @@ export default function Home() {
        `}</style>
      </section>

+      {/* ════════════════════════════════
+          SECTION 5.5 — 콘텐츠 / 인사이트
+      ════════════════════════════════ */}
+      <section className="px-6 py-12 lg:px-12 bg-white border-y border-slate-100">
+        <div className="max-w-5xl mx-auto">
+          <div className="flex items-end justify-between mb-6">
+            <div>
+              <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-1">INSIGHTS</p>
+              <h2 className="text-xl md:text-2xl font-extrabold text-[#04102b]">AI 자동화 실전 팁</h2>
+            </div>
+            <a
+              href="https://blog.naver.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs font-semibold text-slate-400 hover:text-[#1a56db] transition flex items-center gap-1"
+            >
+              블로그 전체 보기 →
+            </a>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[
+              { tag: '업무 자동화', title: '업무 자동화 외주 맡기기 전에 반드시 확인할 5가지', desc: '계약서, 소스코드 인도, 납기 명시. 피해의 90%는 이 세 가지 없어서 생깁니다.', color: 'bg-cyan-50 border-cyan-100', tagColor: 'text-cyan-600 bg-cyan-100' },
+              { tag: 'ChatGPT 활용', title: 'ChatGPT 프롬프트 잘 쓰는 법 — RCTF 공식', desc: 'Role·Context·Task·Format 네 가지를 넣으면 답변 퀄리티가 3배 올라갑니다.', color: 'bg-violet-50 border-violet-100', tagColor: 'text-violet-600 bg-violet-100' },
+              { tag: '개발자 부업', title: '대기업 현직 개발자가 부업 6개월 해본 솔직한 후기', desc: '잘 된 점, 힘든 점, 현실적인 수익까지. 포장 없이 공유합니다.', color: 'bg-blue-50 border-blue-100', tagColor: 'text-blue-600 bg-blue-100' },
+            ].map((post) => (
+              <div key={post.title} className={`rounded-2xl border p-5 ${post.color} hover:-translate-y-0.5 transition-transform`}>
+                <span className={`text-xs font-bold px-2 py-0.5 rounded-md ${post.tagColor}`}>{post.tag}</span>
+                <h3 className="font-extrabold text-[#04102b] text-sm mt-3 mb-2 leading-snug" style={{ wordBreak: 'keep-all' }}>{post.title}</h3>
+                <p className="text-slate-500 text-xs leading-relaxed" style={{ wordBreak: 'keep-all' }}>{post.desc}</p>
+                <div className="mt-3 text-xs font-semibold text-[#1a56db] flex items-center gap-1">
+                  네이버 블로그에서 읽기 →
+                </div>
+              </div>
+            ))}
+          </div>
+          <p className="text-center text-slate-400 text-xs mt-4">
+            블로그 준비 중 — 곧 업로드됩니다
+          </p>
+        </div>
+      </section>
+
      {/* ════════════════════════════════
          SECTION 6 — 최종 CTA
      ════════════════════════════════ */}
--- a/app/robots.ts
+++ b/app/robots.ts
@@ -0,0 +1,15 @@
+import { MetadataRoute } from 'next';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: '*',
+        allow: '/',
+        disallow: ['/admin/', '/api/', '/mypage/', '/payment/'],
+      },
+    ],
+    sitemap: 'https://jaengseung-made.com/sitemap.xml',
+    host: 'https://jaengseung-made.com',
+  };
+}
--- a/app/services/automation/layout.tsx
+++ b/app/services/automation/layout.tsx
@@ -1,23 +1,27 @@
 import type { Metadata } from 'next';

 export const metadata: Metadata = {
-  title: '업무 자동화 개발',
+  title: 'AI 업무 자동화 개발 | 엑셀·이메일·RPA 외주',
  description:
-    '엑셀 자동화, 웹 스크래핑, 이메일 자동 발송, RPA, 텔레그램 봇 개발. 반복 업무를 자동화하여 시간을 절약하세요. 단순 자동화 5만 원~, 1개월 무상 AS.',
+    '매일 반복하는 엑셀 정리, 이메일 발송, 보고서 작성을 AI와 파이썬으로 자동화합니다. ChatGPT 연동 자동화, Make.com 플로우, Python RPA 개발. 5만원~, 계약서 포함, 1개월 무상 AS.',
  keywords: [
-    '업무 자동화',
-    'RPA',
-    '엑셀 자동화',
-    '웹 스크래핑',
-    '텔레그램 봇',
+    '업무 자동화 외주',
+    'AI 업무 자동화',
+    '엑셀 자동화 외주',
+    '파이썬 자동화 개발',
+    'RPA 개발 외주',
    '이메일 자동화',
    '반복업무 자동화',
-    '파이썬 자동화',
+    'ChatGPT 자동화',
+    'Make.com 자동화',
+    '텔레그램 봇 개발',
+    '업무 자동화 비용',
+    '자동화 프리랜서',
  ],
  openGraph: {
-    title: '업무 자동화 개발 | 쟁승메이드',
+    title: 'AI 업무 자동화 개발 | 쟁승메이드',
    description:
-      'RPA·엑셀·스크래핑·텔레그램 봇. 단순 자동화 5만 원~, 1개월 무상 AS, 계약서 포함.',
+      '엑셀·이메일·보고서 반복 업무를 AI로 자동화. 현직 대기업 개발자가 직접 개발. 5만원~, 계약서 포함, 납기 패널티 적용.',
    url: 'https://jaengseung-made.com/services/automation',
  },
 };
--- a/app/services/prompt/layout.tsx
+++ b/app/services/prompt/layout.tsx
@@ -1,22 +1,26 @@
 import type { Metadata } from 'next';

 export const metadata: Metadata = {
-  title: '프롬프트 엔지니어링',
+  title: 'ChatGPT·Claude 프롬프트 엔지니어링 | 업무 AI 자동화',
  description:
-    'ChatGPT·Claude·Gemini에 최적화된 업무 특화 프롬프트 설계. 반복 업무를 AI로 자동화하는 프롬프트 라이브러리 제공. 건당 30,000원~.',
+    'ChatGPT, Claude, Gemini를 제대로 활용하는 맞춤형 프롬프트 설계. 이메일·보고서·코드리뷰·고객응대 업무를 AI로 3~5배 빠르게. 이미지 생성 프롬프트 패키지 12,900원, 자소서 첨삭 프롬프트 9,900원.',
  keywords: [
    '프롬프트 엔지니어링',
-    'ChatGPT 프롬프트',
-    'Claude 프롬프트',
-    'AI 프롬프트',
-    '업무 AI 자동화',
-    '프롬프트 최적화',
-    '프롬프트 설계',
+    'ChatGPT 프롬프트 만들기',
+    'Claude 프롬프트 최적화',
+    'AI 업무 자동화 프롬프트',
+    'ChatGPT 활용법',
+    '이미지 생성 프롬프트',
+    'Midjourney 프롬프트',
+    '자소서 AI 첨삭',
+    '이력서 AI 교정',
+    '프롬프트 패키지',
+    'AI 프롬프트 구매',
  ],
  openGraph: {
-    title: '프롬프트 엔지니어링 | 쟁승메이드',
+    title: 'ChatGPT·Claude 프롬프트 엔지니어링 | 쟁승메이드',
    description:
-      'ChatGPT·Claude 업무 특화 프롬프트 설계. 건당 30,000원~, 납품 후 사용 교육 포함.',
+      '업무 특화 AI 프롬프트 설계. 이미지 생성·자소서 첨삭 패키지 즉시 구매 가능. 9,900원~.',
    url: 'https://jaengseung-made.com/services/prompt',
  },
 };
--- a/app/services/website/layout.tsx
+++ b/app/services/website/layout.tsx
@@ -1,23 +1,26 @@
 import type { Metadata } from 'next';

 export const metadata: Metadata = {
-  title: '홈페이지·웹사이트 제작',
+  title: '홈페이지·쇼핑몰·랜딩페이지 제작 | 반응형 웹 개발 외주',
  description:
-    '기업 홈페이지, 쇼핑몰, SaaS, 포트폴리오까지 반응형 웹사이트 제작. 디자인부터 배포까지 원스톱. 스타터 20만 원~, 계약서 포함, 3개월 유지보수.',
+    '소상공인·스타트업·기업 홈페이지, 쇼핑몰, 랜딩페이지 제작. 템플릿 없이 직접 개발. Next.js 기반 반응형 웹, SEO 기본 적용. 스타터 20만원~, 계약서 포함, 3개월 유지보수.',
  keywords: [
-    '홈페이지 제작',
-    '웹사이트 제작',
-    '쇼핑몰 제작',
-    '반응형 웹',
-    'Next.js 개발',
-    '기업 홈페이지',
+    '홈페이지 제작 외주',
+    '쇼핑몰 제작 외주',
    '랜딩페이지 제작',
-    'SEO 최적화',
+    '소상공인 홈페이지',
+    '스타트업 웹사이트',
+    '반응형 홈페이지 제작',
+    'Next.js 개발 외주',
+    '기업 홈페이지 제작',
+    '웹사이트 제작 비용',
+    'SEO 최적화 홈페이지',
+    '홈페이지 개발 프리랜서',
  ],
  openGraph: {
-    title: '홈페이지·웹사이트 제작 | 쟁승메이드',
+    title: '홈페이지·쇼핑몰 제작 | 쟁승메이드',
    description:
-      '기업·쇼핑몰·포트폴리오 웹사이트 제작. 스타터 20만 원~, 반응형 디자인, 계약서 포함.',
+      '소상공인·스타트업 홈페이지 제작. 템플릿 없이 직접 개발, SEO 포함, 20만원~.',
    url: 'https://jaengseung-made.com/services/website',
  },
 };
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -0,0 +1,57 @@
+import { MetadataRoute } from 'next';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const base = 'https://jaengseung-made.com';
+  const now = new Date();
+
+  return [
+    {
+      url: base,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 1.0,
+    },
+    {
+      url: `${base}/freelance`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.9,
+    },
+    {
+      url: `${base}/services/automation`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.9,
+    },
+    {
+      url: `${base}/services/prompt`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.8,
+    },
+    {
+      url: `${base}/services/website`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: `${base}/services/stock`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.7,
+    },
+    {
+      url: `${base}/services/lotto`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.6,
+    },
+    {
+      url: `${base}/saju`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+  ];
+}