feat(ax): 코딩 에이전트 축 복수 도구 노출과 도구 중립 카피 반영 (PRF-330)

app/subs/ax/components/sections/Faq.data.ts

@@ -15,7 +15,7 @@ export const FAQS = [
   },
   {
     q: "우리가 이미 쓰는 AI 도구가 있는데 그 도구로 가르칩니까.",
-    a: "고객사가 쓰는 도구에 맞춰 트랙을 고릅니다. L2 도구 실무에서는 Claude, Copilot, Gemini 가운데 하나를 골라 진행하고, L4 파워유저와 에이전트에서는 수강생이 Claude Code나 Cursor로 직접 만듭니다. 프루퍼는 이 도구를 실무에서 다뤄 왔기 때문에 특정 도구에 얽매이지 않고 고객사 환경에 맞는 것을 중립적으로 권합니다. 아직 도구를 정하지 못했다면 무엇을 도입할지 고르는 일부터 함께 합니다.",
+    a: "고객사가 쓰는 도구에 맞춰 트랙을 고릅니다. L2 도구 실무에서는 Claude, Copilot, Gemini 가운데 하나를 골라 진행하고, L4 파워유저와 에이전트에서는 수강생이 Claude Code, Google Antigravity, Codex 가운데 고객사 스택에 맞는 도구로 직접 만듭니다. 프루퍼는 이 도구를 실무에서 다뤄 왔기 때문에 특정 도구에 얽매이지 않고 고객사 환경에 맞는 것을 중립적으로 권합니다. 아직 도구를 정하지 못했다면 무엇을 도입할지 고르는 일부터 함께 합니다.",
   },
   {
     q: "사업장이 흩어져 있는데 온라인으로 할 수 있습니까.",

app/subs/ax/components/sections/Hero.module.scss

@@ -83,12 +83,45 @@
   letter-spacing: -0.03em;
 }
 
-.tileTools {
-  font-size: 20px;
+.tileToolsGroup {
+  margin-top: 10px;
+}
+
+.tileToolsRow + .tileToolsRow {
+  margin-top: 12px;
+}
+
+// 한글 라벨이라 var(--mono)를 쓰지 않는다 - IBM Plex Mono에 한글 글리프가 없다
+.tileToolsAxis {
+  display: block;
+  font-size: 13px;
+  color: var(--dim);
+  line-height: 1.5;
+}
+
+// 이름 단위로만 접히게 li에 nowrap을 걸고, 점은 li 앞쪽에 붙여 줄 첫 항목 앞에 남지 않게 한다
+.tileToolsList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 8px;
+  margin: 4px 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 16px;
   font-weight: 700;
   color: var(--ink);
-  margin-top: 10px;
   letter-spacing: -0.01em;
+  line-height: 1.5;
+
+  li {
+    white-space: nowrap;
+  }
+
+  li + li::before {
+    content: "·";
+    margin-right: 8px;
+    color: var(--dim);
+  }
 }
 
 .tileDesc {
@@ -97,6 +130,10 @@
   margin-top: 6px;
 }
 
+.tileToolsGroup + .tileDesc {
+  margin-top: 10px;
+}
+
 .marqueeOuter {
   overflow: hidden;
   border-bottom: 1px solid var(--line);

app/subs/ax/components/sections/Hero.tsx

@@ -16,6 +16,20 @@ const MARQUEE_ITEMS = [
   "기업가치",
 ];
 
+// 축당 도구는 셋까지. 넷째는 Hero가 아니라 L2/L4 카드 desc에 적는다 (docs/ax-tool-axis-spec.md 4.4)
+const TOOL_AXES = [
+  {
+    id: "ax-tools-chat",
+    label: "대화형 도구",
+    tools: ["Claude", "ChatGPT", "Gemini"],
+  },
+  {
+    id: "ax-tools-coding",
+    label: "코딩 에이전트",
+    tools: ["Claude Code", "Antigravity", "Codex"],
+  },
+];
+
 function MarqueeList() {
   return (
     <div className={styles.marqueeList}>
@@ -83,12 +97,29 @@ export default function Hero() {
             <Enter index={6} immediate>
               <div className={styles.tile}>
                 <div className={styles.tileLabel}>TOOLS</div>
-                <div className={styles.tileTools}>
-                  Claude · ChatGPT · Gemini · Cursor
+                <div className={styles.tileToolsGroup}>
+                  {TOOL_AXES.filter((axis) => axis.tools.length > 0).map(
+                    (axis) => (
+                      <div key={axis.id} className={styles.tileToolsRow}>
+                        <span className={styles.tileToolsAxis} id={axis.id}>
+                          {axis.label}
+                        </span>
+                        <ul
+                          className={styles.tileToolsList}
+                          role="list"
+                          aria-labelledby={axis.id}
+                        >
+                          {axis.tools.map((tool) => (
+                            <li key={tool}>{tool}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    ),
+                  )}
                 </div>
                 <div className={styles.tileDesc}>
-                  특정 도구에 얽매이지 않고 고객사 환경에 맞는 도구를 중립적으로
-                  권합니다
+                  도구는 고객사마다 다르게 정합니다. 사내망 제약과 계정 정책에서
+                  실제로 돌아가는 것을 고릅니다
                 </div>
               </div>
             </Enter>

app/subs/ax/components/sections/Lecture.tsx

@@ -32,7 +32,7 @@ const LEVELS = [
     duration: "2일 ~ 3일",
     title: "파워유저와 에이전트",
     target: "개발 인접 직무 · 사내 AI 챔피언",
-    desc: "Claude Code나 Cursor로 직접 만들고, 여러 에이전트를 엮어 설계하며, 사내 시스템을 AI에 연결합니다. 프루퍼가 실제로 구축해 운영하는 사내 도구를 교보재로 삼아, 시연에서 끝나지 않고 배포까지 가는 것을 목표로 합니다.",
+    desc: "고객사 스택에 맞춰 Claude Code, Google Antigravity, Codex 가운데 하나를 골라 직접 만들고, 여러 에이전트를 엮어 설계하며, 사내 시스템을 AI에 연결합니다. 프루퍼가 실제로 구축해 운영하는 사내 도구를 교보재로 삼아, 시연에서 끝나지 않고 배포까지 가는 것을 목표로 합니다.",
     outcome: "팀에 배포하는 작은 도구 또는 에이전트",
   },
 ];

docs/ax-curriculum.md

@@ -28,8 +28,9 @@
 
 - 강사가 실제로 만들고 운영하는 사람입니다. 실습 예제가 시연용이 아니라 현업에서 쓰던
   것입니다.
-- 특정 도구에 얽매이지 않습니다. Claude, Copilot, Gemini, Cursor를 실무에서 다뤄 왔기 때문에
-  고객사 환경에 맞는 도구를 중립적으로 권합니다.
+- 특정 도구에 얽매이지 않습니다. Claude, Copilot, Gemini 같은 대화형 도구와 Claude Code,
+  Google Antigravity, Codex 같은 코딩 에이전트를 실무에서 다뤄 왔습니다. 도구는 고객사마다
+  다르게 정합니다. 사내망 제약과 계정 정책에서 실제로 돌아가는 것을 고릅니다.
 - AI를 비용이 아니라 영업이익과 기업가치를 올리는 지렛대로 봅니다. 그래서 교육의 끝이
   "우리 회사에 무엇을 적용할까"로 이어집니다.
 
@@ -111,10 +112,11 @@ AX Lecture (저변 확대)
 
 ### L4. 파워유저와 에이전트
 
-파워유저와 개발 인접 직무, 사내 AI 챔피언을 대상으로 합니다. Claude Code나 Cursor로 직접
-만들고, 여러 에이전트를 엮어 설계하며, 사내 시스템을 AI에 연결합니다. 이틀에서 사흘
-과정이며, 팀에 배포하는 작은 도구나 에이전트를 완성합니다. 프루퍼가 실제로 구축해
-운영하는 사내 도구를 교보재로 삼아, 시연에서 끝나지 않고 배포까지 가는 것을 목표로 합니다.
+파워유저와 개발 인접 직무, 사내 AI 챔피언을 대상으로 합니다. 고객사 스택에 맞춰 Claude
+Code, Google Antigravity, Codex 가운데 하나를 골라 직접 만들고, 여러 에이전트를 엮어
+설계하며, 사내 시스템을 AI에 연결합니다. 이틀에서 사흘 과정이며, 팀에 배포하는 작은
+도구나 에이전트를 완성합니다. 프루퍼가 실제로 구축해 운영하는 사내 도구를 교보재로 삼아,
+시연에서 끝나지 않고 배포까지 가는 것을 목표로 합니다.
 
 ### 리더 세션 (임원과 직책자)
 

docs/ax-landing-print.html

@@ -195,6 +195,8 @@
   color: var(--accent); margin-bottom: 3mm;
 }
 .tile__value { font-size: 20pt; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
+.tile__axis { font-size: 7.6pt; color: var(--muted); margin-bottom: 1mm; }
+.tile__tools + .tile__axis { margin-top: 2.5mm; }
 .tile__tools { font-size: 11.5pt; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
 .tile__desc { font-size: 8.4pt; line-height: 1.7; color: var(--muted); margin-top: 3mm; }
 .cover__rule { height: 1px; background: var(--line); margin: 0 0 5mm; }
@@ -373,8 +375,11 @@ <h1 class="cover__headline">기업 성과로 이어지는<br>AI 교육 커리큘
     </div>
     <div class="tile">
       <div class="tile__label">TOOLS</div>
-      <div class="tile__tools">Claude · ChatGPT<br>Gemini · Cursor</div>
-      <div class="tile__desc">특정 도구에 얽매이지 않고 고객사 환경에 맞는 도구를 중립적으로 권합니다</div>
+      <div class="tile__axis">대화형 도구</div>
+      <div class="tile__tools">Claude · ChatGPT · Gemini</div>
+      <div class="tile__axis">코딩 에이전트</div>
+      <div class="tile__tools">Claude Code · Antigravity · Codex</div>
+      <div class="tile__desc">도구는 고객사마다 다르게 정합니다. 사내망 제약과 계정 정책에서 실제로 돌아가는 것을 고릅니다</div>
     </div>
   </div>
 
@@ -595,7 +600,7 @@ <h2 class="h2">사내 AI 교육을 전 직원 리터러시부터 파워유저 
       <div class="lv__top"><span class="lv__level">L4</span><span class="lv__dur">2일 ~ 3일</span></div>
       <div class="lv__title">파워유저와 에이전트</div>
       <div class="lv__target">개발 인접 직무 · 사내 AI 챔피언</div>
-      <p class="lv__desc">Claude Code나 Cursor로 직접 만들고, 여러 에이전트를 엮어 설계하며, 사내 시스템을 AI에 연결합니다. 프루퍼가 실제로 구축해 운영하는 사내 도구를 교보재로 삼아, 시연에서 끝나지 않고 배포까지 가는 것을 목표로 합니다.</p>
+      <p class="lv__desc">고객사 스택에 맞춰 Claude Code, Google Antigravity, Codex 가운데 하나를 골라 직접 만들고, 여러 에이전트를 엮어 설계하며, 사내 시스템을 AI에 연결합니다. 프루퍼가 실제로 구축해 운영하는 사내 도구를 교보재로 삼아, 시연에서 끝나지 않고 배포까지 가는 것을 목표로 합니다.</p>
       <div class="spacer"></div>
       <div class="lv__foot"><b>산출물</b> 팀에 배포하는 작은 도구 또는 에이전트</div>
     </div>
@@ -891,7 +896,7 @@ <h2 class="h2">자주 묻는 질문</h2>
     </div>
     <div class="faq__item">
       <div class="faq__q"><i>Q4</i><span>우리가 이미 쓰는 AI 도구가 있는데 그 도구로 가르칩니까.</span></div>
-      <p class="faq__a">고객사가 쓰는 도구에 맞춰 트랙을 고릅니다. L2 도구 실무에서는 Claude, Copilot, Gemini 가운데 하나를 골라 진행하고, L4 파워유저와 에이전트에서는 수강생이 Claude Code나 Cursor로 직접 만듭니다. 프루퍼는 이 도구를 실무에서 다뤄 왔기 때문에 특정 도구에 얽매이지 않고 고객사 환경에 맞는 것을 중립적으로 권합니다. 아직 도구를 정하지 못했다면 무엇을 도입할지 고르는 일부터 함께 합니다.</p>
+      <p class="faq__a">고객사가 쓰는 도구에 맞춰 트랙을 고릅니다. L2 도구 실무에서는 Claude, Copilot, Gemini 가운데 하나를 골라 진행하고, L4 파워유저와 에이전트에서는 수강생이 Claude Code, Google Antigravity, Codex 가운데 고객사 스택에 맞는 도구로 직접 만듭니다. 프루퍼는 이 도구를 실무에서 다뤄 왔기 때문에 특정 도구에 얽매이지 않고 고객사 환경에 맞는 것을 중립적으로 권합니다. 아직 도구를 정하지 못했다면 무엇을 도입할지 고르는 일부터 함께 합니다.</p>
     </div>
     <div class="faq__item">
       <div class="faq__q"><i>Q5</i><span>사업장이 흩어져 있는데 온라인으로 할 수 있습니까.</span></div>

docs/ax-landing-spec.md

@@ -124,8 +124,11 @@
 - 타일 1: 라벨 `FLAGSHIP RECORD`, 값 `약 1,400억`,
   설명 `어려운 시기에 합류해 1년 만에 팔리는 회사로 만들고 이끈 매각 규모`.
   이 수치의 대외 공개는 5장 결정 4로 승인되었습니다.
-- 타일 2: 라벨 `TOOLS`, 값 `Claude · ChatGPT · Gemini · Cursor`,
-  설명 `특정 도구에 얽매이지 않고 고객사 환경에 맞는 도구를 중립적으로 권합니다`.
+- 타일 2: 라벨 `TOOLS`, 값을 두 축으로 나눕니다.
+  `대화형 도구` / `Claude · ChatGPT · Gemini`,
+  `코딩 에이전트` / `Claude Code · Antigravity · Codex`.
+  설명 `도구는 고객사마다 다르게 정합니다. 사내망 제약과 계정 정책에서 실제로 돌아가는 것을 고릅니다`.
+  두 축의 마크업과 접근성 처리는 `docs/ax-tool-axis-spec.md`가 단일 출처입니다.
 
 고객사 로고 마퀴를 두지 않습니다. 노출할 수 있는 고객사 로고가 없습니다(5장 결정 1).
 
@@ -504,10 +507,10 @@
 4. **우리가 이미 쓰는 AI 도구가 있는데 그 도구로 가르칩니까.**
 
    고객사가 쓰는 도구에 맞춰 트랙을 고릅니다. L2 도구 실무에서는 Claude, Copilot, Gemini
-   가운데 하나를 골라 진행하고, L4 파워유저와 에이전트에서는 수강생이 Claude Code나 Cursor로
-   직접 만듭니다. 프루퍼는 이 도구를 실무에서 다뤄 왔기 때문에 특정 도구에 얽매이지 않고
-   고객사 환경에 맞는 것을 중립적으로 권합니다. 아직 도구를 정하지 못했다면 무엇을
-   도입할지 고르는 일부터 함께 합니다.
+   가운데 하나를 골라 진행하고, L4 파워유저와 에이전트에서는 수강생이 Claude Code,
+   Google Antigravity, Codex 가운데 고객사 스택에 맞는 도구로 직접 만듭니다. 프루퍼는 이
+   도구를 실무에서 다뤄 왔기 때문에 특정 도구에 얽매이지 않고 고객사 환경에 맞는 것을
+   중립적으로 권합니다. 아직 도구를 정하지 못했다면 무엇을 도입할지 고르는 일부터 함께 합니다.
 
 5. **사업장이 흩어져 있는데 온라인으로 할 수 있습니까.**