홈 on SITE

01-badge-subtitle

Mon, 01 Jan 0001 00:00:00 +0000

배지와 subtitle을 함께 쓰는 예시입니다.


{{< cta
  kind="default"
  label="요금제 확인"
  href="/pricing/"
  ref="/blog/"
  intent="pricing"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="배지와 subtitle을 함께 쓰는 예시입니다."
  subtitle="가장 많이 쓰는 구성"
  aria_label="요금제 확인"
  badge="NEW"
  tracking_id="cta-meta-01"
  analytics_event="cta_meta_badge"
  id="cta-meta-badge"
  class="is-highlighted"
  compact="false"
  disabled="false" >}}

01-default

Mon, 01 Jan 0001 00:00:00 +0000

BASE기본 CTA자세히 보기

기본 동작을 확인합니다.


{{< cta
  kind="default"
  label="기본 CTA"
  href="/contact/"
  ref=""
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="기본 동작을 확인합니다."
  subtitle="자세히 보기"
  aria_label=""
  badge="BASE"
  tracking_id="cta-kind-01"
  analytics_event="cta_kind_default"
  id="cta-kind-default"
  class="is-default"
  compact="false"
  disabled="false" >}}

01-href-and-ref

Mon, 01 Jan 0001 00:00:00 +0000

TEST링크 우선순위 확인우선순위 테스트

href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.


{{< cta
  kind="related"
  label="링크 우선순위 확인"
  href="https://example.com/docs"
  ref="/lab/hugo-content-lab/30-components/"
  intent="related"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다."
  subtitle="우선순위 테스트"
  aria_label=""
  badge="TEST"
  tracking_id="cta-routing-01"
  analytics_event="cta_route_test"
  id="cta-routing-both"
  class="is-test"
  compact="false"
  disabled="false" >}}

01-primary-hero-xl-brand-center

Mon, 01 Jan 0001 00:00:00 +0000

TOP핵심 CTA영웅 영역

가장 눈에 띄는 핵심 CTA입니다.


{{< cta
  kind="default"
  label="핵심 CTA"
  href="/contact/"
  ref="/blog/"
  intent="generic"
  priority="primary"
  surface="hero"
  size="xl"
  tone="brand"
  align="center"
  target="_self"
  rel=""
  note="가장 눈에 띄는 핵심 CTA입니다."
  subtitle="영웅 영역"
  aria_label="핵심 CTA"
  badge="TOP"
  tracking_id="cta-visual-01"
  analytics_event="cta_visual_top"
  id="cta-visual-hero"
  class="is-hero"
  compact="false"
  disabled="false" >}}

01-single-paragraph

Mon, 01 Jan 0001 00:00:00 +0000

INFO상담 신청본문 포함

단일 문단 본문 예시입니다.

평일 기준 1영업일 내에 회신드립니다.


{{< cta
  kind="consult"
  label="상담 신청"
  href="/contact/"
  ref="/blog/"
  intent="consult"
  priority="primary"
  surface="after-content"
  size="md"
  tone="success"
  align="center"
  target="_self"
  rel=""
  note="단일 문단 본문 예시입니다."
  subtitle="본문 포함"
  aria_label="상담 신청"
  badge="INFO"
  tracking_id="cta-body-01"
  analytics_event="cta_body_single"
  id="cta-body-single"
  class="is-content"
  compact="false"
  disabled="false" >}}
평일 기준 1영업일 내에 회신드립니다.
{{< /cta >}}

01-unknown-kind

Mon, 01 Jan 0001 00:00:00 +0000

FALLBACK미지의 CTAfallback

알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.


{{< cta
  kind="mystery_campaign"
  label="미지의 CTA"
  href="/lab/hugo-content-lab/30-components/"
  ref="/blog/"
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다."
  subtitle="fallback"
  aria_label="미지의 CTA"
  badge="FALLBACK"
  tracking_id="cta-fallback-01"
  analytics_event="cta_fallback_unknown"
  id="cta-fallback-unknown"
  class="is-fallback"
  compact="false"
  disabled="false" >}}

02-aria-tracking

Mon, 01 Jan 0001 00:00:00 +0000

A11Y이벤트 추적접근성

접근성 라벨과 추적 ID를 함께 넣는 예시입니다.


{{< cta
  kind="default"
  label="이벤트 추적"
  href="/lab/hugo-content-lab/30-components/"
  ref="/blog/"
  intent="generic"
  priority="utility"
  surface="inline"
  size="sm"
  tone="brand"
  align="left"
  target="_self"
  rel=""
  note="접근성 라벨과 추적 ID를 함께 넣는 예시입니다."
  subtitle="접근성"
  aria_label="문서 주소를 복사"
  badge="A11Y"
  tracking_id="cta-meta-02"
  analytics_event="cta_meta_track"
  id="cta-meta-aria"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

02-bogus-align

Mon, 01 Jan 0001 00:00:00 +0000

WARN정렬 폴백정렬 검증

잘못된 align 값은 기본 정렬로 처리됩니다.


{{< cta
  kind="default"
  label="정렬 폴백"
  href="/lab/hugo-content-lab/30-components/"
  ref="/blog/"
  intent="generic"
  priority="utility"
  surface="sidebar"
  size="xs"
  tone="warning"
  align="bogus"
  target="_self"
  rel=""
  note="잘못된 align 값은 기본 정렬로 처리됩니다."
  subtitle="정렬 검증"
  aria_label="정렬 폴백"
  badge="WARN"
  tracking_id="cta-fallback-02"
  analytics_event="cta_fallback_align"
  id="cta-fallback-align"
  class="is-warning"
  compact="true"
  disabled="false" >}}

02-external

Mon, 01 Jan 0001 00:00:00 +0000

OFFICIAL외부 문서 열기공식 문서

새 창에서 외부 문서를 엽니다.



{{< cta
  kind="external"
  label="외부 문서 열기"
  href="https://example.com/docs"
  ref="/blog/"
  intent="external"
  priority="primary"
  surface="hero"
  size="lg"
  tone="brand"
  align="center"
  target="_blank"
  rel="noopener noreferrer"
  note="새 창에서 외부 문서를 엽니다."
  subtitle="공식 문서"
  aria_label="외부 링크"
  badge="OFFICIAL"
  tracking_id="cta-kind-02"
  analytics_event="cta_kind_external"
  id="cta-kind-external"
  class="is-external"
  compact="true"
  disabled="false" >}}

02-external-target-blank

Mon, 01 Jan 0001 00:00:00 +0000

OFFICIAL새 창 안전 열기보안 속성 포함

외부 도메인은 새 창으로 엽니다.


{{< cta
  kind="external"
  label="새 창 안전 열기"
  href="https://example.com/docs"
  ref="/blog/"
  intent="external"
  priority="primary"
  surface="hero"
  size="lg"
  tone="brand"
  align="center"
  target="_blank"
  rel="noopener noreferrer"
  note="외부 도메인은 새 창으로 엽니다."
  subtitle="보안 속성 포함"
  aria_label="새 창으로 외부 문서 열기"
  badge="OFFICIAL"
  tracking_id="cta-routing-02"
  analytics_event="cta_external_open"
  id="cta-routing-blank"
  class="is-external"
  compact="true"
  disabled="false" >}}

02-multi-paragraph

Mon, 01 Jan 0001 00:00:00 +0000

INFO상담 신청상세 설명

여러 문단 본문 예시입니다.

첫 번째 문단입니다.

두 번째 문단입니다.


{{< cta
  kind="consult"
  label="상담 신청"
  href="/contact/"
  ref="/blog/"
  intent="consult"
  priority="primary"
  surface="after-content"
  size="md"
  tone="success"
  align="center"
  target="_self"
  rel=""
  note="여러 문단 본문 예시입니다."
  subtitle="상세 설명"
  aria_label="상담 신청"
  badge="INFO"
  tracking_id="cta-body-02"
  analytics_event="cta_body_multi"
  id="cta-body-multi"
  class="is-content"
  compact="false"
  disabled="false" >}}
첫 번째 문단입니다.

두 번째 문단입니다.
{{< /cta >}}

02-secondary-after-md-neutral-left

Mon, 01 Jan 0001 00:00:00 +0000

MORE보조 CTA보조 동작

본문 뒤에서 자연스럽게 이어지는 구성입니다.


{{< cta
  kind="default"
  label="보조 CTA"
  href="/blog/"
  ref="/lab/hugo-content-lab/30-components/"
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="본문 뒤에서 자연스럽게 이어지는 구성입니다."
  subtitle="보조 동작"
  aria_label="보조 CTA"
  badge="MORE"
  tracking_id="cta-visual-02"
  analytics_event="cta_visual_more"
  id="cta-visual-after"
  class="is-secondary"
  compact="false"
  disabled="false" >}}

03-all-meta

Mon, 01 Jan 0001 00:00:00 +0000

HOT전체 메타부가 제목

메타데이터를 한 번에 확인하는 예시입니다.


{{< cta
  kind="external"
  label="전체 메타"
  href="https://example.com/docs"
  ref="/lab/hugo-content-lab/30-components/"
  intent="external"
  priority="primary"
  surface="hero"
  size="lg"
  tone="success"
  align="center"
  target="_blank"
  rel="noopener noreferrer"
  note="메타데이터를 한 번에 확인하는 예시입니다."
  subtitle="부가 제목"
  aria_label="전체 메타를 확인"
  badge="HOT"
  tracking_id="cta-meta-03"
  analytics_event="cta_meta_all"
  id="cta-meta-all"
  class="is-promo"
  compact="false"
  disabled="false" >}}

03-heading-and-list

Mon, 01 Jan 0001 00:00:00 +0000

STEP상담 신청절차 안내

제목과 목록이 섞인 본문 예시입니다.

확인 순서

접수
검토
회신


{{< cta
  kind="consult"
  label="상담 신청"
  href="/contact/"
  ref="/blog/"
  intent="consult"
  priority="primary"
  surface="after-content"
  size="md"
  tone="success"
  align="center"
  target="_self"
  rel=""
  note="제목과 목록이 섞인 본문 예시입니다."
  subtitle="절차 안내"
  aria_label="상담 신청"
  badge="STEP"
  tracking_id="cta-body-03"
  analytics_event="cta_body_list"
  id="cta-body-list"
  class="is-content"
  compact="false"
  disabled="false" >}}
### 확인 순서

1. 접수
2. 검토
3. 회신
{{< /cta >}}

03-internal-ref

Mon, 01 Jan 0001 00:00:00 +0000

PAGE페이지 참조 이동site.GetPage 경로

ref가 실제 페이지 참조일 때의 구성을 보여줍니다.


{{< cta
  kind="internal"
  label="페이지 참조 이동"
  href="/lab/hugo-content-lab/30-components/"
  ref="/lab/hugo-content-lab/70-real-world-posts/medium-post/"
  intent="internal"
  priority="secondary"
  surface="in-content"
  size="sm"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="ref가 실제 페이지 참조일 때의 구성을 보여줍니다."
  subtitle="site.GetPage 경로"
  aria_label="내부 페이지로 이동"
  badge="PAGE"
  tracking_id="cta-routing-03"
  analytics_event="cta_internal_route"
  id="cta-routing-ref"
  class="is-internal"
  compact="false"
  disabled="false" >}}

03-rel-explicit

Mon, 01 Jan 0001 00:00:00 +0000

SAFE안전한 새 창보안 관계

rel을 명시적으로 넣는 예시입니다.


{{< cta
  kind="external"
  label="안전한 새 창"
  href="https://example.com/docs"
  ref="/blog/"
  intent="external"
  priority="primary"
  surface="hero"
  size="lg"
  tone="brand"
  align="center"
  target="_blank"
  rel="noopener noreferrer"
  note="rel을 명시적으로 넣는 예시입니다."
  subtitle="보안 관계"
  aria_label="안전한 새 창 열기"
  badge="SAFE"
  tracking_id="cta-fallback-03"
  analytics_event="cta_fallback_rel"
  id="cta-fallback-rel"
  class="is-external"
  compact="false"
  disabled="false" >}}

03-related

Mon, 01 Jan 0001 00:00:00 +0000


{{< cta
  kind="related"
  label="관련 글 더 보기"
  href="/blog/"
  ref="/lab/hugo-content-lab/70-real-world-posts/medium-post/"
  intent="related"
  priority="tertiary"
  surface="in-content"
  size="sm"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="본문과 이어서 읽기 좋습니다."
  subtitle="관련 읽을거리"
  aria_label=""
  badge="RELATED"
  tracking_id="cta-kind-03"
  analytics_event="cta_kind_related"
  id="cta-kind-related"
  class="is-related"
  compact="false"
  disabled="false" >}}
추가 설명이 필요한 경우 본문을 여기에 적습니다.
{{< /cta >}}

03-tertiary-incontent-sm-success-right

Mon, 01 Jan 0001 00:00:00 +0000

MID본문 CTA문단 사이

본문 중간에 배치하는 예시입니다.


{{< cta
  kind="default"
  label="본문 CTA"
  href="/signup/"
  ref="/contact/"
  intent="generic"
  priority="tertiary"
  surface="in-content"
  size="sm"
  tone="success"
  align="right"
  target="_self"
  rel=""
  note="본문 중간에 배치하는 예시입니다."
  subtitle="문단 사이"
  aria_label="본문 CTA"
  badge="MID"
  tracking_id="cta-visual-03"
  analytics_event="cta_visual_mid"
  id="cta-visual-inline"
  class="is-inline-callout"
  compact="true"
  disabled="false" >}}

04-consult

Mon, 01 Jan 0001 00:00:00 +0000

HOT상담 신청도입 전 문의

평일 기준 1영업일 내 회신

상담 주제와 희망 일정을 함께 적어 주세요.


{{< cta
  kind="consult"
  label="상담 신청"
  href="/contact/"
  ref=""
  intent="consult"
  priority="primary"
  surface="after-content"
  size="md"
  tone="success"
  align="center"
  target="_self"
  rel=""
  note="평일 기준 1영업일 내 회신"
  subtitle="도입 전 문의"
  aria_label=""
  badge="HOT"
  tracking_id="cta-kind-04"
  analytics_event="cta_kind_consult"
  id="cta-kind-consult"
  class="is-consult"
  compact="false"
  disabled="false" >}}
상담 주제와 희망 일정을 함께 적어 주세요.
{{< /cta >}}

04-disabled-state

Mon, 01 Jan 0001 00:00:00 +0000

OFF비활성 상태클릭 불가

disabled 상태의 메타 구성을 보여줍니다.


{{< cta
  kind="default"
  label="비활성 상태"
  href="/lab/hugo-content-lab/30-components/"
  ref="/blog/"
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="warning"
  align="right"
  target="_self"
  rel=""
  note="disabled 상태의 메타 구성을 보여줍니다."
  subtitle="클릭 불가"
  aria_label="비활성 상태"
  badge="OFF"
  tracking_id="cta-meta-04"
  analytics_event="cta_meta_disabled"
  id="cta-meta-disabled"
  class="is-disabled"
  compact="false"
  disabled="true" >}}

04-fallback-href

Mon, 01 Jan 0001 00:00:00 +0000

BASE기본 이동href 중심

기본 이동 경로를 보여줍니다.


{{< cta
  kind="default"
  label="기본 이동"
  href="/contact/"
  ref="/blog/"
  intent="generic"
  priority="utility"
  surface="sidebar"
  size="xs"
  tone="muted"
  align="stretch"
  target="_self"
  rel=""
  note="기본 이동 경로를 보여줍니다."
  subtitle="href 중심"
  aria_label="기본 이동"
  badge="BASE"
  tracking_id="cta-routing-04"
  analytics_event="cta_default_move"
  id="cta-routing-href"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

04-mixed-markdown

Mon, 01 Jan 0001 00:00:00 +0000

READ다음 글 보기혼합 마크다운

굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.

중요 포인트를 먼저 보고, 자세한 설명으로 넘어가세요.


{{< cta
  kind="related"
  label="다음 글 보기"
  href="/lab/hugo-content-lab/70-real-world-posts/medium-post/"
  ref="/blog/"
  intent="related"
  priority="tertiary"
  surface="in-content"
  size="sm"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="굵게, 링크, 들여쓰기를 섞은 본문 예시입니다."
  subtitle="혼합 마크다운"
  aria_label="다음 글 보기"
  badge="READ"
  tracking_id="cta-body-04"
  analytics_event="cta_body_mixed"
  id="cta-body-mixed"
  class="is-inline-callout"
  compact="false"
  disabled="false" >}}
**중요 포인트**를 먼저 보고, [자세한 설명](/lab/hugo-content-lab/30-components/)으로 넘어가세요.
{{< /cta >}}

04-utility-sidebar-xs-warning-stretch

Mon, 01 Jan 0001 00:00:00 +0000

UTIL유틸 CTA유틸리티

사이드바용 경량 CTA입니다.


{{< cta
  kind="utility"
  label="유틸 CTA"
  href="/contact/"
  ref="/blog/"
  intent="copy"
  priority="utility"
  surface="sidebar"
  size="xs"
  tone="warning"
  align="stretch"
  target="_self"
  rel=""
  note="사이드바용 경량 CTA입니다."
  subtitle="유틸리티"
  aria_label="유틸 CTA"
  badge="UTIL"
  tracking_id="cta-visual-04"
  analytics_event="cta_visual_utility"
  id="cta-visual-utility"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

05-download

Mon, 01 Jan 0001 00:00:00 +0000

PDF다운로드

파일을 바로 내려받습니다.


{{< cta
  kind="download"
  label="다운로드"
  href="/files/checklist.pdf"
  ref=""
  intent="download"
  priority="utility"
  surface="inline"
  size="xs"
  tone="muted"
  align="left"
  target="_self"
  rel=""
  note="파일을 바로 내려받습니다."
  subtitle=""
  aria_label=""
  badge="PDF"
  tracking_id="cta-kind-05"
  analytics_event="cta_kind_download"
  id="cta-kind-download"
  class="u-track-cta"
  compact="false"
  disabled="false" >}}

05-primary-header-lg-accent-center

Mon, 01 Jan 0001 00:00:00 +0000

WEEKLY뉴스레터주 1회 발송

헤더에서 반복적으로 안내하는 CTA입니다.


{{< cta
  kind="newsletter"
  label="뉴스레터"
  href="/newsletter/"
  ref="/blog/"
  intent="subscribe"
  priority="primary"
  surface="header"
  size="lg"
  tone="accent"
  align="center"
  target="_self"
  rel=""
  note="헤더에서 반복적으로 안내하는 CTA입니다."
  subtitle="주 1회 발송"
  aria_label="뉴스레터 구독"
  badge="WEEKLY"
  tracking_id="cta-visual-05"
  analytics_event="cta_visual_header"
  id="cta-visual-header"
  class="is-header-cta"
  compact="false"
  disabled="false" >}}

06-newsletter

Mon, 01 Jan 0001 00:00:00 +0000


{{< cta
  kind="newsletter"
  label="뉴스레터 구독"
  href="/newsletter/"
  ref=""
  intent="subscribe"
  priority="primary"
  surface="header"
  size="md"
  tone="accent"
  align="center"
  target="_self"
  rel=""
  note="매주 핵심 업데이트를 보냅니다."
  subtitle="매주 한 번"
  aria_label="뉴스레터 구독"
  badge="NEW"
  tracking_id="cta-kind-06"
  analytics_event="cta_kind_newsletter"
  id="cta-kind-newsletter"
  class="is-inline"
  compact="false"
  disabled="false" >}}

06-secondary-footer-md-danger-right

Mon, 01 Jan 0001 00:00:00 +0000


{{< cta
  kind="custom_offer"
  label="맞춤 제안"
  href="/offers/"
  ref="/pricing/"
  intent="generic"
  priority="secondary"
  surface="footer"
  size="md"
  tone="danger"
  align="right"
  target="_self"
  rel=""
  note="푸터에서 마무리 제안으로 쓰는 예시입니다."
  subtitle="마지막 유도"
  aria_label="맞춤 제안 보기"
  badge="BETA"
  tracking_id="cta-visual-06"
  analytics_event="cta_visual_footer"
  id="cta-visual-footer"
  class="is-footer-cta"
  compact="false"
  disabled="false" >}}

07-trial

Mon, 01 Jan 0001 00:00:00 +0000

TRIAL무료 체험 시작14일 무료

신용카드 없이 시작할 수 있습니다.


{{< cta
  kind="trial"
  label="무료 체험 시작"
  href="/signup/"
  ref=""
  intent="trial"
  priority="primary"
  surface="hero"
  size="xl"
  tone="accent"
  align="right"
  target="_self"
  rel=""
  note="신용카드 없이 시작할 수 있습니다."
  subtitle="14일 무료"
  aria_label=""
  badge="TRIAL"
  tracking_id="cta-kind-07"
  analytics_event="cta_kind_trial"
  id="cta-kind-trial"
  class="is-highlighted"
  compact="false"
  disabled="false" >}}

07-utility-inline-xs-muted-left

Mon, 01 Jan 0001 00:00:00 +0000

COPY복사클립보드

인라인에서 최소 면적으로 동작합니다.


{{< cta
  kind="copy"
  label="복사"
  href="/contact/"
  ref="/lab/hugo-content-lab/30-components/"
  intent="copy"
  priority="utility"
  surface="inline"
  size="xs"
  tone="muted"
  align="left"
  target="_self"
  rel=""
  note="인라인에서 최소 면적으로 동작합니다."
  subtitle="클립보드"
  aria_label="문서 주소 복사"
  badge="COPY"
  tracking_id="cta-visual-07"
  analytics_event="cta_visual_copy"
  id="cta-visual-copy"
  class="is-copy"
  compact="true"
  disabled="false" >}}

08-price_check

Mon, 01 Jan 0001 00:00:00 +0000

PRICE가격 확인

요금표를 먼저 확인합니다.


{{< cta
  kind="price_check"
  label="가격 확인"
  href="https://example.com/pricing"
  ref=""
  intent="pricing"
  priority="secondary"
  surface="sidebar"
  size="sm"
  tone="warning"
  align="stretch"
  target="_blank"
  rel="noopener noreferrer"
  note="요금표를 먼저 확인합니다."
  subtitle=""
  aria_label="가격 확인"
  badge="PRICE"
  tracking_id="cta-kind-08"
  analytics_event="cta_kind_price"
  id="cta-kind-price"
  class="is-price"
  compact="false"
  disabled="false" >}}

09-utility

Mon, 01 Jan 0001 00:00:00 +0000

COPY복사

클립보드 복사를 유도합니다.


{{< cta
  kind="utility"
  label="복사"
  href="/contact/"
  ref=""
  intent="copy"
  priority="utility"
  surface="inline"
  size="xs"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="클립보드 복사를 유도합니다."
  subtitle=""
  aria_label="문서 주소 복사"
  badge="COPY"
  tracking_id="cta-kind-09"
  analytics_event="cta_kind_utility"
  id="cta-kind-utility"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

1

Mon, 01 Jan 0001 00:00:00 +0000

SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지

중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 보안 질문서입니다. 가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.

10-internal

Mon, 01 Jan 0001 00:00:00 +0000

NEW구성 살펴보기

같은 사이트 내부 섹션으로 이동합니다.


{{< cta
  kind="internal"
  label="구성 살펴보기"
  href="/lab/hugo-content-lab/30-components/"
  ref=""
  intent="internal"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="같은 사이트 내부 섹션으로 이동합니다."
  subtitle=""
  aria_label="내부 페이지로 이동"
  badge="NEW"
  tracking_id="cta-kind-10"
  analytics_event="cta_kind_internal"
  id="cta-kind-internal"
  class="is-internal"
  compact="false"
  disabled="false" >}}

11-copy

Mon, 01 Jan 0001 00:00:00 +0000

COPY복사

문서 주소를 복사합니다.


{{< cta
  kind="copy"
  label="복사"
  href="/lab/hugo-content-lab/30-components/"
  ref=""
  intent="copy"
  priority="utility"
  surface="inline"
  size="xs"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="문서 주소를 복사합니다."
  subtitle=""
  aria_label="문서 주소를 클립보드로 복사"
  badge="COPY"
  tracking_id="cta-kind-11"
  analytics_event="cta_kind_copy"
  id="cta-kind-copy"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

12-custom_offer

Mon, 01 Jan 0001 00:00:00 +0000

BETA맞춤 제안 보기

현재는 준비 중입니다.

맞춤 제안이 준비되면 이 자리에서 안내합니다.


{{< cta
  kind="custom_offer"
  label="맞춤 제안 보기"
  href="/offers/"
  ref=""
  intent="generic"
  priority="primary"
  surface="footer"
  size="md"
  tone="danger"
  align="center"
  target="_self"
  rel=""
  note="현재는 준비 중입니다."
  subtitle=""
  aria_label=""
  badge="BETA"
  tracking_id="cta-kind-12"
  analytics_event="cta_kind_custom_offer"
  id="cta-kind-custom-offer"
  class="is-offer"
  compact="false"
  disabled="true" >}}
맞춤 제안이 준비되면 이 자리에서 안내합니다.
{{< /cta >}}

13-custom

Mon, 01 Jan 0001 00:00:00 +0000

FALLBACK커스텀 폴백 확인

정의되지 않은 kind는 기본 preset으로 폴백합니다.


{{< cta
  kind="custom"
  label="커스텀 폴백 확인"
  href="/contact/"
  ref=""
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="정의되지 않은 kind는 기본 preset으로 폴백합니다."
  subtitle=""
  aria_label=""
  badge="FALLBACK"
  tracking_id="cta-kind-13"
  analytics_event="cta_kind_custom"
  id="cta-kind-custom"
  class="is-custom"
  compact="false"
  disabled="false" >}}

2

Mon, 01 Jan 0001 00:00:00 +0000

SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지

3

Mon, 01 Jan 0001 00:00:00 +0000

SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지

4

Mon, 01 Jan 0001 00:00:00 +0000

SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지

5

Mon, 01 Jan 0001 00:00:00 +0000

SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지

accordion shortcode

Mon, 01 Jan 0001 00:00:00 +0000

accordion shortcode

accordion는 themes/1/layouts/_shortcodes/readme/custom/accordion.html와 1:1로 대응하는 테스트 문서입니다.

accordionItem shortcode

Mon, 01 Jan 0001 00:00:00 +0000

accordionItem shortcode

accordionItem는 themes/1/layouts/_shortcodes/readme/custom/accordionItem.html와 1:1로 대응하는 테스트 문서입니다.

alert shortcode

Mon, 01 Jan 0001 00:00:00 +0000

alert shortcode

alert는 themes/1/layouts/_shortcodes/readme/custom/alert.html와 1:1로 대응하는 테스트 문서입니다.

audio shortcode

Mon, 01 Jan 0001 00:00:00 +0000

audio shortcode

audio는 themes/1/layouts/_shortcodes/readme/custom/audio.html와 1:1로 대응하는 테스트 문서입니다.

badge shortcode

Mon, 01 Jan 0001 00:00:00 +0000

badge shortcode

badge는 themes/1/layouts/_shortcodes/readme/custom/badge.html와 1:1로 대응하는 테스트 문서입니다.

bluesky shortcode

Mon, 01 Jan 0001 00:00:00 +0000

bluesky shortcode

bluesky는 themes/1/layouts/_shortcodes/readme/custom/bluesky.html와 1:1로 대응하는 테스트 문서입니다.

button shortcode

Mon, 01 Jan 0001 00:00:00 +0000

button shortcode

button는 themes/1/layouts/_shortcodes/readme/custom/button.html와 1:1로 대응하는 테스트 문서입니다.

card shortcode

Mon, 01 Jan 0001 00:00:00 +0000

card shortcode

card는 themes/1/layouts/_shortcodes/readme/custom/card.html와 1:1로 대응하는 테스트 문서입니다.

collapse shortcode

Mon, 01 Jan 0001 00:00:00 +0000

collapse shortcode

collapse는 themes/1/layouts/_shortcodes/readme/custom/collapse.html와 1:1로 대응하는 테스트 문서입니다.

column shortcode

Mon, 01 Jan 0001 00:00:00 +0000

column shortcode

column는 themes/1/layouts/_shortcodes/readme/custom/column.html와 1:1로 대응하는 테스트 문서입니다.

columns shortcode

Mon, 01 Jan 0001 00:00:00 +0000

columns shortcode

columns는 themes/1/layouts/_shortcodes/readme/custom/columns.html와 1:1로 대응하는 테스트 문서입니다.

CTA

Mon, 01 Jan 0001 00:00:00 +0000

cta

테스트 목적

CTA는 사용자가 다음 행동을 선택하는 지점입니다. 너무 약하면 눈에 띄지 않고, 너무 강하면 본문을 압도합니다.

확인 항목

행동 문구가 짧고 분명한가
보조 설명이 있더라도 주 행동을 가리지 않는가
외부 링크와 내부 링크가 구분되는가

예시

구조 검토 요청

평일 기준 1영업일 내 확인

cta shortcode

Mon, 01 Jan 0001 00:00:00 +0000

cta shortcode

cta는 themes/1/layouts/_shortcodes/readme/custom/cta.html와 1:1로 대응하는 테스트 문서입니다.

cta-all-empty

Mon, 01 Jan 0001 00:00:00 +0000

{{< cta
  kind=""
  label=""
  href=""
  ref=""
  intent=""
  priority=""
  surface=""
  size=""
  tone=""
  align=""
  target=""
  rel=""
  note=""
  subtitle=""
  aria_label=""
  badge=""
  tracking_id=""
  analytics_event=""
  id=""
  class=""
  compact=""
  disabled="" >}}

cta-default-only

Mon, 01 Jan 0001 00:00:00 +0000


{{< cta
  kind="default"
  label="자세히 보기"
  href="/contact/"
  ref=""
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note=""
  subtitle=""
  aria_label=""
  badge=""
  tracking_id=""
  analytics_event=""
  id=""
  class=""
  compact="false"
  disabled="false" >}}

cta-enum-commented

Mon, 01 Jan 0001 00:00:00 +0000

OFFICIAL외부 문서 열기공식 문서

새 창에서 열립니다


<!--
CTA shortcode keys (known preset / enum-like values)

kind (known presets used in this pack):
default | external | related | consult | download | newsletter | trial | price_check | utility | custom | copy | internal | custom_offer
unknown kind examples fall back to default behavior.

priority:
primary | secondary | tertiary | utility

surface:
inline | hero | in-content | after-content | footer | sidebar | header

size:
xs | sm | md | lg | xl

tone:
brand | accent | neutral | muted | success | warning | danger

align:
left | center | right | stretch

target:
_self | _blank
-->
{{< cta
  kind="external"
  label="외부 문서 열기"
  href="https://example.com/docs"
  ref="/blog/"
  intent="external"
  priority="primary"
  surface="hero"
  size="lg"
  tone="brand"
  align="center"
  target="_blank"
  rel="noopener noreferrer"
  note="새 창에서 열립니다"
  subtitle="공식 문서"
  aria_label="외부 문서 열기"
  badge="OFFICIAL"
  tracking_id="cta-docs-hero"
  analytics_event="cta_docs_open"
  id="cta-docs-hero"
  class="is-promo"
  compact="true"
  disabled="false" >}}

design-probe shortcode

Mon, 01 Jan 0001 00:00:00 +0000

design-probe shortcode

design-probe는 themes/1/layouts/_shortcodes/readme/custom/design-probe.html와 1:1로 대응하는 테스트 문서입니다.

details shortcode

Mon, 01 Jan 0001 00:00:00 +0000

details shortcode

details는 HTML의 <details> / <summary> 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.

details shortcode

Mon, 01 Jan 0001 00:00:00 +0000

details shortcode

facebook shortcode

Mon, 01 Jan 0001 00:00:00 +0000

facebook shortcode

facebook는 themes/1/layouts/_shortcodes/readme/custom/facebook.html와 1:1로 대응하는 테스트 문서입니다.

figure

Mon, 01 Jan 0001 00:00:00 +0000

클릭하여 원본 보기

" target="<nil>" rel="<nil>">

민감한 예시 이미지 ">

{{< figure
  src="https://res.cloudinary.com/dhfuy7rvysadf/image/upload/v1782785290/5._sample-migration-validation-dashboard_b2mfca.png"
  alt="Private example"
  caption="민감한 예시 이미지"
  privacy=true
  privacy_mode="blur"
  privacy_strength=18
  privacy_overlay_opacity=0.62
  privacy_message="클릭하여 원본 보기"
  privacy_label="원본 이미지를 보려면 선택하세요"
  privacy_click_to_reveal=true >}}

모자이크 처리된 이미지

" target="<nil>" rel="<nil>">

가림 방식 예시 ">

figure shortcode

Mon, 01 Jan 0001 00:00:00 +0000

figure shortcode

figure는 <figure>, <img>, <figcaption> 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.
이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.

공식 문서 기준으로 src, alt, width, height, loading, class, link, target, rel, title, caption, attr, attrlink를 사용할 수 있습니다. src는 이미지 경로, caption은 설명, attr과 attrlink는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1

figure shortcode

Mon, 01 Jan 0001 00:00:00 +0000

figure shortcode

figure2

Mon, 01 Jan 0001 00:00:00 +0000

블러 처리된 이미지 — 클릭하여 원본 보기

보안 검토 예시

편집용 예시 이미지 OpenAI Design Team

블러 처리된 이미지 — 클릭하여 원본 보기

보안 검토 예시

편집용 예시 이미지 ">OpenAI Design Team

figure3

Mon, 01 Jan 0001 00:00:00 +0000

블러 처리된 이미지 — 클릭하여 원본 보기

보안 검토 예시

편집용 예시 이미지 ">OpenAI Design Team

블러 처리된 이미지 — 클릭하여 원본 보기

보안 검토 예시

편집용 예시 이미지 ">OpenAI Design Team

gallery shortcode

Mon, 01 Jan 0001 00:00:00 +0000

gallery shortcode

gallery는 themes/1/layouts/_shortcodes/readme/custom/gallery.html와 1:1로 대응하는 테스트 문서입니다.

gist shortcode

Mon, 01 Jan 0001 00:00:00 +0000

gist shortcode

gist는 themes/1/layouts/_shortcodes/readme/custom/gist.html와 1:1로 대응하는 테스트 문서입니다.

highlight shortcode

Mon, 01 Jan 0001 00:00:00 +0000

highlight shortcode

highlight는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다.
Markdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다.

highlight shortcode

Mon, 01 Jan 0001 00:00:00 +0000

highlight shortcode

icon shortcode

Mon, 01 Jan 0001 00:00:00 +0000

icon shortcode

icon는 themes/1/layouts/_shortcodes/readme/custom/icon.html와 1:1로 대응하는 테스트 문서입니다.

instagram shortcode

Mon, 01 Jan 0001 00:00:00 +0000

instagram shortcode

instagram은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다.
정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다.

instagram shortcode

Mon, 01 Jan 0001 00:00:00 +0000

instagram shortcode

inTextImg shortcode

Mon, 01 Jan 0001 00:00:00 +0000

inTextImg shortcode

inTextImg는 themes/1/layouts/_shortcodes/readme/custom/inTextImg.html와 1:1로 대응하는 테스트 문서입니다.

katex shortcode

Mon, 01 Jan 0001 00:00:00 +0000

katex shortcode

katex는 themes/1/layouts/_shortcodes/readme/custom/katex.html와 1:1로 대응하는 테스트 문서입니다.

lead shortcode

Mon, 01 Jan 0001 00:00:00 +0000

lead shortcode

lead는 themes/1/layouts/_shortcodes/readme/custom/lead.html와 1:1로 대응하는 테스트 문서입니다.

linkedin shortcode

Mon, 01 Jan 0001 00:00:00 +0000

linkedin shortcode

linkedin는 themes/1/layouts/_shortcodes/readme/custom/linkedin.html와 1:1로 대응하는 테스트 문서입니다.

ltr shortcode

Mon, 01 Jan 0001 00:00:00 +0000

ltr shortcode

ltr는 themes/1/layouts/_shortcodes/readme/custom/ltr.html와 1:1로 대응하는 테스트 문서입니다.

mastodon shortcode

Mon, 01 Jan 0001 00:00:00 +0000

mastodon shortcode

mastodon는 themes/1/layouts/_shortcodes/readme/custom/mastodon.html와 1:1로 대응하는 테스트 문서입니다.

mermaid shortcode

Mon, 01 Jan 0001 00:00:00 +0000

mermaid shortcode

mermaid는 themes/1/layouts/_shortcodes/readme/custom/mermaid.html와 1:1로 대응하는 테스트 문서입니다.

param shortcode

Mon, 01 Jan 0001 00:00:00 +0000

param shortcode

param은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다.
문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다.

param shortcode

Mon, 01 Jan 0001 00:00:00 +0000

param shortcode

pinterest shortcode

Mon, 01 Jan 0001 00:00:00 +0000

pinterest shortcode

pinterest는 themes/1/layouts/_shortcodes/readme/custom/pinterest.html와 1:1로 대응하는 테스트 문서입니다.

qr shortcode

Mon, 01 Jan 0001 00:00:00 +0000

qr shortcode

qr은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다.
짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다.

qr shortcode

Mon, 01 Jan 0001 00:00:00 +0000

qr shortcode

rawhtml shortcode

Mon, 01 Jan 0001 00:00:00 +0000

rawhtml shortcode

rawhtml는 themes/1/layouts/_shortcodes/readme/custom/rawhtml.html와 1:1로 대응하는 테스트 문서입니다.

reddit shortcode

Mon, 01 Jan 0001 00:00:00 +0000

reddit shortcode

reddit는 themes/1/layouts/_shortcodes/readme/custom/reddit.html와 1:1로 대응하는 테스트 문서입니다.

ref shortcode

Mon, 01 Jan 0001 00:00:00 +0000

ref shortcode

ref는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다.
문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다.

ref shortcode

Mon, 01 Jan 0001 00:00:00 +0000

ref shortcode

ref target

Mon, 01 Jan 0001 00:00:00 +0000

ref target

이 페이지는 ref shortcode의 대상으로만 쓰는 가벼운 내부 페이지입니다.

경로를 실제로 존재하게 만들어 예제가 빌드에서 깨지지 않게 합니다.
출력은 링크 목적지만 제공하면 충분합니다.
문서 본문에는 상세 설명을 넣지 않아도 됩니다.

relref shortcode

Mon, 01 Jan 0001 00:00:00 +0000

relref shortcode

relref는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.
ref와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.

relref shortcode

Mon, 01 Jan 0001 00:00:00 +0000

relref shortcode

relref는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.
ref와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.

relref target

Mon, 01 Jan 0001 00:00:00 +0000

relref target

이 페이지는 relref shortcode 예제의 안정적인 참조 대상입니다.

상대 permalink를 확인하는 용도입니다.
문서 흐름을 방해하지 않도록 내용은 짧게 유지합니다.
ref와 달리 상대 경로 형태를 확인하는 데 초점을 둡니다.

rtl shortcode

Mon, 01 Jan 0001 00:00:00 +0000

rtl shortcode

rtl는 themes/1/layouts/_shortcodes/readme/custom/rtl.html와 1:1로 대응하는 테스트 문서입니다.

shortcode CTA default

Mon, 01 Jan 0001 00:00:00 +0000

priority

primary

BASECTA 버튼입니다자세히 보기

기본 동작을 확인합니다.

priority

primary

raw-code

{{< cta
  kind = "default"
  priority = "primary"

  size = "md"
  tone = "neutral"
  align = "center"

  badge = "BASE"
  label = "CTA 버튼입니다"
  subtitle = "자세히 보기"
  note = "기본 동작을 확인합니다."

  target = "_self"
  href = "https://example.com/"
  rel = ""

  aria_label = ""
  tracking_id = ""
  analytics_event = ""
  id = ""
  class = ""

  disabled = "false" 
  >}}

priority

primary

BASECTA 버튼입니다자세히 보기

기본 동작을 확인합니다.

shortcode CTA TEST

Mon, 01 Jan 0001 00:00:00 +0000

kind

default

BASECTA 버튼입니다

기본 동작을 확인합니다.

kind

default

raw-code

{{< cta
  kind = "default"
  priority = "primary"

  size = "md"
  tone = "neutral"
  align = "center"

  badge = "BASE"
  label = "CTA 버튼입니다"
  surface = "after-content"
  note = "기본 동작을 확인합니다."

  target = "_self"
  href = "https://example.com/"
  rel = ""

  aria_label = ""
  tracking_id = ""
  analytics_event = ""
  id = ""
  class = ""

  disabled = "false" 
  >}}

kind

external

BASECTA 버튼입니다

기본 동작을 확인합니다.

tab shortcode

Mon, 01 Jan 0001 00:00:00 +0000

tab shortcode

tab는 themes/1/layouts/_shortcodes/readme/custom/tab.html와 1:1로 대응하는 테스트 문서입니다.

tabs shortcode

Mon, 01 Jan 0001 00:00:00 +0000

tabs shortcode

tabs는 themes/1/layouts/_shortcodes/readme/custom/tabs.html와 1:1로 대응하는 테스트 문서입니다.

taxonomy term

Mon, 01 Jan 0001 00:00:00 +0000

taxonomy term

테스트 목적

term 페이지는 하나의 분류 안에 묶인 글을 적절한 밀도로 나열해야 합니다. 분류명만 보이고 글 목록이 깨지면 의미가 없습니다.

확인 항목

term 제목이 분명한가
관련 글 목록의 밀도가 적절한가
메타 정보가 지나치게 길지 않은가

기대 결과

사용자는 term 페이지에서 주제를 한 번 더 확인하고, 다음 글로 자연스럽게 이동할 수 있어야 합니다.

taxonomy 목록

Mon, 01 Jan 0001 00:00:00 +0000

taxonomy list

테스트 목적

카테고리와 태그의 목록 허브가 값이 없을 때도 화면을 깨지 않는지 확인합니다.

확인 항목

term이 많아졌을 때 정렬이 유지되는가
빈 상태 메시지가 적절한가
다국어에서 taxonomies가 같은 문맥으로 보이는가

기대 결과

taxonomy list는 글을 모으는 허브이면서, 항목이 없을 때도 안내만 남기고 붕괴되지 않아야 합니다.

threads shortcode

Mon, 01 Jan 0001 00:00:00 +0000

threads shortcode

threads는 themes/1/layouts/_shortcodes/readme/custom/threads.html와 1:1로 대응하는 테스트 문서입니다.

tiktok shortcode

Mon, 01 Jan 0001 00:00:00 +0000

tiktok shortcode

tiktok는 themes/1/layouts/_shortcodes/readme/custom/tiktok.html와 1:1로 대응하는 테스트 문서입니다.

video shortcode

Mon, 01 Jan 0001 00:00:00 +0000

video shortcode

video는 themes/1/layouts/_shortcodes/readme/custom/video.html와 1:1로 대응하는 테스트 문서입니다.

vimeo shortcode

Mon, 01 Jan 0001 00:00:00 +0000

vimeo shortcode

vimeo는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.
튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.

vimeo shortcode

Mon, 01 Jan 0001 00:00:00 +0000

vimeo shortcode

vimeo는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.
튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.

x shortcode

Mon, 01 Jan 0001 00:00:00 +0000

x shortcode

x는 X 포스트를 본문에 임베드하는 shortcode입니다.
과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.

공식 문서에는 user, id 조합의 예시와 함께 privacy.x.disable, privacy.x.enableDNT, privacy.x.simple, 그리고 services.x.disableInlineCSS 설정이 안내되어 있습니다. citeturn791175view3turn241043view4

x shortcode

Mon, 01 Jan 0001 00:00:00 +0000

x shortcode

x는 X 포스트를 본문에 임베드하는 shortcode입니다.
과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.

youtube shortcode

Mon, 01 Jan 0001 00:00:00 +0000

youtube shortcode

youtube는 YouTube 영상을 본문에 임베드하는 shortcode입니다.
가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다.

youtube shortcode

Mon, 01 Jan 0001 00:00:00 +0000

youtube shortcode

간격과 레이아웃

Mon, 01 Jan 0001 00:00:00 +0000

spacing layout

테스트 목적

spacing은 요소 간 거리뿐 아니라 페이지의 호흡을 결정합니다. 같은 페이지 안에서도 섹션과 카드와 본문이 서로 다른 리듬을 가져야 합니다.

확인 항목

제목과 본문 사이 간격이 일관적인가
카드 목록의 밀도가 적절한가
모바일에서 여백이 너무 좁거나 넓지 않은가

판정

간격이 일정하면 정보 계층이 보이고, 간격이 무너지면 아무리 좋은 콘텐츠도 조립품처럼 보입니다.

검색

Mon, 01 Jan 0001 00:00:00 +0000

search

테스트 목적

검색은 기능이 보이지 않을 때도 많지만, 막상 사용하면 UI 품질이 바로 드러나는 페이지입니다. 입력 상태, 결과 없음, 결과 목록을 모두 확인합니다.

확인 항목

검색 입력이 명확하게 보이는가
결과 없음 상태가 무너짐 없이 표시되는가
결과가 많아져도 정렬과 탐색이 가능한가
언어별 검색이 예상한 대로 동작하는가

기대 결과

검색은 조용하지만 신뢰가 높아야 합니다. 아무 결과가 없어도 사용자가 다음 행동을 선택할 수 있어야 합니다.

검증 로그

Mon, 01 Jan 0001 00:00:00 +0000

verification log

목적

이 문서는 랩 검증 중에 남기는 결과 기록입니다. 언제 무엇을 확인했고, 무엇이 통과 또는 실패였는지를 간단하지만 재현 가능하게 적습니다.

기록 항목

항목	내용
날짜	검증한 시점
범위	확인한 섹션과 페이지
결과	통과 / 주의 / 실패
메모	재현 가능한 참고 사항

예시 메모

20-page-types: home과 section list가 정상
30-components: buttons와 cards는 통과
40-markup-rendering: raw HTML은 주의 필요

경영진이 승인하는 SaaS 구매 사업계획서 작성법

Mon, 01 Jan 0001 00:00:00 +0000

중소기업에서 SaaS 구매를 승인받기 위한 사업계획서 구조, 비용·효과·리스크 정리법, 대안 비교표, ROI 설득 포인트를 정리한 실전 가이드

Mon, 01 Jan 0001 00:00:00 +0000

테스트 목적

관련 글은 추천 알고리즘이 아니라 문맥 연결입니다. 비슷한 주제의 글이 너무 멀어지지 않게 배치되어야 합니다.

확인 항목

현재 글과 의미적으로 가까운가
제목과 설명이 중복되지 않는가
항목 수가 과하지 않은가

그림

Mon, 01 Jan 0001 00:00:00 +0000

figures

테스트 목적

figure는 이미지를 설명하고 본문에 다시 연결하는 역할을 합니다. 그림이 있더라도 본문이 끊기지 않아야 합니다.

예시

" target="<nil>" rel="<nil>">

구조 다이어그램

이미지와 캡션이 본문 의미를 보강해야 합니다. ">

기본 shortcode

Mon, 01 Jan 0001 00:00:00 +0000

built-in shortcodes

테스트 목적

Hugo 기본 shortcode는 문서 구조와 별개로 동작해야 합니다. figure, details, raw HTML, embed 계열이 본문 안에서 안전하게 렌더링되는지 봅니다.

예시

" target="<nil>" rel="<nil>">

figure 예시

이미지 shortcode가 본문 레이아웃을 깨지 않아야 합니다. ">

기본 마크다운

Mon, 01 Jan 0001 00:00:00 +0000

markdown basic

테스트 목적

제목, 문단, 목록, 인용, 코드 블록 같은 기본 마크다운 요소가 깨지지 않고 렌더링되는지 확인합니다.

확인 항목

heading 계층이 자연스러운가
list와 blockquote가 본문 리듬을 해치지 않는가
inline code와 code block이 명확히 구분되는가

예시

이 인용은 본문과 같은 폭 안에서 읽혀야 합니다.

긴 글

Mon, 01 Jan 0001 00:00:00 +0000

long post

서론

긴 글은 문서의 체력을 보여 줍니다. 목차, 섹션 구조, 인용, 코드, 이미지, shortcode가 함께 붙을 때도 읽기 리듬이 유지되어야 합니다.

배경

이 글은 단순한 예제가 아니라 실제 운영 글처럼 보이도록 설계했습니다. 긴 글은 중간에 한 번 더 호흡을 정리해 주는 소제목이 필요합니다.

단일 페이지

Mon, 01 Jan 0001 00:00:00 +0000

single page

테스트 목적

본문형 페이지는 제목, 설명, 메타, 목차, 본문 사이의 균형이 중요합니다. 정보가 너무 많으면 산만하고, 너무 적으면 구조가 사라집니다.

확인 항목

제목과 설명이 같은 계층에서 충돌하지 않는가
목차가 필요한 문서에만 적절히 나타나는가
본문 너비와 줄길이가 읽기 좋은가

기대 결과

독자는 이 페이지를 읽으며 구조를 바로 파악하고, 다음 페이지로 이동할 수 있어야 합니다.

디자인 토큰

Mon, 01 Jan 0001 00:00:00 +0000

design tokens

테스트 목적

토큰이 CSS, 템플릿, shortcode에서 같은 의미로 읽히는지 확인합니다. 숫자를 직접 박아 넣는 대신 토큰이 흐르는지 보는 테스트입니다.

확인 항목

기초 값과 의미 값이 구분되는가
컴포넌트가 직접 숫자를 들고 있지 않은가
토큰 변경이 여러 UI에 예측 가능하게 반영되는가

기대 결과

페이지 상단의 핵심 카드, 표, 본문 간격이 같은 시각 언어를 유지해야 합니다.

릴리스 체크리스트

Mon, 01 Jan 0001 00:00:00 +0000

release checklist

점검 항목

content/ko의 경로가 모두 의도한 위치에 있는가
docs와 lab의 역할이 섞이지 않았는가
blog에 검증 전용 글이 들어가지 않았는가
기본 taxonomy와 menu가 연결되는가
TOML front matter가 모두 유효한가
모바일 화면에서 주요 페이지가 깨지지 않는가

릴리스 기준

모든 필수 항목이 통과해야 릴리스 가능합니다. 하나라도 불명확하면 그 항목은 다시 문서화해야 합니다.

메뉴

Mon, 01 Jan 0001 00:00:00 +0000

menus

테스트 목적

메뉴는 content가 아니라 구성 파일에서 관리해야 합니다. 이 페이지는 메뉴 구조를 이해하고, 바뀌어도 어디를 먼저 수정해야 하는지 확인하는 기준입니다.

모션과 형태

Mon, 01 Jan 0001 00:00:00 +0000

motion shape

테스트 목적

모션과 형태는 거의 보이지 않지만 인상을 크게 바꿉니다. 과한 motion은 장식이 되고, 너무 적은 shape는 페이지를 딱딱하게 만듭니다.

확인 항목

hover와 focus 상태가 구분되는가
radius가 카드와 버튼에 같은 문법으로 적용되는가
transition이 빠르되 거슬리지 않는가

기대 결과

레이어는 분명해야 하지만 과장되면 안 됩니다. 부드러우면서도 단정한 느낌이 목표입니다.

배지

Mon, 01 Jan 0001 00:00:00 +0000

badges

테스트 목적

배지는 메인 정보가 아니라 보조 신호입니다. 상태, 분류, 짧은 메타가 본문을 가리지 않는지 확인합니다.

확인 항목

짧은 라벨이 적절한 밀도로 보이는가
배지가 줄바꿈될 때 디자인이 깨지지 않는가
색이 정보의 주인공이 되지 않는가

기대 결과

배지는 시선을 빼앗지 않으면서도 맥락을 보강해야 합니다.

버튼

Mon, 01 Jan 0001 00:00:00 +0000

buttons

테스트 목적

버튼은 사용자의 행동을 유도하는 가장 중요한 상호작용 요소입니다. primary, secondary, external, utility가 같은 시스템 안에서 분리되어 보여야 합니다.

확인 항목

primary 버튼이 가장 먼저 읽히는가
secondary 버튼이 보조 행동으로 인식되는가
external 행동이 내부 이동과 헷갈리지 않는가
긴 라벨이 줄바꿈되어도 버튼 구조가 유지되는가

shortcode 예시

구조 확인 시작

브레드크럼

Mon, 01 Jan 0001 00:00:00 +0000

breadcrumbs

테스트 목적

breadcrumb는 사용자가 지금 어디에 있는지, 어디에서 왔는지 설명합니다. 깊은 구조일수록 중요합니다.

확인 항목

상위 계층이 올바르게 나열되는가
현재 페이지가 마지막에 분명히 표시되는가
모바일에서 길이가 과도하지 않은가

기대 결과

breadcrumb는 현재 문맥을 잃지 않게 해 주는 작은 나침반입니다.

색상과 표면

Mon, 01 Jan 0001 00:00:00 +0000

color surface

테스트 목적

배경과 카드, 보조 표면의 위계가 분리되어야 합니다. 같은 색을 쓰더라도 역할이 다르면 시각적 레이어가 달라 보여야 합니다.

확인 항목

페이지 배경과 카드가 섞이지 않는가
강조 영역이 너무 많지 않은가
라이트와 다크에서 바탕 인상이 유지되는가

시각 샘플

" target="<nil>" rel="<nil>">

표면 레이어

static 이미지를 사용해 figure 렌더링과 비주얼 계층을 함께 점검합니다. ">

섹션 목록

Mon, 01 Jan 0001 00:00:00 +0000

section list

테스트 목적

섹션 목록은 하위 페이지의 질서를 보여 줍니다. 제목, 요약, 카드, 메타가 과도하지 않으면서도 충분히 읽혀야 합니다.

확인 항목

목록 정렬이 예측 가능한가
빈 섹션 상태에서도 UI가 무너지지 않는가
하위 페이지의 요약이 과도하게 길지 않은가

기대 결과

목록 페이지는 많은 정보를 한 화면에 넣는 대신, 사용자가 다음 단계를 고를 수 있게 도와야 합니다.

섹션 페이지

Mon, 01 Jan 0001 00:00:00 +0000

section pages

테스트 목적

섹션 페이지는 하위 콘텐츠를 모으는 허브입니다. 요약, 목록, 읽는 순서가 분명해야 합니다.

확인 항목

섹션 소개와 하위 목록이 충돌하지 않는가
하위 페이지가 많아져도 읽기 쉽나
섹션 허브와 실제 본문이 혼동되지 않는가

알림

Mon, 01 Jan 0001 00:00:00 +0000

alerts

테스트 목적

알림은 주의, 경고, 정보, 성공 상태를 전달합니다. 내용이 짧아도 눈에 띄어야 하지만, 페이지 전체를 지배하면 안 됩니다.

확인 항목

알림이 본문 문단과 혼동되지 않는가
경고와 정보의 계층이 분리되는가
긴 메시지가 들어가도 박스가 무너지지 않는가

raw HTML 예시

검증 알림: 상태 메시지는 본문보다 앞서 읽혀야 합니다.

실패 기준

알림이 본문처럼 보여 버리는 경우
색만 바뀌고 의미 구조가 없는 경우

언어 전환기

Mon, 01 Jan 0001 00:00:00 +0000

language switcher

테스트 목적

언어 전환은 단순히 다른 언어 홈으로 보내는 링크가 아니라, 현재 문서의 대응 번역으로 이동해야 합니다.

확인 항목

현재 페이지가 가능한 경우 같은 문서의 다른 언어로 이동하는가
번역이 없을 때 안전한 대체 경로가 있는가
표기와 순서가 언어별로 일관적인가

운영 원칙

secondary 언어를 준비하지 않았다면 구조만 맞추고 본문은 비워 두는 편이 낫습니다. 잘못된 번역 연결보다 비어 있는 구조가 더 안전합니다.

업그레이드 요약

Mon, 01 Jan 0001 00:00:00 +0000

upgrade summary

이번에 정리한 것

content/ko를 기준 트리로 재정리
docs/content-structure와 docs/design-system을 기준 문서로 정비
lab/hugo-content-lab을 페이지 타입, 컴포넌트, 마크업, 네비게이션, 구조, 운영으로 분리
blog를 실제 발행 글 형식으로 정리
front matter를 TOML 기준으로 통일

영향 범위

폴더	영향
content/ko/docs	기준 문서가 읽기 쉬워짐
content/ko/lab	검증 포인트가 더 세분화됨
content/ko/blog	운영 글과 검증 글이 분리됨
content/ko/categories, tags	taxonomy 진입점이 명확해짐

결론

이번 작업의 핵심은 파일 수를 늘린 것이 아니라, 각 파일의 책임을 분명히 해서 앞으로의 확장이 예측 가능해진 것입니다.

업데이트 로그

Mon, 01 Jan 0001 00:00:00 +0000

update log

변경 기록 형식

항목	설명
날짜	2026-06-23
대상	content/ko 전반
요약	docs와 lab을 중심으로 콘텐츠 구조와 front matter를 정리
영향	탐색, taxonomy, page-hub, shortcode 검증 흐름 개선

메모

모든 콘텐츠는 KO 기준으로 먼저 완성
TOML front matter로 통일
검증용 콘텐츠는 lab에만 배치
운영 글은 blog에서만 유지

엣지 케이스

Mon, 01 Jan 0001 00:00:00 +0000

edge cases

테스트 목적

UI는 정상 입력에서만이 아니라 엣지 케이스에서 얼마나 버티는지로 품질이 드러납니다.

확인 항목

아주 긴 URL이 줄바꿈을 망치지 않는가
한 줄짜리 강한 강조가 과도하지 않은가
영문과 한글이 뒤섞인 긴 단어가 넘치지 않는가

예시

This page keeps long URLs and English phrases readable even when the surrounding content is in Korean.

이 짧은 예시는 오른쪽 방향 컨테이너도 레이아웃을 깨지 않는지 확인하기 위한 메모입니다.

임베드

Mon, 01 Jan 0001 00:00:00 +0000

embeds

테스트 목적

외부 임베드나 iframe은 레이아웃을 크게 흔들 수 있습니다. 폭, 높이, 반응형 처리, 주변 여백을 함께 봅니다.

확인 항목

임베드가 페이지 너비를 넘지 않는가
주변 본문과 간격이 충분한가
로딩 실패 시도 페이지가 무너지지 않는가

메모

실제 외부 서비스가 없어도, 이 페이지는 임베드가 들어오는 자리의 여백과 비율을 검증하는 기준이 됩니다.

중간 글

Mon, 01 Jan 0001 00:00:00 +0000

medium post

중간 길이 글은 가장 현실적인 테스트입니다. 너무 짧지도, 너무 길지도 않기 때문에 본문 리듬과 구성 감각이 드러납니다.

섹션 1

이 문단은 흐름을 확인하기 위한 문장입니다. 한글 설명 사이에 English term이 들어가도 리듬이 유지되어야 합니다.

중소기업이 B2B SaaS를 도입하기 전에 꼭 확인해야 할 것들

Mon, 01 Jan 0001 00:00:00 +0000

비교·검증·예산 승인까지 한 번에 판단할 수 있도록 B2B SaaS 도입 전 체크포인트를 정리했다.

중소기업이 B2B SaaS를 도입하기 전에 꼭 확인해야 할 것들

Mon, 01 Jan 0001 00:00:00 +0000

중소기업이 B2B SaaS를 도입할 때 필요한 비교 기준, 예산 승인 전 검증 포인트, 숨은 비용, 도입 난이도와 체크리스트를 실전 관점에서 정리했다.

짧은 글

Mon, 01 Jan 0001 00:00:00 +0000

short post

이 글은 짧지만 구조가 보이도록 작성했습니다. 실제 서비스에서는 짧은 공지나 소개 글이 이런 형식을 자주 씁니다.

확인 포인트

첫 문단만 읽어도 주제가 보이는가
불필요하게 장황하지 않은가
짧아도 결론이 있는가

중간 길이 글 보기

카드

Mon, 01 Jan 0001 00:00:00 +0000

cards

테스트 목적

카드는 내용 묶음의 가장 흔한 표현입니다. 제목, 설명, 메타, 링크가 같은 규칙으로 보이는지 확인합니다.

확인 항목

제목 길이가 달라도 높이감이 유지되는가
설명 유무에 따라 카드가 부자연스럽게 바뀌지 않는가
링크가 있는 카드와 없는 카드가 시각적으로 구분되는가

기대 결과

카드는 여러 개가 나열되어도 서로 싸우지 않고, 정보 묶음으로 읽혀야 합니다.

카테고리

Mon, 01 Jan 0001 00:00:00 +0000

타이포그래피와 언어

Mon, 01 Jan 0001 00:00:00 +0000

typography language

테스트 목적

한글 본문, 영어 약어, 숫자, 코드가 한 문단 안에 섞일 때도 읽기 리듬이 유지되는지 확인합니다.

확인 항목

제목의 줄바꿈이 과도하지 않은가
영문 약어가 본문보다 튀지 않는가
숫자와 단위가 문단 흐름을 깨지 않는가
코드와 본문이 같은 톤으로 섞이지 않는가

예시

Hugo, frontend, UI, CSS, 2026 같은 조합이 자연스럽게 읽혀야 합니다. 같은 문장에서 한글과 영문이 섞여도 줄간격과 시각적 무게가 안정적이어야 합니다.

테마 shortcode

Mon, 01 Jan 0001 00:00:00 +0000

theme shortcodes

테스트 목적

테마 shortcode는 디자인 시스템과 연결되어야 합니다. 토큰, spacing, 색상, 레이아웃 가정을 별도로 유지하지 않는지 확인합니다.

예시

다음 검증 페이지 보기

페이지네이션

Mon, 01 Jan 0001 00:00:00 +0000

pagination

테스트 목적

목록이 길어질수록 페이징의 품질이 중요해집니다. 현재 위치, 이전/다음 관계, 버튼 크기가 안정적이어야 합니다.

확인 항목

현재 페이지가 충분히 강조되는가
이전/다음 이동이 직관적인가
숫자 범위가 너무 넓거나 좁지 않은가

평면 페이지

Mon, 01 Jan 0001 00:00:00 +0000

flat pages

테스트 목적

평면 페이지는 구조가 얕아서 단순해 보이지만, 실제로는 경로와 메타데이터를 가장 깔끔하게 보여 줍니다.

확인 항목

상위 섹션 없이도 페이지가 독립적으로 보이는가
breadcrumb가 과하지 않은가
본문과 메타가 균형을 이루는가

폼

Mon, 01 Jan 0001 00:00:00 +0000

forms

테스트 목적

폼은 상태가 많은 UI입니다. 라벨, 힌트, 오류, 도움말이 한 덩어리로 읽혀야 하고, 시각적으로도 분리되어야 합니다.

raw HTML 예시

확인 항목

라벨이 입력과 제대로 연결되는가
도움말이 입력보다 앞서거나 뒤섞이지 않는가
오류 상태가 색상만으로 표현되지 않는가

표

Mon, 01 Jan 0001 00:00:00 +0000

tables

테스트 목적

표는 정보 비교에 강하지만, 화면이 좁아지면 가장 쉽게 깨집니다. 표 자체보다 가독성과 줄바꿈을 함께 확인합니다.

예시

항목	설명	확인
row 1	짧은 값	문제가 없는가
row 2	긴 설명이 들어가는 값	줄바꿈이 자연스러운가
row 3	taxonomy / navigation	폭이 과하지 않은가

확인 항목

헤더가 분명한가
셀 간 간격이 충분한가
모바일에서 가로 스크롤이 필요하면 안내가 있는가

푸터

Mon, 01 Jan 0001 00:00:00 +0000

테스트 목적

푸터는 사이트 끝이 아니라 보조 탐색의 출발점입니다. 링크가 너무 많아도 안 되고, 너무 적어도 정보가 사라집니다.

확인 항목

정책 링크와 보조 링크가 분리되는가
복잡한 정보가 한 화면에 과밀하지 않은가
언어별 푸터 문맥이 일관적인가

헤더

Mon, 01 Jan 0001 00:00:00 +0000

테스트 목적

헤더는 사이트의 첫 인상입니다. 브랜드, 주요 메뉴, 언어 전환, 검색 진입점이 서로 싸우지 않아야 합니다.

확인 항목

메뉴가 너무 많아 첫 화면을 침범하지 않는가
모바일에서 메뉴가 자연스럽게 접히는가
현재 섹션이 적절히 강조되는가

기대 결과

헤더는 존재감은 분명하되, 콘텐츠보다 앞서 나가지 않아야 합니다.

혼합 구성

Mon, 01 Jan 0001 00:00:00 +0000

mixed composition

테스트 목적

실제 글은 한 가지 마크업만 쓰지 않습니다. 문단과 표와 이미지와 shortcode가 섞여도 의미 계층이 유지되어야 합니다.

예시

먼저 개요를 읽습니다.
표로 비교합니다.
shortcode로 보조 정보를 확인합니다.
이미지로 레이아웃을 검증합니다.

" target="<nil>" rel="<nil>">

혼합 구성

여러 마크업이 섞여도 본문 흐름이 유지되어야 합니다. ">

홈

Mon, 01 Jan 0001 00:00:00 +0000

home

테스트 목적

홈은 가장 먼저 보이는 페이지이자, 가장 적게 설명해야 하는 페이지입니다. 진입점은 분명해야 하지만 첫 화면이 너무 무거우면 안 됩니다.

확인 항목

상단 네비게이션이 먼저 보이는가
핵심 섹션으로 바로 이동할 수 있는가
요약 정보가 첫 화면을 과하게 차지하지 않는가
카드 수가 많아져도 질서가 유지되는가

기대 결과

홈은 목록 페이지가 아니라 항해 지도처럼 보여야 합니다. 가장 중요한 영역을 먼저, 나머지는 자연스럽게 아래에 배치합니다.

확장 마크다운

Mon, 01 Jan 0001 00:00:00 +0000

markdown extended

테스트 목적

확장 마크다운 요소가 글의 의미를 해치지 않고 잘 붙는지 확인합니다.

확인 항목

표가 좁은 화면에서 무너지지 않는가
긴 링크와 긴 단어가 줄바꿈 정책을 깨지 않는가
강조와 취소선이 과도하지 않은가

예시

항목	설명
강조	중요한 문장에만 사용
취소선	변경 전후를 보여줄 때만 사용
긴 링크	본문 폭을 확인하는 엣지 케이스