feat: 문서 구조 변경 및 tech-visual 스킬 추가

2026-09-04 18:20:00 +09:00
parent 43901f0abf
commit 2efb7ee1f2
683 changed files with 61180 additions and 10479 deletions
@@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 280" role="img"
+     aria-labelledby="t d">
+  <title id="t">AP1 credential 보관 경계</title>
+  <desc id="d">브라우저 실행 영역 하나가 code 교환, token 보관, 요청 서명 세 가지를 모두 담고 있고, 그 영역 전체가 실행 중 XSS가 닿는 범위다. Keycloak과 Resource Server는 그 밖에 있으며 Resource Server는 서명·issuer·audience를 검증한다.</desc>
+
+  <style>
+    .lbl  { font: 13px system-ui, -apple-system, "Segoe UI", sans-serif; fill: #17181b; }
+    .sub  { font: 11px system-ui, -apple-system, sans-serif; fill: #5b6068; }
+    .zone { font: 600 11px system-ui, -apple-system, sans-serif; letter-spacing: .06em; }
+    .box  { fill: #fff; stroke: #b9bdc4; stroke-width: 1; }
+    .arw  { stroke: #6b7079; stroke-width: 1.4; fill: none; marker-end: url(#h); }
+  </style>
+
+  <defs>
+    <marker id="h" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="#6b7079"/>
+    </marker>
+    <pattern id="x" width="7" height="7" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
+      <line x1="0" y1="0" x2="0" y2="7" stroke="#c2695c" stroke-width="1" opacity=".28"/>
+    </pattern>
+  </defs>
+
+  <!-- XSS reach: hatch + border, so it reads without colour -->
+  <rect x="20" y="52" width="392" height="208" rx="7" fill="url(#x)" stroke="#c2695c" stroke-width="1.5"/>
+  <text x="20" y="42" class="zone" fill="#a8483c">실행 중 XSS가 닿는 범위</text>
+
+  <rect x="34" y="66" width="364" height="180" rx="5" class="box"/>
+  <text x="48" y="88" class="zone" fill="#5b6068">브라우저</text>
+
+  <rect x="50" y="100" width="332" height="40" rx="4" class="box"/>
+  <text x="64" y="119" class="lbl">code 교환</text>
+  <text x="64" y="134" class="sub">code_verifier</text>
+
+  <rect x="50" y="150" width="332" height="40" rx="4" class="box"/>
+  <text x="64" y="169" class="lbl">token 보관</text>
+  <text x="64" y="184" class="sub">access · refresh · ID — JavaScript memory</text>
+
+  <rect x="50" y="200" width="332" height="34" rx="4" class="box"/>
+  <text x="64" y="222" class="lbl">요청 서명</text>
+  <text x="150" y="222" class="sub">Authorization: Bearer</text>
+
+  <rect x="468" y="52" width="272" height="62" rx="5" class="box"/>
+  <text x="484" y="74" class="zone" fill="#5b6068">KEYCLOAK</text>
+  <text x="484" y="98" class="lbl">Authorization Code + PKCE</text>
+
+  <rect x="468" y="152" width="272" height="108" rx="5" class="box"/>
+  <text x="484" y="174" class="zone" fill="#5b6068">RESOURCE SERVER</text>
+  <text x="484" y="198" class="lbl">검증</text>
+  <text x="530" y="198" class="sub">서명 · issuer · audience</text>
+  <text x="484" y="222" class="lbl">STATELESS</text>
+  <text x="484" y="243" class="sub">지울 session이 없다</text>
+
+  <path class="arw" d="M412 90 H464"/>
+  <text x="418" y="82" class="sub">code</text>
+
+  <path class="arw" d="M412 216 H464"/>
+  <text x="418" y="208" class="sub">Bearer</text>
+</svg>