https://hugo-theme-test-a-1.pages.dev/ko/tags/foundation/ Recent content in Foundation on SITE — SITE https://hugo-theme-test-a-1.pages.dev/social.png https://hugo-theme-test-a-1.pages.dev/social.png Hugo -- 0.147.7 ko-KR https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/spacing-layout/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/spacing-layout/ <h1 id="spacing-layout">spacing layout</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>spacing은 요소 간 거리뿐 아니라 페이지의 호흡을 결정합니다. 같은 페이지 안에서도 섹션과 카드와 본문이 서로 다른 리듬을 가져야 합니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>제목과 본문 사이 간격이 일관적인가</li> <li>카드 목록의 밀도가 적절한가</li> <li>모바일에서 여백이 너무 좁거나 넓지 않은가</li> </ul> <h2 id="판정">판정</h2> <p>간격이 일정하면 정보 계층이 보이고, 간격이 무너지면 아무리 좋은 콘텐츠도 조립품처럼 보입니다.</p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/design-tokens/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/design-tokens/ <h1 id="design-tokens">design tokens</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>토큰이 CSS, 템플릿, shortcode에서 같은 의미로 읽히는지 확인합니다. 숫자를 직접 박아 넣는 대신 토큰이 흐르는지 보는 테스트입니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>기초 값과 의미 값이 구분되는가</li> <li>컴포넌트가 직접 숫자를 들고 있지 않은가</li> <li>토큰 변경이 여러 UI에 예측 가능하게 반영되는가</li> </ul> <h2 id="기대-결과">기대 결과</h2> <p>페이지 상단의 핵심 카드, 표, 본문 간격이 같은 시각 언어를 유지해야 합니다.</p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/motion-shape/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/motion-shape/ <h1 id="motion-shape">motion shape</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>모션과 형태는 거의 보이지 않지만 인상을 크게 바꿉니다. 과한 motion은 장식이 되고, 너무 적은 shape는 페이지를 딱딱하게 만듭니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>hover와 focus 상태가 구분되는가</li> <li>radius가 카드와 버튼에 같은 문법으로 적용되는가</li> <li>transition이 빠르되 거슬리지 않는가</li> </ul> <h2 id="기대-결과">기대 결과</h2> <p>레이어는 분명해야 하지만 과장되면 안 됩니다. 부드러우면서도 단정한 느낌이 목표입니다.</p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/color-surface/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/color-surface/ <h1 id="color-surface">color surface</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>배경과 카드, 보조 표면의 위계가 분리되어야 합니다. 같은 색을 쓰더라도 역할이 다르면 시각적 레이어가 달라 보여야 합니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>페이지 배경과 카드가 섞이지 않는가</li> <li>강조 영역이 너무 많지 않은가</li> <li>라이트와 다크에서 바탕 인상이 유지되는가</li> </ul> <h2 id="시각-샘플">시각 샘플</h2> <figure><img src="https://hugo-theme-test-a-1.pages.dev/images/theme-upgrade-lab/cover.svg" alt="색상 표면 예시"><figcaption> <h4>표면 레이어</h4><p>static 이미지를 사용해 figure 렌더링과 비주얼 계층을 함께 점검합니다.</p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/typography-language/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/typography-language/ <h1 id="typography-language">typography language</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>한글 본문, 영어 약어, 숫자, 코드가 한 문단 안에 섞일 때도 읽기 리듬이 유지되는지 확인합니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>제목의 줄바꿈이 과도하지 않은가</li> <li>영문 약어가 본문보다 튀지 않는가</li> <li>숫자와 단위가 문단 흐름을 깨지 않는가</li> <li>코드와 본문이 같은 톤으로 섞이지 않는가</li> </ul> <h2 id="예시">예시</h2> <p>Hugo, frontend, UI, CSS, 2026 같은 조합이 자연스럽게 읽혀야 합니다. 같은 문장에서 한글과 영문이 섞여도 줄간격과 시각적 무게가 안정적이어야 합니다.</p>