https://hugo-theme-test-a-1.pages.dev/ko/tags/components/ Recent content in Components 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/30-components/cta/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/cta/ <h1 id="cta">cta</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>CTA는 사용자가 다음 행동을 선택하는 지점입니다. 너무 약하면 눈에 띄지 않고, 너무 강하면 본문을 압도합니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>행동 문구가 짧고 분명한가</li> <li>보조 설명이 있더라도 주 행동을 가리지 않는가</li> <li>외부 링크와 내부 링크가 구분되는가</li> </ul> <h2 id="예시">예시</h2> <p><div id="-nil-" class="cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body &amp;lt;nil&amp;gt;" data-cta-kind="default" data-cta-intent="&lt;nil&gt;" data-cta-priority="secondary" data-cta-surface="after-content" data-cta-size="md" data-cta-tone="neutral" data-cta-align="center" data-cta-target="_self" data-cta-has-body="true" data-cta-disabled="false" data-cta-compact="false" data-tracking-id="&amp;lt;nil&amp;gt;" data-analytics-event="&amp;lt;nil&amp;gt;"> <div class="cta__frame"><a class="cta__link" href="https://hugo-theme-test-a-1.pages.dev/contact/" target="_self" rel="&amp;lt;nil&amp;gt;" aria-label="&amp;lt;nil&amp;gt;"> <span class="cta__link-inner"><span class="cta__badge"></span><span class="cta__label">구조 검토 요청</span><span class="cta__subtitle"></span></span> </a><div class="cta__support"><p class="cta__note">평일 기준 1영업일 내 확인</p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/figures/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/figures/ <h1 id="figures">figures</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>figure는 이미지를 설명하고 본문에 다시 연결하는 역할을 합니다. 그림이 있더라도 본문이 끊기지 않아야 합니다.</p> <h2 id="예시">예시</h2> <figure><img src="https://hugo-theme-test-a-1.pages.dev/images/theme-upgrade-lab/diagram.svg" alt="다이어그램"><figcaption> <h4>구조 다이어그램</h4><p>이미지와 캡션이 본문 의미를 보강해야 합니다.</p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/badges/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/badges/ <h1 id="badges">badges</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>배지는 메인 정보가 아니라 <strong>보조 신호</strong>입니다. 상태, 분류, 짧은 메타가 본문을 가리지 않는지 확인합니다.</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/30-components/buttons/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/buttons/ <h1 id="buttons">buttons</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>버튼은 사용자의 행동을 유도하는 가장 중요한 상호작용 요소입니다. primary, secondary, external, utility가 같은 시스템 안에서 분리되어 보여야 합니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>primary 버튼이 가장 먼저 읽히는가</li> <li>secondary 버튼이 보조 행동으로 인식되는가</li> <li>external 행동이 내부 이동과 헷갈리지 않는가</li> <li>긴 라벨이 줄바꿈되어도 버튼 구조가 유지되는가</li> </ul> <h2 id="shortcode-예시">shortcode 예시</h2> <div id="-nil-" class="cta cta--kind-trial cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body &amp;lt;nil&amp;gt;" data-cta-kind="trial" data-cta-intent="&lt;nil&gt;" data-cta-priority="secondary" data-cta-surface="after-content" data-cta-size="md" data-cta-tone="neutral" data-cta-align="center" data-cta-target="_self" data-cta-has-body="true" data-cta-disabled="false" data-cta-compact="false" data-tracking-id="&amp;lt;nil&amp;gt;" data-analytics-event="&amp;lt;nil&amp;gt;"> <div class="cta__frame"><a class="cta__link" href="https://hugo-theme-test-a-1.pages.dev/docs/" target="_self" rel="&amp;lt;nil&amp;gt;" aria-label="&amp;lt;nil&amp;gt;"> <span class="cta__link-inner"><span class="cta__badge"></span><span class="cta__label">구조 확인 시작</span><span class="cta__subtitle"></span></span> </a><div class="cta__support"><p class="cta__note"></p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/alerts/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/alerts/ <h1 id="alerts">alerts</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>알림은 주의, 경고, 정보, 성공 상태를 전달합니다. 내용이 짧아도 눈에 띄어야 하지만, 페이지 전체를 지배하면 안 됩니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>알림이 본문 문단과 혼동되지 않는가</li> <li>경고와 정보의 계층이 분리되는가</li> <li>긴 메시지가 들어가도 박스가 무너지지 않는가</li> </ul> <h2 id="raw-html-예시">raw HTML 예시</h2> <div role="alert" style="padding:1rem;border:1px solid currentColor;border-radius:0.75rem;"> 검증 알림: 상태 메시지는 본문보다 앞서 읽혀야 합니다. </div> <h2 id="실패-기준">실패 기준</h2> <ul> <li>알림이 본문처럼 보여 버리는 경우</li> <li>색만 바뀌고 의미 구조가 없는 경우</li> </ul> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/embeds/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/embeds/ <h1 id="embeds">embeds</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>외부 임베드나 iframe은 레이아웃을 크게 흔들 수 있습니다. 폭, 높이, 반응형 처리, 주변 여백을 함께 봅니다.</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/30-components/cards/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/cards/ <h1 id="cards">cards</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>카드는 내용 묶음의 가장 흔한 표현입니다. 제목, 설명, 메타, 링크가 같은 규칙으로 보이는지 확인합니다.</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/30-components/forms/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/forms/ <h1 id="forms">forms</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>폼은 상태가 많은 UI입니다. 라벨, 힌트, 오류, 도움말이 한 덩어리로 읽혀야 하고, 시각적으로도 분리되어야 합니다.</p> <h2 id="raw-html-예시">raw HTML 예시</h2> <form style="display:grid;gap:0.75rem;max-width:32rem;"> <label>이름 <input type="text" style="display:block;width:100%;padding:0.6rem;border:1px solid currentColor;border-radius:0.5rem;" /> </label> <small>입력 도움말은 너무 길지 않게 유지합니다.</small> </form> <h2 id="확인-항목">확인 항목</h2> <ul> <li>라벨이 입력과 제대로 연결되는가</li> <li>도움말이 입력보다 앞서거나 뒤섞이지 않는가</li> <li>오류 상태가 색상만으로 표현되지 않는가</li> </ul> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/tables/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/tables/ <h1 id="tables">tables</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>표는 정보 비교에 강하지만, 화면이 좁아지면 가장 쉽게 깨집니다. 표 자체보다 <strong>가독성과 줄바꿈</strong>을 함께 확인합니다.</p> <h2 id="예시">예시</h2> <table> <thead> <tr> <th>항목</th> <th>설명</th> <th>확인</th> </tr> </thead> <tbody> <tr> <td>row 1</td> <td>짧은 값</td> <td>문제가 없는가</td> </tr> <tr> <td>row 2</td> <td>긴 설명이 들어가는 값</td> <td>줄바꿈이 자연스러운가</td> </tr> <tr> <td>row 3</td> <td>taxonomy / navigation</td> <td>폭이 과하지 않은가</td> </tr> </tbody> </table> <h2 id="확인-항목">확인 항목</h2> <ul> <li>헤더가 분명한가</li> <li>셀 간 간격이 충분한가</li> <li>모바일에서 가로 스크롤이 필요하면 안내가 있는가</li> </ul>