Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
076aeb0403434b5916b3b19837ef5accb2bf8fa3
C.E.L_Slide_test2/templates/blocks/INDEX.md
kyeongmin ffad1ba82a Phase I 실행 완료 + 프로세스 재설계 (Stage 2.5 → Stage 5) 
Phase I: 전수 정합성 복구 + 넘침 처리 패러다임 전환 (14개 항목)
- I-14: SSE 유틸 공통 추출 (src/sse_utils.py 신규, 3개 파일 중복 제거)
- I-13: dead code 3건 삭제 (_call_anthropic_direct, _extract_sse_text x2) + import anthropic 제거
- I-1: STEP_B_PROMPT purpose 가이드 미존재 블록 3개 → 실존 블록 교체
- I-2: catalog.yaml not_for 13건 미존재 블록 참조 교체/제거
- I-12: BLOCK_SLOTS 주석 개수 수정 (cards 9, visuals 6, emphasis 10)
- I-10: INDEX.md 38개 동기화 (삭제된 8개 블록 행 제거)
- I-11: README.md 38개 동기화 (_legacy 제거, 트리/개수 정리)
- I-3: PURPOSE_FALLBACK 상수 + purpose 기반 미등록 블록 교체
- I-7: compare-pill-pair 단독 사용 금지 검증
- I-4: 38개 블록 전체에 slot_desc 추가
- I-5: 편집자 프롬프트에 slot_desc 전달 로직
- I-6: 제목 유사도 70% 초과 시 자동 교정
- I-9: 넘침 판단 Kei API 호출 (KEI_OVERFLOW_PROMPT, call_kei_overflow_judgment)
- I-8: 대형 콘텐츠 정보 Kei overflow 프롬프트에 포함

프로세스 재설계:
- Stage 2.5 제거 → Stage 5에서 Sonnet 감지 + Kei 판단 통합
- _review_balance() 확장: zone 예산 + overflow_detected action 추가
- Stage 5 루프에 Kei 넘침 판단 호출 통합
- _apply_adjustments()에 kei_trim/kei_restructure action 추가
- _build_overflow_context(), _convert_kei_judgment() 헬퍼 함수 추가
- DOWNGRADE_MAP은 Kei API 실패 시 비상용으로만 잔존

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 13:06:21 +09:00

6.0 KiB
Raw Blame History

블록 라이브러리 인덱스 (38개)

디자인 팀장이 콘텐츠에 맞는 블록을 선택할 때 참조하는 라이브러리. 각 카테고리 안에 변형이 여러 개 있으며, 콘텐츠 성격에 따라 적절한 변형을 선택한다.

시각화(visuals/)는 SVG로 제작한다 — CSS/AI 이미지 금지.

📁 headers/ (5개) — 타이틀, 꼭지 헤더

파일 설명 언제 사용
section-title-with-bg.html 배경 이미지 위 영문+한글 타이틀 (500px) 페이지 맨 첫 화면, 배경 이미지 있을 때
section-header-bar.html 파란 바 + 중앙 흰 제목 (컴팩트) 섹션 시작 가볍게, 주제 전환
topic-left-right.html 좌:파란 제목 + 우:설명 질문+답변 구조, 주장+근거
topic-center.html 중앙 정렬 대제목 + 서브+설명 단독 강조, 주제 선언
topic-numbered.html 번호 원형 + 제목 + 구분선 + 설명 순서 있는 꼭지 (1번, 2번, 3번)

📁 cards/ (9개) — 카드 계열

파일 설명 언제 사용
card-image-3col.html 이미지(160px) + 색상 제목 + 영문 + 불릿 (3열) 단계별 설명에 이미지 핵심
card-dark-overlay.html 다크 이미지 배경 + 흰 제목 + 짧은 설명 (3~5열) 키워드 시각 강조, 임팩트
card-tag-image.html 색상 태그 라벨 + 이미지 + 제목 + 설명 (3열) 카테고리별 분류 (제조/건축/토목)
card-icon-desc.html 큰 이모지 아이콘 + 제목 + 설명 (2~4열) 기능/특성/장점 아이콘 나열
card-compare-3col.html 색상 헤더 카드 3열 + 불릿 3개 카테고리 비교 (상용/범용/전문)
card-step-vertical.html 좌 색상 마커 + 우 콘텐츠 (세로, 연결선) 생애주기 단계별 (이미지+설명)
card-image-round.html 원형 이미지(140px) + 제목 + 설명 (2~3열) 포트폴리오형, 비전/가치
card-stat-number.html 큰 숫자(36px) + 단위 + 라벨 (2~4열) KPI, 성과 수치, 비용 절감율
card-numbered.html 색상 원형 번호 + 제목 + 설명 (세로) 순서 있는 항목 (실행 단계, 조건)

📁 tables/ (3개) — 표/비교 계열

파일 설명 언제 사용
compare-3col-badge.html A | VS배지 | B 3단 비교 (행별) 두 개념 다항목 비교 (BIM vs DX)
compare-2col-split.html 파란 헤더 좌/구분/우 + 행별 비교 두 기술 항목별 상세 비교 (GIS vs BIM)
table-simple-striped.html 남색 헤더 + 줄무늬 행. 범용 스펙표, 일정표, 수치 목록

📁 visuals/ (6개) — 시각 요소 (SVG)

SVG 노하우:

  • <text> = 원 좌표와 같은 공간 → 위치 100% 정확
  • radialGradient/linearGradient → 고급 그라데이션
  • filter → 글로우/그림자
  • 수학적 계산 (cos/sin) → N개 자동 배치 (Phase 2)
  • AI 이미지로 시각화 만들면 안 됨 — 원 위치 맞출 수 없음
파일 설명 언제 사용
venn-diagram.html SVG premium 벤 다이어그램 (그라데이션+글로우) 포함 관계, 기술 융합 (★단독 배치)
circle-gradient.html 파란 그라데이션 원 + 중앙 텍스트 섹션 전환 키워드 강조
compare-pill-pair.html 이중 테두리 둥근 박스 2개 + VS 2개 개념 시각 대비 (표 위 헤더)
process-horizontal.html 파란 번호 원 + 카드 + → 화살표 (가로) 논리적 프로세스 흐름
flow-arrow-horizontal.html 색상 캡슐 + 화살표 (SVG, 컴팩트) 기술 발전/전환 흐름 간결하게
keyword-circle-row.html SVG 원형 안 큰 글자 + 라벨 + 설명 약어 풀이 (G-S-I-M)

📁 emphasis/ (10개) — 강조, 인용, 결론

파일 설명 언제 사용
quote-big-mark.html ❝❞ 큰따옴표 장식 + 인용+출처 임팩트 인용, 핵심 발언
quote-question.html 파란 배경+테두리 + 큰 질문 텍스트 독자에게 질문, 전환점
comparison-2col.html 좌 파란 vs 우 빨간 헤더 + 본문 A vs B 직접 비교
banner-gradient.html 파란 그라데이션 배너 + 중앙 흰 텍스트 섹션 구분, 핵심 선언
dark-bullet-list.html 짙은 남색 배경 + 파란 제목 + 흰 불릿 핵심 포인트 강조 (무게감)
highlight-strip.html 가로 색상 구간 + 흰 라벨 카테고리 색상 분류 바
callout-solution.html 파란 배경+테두리 + 아이콘 + 제목+설명 해결책, 솔루션, 방향성
callout-warning.html 빨간 배경+테두리 + 아이콘 + 제목+설명 문제점, 주의, 잘못된 접근
tab-label-row.html 가로 탭 버튼 (선택됨=색상, 나머지=회색) 카테고리 전환/분류 표시
divider-text.html 좌우 회색 선 + 중앙 텍스트 가벼운 섹션 구분, 휴식점

📁 media/ (5개) — 이미지/미디어

파일 설명 언제 사용
image-row-2col.html 이미지 2장 나란히 (354px) 시공 사진 2장, 현장 비교
image-grid-2x2.html 이미지 4장 2x2 격자 (200px) 현장 사진 4장, 갤러리
image-side-text.html 좌:이미지(320px) + 우:제목+설명+불릿 이미지 설명, 시스템 소개
image-full-caption.html 전체 너비 이미지 1장 + 캡션 핵심 도표, 대형 다이어그램
image-before-after.html Before(회색) + → + After(파란) 변화 전후 비교

추가 규칙

  1. 이름 규칙: {유형}-{특징}.html
  2. 모든 변형은 catalog.yaml에 등록 — 미등록 = 팀장이 모름
  3. 각 파일 상단에 HTML 주석으로 용도/슬롯 명시
  4. 디자인 토큰 사용 — 하드코딩 색상 금지 (가능한 범위에서)
  5. 높이 고정 금지 — 모드 독립적 (슬라이드/웹 겸용)
  6. visuals/는 SVG로 제작 — CSS 원/AI 이미지 금지
Reference in New Issue View Git Blame Copy Permalink