🔍 테마 타이포그래피 진단 및 전면 재정의 리포트: 본 페이지는 Twenty Twenty-Three 테마의 기형적인 기본 H1~H6 렌더링 스타일과 이를 완벽히 교정한 재정의된 에디토리얼 타이포그래피 스케일(.tech-article-wrap)을 직접 비교 검증하는 공식 레퍼런스 포스트입니다.
H1 헤딩: 대주제 및 아키텍처 핵심 타이틀 (20px Bold / 하단 2px 보더)
H1 하단 본문 문단입니다. 테마의 58px 괴물 글씨를 20px로 단정히 축소하고 굵기 700(Bold)과 2px 구분선을 부여하여 포스트 제목(22px)과 완벽한 상하 위계를 이룹니다.
H2 헤딩: 메이저 섹션 및 핵심 챕터 (18px Bold / 하단 1px 보더)
H2 하단 본문 문단입니다. 문서 내 주요 전환점을 선명하게 나누어주는 18px 스케일입니다.
H3 헤딩: 세부 기능 파트 및 구성 항목 (16.5px SemiBold)
H3 하단 본문 문단입니다. 16.5px SemiBold로 기능별 서브 그룹을 안정적으로 묶어줍니다.
H4 헤딩: 컴포넌트 레벨 및 세부 토픽 (15px SemiBold)
H4 하단 본문 문단입니다. 15px 크기로 컴포넌트 단위 설명에 이상적입니다.
H5 헤딩: 상세 옵션 및 환경 파라미터 (14px SemiBold)
H5 하단 본문 문단입니다. 14px 크기로 설정 항목이나 옵션을 조밀하게 기술합니다.
H6 헤딩: 터미널 명령어 및 메타데이터 주석 (13px SemiBold)
H6 하단 본문 문단입니다. 13px 크기로 터미널 코드 스니펫 직전의 안내 라벨로 최적화되었습니다.
⚠️ [PART 2] 비교용: Twenty Twenty-Three 테마 원본 순수 헤딩 (Theme Default)
테마 원본 H1 (58px Thin 400): 글 제목(22px)의 2.5배에 달하는 괴물 크기
테마 원본 H1 하단 본문 문단입니다.
테마 원본 H2 (48px Thin 400): 지나치게 거대한 시작 크기
테마 원본 H2 하단 본문 문단입니다.
테마 원본 H3 (36px Thin 400): 일반 본문의 2.2배
테마 원본 H3 하단 본문 문단입니다.
테마 원본 H4 (30px Thin 400): 여전히 글 제목보다 큼
테마 원본 H4 하단 본문 문단입니다.
테마 원본 H5 (18px Thin 400): H6와 동일한 크기 버그
테마 원본 H5 하단 본문 문단입니다.
테마 원본 H6 (18px Thin 400): H5와 100% 같은 크기
테마 원본 H6 하단 본문 문단입니다.
💻 터미널 스타일 코드 스니펫 3대 디자인 후보 비교
텍스트필드 내부를 실제 개발자 콘솔처럼 어둡고 시인성 높게 개선한 3가지 테마 후보입니다.
시안 A: macOS Slate 900 터미널 (신호등 닷 + 딥 슬레이트) [추천]
시안 B: GitHub Dark / VS Code 차콜
시안 C: OLED Pure Black & Cyber Green (정통 해커 쉘)
💡 프리미엄 Info 패널 (Info Panel / Callout Box) 디자인 프리뷰
기존의 밋밋한 인용구(blockquote)를 대체하는 현대적인 에디토리얼 엔지니어링 Info 패널입니다.
ctr은 Containerd 전용 로우레벨 CLI 툴입니다. 사용법이 다소 복잡하므로 실무에서는 도커 CLI 스펙에 맞추어 설계된 상위 래퍼 도구인 nerdctl을 사용하는 것을 적극 권장합니다.
📑 모던 TOC 목차 접기/펼치기 화살표 디자인 프리뷰
기존의 애매한 브라우저 기본 삼각 마커를 제거하고, 우측 정렬된 인터랙티브 원형 Chevron 화살표로 재정의한 목차 컴포넌트입니다.
📑 목차 (Table of Contents)
📊 인터랙티브 다이어그램 뷰어 (Floating Glass Toolbar)
헤더의 조잡한 버튼들을 없애고, 우측 하단 반투명 플로팅 툴바(확대, 축소, 100% 리셋, 화면 맞춤) + 마우스 드래그 이동 + 휠 줌을 지원하는 고성능 뷰어입니다.
Author:
Tags:
Leave a Reply