refactor: 분리되어 관리하고 있던 문서 시스템을 하나로 통일

2026-09-04 18:56:01 +09:00
parent 4b9e7148b5
commit 43bccd08a8
121 changed files with 2861 additions and 534 deletions
@@ -0,0 +1,16 @@
+홈 주제 탭 — 세 단계의 화면
+
+home-tabs-keycloak.png    2단계: 탭을 구역 제목 급(30px/650)으로 세운 상태.
+                          주제가 둘일 때는 그럴듯하지만 열 개, 스무 개가 되면
+                          이름만으로 화면이 덮인다. 고른 탭에 파란 밑줄이 있다.
+
+home-topic-tabs.png       3단계 직후: 칩(14px/560)으로 낮추고 밑줄을 없앤 상태.
+home-topic-tabs-2.png     같은 상태의 비교 구역 확대.
+                          이때 「목록 위에 글자만 떠 있는 것 같다」는 지적이 나왔다 —
+                          고른 것이 색으로만 달라 누를 수 있는 것으로 읽히지 않았고,
+                          탭 줄과 목록 사이가 선 없이 30px 비어 두 덩어리로 갈렸다.
+
+home-tabs-grouped.png     최종: 고른 탭에 형태(알약)를 주고, 묶음의 윗선을 목록이 아니라
+                          패널이 갖게 해서 탭 줄이 그 선에 바로 얹히게 한 상태.
+
+측정값은 tab-metrics.txt 를 보라.
@@ -0,0 +1,44 @@
+홈 주제 탭 — 배포본 실측
+출처: https://hyeonworks.com (frontend 2b2f443) — 2026-09-04, Playwright 로 getComputedStyle
+재현: 홈에서 개발자도구 콘솔에 아래를 붙여 넣으면 같은 값이 나온다.
+
+  const s = document.querySelector('.home-comparison');
+  [...s.querySelectorAll('.home-topic-tabs button')].map(b => {
+    const cs = getComputedStyle(b);
+    return { text: b.textContent, selected: b.getAttribute('aria-selected'),
+             fontSize: cs.fontSize, fontWeight: cs.fontWeight,
+             color: cs.color, background: cs.backgroundColor,
+             pseudoAfter: getComputedStyle(b, '::after').content };
+  });
+
+======================================================================
+[탭]
+
+  고른 탭   "OAuth/OIDC 인증 경계"   aria-selected=true
+    font-size      14px          ← 2단계에서는 30px 이었다
+    font-weight    560           ← 2단계에서는 650
+    color          rgb(23,24,27)      (--ink)
+    background     rgb(231,231,227)   ← 알약. 색만으로는 「진한 글자」로 읽힌다
+    border-radius  17px
+    ::after        none          ← 파란 밑줄 제거 확인
+
+  안 고른 탭 "JPA 피드 조회 성능"    aria-selected=false
+    color          rgb(108,111,118)   (--faint)
+    background     rgba(0,0,0,0)      투명
+
+[묶음의 결속 — 「글자만 떠 있다」를 고친 부분]
+
+  .home-topic-panel  border-top     1px rgb(200,203,207)   (--line-strong)
+  .home-comparison ul border-top    0px                    ← 윗선을 패널로 옮겼다
+  탭 줄 아래 ~ 패널 위 간격          0px                    ← 탭이 그 선에 바로 얹힌다
+
+  선이 목록에 있으면 축 이름 줄만 선 위로 밀려 나가 탭과 한 덩어리처럼 보이고,
+  정작 목록은 저 혼자 시작한다. 그 상태가 home-topic-tabs-2.png 다.
+
+[왼쪽 끝 정렬 — 알약의 좌우 여백(13px)만큼 줄을 당겼다]
+
+  첫 탭 글자      x = 261
+  축 이름 「구조」  x = 261
+  첫 행 「SPA」    x = 263
+
+[구역 전체 높이]  529px