careermate 0.1.1 → 0.1.3

package/dist/install-page/analytics.js

@@ -0,0 +1,97 @@
+// =============================================================================
+// CareerMate marketing-site analytics — careermate.life ONLY.
+//
+// SCOPE: this file loads on the PUBLIC marketing/demo site (install-page/) that
+// Vercel serves. It must NEVER be loaded by the local dashboard (apps/web, bound
+// to 127.0.0.1) — that would break the core promise in AGENTS.md:
+//   "절대 사용자 데이터를 외부로 업로드하지 마라."
+// There is no user career data on this site; only anonymous page/traffic signals.
+//
+// What runs here:
+//   1) Vercel Web Analytics   — cookieless, no PII, no consent banner required.
+//   2) Vercel Speed Insights  — Core Web Vitals, also cookieless.
+//   3) Google Analytics 4     — OPTIONAL. Off until GA_MEASUREMENT_ID is filled in.
+//      Runs under Google Consent Mode v2 with analytics_storage DENIED by default,
+//      i.e. cookieless pings, so it needs no consent banner and stays consistent
+//      with the local-first / privacy-first brand. (Flip consent to 'granted'
+//      later only if you add a real consent UI.)
+//
+// The marketing pages (index.html, start.html) are classic multi-page navigations,
+// so a single pageview on load is enough. The demo (/demo/) is a hash-router SPA,
+// so we emit a virtual pageview on every hashchange — otherwise every sub-route
+// (#/jobs, #/applications, …) would collapse into one "/demo" view.
+// =============================================================================
+(function () {
+  'use strict';
+
+  // ── 1. Vercel Web Analytics (cookieless) ───────────────────────────────────
+  // Queue shim per Vercel's HTML snippet; the injected script drains window.vaq.
+  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
+  loadScript('/_vercel/insights/script.js');
+
+  // ── 2. Vercel Speed Insights (cookieless) — OFF by default ──────────────────
+  // Vercel's Hobby plan allows Speed Insights on only ONE project at a time, and it's
+  // more valuable on the real app than on this rarely-changing static site (use the free
+  // PageSpeed Insights for ad-hoc checks here). Flip to true to load it (needs Enable in
+  // the Vercel dashboard too); leaving it false avoids a dead 404 script request.
+  var ENABLE_SPEED_INSIGHTS = false;
+  if (ENABLE_SPEED_INSIGHTS) {
+    window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
+    loadScript('/_vercel/speed-insights/script.js');
+  }
+
+  // ── 3. Google Analytics 4 (optional, cookieless via Consent Mode v2) ────────
+  // Paste your GA4 measurement ID (looks like "G-XXXXXXXXXX") here to turn it on.
+  // Leaving it blank keeps GA off entirely — Vercel analytics above still runs.
+  var GA_MEASUREMENT_ID = 'G-HK9KWTYCBD';
+  if (/^G-[A-Z0-9]+$/.test(GA_MEASUREMENT_ID)) initGoogleAnalytics(GA_MEASUREMENT_ID);
+
+  // ── Demo SPA: report hash route changes to Vercel as a custom event ─────────
+  // Vercel's script auto-tracks History API navigations but not hashchange.
+  if (location.pathname.indexOf('/demo') === 0) {
+    window.addEventListener('hashchange', function () {
+      window.va('event', { name: 'demo_route', data: { route: currentRoute() } });
+    });
+  }
+
+  // ── helpers ─────────────────────────────────────────────────────────────────
+  function loadScript(src) {
+    var s = document.createElement('script');
+    s.src = src;
+    s.defer = true;
+    document.head.appendChild(s);
+  }
+
+  function currentRoute() {
+    return (location.hash || '').replace(/^#\/?/, '').split('/')[0] || 'home';
+  }
+
+  function initGoogleAnalytics(id) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { window.dataLayer.push(arguments); }
+    window.gtag = gtag;
+    // Deny storage by default → GA runs cookieless. No banner required.
+    gtag('consent', 'default', {
+      ad_storage: 'denied',
+      ad_user_data: 'denied',
+      ad_personalization: 'denied',
+      analytics_storage: 'denied',
+    });
+    gtag('js', new Date());
+    // send_page_view:false so we control pageviews (incl. the demo's hash routes).
+    gtag('config', id, { send_page_view: false, anonymize_ip: true });
+    loadScript('https://www.googletagmanager.com/gtag/js?id=' + id);
+
+    sendGaPageview();
+    window.addEventListener('hashchange', sendGaPageview);
+  }
+
+  function sendGaPageview() {
+    if (!window.gtag) return;
+    window.gtag('event', 'page_view', {
+      page_path: location.pathname + location.search + location.hash,
+      page_location: location.href,
+      page_title: document.title,
+    });
+  }
+})();

package/dist/install-page/index.html

@@ -7,7 +7,7 @@
   <script>
     (function () {
       try {
-        var t = window.localStorage.getItem('cf-theme');
+        var t = window.localStorage.getItem('careermate-theme') || window.localStorage.getItem('cf-theme');
         document.documentElement.setAttribute('data-theme', t === 'light' || t === 'dark' ? t : 'dark');
       } catch (e) { document.documentElement.setAttribute('data-theme', 'dark'); }
     })();
@@ -15,6 +15,7 @@
   <title>CareerMate — 내 AI를 커리어 비서로</title>
   <meta name="description" content="Claude Desktop·Claude Code·Codex 같은 로컬 AI 앱에 연결하세요. CareerMate가 이력서·자기소개서·지원 현황을 이 컴퓨터에만 저장하고 MCP로 당신의 AI에 연결합니다." />
   <link rel="canonical" href="https://careermate.life/" />
+  <meta name="google-site-verification" content="MfU5uwl1RNXKklsJhXz2hPCRytjLpCjCXSa2ls5JQH0" />
   <meta name="theme-color" content="#faf8f4" media="(prefers-color-scheme: light)" />
   <meta name="theme-color" content="#14130f" media="(prefers-color-scheme: dark)" />
 
@@ -42,8 +43,11 @@
 
   <link rel="preload" href="fonts/PretendardVariable.woff2" as="font" type="font/woff2" crossorigin />
   <link rel="stylesheet" href="style.css" />
+  <!-- Privacy-friendly analytics for the marketing site only (never the local 127.0.0.1 app). -->
+  <script src="/analytics.js" defer></script>
 </head>
 <body>
+  <a class="skip-link" href="#top">본문으로 건너뛰기</a>
   <!-- ============================================================ nav -->
   <nav class="nav">
     <a class="nav__brand" href="#top">
@@ -67,65 +71,90 @@
     </div>
   </nav>
 
-  <main id="top">
+  <main id="top" tabindex="-1">
 
     <!-- ========================================================== hero -->
     <header class="hero">
-      <span class="pill-badge">
-        <span class="pill-badge__dot" aria-hidden="true"></span>
-        로컬 전용 · 무료
-      </span>
-      <h1 class="hero__title">
-        내가 쓰던 <span class="accent">AI</span>를<br />
-        나만의 <span class="accent">커리어 비서</span>로
-      </h1>
-      <p class="hero__lede">
-        이력서·자기소개서·지원 현황을 <strong>이 컴퓨터 안에서</strong> 관리하세요.<br />
-        분석과 글쓰기는 평소 쓰던 AI가, 데이터 보관은 CareerMate가 맡습니다.
-      </p>
-
-      <div class="hero__cta">
-        <a class="btn btn--primary" href="#install">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
-          설치 방법 보기
-        </a>
-        <a class="btn btn--ghost" href="start.html">처음이세요? — 내게 맞는 길 찾기</a>
+      <div class="hero__main">
+        <span class="pill-badge">
+          <span class="pill-badge__dot" aria-hidden="true"></span>
+          로컬 전용 · 무료
+        </span>
+        <h1 class="hero__title">
+          내가 쓰던 AI를<br />
+          나만의 커리어 비서로
+        </h1>
+        <p class="hero__lede">
+          <strong>공고 분석 · 맞춤 자기소개서 · 지원 현황 추적</strong>을 평소 쓰던 AI에게 말로 시키면, 결과가 이 컴퓨터 안에 쌓입니다. 한 번 정리한 경력은 대화마다 다시 붙여넣지 않아도 돼요.
+        </p>
+
+        <ul class="trust-strip" aria-label="안심 포인트">
+          <li>내 컴퓨터에만 저장</li>
+          <li>외부 업로드 없음</li>
+          <li>계정·API 키 불필요</li>
+          <li>언제든 삭제</li>
+        </ul>
+
+        <div class="hero__cta">
+          <a class="btn btn--primary" href="start.html">처음이세요? — 내게 맞는 설치법 찾기</a>
+          <a class="btn btn--ghost" href="#install">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
+            바로 설치 방법 보기
+          </a>
+        </div>
+
+        <p class="hero__note">
+          CareerMate는 <strong>내 컴퓨터에서 도는 로컬 도구</strong>예요. 그래서 <span class="nowrap">Claude&nbsp;Desktop · Claude&nbsp;Code · Codex</span>처럼 내 컴퓨터의 프로그램을 띄울 수 있는 AI에서 동작합니다. 설치를 마쳤다면 대시보드 <code>http://127.0.0.1:4319</code>에서 내 데이터를 확인하세요.
+        </p>
       </div>
 
-      <p class="hero__note">
-        CareerMate는 <strong>내 컴퓨터에서 도는 로컬 도구</strong>예요. 그래서 <span class="nowrap">Claude&nbsp;Desktop · Claude&nbsp;Code · Codex</span>처럼 내 컴퓨터의 프로그램을 띄울 수 있는 AI에서 동작합니다.<br />
-        설치를 마쳤다면 대시보드 <code>http://127.0.0.1:4319</code>에서 내 데이터를 확인하세요.
-      </p>
+      <!-- signature element: CareerMate를 설치하는 방식 자체가 "내 AI에게 한 문장" — 그 순간을 보여준다.
+           장식적 예시라 aria-hidden; 실제 복사 가능한 안내는 #install에 맥락과 함께 있다. -->
+      <aside class="hero__demo" aria-hidden="true">
+        <div class="chat">
+          <div class="chat__head">
+            <span class="chat__dot"></span>
+            내 AI 앱
+          </div>
+          <div class="chat__msg chat__msg--me">
+            <span class="chat__who">나</span>
+            <p>careermate.life/llms-install.txt 읽고, 이 폴더에 CareerMate 설치하고 연결해줘.</p>
+          </div>
+          <div class="chat__msg chat__msg--ai">
+            <span class="chat__who">AI</span>
+            <p>설치했어요. 이제 이력서를 주거나 공고를 붙여넣어 보세요.</p>
+            <ul class="chat__steps">
+              <li>Node 확인 후 이 폴더에 설치</li>
+              <li>데이터는 <code>.cm/data</code>에만 저장</li>
+              <li>대시보드 <code>127.0.0.1:4319</code> 열림</li>
+            </ul>
+          </div>
+        </div>
+        <p class="hero__demo-note">내 AI 앱 대화창에 붙여넣으면 끝 — 터미널이 없어도 돼요.</p>
+      </aside>
     </header>
 
     <!-- ========================================================== how -->
     <section id="how" class="section">
       <div class="section__head">
-        <span class="eyebrow">동작 방식</span>
-        <h2>당신의 AI가 <span class="accent">두뇌</span>,<br />CareerMate는 <span class="accent">커리어 서랍장</span></h2>
-        <p>CareerMate 안에는 AI가 들어 있지 않습니다.<br />생각하는 일은 당신의 AI가, 데이터 보관은 CareerMate가 맡습니다.</p>
+        <h2>당신의 AI가 두뇌, CareerMate는 커리어 서랍장</h2>
+        <p>CareerMate 안에는 AI가 들어 있지 않습니다. 생각하는 일은 당신의 AI가, 데이터 보관은 CareerMate가 맡습니다.</p>
       </div>
       <div class="cards-3">
         <article class="feature">
-          <div class="feature__icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5a3 3 0 1 0-5.99.13 3 3 0 0 0-1.5 5.5A3 3 0 0 0 6 16.5a3 3 0 0 0 6 .5V5z"/><path d="M12 5a3 3 0 1 1 5.99.13 3 3 0 0 1 1.5 5.5A3 3 0 0 1 18 16.5a3 3 0 0 1-6 .5V5z"/></svg>
-          </div>
-          <h3>1. 당신의 AI와 대화</h3>
-          <p>평소 쓰던 Claude에게 말로 시키면 됩니다.<br />분석·글쓰기 같은 “생각”은 전부 당신의 AI가 합니다.</p>
+          <span class="feature__no">01</span>
+          <h3>당신의 AI와 대화</h3>
+          <p>평소 쓰던 Claude에게 말로 시키면 됩니다. 분석·글쓰기 같은 “생각”은 전부 당신의 AI가 합니다.</p>
         </article>
         <article class="feature">
-          <div class="feature__icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12h6"/><path d="M9 12a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3"/><path d="M15 12a3 3 0 0 0 3 3v2a3 3 0 0 1-3 3"/></svg>
-          </div>
-          <h3>2. MCP로 연결</h3>
-          <p>표준 프로토콜 MCP가 AI와 CareerMate를 잇는 “USB-C” 역할을 합니다.<br />AI가 24개 도구로 당신의 커리어 DB를 읽고 씁니다.</p>
+          <span class="feature__no">02</span>
+          <h3>안전하게 연결</h3>
+          <p>표준 연결 방식(MCP)이 AI와 CareerMate를 잇는 다리가 됩니다. AI가 당신의 커리어 기록을 직접 읽고 정리해 저장합니다.</p>
         </article>
         <article class="feature">
-          <div class="feature__icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><path d="M7 7h.01M7 17h.01"/></svg>
-          </div>
-          <h3>3. 이 컴퓨터에 저장</h3>
-          <p>모든 데이터는 로컬 SQLite(<code>~/.careermate</code>)에만 저장됩니다.<br />외부 서버로 전송하지 않습니다. 대시보드로 눈으로 확인하세요.</p>
+          <span class="feature__no">03</span>
+          <h3>이 컴퓨터에 저장</h3>
+          <p>모든 데이터는 로컬 SQLite(<code>~/.careermate</code>)에만 저장됩니다. 외부 서버로 전송하지 않고, 대시보드에서 눈으로 볼 수 있습니다.</p>
         </article>
       </div>
     </section>
@@ -133,8 +162,7 @@
     <!-- ====================================================== features -->
     <section id="features" class="section">
       <div class="section__head">
-        <span class="eyebrow">할 수 있는 일</span>
-        <h2>지원 한 건을 <span class="accent">끝까지</span> 함께 처리</h2>
+        <h2>지원 한 건을 끝까지 함께 처리</h2>
         <p>프로필 정리부터 면접 준비까지, AI와 대화만으로 이어집니다.</p>
       </div>
       <div class="checks">
@@ -149,10 +177,13 @@
 
     <!-- ======================================================= preview -->
     <section id="preview" class="section">
-      <div class="section__head">
-        <span class="eyebrow">대시보드</span>
-        <h2>내 데이터를 <span class="accent">눈으로</span> 확인</h2>
-        <p>모든 기록은 이 컴퓨터의 대시보드(<code>127.0.0.1:4319</code>)에 모입니다. 아래는 실제 화면입니다.</p>
+      <div class="section__head section__head--center">
+        <h2>내 데이터를 눈으로 확인</h2>
+        <p>모든 기록은 이 컴퓨터의 대시보드(<code>127.0.0.1:4319</code>)에 모입니다.<br>아래는 실제 화면 — 설치 없이 바로 둘러볼 수 있어요.</p>
+        <div class="section__cta">
+          <a class="btn btn--primary" href="demo/">데모 둘러보기 →</a>
+          <span class="section__cta-note">샘플 데이터로 클릭해 보는 미리보기 · 설치·로그인 불필요</span>
+        </div>
       </div>
 
       <div class="carousel" id="dash-carousel" role="group" aria-roledescription="캐러셀" aria-label="대시보드 화면 미리보기" tabindex="0">
@@ -256,9 +287,8 @@
 
     <!-- ======================================================= install -->
     <section id="install" class="section">
-      <div class="section__head">
-        <span class="eyebrow">설치</span>
-        <h2>내 <span class="accent">AI 앱</span>에 연결하기</h2>
+      <div class="section__head section__head--center">
+        <h2>내 AI 앱에 연결하기</h2>
         <p>빈 폴더 잡고 <strong>한 문장이면 끝.</strong><br />
         터미널이 익숙하면 한 줄 설치, 싫으면 파일 하나로 — <strong>무료도 있습니다.</strong></p>
       </div>
@@ -276,19 +306,20 @@
       <details class="acc" open>
         <summary><span class="track__tag">추천 · 앱에서 한 문장</span> 내 AI 앱에서 빈 폴더 잡고 한 문장</summary>
         <div class="acc__body">
-          <p class="track-desc"><strong>Claude 데스크톱의 “Code” 탭</strong>처럼 폴더를 잡고 작동하는 AI 앱이면 <strong>별도 터미널 없이</strong> 앱 안에서 끝납니다(Codex는 <strong>CLI</strong> 권장 — 데스크톱 앱은 등록이 사라지는 버그가 있어요). 작업 폴더 하나를 정하고 아래 문장만 주면, 에이전트가 공개 안내(<code>careermate.life/llms-install.txt</code>)를 읽고 <strong>그 폴더 안에</strong> 설치·연결합니다 — 데이터까지 그 폴더에 모여(<code>.cm/data</code>) 백업·이동이 폴더 하나로 끝.</p>
+          <p class="track-desc"><strong>Claude 데스크톱의 “Code” 탭</strong>처럼 폴더를 잡고 작동하는 AI 앱이면 <strong>별도 터미널 없이</strong> 앱 안에서 끝납니다(Codex는 <strong>CLI</strong> 권장 — 데스크톱 앱은 등록이 사라질 수 있습니다). 작업 폴더 하나를 정하고 아래 문장만 주면, 에이전트가 공개 안내(<code>careermate.life/llms-install.txt</code>)를 읽고 <strong>그 폴더 안에</strong> 설치·연결합니다. 데이터까지 그 폴더에 모여(<code>.cm/data</code>) 백업·이동이 폴더 하나로 끝.</p>
           <ol class="steps">
           <li class="step">
             <div class="step__no">1</div>
             <div class="step__body">
               <h3>앱 열고 빈 폴더 선택</h3>
-              <p><strong>Claude 데스크톱</strong> → <strong>Code</strong> 탭에서 빈 폴더를 작업 폴더로 선택(<strong>Pro 이상</strong> 구독, <strong>Windows는 Git 먼저</strong>). <strong>Codex</strong>는 빈 폴더에서 <code>codex</code>(CLI, <strong>ChatGPT Plus 이상</strong>)로 실행하세요 — <strong>데스크톱 앱은 현재 등록이 사라지는 버그</strong>(openai/codex#24718)가 있어 권하지 않습니다.</p>
+              <p><strong>Claude 데스크톱</strong> → <strong>Code</strong> 탭에서 빈 폴더를 작업 폴더로 선택(<strong>Pro 이상</strong> 구독, <strong>Windows는 Git 먼저</strong>). <strong>Codex</strong>는 빈 폴더에서 <code>codex</code>(CLI, <strong>ChatGPT Plus 이상</strong>)로 실행하세요 — <strong>데스크톱 앱은 등록이 사라질 수 있어</strong> 권장하지 않습니다.</p>
             </div>
           </li>
           <li class="step">
             <div class="step__no">2</div>
             <div class="step__body">
               <h3>이 문장 붙여넣기</h3>
+              <p class="paste-note">💬 위에서 연 <strong>AI 앱의 대화창에</strong> 붙여넣으세요 — 터미널 명령이 아니에요. 이 문장은 공개 안내 페이지만 읽어 설치하며, <strong>당신의 이력서·개인정보는 외부로 올라가지 않아요.</strong></p>
               <div class="code">
                 <button class="copy-btn" type="button" data-copy-target="code-prompt-agent">복사</button>
                 <pre id="code-prompt-agent">https://careermate.life/llms-install.txt 를 읽고, 그 안내대로 CareerMate를 이 폴더에 설치하고 연결해줘. 데이터도 이 폴더의 .cm/data 안에 저장하고, Node 설치처럼 시스템에 바꿀 게 있으면 실행 전에 먼저 알려줘. 설치가 끝나면 앱 재시작 방법과 이력서를 주는 법, 대시보드 주소(http://127.0.0.1:4319)도 알려줘.</pre>
@@ -300,7 +331,7 @@
             <div class="step__no">3</div>
             <div class="step__body">
               <h3>재시작 후 확인</h3>
-              <p>AI 앱을 완전히 종료했다 다시 켜고(처음 한 번 승인을 물으면 허용), <strong>“<code>get_onboarding_status</code> 호출해서 확인해줘”</strong>로 점검하세요. Codex는 <code>/mcp</code>로도 확인됩니다.</p>
+              <p>AI 앱을 완전히 종료했다 다시 켜고(처음 한 번 승인을 물으면 허용), <strong>“커리어메이트 연결됐는지 확인해줘”</strong>라고 말해 보세요. Codex는 <code>/mcp</code>로도 확인됩니다.</p>
             </div>
           </li>
           </ol>
@@ -329,7 +360,7 @@
             <div class="step__no">2</div>
             <div class="step__body">
               <h3>AI 앱 재시작 후 확인</h3>
-              <p>연결한 AI 앱을 <strong>완전히 종료했다 다시 켜고</strong>, <strong>“<code>get_onboarding_status</code> 호출해서 연결됐는지 확인해줘”</strong>라고 말해 결과가 돌아오면 정상입니다.</p>
+              <p>연결한 AI 앱을 <strong>완전히 종료했다 다시 켜고</strong>, <strong>“커리어메이트 연결됐는지 확인해줘”</strong>라고 말해 결과가 돌아오면 정상입니다.</p>
             </div>
           </li>
           <li class="step">
@@ -347,7 +378,7 @@
       <details class="acc">
         <summary><span class="track__tag">Claude Desktop · <code>.mcpb</code></span> 설치 파일로 추가 (터미널 없이)</summary>
         <div class="acc__body">
-          <p class="track-desc">터미널·Node 없이 파일 하나로 끝나지만, <strong>Claude Desktop 내장 Node 버전에 따라 불안정할 수 있어요.</strong> 잘 안 되면 위 <strong>에이전트가 직접 설치</strong> 또는 <strong>터미널 한 줄</strong>을 쓰세요.</p>
+          <p class="track-desc">터미널·Node 없이 파일 하나로 끝나지만, <strong>Claude Desktop 내장 Node 버전에 따라 불안정할 수 있습니다.</strong> 잘 안 되면 위 <strong>에이전트가 직접 설치</strong> 또는 <strong>터미널 한 줄</strong>을 쓰세요.</p>
           <ol class="steps">
           <li class="step">
             <div class="step__no">1</div>
@@ -372,7 +403,7 @@
             <div class="step__no">3</div>
             <div class="step__body">
               <h3>재시작하고 확인</h3>
-              <p>Claude Desktop을 완전히 종료했다 다시 켜고, <strong>“<code>get_onboarding_status</code> 호출해서 확인해줘”</strong>로 점검하세요.</p>
+              <p>Claude Desktop을 완전히 종료했다 다시 켜고, <strong>“커리어메이트 연결됐는지 확인해줘”</strong>라고 말해 보세요.</p>
             </div>
           </li>
           </ol>
@@ -436,12 +467,15 @@
         </div>
         <div class="privacy-card__text">
           <h2>당신의 데이터는 당신 컴퓨터를 떠나지 않습니다</h2>
-          <p>대시보드 서버는 <code>127.0.0.1</code>(이 컴퓨터)에만 바인딩되어 외부에서 접근할 수 없고,<br />MCP 서버는 네트워크 호출을 하지 않습니다. 분석·글쓰기는 당신이 직접 고른 AI가 수행합니다.</p>
+          <p>대시보드 서버는 <code>127.0.0.1</code>(이 컴퓨터)에만 바인딩되어 외부에서 접근할 수 없습니다.<br />MCP 서버가 외부로 내보내는 것은 (끌 수 있는) <strong>최신 버전 확인</strong>뿐이며, <strong>당신의 커리어 데이터는 전송하지 않습니다.</strong> 분석·글쓰기는 당신이 직접 고른 AI가 수행합니다.</p>
           <ul class="privacy-card__list">
             <li><strong>저장 위치</strong> <code>~/.careermate/careermate.sqlite</code></li>
             <li><strong>내보내기</strong> 자기소개서 등을 <code>~/.careermate/exports</code>로</li>
             <li><strong>삭제·관리</strong> 대시보드 <strong>설정(Settings)</strong>에서 직접</li>
           </ul>
+          <p class="privacy-card__note">
+            위 내용은 <strong>설치하는 앱</strong> 이야기예요. 지금 보고 계신 <strong>이 소개 웹사이트</strong>는 방문 통계를 보려고 쿠키 없는 익명 분석(Vercel Analytics)만 사용하며, 여기엔 어떤 커리어 데이터도 포함되지 않습니다.
+          </p>
         </div>
       </div>
     </section>
@@ -460,42 +494,10 @@
 
   <div class="sr-only" role="status" aria-live="polite" id="copy-status"></div>
 
+  <script src="landing.js"></script>
   <script>
     (function () {
       'use strict';
-      var status = document.getElementById('copy-status');
-
-      // --- generic clipboard helper ------------------------------------
-      function legacyCopy(text) {
-        var ta = document.createElement('textarea');
-        ta.value = text; ta.setAttribute('readonly', '');
-        ta.style.position = 'absolute'; ta.style.left = '-9999px';
-        document.body.appendChild(ta); ta.select();
-        var ok = false;
-        try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
-        document.body.removeChild(ta);
-        return ok;
-      }
-      function copyText(text, onok) {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          navigator.clipboard.writeText(text).then(onok, function () { if (legacyCopy(text)) onok(); });
-        } else if (legacyCopy(text)) { onok(); }
-      }
-      function announce(msg) { if (status) status.textContent = msg; }
-
-      // --- copy buttons (code blocks) ----------------------------------
-      function flashSmall(btn) {
-        var original = btn.textContent;
-        btn.textContent = '복사됨'; btn.classList.add('copied');
-        announce('클립보드에 복사되었습니다.');
-        window.setTimeout(function () { btn.textContent = original; btn.classList.remove('copied'); }, 1600);
-      }
-      document.querySelectorAll('.copy-btn').forEach(function (btn) {
-        btn.addEventListener('click', function () {
-          var src = document.getElementById(btn.getAttribute('data-copy-target'));
-          if (src) copyText(src.textContent || '', function () { flashSmall(btn); });
-        });
-      });
 
       // --- config tabs -------------------------------------------------
       var tablist = document.querySelector('.tabs[role="tablist"]');
@@ -540,26 +542,6 @@
         revealEls.forEach(function (el) { io.observe(el); });
       }
 
-      // --- theme toggle (persist) --------------------------------------
-      var root = document.documentElement;
-      var toggle = document.getElementById('theme-toggle');
-      var saved = null;
-      try { saved = window.localStorage.getItem('cf-theme'); } catch (e) {}
-      if (saved === 'dark' || saved === 'light') root.setAttribute('data-theme', saved);
-      function isDark() {
-        var t = root.getAttribute('data-theme');
-        if (t === 'dark') return true;
-        if (t === 'light') return false;
-        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-      }
-      if (toggle) {
-        toggle.addEventListener('click', function () {
-          var next = isDark() ? 'light' : 'dark';
-          root.setAttribute('data-theme', next);
-          try { window.localStorage.setItem('cf-theme', next); } catch (e) {}
-        });
-      }
-
       // --- dashboard carousel (prev/next + dots + keyboard + swipe) -----
       var carousel = document.getElementById('dash-carousel');
       var track = document.getElementById('carousel-track');

package/dist/install-page/landing.js

@@ -0,0 +1,54 @@
+// Shared behavior for the CareerMate landing pages (index.html, start.html).
+// Loaded after the DOM is parsed; wires the clipboard "copy" buttons and the theme toggle.
+// NOTE: the pre-paint theme resolution stays INLINE in each page's <head> to avoid a flash (FOUC) --
+// do not move that into this file.
+(function () {
+  'use strict';
+  var status = document.getElementById('copy-status');
+
+  // --- clipboard ---------------------------------------------------
+  function legacyCopy(text) {
+    var ta = document.createElement('textarea');
+    ta.value = text; ta.setAttribute('readonly', '');
+    ta.style.position = 'absolute'; ta.style.left = '-9999px';
+    document.body.appendChild(ta); ta.select();
+    var ok = false;
+    try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
+    document.body.removeChild(ta);
+    return ok;
+  }
+  function copyText(text, onok) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(onok, function () { if (legacyCopy(text)) onok(); });
+    } else if (legacyCopy(text)) { onok(); }
+  }
+  document.querySelectorAll('.copy-btn').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      var src = document.getElementById(btn.getAttribute('data-copy-target'));
+      if (!src) return;
+      copyText(src.textContent || '', function () {
+        var original = btn.textContent;
+        btn.textContent = '복사됨'; btn.classList.add('copied');
+        if (status) status.textContent = '클립보드에 복사되었습니다.';
+        window.setTimeout(function () { btn.textContent = original; btn.classList.remove('copied'); }, 1600);
+      });
+    });
+  });
+
+  // --- theme toggle (persist) --------------------------------------
+  var root = document.documentElement;
+  var toggle = document.getElementById('theme-toggle');
+  function isDark() {
+    var t = root.getAttribute('data-theme');
+    if (t === 'dark') return true;
+    if (t === 'light') return false;
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+  if (toggle) {
+    toggle.addEventListener('click', function () {
+      var next = isDark() ? 'light' : 'dark';
+      root.setAttribute('data-theme', next);
+      try { window.localStorage.setItem('careermate-theme', next); window.localStorage.removeItem('cf-theme'); } catch (e) {}
+    });
+  }
+})();

package/dist/install-page/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://careermate.life/sitemap.xml

package/dist/install-page/sitemap.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://careermate.life/</loc>
+    <lastmod>2026-06-17</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://careermate.life/start</loc>
+    <lastmod>2026-06-17</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://careermate.life/demo</loc>
+    <lastmod>2026-06-17</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+</urlset>