[{"content":"이 글은 공개 글 버전보다 더 짧게, 검증용 리딩 흐름만 남긴다.\n핵심 작업 한 개를 먼저 고른다. 읽는 흐름이 CTA에서 끊기지 않는지 본다. 카드와 본문 간격이 과하게 넓지 않은지 확인한다. 검증 로그 보기 ","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/blog/theme-upgrade-lab/productivity-routine/","summary":"공개 글처럼 읽히는지 먼저 확인하는 보조 버전이다.","title":"아침 생산성 루틴"},{"content":"아침 루틴은 길어질수록 실패한다.\n그래서 이 글은 짧고 반복 가능한 흐름을 기준으로 만든다.\n오늘의 루틴 알림 확인은 한 번만 한다. 가장 중요한 작업 한 개만 고른다. 초반 30분 동안은 입력보다 출력에 집중한다. 체크리스트 물 한 잔 캘린더 확인 오늘의 핵심 작업 1개 첫 CTA 또는 다음 행동 1개 루틴 점검하기 왜 이 글이 필요한가 실제 글은 문서보다 훨씬 자연스럽게 보여야 한다.\n제목, 본문, 목록, CTA가 한 화면에서 어색하지 않아야 하고, 이미지가 들어가도 리듬이 흔들리지 않아야 한다.\n","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/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-4.pages.dev/ja/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-4.pages.dev/ja/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-4.pages.dev/ja/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-4.pages.dev/ja/blog/theme-upgrade-lab/05-operations/upgrade-summary/","summary":"긴 로그를 읽기 전에 바뀐 축을 먼저 잡아 주는 문서다.","title":"업그레이드 요약"},{"content":" 항목 기준 고정비 월 50% 변동비 월 30% 저축 월 20% 레이아웃 폭 점검 ","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/blog/theme-upgrade-lab/budget-guide/","summary":"숫자와 표가 본문 리듬을 바꾸지 않는지 보기 위한 보조 글이다.","title":"예산 관리 가이드"},{"content":"예산 관리는 복잡하게 보이지만, 결국은 들어오는 돈과 나가는 돈을 같은 기준으로 보는 일이다.\n항목 기준 메모 고정비 월 50% 집세, 구독, 통신비 변동비 월 30% 식비, 교통비, 생활비 저축/투자 월 20% 비상금과 장기 목표 검토 습관 주 1회만 다시 본다. 분류는 너무 세밀하게 나누지 않는다. 표가 길어지면 핵심만 먼저 읽는다. 레이아웃 폭 점검 마무리 표는 숫자를 보여 주는 도구고, 목록은 우선순위를 보여 주는 도구다.\n둘이 한 화면에 같이 있어도 읽는 흐름이 깨지지 않아야 한다.\n","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/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-4.pages.dev/ja/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-4.pages.dev/ja/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-4.pages.dev/ja/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 리소스가 상대 경로로 깨지지 않는가 告知構造の追加メモ 今回のパスでは、告知を items.\u0026lt;id\u0026gt;.content / data/40-communication/announcement/ja.toml / zh.toml のひと塊で管理する方式から分離した。\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追加パス: グローバル有効化とスコープの正規化 今回の修正では、通知システムを見通しやすくするために すべてのバナーをグローバル有効化 し、各 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 は時間指定で隠す処理だけに使う。 閉じるボタンの確認 クリック処理をキャプチャ段階でも受けるようにして、上位要素のイベント遮断の影響を受けにくくした。 close の保存先は session / persistent / hours に分離した。 保存に失敗しても、その場で非表示にする動作は止めない。 レイアウトの確認 CTA と閉じるボタンはデスクトップでは内容幅に合わせ、モバイルでは 100% 幅に広げる。 footer と dismiss 領域の幅・整列・間隔は theme-vars トークンで制御する。 ボタン位置はページごとのハードコードではなく、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 運用メモ すべてのバナーをグローバル表示するには、enabled = true と各 item の広い scope を維持する。 特定の section のみにしたいときだけ scope を狭める。 storageKey は長期的な非表示状態が必要な場合のみ指定する。 ","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/blog/theme-upgrade-lab/05-operations/update-log/","summary":"배포 관점의 변경 로그와 트리 구조, 운영 메모를 함께 정리한 문서.","title":"Update Log"},{"content":" 책상 위 치우기 메일함 비우기 오래된 탭 닫기 정리는 공간을 비우는 일이 아니라, 다음 행동을 쉽게 만드는 일이다.\n","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/blog/theme-upgrade-lab/weekend-cleanup/","summary":"목록 렌더링의 보조 버전이다.","title":"주말 정리 루틴"},{"content":"주말 정리는 거창할 필요가 없다.\n작은 항목을 빠르게 끝내는 것이 핵심이다.\n책상 위 치우기 메일함 비우기 오래된 탭 닫기 다음 주 일정 확인 정리는 공간을 비우는 일이 아니라, 다음 행동을 쉽게 만드는 일이다.\n짧은 팁 한 번에 한 구역만 본다. 도구를 늘리지 않는다. 끝낸 뒤에는 바로 다음 행동을 적는다. 목록 렌더링 다시 보기 ","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/blog/theme-upgrade-lab/06-public-posts/weekend-cleanup/","summary":"실제 생활 글은 가볍지만, 렌더링은 가볍지 않다.","title":"주말 정리 루틴"},{"content":"탐색 구조는 단순히 메뉴를 나열하는 것이 아니라, 사용자가 어떤 기준으로 움직이는지 설계하는 일이다.\n정리 방식 카테고리는 정보의 큰 묶음으로 사용한다. 태그는 같은 주제를 가볍게 교차 연결할 때 사용한다. 메뉴는 가장 자주 쓰는 동선을 우선으로 둔다. 확인 표 항목 역할 기준 홈 첫 진입점 언어별 기본 페이지 블로그 글 목록 최신 콘텐츠 접근 카테고리 큰 분류 주제별 탐색 태그 세부 연결 느슨한 연관성 소개 신뢰 구축 사이트 목적 설명 연락처 행동 전환 문의와 연결 좋은 구조의 기준 같은 정보는 같은 이름으로 반복된다. 언어가 바뀌어도 정보 구조는 유지된다. 사용자는 메뉴만 보고도 다음 행동을 예측할 수 있다. page bundle 리소스 · 업데이트 로그\n","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/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-4.pages.dev/ja/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-4.pages.dev/ja/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-4.pages.dev/ja/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 ファイルと各言語の override ファイルが分離されているか dismissMode = \u0026quot;session\u0026quot;, \u0026quot;persistent\u0026quot;, \u0026quot;hours\u0026quot; が期待どおりに動くか announcementProfile = \u0026quot;showcase\u0026quot; を入れたページでモーダル型とインライン型が同時に確認できるか 画像、CTA、secondary CTA、キャプションが言語別に切り替わるか enabled = false のサンプルを残したまま、必要時にすぐ有効化できるか 9. 公開前メモ デザインは引き続き theme-vars のみで調整する UI 文字列は theme i18n からのみ読む 運用値は announcement data ファイルに閉じ込める このログが最新のファイル経路を案内しているか確認する ","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/blog/theme-upgrade-lab/05-operations/verification-log/","summary":"렌더링 검증은 한 번의 성공보다, 반복 가능한 확인 순서가 중요하다.","title":"검증 로그"},{"content":" 여권 / 신분증 충전기 예약 정보 날씨에 맞는 옷 패턴 예시짧은 본문 안에서도 이미지가 안정적으로 들어가는지 본다.\n","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/blog/theme-upgrade-lab/travel-checklist/","summary":"이미지와 텍스트가 함께 있어도 리듬이 유지되는지 확인하는 보조 글이다.","title":"여행 체크리스트"},{"content":"여행 준비는 빠뜨리기 쉬운 항목을 시각적으로 다시 확인하는 일이다.\n필수품 여권 / 신분증 충전기 현금과 카드 예약 정보 날씨에 맞는 옷 표로 보는 준비 상태 항목 상태 메모 숙소 완료 체크인 시간 확인 교통 완료 공항 이동 수단 확인 짐 진행 중 무게 다시 점검 일정 완료 첫날 동선 정리 배경 패턴 예시본문 사이에 이미지가 들어와도 리스트와 표의 리듬이 유지되는지 확인한다.\n여행 정보 열기 마무리 체크리스트는 많을수록 좋지 않다.\n정말 필요한 것만 남기고, 나머지는 분류해서 비워 둔다.\n","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/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-4.pages.dev/ja/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-4.pages.dev/ja/blog/theme-upgrade-lab/01-foundation/typography-language/","summary":"같은 내용이라도 언어가 바뀌면 폭, 자간, 줄바꿈 규칙이 달라져야 한다.","title":"언어와 서체"},{"content":"このページは、告知システムの実際の frontend レンダリングを確認するためのショーケースです。\n確認ポイント:\nサイト全体のバナーが全体トーンになじむか セクション専用の sticky 案内が導線を邪魔しないか モーダル通知が dismissMode = \u0026quot;persistent\u0026quot; で閉じた後に再表示されないか インラインカードが本文の流れに自然に入るか 画像、CTA、secondary CTA、キャプションが言語ごとに切り替わるか 非表示ポリシーは、セッション、永続、時間制限から選べる。 このページでは、モーダルとインラインカードが announcementProfile = \u0026quot;showcase\u0026quot; の front matter だけで動作する。\n","permalink":"https://hugo-theme-test-a-4.pages.dev/ja/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-4.pages.dev/ja/blog/theme-upgrade-lab/full-coverage/","summary":"이 페이지 하나만 열어도 무엇이 렌더링되는지 거의 전부 확인할 수 있어야 한다.","title":"전체 커버리지"}]