[{"content":"이 글은 공개 글 버전보다 더 짧게, 검증용 리딩 흐름만 남긴다.\n핵심 작업 한 개를 먼저 고른다. 읽는 흐름이 CTA에서 끊기지 않는지 본다. 카드와 본문 간격이 과하게 넓지 않은지 확인한다. 검증 로그 보기 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/productivity-routine/","summary":"공개 글처럼 읽히는지 먼저 확인하는 보조 버전이다.","title":"아침 생산성 루틴"},{"content":"아침 루틴은 길어질수록 실패한다.\n그래서 이 글은 짧고 반복 가능한 흐름을 기준으로 만든다.\n오늘의 루틴 알림 확인은 한 번만 한다. 가장 중요한 작업 한 개만 고른다. 초반 30분 동안은 입력보다 출력에 집중한다. 체크리스트 물 한 잔 캘린더 확인 오늘의 핵심 작업 1개 첫 CTA 또는 다음 행동 1개 루틴 점검하기 왜 이 글이 필요한가 실제 글은 문서보다 훨씬 자연스럽게 보여야 한다.\n제목, 본문, 목록, CTA가 한 화면에서 어색하지 않아야 하고, 이미지가 들어가도 리듬이 흔들리지 않아야 한다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/06-public-posts/productivity-routine/","summary":"실제 독자가 읽는 콘텐츠처럼 보여야 렌더링 점검도 의미가 생긴다.","title":"아침 생산성 루틴"},{"content":"이 페이지는 마크다운의 기본 요소를 한 번에 점검한다.\nH1 제목 예시 H2 제목 예시 H3 제목 예시 H4 제목 예시 H5 제목 예시 H6 제목 예시 인용문은 본문보다 살짝 내려앉아 보여야 하고, 길어도 읽는 리듬이 유지되어야 한다.\n일반 목록 들여쓰기 목록 더 깊은 들여쓰기 또 다른 항목 번호 목록 번호가 이어지는지 확인 중간에 다른 블록이 들어가도 괜찮은지 본다 완료된 작업 남은 작업 렌더링 확인 항목 예시 확인 인라인 코드 var(--accent) 토큰이 코드로도 보이는가 굵은 글자 강조 대비가 충분한가 기울임 보조 설명 문장 흐름이 자연스러운가 inline code와 bold, italic, kbd 같은 요소가 같이 있어도 깨지지 않아야 한다.\n코드 블록 \u0026lt;div class=\u0026#34;example\u0026#34;\u0026gt; \u0026lt;p\u0026gt;코드 블록은 가독성이 핵심이다.\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; :root { --example-color: var(--accent); } 각주 문장 끝에 각주를 붙이면 참고 설명이 본문 밖으로 분리된다.1\n자세히 보기 접어 보기 접힘 영역 안에서도 Markdown이 정상적으로 렌더링되어야 한다.\n짧은 설명 표준 문법 추가 주의사항 방향성 섞기 LTR text: Hugo theme upgrade lab, typography, layout, rendering. العربية العربية العربية. 방향성이 바뀌어도 카드와 본문 리듬이 깨지면 안 된다. 숏코드 조합 보기 · 엣지 케이스\n각주 내용이 길어져도 본문 리듬을 해치지 않아야 한다.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/03-rendering/markdown-rendering/","summary":"헤딩, 목록, 표, 코드, 각주가 모두 같은 본문 안에서 안정적으로 보여야 한다.","title":"Markdown 렌더링"},{"content":"이 페이지는 컨트롤과 카드의 시각 규칙을 확인한다.\nCTA 미리보기 무료 체험 시작 14일 동안 기본 토큰과 컴포넌트 렌더링을 함께 점검한다. 토큰 가격표처럼 읽기 CTA 숏코드 자세히 보기 카드 샘플 확인 포인트 버튼의 radius와 카드 radius가 같은 축인지 카드 간 여백이 본문 폭과 충돌하지 않는지 배지가 본문보다 먼저 눈에 들어오지 않는지 참조 경로 CTA 숏코드 Markdown 렌더링 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/02-components/controls-cards/","summary":"반복 UI는 모양보다 규칙이 중요하다. 같은 톤이 모든 상태에 이어져야 한다.","title":"컨트롤과 카드"},{"content":"이 문서는 themes/(0000-0000-0000-0001)/assets/css/core/design-tokens.css와 그 하위 모듈을 실제 렌더링 관점에서 읽는 검증 페이지다.\n아래 내용은 디자인을 설명하는 메모가 아니라, 프런트엔드에서 어떤 토큰이 어떤 결과를 내는지 확인하기 위한 실물 예시다.\ndesign probe 중앙 소스는 `themes/(0000-0000-0000-0001)/data/00-system/design/*.toml` 이며, `assets/css/00-settings/design-tokens.css` 는 변환기 역할을 한다. 중앙 제어 파일 `themes/(0000-0000-0000-0001)/data/00-system/design/` 이 데이터만 수정하면 전역 톤/간격/타이포/상태값이 함께 바뀌도록 설계되어 있다. 해석 기준 • 색상, 간격, 반경, 그림자, 상호작용 상태는 모두 토큰으로 관리한다. • 컴포넌트 CSS는 고정 수치보다 토큰을 우선 사용한다. • 레거시 디자인 경로는 사용하지 않는다. 빠른 시각 점검 아래 카드들은 theme-vars가 실제 화면에 어떻게 번역되는지 한 번에 보이도록 만든 샘플이다.\n모듈 인덱스 아래 접힘 블록은 각 파일이 어떤 책임을 갖는지 빠르게 확인하기 위한 목록이다.\n모든 값은 코드가 아니라 중앙 토큰의 결과로 읽어야 한다.\n00-foundation.css · 레이아웃 기준 변수 값 역할 \u0026ndash;page-max-width 1120px 페이지 레이아웃 \u0026ndash;content-max-width 760px 본문/콘텐츠 \u0026ndash;nav-max-width 1120px 내비게이션 \u0026ndash;page-padding 24px 페이지 레이아웃 \u0026ndash;page-padding-mobile 16px 페이지 레이아웃 \u0026ndash;gap 24px gap \u0026ndash;gap-mobile 16px gap \u0026ndash;content-gap 24px 본문/콘텐츠 \u0026ndash;nav-width var(\u0026ndash;nav-max-width) 내비게이션 \u0026ndash;breakpoint-sm 340px breakpoint \u0026ndash;breakpoint-md 768px breakpoint \u0026ndash;breakpoint-lg 900px breakpoint \u0026ndash;breakpoint-xl 1120px breakpoint \u0026ndash;cover-responsive-breakpoint-md 768px cover \u0026ndash;cover-responsive-width-md 720px cover \u0026ndash;main-width var(\u0026ndash;content-max-width) main \u0026ndash;header-height 64px 헤더 \u0026ndash;footer-height 64px 푸터 \u0026ndash;space-2xs 4px space \u0026ndash;space-xs 6px space \u0026ndash;space-sm 8px space \u0026ndash;space-md 12px space \u0026ndash;space-lg 16px space \u0026ndash;space-xl 20px space \u0026ndash;space-2xl 24px space \u0026ndash;space-3xl 32px space 10-typography.css · 타이포그래피 20-shape.css · 반경과 컨트롤 변수 값 역할 \u0026ndash;radius-xs 4px 반경 \u0026ndash;radius-sm 8px 반경 \u0026ndash;radius-md 12px 반경 \u0026ndash;radius-lg 16px 반경 \u0026ndash;radius-xl 20px 반경 \u0026ndash;radius-full 9999px 반경 \u0026ndash;radius var(\u0026ndash;radius-md) 반경 \u0026ndash;border-width-thin 1px 보더 \u0026ndash;border-width-strong 2px 보더 \u0026ndash;control-size-sm 32px 컨트롤 \u0026ndash;control-size-md 40px 컨트롤 \u0026ndash;control-size-lg 44px 컨트롤 \u0026ndash;control-padding-x 14px 컨트롤 \u0026ndash;control-padding-y 10px 컨트롤 \u0026ndash;control-icon-size 18px 컨트롤 \u0026ndash;control-gap 10px 컨트롤 \u0026ndash;transition-fast 120ms ease transition \u0026ndash;transition-base 200ms ease transition \u0026ndash;transition-slow 300ms ease transition \u0026ndash;interactive-transition transform 0.1s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease interactive \u0026ndash;focus-outline-width 2px focus \u0026ndash;focus-outline-offset 2px focus \u0026ndash;control-press-scale 0.98 컨트롤 \u0026ndash;viewport-full-height 100vh viewport \u0026ndash;page-min-height calc(var(\u0026ndash;viewport-full-height) - var(\u0026ndash;header-height) - var(\u0026ndash;footer-height)) 페이지 레이아웃 \u0026ndash;profile-page-min-height calc(var(\u0026ndash;viewport-full-height) - var(\u0026ndash;header-height) - var(\u0026ndash;footer-height) - (var(\u0026ndash;gap) * 2)) profile \u0026ndash;autofill-shadow-spread 50px autofill \u0026ndash;shadow-sm 0 1px 2px rgba(72, 32, 19, 0.08) 그림자 \u0026ndash;shadow-md 0 10px 28px rgba(72, 32, 19, 0.10) 그림자 \u0026ndash;shadow-lg 0 18px 50px rgba(72, 32, 19, 0.14) 그림자 \u0026ndash;z-index-floating 99 z \u0026ndash;z-index-overlay 120 z 30-components.css · 컴포넌트 토큰 40-colors-light.css · 라이트 팔레트 brand 변수 값 \u0026ndash;color-brand-primary rgb(184, 58, 32) \u0026ndash;color-brand-primary-hover rgb(156, 47, 27) \u0026ndash;color-brand-primary-active rgb(129, 38, 22) \u0026ndash;color-brand-primary-muted rgba(184, 58, 32, 0.16) \u0026ndash;color-brand-primary-contrast rgb(255, 255, 255) \u0026ndash;color-brand-secondary rgb(214, 94, 29) \u0026ndash;color-brand-secondary-hover rgb(188, 77, 22) \u0026ndash;color-brand-secondary-active rgb(162, 63, 17) \u0026ndash;color-brand-secondary-muted rgba(214, 94, 29, 0.16) \u0026ndash;color-brand-secondary-contrast rgb(255, 255, 255) \u0026ndash;color-brand-primary rgb(255, 176, 138) \u0026ndash;color-brand-primary-hover rgb(255, 156, 112) \u0026ndash;color-brand-primary-active rgb(255, 138, 88) \u0026ndash;color-brand-primary-muted rgba(255, 176, 138, 0.18) \u0026ndash;color-brand-primary-contrast rgb(22, 16, 14) \u0026ndash;color-brand-secondary rgb(255, 198, 150) \u0026ndash;color-brand-secondary-hover rgb(255, 176, 120) \u0026ndash;color-brand-secondary-active rgb(255, 155, 92) \u0026ndash;color-brand-secondary-muted rgba(255, 198, 150, 0.18) \u0026ndash;color-brand-secondary-contrast rgb(22, 16, 14) neutral 변수 값 \u0026ndash;color-neutral-page-background rgb(255, 250, 246) \u0026ndash;color-neutral-surface rgb(255, 255, 255) \u0026ndash;color-neutral-surface-quiet rgb(251, 244, 239) \u0026ndash;color-neutral-surface-strong rgb(240, 231, 224) \u0026ndash;color-neutral-surface-elevated rgb(255, 252, 249) \u0026ndash;color-neutral-text rgb(37, 29, 24) \u0026ndash;color-neutral-text-muted rgb(111, 95, 86) \u0026ndash;color-neutral-text-subtle rgb(170, 154, 144) \u0026ndash;color-neutral-border rgb(228, 216, 208) \u0026ndash;color-neutral-border-strong rgb(208, 194, 185) \u0026ndash;color-neutral-code-bg rgb(248, 240, 235) \u0026ndash;color-neutral-code-block-bg rgb(39, 24, 19) \u0026ndash;color-neutral-code-block-fg rgb(246, 231, 224) \u0026ndash;color-neutral-code-inline-bg rgba(124, 53, 29, 0.08) \u0026ndash;color-neutral-code-inline-fg rgb(37, 29, 24) \u0026ndash;color-neutral-scrollbar-thumb rgb(127, 105, 95) \u0026ndash;color-neutral-scrollbar-thumb-hover rgb(162, 140, 128) \u0026ndash;color-neutral-scrollbar-thumb-border rgb(255, 250, 246) \u0026ndash;color-neutral-scrollbar-thumb-border-alt rgb(251, 244, 239) \u0026ndash;color-neutral-scrollbar-thumb-border-gist rgb(255, 250, 246) \u0026ndash;color-neutral-scrollbar-thumb-alt rgb(127, 105, 95) \u0026ndash;color-neutral-scrollbar-thumb-alt-hover rgb(162, 140, 128) \u0026ndash;color-neutral-scrollbar-thumb-gist rgb(177, 156, 145) \u0026ndash;color-neutral-scrollbar-thumb-gist-hover rgb(120, 99, 88) \u0026ndash;color-neutral-page-background rgb(22, 16, 14) \u0026ndash;color-neutral-surface rgb(31, 24, 21) \u0026ndash;color-neutral-surface-quiet rgb(40, 31, 27) \u0026ndash;color-neutral-surface-strong rgb(52, 41, 36) \u0026ndash;color-neutral-surface-elevated rgb(35, 27, 24) \u0026ndash;color-neutral-text rgb(245, 236, 230) \u0026ndash;color-neutral-text-muted rgb(201, 184, 173) \u0026ndash;color-neutral-text-subtle rgb(136, 120, 111) \u0026ndash;color-neutral-border rgb(69, 56, 50) \u0026ndash;color-neutral-border-strong rgb(92, 75, 66) \u0026ndash;color-neutral-code-bg rgb(40, 31, 27) \u0026ndash;color-neutral-code-block-bg rgb(24, 18, 16) \u0026ndash;color-neutral-code-block-fg rgb(246, 231, 224) \u0026ndash;color-neutral-code-inline-bg rgba(255, 176, 138, 0.08) \u0026ndash;color-neutral-code-inline-fg rgb(245, 236, 230) \u0026ndash;color-neutral-scrollbar-thumb rgb(122, 103, 94) \u0026ndash;color-neutral-scrollbar-thumb-hover rgb(154, 134, 124) \u0026ndash;color-neutral-scrollbar-thumb-border rgb(22, 16, 14) \u0026ndash;color-neutral-scrollbar-thumb-border-alt rgb(31, 24, 21) \u0026ndash;color-neutral-scrollbar-thumb-border-gist rgb(255, 250, 246) \u0026ndash;color-neutral-scrollbar-thumb-alt rgb(122, 103, 94) \u0026ndash;color-neutral-scrollbar-thumb-alt-hover rgb(154, 134, 124) \u0026ndash;color-neutral-scrollbar-thumb-gist rgb(173, 154, 144) \u0026ndash;color-neutral-scrollbar-thumb-gist-hover rgb(132, 112, 102) semantic 변수 값 \u0026ndash;color-semantic-success rgb(22, 128, 74) \u0026ndash;color-semantic-warning rgb(205, 122, 22) \u0026ndash;color-semantic-danger rgb(199, 57, 52) \u0026ndash;color-semantic-info rgb(184, 58, 32) \u0026ndash;color-semantic-selection-bg rgba(184, 58, 32, 0.18) \u0026ndash;color-semantic-selection-fg rgb(37, 29, 24) \u0026ndash;color-semantic-focus-ring rgba(184, 58, 32, 0.42) \u0026ndash;color-semantic-success rgb(94, 213, 128) \u0026ndash;color-semantic-warning rgb(255, 199, 98) \u0026ndash;color-semantic-danger rgb(255, 146, 136) \u0026ndash;color-semantic-info rgb(255, 176, 138) \u0026ndash;color-semantic-selection-bg rgba(255, 176, 138, 0.22) \u0026ndash;color-semantic-selection-fg rgb(22, 16, 14) \u0026ndash;color-semantic-focus-ring rgba(255, 176, 138, 0.48) 50-colors-dark.css · 다크 팔레트 brand 변수 값 \u0026ndash;color-brand-primary rgb(255, 176, 138) \u0026ndash;color-brand-primary-hover rgb(255, 156, 112) \u0026ndash;color-brand-primary-active rgb(255, 138, 88) \u0026ndash;color-brand-primary-muted rgba(255, 176, 138, 0.18) \u0026ndash;color-brand-primary-contrast rgb(22, 16, 14) \u0026ndash;color-brand-secondary rgb(255, 198, 150) \u0026ndash;color-brand-secondary-hover rgb(255, 176, 120) \u0026ndash;color-brand-secondary-active rgb(255, 155, 92) \u0026ndash;color-brand-secondary-muted rgba(255, 198, 150, 0.18) \u0026ndash;color-brand-secondary-contrast rgb(22, 16, 14) neutral 변수 값 \u0026ndash;color-neutral-page-background rgb(22, 16, 14) \u0026ndash;color-neutral-surface rgb(31, 24, 21) \u0026ndash;color-neutral-surface-quiet rgb(40, 31, 27) \u0026ndash;color-neutral-surface-strong rgb(52, 41, 36) \u0026ndash;color-neutral-surface-elevated rgb(35, 27, 24) \u0026ndash;color-neutral-text rgb(245, 236, 230) \u0026ndash;color-neutral-text-muted rgb(201, 184, 173) \u0026ndash;color-neutral-text-subtle rgb(136, 120, 111) \u0026ndash;color-neutral-border rgb(69, 56, 50) \u0026ndash;color-neutral-border-strong rgb(92, 75, 66) \u0026ndash;color-neutral-code-bg rgb(40, 31, 27) \u0026ndash;color-neutral-code-block-bg rgb(24, 18, 16) \u0026ndash;color-neutral-code-block-fg rgb(246, 231, 224) \u0026ndash;color-neutral-code-inline-bg rgba(255, 176, 138, 0.08) \u0026ndash;color-neutral-code-inline-fg rgb(245, 236, 230) \u0026ndash;color-neutral-scrollbar-thumb rgb(122, 103, 94) \u0026ndash;color-neutral-scrollbar-thumb-hover rgb(154, 134, 124) \u0026ndash;color-neutral-scrollbar-thumb-border rgb(22, 16, 14) \u0026ndash;color-neutral-scrollbar-thumb-border-alt rgb(31, 24, 21) \u0026ndash;color-neutral-scrollbar-thumb-border-gist rgb(255, 250, 246) \u0026ndash;color-neutral-scrollbar-thumb-alt rgb(122, 103, 94) \u0026ndash;color-neutral-scrollbar-thumb-alt-hover rgb(154, 134, 124) \u0026ndash;color-neutral-scrollbar-thumb-gist rgb(173, 154, 144) \u0026ndash;color-neutral-scrollbar-thumb-gist-hover rgb(132, 112, 102) semantic 변수 값 \u0026ndash;color-semantic-success rgb(94, 213, 128) \u0026ndash;color-semantic-warning rgb(255, 199, 98) \u0026ndash;color-semantic-danger rgb(255, 146, 136) \u0026ndash;color-semantic-info rgb(255, 176, 138) \u0026ndash;color-semantic-selection-bg rgba(255, 176, 138, 0.22) \u0026ndash;color-semantic-selection-fg rgb(22, 16, 14) \u0026ndash;color-semantic-focus-ring rgba(255, 176, 138, 0.48) 60-language.css · 언어별 타이포그래피 프로필 프로필 예시 언어 기본 폰트 단어 분리 줄바꿈 라틴/유럽권 en, fr, de, es, it, pt, nl, sv, no, da, fi, pl, cs, sk, hu, ro, tr, hr, sl, sq, af \u0026ndash;font-sans-latin-europe normal auto 한국어 ko \u0026ndash;font-sans-korean keep-all strict 일본어 ja \u0026ndash;font-sans-japanese keep-all strict 중국어 간체 zh-Hans / zh-CN / zh-SG \u0026ndash;font-sans-chinese-simplified keep-all strict 중국어 번체 zh-Hant / zh-TW / zh-HK / zh-MO \u0026ndash;font-sans-chinese-traditional keep-all strict 베트남어 vi \u0026ndash;font-sans-vietnamese normal auto 남아시아권 hi / bn / ta / te / ml / gu / kn / pa / ur \u0026ndash;font-sans-southasia normal auto RTL 문자권 ar / he / fa / ckb / ku \u0026ndash;font-sans-rtl normal auto 70-global.css · 전역 선택/아이콘/배경 변수 값 역할 실제로 확인해야 하는 것 html[lang] 값에 따라 폰트 스택이 실제로 바뀌는가 라이트와 다크 모두에서 브랜드 대비가 유지되는가 버튼, CTA, 카드, 입력 계열의 반경과 그림자가 같은 축을 따르는가 선택 영역과 SVG 아이콘의 기본 채움색이 전역 토큰을 읽는가 다음 단계 색상과 표면 간격과 레이아웃 언어와 서체 구성요소 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/01-foundation/design-tokens/","summary":"토큰의 중앙 원본이 어디인지, 각 파일이 무엇을 담당하는지 빠르게 읽을 수 있어야 한다.","title":"디자인 토큰 전체 보기"},{"content":"이번 업그레이드는 콘텐츠를 문서형 설명에서 실제 렌더링 검증 자산으로 전환한 작업이다.\n핵심 변화 토큰 문서가 설명용이 아니라 실제 화면 확인용으로 바뀌었다. CTA, figure, collapse, raw HTML, 방향성 shortcode를 각기 다른 페이지에서 검증할 수 있게 했다. 언어별 폴더 구조를 유지한 채 ko를 중심으로 완성도를 올렸다. 일반 포스트도 실제 독자가 읽는 형식으로 정리했다. 왜 중요한가 기능이 많아질수록 한 페이지에 모든 것을 우겨 넣는 방식은 오히려 검증을 어렵게 만든다.\n그래서 역할을 나누고, 각 페이지가 한 가지 축을 제대로 보여 주도록 재구성했다.\n변경 범위 홈/소개/연락/분류/태그 기초/구성요소/렌더링/구조/운영 공개 글 4개 page bundle 리소스 2개 update log / verification log 확인 포인트 모든 파일이 실제 배포 경로에서 열리는가 언어 폴더와 translationKey가 유지되는가 콘텐츠만 바뀌고 테마 코드에는 손대지 않았는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/05-operations/upgrade-summary/","summary":"긴 로그를 읽기 전에 바뀐 축을 먼저 잡아 주는 문서다.","title":"업그레이드 요약"},{"content":" 항목 기준 고정비 월 50% 변동비 월 30% 저축 월 20% 레이아웃 폭 점검 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/budget-guide/","summary":"숫자와 표가 본문 리듬을 바꾸지 않는지 보기 위한 보조 글이다.","title":"예산 관리 가이드"},{"content":"예산 관리는 복잡하게 보이지만, 결국은 들어오는 돈과 나가는 돈을 같은 기준으로 보는 일이다.\n항목 기준 메모 고정비 월 50% 집세, 구독, 통신비 변동비 월 30% 식비, 교통비, 생활비 저축/투자 월 20% 비상금과 장기 목표 검토 습관 주 1회만 다시 본다. 분류는 너무 세밀하게 나누지 않는다. 표가 길어지면 핵심만 먼저 읽는다. 레이아웃 폭 점검 마무리 표는 숫자를 보여 주는 도구고, 목록은 우선순위를 보여 주는 도구다.\n둘이 한 화면에 같이 있어도 읽는 흐름이 깨지지 않아야 한다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/06-public-posts/budget-guide/","summary":"숫자, 표, 링크, CTA가 한 글 안에서 같이 있어도 읽기가 유지되어야 한다.","title":"예산 관리 가이드"},{"content":"이 페이지는 shortcode가 서로 겹칠 때 어떻게 보이는지 확인한다.\nCTA + 본문 실제 조합 테스트 CTA 바로 아래에 본문이 붙어도 간격이 무너지지 않아야 한다. collapse 안의 figure 리소스 보기 raw HTML 섞기 rawhtml 테스트 이 블록은 shortcode로 감싸도 화면에서 같은 리듬을 유지해야 한다.\n방향성 + 언어 혼합 Latin text sits inside an LTR block. 1234 / URI / code / math / punctuation. עברית العربية עברית العربية. 표와 카드, 이미지 캡션이 함께 있어도 줄이 무너지지 않아야 한다. 확인 포인트 shortcode가 중첩될 때 margin collapse가 이상해지지 않는가 raw HTML이 markdown 영역을 밀어내지 않는가 collapse 내부의 figure와 CTA가 같은 리듬으로 유지되는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/03-rendering/shortcode-composition/","summary":"숏코드는 개별로만 정상이어서는 안 되고, 서로 겹칠 때도 안정적이어야 한다.","title":"숏코드 조합"},{"content":"이 페이지는 CTA 숏코드의 입력값 → 중앙 설정 → 렌더 결과를 확인한다.\n기본형 자세히 보기 14일 무료 체험 시작 색상과 표면 확인 렌더링 섹션으로 이동 서브텍스트와 노트 상담 신청 평일 기준 1영업일 내 회신\n체크리스트 다운로드 유틸리티와 외부 링크 복사 외부 문서 열기 확인 포인트 ref가 현재 언어 경로로 자연스럽게 이어지는가 target=\u0026quot;_blank\u0026quot;일 때 보안 속성이 같이 붙는가 빈 값이나 unknown kind가 들어와도 렌더링이 깨지지 않는가 중앙 통제 참고 원본 설정: config/_default/params.toml 디자인 토큰: themes/(0000-0000-0000-0001)/assets/css/core/theme-vars/ ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/02-components/cta-shortcode/","summary":"숏코드는 입력값을 받지만, 원본 정책은 중앙 params와 theme-vars에 있어야 한다.","title":"CTA 숏코드"},{"content":"이 페이지는 색상 토큰이 실제 표면 위에서 어떻게 보이는지 확인한다.\n브랜드와 중립 시맨틱 상태 success는 확인과 완료에 사용한다. warning은 주의가 필요한 정보에 사용한다. danger는 실제로 위험하거나 실패한 상태에만 사용한다. info는 정보형 강조를 담당한다. 색상은 장식이 아니라 의미다. 같은 빨강이라도 오류, 경고, 브랜드가 섞이면 읽는 속도가 떨어진다.\n다크 모드 확인 확인 포인트 카드 배경과 페이지 배경이 과하게 붙지 않는가 링크 hover 상태가 본문 대비에서 충분히 구분되는가 배지와 버튼의 대비가 다크 모드에서도 유지되는가 토큰 전체 보기 · 레이아웃 간격\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/01-foundation/color-surface/","summary":"같은 색이 배경, 링크, 테두리, 강조에서 서로 충돌하지 않아야 한다.","title":"색상과 표면"},{"content":"이 문서는 다음 유지보수자를 위한 인수인계 기록이다.\n이번 패스의 핵심은 문자열, 메뉴, 언어 URL 정책을 모두 중앙화해서, 나중에 언어가 더 늘어나도 같은 규칙으로 확장할 수 있게 만든 것이다.\n이번 패스의 핵심 수정 1) 메뉴의 단일 원본을 config/_default/hugo.toml 로 이동 파일:\nconfig/_default/hugo.toml 변경 내용:\n[[menus.main]] 을 한 곳에만 두어 전체 언어가 같은 메뉴 정의를 공유하도록 정리했다. identifier 는 번역 키와 동일하게 유지했다. pageRef 기반으로 현재 언어의 대응 페이지를 자동 연결하도록 정리했다. 중요한 이유:\n메뉴 문구를 언어 파일마다 복제하지 않아도 된다. 새 언어를 추가해도 메뉴 구조는 한 번만 수정하면 된다. 2) 언어 메타 파일은 최소 정보만 유지 파일:\nconfig/_default/languages/languages.ko.toml config/_default/languages/languages.en.toml config/_default/languages/languages.ja.toml config/_default/languages/languages.zh.toml 변경 내용:\n언어별 메타, 로케일, 콘텐츠 경로, 정렬 순서만 남겼다. 메뉴 블록은 제거하고 hugo.toml 의 중앙 메뉴 정의만 사용한다. 기본 언어가 /ko/ 같은 서브디렉터리로 노출되는지는 언어 파일이 아니라 hugo.toml 이 제어한다. 중요한 이유:\n언어 설정과 메뉴 설정의 책임이 분리된다. 언어 파일은 콘텐츠 경로와 표시 메타만 책임지게 된다. 3) 기본 언어도 하위 경로를 쓰도록 URL 정책을 고정 파일:\nconfig/_default/hugo.toml 변경 내용:\ndefaultContentLanguageInSubdir = true 로 바꿔서 기본 언어도 /ko/ 같은 언어 접두사를 갖도록 정리했다. disableDefaultLanguageRedirect = false 를 명시해 루트(/) 접근 시 기본 언어 서브디렉터리로 안내하는 동작을 유지했다. content/ko, content/en, content/jp, content/cn 구조는 그대로 두고, URL 접두사만 전역 설정으로 통제하게 했다. 중요한 이유:\ncontent/ko 로 분리해 두었더라도, 기본 언어는 설정값이 false 면 루트(/)로 노출되는 것이 Hugo 기본 동작이다. 폴더 구조가 잘못된 것이 아니라 URL 정책이 루트 우선으로 되어 있었던 것이다. 이후 사이트가 커져도 언어별 URL 규칙이 흔들리지 않는다. 4) 로케일별 퍼머링크는 front matter 의 slug / url 로 조절 파일:\n각 언어의 콘텐츠 파일들 변경 내용:\n번역된 페이지는 동일한 translationKey 로 묶고, 필요할 때만 slug 나 url 로 언어별 경로를 분리할 수 있다. 섹션 페이지는 url 중심으로 관리하는 편이 안전하다. 일반 페이지는 slug 로 로케일별 URL 을 개별화할 수 있다. 중요한 이유:\n언어별 문서 제목이 같아도 URL 은 독립적으로 제어할 수 있다. 나중에 콘텐츠가 늘어도 하드코딩 없이 경로 정책을 유지할 수 있다. 5) 번역 문자열의 실제 원본을 theme i18n 으로 통합 파일:\nthemes/(0000-0000-0000-0001)/i18n/en.yaml themes/(0000-0000-0000-0001)/i18n/ko.yaml themes/(0000-0000-0000-0001)/i18n/jp.yaml themes/(0000-0000-0000-0001)/i18n/cn.yaml 변경 내용:\n프로젝트 루트 i18n/ 은 비워 둔 상태로 정리했다. 텍스트와 메뉴 라벨은 테마 i18n 이 1순위가 되도록 맞췄다. home, blog, categories, tags, about, contact 같은 기본 내비게이션 문자열은 언어별로 교체 가능하게 유지한다. 중요한 이유:\n페이지 본문과 UI 문구의 책임이 분리된다. 번역은 콘텐츠, 공통 라벨은 테마로 모여서 유지보수가 쉬워진다. 이번 패스에서 확인한 트리 구조 content/ └─ ko/ ├─ _index.md ├─ about/_index.md ├─ blog/ │ ├─ _index.md │ └─ theme-upgrade-lab/ │ ├─ _index.md │ ├─ 00-full-coverage.md │ ├─ 01-foundation/ │ │ ├─ _index.md │ │ ├─ design-tokens.md │ │ ├─ color-surface.md │ │ ├─ layout-spacing.md │ │ └─ typography-language.md │ ├─ 02-components/ │ │ ├─ _index.md │ │ ├─ controls-cards.md │ │ ├─ cta-shortcode.md │ │ └─ media-figure.md │ ├─ 03-rendering/ │ │ ├─ _index.md │ │ ├─ markdown-rendering.md │ │ ├─ shortcode-composition.md │ │ └─ edge-cases.md │ ├─ 04-architecture/ │ │ ├─ _index.md │ │ ├─ taxonomy-navigation.md │ │ └─ bundles-resources/ │ │ ├─ index.md │ │ ├─ cover.svg │ │ └─ diagram.svg │ ├─ 05-operations/ │ │ ├─ _index.md │ │ ├─ update-log.md │ │ ├─ upgrade-summary.md │ │ └─ verification-log.md │ └─ 06-public-posts/ │ ├─ _index.md │ ├─ 01-productivity-routine.md │ ├─ 02-budget-guide.md │ ├─ 03-weekend-cleanup.md │ └─ 04-travel-checklist.md ├─ categories/_index.md ├─ contact/_index.md └─ tags/_index.md 주의사항 디자인은 페이지 내부에서 고정 수치를 늘리지 말고, design-tokens.css 계층을 먼저 바꿔야 한다. config/_default/params.toml 은 중앙 정책의 원본이지, 개별 페이지 전용 색상표가 아니다. 언어별 콘텐츠는 같은 트리 구조를 유지해야 번역/비교/검증이 쉬워진다. 배포 전 마지막 확인 홈, 소개, 연락, 블로그 목록이 모두 열리는가 토큰 페이지의 색상/간격/폰트/반경이 실제 화면에서 보이는가 CTA, figure, collapse, raw HTML, ltr/rtl 이 모두 정상 동작하는가 page bundle 리소스가 상대 경로로 깨지지 않는가 추가 반영: 공지/안내/배너 중앙 제어 체계 이번 패스에서는 중요 공지, 안내 배너, 모달형 공지를 한 번에 제어할 수 있도록 구조를 추가했다.\n핵심 원칙 문구와 노출 정책은 config/_default/params.toml 에서만 수정한다. 렌더링은 themes/(0000-0000-0000-0001)/layouts/partials/theme/announcement.html 이 담당한다. 디자인과 간격, 색상, 레이어는 theme-vars 계층만 수정해서 바뀌도록 만들었다. 언어별 문구는 themes/(0000-0000-0000-0001)/i18n/*.yaml 의 공통 키를 사용한다. 특정 섹션, taxonomy, term, page kind, layout, path, front matter params 를 조건으로 걸 수 있다. 닫기 상태는 localStorage 기반으로 저장되어, 사용자가 이미 닫은 공지는 다시 노출하지 않을 수 있다. 추가된 파일 트리 themes/(0000-0000-0000-0001)/ ├─ assets/css/ │ ├─ common/ │ │ └─ announcement.css │ └─ core/theme-vars/ │ └─ 80-announcement.css └─ layouts/partials/theme/ ├─ announcement.html └─ settings.html config/_default/params.toml 에서 통제되는 항목 enabled : 공지 체계 전체 on/off strategy : 여러 공지가 동시에 맞을 때 stack 또는 first defaultMode : banner, sticky, modal, inline defaultVariant : info, success, warning, danger, neutral placement : after-header, before-main, inline, floating items : 공지 항목 목록 각 항목의 scope : 언어 / kinds / sections / taxonomies / terms / paths / pathPrefixes / params 운영 시 주의사항 전체 공지를 끄고 싶으면 enabled = false 만 바꾸면 된다. 개별 공지는 항목별 enabled = false 로 제어한다. section 이나 taxonomy 기반으로 타게팅할 때는 scope 만 바꿔도 된다. modal 모드는 접근성상 문구를 짧고 명확하게 유지하는 편이 좋다. CTA 링크가 외부로 나갈 경우 target 과 rel 을 함께 검토하는 편이 안전하다. 이번 패스에서의 설계 의미 공지 기능이 헤더/푸터/특정 페이지에 흩어지지 않고 한 곳에 모였다. 디자인 수정은 theme-vars 만 바꾸면 되고, 로직 수정은 partial 만 바꾸면 된다. 언어가 추가되어도 items.\u0026lt;id\u0026gt;.content + 언어별 오버라이드 패턴을 그대로 확장할 수 있다. 하드코딩이 아닌 중앙 정책 방식으로, 이후 유지보수와 배포가 쉬워졌다. 公告结构补充说明 这次升级不再把公告当成一个 items.\u0026lt;id\u0026gt;.content 的单块对象来管理。\n现在把基础文件和语言覆盖文件拆开，结构和文案可以分别维护。\n当前目录树 themes/ └── (0000-0000-0000-0001)/ └── data/ └── _index.toml └── announcement/ ├── ko.toml ├── en.toml ├── ja.toml └── zh.toml 关闭方式 session：当前会话内不再显示 persistent：写入 localStorage，直到清除才恢复 hours：在指定小时数内不再显示 需要检查的页面 公告展示页 更新日志 验证日志 展示页使用 front matter 的 announcementProfile = \u0026quot;showcase\u0026quot;。 这样就能在不硬编码具体路径的前提下复用模态框和内嵌卡片示例。\n追加阶段：全局启用与 scope 规范化 这次修改的目标是让公告系统更容易检查，因此先把 所有横幅都改为全局启用，并统一每个 item 的结构。\n变更内容 在 themes/(0000-0000-0000-0001)/data/40-communication/announcement/_index.toml 中加入 scopeDefaults，让每个 item 采用相同结构。 languages / kinds / sections / pathPrefixes / taxonomies / terms 统一把 [\u0026quot;*\u0026quot;] 当作通配符。 storageKey 改为可选，留空时自动回退为生成键。 priority 作为排序提示使用，数值越大越先显示。 dismissMode 表示 close 按钮的保存策略，默认值为 session。 snoozeHours 只用于按时间隐藏的动作。 关闭按钮检查结果 点击事件改为在 capture 阶段监听，减少被上层事件拦截的机会。 close 的保存策略拆成 session / persistent / hours 三种。 即使存储失败，界面上的隐藏动作仍然会继续执行。 布局检查结果 CTA 和关闭按钮在桌面端保持内容宽度，在移动端才扩展为 100%。 footer 与 dismiss 区域的宽度、对齐和间距都交给 theme-vars token 管理。 按钮位置不再靠页面硬编码，而是由 theme-vars/80-announcement.css 统一控制。 需要确认的文件树 config/_default/params/_index.toml themes/(0000-0000-0000-0001)/ ├─ data/ │ ├─ _index.toml │ └─ announcement/ │ ├─ ko.toml │ ├─ en.toml │ ├─ ja.toml │ └─ zh.toml ├─ layouts/partials/theme/ │ ├─ announcement-config.html │ └─ announcement.html ├─ assets/css/common/ │ └─ announcement.css ├─ assets/css/core/theme-vars/ │ └─ 80-announcement.css └─ assets/js/04-composition-layer/cross-cutting-composition/ └─ announcement.js 运行备注 要让所有 banner 全局显示，请保留 enabled = true，并让每个 item 的 scope 保持宽松。 只有在确实需要限定到特定 section / page 时，才缩小 scope。 storageKey 只有在需要长期保持隐藏状态时才建议显式指定。 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/05-operations/update-log/","summary":"배포 관점의 변경 로그와 트리 구조, 운영 메모를 함께 정리한 문서.","title":"Update Log"},{"content":" 책상 위 치우기 메일함 비우기 오래된 탭 닫기 정리는 공간을 비우는 일이 아니라, 다음 행동을 쉽게 만드는 일이다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/weekend-cleanup/","summary":"목록 렌더링의 보조 버전이다.","title":"주말 정리 루틴"},{"content":"주말 정리는 거창할 필요가 없다.\n작은 항목을 빠르게 끝내는 것이 핵심이다.\n책상 위 치우기 메일함 비우기 오래된 탭 닫기 다음 주 일정 확인 정리는 공간을 비우는 일이 아니라, 다음 행동을 쉽게 만드는 일이다.\n짧은 팁 한 번에 한 구역만 본다. 도구를 늘리지 않는다. 끝낸 뒤에는 바로 다음 행동을 적는다. 목록 렌더링 다시 보기 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/06-public-posts/weekend-cleanup/","summary":"실제 생활 글은 가볍지만, 렌더링은 가볍지 않다.","title":"주말 정리 루틴"},{"content":"탐색 구조는 단순히 메뉴를 나열하는 것이 아니라, 사용자가 어떤 기준으로 움직이는지 설계하는 일이다.\n정리 방식 카테고리는 정보의 큰 묶음으로 사용한다. 태그는 같은 주제를 가볍게 교차 연결할 때 사용한다. 메뉴는 가장 자주 쓰는 동선을 우선으로 둔다. 확인 표 항목 역할 기준 홈 첫 진입점 언어별 기본 페이지 블로그 글 목록 최신 콘텐츠 접근 카테고리 큰 분류 주제별 탐색 태그 세부 연결 느슨한 연관성 소개 신뢰 구축 사이트 목적 설명 연락처 행동 전환 문의와 연결 좋은 구조의 기준 같은 정보는 같은 이름으로 반복된다. 언어가 바뀌어도 정보 구조는 유지된다. 사용자는 메뉴만 보고도 다음 행동을 예측할 수 있다. page bundle 리소스 · 업데이트 로그\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/04-architecture/taxonomy-navigation/","summary":"정보 구조와 메뉴 설계를 함께 보는 페이지.","title":"분류, 태그, 탐색 구조 점검"},{"content":"이 페이지는 깨지기 쉬운 상황을 일부러 넣어 본다.\n긴 제목과 긴 문장 아주아주아주 긴 제목이 들어와도 헤더 영역이 터지지 않아야 한다.\n길이가 긴 링크 https://example.com/some/really/long/path/that/should/not/break/the/layout 도 본문 폭 안에서 읽히는지 확인한다.\n빈 값과 폴백 자세히 보기 빈 값이 들어와도 렌더링이 끊기지 않아야 한다.\n잘못된 경로 이미지 경로가 틀리면 대체 텍스트가 의미 있게 남는가 내부 링크가 없는 페이지로 연결되면 최소한의 안내가 유지되는가 혼합 언어 한국어 English 日本語 简体中文 العربية עברית가 한 문단 안에 들어와도 기호와 줄바꿈이 너무 흔들리지 않아야 한다.\n확인 포인트 표가 좁은 화면에서 넘치지 않는가 캡션이 길어도 이미지가 밀리지 않는가 RTL 문장이 본문과 충돌하지 않는가 폴백 경로가 조용하게 동작하는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/03-rendering/edge-cases/","summary":"잘 맞는 페이지보다, 예외 상황에서 덜 깨지는 페이지가 더 중요하다.","title":"엣지 케이스"},{"content":"이 페이지는 figure shortcode와 인라인 이미지를 함께 확인한다.\n로컬 리소스 섹션 커버page bundle 리소스로 넣은 커버 이미지다. 캡션이 본문 리듬을 깨지 않는지 본다.\n토큰 다이어그램중앙 토큰 → 컴포넌트 → 실제 화면으로 이어지는 구조를 보여 준다.\n인라인 이미지 아래 아이콘은 본문 안에서 줄 높이와 baseline이 유지되는지 확인한다. 문장 흐름이 끊기면 안 된다.\n링크형 figure 외부가 아닌 로컬 패턴static 자산을 사용해 배포 시에도 안전하게 렌더되는지 확인한다.\n확인 포인트 캡션이 너무 길어도 이미지와 분리되지 않는가 가운데 정렬과 링크형 figure가 함께 있어도 깨지지 않는가 로컬 정적 자산과 page bundle 자산이 함께 보여도 경로가 안정적인가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/02-components/media-figure/","summary":"미디어는 장식이 아니라 문맥이다. 크기와 캡션이 안정적으로 보여야 한다.","title":"미디어와 figure"},{"content":"이 페이지는 폭과 간격이 읽기 리듬을 어떻게 만드는지 확인한다.\n폭 비교 항목 값 확인 방식 page max 1120px 전체 페이지 외곽 폭 content max 760px 본문 가독 폭 nav max 1120px 내비게이션 정렬 폭 mobile padding 16px 작은 화면에서 숨막히지 않는지 그리드 예시 브레이크포인트 sm · 340px md · 768px lg · 900px xl · 1120px 확인 포인트 본문은 너무 넓지 않은가 모바일에서 가장자리 간격이 충분한가 카드 그리드가 끊기지 않고 다시 정렬되는가 토큰 전체 보기 · 타이포그래피\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/01-foundation/layout-spacing/","summary":"레이아웃 값은 페이지마다 다르게 보이기 쉬우므로, 기준 폭과 간격을 먼저 고정해야 한다.","title":"간격과 레이아웃"},{"content":"아래 순서로 확인하면 대부분의 렌더링 문제를 빨리 찾을 수 있다.\n1. 구조 확인 홈이 정상적으로 열리는가 소개/블로그/카테고리/태그/연락처가 서로 연결되는가 언어별 하위 경로가 유지되는가 2. 토큰 확인 색상, 배경, 테두리, 그림자가 theme-vars를 읽는가 폰트가 언어별로 바뀌는가 버튼과 CTA의 톤이 일관적인가 3. 문법 확인 헤딩, 표, 코드, 인용, 목록이 깨지지 않는가 collapse 내부에서 markdownify가 유지되는가 ltr/rtl 블록이 다른 요소를 밀어내지 않는가 4. 미디어 확인 figure 캡션이 길어도 화면이 무너지지 않는가 page bundle 리소스가 상대경로로 읽히는가 인라인 이미지가 baseline을 깨지 않는가 5. 배포 전 승인 기준 모든 링크가 실제 존재하는 경로로만 연결된다. 디자인 값은 콘텐츠가 아니라 중앙 토큰에서 관리된다. ko를 우선으로 검증해도 en/jp/cn 트리가 깨지지 않는다. 이 체크리스트는 기능 테스트가 아니라, “프런트엔드가 의도한 대로 읽히는가”를 보는 검증표다.\n8. 公告专项检查 base 文件与各语言覆盖文件是否分离 dismissMode = \u0026quot;session\u0026quot;、\u0026quot;persistent\u0026quot;、\u0026quot;hours\u0026quot; 是否按预期工作 带有 announcementProfile = \u0026quot;showcase\u0026quot; 的页面是否能同时看到模态和内嵌卡片 图片、CTA、secondary CTA、caption 是否随语言文件切换 enabled = false 的示例是否仍保留，便于随时启用 9. 发布前备注 设计仍然只由 theme-vars 控制 UI 字符串仍然只从 theme i18n 读取 公告的运行时数据仍然只放在 announcement data 文件里 这份日志应该优先指向正确的文件路径 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/05-operations/verification-log/","summary":"렌더링 검증은 한 번의 성공보다, 반복 가능한 확인 순서가 중요하다.","title":"검증 로그"},{"content":" 여권 / 신분증 충전기 예약 정보 날씨에 맞는 옷 패턴 예시짧은 본문 안에서도 이미지가 안정적으로 들어가는지 본다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/travel-checklist/","summary":"이미지와 텍스트가 함께 있어도 리듬이 유지되는지 확인하는 보조 글이다.","title":"여행 체크리스트"},{"content":"여행 준비는 빠뜨리기 쉬운 항목을 시각적으로 다시 확인하는 일이다.\n필수품 여권 / 신분증 충전기 현금과 카드 예약 정보 날씨에 맞는 옷 표로 보는 준비 상태 항목 상태 메모 숙소 완료 체크인 시간 확인 교통 완료 공항 이동 수단 확인 짐 진행 중 무게 다시 점검 일정 완료 첫날 동선 정리 배경 패턴 예시본문 사이에 이미지가 들어와도 리스트와 표의 리듬이 유지되는지 확인한다.\n여행 정보 열기 마무리 체크리스트는 많을수록 좋지 않다.\n정말 필요한 것만 남기고, 나머지는 분류해서 비워 둔다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/06-public-posts/travel-checklist/","summary":"길고 짧은 항목이 섞인 글이 실제로 어떻게 읽히는지 확인한다.","title":"여행 체크리스트"},{"content":"이 페이지는 page bundle 안의 자산이 실제로 어떻게 보이는지 확인한다.\n번들 구성 index.md : 설명 본문 cover.svg : 섹션 커버 이미지 diagram.svg : 토큰 흐름 다이어그램 커버 page bundle cover같은 폴더에 있는 이미지를 페이지와 함께 묶어 배포한다.\n다이어그램 token diagram토큰과 컴포넌트, 최종 화면의 관계를 시각화한다.\n확인 포인트 상대경로 리소스가 URL 배포 후에도 유지되는가 이미지와 본문이 같은 버전으로 관리되는가 섹션 리소스가 외부 코드 의존 없이 읽히는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/04-architecture/bundles-resources/","summary":"리소스는 별도 코드가 아니라 페이지와 같은 수명주기로 관리되어야 한다.","title":"page bundle 리소스"},{"content":"이 페이지는 언어별 폰트 스택과 읽기 감각을 한 번에 비교한다.\n한국어 기준 한국어 본문은 keep-all과 strict 줄바꿈을 사용해 조사와 어미가 자연스럽게 붙도록 유지한다.\n제목은 너무 넓은 자간보다 응집된 리듬이 먼저 읽히도록 만든다.\n샘플 문장 화면은 결국 글을 읽는 도구다.\n글이 안정적으로 보이면 디자인도 안정적으로 읽힌다.\n언어 비교 English: line break가 느슨해도 단어 경계가 읽기 쉽다. 日本語: CJK 조판 규칙을 우선하고 행간을 더 넉넉하게 둔다. 简体中文: 간체 전용 스택이 우선되어야 한다. 방향성 테스트 여기에는 오른쪽에서 왼쪽으로 읽히는 문장을 넣는다. العربية العربية العربية. 인라인 이미지 이 문장은 아이콘이 본문 흐름 안에서 끼어드는지 확인한다. 아이콘 크기와 baseline이 무너져서는 안 된다.\n확인 포인트 제목과 본문이 같은 언어 스택을 읽는가 코드 블록은 모노스페이스를 유지하는가 한국어, 영어, 일본어, 중국어가 같은 카드 안에서 충돌하지 않는가 공개 글 보기 · 전체 토큰 보기\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/01-foundation/typography-language/","summary":"같은 내용이라도 언어가 바뀌면 폭, 자간, 줄바꿈 규칙이 달라져야 한다.","title":"언어와 서체"},{"content":"这个页面用于在真实前端里检查公告系统的渲染效果。\n检查重点：\n全站横幅是否符合整体视觉语气 分区 sticky 提示是否会干扰浏览 模态公告在 dismissMode = \u0026quot;persistent\u0026quot; 关闭后是否不会再次出现 内嵌卡片是否能自然融入正文阅读流 图片、CTA、secondary CTA、caption 是否会随语言切换 关闭策略可以是会话级、永久隐藏或按小时隐藏。 本页中的模态和内嵌示例只依赖 announcementProfile = \u0026quot;showcase\u0026quot; 这个 front matter 值。\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/05-operations/announcement-showcase/","summary":"一个页面同时演示模态框、内嵌卡片、横幅和关闭策略。","title":"公告展示页"},{"content":"이 글은 검증 랩의 입구이자 요약본이다.\n한 페이지 안에서 Markdown, CTA, figure, collapse, raw HTML, 언어 방향성, 토큰 색감, 카드 분위기를 함께 본다.\n바로 확인할 항목 토큰 전체 보기 색상과 표면 언어와 서체 CTA 숏코드 Markdown 렌더링 page bundle 리소스 검증 로그 예시 콘텐츠 굵게, 기울임, 인라인 코드, 취소선, 내부 링크\n번호 목록 그 안의 inline code 하위 목록 또 다른 하위 목록 다시 본문 일반 목록 또 다른 항목 마지막 항목 이 문장은 인용문이다. 인용문은 문맥을 낮추지만, 전체 톤은 유지해야 한다.\n유형 예시 확인 색상 var(--accent) 강조색이 CTA와 링크에 일관되게 연결되는가 표면 var(--surface) 카드와 배경의 대비가 충분한가 모서리 var(--radius-lg) 카드, 버튼, figure의 반경이 같은 축인가 코드와 캡션 design-tokens.css └─ colors └─ typography └─ shape └─ components 토큰 흐름중앙 토큰이 컴포넌트와 페이지에 내려오는 구조를 한 번 더 확인한다.\n숏코드 조합 토큰 페이지 열기 접어서 보기 안쪽에서도 Markdown이 계속 살아 있어야 한다.\n목록 문장 code 링크 방향성 확인 العربية العربية العربية. 글의 방향이 바뀌어도 페이지 폭과 카드 간격은 동일한 토큰을 읽어야 한다. 마무리 이 페이지에서 모두 확인된다면, 나머지 페이지는 역할만 나눠 가진다.\n이제 세부 페이지에서 각 축을 더 좁게 보게 된다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/zh/blog/theme-upgrade-lab/full-coverage/","summary":"이 페이지 하나만 열어도 무엇이 렌더링되는지 거의 전부 확인할 수 있어야 한다.","title":"전체 커버리지"}]