diff --git a/app/subs/ax/components/sections/Faq.data.ts b/app/subs/ax/components/sections/Faq.data.ts index 0944c63..3c69fd1 100644 --- a/app/subs/ax/components/sections/Faq.data.ts +++ b/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: "사업장이 흩어져 있는데 온라인으로 할 수 있습니까.", diff --git a/app/subs/ax/components/sections/Hero.module.scss b/app/subs/ax/components/sections/Hero.module.scss index 7ad2fd1..766df74 100644 --- a/app/subs/ax/components/sections/Hero.module.scss +++ b/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); diff --git a/app/subs/ax/components/sections/Hero.tsx b/app/subs/ax/components/sections/Hero.tsx index fa5c4f9..75edbf4 100644 --- a/app/subs/ax/components/sections/Hero.tsx +++ b/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 (
@@ -83,12 +97,29 @@ export default function Hero() {
TOOLS
-
- Claude · ChatGPT · Gemini · Cursor +
+ {TOOL_AXES.filter((axis) => axis.tools.length > 0).map( + (axis) => ( +
+ + {axis.label} + +
    + {axis.tools.map((tool) => ( +
  • {tool}
    • + ))} +
+
+ ), + )}
- 특정 도구에 얽매이지 않고 고객사 환경에 맞는 도구를 중립적으로 - 권합니다 + 도구는 고객사마다 다르게 정합니다. 사내망 제약과 계정 정책에서 + 실제로 돌아가는 것을 고릅니다
diff --git a/app/subs/ax/components/sections/Lecture.tsx b/app/subs/ax/components/sections/Lecture.tsx index 665fbf2..0ea5fc5 100644 --- a/app/subs/ax/components/sections/Lecture.tsx +++ b/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: "팀에 배포하는 작은 도구 또는 에이전트", }, ]; diff --git a/docs/ax-curriculum.md b/docs/ax-curriculum.md index 598bfab..67a7f82 100644 --- a/docs/ax-curriculum.md +++ b/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에 연결합니다. 이틀에서 사흘 과정이며, 팀에 배포하는 작은 +도구나 에이전트를 완성합니다. 프루퍼가 실제로 구축해 운영하는 사내 도구를 교보재로 삼아, +시연에서 끝나지 않고 배포까지 가는 것을 목표로 합니다. ### 리더 세션 (임원과 직책자) diff --git a/docs/ax-landing-print.html b/docs/ax-landing-print.html index 5582a64..b5f9edc 100644 --- a/docs/ax-landing-print.html +++ b/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 @@

기업 성과로 이어지는
AI 교육 커리큘

TOOLS
-
Claude · ChatGPT
Gemini · Cursor
-
특정 도구에 얽매이지 않고 고객사 환경에 맞는 도구를 중립적으로 권합니다
+
대화형 도구
+
Claude · ChatGPT · Gemini
+
코딩 에이전트
+
Claude Code · Antigravity · Codex
+
도구는 고객사마다 다르게 정합니다. 사내망 제약과 계정 정책에서 실제로 돌아가는 것을 고릅니다
@@ -595,7 +600,7 @@

사내 AI 교육을 전 직원 리터러시부터 파워유저
L42일 ~ 3일
파워유저와 에이전트
개발 인접 직무 · 사내 AI 챔피언
-

Claude Code나 Cursor로 직접 만들고, 여러 에이전트를 엮어 설계하며, 사내 시스템을 AI에 연결합니다. 프루퍼가 실제로 구축해 운영하는 사내 도구를 교보재로 삼아, 시연에서 끝나지 않고 배포까지 가는 것을 목표로 합니다.

+

고객사 스택에 맞춰 Claude Code, Google Antigravity, Codex 가운데 하나를 골라 직접 만들고, 여러 에이전트를 엮어 설계하며, 사내 시스템을 AI에 연결합니다. 프루퍼가 실제로 구축해 운영하는 사내 도구를 교보재로 삼아, 시연에서 끝나지 않고 배포까지 가는 것을 목표로 합니다.

산출물 팀에 배포하는 작은 도구 또는 에이전트
@@ -891,7 +896,7 @@

자주 묻는 질문

Q4우리가 이미 쓰는 AI 도구가 있는데 그 도구로 가르칩니까.
-

고객사가 쓰는 도구에 맞춰 트랙을 고릅니다. L2 도구 실무에서는 Claude, Copilot, Gemini 가운데 하나를 골라 진행하고, L4 파워유저와 에이전트에서는 수강생이 Claude Code나 Cursor로 직접 만듭니다. 프루퍼는 이 도구를 실무에서 다뤄 왔기 때문에 특정 도구에 얽매이지 않고 고객사 환경에 맞는 것을 중립적으로 권합니다. 아직 도구를 정하지 못했다면 무엇을 도입할지 고르는 일부터 함께 합니다.

+

고객사가 쓰는 도구에 맞춰 트랙을 고릅니다. L2 도구 실무에서는 Claude, Copilot, Gemini 가운데 하나를 골라 진행하고, L4 파워유저와 에이전트에서는 수강생이 Claude Code, Google Antigravity, Codex 가운데 고객사 스택에 맞는 도구로 직접 만듭니다. 프루퍼는 이 도구를 실무에서 다뤄 왔기 때문에 특정 도구에 얽매이지 않고 고객사 환경에 맞는 것을 중립적으로 권합니다. 아직 도구를 정하지 못했다면 무엇을 도입할지 고르는 일부터 함께 합니다.

Q5사업장이 흩어져 있는데 온라인으로 할 수 있습니까.
diff --git a/docs/ax-landing-spec.md b/docs/ax-landing-spec.md index a1976c0..34c7ea6 100644 --- a/docs/ax-landing-spec.md +++ b/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. **사업장이 흩어져 있는데 온라인으로 할 수 있습니까.** diff --git a/docs/ax-tool-axis-spec.md b/docs/ax-tool-axis-spec.md new file mode 100644 index 0000000..914afdd --- /dev/null +++ b/docs/ax-tool-axis-spec.md @@ -0,0 +1,452 @@ +# ax.proofer.tech 코딩 에이전트 축과 도구 중립 카피 화면 스펙 + +PRF-329의 산출물입니다. 랜딩에서 도구 이름이 나오는 자리를 코딩 에이전트 복수 도구로 열고, +도구 중립 포지셔닝을 "망과 계정 정책"이라는 좁은 축으로 다시 씁니다. + +이 문서는 구현 티켓의 단일 출처입니다. 여기 적힌 확정 문면과 `docs/ax-landing-spec.md`, +`docs/ax-curriculum.md`가 어긋나면 이 문서가 이깁니다. 8절에 두 문서에서 함께 고쳐야 하는 +줄을 적어 두었으니, 구현 티켓은 컴포넌트와 그 줄을 같은 커밋에서 바꿉니다. + +대상 레포는 `proofer-tech/proofer`, 기준 브랜치는 `main`입니다. 손대는 화면은 +`ax.proofer.tech` 랜딩 한 장이고, 파일은 셋입니다. + +- `app/subs/ax/components/sections/Hero.tsx` + `Hero.module.scss` +- `app/subs/ax/components/sections/Lecture.tsx` +- `app/subs/ax/components/sections/Faq.data.ts` + +`app/subs/ax/components/sections/Approach.tsx`는 이번에 손대지 않습니다. 이유는 3절에 있습니다. + +## 0. 판정 요약 + +| 항목 | 판정 | +| ------------------- | -------------------------------------------------------------------------------- | +| L4 코딩 도구 목록 | `Claude Code`, `Google Antigravity`, `Codex` 셋. Cursor는 뺍니다 | +| L4 도구를 적는 자리 | `target` 줄이 아니라 `desc` 첫 문장에 녹입니다 | +| Hero TOOLS 타일 | 한 줄 나열을 버리고 대화형 / 코딩 에이전트 두 축으로 나눕니다 | +| 도구 중립 한 줄 | **기존 문장 수정**. Hero TOOLS 타일 설명 하나만 고칩니다. 새 문장을 더하지 않습니다 | +| FAQ 4번 답변 | L4 목록만 위 판정에 맞춰 갈아 끼웁니다. 망·계정 축 문장은 넣지 않습니다 | + +### 판정 근거 + +**Cursor를 뺍니다.** 남기는 세 이름은 전부 실제 고객사 스택에 붙어 있고 계정 체계가 서로 +다릅니다. Antigravity는 GCP project id 로그인(삼성바이오에피스), Codex는 API Key 로그인 +(넥센타이어), Claude Code는 현대자동차 남양연구소입니다. 세 이름이 곧 "계정 정책이 다르면 +도구가 갈린다"는 사실의 증거인데, 같은 근거가 없는 Cursor를 네 번째로 붙이면 목록이 사실 +나열에서 도구 자랑으로 바뀝니다. + +**L4는 `target`이 아니라 `desc`에 적습니다.** L2는 `desc` 첫 문장이 "사무직 실무자가"로 +대상을 말해 주기 때문에 `target` 줄을 도구에 내줄 수 있었습니다. L4는 그 자리가 없어서 +`target`을 도구로 바꾸면 "개발 인접 직무 · 사내 AI 챔피언"이라는 대상 정보가 화면에서 +사라집니다. `cardTarget`은 카드당 한 줄이고, 도구 이름 셋에 선택 조건까지 한 줄에 넣으면 +880px 이하에서 두 줄로 접힙니다. + +**Hero 타일은 두 축으로 나눕니다.** 지금 한 줄은 대화형 도구 셋과 코딩 도구 하나를 섞어 +놓아서, 읽는 사람이 "우리 회사가 쓰는 코딩 도구가 저기 있나"를 확인할 수 없습니다. 코딩 +축을 세 개로 늘리면 한 줄에 여섯 이름이 되어 데스크톱에서도 읽는 순서가 무너집니다. + +**중립 카피는 기존 문장을 고칩니다.** 일반적인 중립 문장이 이미 두 군데(Hero 타일 설명, +Approach 카드 02)에 있어서 한 줄을 더하면 세 번째 중복이 됩니다. 그리고 "왜 이 목록 중에 +하나를 고르는가"에 답할 자리는 도구 이름 바로 아래인 Hero 타일 설명입니다. Approach 카드 +02는 도구만이 아니라 SI까지 포함하는 더 넓은 진술이라 그대로 둡니다. + +## 1. 레이아웃 + +### 1.1 Hero TOOLS 타일 (`Hero.tsx`, 히어로 오른쪽 타일 스택 두 번째) + +타일 안을 위에서 아래로 네 덩어리로 나눕니다. + +``` +[TOOLS] 라벨 +대화형 도구 축 라벨 1 +Claude · ChatGPT · Gemini 값 1 +코딩 에이전트 축 라벨 2 +Claude Code · Antigravity · Codex 값 2 +도구는 고객사마다 다르게 정합니다 ... 설명 +``` + +- 라벨에서 첫 축 라벨까지 `margin-top: 10px`. 지금 `.tileTools`가 쓰는 값 그대로입니다. +- 축 라벨과 그 아래 값 사이 `4px`. +- 축 1 값과 축 2 라벨 사이 `12px`. +- 축 2 값과 설명 사이 `10px`. 지금 `.tileDesc`의 `margin-top: 6px`을 `10px`로 올립니다. + 값이 두 덩어리로 늘어 설명이 값에 붙어 보이기 때문입니다. +- 축 라벨은 값 왼쪽이 아니라 값 위에 놓습니다. 좌우로 놓으면 560px 이하에서 값에 남는 폭이 + 줄어 이름 중간에서 접힙니다. 세로로 쌓으면 분기점마다 구조를 다시 쓸 필요가 없습니다. +- 타일 바깥 치수(`.tiles`, `.tile`의 패딩과 테두리와 라운드)는 건드리지 않습니다. + +**폭 계산.** `.tile`의 좌우 패딩은 `28px`씩입니다. 히어로의 좌우 패딩은 기본 `40px`, +560px 이하에서 `24px`입니다. 880px 이하에서 `.grid`가 1열이 되므로 타일 폭이 곧 본문 폭입니다. +따라서 값이 쓸 수 있는 폭은 360px 뷰포트에서 `360 - 24*2 - 28*2 = 256px`입니다. +이 폭에서 코딩 축 값이 두 줄로 접히는 것을 허용합니다. 처리 규칙은 4.4절에 있습니다. + +**높이.** `.grid`가 `align-items: end`라 타일이 늘면 위로 자랍니다. 히어로 왼쪽 열의 +헤드라인과 버튼은 밀리지 않습니다. 880px 이하에서는 타일이 본문 아래로 내려가므로 겹치는 +것이 없습니다. + +### 1.2 L4 레벨 카드 (`Lecture.tsx`, `LEVELS[3]`) + +레이아웃을 바꾸지 않습니다. `desc` 문자열만 갈아 끼웁니다. 카드 안의 순서 +(레벨/분량 → 제목 → 대상 → 설명 → 산출물)와 간격은 지금 그대로입니다. + +`desc`가 지금보다 한국어 기준 15자 정도 길어집니다. `.grid`가 `repeat(2, 1fr)`이고 +`.card`가 `height: 100%`라 같은 행의 L3 카드가 함께 높아집니다. 이것은 의도한 동작이고 +따로 손대지 않습니다. + +### 1.3 FAQ 4번 (`Faq.data.ts`, `FAQS[3]`) + +레이아웃을 바꾸지 않습니다. `a` 문자열만 갈아 끼웁니다. `app/subs/ax/layout.tsx`의 +`FAQPage` 구조화 데이터가 같은 배열을 읽으므로 따로 고칠 곳이 없습니다. + +## 2. 컴포넌트 매핑 + +| 영역 | 컴포넌트 | 출처 | 비고 | +| ------------------- | ------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | +| 타일 껍데기 | `.tiles` / `.tile` / `.tileLabel` / `.tileDesc` | `app/subs/ax/components/sections/Hero.module.scss` | 그대로 씁니다 | +| 타일 진입 모션 | `Enter` (`index={6}`, `immediate`) | `app/subs/ax/components/Enter.tsx` | 그대로 씁니다. 6절 참고 | +| 타일 도구 축 묶음 | `.tileToolsGroup` (신규) | 신규 클래스 | 기존 `.tileTools` 하나로는 축 라벨 두 개와 값 두 줄을 담을 자리가 없습니다. 축 사이 간격을 라벨/값과 다르게 줘야 합니다 | +| 타일 축 라벨 | `.tileToolsAxis` (신규) | 신규 클래스 | `.tileLabel`은 `var(--mono)`인데 IBM Plex Mono에 한글 글리프가 없어 "대화형 도구"가 폴백 폰트로 떨어집니다. 재사용 불가입니다 | +| 타일 값 목록 | `.tileToolsList` (신규) | 신규 클래스 | 기존 `.tileTools`(20px)를 대체합니다. 근거는 3절 타이포 | +| L4 카드 | `.card` 이하 전체 | `app/subs/ax/components/sections/Lecture.module.scss` | 문자열만 바뀝니다. 신규 없음 | +| FAQ 항목 | `Faq.tsx` / `Faq.data.ts` | `app/subs/ax/components/sections/` | 문자열만 바뀝니다. 신규 없음 | + +기존 `.tileTools` 클래스는 쓰는 자리가 없어지므로 지웁니다. + +### 2.1 Hero 타일 마크업 (그대로 옮겨 쓰는 형태) + +```tsx +
+
TOOLS
+
+
+ + 대화형 도구 + +
    +
  • Claude
    • +
  • ChatGPT
    • +
  • Gemini
    • +
+
+
+ + 코딩 에이전트 + +
    +
  • Claude Code
    • +
  • Antigravity
    • +
  • Codex
    • +
+
+
+
+ 도구는 고객사마다 다르게 정합니다. 사내망 제약과 계정 정책에서 실제로 돌아가는 것을 고릅니다 +
+
+``` + +가운뎃점은 마크업에 문자로 넣지 않고 `.tileToolsList li + li::before`가 그립니다. +이유는 7절에 있습니다. + +## 3. 토큰 지정 + +이 랜딩은 `.ax-root` 아래 단일 팔레트로 돌아가는 다크 전용 화면입니다. 라이트 값이 따로 +없는 것은 이 화면에 라이트 테마가 없기 때문이고, 이번 변경은 새 색을 하나도 만들지 +않습니다. 아래는 전부 `app/subs/ax/ax.scss`에 이미 있는 토큰입니다. + +이 레포는 색만 CSS 변수 토큰이고, 간격과 글자 크기는 모듈 SCSS의 px 리터럴이 관습입니다. +아래 px 값은 새로 정한 값이 아니라 이 랜딩이 이미 쓰고 있는 단계에서 골랐습니다. + +### 3.1 색 + +| 자리 | 토큰 | 대비 (`--bg-alt` 위) | +| ------------------- | --------------- | -------------------------------------------- | +| `TOOLS` 라벨 | `--dim` | `5.81:1` (스펙 3장 대비표) | +| 축 라벨 | `--dim` | `5.81:1` | +| 도구 이름 | `--ink` | `16.03:1` | +| 가운뎃점 구분자 | `--dim` | `5.81:1`. 이름보다 한 단계 낮춰 구분자로 읽히게 합니다 | +| 타일 설명 | `--muted` | `7.53:1` | +| L4 카드 설명 | `--muted` | 기존 `.cardDesc` 그대로 | +| L4 카드 대상 | `--accent` | 기존 `.cardTarget` 그대로 | + +`.tile`의 바탕은 `--bg-alt`입니다. 새 면을 만들지 않으므로 스펙 3장 대비표를 다시 잴 일이 +없습니다. + +### 3.2 타이포와 간격 + +| 자리 | 크기 | 굵기 | 자간 | 폰트 | +| ----------- | --------- | ---- | ---------- | ------------------------------------------- | +| 축 라벨 | `13px` | 400 | 기본 | 본문 폰트. `var(--mono)`를 쓰지 않습니다 | +| 도구 이름 | `16px` | 700 | `-0.01em` | 본문 폰트 | +| 줄 간격 | `1.5` | - | - | 두 줄로 접혔을 때 줄이 붙지 않게 합니다 | + +**값을 20px에서 16px로 낮춥니다.** 지금 `.tileTools`는 `20px/700` 한 줄입니다. 두 축이 +되면서 20px 두 줄은 옆 실적 타일의 `34px` 값과 시각 무게가 비슷해져, 히어로에서 먼저 읽혀야 +할 실적 수치와 도구 나열의 순서가 뒤집힙니다. `16px`은 이 랜딩이 `.ax-btn`과 Lecture +`.opsLabel`에서 이미 쓰는 단계입니다. `13px` 축 라벨도 Lecture `.eyebrowSub`와 히어로 +마퀴가 쓰는 단계입니다. + +간격 값은 1.1절에 적었습니다. 라운드와 그림자는 손대지 않습니다. 이 랜딩은 바깥 발광 +그림자와 카드마다 다른 그라데이션을 쓰지 않는다는 규칙이 스펙 3장에 있고, 이번 변경도 +따릅니다. + +## 4. 다섯 상태 + +세 자리 모두 코드에 박힌 상수 배열을 서버 컴포넌트가 그대로 그리는 정적 화면입니다. +그래서 아래 다섯 중 셋은 발생 경로가 없습니다. 해당 없는 것은 이유를 답니다. + +### 4.1 빈 상태 + +**해당 있음.** 도구 축 배열이 빈 배열이면 그 축의 라벨과 값 줄을 통째로 그리지 않습니다. +축 라벨만 남고 값이 비는 화면, 빈 `