| viewBox (최대영역) | -2 -2 28 28 (28×28) |
|---|
| 중심 | (12, 12) |
|---|
| 설계 영역 / 라이브 | 좌표 1~23 (22×22), 중심 기준 ±11 |
|---|
| 여백 (28 - 24) | 각 변 2 (viewBox -2~26, 콘텐츠 0~24) |
|---|
| oct 코너 꼭지 (45°) | (4.22,4.22)·(19.78,4.22)·(19.78,19.78)·(4.22,19.78) |
|---|
| arc 반경 | 11 |
|---|
| cloud-asym (full frame) | 아래 납작·위 2봉우리 · 가운데 cusp 완화(y5.8, 중심 6.22) · 바닥 y18.5(중심 6.5) → 보호 반경 6 충족, ic(12,12) |
|---|
| tail 깊이 | tail = 2 / tail-long = 4 (arc-long apex r15) |
|---|
| rect-cut 깊이 | cut = 3 / cut-deep = 6 |
|---|
| stroke | 표시 1~2 (실제 0.25~1.25, +0.75 보정) · linecap/join round |
|---|
| 최대영역 보장 | stroke 2 시 외곽 0~24, viewBox -2~26 내 여유 2 (초과 없음) |
|---|
| full frame vs simple frame | 상호배타 — 같은 slot-full 공유, 한쪽 선택 시 다른쪽 해제 |
|---|
| simple frame | 분면 조합(TL/TR/BL/BR 믹스) 폐기 → 도형별 4방향 통일본을 정적 svg로 미리 병합해 등록(이음매 틈 문제 원천 차단). tail 계열만 예외로 tail-long 하나만 한쪽 방향에 붙여 4방향(tl/tr/bl/br) variant 생성 (말풍선 꼬리처럼 방향성) |
|---|
| insert 영역, logo 영역 | 반경 6 (중심 12, 또는 frame ic) · 로고 scale 0.5, 공통 영역 scale 0.85 적용 |
|---|
| 조항 1 · frame | frame · full frame 은 insert/logo 영역(반경 6)을 침범 불가 → 가장 안쪽 꼭지가 ≥6 |
|---|
| 조항 2 · insert/logo | insert · logo 는 자기 영역(반경 6) 밖으로 나갈 수 없음 → 콘텐츠에 scale 0.85 적용해 반경 내 유지 |
|---|
| 색 매핑 | frame stroke → --brand-main · frame fill → --brand-fill(+alpha) · front → --brand-point · back → --brand-back · 배경 항상 투명 |
|---|
| center 레이어 | 탭 frame/front/back · 렌더 순서 frame → back → front(맨 위) · front/back 각자 center 1개 + text · back 은 50% 대신 전용색 |
|---|
| 파일 위치 | frame → svg/frame/ · insert → svg/insert/ · logo → svg/logo/ |
|---|
| 파일명 = id | full/simple 공통 frm_full_bold_{name}.svg (simple 은 simple-{family} · tail 은 simple-{family}-tail-{tl|tr|bl|br}) · ins_bold_{cat}_{name}.svg · logo_*.svg |
|---|
| 모양 변경 | 해당 .svg 1개만 단독 수정 → HTML 손 안 댐 |
|---|
| 새 파츠 추가 | ① .svg 파일 생성 → ② HTML MANIFEST 배열에 id 한 줄 추가 (HTML 수정은 이 1곳뿐) |
|---|
| 파츠 제거 | MANIFEST 에서 id 삭제 (파일은 둬도 무방) |
|---|
| svg 내부 규칙 | 루트 <svg viewBox="-2 -2 28 28"> · 색 속성 금지 → 클래스만: frame .arc, center .ins/.ins-dot (색은 HTML CSS 변수가 입힘) |
|---|
| 메타데이터 (파일 안) | data-name = 버튼 표시명 (필수) · data-ic="x,y" = insert 중심 보정 (full frame 만, 선택) |
|---|
| 로드 방식 | HTML 이 fetch 로 svg 를 읽어 슬롯에 주입 (frame=path, center=inner 마크업) |
|---|
| ⚠ 로컬 서버 필요 | file:// 직접 열기는 fetch 차단 → icon/ 에서 python -m http.server 8000 후 localhost:8000/arc-circle-frame.html 접속 |
|---|