[{"content":" NEW요금제 확인가장 많이 쓰는 구성 배지와 subtitle을 함께 쓰는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;요금제 확인\u0026#34; href=\u0026#34;/pricing/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;pricing\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;배지와 subtitle을 함께 쓰는 예시입니다.\u0026#34; subtitle=\u0026#34;가장 많이 쓰는 구성\u0026#34; aria_label=\u0026#34;요금제 확인\u0026#34; badge=\u0026#34;NEW\u0026#34; tracking_id=\u0026#34;cta-meta-01\u0026#34; analytics_event=\u0026#34;cta_meta_badge\u0026#34; id=\u0026#34;cta-meta-badge\u0026#34; class=\u0026#34;is-highlighted\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/01-badge-subtitle/","summary":"\u003cdiv id=\"cta-meta-badge\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-highlighted\" data-cta-kind=\"default\" data-cta-intent=\"pricing\" 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=\"cta-meta-01\" data-analytics-event=\"cta_meta_badge\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/pricing/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"요금제 확인\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eNEW\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e요금제 확인\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e가장 많이 쓰는 구성\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e배지와 subtitle을 함께 쓰는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;요금제 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/pricing/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;pricing\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;배지와 subtitle을 함께 쓰는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;가장 많이 쓰는 구성\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;요금제 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;NEW\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-meta-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_meta_badge\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-meta-badge\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-highlighted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-badge-subtitle"},{"content":" BASE기본 CTA자세히 보기 기본 동작을 확인합니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;기본 CTA\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;기본 동작을 확인합니다.\u0026#34; subtitle=\u0026#34;자세히 보기\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;BASE\u0026#34; tracking_id=\u0026#34;cta-kind-01\u0026#34; analytics_event=\u0026#34;cta_kind_default\u0026#34; id=\u0026#34;cta-kind-default\u0026#34; class=\u0026#34;is-default\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/01-default/","summary":"\u003cdiv id=\"cta-kind-default\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-default\" data-cta-kind=\"default\" data-cta-intent=\"generic\" 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=\"cta-kind-01\" data-analytics-event=\"cta_kind_default\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e기본 CTA\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e자세히 보기\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;기본 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;기본 동작을 확인합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;자세히 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;BASE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-default"},{"content":" TEST링크 우선순위 확인우선순위 테스트 href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.\n{{\u0026lt; cta kind=\u0026#34;related\u0026#34; label=\u0026#34;링크 우선순위 확인\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; intent=\u0026#34;related\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.\u0026#34; subtitle=\u0026#34;우선순위 테스트\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;TEST\u0026#34; tracking_id=\u0026#34;cta-routing-01\u0026#34; analytics_event=\u0026#34;cta_route_test\u0026#34; id=\u0026#34;cta-routing-both\u0026#34; class=\u0026#34;is-test\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/01-href-and-ref/","summary":"\u003cdiv id=\"cta-routing-both\" class=\"cta cta--kind-related cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-test\" data-cta-kind=\"related\" data-cta-intent=\"related\" 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=\"cta-routing-01\" data-analytics-event=\"cta_route_test\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eTEST\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e링크 우선순위 확인\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e우선순위 테스트\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003ehref와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;링크 우선순위 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;우선순위 테스트\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;TEST\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-routing-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_route_test\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-routing-both\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-test\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-href-and-ref"},{"content":" TOP핵심 CTA영웅 영역 가장 눈에 띄는 핵심 CTA입니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;핵심 CTA\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;xl\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;가장 눈에 띄는 핵심 CTA입니다.\u0026#34; subtitle=\u0026#34;영웅 영역\u0026#34; aria_label=\u0026#34;핵심 CTA\u0026#34; badge=\u0026#34;TOP\u0026#34; tracking_id=\u0026#34;cta-visual-01\u0026#34; analytics_event=\u0026#34;cta_visual_top\u0026#34; id=\u0026#34;cta-visual-hero\u0026#34; class=\u0026#34;is-hero\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/01-primary-hero-xl-brand-center/","summary":"\u003cdiv id=\"cta-visual-hero\" class=\"cta cta--kind-default cta--priority-primary cta--surface-hero cta--size-xl cta--tone-brand cta--align-center cta--has-body is-hero\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"xl\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-visual-01\" data-analytics-event=\"cta_visual_top\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"핵심 CTA\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eTOP\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e핵심 CTA\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e영웅 영역\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e가장 눈에 띄는 핵심 CTA입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;핵심 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xl\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;가장 눈에 띄는 핵심 CTA입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;영웅 영역\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;핵심 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;TOP\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-visual-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_visual_top\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-visual-hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-primary-hero-xl-brand-center"},{"content":" INFO상담 신청본문 포함 단일 문단 본문 예시입니다.\n평일 기준 1영업일 내에 회신드립니다. {{\u0026lt; cta kind=\u0026#34;consult\u0026#34; label=\u0026#34;상담 신청\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;consult\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;단일 문단 본문 예시입니다.\u0026#34; subtitle=\u0026#34;본문 포함\u0026#34; aria_label=\u0026#34;상담 신청\u0026#34; badge=\u0026#34;INFO\u0026#34; tracking_id=\u0026#34;cta-body-01\u0026#34; analytics_event=\u0026#34;cta_body_single\u0026#34; id=\u0026#34;cta-body-single\u0026#34; class=\u0026#34;is-content\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 평일 기준 1영업일 내에 회신드립니다. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/01-single-paragraph/","summary":"\u003cdiv id=\"cta-body-single\" class=\"cta cta--kind-consult cta--priority-primary cta--surface-after-content cta--size-md cta--tone-success cta--align-center cta--has-body is-content\" data-cta-kind=\"consult\" data-cta-intent=\"consult\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-body-01\" data-analytics-event=\"cta_body_single\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"상담 신청\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eINFO\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e상담 신청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e본문 포함\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e단일 문단 본문 예시입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e평일 기준 1영업일 내에 회신드립니다.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;단일 문단 본문 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;본문 포함\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;INFO\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-body-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_body_single\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-body-single\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e평일 기준 1영업일 내에 회신드립니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-single-paragraph"},{"content":" FALLBACK미지의 CTAfallback 알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.\n{{\u0026lt; cta kind=\u0026#34;mystery_campaign\u0026#34; label=\u0026#34;미지의 CTA\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.\u0026#34; subtitle=\u0026#34;fallback\u0026#34; aria_label=\u0026#34;미지의 CTA\u0026#34; badge=\u0026#34;FALLBACK\u0026#34; tracking_id=\u0026#34;cta-fallback-01\u0026#34; analytics_event=\u0026#34;cta_fallback_unknown\u0026#34; id=\u0026#34;cta-fallback-unknown\u0026#34; class=\u0026#34;is-fallback\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/05-fallback/01-unknown-kind/","summary":"\u003cdiv id=\"cta-fallback-unknown\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-fallback\" data-cta-kind=\"default\" data-cta-intent=\"generic\" 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=\"cta-fallback-01\" data-analytics-event=\"cta_fallback_unknown\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"미지의 CTA\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eFALLBACK\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e미지의 CTA\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003efallback\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;mystery_campaign\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;미지의 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;fallback\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;미지의 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;FALLBACK\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-fallback-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_fallback_unknown\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-fallback-unknown\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-fallback\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-unknown-kind"},{"content":" A11Y이벤트 추적접근성 접근성 라벨과 추적 ID를 함께 넣는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;이벤트 추적\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;접근성 라벨과 추적 ID를 함께 넣는 예시입니다.\u0026#34; subtitle=\u0026#34;접근성\u0026#34; aria_label=\u0026#34;문서 주소를 복사\u0026#34; badge=\u0026#34;A11Y\u0026#34; tracking_id=\u0026#34;cta-meta-02\u0026#34; analytics_event=\u0026#34;cta_meta_track\u0026#34; id=\u0026#34;cta-meta-aria\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/02-aria-tracking/","summary":"\u003cdiv id=\"cta-meta-aria\" class=\"cta cta--kind-default cta--priority-utility cta--surface-inline cta--size-sm cta--tone-brand cta--align-left cta--has-body cta--compact u-track-cta\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"sm\" data-cta-tone=\"brand\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-meta-02\" data-analytics-event=\"cta_meta_track\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"문서 주소를 복사\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eA11Y\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e이벤트 추적\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e접근성\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e접근성 라벨과 추적 ID를 함께 넣는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;이벤트 추적\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;접근성 라벨과 추적 ID를 함께 넣는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;접근성\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;문서 주소를 복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;A11Y\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-meta-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_meta_track\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-meta-aria\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-aria-tracking"},{"content":" WARN정렬 폴백정렬 검증 잘못된 align 값은 기본 정렬로 처리됩니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;정렬 폴백\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;sidebar\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;warning\u0026#34; align=\u0026#34;bogus\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;잘못된 align 값은 기본 정렬로 처리됩니다.\u0026#34; subtitle=\u0026#34;정렬 검증\u0026#34; aria_label=\u0026#34;정렬 폴백\u0026#34; badge=\u0026#34;WARN\u0026#34; tracking_id=\u0026#34;cta-fallback-02\u0026#34; analytics_event=\u0026#34;cta_fallback_align\u0026#34; id=\u0026#34;cta-fallback-align\u0026#34; class=\u0026#34;is-warning\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/05-fallback/02-bogus-align/","summary":"\u003cdiv id=\"cta-fallback-align\" class=\"cta cta--kind-default cta--priority-utility cta--surface-sidebar cta--size-xs cta--tone-warning cta--align-center cta--has-body cta--compact is-warning\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"utility\" data-cta-surface=\"sidebar\" data-cta-size=\"xs\" data-cta-tone=\"warning\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-fallback-02\" data-analytics-event=\"cta_fallback_align\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"정렬 폴백\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eWARN\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e정렬 폴백\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e정렬 검증\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e잘못된 align 값은 기본 정렬로 처리됩니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;정렬 폴백\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;sidebar\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;warning\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;bogus\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;잘못된 align 값은 기본 정렬로 처리됩니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;정렬 검증\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;정렬 폴백\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;WARN\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-fallback-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_fallback_align\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-fallback-align\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-warning\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-bogus-align"},{"content":" OFFICIAL외부 문서 열기공식 문서 새 창에서 외부 문서를 엽니다.\n{{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;외부 문서 열기\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;새 창에서 외부 문서를 엽니다.\u0026#34; subtitle=\u0026#34;공식 문서\u0026#34; aria_label=\u0026#34;외부 링크\u0026#34; badge=\u0026#34;OFFICIAL\u0026#34; tracking_id=\u0026#34;cta-kind-02\u0026#34; analytics_event=\u0026#34;cta_kind_external\u0026#34; id=\u0026#34;cta-kind-external\u0026#34; class=\u0026#34;is-external\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/02-external/","summary":"\u003cdiv id=\"cta-kind-external\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-brand cta--align-center cta--has-body cta--compact is-external\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-kind-02\" data-analytics-event=\"cta_kind_external\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"외부 링크\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eOFFICIAL\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e외부 문서 열기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e공식 문서\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e새 창에서 외부 문서를 엽니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;외부 문서 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;새 창에서 외부 문서를 엽니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;공식 문서\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;외부 링크\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;OFFICIAL\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-external"},{"content":" OFFICIAL새 창 안전 열기보안 속성 포함 외부 도메인은 새 창으로 엽니다.\n{{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;새 창 안전 열기\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;외부 도메인은 새 창으로 엽니다.\u0026#34; subtitle=\u0026#34;보안 속성 포함\u0026#34; aria_label=\u0026#34;새 창으로 외부 문서 열기\u0026#34; badge=\u0026#34;OFFICIAL\u0026#34; tracking_id=\u0026#34;cta-routing-02\u0026#34; analytics_event=\u0026#34;cta_external_open\u0026#34; id=\u0026#34;cta-routing-blank\u0026#34; class=\u0026#34;is-external\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/02-external-target-blank/","summary":"\u003cdiv id=\"cta-routing-blank\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-brand cta--align-center cta--has-body cta--compact is-external\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-routing-02\" data-analytics-event=\"cta_external_open\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"새 창으로 외부 문서 열기\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eOFFICIAL\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e새 창 안전 열기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e보안 속성 포함\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e외부 도메인은 새 창으로 엽니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;새 창 안전 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;외부 도메인은 새 창으로 엽니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;보안 속성 포함\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;새 창으로 외부 문서 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;OFFICIAL\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-routing-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_external_open\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-routing-blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-external-target-blank"},{"content":" INFO상담 신청상세 설명 여러 문단 본문 예시입니다.\n첫 번째 문단입니다.\n두 번째 문단입니다.\n{{\u0026lt; cta kind=\u0026#34;consult\u0026#34; label=\u0026#34;상담 신청\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;consult\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;여러 문단 본문 예시입니다.\u0026#34; subtitle=\u0026#34;상세 설명\u0026#34; aria_label=\u0026#34;상담 신청\u0026#34; badge=\u0026#34;INFO\u0026#34; tracking_id=\u0026#34;cta-body-02\u0026#34; analytics_event=\u0026#34;cta_body_multi\u0026#34; id=\u0026#34;cta-body-multi\u0026#34; class=\u0026#34;is-content\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 첫 번째 문단입니다. 두 번째 문단입니다. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/02-multi-paragraph/","summary":"\u003cdiv id=\"cta-body-multi\" class=\"cta cta--kind-consult cta--priority-primary cta--surface-after-content cta--size-md cta--tone-success cta--align-center cta--has-body is-content\" data-cta-kind=\"consult\" data-cta-intent=\"consult\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-body-02\" data-analytics-event=\"cta_body_multi\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"상담 신청\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eINFO\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e상담 신청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e상세 설명\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e여러 문단 본문 예시입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e\u003cp\u003e첫 번째 문단입니다.\u003c/p\u003e\n\u003cp\u003e두 번째 문단입니다.\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;여러 문단 본문 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;상세 설명\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;INFO\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-body-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_body_multi\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-body-multi\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e첫 번째 문단입니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e두 번째 문단입니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-multi-paragraph"},{"content":" MORE보조 CTA보조 동작 본문 뒤에서 자연스럽게 이어지는 구성입니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;보조 CTA\u0026#34; href=\u0026#34;/blog/\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;본문 뒤에서 자연스럽게 이어지는 구성입니다.\u0026#34; subtitle=\u0026#34;보조 동작\u0026#34; aria_label=\u0026#34;보조 CTA\u0026#34; badge=\u0026#34;MORE\u0026#34; tracking_id=\u0026#34;cta-visual-02\u0026#34; analytics_event=\u0026#34;cta_visual_more\u0026#34; id=\u0026#34;cta-visual-after\u0026#34; class=\u0026#34;is-secondary\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/02-secondary-after-md-neutral-left/","summary":"\u003cdiv id=\"cta-visual-after\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-left cta--has-body is-secondary\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-visual-02\" data-analytics-event=\"cta_visual_more\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/blog/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"보조 CTA\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eMORE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e보조 CTA\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e보조 동작\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e본문 뒤에서 자연스럽게 이어지는 구성입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;보조 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;본문 뒤에서 자연스럽게 이어지는 구성입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;보조 동작\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;보조 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;MORE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-visual-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_visual_more\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-visual-after\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-secondary-after-md-neutral-left"},{"content":" HOT전체 메타부가 제목 메타데이터를 한 번에 확인하는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;전체 메타\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;메타데이터를 한 번에 확인하는 예시입니다.\u0026#34; subtitle=\u0026#34;부가 제목\u0026#34; aria_label=\u0026#34;전체 메타를 확인\u0026#34; badge=\u0026#34;HOT\u0026#34; tracking_id=\u0026#34;cta-meta-03\u0026#34; analytics_event=\u0026#34;cta_meta_all\u0026#34; id=\u0026#34;cta-meta-all\u0026#34; class=\u0026#34;is-promo\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/03-all-meta/","summary":"\u003cdiv id=\"cta-meta-all\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-success cta--align-center cta--has-body is-promo\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-meta-03\" data-analytics-event=\"cta_meta_all\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"전체 메타를 확인\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eHOT\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e전체 메타\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e부가 제목\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e메타데이터를 한 번에 확인하는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;전체 메타\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;메타데이터를 한 번에 확인하는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;부가 제목\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;전체 메타를 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;HOT\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-meta-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_meta_all\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-meta-all\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-promo\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-all-meta"},{"content":" STEP상담 신청절차 안내 제목과 목록이 섞인 본문 예시입니다.\n확인 순서 접수 검토 회신 {{\u0026lt; cta kind=\u0026#34;consult\u0026#34; label=\u0026#34;상담 신청\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;consult\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;제목과 목록이 섞인 본문 예시입니다.\u0026#34; subtitle=\u0026#34;절차 안내\u0026#34; aria_label=\u0026#34;상담 신청\u0026#34; badge=\u0026#34;STEP\u0026#34; tracking_id=\u0026#34;cta-body-03\u0026#34; analytics_event=\u0026#34;cta_body_list\u0026#34; id=\u0026#34;cta-body-list\u0026#34; class=\u0026#34;is-content\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ### 확인 순서 1. 접수 2. 검토 3. 회신 {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/03-heading-and-list/","summary":"\u003cdiv id=\"cta-body-list\" class=\"cta cta--kind-consult cta--priority-primary cta--surface-after-content cta--size-md cta--tone-success cta--align-center cta--has-body is-content\" data-cta-kind=\"consult\" data-cta-intent=\"consult\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-body-03\" data-analytics-event=\"cta_body_list\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"상담 신청\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eSTEP\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e상담 신청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e절차 안내\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e제목과 목록이 섞인 본문 예시입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e\u003ch3 id=\"확인-순서\"\u003e확인 순서\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e접수\u003c/li\u003e\n\u003cli\u003e검토\u003c/li\u003e\n\u003cli\u003e회신\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;제목과 목록이 섞인 본문 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;절차 안내\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;STEP\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-body-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_body_list\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-body-list\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e### 확인 순서\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e1. 접수\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e2. 검토\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e3. 회신\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-heading-and-list"},{"content":" PAGE페이지 참조 이동site.GetPage 경로 ref가 실제 페이지 참조일 때의 구성을 보여줍니다.\n{{\u0026lt; cta kind=\u0026#34;internal\u0026#34; label=\u0026#34;페이지 참조 이동\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34; intent=\u0026#34;internal\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;in-content\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;ref가 실제 페이지 참조일 때의 구성을 보여줍니다.\u0026#34; subtitle=\u0026#34;site.GetPage 경로\u0026#34; aria_label=\u0026#34;내부 페이지로 이동\u0026#34; badge=\u0026#34;PAGE\u0026#34; tracking_id=\u0026#34;cta-routing-03\u0026#34; analytics_event=\u0026#34;cta_internal_route\u0026#34; id=\u0026#34;cta-routing-ref\u0026#34; class=\u0026#34;is-internal\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/03-internal-ref/","summary":"\u003cdiv id=\"cta-routing-ref\" class=\"cta cta--kind-internal cta--priority-secondary cta--surface-in-content cta--size-sm cta--tone-neutral cta--align-left cta--has-body is-internal\" data-cta-kind=\"internal\" data-cta-intent=\"internal\" data-cta-priority=\"secondary\" data-cta-surface=\"in-content\" data-cta-size=\"sm\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-routing-03\" data-analytics-event=\"cta_internal_route\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"내부 페이지로 이동\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003ePAGE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e페이지 참조 이동\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003esite.GetPage 경로\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003eref가 실제 페이지 참조일 때의 구성을 보여줍니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;페이지 참조 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;in-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;ref가 실제 페이지 참조일 때의 구성을 보여줍니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;site.GetPage 경로\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;내부 페이지로 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;PAGE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-routing-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_internal_route\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-routing-ref\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-internal-ref"},{"content":" SAFE안전한 새 창보안 관계 rel을 명시적으로 넣는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;안전한 새 창\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;rel을 명시적으로 넣는 예시입니다.\u0026#34; subtitle=\u0026#34;보안 관계\u0026#34; aria_label=\u0026#34;안전한 새 창 열기\u0026#34; badge=\u0026#34;SAFE\u0026#34; tracking_id=\u0026#34;cta-fallback-03\u0026#34; analytics_event=\u0026#34;cta_fallback_rel\u0026#34; id=\u0026#34;cta-fallback-rel\u0026#34; class=\u0026#34;is-external\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/05-fallback/03-rel-explicit/","summary":"\u003cdiv id=\"cta-fallback-rel\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-brand cta--align-center cta--has-body is-external\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-fallback-03\" data-analytics-event=\"cta_fallback_rel\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"안전한 새 창 열기\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eSAFE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e안전한 새 창\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e보안 관계\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003erel을 명시적으로 넣는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;안전한 새 창\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;rel을 명시적으로 넣는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;보안 관계\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;안전한 새 창 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;SAFE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-fallback-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_fallback_rel\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-fallback-rel\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-rel-explicit"},{"content":" RELATED관련 글 더 보기관련 읽을거리 본문과 이어서 읽기 좋습니다.\n추가 설명이 필요한 경우 본문을 여기에 적습니다. {{\u0026lt; cta kind=\u0026#34;related\u0026#34; label=\u0026#34;관련 글 더 보기\u0026#34; href=\u0026#34;/blog/\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34; intent=\u0026#34;related\u0026#34; priority=\u0026#34;tertiary\u0026#34; surface=\u0026#34;in-content\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;본문과 이어서 읽기 좋습니다.\u0026#34; subtitle=\u0026#34;관련 읽을거리\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;RELATED\u0026#34; tracking_id=\u0026#34;cta-kind-03\u0026#34; analytics_event=\u0026#34;cta_kind_related\u0026#34; id=\u0026#34;cta-kind-related\u0026#34; class=\u0026#34;is-related\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 추가 설명이 필요한 경우 본문을 여기에 적습니다. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/03-related/","summary":"\u003cdiv id=\"cta-kind-related\" class=\"cta cta--kind-related cta--priority-tertiary cta--surface-in-content cta--size-sm cta--tone-neutral cta--align-left cta--has-body is-related\" data-cta-kind=\"related\" data-cta-intent=\"related\" data-cta-priority=\"tertiary\" data-cta-surface=\"in-content\" data-cta-size=\"sm\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-03\" data-analytics-event=\"cta_kind_related\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/blog/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eRELATED\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e관련 글 더 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e관련 읽을거리\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e본문과 이어서 읽기 좋습니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e추가 설명이 필요한 경우 본문을 여기에 적습니다.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;관련 글 더 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;tertiary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;in-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;본문과 이어서 읽기 좋습니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;관련 읽을거리\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;RELATED\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e추가 설명이 필요한 경우 본문을 여기에 적습니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-related"},{"content":" MID본문 CTA문단 사이 본문 중간에 배치하는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;본문 CTA\u0026#34; href=\u0026#34;/signup/\u0026#34; ref=\u0026#34;/contact/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;tertiary\u0026#34; surface=\u0026#34;in-content\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;right\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;본문 중간에 배치하는 예시입니다.\u0026#34; subtitle=\u0026#34;문단 사이\u0026#34; aria_label=\u0026#34;본문 CTA\u0026#34; badge=\u0026#34;MID\u0026#34; tracking_id=\u0026#34;cta-visual-03\u0026#34; analytics_event=\u0026#34;cta_visual_mid\u0026#34; id=\u0026#34;cta-visual-inline\u0026#34; class=\u0026#34;is-inline-callout\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/03-tertiary-incontent-sm-success-right/","summary":"\u003cdiv id=\"cta-visual-inline\" class=\"cta cta--kind-default cta--priority-tertiary cta--surface-in-content cta--size-sm cta--tone-success cta--align-right cta--has-body cta--compact is-inline-callout\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"tertiary\" data-cta-surface=\"in-content\" data-cta-size=\"sm\" data-cta-tone=\"success\" data-cta-align=\"right\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-visual-03\" data-analytics-event=\"cta_visual_mid\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/signup/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"본문 CTA\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eMID\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e본문 CTA\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e문단 사이\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e본문 중간에 배치하는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;본문 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/signup/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;tertiary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;in-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;right\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;본문 중간에 배치하는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;문단 사이\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;본문 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;MID\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-visual-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_visual_mid\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-visual-inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-inline-callout\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-tertiary-incontent-sm-success-right"},{"content":" HOT상담 신청도입 전 문의 평일 기준 1영업일 내 회신\n상담 주제와 희망 일정을 함께 적어 주세요. {{\u0026lt; cta kind=\u0026#34;consult\u0026#34; label=\u0026#34;상담 신청\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;consult\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;평일 기준 1영업일 내 회신\u0026#34; subtitle=\u0026#34;도입 전 문의\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;HOT\u0026#34; tracking_id=\u0026#34;cta-kind-04\u0026#34; analytics_event=\u0026#34;cta_kind_consult\u0026#34; id=\u0026#34;cta-kind-consult\u0026#34; class=\u0026#34;is-consult\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 상담 주제와 희망 일정을 함께 적어 주세요. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/04-consult/","summary":"\u003cdiv id=\"cta-kind-consult\" class=\"cta cta--kind-consult cta--priority-primary cta--surface-after-content cta--size-md cta--tone-success cta--align-center cta--has-body is-consult\" data-cta-kind=\"consult\" data-cta-intent=\"consult\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-04\" data-analytics-event=\"cta_kind_consult\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eHOT\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e상담 신청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e도입 전 문의\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e평일 기준 1영업일 내 회신\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e상담 주제와 희망 일정을 함께 적어 주세요.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;평일 기준 1영업일 내 회신\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;도입 전 문의\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;HOT\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-04\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e상담 주제와 희망 일정을 함께 적어 주세요.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"04-consult"},{"content":" OFF비활성 상태클릭 불가 disabled 상태의 메타 구성을 보여줍니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;비활성 상태\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;warning\u0026#34; align=\u0026#34;right\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;disabled 상태의 메타 구성을 보여줍니다.\u0026#34; subtitle=\u0026#34;클릭 불가\u0026#34; aria_label=\u0026#34;비활성 상태\u0026#34; badge=\u0026#34;OFF\u0026#34; tracking_id=\u0026#34;cta-meta-04\u0026#34; analytics_event=\u0026#34;cta_meta_disabled\u0026#34; id=\u0026#34;cta-meta-disabled\u0026#34; class=\u0026#34;is-disabled\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;true\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/04-disabled-state/","summary":"\u003cdiv id=\"cta-meta-disabled\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-warning cta--align-right cta--has-body cta--disabled is-disabled\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"warning\" data-cta-align=\"right\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"true\" data-cta-compact=\"false\" data-tracking-id=\"cta-meta-04\" data-analytics-event=\"cta_meta_disabled\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003cspan class=\"cta__static\" aria-disabled=\"true\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eOFF\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e비활성 상태\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e클릭 불가\u003c/span\u003e\u003c/span\u003e\n \u003c/span\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003edisabled 상태의 메타 구성을 보여줍니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;비활성 상태\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;warning\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;right\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;disabled 상태의 메타 구성을 보여줍니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;클릭 불가\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;비활성 상태\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;OFF\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-meta-04\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_meta_disabled\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-meta-disabled\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-disabled\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;true\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"04-disabled-state"},{"content":" BASE기본 이동href 중심 기본 이동 경로를 보여줍니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;기본 이동\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;sidebar\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;muted\u0026#34; align=\u0026#34;stretch\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;기본 이동 경로를 보여줍니다.\u0026#34; subtitle=\u0026#34;href 중심\u0026#34; aria_label=\u0026#34;기본 이동\u0026#34; badge=\u0026#34;BASE\u0026#34; tracking_id=\u0026#34;cta-routing-04\u0026#34; analytics_event=\u0026#34;cta_default_move\u0026#34; id=\u0026#34;cta-routing-href\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/04-fallback-href/","summary":"\u003cdiv id=\"cta-routing-href\" class=\"cta cta--kind-default cta--priority-utility cta--surface-sidebar cta--size-xs cta--tone-muted cta--align-stretch cta--has-body cta--compact u-track-cta\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"utility\" data-cta-surface=\"sidebar\" data-cta-size=\"xs\" data-cta-tone=\"muted\" data-cta-align=\"stretch\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-routing-04\" data-analytics-event=\"cta_default_move\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"기본 이동\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e기본 이동\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003ehref 중심\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 이동 경로를 보여줍니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;기본 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;sidebar\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;muted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;stretch\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;기본 이동 경로를 보여줍니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;href 중심\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;기본 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;BASE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-routing-04\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_default_move\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-routing-href\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"04-fallback-href"},{"content":" READ다음 글 보기혼합 마크다운 굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.\n중요 포인트를 먼저 보고, 자세한 설명으로 넘어가세요. {{\u0026lt; cta kind=\u0026#34;related\u0026#34; label=\u0026#34;다음 글 보기\u0026#34; href=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;related\u0026#34; priority=\u0026#34;tertiary\u0026#34; surface=\u0026#34;in-content\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.\u0026#34; subtitle=\u0026#34;혼합 마크다운\u0026#34; aria_label=\u0026#34;다음 글 보기\u0026#34; badge=\u0026#34;READ\u0026#34; tracking_id=\u0026#34;cta-body-04\u0026#34; analytics_event=\u0026#34;cta_body_mixed\u0026#34; id=\u0026#34;cta-body-mixed\u0026#34; class=\u0026#34;is-inline-callout\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} **중요 포인트**를 먼저 보고, [자세한 설명](/lab/hugo-content-lab/30-components/)으로 넘어가세요. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/04-mixed-markdown/","summary":"\u003cdiv id=\"cta-body-mixed\" class=\"cta cta--kind-related cta--priority-tertiary cta--surface-in-content cta--size-sm cta--tone-neutral cta--align-left cta--has-body is-inline-callout\" data-cta-kind=\"related\" data-cta-intent=\"related\" data-cta-priority=\"tertiary\" data-cta-surface=\"in-content\" data-cta-size=\"sm\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-body-04\" data-analytics-event=\"cta_body_mixed\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/70-real-world-posts/medium-post/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"다음 글 보기\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eREAD\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e다음 글 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e혼합 마크다운\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e\u003cstrong\u003e중요 포인트\u003c/strong\u003e를 먼저 보고, \u003ca href=\"/lab/hugo-content-lab/30-components/\"\u003e자세한 설명\u003c/a\u003e으로 넘어가세요.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;다음 글 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;tertiary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;in-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;혼합 마크다운\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;다음 글 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;READ\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-body-04\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_body_mixed\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-body-mixed\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-inline-callout\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e**중요 포인트**를 먼저 보고, [자세한 설명](/lab/hugo-content-lab/30-components/)으로 넘어가세요.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"04-mixed-markdown"},{"content":" UTIL유틸 CTA유틸리티 사이드바용 경량 CTA입니다.\n{{\u0026lt; cta kind=\u0026#34;utility\u0026#34; label=\u0026#34;유틸 CTA\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;copy\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;sidebar\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;warning\u0026#34; align=\u0026#34;stretch\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;사이드바용 경량 CTA입니다.\u0026#34; subtitle=\u0026#34;유틸리티\u0026#34; aria_label=\u0026#34;유틸 CTA\u0026#34; badge=\u0026#34;UTIL\u0026#34; tracking_id=\u0026#34;cta-visual-04\u0026#34; analytics_event=\u0026#34;cta_visual_utility\u0026#34; id=\u0026#34;cta-visual-utility\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/04-utility-sidebar-xs-warning-stretch/","summary":"\u003cdiv id=\"cta-visual-utility\" class=\"cta cta--kind-utility cta--priority-utility cta--surface-sidebar cta--size-xs cta--tone-warning cta--align-stretch cta--has-body cta--compact u-track-cta\" data-cta-kind=\"utility\" data-cta-intent=\"copy\" data-cta-priority=\"utility\" data-cta-surface=\"sidebar\" data-cta-size=\"xs\" data-cta-tone=\"warning\" data-cta-align=\"stretch\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-visual-04\" data-analytics-event=\"cta_visual_utility\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"유틸 CTA\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eUTIL\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e유틸 CTA\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e유틸리티\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e사이드바용 경량 CTA입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;유틸 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;sidebar\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;warning\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;stretch\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;사이드바용 경량 CTA입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;유틸리티\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;유틸 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;UTIL\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-visual-04\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_visual_utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-visual-utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"04-utility-sidebar-xs-warning-stretch"},{"content":" PDF다운로드 파일을 바로 내려받습니다.\n{{\u0026lt; cta kind=\u0026#34;download\u0026#34; label=\u0026#34;다운로드\u0026#34; href=\u0026#34;/files/checklist.pdf\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;download\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;muted\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;파일을 바로 내려받습니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;PDF\u0026#34; tracking_id=\u0026#34;cta-kind-05\u0026#34; analytics_event=\u0026#34;cta_kind_download\u0026#34; id=\u0026#34;cta-kind-download\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/05-download/","summary":"\u003cdiv id=\"cta-kind-download\" class=\"cta cta--kind-download cta--priority-utility cta--surface-inline cta--size-xs cta--tone-muted cta--align-left cta--has-body u-track-cta\" data-cta-kind=\"download\" data-cta-intent=\"download\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"xs\" data-cta-tone=\"muted\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-05\" data-analytics-event=\"cta_kind_download\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/files/checklist.pdf\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003ePDF\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e다운로드\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e파일을 바로 내려받습니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;download\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;다운로드\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/files/checklist.pdf\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;download\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;muted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;파일을 바로 내려받습니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;PDF\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-05\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_download\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-download\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"05-download"},{"content":" WEEKLY뉴스레터주 1회 발송 헤더에서 반복적으로 안내하는 CTA입니다.\n{{\u0026lt; cta kind=\u0026#34;newsletter\u0026#34; label=\u0026#34;뉴스레터\u0026#34; href=\u0026#34;/newsletter/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;subscribe\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;header\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;accent\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;헤더에서 반복적으로 안내하는 CTA입니다.\u0026#34; subtitle=\u0026#34;주 1회 발송\u0026#34; aria_label=\u0026#34;뉴스레터 구독\u0026#34; badge=\u0026#34;WEEKLY\u0026#34; tracking_id=\u0026#34;cta-visual-05\u0026#34; analytics_event=\u0026#34;cta_visual_header\u0026#34; id=\u0026#34;cta-visual-header\u0026#34; class=\u0026#34;is-header-cta\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/05-primary-header-lg-accent-center/","summary":"\u003cdiv id=\"cta-visual-header\" class=\"cta cta--kind-newsletter cta--priority-primary cta--surface-header cta--size-lg cta--tone-accent cta--align-center cta--has-body is-header-cta\" data-cta-kind=\"newsletter\" data-cta-intent=\"subscribe\" data-cta-priority=\"primary\" data-cta-surface=\"header\" data-cta-size=\"lg\" data-cta-tone=\"accent\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-visual-05\" data-analytics-event=\"cta_visual_header\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/newsletter/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"뉴스레터 구독\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eWEEKLY\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e뉴스레터\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e주 1회 발송\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e헤더에서 반복적으로 안내하는 CTA입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;newsletter\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;뉴스레터\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/newsletter/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;subscribe\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;header\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;accent\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;헤더에서 반복적으로 안내하는 CTA입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;주 1회 발송\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;뉴스레터 구독\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;WEEKLY\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-visual-05\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_visual_header\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-visual-header\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-header-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"05-primary-header-lg-accent-center"},{"content":" NEW뉴스레터 구독매주 한 번 매주 핵심 업데이트를 보냅니다.\n{{\u0026lt; cta kind=\u0026#34;newsletter\u0026#34; label=\u0026#34;뉴스레터 구독\u0026#34; href=\u0026#34;/newsletter/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;subscribe\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;header\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;accent\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;매주 핵심 업데이트를 보냅니다.\u0026#34; subtitle=\u0026#34;매주 한 번\u0026#34; aria_label=\u0026#34;뉴스레터 구독\u0026#34; badge=\u0026#34;NEW\u0026#34; tracking_id=\u0026#34;cta-kind-06\u0026#34; analytics_event=\u0026#34;cta_kind_newsletter\u0026#34; id=\u0026#34;cta-kind-newsletter\u0026#34; class=\u0026#34;is-inline\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/06-newsletter/","summary":"\u003cdiv id=\"cta-kind-newsletter\" class=\"cta cta--kind-newsletter cta--priority-primary cta--surface-header cta--size-md cta--tone-accent cta--align-center cta--has-body is-inline\" data-cta-kind=\"newsletter\" data-cta-intent=\"subscribe\" data-cta-priority=\"primary\" data-cta-surface=\"header\" data-cta-size=\"md\" data-cta-tone=\"accent\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-06\" data-analytics-event=\"cta_kind_newsletter\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/newsletter/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"뉴스레터 구독\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eNEW\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e뉴스레터 구독\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e매주 한 번\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e매주 핵심 업데이트를 보냅니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;newsletter\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;뉴스레터 구독\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/newsletter/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;subscribe\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;header\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;accent\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;매주 핵심 업데이트를 보냅니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;매주 한 번\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;뉴스레터 구독\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;NEW\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-06\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_newsletter\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-newsletter\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"06-newsletter"},{"content":" BETA맞춤 제안마지막 유도 푸터에서 마무리 제안으로 쓰는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;custom_offer\u0026#34; label=\u0026#34;맞춤 제안\u0026#34; href=\u0026#34;/offers/\u0026#34; ref=\u0026#34;/pricing/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;footer\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;danger\u0026#34; align=\u0026#34;right\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;푸터에서 마무리 제안으로 쓰는 예시입니다.\u0026#34; subtitle=\u0026#34;마지막 유도\u0026#34; aria_label=\u0026#34;맞춤 제안 보기\u0026#34; badge=\u0026#34;BETA\u0026#34; tracking_id=\u0026#34;cta-visual-06\u0026#34; analytics_event=\u0026#34;cta_visual_footer\u0026#34; id=\u0026#34;cta-visual-footer\u0026#34; class=\u0026#34;is-footer-cta\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/06-secondary-footer-md-danger-right/","summary":"\u003cdiv id=\"cta-visual-footer\" class=\"cta cta--kind-custom_offer cta--priority-secondary cta--surface-footer cta--size-md cta--tone-danger cta--align-right cta--has-body is-footer-cta\" data-cta-kind=\"custom_offer\" data-cta-intent=\"generic\" data-cta-priority=\"secondary\" data-cta-surface=\"footer\" data-cta-size=\"md\" data-cta-tone=\"danger\" data-cta-align=\"right\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-visual-06\" data-analytics-event=\"cta_visual_footer\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/offers/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"맞춤 제안 보기\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBETA\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e맞춤 제안\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e마지막 유도\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e푸터에서 마무리 제안으로 쓰는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;custom_offer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;맞춤 제안\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/offers/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/pricing/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;footer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;danger\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;right\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;푸터에서 마무리 제안으로 쓰는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;마지막 유도\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;맞춤 제안 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;BETA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-visual-06\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_visual_footer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-visual-footer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-footer-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"06-secondary-footer-md-danger-right"},{"content":" TRIAL무료 체험 시작14일 무료 신용카드 없이 시작할 수 있습니다.\n{{\u0026lt; cta kind=\u0026#34;trial\u0026#34; label=\u0026#34;무료 체험 시작\u0026#34; href=\u0026#34;/signup/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;trial\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;xl\u0026#34; tone=\u0026#34;accent\u0026#34; align=\u0026#34;right\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;신용카드 없이 시작할 수 있습니다.\u0026#34; subtitle=\u0026#34;14일 무료\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;TRIAL\u0026#34; tracking_id=\u0026#34;cta-kind-07\u0026#34; analytics_event=\u0026#34;cta_kind_trial\u0026#34; id=\u0026#34;cta-kind-trial\u0026#34; class=\u0026#34;is-highlighted\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/07-trial/","summary":"\u003cdiv id=\"cta-kind-trial\" class=\"cta cta--kind-trial cta--priority-primary cta--surface-hero cta--size-xl cta--tone-accent cta--align-right cta--has-body is-highlighted\" data-cta-kind=\"trial\" data-cta-intent=\"trial\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"xl\" data-cta-tone=\"accent\" data-cta-align=\"right\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-07\" data-analytics-event=\"cta_kind_trial\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/signup/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eTRIAL\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e무료 체험 시작\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e14일 무료\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e신용카드 없이 시작할 수 있습니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;trial\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;무료 체험 시작\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/signup/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;trial\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xl\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;accent\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;right\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;신용카드 없이 시작할 수 있습니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;14일 무료\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;TRIAL\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-07\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_trial\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-trial\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-highlighted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"07-trial"},{"content":" COPY복사클립보드 인라인에서 최소 면적으로 동작합니다.\n{{\u0026lt; cta kind=\u0026#34;copy\u0026#34; label=\u0026#34;복사\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; intent=\u0026#34;copy\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;muted\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;인라인에서 최소 면적으로 동작합니다.\u0026#34; subtitle=\u0026#34;클립보드\u0026#34; aria_label=\u0026#34;문서 주소 복사\u0026#34; badge=\u0026#34;COPY\u0026#34; tracking_id=\u0026#34;cta-visual-07\u0026#34; analytics_event=\u0026#34;cta_visual_copy\u0026#34; id=\u0026#34;cta-visual-copy\u0026#34; class=\u0026#34;is-copy\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/07-utility-inline-xs-muted-left/","summary":"\u003cdiv id=\"cta-visual-copy\" class=\"cta cta--kind-copy cta--priority-utility cta--surface-inline cta--size-xs cta--tone-muted cta--align-left cta--has-body cta--compact is-copy\" data-cta-kind=\"copy\" data-cta-intent=\"copy\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"xs\" data-cta-tone=\"muted\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-visual-07\" data-analytics-event=\"cta_visual_copy\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"문서 주소 복사\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eCOPY\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e복사\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e클립보드\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e인라인에서 최소 면적으로 동작합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;muted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;인라인에서 최소 면적으로 동작합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;클립보드\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;문서 주소 복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;COPY\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-visual-07\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_visual_copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-visual-copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"07-utility-inline-xs-muted-left"},{"content":" PRICE가격 확인 요금표를 먼저 확인합니다.\n{{\u0026lt; cta kind=\u0026#34;price_check\u0026#34; label=\u0026#34;가격 확인\u0026#34; href=\u0026#34;https://example.com/pricing\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;pricing\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;sidebar\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;warning\u0026#34; align=\u0026#34;stretch\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;요금표를 먼저 확인합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;가격 확인\u0026#34; badge=\u0026#34;PRICE\u0026#34; tracking_id=\u0026#34;cta-kind-08\u0026#34; analytics_event=\u0026#34;cta_kind_price\u0026#34; id=\u0026#34;cta-kind-price\u0026#34; class=\u0026#34;is-price\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/08-price-check/","summary":"\u003cdiv id=\"cta-kind-price\" class=\"cta cta--kind-price_check cta--priority-secondary cta--surface-sidebar cta--size-sm cta--tone-warning cta--align-stretch cta--has-body is-price\" data-cta-kind=\"price_check\" data-cta-intent=\"pricing\" data-cta-priority=\"secondary\" data-cta-surface=\"sidebar\" data-cta-size=\"sm\" data-cta-tone=\"warning\" data-cta-align=\"stretch\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-08\" data-analytics-event=\"cta_kind_price\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/pricing\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"가격 확인\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003ePRICE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e가격 확인\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e요금표를 먼저 확인합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;price_check\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;가격 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/pricing\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;pricing\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;sidebar\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;warning\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;stretch\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;요금표를 먼저 확인합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;가격 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;PRICE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-08\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_price\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-price\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-price\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"08-price_check"},{"content":" COPY복사 클립보드 복사를 유도합니다.\n{{\u0026lt; cta kind=\u0026#34;utility\u0026#34; label=\u0026#34;복사\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;copy\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;클립보드 복사를 유도합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;문서 주소 복사\u0026#34; badge=\u0026#34;COPY\u0026#34; tracking_id=\u0026#34;cta-kind-09\u0026#34; analytics_event=\u0026#34;cta_kind_utility\u0026#34; id=\u0026#34;cta-kind-utility\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/09-utility/","summary":"\u003cdiv id=\"cta-kind-utility\" class=\"cta cta--kind-utility cta--priority-utility cta--surface-inline cta--size-xs cta--tone-neutral cta--align-left cta--has-body cta--compact u-track-cta\" data-cta-kind=\"utility\" data-cta-intent=\"copy\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"xs\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-kind-09\" data-analytics-event=\"cta_kind_utility\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"문서 주소 복사\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eCOPY\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e복사\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e클립보드 복사를 유도합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;클립보드 복사를 유도합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;문서 주소 복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;COPY\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-09\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"09-utility"},{"content":"SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지 중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 보안 질문서입니다. 가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\n“이 서비스, 우리 회사 데이터는 안전한가?” “문제가 생기면 누가 책임지는가?” “감사나 대외 대응에서 설명할 수 있는가?”\n이 글은 B2B SaaS 도입 의사결정자, 특히 대표·운영총괄·IT담당·실무리더가 보안/컴플라이언스 리스크를 빠르게 판단할 수 있도록 만든 실무형 가이드입니다. 읽고 나면 SaaS 보안 실사에서 무엇을 먼저 보고, 무엇을 질문하고, 무엇을 보류해야 하는지 한 번에 정리할 수 있습니다.\nRECOMMENDED보안 점검 기준 확인SaaS 도입 전 판단 기준을 빠르게 정리해 보세요. 중소기업의 보안 실사 체크 기준을 잡는 데 도움이 됩니다.\n왜 지금 SaaS 보안 실사가 더 중요해졌나 예전에는 “유명한 서비스인가”가 신뢰의 기준이었습니다. 지금은 다릅니다. 업무 자동화, 협업툴, CRM, AI 도구가 업무 핵심에 들어오면서 데이터가 여러 SaaS에 분산되고, 계정·권한·로그·연동·외부 공유가 한꺼번에 복잡해졌습니다.\n그 결과, 도입 실패의 원인도 기능 부족보다 보안 설계 미흡 쪽으로 옮겨가고 있습니다.\n특히 아래 상황이라면 보안 실사는 선택이 아니라 필수입니다.\n고객 정보, 거래 정보, 직원 정보가 오가는 경우 외부 협력사나 대행사와 공동 사용해야 하는 경우 AI 기능이 포함되어 프롬프트/파일/대화 로그가 생성되는 경우 국내외 법인, 해외 서버, 다국가 이용자가 섞여 있는 경우 감사 대응, 입찰, 고객사 보안 심사에 대비해야 하는 경우 UPDATESecure by Design 보기공급사 보안 설계 원칙을 함께 확인해 보세요. SaaS 공급사의 기본 보안 성숙도를 가늠하는 데 유용합니다.\nSaaS 보안 실사에서 먼저 봐야 할 10가지 1) 접근제어: 누가, 어디까지, 어떻게 들어오는가 가장 먼저 확인할 것은 계정과 권한 구조입니다. 좋은 SaaS는 “접속 가능”이 아니라 “필요한 사람만 최소 권한으로 접근 가능”해야 합니다.\n체크 포인트:\nSSO 지원 여부 MFA(다중 인증) 지원 여부 역할 기반 권한 관리(RBAC) 관리자 권한 분리 퇴사자/이동자 계정 회수 프로세스 2) 데이터 암호화: 저장 시와 전송 시 모두 보호되는가 암호화는 기본이지만, 실제 검토에서는 저장 데이터와 전송 데이터가 둘 다 중요합니다. 단순히 “암호화 지원”이라고만 적힌 문구보다, 어떤 범위까지 적용되는지 확인해야 합니다.\n체크 포인트:\n전송 구간 암호화 저장 데이터 암호화 키 관리 방식 고객사 전용 키 옵션 여부 3) 데이터 위치와 보관 정책: 우리 데이터는 어디에 남는가 국내 기업은 데이터의 위치와 보관 기간을 자주 놓칩니다. 하지만 실제 리스크는 여기에 숨어 있습니다.\n체크 포인트:\n데이터 저장 지역 백업 위치 보관 기간 삭제 후 실제 파기 절차 로그와 첨부파일의 잔존 정책 4) 로그와 감사 추적: 문제를 나중에 설명할 수 있는가 보안은 “문제가 없게 만드는 것”만이 아닙니다. 문제가 생겼을 때 누가, 언제, 무엇을 했는지 재구성할 수 있어야 합니다.\n체크 포인트:\n관리자/사용자 활동 로그 로그인 이력 외부 공유 기록 권한 변경 기록 로그 보존 기간 5) 연동과 API: 편한 연결이 가장 큰 구멍이 되지 않는가 SaaS 사고는 본체보다 연동에서 더 자주 발생합니다. API 키, 웹훅, 외부 앱 연결은 편리하지만, 한 번 열리면 범위가 넓어집니다.\n체크 포인트:\nAPI 키 회수 가능 여부 허용 IP / 허용 도메인 제한 외부 앱 승인 절차 연동 권한 최소화 비활성 연동 정리 정책 6) 보안 인증과 외부 검증: 내부 주장보다 증거가 있는가 보안 설명서만으로는 부족합니다. 실사 단계에서는 외부 검증 자료가 신뢰를 좌우합니다.\n체크 포인트:\nSOC 2, ISO 27001 등 보안 인증 보유 여부 최근 보안 점검/감사 결과 침투 테스트 수행 여부 취약점 대응 프로세스 7) 사고 대응: 문제가 생기면 얼마나 빨리 알 수 있는가 실제 도입에서는 “침해를 100% 막을 수 있는가”보다 “사고를 얼마나 빨리 탐지하고 대응하는가”가 더 중요합니다.\n체크 포인트:\n사고 대응 책임 부서 통지 기한 대응 절차 문서화 여부 고객 통보 기준 복구 목표 시간 8) 백업과 복구: 복구가 가능한 구조인가 백업은 있느냐가 아니라 복구가 되느냐가 핵심입니다. 테스트 없이 백업만 있는 구조는 사실상 안심할 수 없습니다.\n체크 포인트:\n백업 주기 복구 테스트 여부 복원 범위 RPO/RTO 기준 9) 개인정보와 계약 조항: 책임이 문서에 남는가 법무나 구매 단계에서는 계약서 문구가 중요합니다. 실무에서는 보안 기능만 보다가, 정작 계약 책임이 비어 있는 경우가 많습니다.\n체크 포인트:\n개인정보 처리 위탁 조항 데이터 처리 약관(DPA) 존재 여부 하위 처리자(sub-processor) 고지 파기 및 반환 조항 분쟁 발생 시 책임 범위 10) 공급망 리스크: 서비스 자체보다 주변 생태계는 안전한가 요즘 보안 검토에서 점점 중요해지는 부분입니다. SaaS는 단독 제품이 아니라 외부 클라우드, 결제, 인증, 분석, 협업, AI 기능이 엮인 생태계이기 때문입니다.\n체크 포인트:\n주요 하청/외주/하위 처리자 공개 여부 오픈소스 의존성 관리 취약점 공지와 패치 정책 보안 공지 채널 한눈에 보는 SaaS 보안 질문서 핵심 표 확인 항목 왜 중요한가 확인 방법 SSO / MFA 계정 탈취 리스크 감소 관리자 설정 화면, 제품 문서 권한 관리 내부 오남용 방지 RBAC 정책, 역할 목록 데이터 암호화 유출 시 피해 완화 보안 백서, 기술 문서 데이터 위치 규제/계약 대응 데이터 레지던시 안내 로그 보관 사고 조사 가능 감사 로그 기능 확인 API 통제 연동 리스크 축소 API 문서, 키 정책 인증/감사 외부 검증 확보 인증서, 리포트 사고 대응 통지·복구 속도 IR 문서, SLA 백업/복구 운영 연속성 확보 복구 정책, 테스트 기록 계약 조항 책임 소재 명확화 약관, DPA, 위탁계약 BEST도입 전 점검표 보기실무 질문을 바로 정리해 검토 속도를 높이세요. 검토 회의 전 체크리스트로 활용하기 좋습니다.\n도입 전 5분 점검 체크리스트 아래 질문에 “예”가 많을수록 도입 가능성이 높습니다.\n우리 회사가 요구하는 보안 질문에 답할 문서가 있는가 관리자 권한과 일반 사용자 권한이 분리되어 있는가 퇴사자 계정 회수와 권한 회수가 자동화되는가 데이터 저장 위치와 삭제 방식이 설명되는가 사고 발생 시 통지 기준이 문서화되어 있는가 해석 기준 5개 모두 예: 도입 검토 계속 진행 3~4개 예: 추가 확인 후 조건부 진행 2개 이하 예: 보류 또는 대체안 검토 중소기업이 특히 주의해야 할 실수 1) 기능만 보고 계약하는 것 업무 효율이 좋아 보여도, 계정 관리나 로그가 약하면 나중에 내부 통제가 무너집니다.\n2) “대기업도 쓰니까 안전하겠지”라고 생각하는 것 기업 규모와 우리 회사의 사용 방식은 다를 수 있습니다. 같은 툴이라도 우리 조직의 권한 구조, 데이터 종류, 연동 방식에 따라 위험도는 달라집니다.\n3) AI 기능을 부가 기능으로만 보는 것 AI가 들어간 SaaS는 편리하지만, 입력 데이터와 생성 결과물의 보관·활용 범위를 별도로 봐야 합니다. 특히 민감 정보, 고객 정보, 내부 문서를 넣는 구조라면 더 엄격하게 확인해야 합니다.\n4) 계약서보다 데모에 더 오래 머무는 것 데모는 매력적이지만, 실제 승인 여부는 문서와 증거가 결정합니다.\n실무자가 바로 쓸 수 있는 질문 예시 SaaS 공급사에 아래처럼 물어보면 검토 속도가 빨라집니다.\n관리자 권한과 사용자 권한을 어떻게 분리하나요? MFA와 SSO를 지원하나요? 데이터는 어느 지역에 저장되나요? 삭제 요청 시 백업과 로그는 어떻게 처리되나요? 사고 발생 시 고객 통지 기준은 무엇인가요? 외부 감사 자료나 보안 인증서를 제공할 수 있나요? API 키와 외부 연동 권한은 어떻게 관리하나요? 이 질문에 명확히 답하지 못하면, 기능이 좋아도 도입 일정은 다시 잡는 것이 안전합니다.\n결론: SaaS 보안 실사는 ‘도입 속도를 늦추는 절차’가 아니다 좋은 SaaS 보안 실사는 도입을 막는 장벽이 아니라, 나중에 더 큰 비용을 막는 안전장치입니다. 특히 중소기업은 전담 보안 인력이 부족한 경우가 많기 때문에, 처음부터 질문서와 체크리스트를 잘 갖추는 것이 가장 큰 절약입니다.\n기능이 비슷하다면, 마지막 승부는 보안과 운영 신뢰에서 갈립니다. 도입 전에 이 10가지만 확인해도, 실패 확률은 크게 줄어듭니다.\nHOT관련 가이드 더 보기보안 실사 관점을 더 넓게 정리해 보세요. 도입 검토와 운영 기준을 함께 다루는 후속 글에 연결하기 좋습니다.\n마무리 한 줄 SaaS는 ‘빨리 쓰는 것’보다 ‘안전하게 오래 쓰는 것’이 더 중요합니다.\n원한다면 다음 글로 이어서 바로 쓸 수 있는 SaaS 보안 질문서 템플릿이나 도입 검토용 비교표로 확장하면 좋습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/1/","summary":"\u003ch1 id=\"saas-보안-실사-체크리스트-도입-전에-반드시-확인해야-할-10가지\"\u003eSaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지\u003c/h1\u003e\n\u003cp\u003e중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 \u003cstrong\u003e보안 질문서\u003c/strong\u003e입니다.\n가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\u003c/p\u003e","title":"1"},{"content":" NEW구성 살펴보기 같은 사이트 내부 섹션으로 이동합니다.\n{{\u0026lt; cta kind=\u0026#34;internal\u0026#34; label=\u0026#34;구성 살펴보기\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;internal\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;같은 사이트 내부 섹션으로 이동합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;내부 페이지로 이동\u0026#34; badge=\u0026#34;NEW\u0026#34; tracking_id=\u0026#34;cta-kind-10\u0026#34; analytics_event=\u0026#34;cta_kind_internal\u0026#34; id=\u0026#34;cta-kind-internal\u0026#34; class=\u0026#34;is-internal\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/10-internal/","summary":"\u003cdiv id=\"cta-kind-internal\" class=\"cta cta--kind-internal cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-left cta--has-body is-internal\" data-cta-kind=\"internal\" data-cta-intent=\"internal\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-10\" data-analytics-event=\"cta_kind_internal\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"내부 페이지로 이동\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eNEW\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e구성 살펴보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e같은 사이트 내부 섹션으로 이동합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;구성 살펴보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;같은 사이트 내부 섹션으로 이동합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;내부 페이지로 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;NEW\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-10\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"10-internal"},{"content":" COPY복사 문서 주소를 복사합니다.\n{{\u0026lt; cta kind=\u0026#34;copy\u0026#34; label=\u0026#34;복사\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;copy\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;문서 주소를 복사합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;문서 주소를 클립보드로 복사\u0026#34; badge=\u0026#34;COPY\u0026#34; tracking_id=\u0026#34;cta-kind-11\u0026#34; analytics_event=\u0026#34;cta_kind_copy\u0026#34; id=\u0026#34;cta-kind-copy\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/11-copy/","summary":"\u003cdiv id=\"cta-kind-copy\" class=\"cta cta--kind-copy cta--priority-utility cta--surface-inline cta--size-xs cta--tone-neutral cta--align-left cta--has-body cta--compact u-track-cta\" data-cta-kind=\"copy\" data-cta-intent=\"copy\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"xs\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-kind-11\" data-analytics-event=\"cta_kind_copy\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"문서 주소를 클립보드로 복사\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eCOPY\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e복사\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e문서 주소를 복사합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;문서 주소를 복사합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;문서 주소를 클립보드로 복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;COPY\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-11\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"11-copy"},{"content":" BETA맞춤 제안 보기 현재는 준비 중입니다.\n맞춤 제안이 준비되면 이 자리에서 안내합니다. {{\u0026lt; cta kind=\u0026#34;custom_offer\u0026#34; label=\u0026#34;맞춤 제안 보기\u0026#34; href=\u0026#34;/offers/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;footer\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;danger\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;현재는 준비 중입니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;BETA\u0026#34; tracking_id=\u0026#34;cta-kind-12\u0026#34; analytics_event=\u0026#34;cta_kind_custom_offer\u0026#34; id=\u0026#34;cta-kind-custom-offer\u0026#34; class=\u0026#34;is-offer\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;true\u0026#34; \u0026gt;}} 맞춤 제안이 준비되면 이 자리에서 안내합니다. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/12-custom-offer/","summary":"\u003cdiv id=\"cta-kind-custom-offer\" class=\"cta cta--kind-custom_offer cta--priority-primary cta--surface-footer cta--size-md cta--tone-danger cta--align-center cta--has-body cta--disabled is-offer\" data-cta-kind=\"custom_offer\" data-cta-intent=\"generic\" data-cta-priority=\"primary\" data-cta-surface=\"footer\" data-cta-size=\"md\" data-cta-tone=\"danger\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"true\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-12\" data-analytics-event=\"cta_kind_custom_offer\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003cspan class=\"cta__static\" aria-disabled=\"true\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBETA\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e맞춤 제안 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/span\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e현재는 준비 중입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e맞춤 제안이 준비되면 이 자리에서 안내합니다.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;custom_offer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;맞춤 제안 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/offers/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;footer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;danger\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;현재는 준비 중입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;BETA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-12\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_custom_offer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-custom-offer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-offer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;true\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e맞춤 제안이 준비되면 이 자리에서 안내합니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"12-custom_offer"},{"content":" FALLBACK커스텀 폴백 확인 정의되지 않은 kind는 기본 preset으로 폴백합니다.\n{{\u0026lt; cta kind=\u0026#34;custom\u0026#34; label=\u0026#34;커스텀 폴백 확인\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;정의되지 않은 kind는 기본 preset으로 폴백합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;FALLBACK\u0026#34; tracking_id=\u0026#34;cta-kind-13\u0026#34; analytics_event=\u0026#34;cta_kind_custom\u0026#34; id=\u0026#34;cta-kind-custom\u0026#34; class=\u0026#34;is-custom\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/13-custom/","summary":"\u003cdiv id=\"cta-kind-custom\" class=\"cta cta--kind-custom cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-custom\" data-cta-kind=\"custom\" data-cta-intent=\"generic\" 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=\"cta-kind-13\" data-analytics-event=\"cta_kind_custom\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eFALLBACK\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e커스텀 폴백 확인\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e정의되지 않은 kind는 기본 preset으로 폴백합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;custom\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;커스텀 폴백 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;정의되지 않은 kind는 기본 preset으로 폴백합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;FALLBACK\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-13\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_custom\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-custom\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-custom\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"13-custom"},{"content":"SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지 중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 보안 질문서입니다. 가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\n“이 서비스, 우리 회사 데이터는 안전한가?” “문제가 생기면 누가 책임지는가?” “감사나 대외 대응에서 설명할 수 있는가?”\n이 글은 B2B SaaS 도입 의사결정자, 특히 대표·운영총괄·IT담당·실무리더가 보안/컴플라이언스 리스크를 빠르게 판단할 수 있도록 만든 실무형 가이드입니다. 읽고 나면 SaaS 보안 실사에서 무엇을 먼저 보고, 무엇을 질문하고, 무엇을 보류해야 하는지 한 번에 정리할 수 있습니다.\nRECOMMENDEDNIST 사이버보안 프레임워크 확인SaaS 보안 점검 기준을 더 넓은 보안 체계와 함께 정리해보세요 도입 판단 전 참고용 공식 보안 프레임워크입니다\n왜 지금 SaaS 보안 실사가 더 중요해졌나 예전에는 “유명한 서비스인가”가 신뢰의 기준이었습니다. 지금은 다릅니다. 업무 자동화, 협업툴, CRM, AI 도구가 업무 핵심에 들어오면서 데이터가 여러 SaaS에 분산되고, 계정·권한·로그·연동·외부 공유가 한꺼번에 복잡해졌습니다.\n그 결과, 도입 실패의 원인도 기능 부족보다 보안 설계 미흡 쪽으로 옮겨가고 있습니다.\n특히 아래 상황이라면 보안 실사는 선택이 아니라 필수입니다.\n고객 정보, 거래 정보, 직원 정보가 오가는 경우 외부 협력사나 대행사와 공동 사용해야 하는 경우 AI 기능이 포함되어 프롬프트/파일/대화 로그가 생성되는 경우 국내외 법인, 해외 서버, 다국가 이용자가 섞여 있는 경우 감사 대응, 입찰, 고객사 보안 심사에 대비해야 하는 경우 UPDATEISO/IEC 27001 기준 살펴보기정보보호 관리체계 관점에서 SaaS 공급사의 성숙도를 확인할 수 있습니다 보안 인증은 실제 운영 통제와 함께 확인하는 것이 좋습니다\nSaaS 보안 실사에서 먼저 봐야 할 10가지 1) 접근제어: 누가, 어디까지, 어떻게 들어오는가 가장 먼저 확인할 것은 계정과 권한 구조입니다. 좋은 SaaS는 “접속 가능”이 아니라 “필요한 사람만 최소 권한으로 접근 가능”해야 합니다.\n체크 포인트:\nSSO 지원 여부 MFA(다중 인증) 지원 여부 역할 기반 권한 관리(RBAC) 관리자 권한 분리 퇴사자/이동자 계정 회수 프로세스 2) 데이터 암호화: 저장 시와 전송 시 모두 보호되는가 암호화는 기본이지만, 실제 검토에서는 저장 데이터와 전송 데이터가 둘 다 중요합니다. 단순히 “암호화 지원”이라고만 적힌 문구보다, 어떤 범위까지 적용되는지 확인해야 합니다.\n체크 포인트:\n전송 구간 암호화 저장 데이터 암호화 키 관리 방식 고객사 전용 키 옵션 여부 3) 데이터 위치와 보관 정책: 우리 데이터는 어디에 남는가 국내 기업은 데이터의 위치와 보관 기간을 자주 놓칩니다. 하지만 실제 리스크는 여기에 숨어 있습니다.\n체크 포인트:\n데이터 저장 지역 백업 위치 보관 기간 삭제 후 실제 파기 절차 로그와 첨부파일의 잔존 정책 4) 로그와 감사 추적: 문제를 나중에 설명할 수 있는가 보안은 “문제가 없게 만드는 것”만이 아닙니다. 문제가 생겼을 때 누가, 언제, 무엇을 했는지 재구성할 수 있어야 합니다.\n체크 포인트:\n관리자/사용자 활동 로그 로그인 이력 외부 공유 기록 권한 변경 기록 로그 보존 기간 5) 연동과 API: 편한 연결이 가장 큰 구멍이 되지 않는가 SaaS 사고는 본체보다 연동에서 더 자주 발생합니다. API 키, 웹훅, 외부 앱 연결은 편리하지만, 한 번 열리면 범위가 넓어집니다.\n체크 포인트:\nAPI 키 회수 가능 여부 허용 IP / 허용 도메인 제한 외부 앱 승인 절차 연동 권한 최소화 비활성 연동 정리 정책 6) 보안 인증과 외부 검증: 내부 주장보다 증거가 있는가 보안 설명서만으로는 부족합니다. 실사 단계에서는 외부 검증 자료가 신뢰를 좌우합니다.\n체크 포인트:\nSOC 2, ISO 27001 등 보안 인증 보유 여부 최근 보안 점검/감사 결과 침투 테스트 수행 여부 취약점 대응 프로세스 7) 사고 대응: 문제가 생기면 얼마나 빨리 알 수 있는가 실제 도입에서는 “침해를 100% 막을 수 있는가”보다 “사고를 얼마나 빨리 탐지하고 대응하는가”가 더 중요합니다.\n체크 포인트:\n사고 대응 책임 부서 통지 기한 대응 절차 문서화 여부 고객 통보 기준 복구 목표 시간 8) 백업과 복구: 복구가 가능한 구조인가 백업은 있느냐가 아니라 복구가 되느냐가 핵심입니다. 테스트 없이 백업만 있는 구조는 사실상 안심할 수 없습니다.\n체크 포인트:\n백업 주기 복구 테스트 여부 복원 범위 RPO/RTO 기준 9) 개인정보와 계약 조항: 책임이 문서에 남는가 법무나 구매 단계에서는 계약서 문구가 중요합니다. 실무에서는 보안 기능만 보다가, 정작 계약 책임이 비어 있는 경우가 많습니다.\n체크 포인트:\n개인정보 처리 위탁 조항 데이터 처리 약관(DPA) 존재 여부 하위 처리자(sub-processor) 고지 파기 및 반환 조항 분쟁 발생 시 책임 범위 10) 공급망 리스크: 서비스 자체보다 주변 생태계는 안전한가 요즘 보안 검토에서 점점 중요해지는 부분입니다. SaaS는 단독 제품이 아니라 외부 클라우드, 결제, 인증, 분석, 협업, AI 기능이 엮인 생태계이기 때문입니다.\n체크 포인트:\n주요 하청/외주/하위 처리자 공개 여부 오픈소스 의존성 관리 취약점 공지와 패치 정책 보안 공지 채널 HOTSOC 2 정보 더 보기외부 검증 자료를 어떻게 읽어야 하는지 기준을 잡는 데 도움이 됩니다 공급사 보안 수준은 인증서 자체보다 범위와 최신성도 함께 봐야 합니다\n한눈에 보는 SaaS 보안 질문서 핵심 표 확인 항목 왜 중요한가 확인 방법 SSO / MFA 계정 탈취 리스크 감소 관리자 설정 화면, 제품 문서 권한 관리 내부 오남용 방지 RBAC 정책, 역할 목록 데이터 암호화 유출 시 피해 완화 보안 백서, 기술 문서 데이터 위치 규제/계약 대응 데이터 레지던시 안내 로그 보관 사고 조사 가능 감사 로그 기능 확인 API 통제 연동 리스크 축소 API 문서, 키 정책 인증/감사 외부 검증 확보 인증서, 리포트 사고 대응 통지·복구 속도 IR 문서, SLA 백업/복구 운영 연속성 확보 복구 정책, 테스트 기록 계약 조항 책임 소재 명확화 약관, DPA, 위탁계약 도입 전 5분 점검 체크리스트 아래 질문에 “예”가 많을수록 도입 가능성이 높습니다.\n우리 회사가 요구하는 보안 질문에 답할 문서가 있는가 관리자 권한과 일반 사용자 권한이 분리되어 있는가 퇴사자 계정 회수와 권한 회수가 자동화되는가 데이터 저장 위치와 삭제 방식이 설명되는가 사고 발생 시 통지 기준이 문서화되어 있는가 해석 기준 5개 모두 예: 도입 검토 계속 진행 3~4개 예: 추가 확인 후 조건부 진행 2개 이하 예: 보류 또는 대체안 검토 BEST보안 점검 기준 다시 보기지금 검토 중인 SaaS에 바로 대입해서 비교해보세요 도입 직전에는 기능보다 운영·권한·로그·책임 구조를 먼저 확인하는 것이 안전합니다\n중소기업이 특히 주의해야 할 실수 1) 기능만 보고 계약하는 것 업무 효율이 좋아 보여도, 계정 관리나 로그가 약하면 나중에 내부 통제가 무너집니다.\n2) “대기업도 쓰니까 안전하겠지”라고 생각하는 것 기업 규모와 우리 회사의 사용 방식은 다를 수 있습니다. 같은 툴이라도 우리 조직의 권한 구조, 데이터 종류, 연동 방식에 따라 위험도는 달라집니다.\n3) AI 기능을 부가 기능으로만 보는 것 AI가 들어간 SaaS는 편리하지만, 입력 데이터와 생성 결과물의 보관·활용 범위를 별도로 봐야 합니다. 특히 민감 정보, 고객 정보, 내부 문서를 넣는 구조라면 더 엄격하게 확인해야 합니다.\n4) 계약서보다 데모에 더 오래 머무는 것 데모는 매력적이지만, 실제 승인 여부는 문서와 증거가 결정합니다.\n실무자가 바로 쓸 수 있는 질문 예시 SaaS 공급사에 아래처럼 물어보면 검토 속도가 빨라집니다.\n관리자 권한과 사용자 권한을 어떻게 분리하나요? MFA와 SSO를 지원하나요? 데이터는 어느 지역에 저장되나요? 삭제 요청 시 백업과 로그는 어떻게 처리되나요? 사고 발생 시 고객 통지 기준은 무엇인가요? 외부 감사 자료나 보안 인증서를 제공할 수 있나요? API 키와 외부 연동 권한은 어떻게 관리하나요? 이 질문에 명확히 답하지 못하면, 기능이 좋아도 도입 일정은 다시 잡는 것이 안전합니다.\n결론: SaaS 보안 실사는 ‘도입 속도를 늦추는 절차’가 아니다 좋은 SaaS 보안 실사는 도입을 막는 장벽이 아니라, 나중에 더 큰 비용을 막는 안전장치입니다. 특히 중소기업은 전담 보안 인력이 부족한 경우가 많기 때문에, 처음부터 질문서와 체크리스트를 잘 갖추는 것이 가장 큰 절약입니다.\n기능이 비슷하다면, 마지막 승부는 보안과 운영 신뢰에서 갈립니다. 도입 전에 이 10가지만 확인해도, 실패 확률은 크게 줄어듭니다.\nRECOMMENDED보안 기준 비교표로 확장하기같은 기준으로 여러 SaaS를 나란히 검토할 때 유용합니다 실사 결과는 표로 정리하면 의사결정이 훨씬 빨라집니다\n마무리 한 줄 SaaS는 ‘빨리 쓰는 것’보다 ‘안전하게 오래 쓰는 것’이 더 중요합니다.\n원한다면 다음 글로 이어서 바로 쓸 수 있는 SaaS 보안 질문서 템플릿이나 도입 검토용 비교표로 확장하면 좋습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/2/","summary":"\u003ch1 id=\"saas-보안-실사-체크리스트-도입-전에-반드시-확인해야-할-10가지\"\u003eSaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지\u003c/h1\u003e\n\u003cp\u003e중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 \u003cstrong\u003e보안 질문서\u003c/strong\u003e입니다.\n가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\u003c/p\u003e","title":"2"},{"content":"SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지 중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 보안 질문서입니다. 가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\n“이 서비스, 우리 회사 데이터는 안전한가?” “문제가 생기면 누가 책임지는가?” “감사나 대외 대응에서 설명할 수 있는가?”\n이 글은 B2B SaaS 도입 의사결정자, 특히 대표·운영총괄·IT담당·실무리더가 보안/컴플라이언스 리스크를 빠르게 판단할 수 있도록 만든 실무형 가이드입니다. 읽고 나면 SaaS 보안 실사에서 무엇을 먼저 보고, 무엇을 질문하고, 무엇을 보류해야 하는지 한 번에 정리할 수 있습니다.\nRECOMMENDED보안 기준 확인도입 전에 내부 점검 기준부터 정리하세요 공식 프레임워크를 참고해 실사 기준선을 세우는 데 유용합니다.\n왜 지금 SaaS 보안 실사가 더 중요해졌나 예전에는 “유명한 서비스인가”가 신뢰의 기준이었습니다. 지금은 다릅니다. 업무 자동화, 협업툴, CRM, AI 도구가 업무 핵심에 들어오면서 데이터가 여러 SaaS에 분산되고, 계정·권한·로그·연동·외부 공유가 한꺼번에 복잡해졌습니다.\n그 결과, 도입 실패의 원인도 기능 부족보다 보안 설계 미흡 쪽으로 옮겨가고 있습니다.\n특히 아래 상황이라면 보안 실사는 선택이 아니라 필수입니다.\n고객 정보, 거래 정보, 직원 정보가 오가는 경우 외부 협력사나 대행사와 공동 사용해야 하는 경우 AI 기능이 포함되어 프롬프트/파일/대화 로그가 생성되는 경우 국내외 법인, 해외 서버, 다국가 이용자가 섞여 있는 경우 감사 대응, 입찰, 고객사 보안 심사에 대비해야 하는 경우 SaaS 보안 실사에서 먼저 봐야 할 10가지 1) 접근제어: 누가, 어디까지, 어떻게 들어오는가 가장 먼저 확인할 것은 계정과 권한 구조입니다. 좋은 SaaS는 “접속 가능”이 아니라 “필요한 사람만 최소 권한으로 접근 가능”해야 합니다.\n체크 포인트:\nSSO 지원 여부 MFA(다중 인증) 지원 여부 역할 기반 권한 관리(RBAC) 관리자 권한 분리 퇴사자/이동자 계정 회수 프로세스 2) 데이터 암호화: 저장 시와 전송 시 모두 보호되는가 암호화는 기본이지만, 실제 검토에서는 저장 데이터와 전송 데이터가 둘 다 중요합니다. 단순히 “암호화 지원”이라고만 적힌 문구보다, 어떤 범위까지 적용되는지 확인해야 합니다.\n체크 포인트:\n전송 구간 암호화 저장 데이터 암호화 키 관리 방식 고객사 전용 키 옵션 여부 3) 데이터 위치와 보관 정책: 우리 데이터는 어디에 남는가 국내 기업은 데이터의 위치와 보관 기간을 자주 놓칩니다. 하지만 실제 리스크는 여기에 숨어 있습니다.\n체크 포인트:\n데이터 저장 지역 백업 위치 보관 기간 삭제 후 실제 파기 절차 로그와 첨부파일의 잔존 정책 4) 로그와 감사 추적: 문제를 나중에 설명할 수 있는가 보안은 “문제가 없게 만드는 것”만이 아닙니다. 문제가 생겼을 때 누가, 언제, 무엇을 했는지 재구성할 수 있어야 합니다.\n체크 포인트:\n관리자/사용자 활동 로그 로그인 이력 외부 공유 기록 권한 변경 기록 로그 보존 기간 5) 연동과 API: 편한 연결이 가장 큰 구멍이 되지 않는가 SaaS 사고는 본체보다 연동에서 더 자주 발생합니다. API 키, 웹훅, 외부 앱 연결은 편리하지만, 한 번 열리면 범위가 넓어집니다.\n체크 포인트:\nAPI 키 회수 가능 여부 허용 IP / 허용 도메인 제한 외부 앱 승인 절차 연동 권한 최소화 비활성 연동 정리 정책 6) 보안 인증과 외부 검증: 내부 주장보다 증거가 있는가 보안 설명서만으로는 부족합니다. 실사 단계에서는 외부 검증 자료가 신뢰를 좌우합니다.\n체크 포인트:\nSOC 2, ISO 27001 등 보안 인증 보유 여부 최근 보안 점검/감사 결과 침투 테스트 수행 여부 취약점 대응 프로세스 UPDATE인증 기준 살펴보기SOC 2·ISO 27001 개요를 함께 확인하세요 외부 검증 자료를 비교할 때 참고하기 좋습니다.\n7) 사고 대응: 문제가 생기면 얼마나 빨리 알 수 있는가 실제 도입에서는 “침해를 100% 막을 수 있는가”보다 “사고를 얼마나 빨리 탐지하고 대응하는가”가 더 중요합니다.\n체크 포인트:\n사고 대응 책임 부서 통지 기한 대응 절차 문서화 여부 고객 통보 기준 복구 목표 시간 8) 백업과 복구: 복구가 가능한 구조인가 백업은 있느냐가 아니라 복구가 되느냐가 핵심입니다. 테스트 없이 백업만 있는 구조는 사실상 안심할 수 없습니다.\n체크 포인트:\n백업 주기 복구 테스트 여부 복원 범위 RPO/RTO 기준 9) 개인정보와 계약 조항: 책임이 문서에 남는가 법무나 구매 단계에서는 계약서 문구가 중요합니다. 실무에서는 보안 기능만 보다가, 정작 계약 책임이 비어 있는 경우가 많습니다.\n체크 포인트:\n개인정보 처리 위탁 조항 데이터 처리 약관(DPA) 존재 여부 하위 처리자(sub-processor) 고지 파기 및 반환 조항 분쟁 발생 시 책임 범위 10) 공급망 리스크: 서비스 자체보다 주변 생태계는 안전한가 요즘 보안 검토에서 점점 중요해지는 부분입니다. SaaS는 단독 제품이 아니라 외부 클라우드, 결제, 인증, 분석, 협업, AI 기능이 엮인 생태계이기 때문입니다.\n체크 포인트:\n주요 하청/외주/하위 처리자 공개 여부 오픈소스 의존성 관리 취약점 공지와 패치 정책 보안 공지 채널 한눈에 보는 SaaS 보안 질문서 핵심 표 확인 항목 왜 중요한가 확인 방법 SSO / MFA 계정 탈취 리스크 감소 관리자 설정 화면, 제품 문서 권한 관리 내부 오남용 방지 RBAC 정책, 역할 목록 데이터 암호화 유출 시 피해 완화 보안 백서, 기술 문서 데이터 위치 규제/계약 대응 데이터 레지던시 안내 로그 보관 사고 조사 가능 감사 로그 기능 확인 API 통제 연동 리스크 축소 API 문서, 키 정책 인증/감사 외부 검증 확보 인증서, 리포트 사고 대응 통지·복구 속도 IR 문서, SLA 백업/복구 운영 연속성 확보 복구 정책, 테스트 기록 계약 조항 책임 소재 명확화 약관, DPA, 위탁계약 BEST질문서 구조 보기실사 항목을 바로 질문 형태로 전환해 보세요 내부 검토 회의나 공급사 커뮤니케이션에 활용하기 좋습니다.\n도입 전 5분 점검 체크리스트 아래 질문에 “예”가 많을수록 도입 가능성이 높습니다.\n우리 회사가 요구하는 보안 질문에 답할 문서가 있는가 관리자 권한과 일반 사용자 권한이 분리되어 있는가 퇴사자 계정 회수와 권한 회수가 자동화되는가 데이터 저장 위치와 삭제 방식이 설명되는가 사고 발생 시 통지 기준이 문서화되어 있는가 해석 기준 5개 모두 예: 도입 검토 계속 진행 3~4개 예: 추가 확인 후 조건부 진행 2개 이하 예: 보류 또는 대체안 검토 중소기업이 특히 주의해야 할 실수 1) 기능만 보고 계약하는 것 업무 효율이 좋아 보여도, 계정 관리나 로그가 약하면 나중에 내부 통제가 무너집니다.\n2) “대기업도 쓰니까 안전하겠지”라고 생각하는 것 기업 규모와 우리 회사의 사용 방식은 다를 수 있습니다. 같은 툴이라도 우리 조직의 권한 구조, 데이터 종류, 연동 방식에 따라 위험도는 달라집니다.\n3) AI 기능을 부가 기능으로만 보는 것 AI가 들어간 SaaS는 편리하지만, 입력 데이터와 생성 결과물의 보관·활용 범위를 별도로 봐야 합니다. 특히 민감 정보, 고객 정보, 내부 문서를 넣는 구조라면 더 엄격하게 확인해야 합니다.\n4) 계약서보다 데모에 더 오래 머무는 것 데모는 매력적이지만, 실제 승인 여부는 문서와 증거가 결정합니다.\n실무자가 바로 쓸 수 있는 질문 예시 SaaS 공급사에 아래처럼 물어보면 검토 속도가 빨라집니다.\n관리자 권한과 사용자 권한을 어떻게 분리하나요? MFA와 SSO를 지원하나요? 데이터는 어느 지역에 저장되나요? 삭제 요청 시 백업과 로그는 어떻게 처리되나요? 사고 발생 시 고객 통지 기준은 무엇인가요? 외부 감사 자료나 보안 인증서를 제공할 수 있나요? API 키와 외부 연동 권한은 어떻게 관리하나요? 이 질문에 명확히 답하지 못하면, 기능이 좋아도 도입 일정은 다시 잡는 것이 안전합니다.\n결론: SaaS 보안 실사는 ‘도입 속도를 늦추는 절차’가 아니다 좋은 SaaS 보안 실사는 도입을 막는 장벽이 아니라, 나중에 더 큰 비용을 막는 안전장치입니다. 특히 중소기업은 전담 보안 인력이 부족한 경우가 많기 때문에, 처음부터 질문서와 체크리스트를 잘 갖추는 것이 가장 큰 절약입니다.\n기능이 비슷하다면, 마지막 승부는 보안과 운영 신뢰에서 갈립니다. 도입 전에 이 10가지만 확인해도, 실패 확률은 크게 줄어듭니다.\n마무리 한 줄 SaaS는 ‘빨리 쓰는 것’보다 ‘안전하게 오래 쓰는 것’이 더 중요합니다.\n원한다면 다음 글로 이어서 바로 쓸 수 있는 SaaS 보안 질문서 템플릿이나 도입 검토용 비교표로 확장하면 좋습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/3/","summary":"\u003ch1 id=\"saas-보안-실사-체크리스트-도입-전에-반드시-확인해야-할-10가지\"\u003eSaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지\u003c/h1\u003e\n\u003cp\u003e중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 \u003cstrong\u003e보안 질문서\u003c/strong\u003e입니다.\n가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\u003c/p\u003e","title":"3"},{"content":"SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지 중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 보안 질문서입니다. 가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\n“이 서비스, 우리 회사 데이터는 안전한가?” “문제가 생기면 누가 책임지는가?” “감사나 대외 대응에서 설명할 수 있는가?”\n이 글은 B2B SaaS 도입 의사결정자, 특히 대표·운영총괄·IT담당·실무리더가 보안/컴플라이언스 리스크를 빠르게 판단할 수 있도록 만든 실무형 가이드입니다. 읽고 나면 SaaS 보안 실사에서 무엇을 먼저 보고, 무엇을 질문하고, 무엇을 보류해야 하는지 한 번에 정리할 수 있습니다.\nBEST보안 기준 확인실사 전에 확인해야 할 핵심 항목을 기준 문서로 다시 점검하세요 도입 검토 시 내부 기준으로 함께 참고하기 좋습니다.\n왜 지금 SaaS 보안 실사가 더 중요해졌나 예전에는 “유명한 서비스인가”가 신뢰의 기준이었습니다. 지금은 다릅니다. 업무 자동화, 협업툴, CRM, AI 도구가 업무 핵심에 들어오면서 데이터가 여러 SaaS에 분산되고, 계정·권한·로그·연동·외부 공유가 한꺼번에 복잡해졌습니다.\n그 결과, 도입 실패의 원인도 기능 부족보다 보안 설계 미흡 쪽으로 옮겨가고 있습니다.\n특히 아래 상황이라면 보안 실사는 선택이 아니라 필수입니다.\n고객 정보, 거래 정보, 직원 정보가 오가는 경우 외부 협력사나 대행사와 공동 사용해야 하는 경우 AI 기능이 포함되어 프롬프트/파일/대화 로그가 생성되는 경우 국내외 법인, 해외 서버, 다국가 이용자가 섞여 있는 경우 감사 대응, 입찰, 고객사 보안 심사에 대비해야 하는 경우 SaaS 보안 실사에서 먼저 봐야 할 10가지 1) 접근제어: 누가, 어디까지, 어떻게 들어오는가 가장 먼저 확인할 것은 계정과 권한 구조입니다. 좋은 SaaS는 “접속 가능”이 아니라 “필요한 사람만 최소 권한으로 접근 가능”해야 합니다.\n체크 포인트:\nSSO 지원 여부 MFA(다중 인증) 지원 여부 역할 기반 권한 관리(RBAC) 관리자 권한 분리 퇴사자/이동자 계정 회수 프로세스 2) 데이터 암호화: 저장 시와 전송 시 모두 보호되는가 암호화는 기본이지만, 실제 검토에서는 저장 데이터와 전송 데이터가 둘 다 중요합니다. 단순히 “암호화 지원”이라고만 적힌 문구보다, 어떤 범위까지 적용되는지 확인해야 합니다.\n체크 포인트:\n전송 구간 암호화 저장 데이터 암호화 키 관리 방식 고객사 전용 키 옵션 여부 3) 데이터 위치와 보관 정책: 우리 데이터는 어디에 남는가 국내 기업은 데이터의 위치와 보관 기간을 자주 놓칩니다. 하지만 실제 리스크는 여기에 숨어 있습니다.\n체크 포인트:\n데이터 저장 지역 백업 위치 보관 기간 삭제 후 실제 파기 절차 로그와 첨부파일의 잔존 정책 4) 로그와 감사 추적: 문제를 나중에 설명할 수 있는가 보안은 “문제가 없게 만드는 것”만이 아닙니다. 문제가 생겼을 때 누가, 언제, 무엇을 했는지 재구성할 수 있어야 합니다.\n체크 포인트:\n관리자/사용자 활동 로그 로그인 이력 외부 공유 기록 권한 변경 기록 로그 보존 기간 5) 연동과 API: 편한 연결이 가장 큰 구멍이 되지 않는가 SaaS 사고는 본체보다 연동에서 더 자주 발생합니다. API 키, 웹훅, 외부 앱 연결은 편리하지만, 한 번 열리면 범위가 넓어집니다.\n체크 포인트:\nAPI 키 회수 가능 여부 허용 IP / 허용 도메인 제한 외부 앱 승인 절차 연동 권한 최소화 비활성 연동 정리 정책 6) 보안 인증과 외부 검증: 내부 주장보다 증거가 있는가 보안 설명서만으로는 부족합니다. 실사 단계에서는 외부 검증 자료가 신뢰를 좌우합니다.\n체크 포인트:\nSOC 2, ISO 27001 등 보안 인증 보유 여부 최근 보안 점검/감사 결과 침투 테스트 수행 여부 취약점 대응 프로세스 7) 사고 대응: 문제가 생기면 얼마나 빨리 알 수 있는가 실제 도입에서는 “침해를 100% 막을 수 있는가”보다 “사고를 얼마나 빨리 탐지하고 대응하는가”가 더 중요합니다.\n체크 포인트:\n사고 대응 책임 부서 통지 기한 대응 절차 문서화 여부 고객 통보 기준 복구 목표 시간 8) 백업과 복구: 복구가 가능한 구조인가 백업은 있느냐가 아니라 복구가 되느냐가 핵심입니다. 테스트 없이 백업만 있는 구조는 사실상 안심할 수 없습니다.\n체크 포인트:\n백업 주기 복구 테스트 여부 복원 범위 RPO/RTO 기준 9) 개인정보와 계약 조항: 책임이 문서에 남는가 법무나 구매 단계에서는 계약서 문구가 중요합니다. 실무에서는 보안 기능만 보다가, 정작 계약 책임이 비어 있는 경우가 많습니다.\n체크 포인트:\n개인정보 처리 위탁 조항 데이터 처리 약관(DPA) 존재 여부 하위 처리자(sub-processor) 고지 파기 및 반환 조항 분쟁 발생 시 책임 범위 10) 공급망 리스크: 서비스 자체보다 주변 생태계는 안전한가 요즘 보안 검토에서 점점 중요해지는 부분입니다. SaaS는 단독 제품이 아니라 외부 클라우드, 결제, 인증, 분석, 협업, AI 기능이 엮인 생태계이기 때문입니다.\n체크 포인트:\n주요 하청/외주/하위 처리자 공개 여부 오픈소스 의존성 관리 취약점 공지와 패치 정책 보안 공지 채널 RECOMMENDEDISO 27001 살펴보기인증 요구사항을 함께 확인하면 공급사 답변을 더 쉽게 비교할 수 있습니다 보안 인증 여부를 검토할 때 참고하기 좋습니다.\n한눈에 보는 SaaS 보안 질문서 핵심 표 확인 항목 왜 중요한가 확인 방법 SSO / MFA 계정 탈취 리스크 감소 관리자 설정 화면, 제품 문서 권한 관리 내부 오남용 방지 RBAC 정책, 역할 목록 데이터 암호화 유출 시 피해 완화 보안 백서, 기술 문서 데이터 위치 규제/계약 대응 데이터 레지던시 안내 로그 보관 사고 조사 가능 감사 로그 기능 확인 API 통제 연동 리스크 축소 API 문서, 키 정책 인증/감사 외부 검증 확보 인증서, 리포트 사고 대응 통지·복구 속도 IR 문서, SLA 백업/복구 운영 연속성 확보 복구 정책, 테스트 기록 계약 조항 책임 소재 명확화 약관, DPA, 위탁계약 도입 전 5분 점검 체크리스트 아래 질문에 “예”가 많을수록 도입 가능성이 높습니다.\n우리 회사가 요구하는 보안 질문에 답할 문서가 있는가 관리자 권한과 일반 사용자 권한이 분리되어 있는가 퇴사자 계정 회수와 권한 회수가 자동화되는가 데이터 저장 위치와 삭제 방식이 설명되는가 사고 발생 시 통지 기준이 문서화되어 있는가 해석 기준 5개 모두 예: 도입 검토 계속 진행 3~4개 예: 추가 확인 후 조건부 진행 2개 이하 예: 보류 또는 대체안 검토 중소기업이 특히 주의해야 할 실수 1) 기능만 보고 계약하는 것 업무 효율이 좋아 보여도, 계정 관리나 로그가 약하면 나중에 내부 통제가 무너집니다.\n2) “대기업도 쓰니까 안전하겠지”라고 생각하는 것 기업 규모와 우리 회사의 사용 방식은 다를 수 있습니다. 같은 툴이라도 우리 조직의 권한 구조, 데이터 종류, 연동 방식에 따라 위험도는 달라집니다.\n3) AI 기능을 부가 기능으로만 보는 것 AI가 들어간 SaaS는 편리하지만, 입력 데이터와 생성 결과물의 보관·활용 범위를 별도로 봐야 합니다. 특히 민감 정보, 고객 정보, 내부 문서를 넣는 구조라면 더 엄격하게 확인해야 합니다.\n4) 계약서보다 데모에 더 오래 머무는 것 데모는 매력적이지만, 실제 승인 여부는 문서와 증거가 결정합니다.\n실무자가 바로 쓸 수 있는 질문 예시 SaaS 공급사에 아래처럼 물어보면 검토 속도가 빨라집니다.\n관리자 권한과 사용자 권한을 어떻게 분리하나요? MFA와 SSO를 지원하나요? 데이터는 어느 지역에 저장되나요? 삭제 요청 시 백업과 로그는 어떻게 처리되나요? 사고 발생 시 고객 통지 기준은 무엇인가요? 외부 감사 자료나 보안 인증서를 제공할 수 있나요? API 키와 외부 연동 권한은 어떻게 관리하나요? 이 질문에 명확히 답하지 못하면, 기능이 좋아도 도입 일정은 다시 잡는 것이 안전합니다.\n결론: SaaS 보안 실사는 ‘도입 속도를 늦추는 절차’가 아니다 좋은 SaaS 보안 실사는 도입을 막는 장벽이 아니라, 나중에 더 큰 비용을 막는 안전장치입니다. 특히 중소기업은 전담 보안 인력이 부족한 경우가 많기 때문에, 처음부터 질문서와 체크리스트를 잘 갖추는 것이 가장 큰 절약입니다.\n기능이 비슷하다면, 마지막 승부는 보안과 운영 신뢰에서 갈립니다. 도입 전에 이 10가지만 확인해도, 실패 확률은 크게 줄어듭니다.\n마무리 한 줄 SaaS는 ‘빨리 쓰는 것’보다 ‘안전하게 오래 쓰는 것’이 더 중요합니다.\n원한다면 다음 글로 이어서 바로 쓸 수 있는 SaaS 보안 질문서 템플릿이나 도입 검토용 비교표로 확장하면 좋습니다.\nUPDATE도입 검토 기준 더 보기질문서와 비교표를 함께 두면 의사결정 속도가 빨라집니다 실무 검토 문서와 함께 활용하기 좋습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/4/","summary":"\u003ch1 id=\"saas-보안-실사-체크리스트-도입-전에-반드시-확인해야-할-10가지\"\u003eSaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지\u003c/h1\u003e\n\u003cp\u003e중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 \u003cstrong\u003e보안 질문서\u003c/strong\u003e입니다.\n가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\u003c/p\u003e","title":"4"},{"content":"SaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지 중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 보안 질문서입니다. 가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\n“이 서비스, 우리 회사 데이터는 안전한가?” “문제가 생기면 누가 책임지는가?” “감사나 대외 대응에서 설명할 수 있는가?”\n이 글은 B2B SaaS 도입 의사결정자, 특히 대표·운영총괄·IT담당·실무리더가 보안/컴플라이언스 리스크를 빠르게 판단할 수 있도록 만든 실무형 가이드입니다. 읽고 나면 SaaS 보안 실사에서 무엇을 먼저 보고, 무엇을 질문하고, 무엇을 보류해야 하는지 한 번에 정리할 수 있습니다.\nRECOMMENDEDSaaS 보안 기준서 보기도입 전 검토할 핵심 통제 항목을 공식 프레임워크로 확인하세요. 실무 검토용 기준 정리에 유용합니다.\n왜 지금 SaaS 보안 실사가 더 중요해졌나 예전에는 “유명한 서비스인가”가 신뢰의 기준이었습니다. 지금은 다릅니다. 업무 자동화, 협업툴, CRM, AI 도구가 업무 핵심에 들어오면서 데이터가 여러 SaaS에 분산되고, 계정·권한·로그·연동·외부 공유가 한꺼번에 복잡해졌습니다.\n그 결과, 도입 실패의 원인도 기능 부족보다 보안 설계 미흡 쪽으로 옮겨가고 있습니다.\n특히 아래 상황이라면 보안 실사는 선택이 아니라 필수입니다.\n고객 정보, 거래 정보, 직원 정보가 오가는 경우 외부 협력사나 대행사와 공동 사용해야 하는 경우 AI 기능이 포함되어 프롬프트/파일/대화 로그가 생성되는 경우 국내외 법인, 해외 서버, 다국다 이용자가 섞여 있는 경우 감사 대응, 입찰, 고객사 보안 심사에 대비해야 하는 경우 SaaS 보안 실사에서 먼저 봐야 할 10가지 1) 접근제어: 누가, 어디까지, 어떻게 들어오는가 가장 먼저 확인할 것은 계정과 권한 구조입니다. 좋은 SaaS는 “접속 가능”이 아니라 “필요한 사람만 최소 권한으로 접근 가능”해야 합니다.\n체크 포인트:\nSSO 지원 여부 MFA(다중 인증) 지원 여부 역할 기반 권한 관리(RBAC) 관리자 권한 분리 퇴사자/이동자 계정 회수 프로세스 2) 데이터 암호화: 저장 시와 전송 시 모두 보호되는가 암호화는 기본이지만, 실제 검토에서는 저장 데이터와 전송 데이터가 둘 다 중요합니다. 단순히 “암호화 지원”이라고만 적힌 문구보다, 어떤 범위까지 적용되는지 확인해야 합니다.\n체크 포인트:\n전송 구간 암호화 저장 데이터 암호화 키 관리 방식 고객사 전용 키 옵션 여부 3) 데이터 위치와 보관 정책: 우리 데이터는 어디에 남는가 국내 기업은 데이터의 위치와 보관 기간을 자주 놓칩니다. 하지만 실제 리스크는 여기에 숨어 있습니다.\n체크 포인트:\n데이터 저장 지역 백업 위치 보관 기간 삭제 후 실제 파기 절차 로그와 첨부파일의 잔존 정책 4) 로그와 감사 추적: 문제를 나중에 설명할 수 있는가 보안은 “문제가 없게 만드는 것”만이 아닙니다. 문제가 생겼을 때 누가, 언제, 무엇을 했는지 재구성할 수 있어야 합니다.\n체크 포인트:\n관리자/사용자 활동 로그 로그인 이력 외부 공유 기록 권한 변경 기록 로그 보존 기간 5) 연동과 API: 편한 연결이 가장 큰 구멍이 되지 않는가 SaaS 사고는 본체보다 연동에서 더 자주 발생합니다. API 키, 웹훅, 외부 앱 연결은 편리하지만, 한 번 열리면 범위가 넓어집니다.\n체크 포인트:\nAPI 키 회수 가능 여부 허용 IP / 허용 도메인 제한 외부 앱 승인 절차 연동 권한 최소화 비활성 연동 정리 정책 6) 보안 인증과 외부 검증: 내부 주장보다 증거가 있는가 보안 설명서만으로는 부족합니다. 실사 단계에서는 외부 검증 자료가 신뢰를 좌우합니다.\n체크 포인트:\nSOC 2, ISO 27001 등 보안 인증 보유 여부 최근 보안 점검/감사 결과 침투 테스트 수행 여부 취약점 대응 프로세스 UPDATE보안 질문서 참고하기SaaS 공급사에 물어볼 항목을 한 번에 정리해 보세요. 체크리스트와 함께 비교 검토할 때 효과적입니다.\n7) 사고 대응: 문제가 생기면 얼마나 빨리 알 수 있는가 실제 도입에서는 “침해를 100% 막을 수 있는가”보다 “사고를 얼마나 빨리 탐지하고 대응하는가”가 더 중요합니다.\n체크 포인트:\n사고 대응 책임 부서 통지 기한 대응 절차 문서화 여부 고객 통보 기준 복구 목표 시간 8) 백업과 복구: 복구가 가능한 구조인가 백업은 있느냐가 아니라 복구가 되느냐가 핵심입니다. 테스트 없이 백업만 있는 구조는 사실상 안심할 수 없습니다.\n체크 포인트:\n백업 주기 복구 테스트 여부 복원 범위 RPO/RTO 기준 9) 개인정보와 계약 조항: 책임이 문서에 남는가 법무나 구매 단계에서는 계약서 문구가 중요합니다. 실무에서는 보안 기능만 보다가, 정작 계약 책임이 비어 있는 경우가 많습니다.\n체크 포인트:\n개인정보 처리 위탁 조항 데이터 처리 약관(DPA) 존재 여부 하위 처리자(sub-processor) 고지 파기 및 반환 조항 분쟁 발생 시 책임 범위 10) 공급망 리스크: 서비스 자체보다 주변 생태계는 안전한가 요즘 보안 검토에서 점점 중요해지는 부분입니다. SaaS는 단독 제품이 아니라 외부 클라우드, 결제, 인증, 분석, 협업, AI 기능이 엮인 생태계이기 때문입니다.\n체크 포인트:\n주요 하청/외주/하위 처리자 공개 여부 오픈소스 의존성 관리 취약점 공지와 패치 정책 보안 공지 채널 한눈에 보는 SaaS 보안 질문서 핵심 표 확인 항목 왜 중요한가 확인 방법 SSO / MFA 계정 탈취 리스크 감소 관리자 설정 화면, 제품 문서 권한 관리 내부 오남용 방지 RBAC 정책, 역할 목록 데이터 암호화 유출 시 피해 완화 보안 백서, 기술 문서 데이터 위치 규제/계약 대응 데이터 레지던시 안내 로그 보관 사고 조사 가능 감사 로그 기능 확인 API 통제 연동 리스크 축소 API 문서, 키 정책 인증/감사 외부 검증 확보 인증서, 리포트 사고 대응 통지·복구 속도 IR 문서, SLA 백업/복구 운영 연속성 확보 복구 정책, 테스트 기록 계약 조항 책임 소재 명확화 약관, DPA, 위탁계약 BEST클라우드 보안 가이드 더 보기운영과 통제 기준을 함께 점검할 때 도움이 됩니다. 도입 검토용 내부 기준 수립에 참고할 수 있습니다.\n도입 전 5분 점검 체크리스트 아래 질문에 “예”가 많을수록 도입 가능성이 높습니다.\n우리 회사가 요구하는 보안 질문에 답할 문서가 있는가 관리자 권한과 일반 사용자 권한이 분리되어 있는가 퇴사자 계정 회수와 권한 회수가 자동화되는가 데이터 저장 위치와 삭제 방식이 설명되는가 사고 발생 시 통지 기준이 문서화되어 있는가 해석 기준 5개 모두 예: 도입 검토 계속 진행 3~4개 예: 추가 확인 후 조건부 진행 2개 이하 예: 보류 또는 대체안 검토 중소기업이 특히 주의해야 할 실수 1) 기능만 보고 계약하는 것 업무 효율이 좋아 보여도, 계정 관리나 로그가 약하면 나중에 내부 통제가 무너집니다.\n2) “대기업도 쓰니까 안전하겠지”라고 생각하는 것 기업 규모와 우리 회사의 사용 방식은 다를 수 있습니다. 같은 툴이라도 우리 조직의 권한 구조, 데이터 종류, 연동 방식에 따라 위험도는 달라집니다.\n3) AI 기능을 부가 기능으로만 보는 것 AI가 들어간 SaaS는 편리하지만, 입력 데이터와 생성 결과물의 보관·활용 범위를 별도로 봐야 합니다. 특히 민감 정보, 고객 정보, 내부 문서를 넣는 구조라면 더 엄격하게 확인해야 합니다.\n4) 계약서보다 데모에 더 오래 머무는 것 데모는 매력적이지만, 실제 승인 여부는 문서와 증거가 결정합니다.\n실무자가 바로 쓸 수 있는 질문 예시 SaaS 공급사에 아래처럼 물어보면 검토 속도가 빨라집니다.\n관리자 권한과 사용자 권한을 어떻게 분리하나요? MFA와 SSO를 지원하나요? 데이터는 어느 지역에 저장되나요? 삭제 요청 시 백업과 로그는 어떻게 처리되나요? 사고 발생 시 고객 통지 기준은 무엇인가요? 외부 감사 자료나 보안 인증서를 제공할 수 있나요? API 키와 외부 연동 권한은 어떻게 관리하나요? 이 질문에 명확히 답하지 못하면, 기능이 좋아도 도입 일정은 다시 잡는 것이 안전합니다.\n결론: SaaS 보안 실사는 ‘도입 속도를 늦추는 절차’가 아니다 좋은 SaaS 보안 실사는 도입을 막는 장벽이 아니라, 나중에 더 큰 비용을 막는 안전장치입니다. 특히 중소기업은 전담 보안 인력이 부족한 경우가 많기 때문에, 처음부터 질문서와 체크리스트를 잘 갖추는 것이 가장 큰 절약입니다.\n기능이 비슷하다면, 마지막 승부는 보안과 운영 신뢰에서 갈립니다. 도입 전에 이 10가지만 확인해도, 실패 확률은 크게 줄어듭니다.\nRECOMMENDED보안 거버넌스 확인하기도입 이후 운영 기준까지 함께 점검해 보세요. 중소기업용 체크리스트 정리에 잘 맞습니다.\n마무리 한 줄 SaaS는 ‘빨리 쓰는 것’보다 ‘안전하게 오래 쓰는 것’이 더 중요합니다.\n원한다면 다음 글로 이어서 바로 쓸 수 있는 SaaS 보안 질문서 템플릿이나 도입 검토용 비교표로 확장하면 좋습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/5/","summary":"\u003ch1 id=\"saas-보안-실사-체크리스트-도입-전에-반드시-확인해야-할-10가지\"\u003eSaaS 보안 실사 체크리스트: 도입 전에 반드시 확인해야 할 10가지\u003c/h1\u003e\n\u003cp\u003e중소기업이 SaaS를 도입할 때 가장 많이 막히는 지점은 기능 비교가 아니라 \u003cstrong\u003e보안 질문서\u003c/strong\u003e입니다.\n가격이 맞고, 기능도 충분하고, 도입 효과도 기대되는데 마지막 순간에 멈추는 이유는 대체로 같습니다.\u003c/p\u003e","title":"5"},{"content":"accordion shortcode accordion는 themes/1/layouts/_shortcodes/readme/custom/accordion.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 첫 번째 질문 첫 번째 답변입니다.\n목록도 넣을 수 있습니다. 두 번째 질문 두 번째 답변입니다. 원형 {{\u0026lt; accordion group=\u0026#34;faq\u0026#34; class=\u0026#34;lab-accordion\u0026#34; \u0026gt;}} {{\u0026lt; accordionItem group=\u0026#34;faq\u0026#34; title=\u0026#34;첫 번째 질문\u0026#34; open=true icon=\u0026#34;chevron-down\u0026#34; \u0026gt;}} 첫 번째 답변입니다. - 목록도 넣을 수 있습니다. {{\u0026lt; /accordionItem \u0026gt;}} {{\u0026lt; accordionItem group=\u0026#34;faq\u0026#34; title=\u0026#34;두 번째 질문\u0026#34; \u0026gt;}} 두 번째 답변입니다. {{\u0026lt; /accordionItem \u0026gt;}} {{\u0026lt; /accordion \u0026gt;}} 확인 포인트 accordion과 accordionItem은 같은 group 값으로 묶어야 합니다. title은 따옴표로 감싸서 안전하게 전달합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/accordion/","summary":"\u003ch1 id=\"accordion-shortcode\"\u003eaccordion shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eaccordion\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/accordion.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"accordion shortcode"},{"content":"accordionItem shortcode accordionItem는 themes/1/layouts/_shortcodes/readme/custom/accordionItem.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 질문 제목 여기는 답변 본문입니다.\nbody는 Markdown으로 렌더링됩니다. open=true면 처음부터 펼쳐집니다. 원형 {{\u0026lt; accordionItem group=\u0026#34;faq\u0026#34; title=\u0026#34;질문 제목\u0026#34; open=true icon=\u0026#34;chevron-down\u0026#34; id=\u0026#34;faq-item-1\u0026#34; class=\u0026#34;is-lab\u0026#34; \u0026gt;}} 여기는 답변 본문입니다. - body는 Markdown으로 렌더링됩니다. - `open=true`면 처음부터 펼쳐집니다. {{\u0026lt; /accordionItem \u0026gt;}} 확인 포인트 title은 필수에 가깝게 다루는 편이 안전합니다. group과 id는 accordion 컨테이너와 충돌하지 않게 맞춥니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/accordionitem/","summary":"\u003ch1 id=\"accordionitem-shortcode\"\u003eaccordionItem shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eaccordionItem\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/accordionItem.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"accordionItem shortcode"},{"content":"alert shortcode alert는 themes/1/layouts/_shortcodes/readme/custom/alert.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 안내 숨기기 이 문장은 안내용 alert 본문입니다. 원형 {{\u0026lt; alert kind=\u0026#34;info\u0026#34; title=\u0026#34;안내\u0026#34; icon=\u0026#34;info\u0026#34; dismissible=true compact=false class=\u0026#34;lab-alert\u0026#34; \u0026gt;}} 이 문장은 안내용 alert 본문입니다. {{\u0026lt; /alert \u0026gt;}} 확인 포인트 kind는 허용값만 사용하는 편이 안전합니다. 본문이 있을 때와 없을 때의 레이아웃 차이를 함께 확인합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/alert/","summary":"\u003ch1 id=\"alert-shortcode\"\u003ealert shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ealert\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/alert.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"alert shortcode"},{"content":"audio shortcode audio는 themes/1/layouts/_shortcodes/readme/custom/audio.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 샘플 오디오샘플 오디오오디오 캡션오디오 파일 다운로드\n원형 {{\u0026lt; audio src=\u0026#34;https://example.com/audio.mp3\u0026#34; type=\u0026#34;audio/mpeg\u0026#34; title=\u0026#34;샘플 오디오\u0026#34; caption=\u0026#34;오디오 캡션\u0026#34; preload=\u0026#34;metadata\u0026#34; autoplay=false loop=false download=true class=\u0026#34;lab-audio\u0026#34; \u0026gt;}} 오디오에 대한 추가 설명입니다. {{\u0026lt; /audio \u0026gt;}} 확인 포인트 src 또는 url 중 하나를 사용합니다. sources를 추가할 때는 url|type 형식의 문자열을 세미콜론으로 구분합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/audio/","summary":"\u003ch1 id=\"audio-shortcode\"\u003eaudio shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eaudio\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/audio.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"audio shortcode"},{"content":"badge shortcode badge는 themes/1/layouts/_shortcodes/readme/custom/badge.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 NEW 원형 {{\u0026lt; badge text=\u0026#34;NEW\u0026#34; tone=\u0026#34;accent\u0026#34; size=\u0026#34;sm\u0026#34; rounded=true href=\u0026#34;/blog/\u0026#34; class=\u0026#34;lab-badge\u0026#34; \u0026gt;}} 확인 포인트 text는 짧게 유지합니다. href와 ref는 같은 호출 안에서 혼용하지 않는 편이 안전합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/badge/","summary":"\u003ch1 id=\"badge-shortcode\"\u003ebadge shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ebadge\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/badge.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"badge shortcode"},{"content":"bluesky shortcode bluesky는 themes/1/layouts/_shortcodes/readme/custom/bluesky.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 BlueskyBluesky Bluesky 예시\n원문 보기 원형 {{\u0026lt; bluesky url=\u0026#34;https://bsky.app/profile/example.com/post/3\u0026#34; caption=\u0026#34;Bluesky 예시\u0026#34; theme=\u0026#34;auto\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /bluesky \u0026gt;}} 확인 포인트 url가 우선이며 post_id는 보조 입력입니다. 임베드보다 링크 카드 fallback을 우선합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/bluesky/","summary":"\u003ch1 id=\"bluesky-shortcode\"\u003ebluesky shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ebluesky\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/bluesky.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"bluesky shortcode"},{"content":"button shortcode button는 themes/1/layouts/_shortcodes/readme/custom/button.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 자세히 보기 원형 {{\u0026lt; button label=\u0026#34;자세히 보기\u0026#34; href=\u0026#34;https://example.com\u0026#34; kind=\u0026#34;primary\u0026#34; size=\u0026#34;md\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;\u0026#34; download=false class=\u0026#34;lab-button\u0026#34; \u0026gt;}} 확인 포인트 label이 비어 있으면 body를 대체값으로 사용할 수 있습니다. target=\u0026quot;_blank\u0026quot;에서는 rel 기본값 정책을 확인합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/button/","summary":"\u003ch1 id=\"button-shortcode\"\u003ebutton shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ebutton\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/button.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"button shortcode"},{"content":"card shortcode card는 themes/1/layouts/_shortcodes/readme/custom/card.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 LAB\n카드 제목카드 부제\n카드 본문 설명입니다. 원형 {{\u0026lt; card title=\u0026#34;카드 제목\u0026#34; subtitle=\u0026#34;카드 부제\u0026#34; image=\u0026#34;https://example.com/card.jpg\u0026#34; badge=\u0026#34;LAB\u0026#34; href=\u0026#34;https://example.com\u0026#34; overlay=false style=\u0026#34;surface\u0026#34; class=\u0026#34;lab-card\u0026#34; \u0026gt;}} 카드 본문 설명입니다. {{\u0026lt; /card \u0026gt;}} 확인 포인트 title과 href 조합이 핵심입니다. overlay와 style이 레이아웃에 미치는 영향을 함께 확인합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/card/","summary":"\u003ch1 id=\"card-shortcode\"\u003ecard shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecard\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/card.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"card shortcode"},{"content":"collapse shortcode collapse는 themes/1/layouts/_shortcodes/readme/custom/collapse.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 자세히 보기여기는 접을 수 있는 본문입니다. 원형 {{\u0026lt; collapse summary=\u0026#34;자세히 보기\u0026#34; openByDefault=true class=\u0026#34;lab-collapse\u0026#34; \u0026gt;}} 여기는 접을 수 있는 본문입니다. {{\u0026lt; /collapse \u0026gt;}} 확인 포인트 summary/title/positional 인자 혼용을 피합니다. open과 openByDefault의 우선순위를 함께 확인합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/collapse/","summary":"\u003ch1 id=\"collapse-shortcode\"\u003ecollapse shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecollapse\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/collapse.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"collapse shortcode"},{"content":"column shortcode column는 themes/1/layouts/_shortcodes/readme/custom/column.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 열 내부의 Markdown 본문입니다. 원형 {{\u0026lt; column class=\u0026#34;lab-column\u0026#34; \u0026gt;}} 열 내부의 Markdown 본문입니다. {{\u0026lt; /column \u0026gt;}} 확인 포인트 column은 columns 컨테이너 내부에서 쓰는 편이 안전합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/column/","summary":"\u003ch1 id=\"column-shortcode\"\u003ecolumn shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecolumn\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/column.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"column shortcode"},{"content":"columns shortcode columns는 themes/1/layouts/_shortcodes/readme/custom/columns.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 첫 번째 열입니다. 두 번째 열입니다. 원형 {{\u0026lt; columns count=\u0026#34;2\u0026#34; gap=\u0026#34;md\u0026#34; align=\u0026#34;stretch\u0026#34; stack_on=\u0026#34;md\u0026#34; class=\u0026#34;lab-columns\u0026#34; \u0026gt;}} {{\u0026lt; column \u0026gt;}} 첫 번째 열입니다. {{\u0026lt; /column \u0026gt;}} {{\u0026lt; column \u0026gt;}} 두 번째 열입니다. {{\u0026lt; /column \u0026gt;}} {{\u0026lt; /columns \u0026gt;}} 확인 포인트 count는 2~4 사이가 안전합니다. column과 함께 써서 구조를 확인합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/columns/","summary":"\u003ch1 id=\"columns-shortcode\"\u003ecolumns shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecolumns\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/columns.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"columns shortcode"},{"content":"cta 테스트 목적 CTA는 사용자가 다음 행동을 선택하는 지점입니다. 너무 약하면 눈에 띄지 않고, 너무 강하면 본문을 압도합니다.\n확인 항목 행동 문구가 짧고 분명한가 보조 설명이 있더라도 주 행동을 가리지 않는가 외부 링크와 내부 링크가 구분되는가 예시 구조 검토 요청 평일 기준 1영업일 내 확인\n구조 검토 요청 평일 기준 1영업일 내 확인\n구조 검토 요청 평일 기준 1영업일 내 확인\n구조 검토 요청 평일 기준 1영업일 내 확인\n구조 검토 요청 평일 기준 1영업일 내 확인\n업그레이드 요약 보기 실패 기준 CTA가 본문보다 시선을 더 크게 빼앗는 경우 긴 노트가 레이아웃을 무너뜨리는 경우 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/30-components/cta/","summary":"\u003ch1 id=\"cta\"\u003ecta\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003eCTA는 사용자가 다음 행동을 선택하는 지점입니다. 너무 약하면 눈에 띄지 않고, 너무 강하면 본문을 압도합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e행동 문구가 짧고 분명한가\u003c/li\u003e\n\u003cli\u003e보조 설명이 있더라도 주 행동을 가리지 않는가\u003c/li\u003e\n\u003cli\u003e외부 링크와 내부 링크가 구분되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cp\u003e\u003cdiv 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 \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e구조 검토 요청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e평일 기준 1영업일 내 확인\u003c/p\u003e","title":"CTA"},{"content":"cta shortcode cta는 themes/1/layouts/_shortcodes/readme/custom/cta.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 BASE기본 CTA자세히 보기 기본 동작을 확인합니다.\n기본 CTA의 본문 보조 설명입니다. OFFICIAL외부 문서 열기공식 문서 새 창에서 외부 문서를 엽니다.\n새 창 열기와 rel 기본값을 함께 확인합니다. 폴백 CTA 알 수 없는 kind 가 들어와도 안전하게 기본 동작으로 내려갑니다. 원형 {{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;기본 CTA\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;기본 동작을 확인합니다.\u0026#34; subtitle=\u0026#34;자세히 보기\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;BASE\u0026#34; tracking_id=\u0026#34;cta-kind-01\u0026#34; analytics_event=\u0026#34;cta_kind_default\u0026#34; id=\u0026#34;cta-kind-default\u0026#34; class=\u0026#34;is-default\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 기본 CTA의 본문 보조 설명입니다. {{\u0026lt; /cta \u0026gt;}} {{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;외부 문서 열기\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;새 창에서 외부 문서를 엽니다.\u0026#34; subtitle=\u0026#34;공식 문서\u0026#34; aria_label=\u0026#34;외부 링크\u0026#34; badge=\u0026#34;OFFICIAL\u0026#34; tracking_id=\u0026#34;cta-kind-02\u0026#34; analytics_event=\u0026#34;cta_kind_external\u0026#34; id=\u0026#34;cta-kind-external\u0026#34; class=\u0026#34;is-external\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 새 창 열기와 rel 기본값을 함께 확인합니다. {{\u0026lt; /cta \u0026gt;}} {{\u0026lt; cta kind=\u0026#34;unknown-kind\u0026#34; label=\u0026#34;폴백 CTA\u0026#34; href=\u0026#34;https://example.com/fallback\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;muted\u0026#34; align=\u0026#34;left\u0026#34; compact=true disabled=false \u0026gt;}} 알 수 없는 kind 가 들어와도 안전하게 기본 동작으로 내려갑니다. {{\u0026lt; /cta \u0026gt;}} 확인 포인트 cta는 우선순위와 폴백이 많아서 가장 먼저, 가장 보수적으로 확인합니다. href/ref는 같은 호출에서 둘 다 넣어도 우선순위가 문서와 코드에서 일치해야 합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/cta/","summary":"\u003ch1 id=\"cta-shortcode\"\u003ecta shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecta\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/cta.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"cta shortcode"},{"content":" {{\u0026lt; cta kind=\u0026#34;\u0026#34; label=\u0026#34;\u0026#34; href=\u0026#34;\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;\u0026#34; priority=\u0026#34;\u0026#34; surface=\u0026#34;\u0026#34; size=\u0026#34;\u0026#34; tone=\u0026#34;\u0026#34; align=\u0026#34;\u0026#34; target=\u0026#34;\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;\u0026#34; tracking_id=\u0026#34;\u0026#34; analytics_event=\u0026#34;\u0026#34; id=\u0026#34;\u0026#34; class=\u0026#34;\u0026#34; compact=\u0026#34;\u0026#34; disabled=\u0026#34;\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/01-empty-values/cta-all-empty/","summary":"\u003cdiv 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 \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"%3cnil%3e\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"cta-all-empty"},{"content":" 자세히 보기 {{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;자세히 보기\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;\u0026#34; tracking_id=\u0026#34;\u0026#34; analytics_event=\u0026#34;\u0026#34; id=\u0026#34;\u0026#34; class=\u0026#34;\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/02-default-values/cta-default-only/","summary":"\u003cdiv 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 \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"generic\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e자세히 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;자세히 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"cta-default-only"},{"content":" OFFICIAL외부 문서 열기공식 문서 새 창에서 열립니다\n\u0026lt;!-- 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 --\u0026gt; {{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;외부 문서 열기\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;새 창에서 열립니다\u0026#34; subtitle=\u0026#34;공식 문서\u0026#34; aria_label=\u0026#34;외부 문서 열기\u0026#34; badge=\u0026#34;OFFICIAL\u0026#34; tracking_id=\u0026#34;cta-docs-hero\u0026#34; analytics_event=\u0026#34;cta_docs_open\u0026#34; id=\u0026#34;cta-docs-hero\u0026#34; class=\u0026#34;is-promo\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/03-enum-comments/cta-enum-commented/","summary":"\u003cdiv id=\"cta-docs-hero\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-brand cta--align-center cta--has-body cta--compact is-promo\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-docs-hero\" data-analytics-event=\"cta_docs_open\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"외부 문서 열기\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eOFFICIAL\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e외부 문서 열기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e공식 문서\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e새 창에서 열립니다\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;!--\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eCTA shortcode keys (known preset / enum-like values)\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ekind (known presets used in this pack):\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003edefault | external | related | consult | download | newsletter | trial | price_check | utility | custom | copy | internal | custom_offer\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eunknown kind examples fall back to default behavior.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epriority:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eprimary | secondary | tertiary | utility\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003esurface:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003einline | hero | in-content | after-content | footer | sidebar | header\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003esize:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003exs | sm | md | lg | xl\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003etone:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ebrand | accent | neutral | muted | success | warning | danger\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ealign:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eleft | center | right | stretch\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003etarget:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e_self | _blank\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e--\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;외부 문서 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;새 창에서 열립니다\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;공식 문서\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;외부 문서 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;OFFICIAL\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-docs-hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_docs_open\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-docs-hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-promo\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"cta-enum-commented"},{"content":"design-probe shortcode design-probe는 themes/1/layouts/_shortcodes/readme/custom/design-probe.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 design-probe 이 shortcode는 중앙 디자인 토큰의 연결 상태를 점검하기 위한 진단용 출력이다. 기준 데이터는 themes/1/data/00-system/design/ 아래에 있다. 중앙 소스 themes/1/data/00-system/design/ 색상, 간격, 타이포, 상태값은 이 계층을 기준으로 읽어야 한다. 해석 기준 • 토큰은 하드코딩 대신 CSS custom property 경유로 확인한다. • layout은 진단용 메시지만 제공하고, 정책 계산은 여기서 하지 않는다. • 운영 UI로 쓰지 않고, 디자인/구조 검증 시에만 사용한다. 추가 메모 토큰 연결 상태를 확인하는 진단 메모입니다. 원형 {{\u0026lt; design-probe \u0026gt;}} 토큰 연결 상태를 확인하는 진단 메모입니다. {{\u0026lt; /design-probe \u0026gt;}} 확인 포인트 운영 콘텐츠가 아니라 점검용 문서로만 사용합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/design-probe/","summary":"\u003ch1 id=\"design-probe-shortcode\"\u003edesign-probe shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003edesign-probe\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/design-probe.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"design-probe shortcode"},{"content":"details shortcode details는 HTML의 \u0026lt;details\u0026gt; / \u0026lt;summary\u0026gt; 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.\n공식 문서 기준으로 summary, open, class, name, title 인자를 받을 수 있습니다. summary는 접혀 있을 때 보이는 제목이고, open은 처음부터 펼칠지 여부를 정합니다. class는 스타일링을 위한 훅이고, name과 title은 브라우저와 접근성 도구에서 추가 의미를 줄 때 유용합니다. citeturn123799view0\n렌더링 결과 세부 설명 보기 이 안의 내용은 처음부터 펼쳐진 상태로 보입니다.\n복잡한 설정을 단계별로 설명할 때 좋습니다. 긴 보조 설명을 본문 흐름에서 분리할 수 있습니다. FAQ, 용어 설명, 실험 메모와 잘 어울립니다. 원형 {{\u0026lt; details summary=\u0026#34;세부 설명 보기\u0026#34; open=true class=\u0026#34;lab-details\u0026#34; name=\u0026#34;details-lab\u0026#34; title=\u0026#34;Hugo details shortcode 예시\u0026#34; \u0026gt;}} 이 안의 내용은 처음부터 펼쳐진 상태로 보입니다. - 복잡한 설정을 단계별로 설명할 때 좋습니다. - 긴 보조 설명을 본문 흐름에서 분리할 수 있습니다. \u0026lt;!-- 이 주석은 예제 원형에만 들어가고, 실제 렌더링된 HTML에서는 보이지 않습니다. --\u0026gt; {{\u0026lt; /details \u0026gt;}} 해석 포인트 summary는 사실상 버튼 역할을 합니다. open=true를 주면 독자가 클릭하지 않아도 내용을 확인할 수 있습니다. class를 분리해 두면 테마 전역 스타일과 구분하기 쉽습니다. 내부 본문은 일반 Markdown으로 써도 되므로, 문단과 목록을 자연스럽게 섞을 수 있습니다. 추천 사용처 실험 결과를 접어 두고 싶을 때 API 옵션 설명을 부연하고 싶을 때 본문을 가볍게 유지하면서 추가 정보를 제공하고 싶을 때 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/details/","summary":"\u003ch1 id=\"details-shortcode\"\u003edetails shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003edetails\u003c/code\u003e는 HTML의 \u003ccode\u003e\u0026lt;details\u0026gt;\u003c/code\u003e / \u003ccode\u003e\u0026lt;summary\u0026gt;\u003c/code\u003e 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.\u003c/p\u003e","title":"details shortcode"},{"content":"details shortcode details는 HTML의 \u0026lt;details\u0026gt; / \u0026lt;summary\u0026gt; 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.\n공식 문서 기준으로 summary, open, class, name, title 인자를 받을 수 있습니다. summary는 접혀 있을 때 보이는 제목이고, open은 처음부터 펼칠지 여부를 정합니다. class는 스타일링을 위한 훅이고, name과 title은 브라우저와 접근성 도구에서 추가 의미를 줄 때 유용합니다. citeturn123799view0\n렌더링 결과 세부 설명 보기 이 안의 내용은 처음부터 펼쳐진 상태로 보입니다.\n복잡한 설정을 단계별로 설명할 때 좋습니다. 긴 보조 설명을 본문 흐름에서 분리할 수 있습니다. FAQ, 용어 설명, 실험 메모와 잘 어울립니다. 원형 {{\u0026lt; details summary=\u0026#34;세부 설명 보기\u0026#34; open=true class=\u0026#34;lab-details\u0026#34; name=\u0026#34;details-lab\u0026#34; title=\u0026#34;Hugo details shortcode 예시\u0026#34; \u0026gt;}} 이 안의 내용은 처음부터 펼쳐진 상태로 보입니다. - 복잡한 설정을 단계별로 설명할 때 좋습니다. - 긴 보조 설명을 본문 흐름에서 분리할 수 있습니다. \u0026lt;!-- 이 주석은 예제 원형에만 들어가고, 실제 렌더링된 HTML에서는 보이지 않습니다. --\u0026gt; {{\u0026lt; /details \u0026gt;}} 해석 포인트 summary는 사실상 버튼 역할을 합니다. open=true를 주면 독자가 클릭하지 않아도 내용을 확인할 수 있습니다. class를 분리해 두면 테마 전역 스타일과 구분하기 쉽습니다. 내부 본문은 일반 Markdown으로 써도 되므로, 문단과 목록을 자연스럽게 섞을 수 있습니다. 추천 사용처 실험 결과를 접어 두고 싶을 때 API 옵션 설명을 부연하고 싶을 때 본문을 가볍게 유지하면서 추가 정보를 제공하고 싶을 때 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/details/","summary":"\u003ch1 id=\"details-shortcode\"\u003edetails shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003edetails\u003c/code\u003e는 HTML의 \u003ccode\u003e\u0026lt;details\u0026gt;\u003c/code\u003e / \u003ccode\u003e\u0026lt;summary\u0026gt;\u003c/code\u003e 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.\u003c/p\u003e","title":"details shortcode"},{"content":"facebook shortcode facebook는 themes/1/layouts/_shortcodes/readme/custom/facebook.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 FacebookFacebook Facebook 예시\n원문 보기 원형 {{\u0026lt; facebook url=\u0026#34;https://www.facebook.com/example/posts/1\u0026#34; caption=\u0026#34;Facebook 예시\u0026#34; theme=\u0026#34;neutral\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /facebook \u0026gt;}} 확인 포인트 원문 링크가 최종 fallback입니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/facebook/","summary":"\u003ch1 id=\"facebook-shortcode\"\u003efacebook shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003efacebook\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/facebook.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"facebook shortcode"},{"content":"클릭하여 원본 보기민감한 예시 이미지 {{\u0026lt; figure src=\u0026#34;https://res.cloudinary.com/dhfuy7rvysadf/image/upload/v1782785290/5._sample-migration-validation-dashboard_b2mfca.png\u0026#34; alt=\u0026#34;Private example\u0026#34; caption=\u0026#34;민감한 예시 이미지\u0026#34; privacy=true privacy_mode=\u0026#34;blur\u0026#34; privacy_strength=18 privacy_overlay_opacity=0.62 privacy_message=\u0026#34;클릭하여 원본 보기\u0026#34; privacy_label=\u0026#34;원본 이미지를 보려면 선택하세요\u0026#34; privacy_click_to_reveal=true \u0026gt;}} 모자이크 처리된 이미지가림 방식 예시 {{\u0026lt; figure src=\u0026#34;https://res.cloudinary.com/dhfuy7rvysadf/image/upload/v1782785290/5._sample-migration-validation-dashboard_b2mfca.png\u0026#34; alt=\u0026#34;Private example\u0026#34; caption=\u0026#34;가림 방식 예시\u0026#34; privacy=true privacy_mode=\u0026#34;mosaic\u0026#34; privacy_strength=22 privacy_overlay_opacity=0.70 privacy_message=\u0026#34;모자이크 처리된 이미지\u0026#34; privacy_click_to_reveal=true \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/figure/","summary":"\u003cfigure class=\"figure-frame figure-privacy figure-privacy--source-passthrough figure-privacy--mode-blur figure-privacy--action-reveal figure-privacy--interactive \u0026amp;lt;nil\u0026amp;gt;\" style=\"ZgotmplZ\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"reveal\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"blur\" data-ZgotmplZ=\"passthrough\"\u003e\u003cdetails class=\"figure-privacy__details\"\u003e\u003csummary class=\"figure-privacy__trigger figure-privacy__surface figure-privacy__preview-stage\" aria-label=\"원본 이미지를 보려면 선택하세요\" title=\"Click to reveal the original image\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/5._sample-migration-validation-dashboard_b2mfca_10465139030182670286.png\" alt=\"Private example\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"\u0026lt;nil\u0026gt;\"\u003e\u003cspan class=\"figure-privacy__overlay\" aria-hidden=\"true\"\u003e\u003cspan class=\"figure-privacy__message\"\u003e클릭하여 원본 보기\u003c/span\u003e\u003c/span\u003e\u003c/summary\u003e\u003cdiv class=\"figure-privacy__reveal\"\u003e\u003cdiv class=\"figure-privacy__surface figure-privacy__reveal-stage\"\u003e\u003ca class=\"figure-privacy__link\" href=\"\u003cnil\u003e\" target=\"\u0026lt;nil\u0026gt;\" rel=\"\u0026lt;nil\u0026gt;\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/5._sample-migration-validation-dashboard_b2mfca_10465139030182670286.png\" alt=\"Private example\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"\u0026lt;nil\u0026gt;\"\u003e\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e\u003c/details\u003e\u003cfigcaption class=\"figure-privacy__caption\"\u003e\u003ch4\u003e\u003c/h4\u003e\u003cp\u003e민감한 예시 이미지 \u003ca href=\"\u003cnil\u003e\"\u003e\u003c!-- raw HTML omitted --\u003e\n\u003c/a\u003e\u003c/p\u003e\u003c/figcaption\u003e\u003c/figure\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; figure\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e src=\u0026#34;https://res.cloudinary.com/dhfuy7rvysadf/image/upload/v1782785290/5._sample-migration-validation-dashboard_b2mfca.png\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e alt=\u0026#34;Private example\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e caption=\u0026#34;민감한 예시 이미지\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e privacy=true\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e privacy_mode=\u0026#34;blur\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e privacy_strength=18\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e privacy_overlay_opacity=0.62\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e privacy_message=\u0026#34;클릭하여 원본 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e privacy_label=\u0026#34;원본 이미지를 보려면 선택하세요\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e privacy_click_to_reveal=true \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cfigure class=\"figure-frame figure-privacy figure-privacy--source-passthrough figure-privacy--mode-mosaic figure-privacy--action-reveal figure-privacy--interactive \u0026amp;lt;nil\u0026amp;gt;\" style=\"ZgotmplZ\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"reveal\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"mosaic\" data-ZgotmplZ=\"passthrough\"\u003e\u003cdetails class=\"figure-privacy__details\"\u003e\u003csummary class=\"figure-privacy__trigger figure-privacy__surface figure-privacy__preview-stage\" aria-label=\"\u0026lt;nil\u0026gt;\" title=\"Click to reveal the original image\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/5._sample-migration-validation-dashboard_b2mfca_10465139030182670286.png\" alt=\"Private example\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"\u0026lt;nil\u0026gt;\"\u003e\u003cspan class=\"figure-privacy__overlay\" aria-hidden=\"true\"\u003e\u003cspan class=\"figure-privacy__message\"\u003e모자이크 처리된 이미지\u003c/span\u003e\u003c/span\u003e\u003c/summary\u003e\u003cdiv class=\"figure-privacy__reveal\"\u003e\u003cdiv class=\"figure-privacy__surface figure-privacy__reveal-stage\"\u003e\u003ca class=\"figure-privacy__link\" href=\"\u003cnil\u003e\" target=\"\u0026lt;nil\u0026gt;\" rel=\"\u0026lt;nil\u0026gt;\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/5._sample-migration-validation-dashboard_b2mfca_10465139030182670286.png\" alt=\"Private example\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"\u0026lt;nil\u0026gt;\"\u003e\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e\u003c/details\u003e\u003cfigcaption class=\"figure-privacy__caption\"\u003e\u003ch4\u003e\u003c/h4\u003e\u003cp\u003e가림 방식 예시 \u003ca href=\"\u003cnil\u003e\"\u003e\u003c!-- raw HTML omitted --\u003e\n\u003c/a\u003e\u003c/p\u003e","title":"figure"},{"content":"figure shortcode figure는 \u0026lt;figure\u0026gt;, \u0026lt;img\u0026gt;, \u0026lt;figcaption\u0026gt; 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.\n이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.\n공식 문서 기준으로 src, alt, width, height, loading, class, link, target, rel, title, caption, attr, attrlink를 사용할 수 있습니다. src는 이미지 경로, caption은 설명, attr과 attrlink는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1\n렌더링 결과 샘플 figurelocal page resource를 사용해 외부 의존성을 없앤 figure 예시입니다. Hugo shortcode archive\n원형 {{\u0026lt; figure src=\u0026#34;figure-sample.svg\u0026#34; alt=\u0026#34;Hugo figure shortcode를 위한 샘플 SVG\u0026#34; link=\u0026#34;https://gohugo.io/shortcodes/figure/\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; title=\u0026#34;샘플 figure\u0026#34; caption=\u0026#34;local page resource를 사용해 외부 의존성을 없앤 figure 예시입니다.\u0026#34; attr=\u0026#34;Hugo shortcode archive\u0026#34; attrlink=\u0026#34;https://gohugo.io/content-management/shortcodes/\u0026#34; class=\u0026#34;figure-lab\u0026#34; loading=\u0026#34;lazy\u0026#34; \u0026gt;}} 해석 포인트 src는 가능한 한 페이지 리소스나 전역 리소스로 두는 편이 관리가 쉽습니다. link를 주면 이미지를 클릭해서 관련 문서로 이동시킬 수 있습니다. title은 캡션 위쪽, caption은 아래쪽에 놓는 식으로 정보 위계를 나눌 수 있습니다. attr과 attrlink는 출처를 명시할 때 좋습니다. 이 페이지가 일부러 local resource를 쓰는 이유 이 예제는 외부 이미지 서비스에 기대지 않기 위해 같은 bundle 안의 figure-sample.svg를 사용합니다.\n그래서 저장소만 있으면 렌더링 결과를 재현하기 쉽습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/figure/","summary":"\u003ch1 id=\"figure-shortcode\"\u003efigure shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003efigure\u003c/code\u003e는 \u003ccode\u003e\u0026lt;figure\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;figcaption\u0026gt;\u003c/code\u003e 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.\u003cbr\u003e\n이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.\u003c/p\u003e\n\u003cp\u003e공식 문서 기준으로 \u003ccode\u003esrc\u003c/code\u003e, \u003ccode\u003ealt\u003c/code\u003e, \u003ccode\u003ewidth\u003c/code\u003e, \u003ccode\u003eheight\u003c/code\u003e, \u003ccode\u003eloading\u003c/code\u003e, \u003ccode\u003eclass\u003c/code\u003e, \u003ccode\u003elink\u003c/code\u003e, \u003ccode\u003etarget\u003c/code\u003e, \u003ccode\u003erel\u003c/code\u003e, \u003ccode\u003etitle\u003c/code\u003e, \u003ccode\u003ecaption\u003c/code\u003e, \u003ccode\u003eattr\u003c/code\u003e, \u003ccode\u003eattrlink\u003c/code\u003e를 사용할 수 있습니다. \u003ccode\u003esrc\u003c/code\u003e는 이미지 경로, \u003ccode\u003ecaption\u003c/code\u003e은 설명, \u003ccode\u003eattr\u003c/code\u003e과 \u003ccode\u003eattrlink\u003c/code\u003e는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1\u003c/p\u003e","title":"figure shortcode"},{"content":"figure shortcode figure는 \u0026lt;figure\u0026gt;, \u0026lt;img\u0026gt;, \u0026lt;figcaption\u0026gt; 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.\n이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.\n공식 문서 기준으로 src, alt, width, height, loading, class, link, target, rel, title, caption, attr, attrlink를 사용할 수 있습니다. src는 이미지 경로, caption은 설명, attr과 attrlink는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1\n렌더링 결과 샘플 figurelocal page resource를 사용해 외부 의존성을 없앤 figure 예시입니다. Hugo shortcode archive\n원형 {{\u0026lt; figure src=\u0026#34;figure-sample.svg\u0026#34; alt=\u0026#34;Hugo figure shortcode를 위한 샘플 SVG\u0026#34; link=\u0026#34;https://gohugo.io/shortcodes/figure/\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; title=\u0026#34;샘플 figure\u0026#34; caption=\u0026#34;local page resource를 사용해 외부 의존성을 없앤 figure 예시입니다.\u0026#34; attr=\u0026#34;Hugo shortcode archive\u0026#34; attrlink=\u0026#34;https://gohugo.io/content-management/shortcodes/\u0026#34; class=\u0026#34;figure-lab\u0026#34; loading=\u0026#34;lazy\u0026#34; \u0026gt;}} 해석 포인트 src는 가능한 한 페이지 리소스나 전역 리소스로 두는 편이 관리가 쉽습니다. link를 주면 이미지를 클릭해서 관련 문서로 이동시킬 수 있습니다. title은 캡션 위쪽, caption은 아래쪽에 놓는 식으로 정보 위계를 나눌 수 있습니다. attr과 attrlink는 출처를 명시할 때 좋습니다. 이 페이지가 일부러 local resource를 쓰는 이유 이 예제는 외부 이미지 서비스에 기대지 않기 위해 같은 bundle 안의 figure-sample.svg를 사용합니다.\n그래서 저장소만 있으면 렌더링 결과를 재현하기 쉽습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/figure/","summary":"\u003ch1 id=\"figure-shortcode\"\u003efigure shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003efigure\u003c/code\u003e는 \u003ccode\u003e\u0026lt;figure\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;figcaption\u0026gt;\u003c/code\u003e 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.\u003cbr\u003e\n이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.\u003c/p\u003e\n\u003cp\u003e공식 문서 기준으로 \u003ccode\u003esrc\u003c/code\u003e, \u003ccode\u003ealt\u003c/code\u003e, \u003ccode\u003ewidth\u003c/code\u003e, \u003ccode\u003eheight\u003c/code\u003e, \u003ccode\u003eloading\u003c/code\u003e, \u003ccode\u003eclass\u003c/code\u003e, \u003ccode\u003elink\u003c/code\u003e, \u003ccode\u003etarget\u003c/code\u003e, \u003ccode\u003erel\u003c/code\u003e, \u003ccode\u003etitle\u003c/code\u003e, \u003ccode\u003ecaption\u003c/code\u003e, \u003ccode\u003eattr\u003c/code\u003e, \u003ccode\u003eattrlink\u003c/code\u003e를 사용할 수 있습니다. \u003ccode\u003esrc\u003c/code\u003e는 이미지 경로, \u003ccode\u003ecaption\u003c/code\u003e은 설명, \u003ccode\u003eattr\u003c/code\u003e과 \u003ccode\u003eattrlink\u003c/code\u003e는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1\u003c/p\u003e","title":"figure shortcode"},{"content":"블러 처리된 이미지 — 클릭하여 원본 보기보안 검토 예시편집용 예시 이미지 OpenAI Design Team\n블러 처리된 이미지 — 클릭하여 원본 보기보안 검토 예시편집용 예시 이미지 OpenAI Design Team\n블러 처리된 이미지 — 클릭하여 원본 보기보안 검토 예시편집용 예시 이미지 OpenAI Design Team\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/figure2/","summary":"\u003cfigure class=\"figure-frame figure-privacy figure-privacy--source-passthrough figure-privacy--mode-blur figure-privacy--action-reveal figure-privacy--interactive ma0 w-100\" style=\"ZgotmplZ\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"reveal\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"blur\" data-ZgotmplZ=\"passthrough\"\u003e\u003cdetails class=\"figure-privacy__details\"\u003e\u003csummary class=\"figure-privacy__trigger figure-privacy__surface figure-privacy__preview-stage\" aria-label=\"\u0026lt;nil\u0026gt;\" title=\"Click to reveal the original image\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/5._sample-migration-validation-dashboard_b2mfca_10465139030182670286.png\" alt=\"보안 검토 화면 예시\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"lazy\"\u003e\u003cspan class=\"figure-privacy__overlay\" aria-hidden=\"true\"\u003e\u003cspan class=\"figure-privacy__message\"\u003e블러 처리된 이미지 — 클릭하여 원본 보기\u003c/span\u003e\u003c/span\u003e\u003c/summary\u003e\u003cdiv class=\"figure-privacy__reveal\"\u003e\u003cdiv class=\"figure-privacy__surface figure-privacy__reveal-stage\"\u003e\u003ca class=\"figure-privacy__link\" href=\"https://example.com/figure/full\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/5._sample-migration-validation-dashboard_b2mfca_10465139030182670286.png\" alt=\"보안 검토 화면 예시\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e\u003c/details\u003e\u003cfigcaption class=\"figure-privacy__caption\"\u003e\u003ch4\u003e보안 검토 예시\u003c/h4\u003e\u003cp\u003e편집용 예시 이미지 \u003ca href=\"https://example.com/design\"\u003eOpenAI Design Team\u003c/a\u003e\u003c/p\u003e\u003c/figcaption\u003e\u003c/figure\u003e\n\u003cfigure class=\"figure-frame figure-privacy figure-privacy--source-passthrough figure-privacy--mode-blur figure-privacy--action-navigate figure-privacy--interactive ma0 w-100\" style=\"ZgotmplZ\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"navigate\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"blur\" data-ZgotmplZ=\"passthrough\"\u003e\u003ca class=\"figure-privacy__trigger figure-privacy__surface figure-privacy__preview-stage\" aria-label=\"\u0026lt;nil\u0026gt;\" href=\"https://res.cloudinary.com/dhfuy7rvysadf/image/upload/v1782785290/5._sample-migration-validation-dashboard_b2mfca.png\" target=\"_blank\" rel=\"\u0026lt;nil\u0026gt;\" title=\"Open link\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/5._sample-migration-validation-dashboard_b2mfca_10465139030182670286.png\" alt=\"보안 검토 화면 예시\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"lazy\"\u003e\u003cspan class=\"figure-privacy__overlay\" aria-hidden=\"true\"\u003e\u003cspan class=\"figure-privacy__message\"\u003e블러 처리된 이미지 — 클릭하여 원본 보기\u003c/span\u003e\u003c/span\u003e\u003c/a\u003e\u003cfigcaption class=\"figure-privacy__caption\"\u003e\u003ch4\u003e보안 검토 예시\u003c/h4\u003e\u003cp\u003e편집용 예시 이미지 \u003ca href=\"\u003cnil\u003e\"\u003eOpenAI Design Team\u003c/a\u003e\u003c/p\u003e","title":"figure2"},{"content":"블러 처리된 이미지 — 클릭하여 원본 보기보안 검토 예시편집용 예시 이미지 OpenAI Design Team\n블러 처리된 이미지 — 클릭하여 원본 보기보안 검토 예시편집용 예시 이미지 OpenAI Design Team\n블러 처리된 이미지 — 클릭하여 원본 보기보안 검토 예시편집용 예시 이미지 OpenAI Design Team\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/figure3/","summary":"\u003cfigure class=\"figure-frame figure-privacy figure-privacy--source-passthrough figure-privacy--mode-blur figure-privacy--action-reveal figure-privacy--interactive ma0 w-100\" style=\"ZgotmplZ\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"reveal\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"blur\" data-ZgotmplZ=\"passthrough\"\u003e\u003cdetails class=\"figure-privacy__details\"\u003e\u003csummary class=\"figure-privacy__trigger figure-privacy__surface figure-privacy__preview-stage\" aria-label=\"\u0026lt;nil\u0026gt;\" title=\"Click to reveal the original image\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/8._migration-scenarios-crm-collaboration-ai_gmerps_14356005056764302836.png\" alt=\"보안 검토 화면 예시\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"lazy\"\u003e\u003cspan class=\"figure-privacy__overlay\" aria-hidden=\"true\"\u003e\u003cspan class=\"figure-privacy__message\"\u003e블러 처리된 이미지 — 클릭하여 원본 보기\u003c/span\u003e\u003c/span\u003e\u003c/summary\u003e\u003cdiv class=\"figure-privacy__reveal\"\u003e\u003cdiv class=\"figure-privacy__surface figure-privacy__reveal-stage\"\u003e\u003ca class=\"figure-privacy__link\" href=\"https://res.cloudinary.com/dhfuy7rvysadf/image/upload/v1782785289/8._migration-scenarios-crm-collaboration-ai_gmerps.png\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/8._migration-scenarios-crm-collaboration-ai_gmerps_14356005056764302836.png\" alt=\"보안 검토 화면 예시\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e\u003c/details\u003e\u003cfigcaption class=\"figure-privacy__caption\"\u003e\u003ch4\u003e보안 검토 예시\u003c/h4\u003e\u003cp\u003e편집용 예시 이미지 \u003ca href=\"\u003cnil\u003e\"\u003eOpenAI Design Team\u003c/a\u003e\u003c/p\u003e\u003c/figcaption\u003e\u003c/figure\u003e\n\u003cfigure class=\"figure-frame figure-privacy figure-privacy--source-passthrough figure-privacy--mode-blur figure-privacy--action-navigate figure-privacy--interactive ma0 w-100\" style=\"ZgotmplZ\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"navigate\" data-ZgotmplZ=\"true\" data-ZgotmplZ=\"blur\" data-ZgotmplZ=\"passthrough\"\u003e\u003ca class=\"figure-privacy__trigger figure-privacy__surface figure-privacy__preview-stage\" aria-label=\"\u0026lt;nil\u0026gt;\" href=\"https://res.cloudinary.com/dhfuy7rvysadf/image/upload/v1782785289/8._migration-scenarios-crm-collaboration-ai_gmerps.png\" target=\"_blank\" rel=\"\u0026lt;nil\u0026gt;\" title=\"Open link\"\u003e\u003cimg class=\"figure-privacy__image\" src=\"/8._migration-scenarios-crm-collaboration-ai_gmerps_14356005056764302836.png\" alt=\"보안 검토 화면 예시\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"lazy\"\u003e\u003cspan class=\"figure-privacy__overlay\" aria-hidden=\"true\"\u003e\u003cspan class=\"figure-privacy__message\"\u003e블러 처리된 이미지 — 클릭하여 원본 보기\u003c/span\u003e\u003c/span\u003e\u003c/a\u003e\u003cfigcaption class=\"figure-privacy__caption\"\u003e\u003ch4\u003e보안 검토 예시\u003c/h4\u003e\u003cp\u003e편집용 예시 이미지 \u003ca href=\"\u003cnil\u003e\"\u003eOpenAI Design Team\u003c/a\u003e\u003c/p\u003e","title":"figure3"},{"content":"gallery shortcode gallery는 themes/1/layouts/_shortcodes/readme/custom/gallery.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 첫째 캡션둘째 캡션 원형 {{\u0026lt; gallery columns=\u0026#34;2\u0026#34; gap=\u0026#34;sm\u0026#34; lightbox=true caption_mode=\u0026#34;figcaption\u0026#34; ratio=\u0026#34;4/3\u0026#34; class=\u0026#34;lab-gallery\u0026#34; images=\u0026#34;https://example.com/a.jpg|첫째|첫째 캡션|4/3|https://example.com/a.jpg|첫째 제목;https://example.com/b.jpg|둘째|둘째 캡션|1/1|https://example.com/b.jpg|둘째 제목\u0026#34; \u0026gt;}} 확인 포인트 images 문자열은 src|alt|caption|ratio|href|title 조합을 세미콜론으로 구분합니다. body 입력도 가능하지만, 문자열 입력과 혼용하지 않는 편이 읽기 쉽습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/gallery/","summary":"\u003ch1 id=\"gallery-shortcode\"\u003egallery shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003egallery\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/gallery.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"gallery shortcode"},{"content":"gist shortcode gist는 themes/1/layouts/_shortcodes/readme/custom/gist.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 GitHub GistGist 예시example.go 코드 스니펫은 원문 링크를 통해 확인한다. 정책상 임베드가 막히는 환경에서는 이 링크가 기본 경로다.\n원문 열기 Raw 링크 원형 {{\u0026lt; gist user=\u0026#34;octocat\u0026#34; id=\u0026#34;123456\u0026#34; file=\u0026#34;example.go\u0026#34; title=\u0026#34;Gist 예시\u0026#34; hide_footer=false hide_line_numbers=false class=\u0026#34;lab-gist\u0026#34; \u0026gt;}} 확인 포인트 네트워크 의존이 있으면 fallback 카드가 더 안전할 수 있습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/gist/","summary":"\u003ch1 id=\"gist-shortcode\"\u003egist shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003egist\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/gist.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"gist shortcode"},{"content":"highlight shortcode highlight는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다.\nMarkdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다.\n공식 문서 기준으로 highlight는 LANG, OPTIONS, CODE의 세 가지 요소를 사용합니다. OPTIONS는 문자열로 넘기는 옵션 묶음이며, 줄 번호, 테마, 강조 라인 같은 디테일을 세밀하게 조절할 수 있습니다. citeturn791175view0turn241043view5\n렌더링 결과: 블록형 1package main 2 3import \u0026#34;fmt\u0026#34; 4 5func main() { 6 for i := 0; i \u0026lt; 3; i++ { 7 fmt.Println(\u0026#34;Value of i:\u0026#34;, i) 8 } 9} 원형: 블록형 {{\u0026lt; highlight go \u0026#34;linenos=inline, hl_lines=3 6-8, style=emacs\u0026#34; \u0026gt;}} package main import \u0026#34;fmt\u0026#34; func main() { for i := 0; i \u0026lt; 3; i++ { fmt.Println(\u0026#34;Value of i:\u0026#34;, i) } } {{\u0026lt; /highlight \u0026gt;}} 렌더링 결과: 인라인형 이 문장은 인라인 하이라이트 예시입니다. fmt.Println(\u0026#34;inline\u0026#34;) 를 보면 코드 조각이 본문 안에서 따로 강조됩니다.\n원형: 인라인형 이 문장은 인라인 하이라이트 예시입니다. {{\u0026lt; highlight go \u0026#34;hl_inline=true\u0026#34; \u0026gt;}}fmt.Println(\u0026#34;inline\u0026#34;){{\u0026lt; /highlight \u0026gt;}} 를 보면 코드 조각이 본문 안에서 따로 강조됩니다. 옵션 해석 linenos=inline은 줄 번호를 코드 옆에 붙입니다. hl_lines=3 6-8은 특정 줄을 강조합니다. style=emacs는 하이라이트 테마를 정합니다. hl_inline=true는 블록이 아니라 본문 흐름 안에서 코드 조각만 강조합니다. 실무 팁 코드 블록은 대부분의 Markdown 렌더러에서 기본 지원되므로, highlight는 보조 수단으로 생각하는 편이 좋습니다. 인라인 코드가 자주 등장하는 문서라면 highlight 전용 짧은 래퍼 shortcode를 하나 더 만드는 것도 좋습니다. 긴 예제일수록 하이라이트 옵션을 코드 바로 위에 모아두면 읽기 쉽습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/highlight/","summary":"\u003ch1 id=\"highlight-shortcode\"\u003ehighlight shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ehighlight\u003c/code\u003e는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다.\u003cbr\u003e\nMarkdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다.\u003c/p\u003e","title":"highlight shortcode"},{"content":"highlight shortcode highlight는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다.\nMarkdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다.\n공식 문서 기준으로 highlight는 LANG, OPTIONS, CODE의 세 가지 요소를 사용합니다. OPTIONS는 문자열로 넘기는 옵션 묶음이며, 줄 번호, 테마, 강조 라인 같은 디테일을 세밀하게 조절할 수 있습니다. citeturn791175view0turn241043view5\n렌더링 결과: 블록형 1package main 2 3import \u0026#34;fmt\u0026#34; 4 5func main() { 6 for i := 0; i \u0026lt; 3; i++ { 7 fmt.Println(\u0026#34;Value of i:\u0026#34;, i) 8 } 9} 원형: 블록형 {{\u0026lt; highlight go \u0026#34;linenos=inline, hl_lines=3 6-8, style=emacs\u0026#34; \u0026gt;}} package main import \u0026#34;fmt\u0026#34; func main() { for i := 0; i \u0026lt; 3; i++ { fmt.Println(\u0026#34;Value of i:\u0026#34;, i) } } {{\u0026lt; /highlight \u0026gt;}} 렌더링 결과: 인라인형 이 문장은 인라인 하이라이트 예시입니다. fmt.Println(\u0026#34;inline\u0026#34;) 를 보면 코드 조각이 본문 안에서 따로 강조됩니다.\n원형: 인라인형 이 문장은 인라인 하이라이트 예시입니다. {{\u0026lt; highlight go \u0026#34;hl_inline=true\u0026#34; \u0026gt;}}fmt.Println(\u0026#34;inline\u0026#34;){{\u0026lt; /highlight \u0026gt;}} 를 보면 코드 조각이 본문 안에서 따로 강조됩니다. 옵션 해석 linenos=inline은 줄 번호를 코드 옆에 붙입니다. hl_lines=3 6-8은 특정 줄을 강조합니다. style=emacs는 하이라이트 테마를 정합니다. hl_inline=true는 블록이 아니라 본문 흐름 안에서 코드 조각만 강조합니다. 실무 팁 코드 블록은 대부분의 Markdown 렌더러에서 기본 지원되므로, highlight는 보조 수단으로 생각하는 편이 좋습니다. 인라인 코드가 자주 등장하는 문서라면 highlight 전용 짧은 래퍼 shortcode를 하나 더 만드는 것도 좋습니다. 긴 예제일수록 하이라이트 옵션을 코드 바로 위에 모아두면 읽기 쉽습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/highlight/","summary":"\u003ch1 id=\"highlight-shortcode\"\u003ehighlight shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ehighlight\u003c/code\u003e는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다.\u003cbr\u003e\nMarkdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다.\u003c/p\u003e","title":"highlight shortcode"},{"content":"icon shortcode icon는 themes/1/layouts/_shortcodes/readme/custom/icon.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 원형 {{\u0026lt; icon name=\u0026#34;check\u0026#34; size=\u0026#34;sm\u0026#34; label=\u0026#34;체크 아이콘\u0026#34; decorative=true class=\u0026#34;lab-icon\u0026#34; \u0026gt;}} 확인 포인트 name과 src 중 하나를 선택합니다. 장식용일 때는 decorative=true를 함께 둡니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/icon/","summary":"\u003ch1 id=\"icon-shortcode\"\u003eicon shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eicon\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/icon.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"icon shortcode"},{"content":"instagram shortcode instagram은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다.\n정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다.\n공식 문서 예제 기준으로 게시물 ID 하나를 positional argument로 넘깁니다. 또한 privacy 설정에서 privacy.instagram.disable과 privacy.instagram.simple을 확인할 수 있습니다. citeturn534114view1\n렌더링 결과 View this post on Instagram 원형 {{\u0026lt; instagram CxOWiQNP2MO \u0026gt;}} 해석 포인트 입력은 보통 Instagram URL 전체가 아니라 게시물 ID입니다. 사이트의 privacy 설정에 따라 실제 임베드 방식이 달라질 수 있습니다. 외부 서비스가 막혀 있으면 iframe 대신 다른 형태로 보이거나, 로컬 빌드에서는 다르게 보일 수 있습니다. 실무 문서에서는 본문보다 보조 자료, 참고 링크, 사례 모음에 넣는 편이 깔끔합니다. 주의할 점 이 shortcode는 외부 서비스와 연결되므로, 회사 문서나 장기 보존 문서에서는 대체 이미지나 캡션형 설명도 함께 두는 것이 안전합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/instagram/","summary":"\u003ch1 id=\"instagram-shortcode\"\u003einstagram shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003einstagram\u003c/code\u003e은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다.\u003cbr\u003e\n정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다.\u003c/p\u003e","title":"instagram shortcode"},{"content":"instagram shortcode instagram은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다.\n정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다.\n공식 문서 예제 기준으로 게시물 ID 하나를 positional argument로 넘깁니다. 또한 privacy 설정에서 privacy.instagram.disable과 privacy.instagram.simple을 확인할 수 있습니다. citeturn534114view1\n렌더링 결과 View this post on Instagram 원형 {{\u0026lt; instagram CxOWiQNP2MO \u0026gt;}} 해석 포인트 입력은 보통 Instagram URL 전체가 아니라 게시물 ID입니다. 사이트의 privacy 설정에 따라 실제 임베드 방식이 달라질 수 있습니다. 외부 서비스가 막혀 있으면 iframe 대신 다른 형태로 보이거나, 로컬 빌드에서는 다르게 보일 수 있습니다. 실무 문서에서는 본문보다 보조 자료, 참고 링크, 사례 모음에 넣는 편이 깔끔합니다. 주의할 점 이 shortcode는 외부 서비스와 연결되므로, 회사 문서나 장기 보존 문서에서는 대체 이미지나 캡션형 설명도 함께 두는 것이 안전합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/instagram/","summary":"\u003ch1 id=\"instagram-shortcode\"\u003einstagram shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003einstagram\u003c/code\u003e은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다.\u003cbr\u003e\n정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다.\u003c/p\u003e","title":"instagram shortcode"},{"content":"inTextImg shortcode inTextImg는 themes/1/layouts/_shortcodes/readme/custom/inTextImg.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 원형 {{\u0026lt; inTextImg url=\u0026#34;https://example.com/inline.svg\u0026#34; alt=\u0026#34;본문 속 이미지\u0026#34; height=\u0026#34;15\u0026#34; width=\u0026#34;15\u0026#34; loading=\u0026#34;lazy\u0026#34; decoding=\u0026#34;async\u0026#34; class=\u0026#34;lab-inline-img\u0026#34; \u0026gt;}} 확인 포인트 특수문자가 들어가는 URL은 반드시 따옴표로 감쌉니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/intextimg/","summary":"\u003ch1 id=\"intextimg-shortcode\"\u003einTextImg shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003einTextImg\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/inTextImg.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"inTextImg shortcode"},{"content":"katex shortcode katex는 themes/1/layouts/_shortcodes/readme/custom/katex.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 E = mc^2에너지 공식 원형 {{\u0026lt; katex display=true error_mode=\u0026#34;warn\u0026#34; label=\u0026#34;에너지 공식\u0026#34; class=\u0026#34;lab-katex\u0026#34; \u0026gt;}} E = mc^2 {{\u0026lt; /katex \u0026gt;}} 확인 포인트 본문 수식은 closing tag 안에 둡니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/katex/","summary":"\u003ch1 id=\"katex-shortcode\"\u003ekatex shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ekatex\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/katex.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"katex shortcode"},{"content":"lead shortcode lead는 themes/1/layouts/_shortcodes/readme/custom/lead.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 짧고 강한 한 문장으로 리드를 시작합니다.\n원형 {{\u0026lt; lead text=\u0026#34;짧고 강한 한 문장으로 리드를 시작합니다.\u0026#34; align=\u0026#34;left\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;accent\u0026#34; max_width=\u0026#34;72ch\u0026#34; class=\u0026#34;lab-lead\u0026#34; \u0026gt;}} 확인 포인트 text는 한 문단 수준으로 간결하게 유지합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/lead/","summary":"\u003ch1 id=\"lead-shortcode\"\u003elead shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003elead\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/lead.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"lead shortcode"},{"content":"linkedin shortcode linkedin는 themes/1/layouts/_shortcodes/readme/custom/linkedin.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 LinkedInLinkedIn LinkedIn 예시\n원문 보기 원형 {{\u0026lt; linkedin url=\u0026#34;https://www.linkedin.com/feed/update/example\u0026#34; caption=\u0026#34;LinkedIn 예시\u0026#34; theme=\u0026#34;neutral\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /linkedin \u0026gt;}} 확인 포인트 url이 우선이고 post_id는 보조 입력입니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/linkedin/","summary":"\u003ch1 id=\"linkedin-shortcode\"\u003elinkedin shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003elinkedin\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/linkedin.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"linkedin shortcode"},{"content":"ltr shortcode ltr는 themes/1/layouts/_shortcodes/readme/custom/ltr.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 왼쪽에서 오른쪽으로 읽는 문장입니다.\nMarkdown도 함께 확인합니다. 원형 {{\u0026lt; ltr md=true class=\u0026#34;lab-direction\u0026#34; \u0026gt;}} 왼쪽에서 오른쪽으로 읽는 문장입니다. - Markdown도 함께 확인합니다. {{\u0026lt; /ltr \u0026gt;}} 확인 포인트 md=true일 때 body markdownify 동작을 함께 확인합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/ltr/","summary":"\u003ch1 id=\"ltr-shortcode\"\u003eltr shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eltr\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/ltr.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"ltr shortcode"},{"content":"mastodon shortcode mastodon는 themes/1/layouts/_shortcodes/readme/custom/mastodon.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 MastodonMastodon Mastodon 예시\n원문 보기 원형 {{\u0026lt; mastodon url=\u0026#34;https://mastodon.social/@example/1\u0026#34; caption=\u0026#34;Mastodon 예시\u0026#34; theme=\u0026#34;auto\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /mastodon \u0026gt;}} 확인 포인트 server와 post_id 조합도 함께 검토합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/mastodon/","summary":"\u003ch1 id=\"mastodon-shortcode\"\u003emastodon shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003emastodon\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/mastodon.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"mastodon shortcode"},{"content":"mermaid shortcode mermaid는 themes/1/layouts/_shortcodes/readme/custom/mermaid.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 간단한 흐름도 — Mermaid 예시flowchart TD A[시작] --\u0026amp;gt; B{검토} B --\u0026amp;gt; C[완료] 원형 {{\u0026lt; mermaid theme=\u0026#34;neutral\u0026#34; title=\u0026#34;간단한 흐름도\u0026#34; caption=\u0026#34;Mermaid 예시\u0026#34; class=\u0026#34;lab-mermaid\u0026#34; \u0026gt;}} flowchart TD A[시작] --\u0026gt; B{검토} B --\u0026gt; C[완료] {{\u0026lt; /mermaid \u0026gt;}} 확인 포인트 다이어그램 body는 closing tag 안에 유지합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/mermaid/","summary":"\u003ch1 id=\"mermaid-shortcode\"\u003emermaid shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003emermaid\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/mermaid.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"mermaid shortcode"},{"content":"param shortcode param은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다.\n문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다.\n공식 문서에 따르면 param은 먼저 front matter를 찾고, 없으면 site parameter를 찾습니다. 값이 없으면 오류를 발생시킵니다. 중첩 값도 점(.)으로 연결해 접근할 수 있습니다. citeturn534114view2\n렌더링 결과 이 페이지의 제품 이름은 91-hugo-shortcode 입니다.\n이 페이지의 배지는 LAB 입니다.\n요약 문구는 front matter에서 끌어오는 값 입니다.\n원형 이 페이지의 제품 이름은 `{{% param product.name %}}` 입니다. 이 페이지의 배지는 `{{% param product.nested.badge %}}` 입니다. 요약 문구는 `{{% param seo.summary %}}` 입니다. 해석 포인트 front matter에서 값을 바꾸면 모든 참조가 같이 바뀝니다. nested param은 큰 설정 구조를 문서 안에서 재사용할 때 특히 좋습니다. 값이 없을 때 오류를 내므로, 키 이름을 실수로 바꾸면 바로 잡아낼 수 있습니다. 실무 팁 제품명, 버전, 배지, 분류명처럼 반복되는 문자열에 적합합니다. 문서 제목과 본문이 서로 어긋나지 않게 유지하려면 param이 유용합니다. 단순 치환만 할 수 있으므로, 복잡한 조건 분기는 shortcode보다 template 쪽이 낫습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/param/","summary":"\u003ch1 id=\"param-shortcode\"\u003eparam shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eparam\u003c/code\u003e은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다.\u003cbr\u003e\n문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다.\u003c/p\u003e","title":"param shortcode"},{"content":"param shortcode param은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다.\n문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다.\n공식 문서에 따르면 param은 먼저 front matter를 찾고, 없으면 site parameter를 찾습니다. 값이 없으면 오류를 발생시킵니다. 중첩 값도 점(.)으로 연결해 접근할 수 있습니다. citeturn534114view2\n렌더링 결과 이 페이지의 제품 이름은 91-hugo-shortcode 입니다.\n이 페이지의 배지는 LAB 입니다.\n요약 문구는 front matter에서 끌어오는 값 입니다.\n원형 이 페이지의 제품 이름은 `{{% param \u0026#34;product.name\u0026#34; %}}` 입니다. 이 페이지의 배지는 `{{% param \u0026#34;product.nested.badge\u0026#34; %}}` 입니다. 요약 문구는 `{{% param \u0026#34;seo.summary\u0026#34; %}}` 입니다. 해석 포인트 front matter에서 값을 바꾸면 모든 참조가 같이 바뀝니다. nested param은 큰 설정 구조를 문서 안에서 재사용할 때 특히 좋습니다. 값이 없을 때 오류를 내므로, 키 이름을 실수로 바꾸면 바로 잡아낼 수 있습니다. 실무 팁 제품명, 버전, 배지, 분류명처럼 반복되는 문자열에 적합합니다. 문서 제목과 본문이 서로 어긋나지 않게 유지하려면 param이 유용합니다. 단순 치환만 할 수 있으므로, 복잡한 조건 분기는 shortcode보다 template 쪽이 낫습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/param/","summary":"\u003ch1 id=\"param-shortcode\"\u003eparam shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eparam\u003c/code\u003e은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다.\u003cbr\u003e\n문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다.\u003c/p\u003e","title":"param shortcode"},{"content":"pinterest shortcode pinterest는 themes/1/layouts/_shortcodes/readme/custom/pinterest.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 PinterestPinterest 작성자 핀 제목 Pinterest 예시\n보조 설명\n높이: 240 원문 보기 원형 {{\u0026lt; pinterest url=\u0026#34;https://www.pinterest.com/pin/123456/\u0026#34; caption=\u0026#34;Pinterest 예시\u0026#34; theme=\u0026#34;light\u0026#34; title=\u0026#34;핀 제목\u0026#34; author=\u0026#34;작성자\u0026#34; image=\u0026#34;https://example.com/pin.jpg\u0026#34; description=\u0026#34;보조 설명\u0026#34; height=\u0026#34;240\u0026#34; lang=\u0026#34;ko\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /pinterest \u0026gt;}} 확인 포인트 image와 description은 안전한 fallback을 돕습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/pinterest/","summary":"\u003ch1 id=\"pinterest-shortcode\"\u003epinterest shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003epinterest\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/pinterest.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"pinterest shortcode"},{"content":"qr shortcode qr은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다.\n짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다.\n공식 문서 기준으로 text, level, scale, targetDir, alt 등의 인자를 사용할 수 있습니다.\ntext는 self-closing 방식 또는 본문 내 텍스트 둘 다 지원하고, level은 오류 정정 수준을 정합니다. citeturn241043view0\n렌더링 결과: self-closing 원형: self-closing {{\u0026lt; qr text=\u0026#34;https://gohugo.io\u0026#34; \u0026gt;}} 렌더링 결과: tag pair 원형: tag pair {{\u0026lt; qr \u0026gt;}} https://gohugo.io/shortcodes/ {{\u0026lt; /qr \u0026gt;}} 렌더링 결과: vCard 스타일 원형: vCard 스타일 {{\u0026lt; qr level=\u0026#34;low\u0026#34; scale=2 alt=\u0026#34;QR code of vCard for John Smith\u0026#34; \u0026gt;}} BEGIN:VCARD VERSION:2.1 N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD FN;CHARSET=UTF-8:Dr. John R. Smith, PhD. ORG;CHARSET=UTF-8:ABC Widgets TITLE;CHARSET=UTF-8:Vice President Engineering TEL;TYPE=WORK:+12065550101 EMAIL;TYPE=WORK:jsmith@example.org END:VCARD {{\u0026lt; /qr \u0026gt;}} 해석 포인트 text는 가장 기본적인 입력입니다. 본문 태그 사이에 넣는 방식은 긴 vCard 같은 구조화 텍스트에 편합니다. level은 정보량이 많을수록 중요합니다. scale은 결과 이미지의 픽셀 밀도를 결정하므로, 너무 작게 두면 스캔이 어려울 수 있습니다. 실무 팁 QR은 페이지 이동, 가입, 문의, 데모 신청 같은 행동 유도에 잘 맞습니다. alt 텍스트를 적절히 주면 접근성에도 도움이 됩니다. 생성된 이미지는 publishDir 아래에 저장되므로 정적 자산 관리 흐름을 함께 생각해야 합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/qr/","summary":"\u003ch1 id=\"qr-shortcode\"\u003eqr shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eqr\u003c/code\u003e은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다.\u003cbr\u003e\n짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다.\u003c/p\u003e","title":"qr shortcode"},{"content":"qr shortcode qr은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다.\n짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다.\n공식 문서 기준으로 text, level, scale, targetDir, alt 등의 인자를 사용할 수 있습니다.\ntext는 self-closing 방식 또는 본문 내 텍스트 둘 다 지원하고, level은 오류 정정 수준을 정합니다. citeturn241043view0\n렌더링 결과: self-closing 원형: self-closing {{\u0026lt; qr text=\u0026#34;https://gohugo.io\u0026#34; \u0026gt;}} 렌더링 결과: tag pair 원형: tag pair {{\u0026lt; qr \u0026gt;}} https://gohugo.io/shortcodes/ {{\u0026lt; /qr \u0026gt;}} 렌더링 결과: vCard 스타일 원형: vCard 스타일 {{\u0026lt; qr level=\u0026#34;low\u0026#34; scale=2 alt=\u0026#34;QR code of vCard for John Smith\u0026#34; \u0026gt;}} BEGIN:VCARD VERSION:2.1 N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD FN;CHARSET=UTF-8:Dr. John R. Smith, PhD. ORG;CHARSET=UTF-8:ABC Widgets TITLE;CHARSET=UTF-8:Vice President Engineering TEL;TYPE=WORK:+12065550101 EMAIL;TYPE=WORK:jsmith@example.org END:VCARD {{\u0026lt; /qr \u0026gt;}} 해석 포인트 text는 가장 기본적인 입력입니다. 본문 태그 사이에 넣는 방식은 긴 vCard 같은 구조화 텍스트에 편합니다. level은 정보량이 많을수록 중요합니다. scale은 결과 이미지의 픽셀 밀도를 결정하므로, 너무 작게 두면 스캔이 어려울 수 있습니다. 실무 팁 QR은 페이지 이동, 가입, 문의, 데모 신청 같은 행동 유도에 잘 맞습니다. alt 텍스트를 적절히 주면 접근성에도 도움이 됩니다. 생성된 이미지는 publishDir 아래에 저장되므로 정적 자산 관리 흐름을 함께 생각해야 합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/qr/","summary":"\u003ch1 id=\"qr-shortcode\"\u003eqr shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eqr\u003c/code\u003e은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다.\u003cbr\u003e\n짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다.\u003c/p\u003e","title":"qr shortcode"},{"content":"rawhtml shortcode rawhtml는 themes/1/layouts/_shortcodes/readme/custom/rawhtml.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 원시 HTML 원형 {{\u0026lt; rawhtml \u0026gt;}}\u0026lt;span class=\u0026#34;lab-raw\u0026#34;\u0026gt;원시 HTML\u0026lt;/span\u0026gt;{{\u0026lt; /rawhtml \u0026gt;}} 확인 포인트 신뢰할 수 있는 HTML만 넣습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/rawhtml/","summary":"\u003ch1 id=\"rawhtml-shortcode\"\u003erawhtml shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003erawhtml\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/rawhtml.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"rawhtml shortcode"},{"content":"reddit shortcode reddit는 themes/1/layouts/_shortcodes/readme/custom/reddit.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 RedditReddit Reddit 예시\n원문 보기 원형 {{\u0026lt; reddit url=\u0026#34;https://www.reddit.com/comments/123456/\u0026#34; caption=\u0026#34;Reddit 예시\u0026#34; theme=\u0026#34;neutral\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /reddit \u0026gt;}} 확인 포인트 원문 링크를 항상 확인할 수 있어야 합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/reddit/","summary":"\u003ch1 id=\"reddit-shortcode\"\u003ereddit shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ereddit\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/reddit.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"reddit shortcode"},{"content":"ref shortcode ref는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다.\n문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다.\n공식 문서는 Markdown에서 이 shortcode가 이제는 obsolete라고 설명하면서도, 기존 shortcode 문법 자체와 경고 처리, 경로 해석 방식은 여전히 문서화합니다. 또한 path, lang, outputFormat을 사용할 수 있고, 경로는 현재 페이지 기준 또는 사이트 기준으로 해석됩니다. citeturn660511view0\n렌더링 결과 내부 문서로 가는 링크\n원형 [내부 문서로 가는 링크]({{% ref \u0026#34;/blog/lab/91-hugo-shortcode/ref-target\u0026#34; %}}) 해석 포인트 ref는 링크 텍스트를 감싸는 Markdown과 함께 사용하는 것이 기본입니다. 경로는 절대 경로처럼 쓰는 편이 읽기 쉽습니다. 참조 대상이 없으면 빌드 에러가 날 수 있으므로, 문서 구조를 바꾸기 전에 대상 경로를 함께 확인해야 합니다. 다양한 언어와 출력 형식을 다루는 사이트에서는 lang와 outputFormat이 중요해집니다. 실무 팁 오래된 문서나 다국어 사이트에서 특히 유용합니다. 새 Markdown 링크를 설계할 때는 render hook 전략과 함께 검토하는 것이 좋습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/ref/","summary":"\u003ch1 id=\"ref-shortcode\"\u003eref shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eref\u003c/code\u003e는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다.\u003cbr\u003e\n문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다.\u003c/p\u003e","title":"ref shortcode"},{"content":"ref shortcode ref는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다.\n문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다.\n공식 문서는 Markdown에서 이 shortcode가 이제는 obsolete라고 설명하면서도, 기존 shortcode 문법 자체와 경고 처리, 경로 해석 방식은 여전히 문서화합니다. 또한 path, lang, outputFormat을 사용할 수 있고, 경로는 현재 페이지 기준 또는 사이트 기준으로 해석됩니다. citeturn660511view0\n렌더링 결과 내부 문서로 가는 링크\n원형 [내부 문서로 가는 링크]({{% ref \u0026#34;/blog/lab/91-hugo-shortcode/ref-target\u0026#34; %}}) 해석 포인트 ref는 링크 텍스트를 감싸는 Markdown과 함께 사용하는 것이 기본입니다. 경로는 절대 경로처럼 쓰는 편이 읽기 쉽습니다. 참조 대상이 없으면 빌드 에러가 날 수 있으므로, 문서 구조를 바꾸기 전에 대상 경로를 함께 확인해야 합니다. 다양한 언어와 출력 형식을 다루는 사이트에서는 lang와 outputFormat이 중요해집니다. 실무 팁 오래된 문서나 다국어 사이트에서 특히 유용합니다. 새 Markdown 링크를 설계할 때는 render hook 전략과 함께 검토하는 것이 좋습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/ref/","summary":"\u003ch1 id=\"ref-shortcode\"\u003eref shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eref\u003c/code\u003e는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다.\u003cbr\u003e\n문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다.\u003c/p\u003e","title":"ref shortcode"},{"content":"ref target 이 페이지는 ref shortcode의 대상으로만 쓰는 가벼운 내부 페이지입니다.\n경로를 실제로 존재하게 만들어 예제가 빌드에서 깨지지 않게 합니다. 출력은 링크 목적지만 제공하면 충분합니다. 문서 본문에는 상세 설명을 넣지 않아도 됩니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/ref-target/","summary":"\u003ch1 id=\"ref-target\"\u003eref target\u003c/h1\u003e\n\u003cp\u003e이 페이지는 \u003ccode\u003eref\u003c/code\u003e shortcode의 대상으로만 쓰는 가벼운 내부 페이지입니다.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e경로를 실제로 존재하게 만들어 예제가 빌드에서 깨지지 않게 합니다.\u003c/li\u003e\n\u003cli\u003e출력은 링크 목적지만 제공하면 충분합니다.\u003c/li\u003e\n\u003cli\u003e문서 본문에는 상세 설명을 넣지 않아도 됩니다.\u003c/li\u003e\n\u003c/ul\u003e","title":"ref target"},{"content":"relref shortcode relref는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.\nref와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.\n공식 문서는 Markdown에서 이 shortcode가 obsolete라고 설명하면서도, 경로 해석 방식과 에러 처리 옵션을 따로 안내합니다. path, lang, outputFormat을 사용할 수 있으며, 경로는 현재 페이지 기준에서 먼저 해석됩니다. citeturn660511view1\n렌더링 결과 상대 링크로 가는 문서\n원형 [상대 링크로 가는 문서]({{% relref \u0026#34;/blog/lab/91-hugo-shortcode/relref-target\u0026#34; %}}) 해석 포인트 relref는 결과가 상대 URL이어서 이동 가능한 문서 묶음에서 유리합니다. 동일한 도메인 안에서 경로가 덜 딱딱해집니다. ref보다 외형상 덜 장황할 수 있지만, 대규모 문서에서는 경로 기준을 일관되게 유지해야 합니다. 실무 팁 섹션 내부 이동이 많을수록 relref의 장점이 커집니다. 리팩터링 시 상대 경로가 깨질 수 있으므로 대상 페이지의 위치를 함께 관리해야 합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/relref/","summary":"\u003ch1 id=\"relref-shortcode\"\u003erelref shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003erelref\u003c/code\u003e는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.\u003cbr\u003e\n\u003ccode\u003eref\u003c/code\u003e와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.\u003c/p\u003e","title":"relref shortcode"},{"content":"relref shortcode relref는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.\nref와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.\n공식 문서는 Markdown에서 이 shortcode가 obsolete라고 설명하면서도, 경로 해석 방식과 에러 처리 옵션을 따로 안내합니다. path, lang, outputFormat을 사용할 수 있으며, 경로는 현재 페이지 기준에서 먼저 해석됩니다. citeturn660511view1\n렌더링 결과 상대 링크로 가는 문서\n원형 [상대 링크로 가는 문서]({{% relref \u0026#34;/blog/lab/91-hugo-shortcode/relref-target\u0026#34; %}}) 해석 포인트 relref는 결과가 상대 URL이어서 이동 가능한 문서 묶음에서 유리합니다. 동일한 도메인 안에서 경로가 덜 딱딱해집니다. ref보다 외형상 덜 장황할 수 있지만, 대규모 문서에서는 경로 기준을 일관되게 유지해야 합니다. 실무 팁 섹션 내부 이동이 많을수록 relref의 장점이 커집니다. 리팩터링 시 상대 경로가 깨질 수 있으므로 대상 페이지의 위치를 함께 관리해야 합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/relref/","summary":"\u003ch1 id=\"relref-shortcode\"\u003erelref shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003erelref\u003c/code\u003e는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.\u003cbr\u003e\n\u003ccode\u003eref\u003c/code\u003e와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.\u003c/p\u003e","title":"relref shortcode"},{"content":"relref target 이 페이지는 relref shortcode 예제의 안정적인 참조 대상입니다.\n상대 permalink를 확인하는 용도입니다. 문서 흐름을 방해하지 않도록 내용은 짧게 유지합니다. ref와 달리 상대 경로 형태를 확인하는 데 초점을 둡니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/relref-target/","summary":"\u003ch1 id=\"relref-target\"\u003erelref target\u003c/h1\u003e\n\u003cp\u003e이 페이지는 \u003ccode\u003erelref\u003c/code\u003e shortcode 예제의 안정적인 참조 대상입니다.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e상대 permalink를 확인하는 용도입니다.\u003c/li\u003e\n\u003cli\u003e문서 흐름을 방해하지 않도록 내용은 짧게 유지합니다.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eref\u003c/code\u003e와 달리 상대 경로 형태를 확인하는 데 초점을 둡니다.\u003c/li\u003e\n\u003c/ul\u003e","title":"relref target"},{"content":"rtl shortcode rtl는 themes/1/layouts/_shortcodes/readme/custom/rtl.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 왼쪽에서 오른쪽이 아닌 방향으로 읽는 문장입니다.\nMarkdown도 함께 확인합니다. 원형 {{\u0026lt; rtl md=true class=\u0026#34;lab-direction\u0026#34; \u0026gt;}} 왼쪽에서 오른쪽이 아닌 방향으로 읽는 문장입니다. - Markdown도 함께 확인합니다. {{\u0026lt; /rtl \u0026gt;}} 확인 포인트 md와 class만 사용합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/rtl/","summary":"\u003ch1 id=\"rtl-shortcode\"\u003ertl shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ertl\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/rtl.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"rtl shortcode"},{"content":" priority primary BASECTA 버튼입니다자세히 보기 기본 동작을 확인합니다.\npriority primary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; subtitle = \u0026#34;자세히 보기\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} priority primary BASECTA 버튼입니다자세히 보기 기본 동작을 확인합니다.\npriority primary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;secondary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; subtitle = \u0026#34;자세히 보기\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/shortcode-cta-default/","summary":"\u003chr\u003e\n\u003ch1 id=\"priority\"\u003epriority\u003c/h1\u003e\n\u003ch2 id=\"primary\"\u003eprimary\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-default cta--priority-primary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"primary\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003eCTA 버튼입니다\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e자세히 보기\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003ch1 id=\"priority-1\"\u003epriority\u003c/h1\u003e\n\u003ch2 id=\"primary-1\"\u003eprimary\u003c/h2\u003e\n\u003ch3 id=\"raw-code\"\u003eraw-code\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind = \u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority = \u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size = \u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone = \u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align = \u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge = \u0026#34;BASE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label = \u0026#34;CTA 버튼입니다\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle = \u0026#34;자세히 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note = \u0026#34;기본 동작을 확인합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target = \u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href = \u0026#34;https://example.com/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled = \u0026#34;false\u0026#34; \n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e\n\u003ch1 id=\"priority-2\"\u003epriority\u003c/h1\u003e\n\u003ch2 id=\"primary-2\"\u003eprimary\u003c/h2\u003e\n\u003cdiv 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 \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003eCTA 버튼입니다\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e자세히 보기\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e","title":"shortcode CTA default"},{"content":" kind default BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind default raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} kind external BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind external raw-code {{\u0026lt; cta kind = \u0026#34;external\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} kind related BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind related raw-code {{\u0026lt; cta kind = \u0026#34;related\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} kind consult BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind consult raw-code {{\u0026lt; cta kind = \u0026#34;consult\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind download BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind download raw-code {{\u0026lt; cta kind = \u0026#34;download\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind newsletter BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind newsletter raw-code {{\u0026lt; cta kind = \u0026#34;newsletter\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind trial BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind trial raw-code {{\u0026lt; cta kind = \u0026#34;trial\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind price_check BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind price_check raw-code {{\u0026lt; cta kind = \u0026#34;price_check\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind utility BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind utility raw-code {{\u0026lt; cta kind = \u0026#34;utility\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind custom BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind custom raw-code {{\u0026lt; cta kind = \u0026#34;custom\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind internal BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind internal raw-code {{\u0026lt; cta kind = \u0026#34;internal\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind copy BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind copy raw-code {{\u0026lt; cta kind = \u0026#34;copy\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind custom_offer BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind custom_offer raw-code {{\u0026lt; cta kind = \u0026#34;custom_offer\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\npriority primary BASECTA 버튼입니다 기본 동작을 확인합니다.\npriority primary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\npriority secondary BASECTA 버튼입니다 기본 동작을 확인합니다.\npriority secondary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;secondary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\npriority tertiary BASECTA 버튼입니다 기본 동작을 확인합니다.\npriority tertiary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;tertiary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\npriority utility BASECTA 버튼입니다 기본 동작을 확인합니다.\npriority utility raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;utility\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize xs BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize xs raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;xs\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize sm BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize sm raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;sm\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize md BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize md raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize lg BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize lg raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;lg\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize xl BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize xl raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;xl\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone brand BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone brand raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;brand\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone accent BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone accent raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;accent\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone neutral BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone neutral raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone muted BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone muted raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;muted\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone success BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone success raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;success\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone warning BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone warning raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;warning\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone danger BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone danger raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;danger\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nalign left BASECTA 버튼입니다 기본 동작을 확인합니다.\nalign left raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;left\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nalign center BASECTA 버튼입니다 기본 동작을 확인합니다.\nalign center raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nalign right BASECTA 버튼입니다 기본 동작을 확인합니다.\nalign right raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;right\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nalign stretch BASECTA 버튼입니다 기본 동작을 확인합니다.\nalign stretch raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;stretch\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/shortcode-cta-test/","summary":"\u003chr\u003e\n\u003ch1 id=\"kind\"\u003ekind\u003c/h1\u003e\n\u003ch2 id=\"default\"\u003edefault\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-default cta--priority-primary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"primary\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003eCTA 버튼입니다\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003ch1 id=\"kind-1\"\u003ekind\u003c/h1\u003e\n\u003ch2 id=\"default-1\"\u003edefault\u003c/h2\u003e\n\u003ch3 id=\"raw-code\"\u003eraw-code\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind = \u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority = \u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size = \u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone = \u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align = \u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge = \u0026#34;BASE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label = \u0026#34;CTA 버튼입니다\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface = \u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note = \u0026#34;기본 동작을 확인합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target = \u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href = \u0026#34;https://example.com/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled = \u0026#34;false\u0026#34; \n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e\n\u003ch1 id=\"kind-2\"\u003ekind\u003c/h1\u003e\n\u003ch2 id=\"external\"\u003eexternal\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-external cta--priority-primary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"external\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"primary\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003eCTA 버튼입니다\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e","title":"shortcode CTA TEST"},{"content":"tab shortcode tab는 themes/1/layouts/_shortcodes/readme/custom/tab.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 첫 번째 탭 첫 번째 탭 본문입니다. 원형 {{\u0026lt; tab group=\u0026#34;lab-tabs\u0026#34; title=\u0026#34;첫 번째 탭\u0026#34; icon=\u0026#34;star\u0026#34; active=true class=\u0026#34;lab-tab\u0026#34; \u0026gt;}} 첫 번째 탭 본문입니다. {{\u0026lt; /tab \u0026gt;}} 확인 포인트 tabs 컨테이너와 같은 group 값을 써야 연결됩니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/tab/","summary":"\u003ch1 id=\"tab-shortcode\"\u003etab shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003etab\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/tab.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"tab shortcode"},{"content":"tabs shortcode tabs는 themes/1/layouts/_shortcodes/readme/custom/tabs.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 탭 A 탭 A 본문입니다. 탭 B 탭 B 본문입니다. 원형 {{\u0026lt; tabs group=\u0026#34;lab-tabs\u0026#34; class=\u0026#34;lab-tabs\u0026#34; \u0026gt;}} {{\u0026lt; tab group=\u0026#34;lab-tabs\u0026#34; title=\u0026#34;탭 A\u0026#34; active=true \u0026gt;}} 탭 A 본문입니다. {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab group=\u0026#34;lab-tabs\u0026#34; title=\u0026#34;탭 B\u0026#34; \u0026gt;}} 탭 B 본문입니다. {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; /tabs \u0026gt;}} 확인 포인트 tab과 함께 써야 의미가 생깁니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/tabs/","summary":"\u003ch1 id=\"tabs-shortcode\"\u003etabs shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003etabs\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/tabs.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"tabs shortcode"},{"content":"taxonomy term 테스트 목적 term 페이지는 하나의 분류 안에 묶인 글을 적절한 밀도로 나열해야 합니다. 분류명만 보이고 글 목록이 깨지면 의미가 없습니다.\n확인 항목 term 제목이 분명한가 관련 글 목록의 밀도가 적절한가 메타 정보가 지나치게 길지 않은가 기대 결과 사용자는 term 페이지에서 주제를 한 번 더 확인하고, 다음 글로 자연스럽게 이동할 수 있어야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/20-page-types/taxonomy-term/","summary":"\u003ch1 id=\"taxonomy-term\"\u003etaxonomy term\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003eterm 페이지는 하나의 분류 안에 묶인 글을 적절한 밀도로 나열해야 합니다. 분류명만 보이고 글 목록이 깨지면 의미가 없습니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eterm 제목이 분명한가\u003c/li\u003e\n\u003cli\u003e관련 글 목록의 밀도가 적절한가\u003c/li\u003e\n\u003cli\u003e메타 정보가 지나치게 길지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e사용자는 term 페이지에서 주제를 한 번 더 확인하고, 다음 글로 자연스럽게 이동할 수 있어야 합니다.\u003c/p\u003e","title":"taxonomy term"},{"content":"taxonomy list 테스트 목적 카테고리와 태그의 목록 허브가 값이 없을 때도 화면을 깨지 않는지 확인합니다.\n확인 항목 term이 많아졌을 때 정렬이 유지되는가 빈 상태 메시지가 적절한가 다국어에서 taxonomies가 같은 문맥으로 보이는가 기대 결과 taxonomy list는 글을 모으는 허브이면서, 항목이 없을 때도 안내만 남기고 붕괴되지 않아야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/20-page-types/taxonomy-list/","summary":"\u003ch1 id=\"taxonomy-list\"\u003etaxonomy list\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e카테고리와 태그의 목록 허브가 값이 없을 때도 화면을 깨지 않는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eterm이 많아졌을 때 정렬이 유지되는가\u003c/li\u003e\n\u003cli\u003e빈 상태 메시지가 적절한가\u003c/li\u003e\n\u003cli\u003e다국어에서 taxonomies가 같은 문맥으로 보이는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003etaxonomy list는 글을 모으는 허브이면서, 항목이 없을 때도 안내만 남기고 붕괴되지 않아야 합니다.\u003c/p\u003e","title":"taxonomy 목록"},{"content":"threads shortcode threads는 themes/1/layouts/_shortcodes/readme/custom/threads.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 ThreadsThreads Threads 예시\n원문 보기 원형 {{\u0026lt; threads url=\u0026#34;https://www.threads.net/@example/post/1\u0026#34; caption=\u0026#34;Threads 예시\u0026#34; theme=\u0026#34;auto\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /threads \u0026gt;}} 확인 포인트 author와 post_id를 사용할 수도 있습니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/threads/","summary":"\u003ch1 id=\"threads-shortcode\"\u003ethreads shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ethreads\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/threads.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"threads shortcode"},{"content":"tiktok shortcode tiktok는 themes/1/layouts/_shortcodes/readme/custom/tiktok.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 TikTokTikTok @example 영상 제목 TikTok 예시\nTikTok 예시\n원문 보기 원형 {{\u0026lt; tiktok url=\u0026#34;https://www.tiktok.com/@example/video/1\u0026#34; caption=\u0026#34;TikTok 예시\u0026#34; theme=\u0026#34;neutral\u0026#34; title=\u0026#34;영상 제목\u0026#34; author=\u0026#34;@example\u0026#34; video_id=\u0026#34;1\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /tiktok \u0026gt;}} 확인 포인트 url가 우선이고 author/video_id는 보조 입력입니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/tiktok/","summary":"\u003ch1 id=\"tiktok-shortcode\"\u003etiktok shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003etiktok\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/tiktok.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"tiktok shortcode"},{"content":"video shortcode video는 themes/1/layouts/_shortcodes/readme/custom/video.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 샘플 비디오샘플 비디오비디오 캡션원본 영상 열기\n원형 {{\u0026lt; video src=\u0026#34;https://example.com/video.mp4\u0026#34; title=\u0026#34;샘플 비디오\u0026#34; caption=\u0026#34;비디오 캡션\u0026#34; poster=\u0026#34;https://example.com/poster.jpg\u0026#34; ratio=\u0026#34;16/9\u0026#34; preload=\u0026#34;metadata\u0026#34; start=\u0026#34;0\u0026#34; end=\u0026#34;30\u0026#34; controls=true autoplay=false muted=false loop=false playsinline=true sources=\u0026#34;https://example.com/video.webm|video/webm;https://example.com/video.mp4|video/mp4\u0026#34; class=\u0026#34;lab-video\u0026#34; \u0026gt;}} 비디오에 대한 추가 설명입니다. {{\u0026lt; /video \u0026gt;}} 확인 포인트 autoplay=true를 사용할 때는 muted=true와 함께 확인합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/video/","summary":"\u003ch1 id=\"video-shortcode\"\u003evideo shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003evideo\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/video.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"video shortcode"},{"content":"vimeo shortcode vimeo는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.\n튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.\n공식 문서에는 id, allowFullScreen, class, loading, title이 안내되어 있고, privacy.vimeo 설정으로 동작을 조정할 수 있다고 설명합니다. simple=true를 주면 썸네일 기반의 간단한 형태를 쓸 수 있습니다. citeturn791175view2turn241043view2\n렌더링 결과 원형 {{\u0026lt; vimeo id=19899678 allowFullScreen=false loading=lazy title=\u0026#34;Vimeo shortcode sample\u0026#34; \u0026gt;}} 해석 포인트 id는 영상 식별자입니다. allowFullScreen=false는 전체화면 전환을 제한합니다. loading=lazy는 iframe 로드를 늦춰 초기 로딩 부담을 줄입니다. title은 접근성과 iframe 의미 전달에 도움이 됩니다. 주의할 점 외부 iframe 기반 임베드는 사이트의 privacy 설정과 네트워크 상태에 영향을 받습니다.\n오프라인 문서나 엄격한 보안 환경에서는 대체 이미지와 설명 텍스트를 함께 두는 편이 좋습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/vimeo/","summary":"\u003ch1 id=\"vimeo-shortcode\"\u003evimeo shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003evimeo\u003c/code\u003e는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.\u003c/p\u003e","title":"vimeo shortcode"},{"content":"vimeo shortcode vimeo는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.\n튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.\n공식 문서에는 id, allowFullScreen, class, loading, title이 안내되어 있고, privacy.vimeo 설정으로 동작을 조정할 수 있다고 설명합니다. simple=true를 주면 썸네일 기반의 간단한 형태를 쓸 수 있습니다. citeturn791175view2turn241043view2\n렌더링 결과 원형 {{\u0026lt; vimeo id=19899678 allowFullScreen=false loading=lazy title=\u0026#34;Vimeo shortcode sample\u0026#34; \u0026gt;}} 해석 포인트 id는 영상 식별자입니다. allowFullScreen=false는 전체화면 전환을 제한합니다. loading=lazy는 iframe 로드를 늦춰 초기 로딩 부담을 줄입니다. title은 접근성과 iframe 의미 전달에 도움이 됩니다. 주의할 점 외부 iframe 기반 임베드는 사이트의 privacy 설정과 네트워크 상태에 영향을 받습니다.\n오프라인 문서나 엄격한 보안 환경에서는 대체 이미지와 설명 텍스트를 함께 두는 편이 좋습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/vimeo/","summary":"\u003ch1 id=\"vimeo-shortcode\"\u003evimeo shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003evimeo\u003c/code\u003e는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.\u003c/p\u003e","title":"vimeo shortcode"},{"content":"x shortcode x는 X 포스트를 본문에 임베드하는 shortcode입니다.\n과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.\n공식 문서에는 user, id 조합의 예시와 함께 privacy.x.disable, privacy.x.enableDNT, privacy.x.simple, 그리고 services.x.disableInlineCSS 설정이 안내되어 있습니다. citeturn791175view3turn241043view4\n렌더링 결과 Owl bet you\u0026#39;ll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC\n\u0026mdash; San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021 원형 {{\u0026lt; x user=\u0026#34;SanDiegoZoo\u0026#34; id=\u0026#34;1453110110599868418\u0026#34; \u0026gt;}} 해석 포인트 user와 id는 함께 쓰는 경우가 가장 명확합니다. simple=true를 쓰면 JavaScript 없는 정적 버전으로 빌드할 수 있습니다. enableDNT=true는 추적 억제 의도를 드러낼 때 유용합니다. disableInlineCSS는 서비스 스타일을 직접 제어하고 싶을 때 확인해야 합니다. 주의할 점 소셜 임베드는 서비스 정책 변경의 영향을 자주 받습니다.\n문서의 핵심 메시지가 포스트 자체라면, 포스트의 요약 문장도 함께 적어 두는 편이 안정적입니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/x/","summary":"\u003ch1 id=\"x-shortcode\"\u003ex shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ex\u003c/code\u003e는 X 포스트를 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.\u003c/p\u003e\n\u003cp\u003e공식 문서에는 \u003ccode\u003euser\u003c/code\u003e, \u003ccode\u003eid\u003c/code\u003e 조합의 예시와 함께 \u003ccode\u003eprivacy.x.disable\u003c/code\u003e, \u003ccode\u003eprivacy.x.enableDNT\u003c/code\u003e, \u003ccode\u003eprivacy.x.simple\u003c/code\u003e, 그리고 \u003ccode\u003eservices.x.disableInlineCSS\u003c/code\u003e 설정이 안내되어 있습니다. citeturn791175view3turn241043view4\u003c/p\u003e","title":"x shortcode"},{"content":"x shortcode x는 X 포스트를 본문에 임베드하는 shortcode입니다.\n과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.\n공식 문서에는 user, id 조합의 예시와 함께 privacy.x.disable, privacy.x.enableDNT, privacy.x.simple, 그리고 services.x.disableInlineCSS 설정이 안내되어 있습니다. citeturn791175view3turn241043view4\n렌더링 결과 Owl bet you\u0026#39;ll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC\n\u0026mdash; San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021 원형 {{\u0026lt; x user=\u0026#34;SanDiegoZoo\u0026#34; id=\u0026#34;1453110110599868418\u0026#34; \u0026gt;}} 해석 포인트 user와 id는 함께 쓰는 경우가 가장 명확합니다. simple=true를 쓰면 JavaScript 없는 정적 버전으로 빌드할 수 있습니다. enableDNT=true는 추적 억제 의도를 드러낼 때 유용합니다. disableInlineCSS는 서비스 스타일을 직접 제어하고 싶을 때 확인해야 합니다. 주의할 점 소셜 임베드는 서비스 정책 변경의 영향을 자주 받습니다.\n문서의 핵심 메시지가 포스트 자체라면, 포스트의 요약 문장도 함께 적어 두는 편이 안정적입니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/x/","summary":"\u003ch1 id=\"x-shortcode\"\u003ex shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ex\u003c/code\u003e는 X 포스트를 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.\u003c/p\u003e\n\u003cp\u003e공식 문서에는 \u003ccode\u003euser\u003c/code\u003e, \u003ccode\u003eid\u003c/code\u003e 조합의 예시와 함께 \u003ccode\u003eprivacy.x.disable\u003c/code\u003e, \u003ccode\u003eprivacy.x.enableDNT\u003c/code\u003e, \u003ccode\u003eprivacy.x.simple\u003c/code\u003e, 그리고 \u003ccode\u003eservices.x.disableInlineCSS\u003c/code\u003e 설정이 안내되어 있습니다. citeturn791175view3turn241043view4\u003c/p\u003e","title":"x shortcode"},{"content":"youtube shortcode youtube는 YouTube 영상을 본문에 임베드하는 shortcode입니다.\n가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다.\n공식 문서는 id, allowFullScreen, autoplay, class, controls, end, loading, loop, mute, start, title을 설명합니다. autoplay가 켜지면 mute도 강제로 true가 됩니다. citeturn791175view4turn241043view3\n렌더링 결과 원형 {{\u0026lt; youtube 0RKpf3rK57I \u0026gt;}} 해석 포인트 id만 넣어도 가장 흔한 사용 방식은 충분합니다. start와 end를 같이 쓰면 특정 구간만 보여 줄 수 있습니다. loop=true는 반복 재생이 필요할 때 유용합니다. controls=false는 영상을 보여 주되 조작부를 감추고 싶을 때 사용합니다. 실무 팁 문서 상단의 대표 영상보다는, 맥락 설명 뒤의 보조 영상으로 두면 읽기 흐름이 좋습니다. 영상 제목, 캡션, 한 줄 요약을 같이 넣으면 임베드만 있을 때보다 훨씬 친절합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/youtube/","summary":"\u003ch1 id=\"youtube-shortcode\"\u003eyoutube shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eyoutube\u003c/code\u003e는 YouTube 영상을 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다.\u003c/p\u003e","title":"youtube shortcode"},{"content":"youtube shortcode youtube는 YouTube 영상을 본문에 임베드하는 shortcode입니다.\n가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다.\n공식 문서는 id, allowFullScreen, autoplay, class, controls, end, loading, loop, mute, start, title을 설명합니다. autoplay가 켜지면 mute도 강제로 true가 됩니다. citeturn791175view4turn241043view3\n렌더링 결과 원형 {{\u0026lt; youtube 0RKpf3rK57I \u0026gt;}} 해석 포인트 id만 넣어도 가장 흔한 사용 방식은 충분합니다. start와 end를 같이 쓰면 특정 구간만 보여 줄 수 있습니다. loop=true는 반복 재생이 필요할 때 유용합니다. controls=false는 영상을 보여 주되 조작부를 감추고 싶을 때 사용합니다. 실무 팁 문서 상단의 대표 영상보다는, 맥락 설명 뒤의 보조 영상으로 두면 읽기 흐름이 좋습니다. 영상 제목, 캡션, 한 줄 요약을 같이 넣으면 임베드만 있을 때보다 훨씬 친절합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/youtube/","summary":"\u003ch1 id=\"youtube-shortcode\"\u003eyoutube shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eyoutube\u003c/code\u003e는 YouTube 영상을 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다.\u003c/p\u003e","title":"youtube shortcode"},{"content":"spacing layout 테스트 목적 spacing은 요소 간 거리뿐 아니라 페이지의 호흡을 결정합니다. 같은 페이지 안에서도 섹션과 카드와 본문이 서로 다른 리듬을 가져야 합니다.\n확인 항목 제목과 본문 사이 간격이 일관적인가 카드 목록의 밀도가 적절한가 모바일에서 여백이 너무 좁거나 넓지 않은가 판정 간격이 일정하면 정보 계층이 보이고, 간격이 무너지면 아무리 좋은 콘텐츠도 조립품처럼 보입니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/10-foundation/spacing-layout/","summary":"\u003ch1 id=\"spacing-layout\"\u003espacing layout\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003espacing은 요소 간 거리뿐 아니라 페이지의 호흡을 결정합니다. 같은 페이지 안에서도 섹션과 카드와 본문이 서로 다른 리듬을 가져야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e제목과 본문 사이 간격이 일관적인가\u003c/li\u003e\n\u003cli\u003e카드 목록의 밀도가 적절한가\u003c/li\u003e\n\u003cli\u003e모바일에서 여백이 너무 좁거나 넓지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"판정\"\u003e판정\u003c/h2\u003e\n\u003cp\u003e간격이 일정하면 정보 계층이 보이고, 간격이 무너지면 아무리 좋은 콘텐츠도 조립품처럼 보입니다.\u003c/p\u003e","title":"간격과 레이아웃"},{"content":"search 테스트 목적 검색은 기능이 보이지 않을 때도 많지만, 막상 사용하면 UI 품질이 바로 드러나는 페이지입니다. 입력 상태, 결과 없음, 결과 목록을 모두 확인합니다.\n확인 항목 검색 입력이 명확하게 보이는가 결과 없음 상태가 무너짐 없이 표시되는가 결과가 많아져도 정렬과 탐색이 가능한가 언어별 검색이 예상한 대로 동작하는가 기대 결과 검색은 조용하지만 신뢰가 높아야 합니다. 아무 결과가 없어도 사용자가 다음 행동을 선택할 수 있어야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/20-page-types/search/","summary":"\u003ch1 id=\"search\"\u003esearch\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e검색은 기능이 보이지 않을 때도 많지만, 막상 사용하면 UI 품질이 바로 드러나는 페이지입니다. 입력 상태, 결과 없음, 결과 목록을 모두 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e검색 입력이 명확하게 보이는가\u003c/li\u003e\n\u003cli\u003e결과 없음 상태가 무너짐 없이 표시되는가\u003c/li\u003e\n\u003cli\u003e결과가 많아져도 정렬과 탐색이 가능한가\u003c/li\u003e\n\u003cli\u003e언어별 검색이 예상한 대로 동작하는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e검색은 조용하지만 신뢰가 높아야 합니다. 아무 결과가 없어도 사용자가 다음 행동을 선택할 수 있어야 합니다.\u003c/p\u003e","title":"검색"},{"content":"verification log 목적 이 문서는 랩 검증 중에 남기는 결과 기록입니다. 언제 무엇을 확인했고, 무엇이 통과 또는 실패였는지를 간단하지만 재현 가능하게 적습니다.\n기록 항목 항목 내용 날짜 검증한 시점 범위 확인한 섹션과 페이지 결과 통과 / 주의 / 실패 메모 재현 가능한 참고 사항 예시 메모 20-page-types: home과 section list가 정상 30-components: buttons와 cards는 통과 40-markup-rendering: raw HTML은 주의 필요 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/80-operations/verification-log/","summary":"\u003ch1 id=\"verification-log\"\u003everification log\u003c/h1\u003e\n\u003ch2 id=\"목적\"\u003e목적\u003c/h2\u003e\n\u003cp\u003e이 문서는 랩 검증 중에 남기는 결과 기록입니다. 언제 무엇을 확인했고, 무엇이 통과 또는 실패였는지를 간단하지만 재현 가능하게 적습니다.\u003c/p\u003e\n\u003ch2 id=\"기록-항목\"\u003e기록 항목\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e항목\u003c/th\u003e\n \u003cth\u003e내용\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e날짜\u003c/td\u003e\n \u003ctd\u003e검증한 시점\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e범위\u003c/td\u003e\n \u003ctd\u003e확인한 섹션과 페이지\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e결과\u003c/td\u003e\n \u003ctd\u003e통과 / 주의 / 실패\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e메모\u003c/td\u003e\n \u003ctd\u003e재현 가능한 참고 사항\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"예시-메모\"\u003e예시 메모\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e20-page-types: home과 section list가 정상\u003c/li\u003e\n\u003cli\u003e30-components: buttons와 cards는 통과\u003c/li\u003e\n\u003cli\u003e40-markup-rendering: raw HTML은 주의 필요\u003c/li\u003e\n\u003c/ul\u003e","title":"검증 로그"},{"content":"중소기업에서 SaaS 도입이 어려운 이유는 기술이 아니라 설득 자료의 부족인 경우가 많습니다. 현업은 필요성을 느끼고, IT는 가능성을 검토하고, 경영진은 결국 한 가지를 묻습니다.\n“그래서, 왜 지금 이걸 사야 하고, 얼마를 벌어오며, 실패하면 어떻게 되는가?”\n이 질문에 답하지 못하면 좋은 SaaS도 결재선에서 멈춥니다. 반대로 말하면, 이 질문을 한 장의 사업계획서로 정리하면 도입 결정은 훨씬 빨라집니다.\n이 글은 중소기업 디지털 전환 검토자가 경영진 승인용으로 바로 사용할 수 있는 SaaS 구매 사업계획서 템플릿과 작성 기준을 정리한 실전 가이드입니다.\n1. SaaS 구매 사업계획서가 필요한 이유 SaaS는 구매가 아니라 변화의 승인입니다. 단순히 소프트웨어를 사는 것이 아니라, 업무 방식·역할 분담·예산 구조·운영 리스크를 함께 바꾸는 결정입니다.\n그래서 경영진은 기능 목록보다 다음을 먼저 봅니다.\n지금 해결하려는 문제가 정말 큰가 도입 후 업무가 얼마나 줄어드는가 비용 대비 효과가 명확한가 실패했을 때 피해를 통제할 수 있는가 우리 조직 규모와 문화에 맞는가 이 다섯 가지를 한 번에 보여주는 문서가 바로 사업계획서입니다.\n2. 경영진이 실제로 보는 5가지 판단 기준 아래 기준을 중심으로 작성하면, 설득력이 높은 문서가 됩니다.\n판단 기준 경영진이 묻는 질문 문서에서 보여줄 것 문제 심각도 지금 안 바꾸면 어떤 손해가 생기나 업무 지연, 누락, 중복 입력, 대응 지연 효과 명확성 도입하면 무엇이 얼마나 개선되나 시간 절감, 정확도 향상, 전환율 개선 비용 적정성 총비용이 예산 범위 안인가 구독료, 세팅비, 교육비, 운영비 리스크 통제 실패하면 어떻게 되나 단계적 도입, 철회 기준, 대체 프로세스 실행 가능성 우리 조직이 실제로 쓸 수 있나 담당자, 일정, 교육, 정착 계획 핵심은 “좋아 보인다”가 아니라 **“도입하면 경영적으로 납득된다”**를 증명하는 것입니다.\n3. SaaS 구매 사업계획서 기본 구조 아래 구조를 그대로 쓰면 됩니다. 복잡하게 꾸밀 필요가 없습니다. 중요한 것은 결정 순서에 맞는 배치입니다.\n3.1 문제 정의 현재 어떤 업무가 비효율적인지 적습니다.\n예시:\n고객 문의 응답이 팀별로 분산되어 이력 추적이 어렵다 엑셀 기반 관리로 중복 입력과 누락이 반복된다 승인, 공유, 보고가 수작업이라 리드타임이 길다 3.2 도입 목적 이번 SaaS 도입의 목적을 한 문장으로 정리합니다.\n예시:\n고객 응대 이력을 통합해 응답 속도와 관리 정확도를 높인다 반복 업무를 자동화해 실무자의 시간을 확보한다 경영진이 확인 가능한 운영 지표를 만든다 3.3 대안 비교 사내 수작업, 엑셀 유지, 외주, SaaS 도입을 비교합니다.\n3.4 비용 추정 구독료만 쓰지 말고 총소유비용(TCO) 관점으로 봅니다.\n포함 항목:\n연간 라이선스 비용 초기 세팅 및 컨설팅 비용 교육 및 온보딩 비용 내부 운영 인력 시간 연동/추가 모듈 비용 3.5 기대 효과 정량과 정성을 함께 적습니다.\n월 20시간의 수작업 절감 응답 누락 감소 보고 시간 단축 부서 간 협업 지연 완화 3.6 리스크와 대응 도입 실패 가능성을 숨기지 말고 줄이는 방식으로 제시합니다.\n사용률 저조 → 파일럿 후 확대 기능 과잉 → 핵심 업무부터 최소 기능 적용 현업 저항 → 업무 책임자 참여 및 교육 설계 데이터 이전 오류 → 검증 기간 운영 3.7 도입 일정 한 번에 전사 도입하지 말고 단계로 나눕니다.\n1주차: 요구사항 정리 2주차: 제품 비교 3주차: 파일럿 4주차: 승인 및 계약 5~6주차: 설정 및 교육 7주차 이후: 운영 점검 4. 바로 써먹는 SaaS 비교표 템플릿 아래 표는 경영진에게 특히 유용합니다. 한눈에 비교되기 때문입니다.\n항목 A 솔루션 B 솔루션 C 솔루션 월 비용 초기 구축 핵심 기능 연동 가능성 사용 난이도 보안/권한 관리 확장성 도입 리스크 총평 비교표는 길게 쓰는 것보다 같은 기준으로 끝까지 비교하는 것이 중요합니다. 경영진은 화려한 설명보다 정리된 판단표를 선호합니다.\n5. ROI를 설득력 있게 쓰는 방법 SaaS 사업계획서에서 가장 중요한 부분은 ROI입니다. 다만 너무 복잡한 수식보다, 실제 의사결정에 도움이 되는 방식이 더 좋습니다.\n5.1 가장 단순한 계산식 절감 효과 = 절감 시간 × 인건비 환산값 × 인원 수\n예시:\n월 20시간 절감 5명 적용 시간당 인건비 2만 원 가정 월 약 200만 원 수준의 효과 여기에 고객 응대 개선, 오류 감소, 리드타임 단축 같은 간접효과를 더합니다.\n5.2 경영진이 납득하는 표현 ROI는 숫자 자체보다 다음 문장 구조가 중요합니다.\n6개월 내 비용 회수 가능성이 있는가 최소한 손해가 적은 구조인가 파일럿 결과가 본도입 판단에 충분한가 즉, “얼마나 좋은가”보다 **“언제 회수되는가”**를 먼저 보여주어야 합니다.\n6. 실패하지 않는 도입 전략: 한 번에 바꾸지 말 것 중소기업의 SaaS 실패는 대부분 제품 성능보다 도입 방식에서 생깁니다.\n가장 안전한 방식은 아래 순서입니다.\n핵심 업무 하나만 선택한다 파일럿 대상 팀을 좁게 잡는다 사용률과 만족도를 측정한다 문제를 수정한 뒤 확장한다 전사 확대는 마지막에 한다 이 방식의 장점은 명확합니다.\n실패 비용이 낮다 현업 저항이 줄어든다 승인을 받기 쉽다 실행 후 개선 여지가 남는다 추천도 높은 방식입니다.\n7. 중소기업에 맞는 SaaS 선택 기준 대기업 기준으로 고르면 과합니다. 중소기업은 아래 기준이 훨씬 중요합니다.\n관리자 없이도 운영 가능한가 교육이 짧아도 바로 쓸 수 있는가 우리 업무 흐름에 맞게 설정 가능한가 데이터 이동과 백업이 쉬운가 계약 조건이 유연한가 사용자 수가 늘어도 비용이 급격히 뛰지 않는가 체크 포인트 과한 커스터마이징이 필요한 제품은 추천도 낮음(사유: 도입 속도 저하) 특정 담당자만 쓸 수 있는 제품은 추천도 낮음(사유: 운영 리스크 집중) 기능은 적어도 안정적인 제품은 추천도 높음(사유: 정착 가능성 높음) 8. 내부 승인용 문서에 꼭 들어가야 하는 문장 아래 문장들을 그대로 활용해도 됩니다.\n본 도입안은 반복 업무 절감과 운영 표준화를 위한 것이다. 현재 방식은 누락과 지연이 구조적으로 발생할 가능성이 높다. 파일럿 결과를 바탕으로 단계적 확대 여부를 결정한다. 총비용과 기대효과를 비교했을 때 도입 타당성이 있다. 실패 리스크는 단계별 검증으로 통제 가능하다. 이런 표현은 감정적 설득보다 훨씬 강합니다. 경영진은 대체로 “의욕”보다 **“관리 가능성”**을 봅니다.\n9. 실무자가 바로 쓰는 SaaS 구매 사업계획서 체크리스트 문제 정의가 한 문장으로 정리되어 있는가 도입 목적이 업무 개선과 연결되는가 대안 비교가 최소 3개 이상 있는가 비용 항목이 누락 없이 들어갔는가 기대효과가 정량·정성으로 나뉘어 있는가 실패 리스크와 대응책이 포함되어 있는가 도입 일정과 담당자가 정해졌는가 경영진이 묻는 질문에 답하는 구조인가 하나라도 비어 있으면 승인 속도가 느려집니다.\n10. 결론: 좋은 SaaS가 아니라, 승인되는 SaaS를 고르자 SaaS 도입의 승패는 제품 스펙만으로 결정되지 않습니다. 실제로는 사업계획서가 설득의 품질을 결정합니다.\n중소기업에서는 특히 더 그렇습니다. 예산이 크지 않기 때문에, 경영진은 “좋은 기능”보다 “실패하지 않는 선택”을 원합니다.\n따라서 SaaS 구매 사업계획서는 다음 세 가지를 반드시 만족해야 합니다.\n문제를 정확히 보여줄 것 효과를 숫자로 설명할 것 리스크를 통제 가능한 형태로 보여줄 것 이 기준만 지켜도 도입 논의는 훨씬 빨라집니다.\n한 줄 정리 SaaS는 구매하는 순간보다, 승인받는 순간이 더 중요하다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/insights/saas-purchase-business-plan-executive-approval/","summary":"중소기업에서 SaaS 구매를 승인받기 위한 사업계획서 구조, 비용·효과·리스크 정리법, 대안 비교표, ROI 설득 포인트를 정리한 실전 가이드","title":"경영진이 승인하는 SaaS 구매 사업계획서 작성법"},{"content":"related posts 테스트 목적 관련 글은 추천 알고리즘이 아니라 문맥 연결입니다. 비슷한 주제의 글이 너무 멀어지지 않게 배치되어야 합니다.\n확인 항목 현재 글과 의미적으로 가까운가 제목과 설명이 중복되지 않는가 항목 수가 과하지 않은가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/50-layout-navigation/related-posts/","summary":"\u003ch1 id=\"related-posts\"\u003erelated posts\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e관련 글은 추천 알고리즘이 아니라 문맥 연결입니다. 비슷한 주제의 글이 너무 멀어지지 않게 배치되어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e현재 글과 의미적으로 가까운가\u003c/li\u003e\n\u003cli\u003e제목과 설명이 중복되지 않는가\u003c/li\u003e\n\u003cli\u003e항목 수가 과하지 않은가\u003c/li\u003e\n\u003c/ul\u003e","title":"관련 글"},{"content":"figures 테스트 목적 figure는 이미지를 설명하고 본문에 다시 연결하는 역할을 합니다. 그림이 있더라도 본문이 끊기지 않아야 합니다.\n예시 구조 다이어그램이미지와 캡션이 본문 의미를 보강해야 합니다. 확인 항목 alt가 적절한가 캡션이 본문과 중복되지 않는가 링크가 있는 figure도 자연스럽게 보이는가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/30-components/figures/","summary":"\u003ch1 id=\"figures\"\u003efigures\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003efigure는 이미지를 설명하고 본문에 다시 연결하는 역할을 합니다. 그림이 있더라도 본문이 끊기지 않아야 합니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cfigure class=\"figure-frame \u0026amp;lt;nil\u0026amp;gt;\"\u003e\u003ca href=\"\u003cnil\u003e\" target=\"\u0026lt;nil\u0026gt;\" rel=\"\u0026lt;nil\u0026gt;\"\u003e\u003cimg src=\"/images/theme-upgrade-lab/diagram.svg\" alt=\"다이어그램\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"\u0026lt;nil\u0026gt;\"\u003e\u003c/a\u003e\u003cfigcaption\u003e\u003ch4\u003e구조 다이어그램\u003c/h4\u003e\u003cp\u003e이미지와 캡션이 본문 의미를 보강해야 합니다. \u003ca href=\"\u003cnil\u003e\"\u003e\u003c!-- raw HTML omitted --\u003e\n\u003c/a\u003e\u003c/p\u003e","title":"그림"},{"content":"built-in shortcodes 테스트 목적 Hugo 기본 shortcode는 문서 구조와 별개로 동작해야 합니다. figure, details, raw HTML, embed 계열이 본문 안에서 안전하게 렌더링되는지 봅니다.\n예시 figure 예시이미지 shortcode가 본문 레이아웃을 깨지 않아야 합니다. 확장 메모기본 shortcode는 샘플이 아니라 실제 문서에서 쓸 수 있어야 합니다. 확인 항목 figure가 캡션과 함께 자연스럽게 렌더링되는가 details/collapse가 본문 흐름을 끊지 않는가 부모 문단과 shortcode 경계가 애매하지 않은가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/40-markup-rendering/built-in-shortcodes/","summary":"\u003ch1 id=\"built-in-shortcodes\"\u003ebuilt-in shortcodes\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003eHugo 기본 shortcode는 문서 구조와 별개로 동작해야 합니다. figure, details, raw HTML, embed 계열이 본문 안에서 안전하게 렌더링되는지 봅니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cfigure class=\"figure-frame \u0026amp;lt;nil\u0026amp;gt;\"\u003e\u003ca href=\"\u003cnil\u003e\" target=\"\u0026lt;nil\u0026gt;\" rel=\"\u0026lt;nil\u0026gt;\"\u003e\u003cimg src=\"/images/theme-upgrade-lab/cover.svg\" alt=\"기본 shortcode용 그림\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"\u0026lt;nil\u0026gt;\"\u003e\u003c/a\u003e\u003cfigcaption\u003e\u003ch4\u003efigure 예시\u003c/h4\u003e\u003cp\u003e이미지 shortcode가 본문 레이아웃을 깨지 않아야 합니다. \u003ca href=\"\u003cnil\u003e\"\u003e\u003c!-- raw HTML omitted --\u003e\n\u003c/a\u003e\u003c/p\u003e","title":"기본 shortcode"},{"content":"markdown basic 테스트 목적 제목, 문단, 목록, 인용, 코드 블록 같은 기본 마크다운 요소가 깨지지 않고 렌더링되는지 확인합니다.\n확인 항목 heading 계층이 자연스러운가 list와 blockquote가 본문 리듬을 해치지 않는가 inline code와 code block이 명확히 구분되는가 예시 이 인용은 본문과 같은 폭 안에서 읽혀야 합니다.\ntitle = \u0026#34;markdown basic\u0026#34; ShowToc = true ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/40-markup-rendering/markdown-basic/","summary":"\u003ch1 id=\"markdown-basic\"\u003emarkdown basic\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e제목, 문단, 목록, 인용, 코드 블록 같은 기본 마크다운 요소가 깨지지 않고 렌더링되는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eheading 계층이 자연스러운가\u003c/li\u003e\n\u003cli\u003elist와 blockquote가 본문 리듬을 해치지 않는가\u003c/li\u003e\n\u003cli\u003einline code와 code block이 명확히 구분되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cblockquote\u003e\n\u003cp\u003e이 인용은 본문과 같은 폭 안에서 읽혀야 합니다.\u003c/p\u003e","title":"기본 마크다운"},{"content":"long post 서론 긴 글은 문서의 체력을 보여 줍니다. 목차, 섹션 구조, 인용, 코드, 이미지, shortcode가 함께 붙을 때도 읽기 리듬이 유지되어야 합니다.\n배경 이 글은 단순한 예제가 아니라 실제 운영 글처럼 보이도록 설계했습니다. 긴 글은 중간에 한 번 더 호흡을 정리해 주는 소제목이 필요합니다.\n실험 요소 긴 글 샘플이미지와 본문이 경쟁하지 않고 역할을 나눠야 합니다. git status hugo server 추가 메모긴 글에서는 보조 정보가 본문을 압도하지 않는지 특히 봐야 합니다. 결론 긴 글은 길다는 이유로 복잡해지는 것이 아니라, 길기 때문에 오히려 구조가 더 분명해야 합니다. 그래서 이 페이지는 단순히 문량을 늘리는 대신, 정보 계층을 끝까지 유지하는지 확인하는 데 목적이 있습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/70-real-world-posts/long-post/","summary":"\u003ch1 id=\"long-post\"\u003elong post\u003c/h1\u003e\n\u003ch2 id=\"서론\"\u003e서론\u003c/h2\u003e\n\u003cp\u003e긴 글은 문서의 체력을 보여 줍니다. 목차, 섹션 구조, 인용, 코드, 이미지, shortcode가 함께 붙을 때도 읽기 리듬이 유지되어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"배경\"\u003e배경\u003c/h2\u003e\n\u003cp\u003e이 글은 단순한 예제가 아니라 실제 운영 글처럼 보이도록 설계했습니다. 긴 글은 중간에 한 번 더 호흡을 정리해 주는 소제목이 필요합니다.\u003c/p\u003e","title":"긴 글"},{"content":"single page 테스트 목적 본문형 페이지는 제목, 설명, 메타, 목차, 본문 사이의 균형이 중요합니다. 정보가 너무 많으면 산만하고, 너무 적으면 구조가 사라집니다.\n확인 항목 제목과 설명이 같은 계층에서 충돌하지 않는가 목차가 필요한 문서에만 적절히 나타나는가 본문 너비와 줄길이가 읽기 좋은가 기대 결과 독자는 이 페이지를 읽으며 구조를 바로 파악하고, 다음 페이지로 이동할 수 있어야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/20-page-types/single-page/","summary":"\u003ch1 id=\"single-page\"\u003esingle page\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e본문형 페이지는 제목, 설명, 메타, 목차, 본문 사이의 균형이 중요합니다. 정보가 너무 많으면 산만하고, 너무 적으면 구조가 사라집니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e제목과 설명이 같은 계층에서 충돌하지 않는가\u003c/li\u003e\n\u003cli\u003e목차가 필요한 문서에만 적절히 나타나는가\u003c/li\u003e\n\u003cli\u003e본문 너비와 줄길이가 읽기 좋은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e독자는 이 페이지를 읽으며 구조를 바로 파악하고, 다음 페이지로 이동할 수 있어야 합니다.\u003c/p\u003e","title":"단일 페이지"},{"content":"design tokens 테스트 목적 토큰이 CSS, 템플릿, shortcode에서 같은 의미로 읽히는지 확인합니다. 숫자를 직접 박아 넣는 대신 토큰이 흐르는지 보는 테스트입니다.\n확인 항목 기초 값과 의미 값이 구분되는가 컴포넌트가 직접 숫자를 들고 있지 않은가 토큰 변경이 여러 UI에 예측 가능하게 반영되는가 기대 결과 페이지 상단의 핵심 카드, 표, 본문 간격이 같은 시각 언어를 유지해야 합니다.\n진단 도구 design-probe shortcode를 사용해 중앙 토큰의 역할을 다시 확인합니다.\n실패 기준 카드와 본문이 서로 다른 시스템처럼 보이는 경우 배경, border, shadow의 레이어 감각이 어긋나는 경우 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/10-foundation/design-tokens/","summary":"\u003ch1 id=\"design-tokens\"\u003edesign tokens\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e토큰이 CSS, 템플릿, shortcode에서 같은 의미로 읽히는지 확인합니다. 숫자를 직접 박아 넣는 대신 토큰이 흐르는지 보는 테스트입니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e기초 값과 의미 값이 구분되는가\u003c/li\u003e\n\u003cli\u003e컴포넌트가 직접 숫자를 들고 있지 않은가\u003c/li\u003e\n\u003cli\u003e토큰 변경이 여러 UI에 예측 가능하게 반영되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e페이지 상단의 핵심 카드, 표, 본문 간격이 같은 시각 언어를 유지해야 합니다.\u003c/p\u003e","title":"디자인 토큰"},{"content":"release checklist 점검 항목 content/ko의 경로가 모두 의도한 위치에 있는가 docs와 lab의 역할이 섞이지 않았는가 blog에 검증 전용 글이 들어가지 않았는가 기본 taxonomy와 menu가 연결되는가 TOML front matter가 모두 유효한가 모바일 화면에서 주요 페이지가 깨지지 않는가 릴리스 기준 모든 필수 항목이 통과해야 릴리스 가능합니다. 하나라도 불명확하면 그 항목은 다시 문서화해야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/80-operations/release-checklist/","summary":"\u003ch1 id=\"release-checklist\"\u003erelease checklist\u003c/h1\u003e\n\u003ch2 id=\"점검-항목\"\u003e점검 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003econtent/ko의 경로가 모두 의도한 위치에 있는가\u003c/li\u003e\n\u003cli\u003edocs와 lab의 역할이 섞이지 않았는가\u003c/li\u003e\n\u003cli\u003eblog에 검증 전용 글이 들어가지 않았는가\u003c/li\u003e\n\u003cli\u003e기본 taxonomy와 menu가 연결되는가\u003c/li\u003e\n\u003cli\u003eTOML front matter가 모두 유효한가\u003c/li\u003e\n\u003cli\u003e모바일 화면에서 주요 페이지가 깨지지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"릴리스-기준\"\u003e릴리스 기준\u003c/h2\u003e\n\u003cp\u003e모든 필수 항목이 통과해야 릴리스 가능합니다. 하나라도 불명확하면 그 항목은 다시 문서화해야 합니다.\u003c/p\u003e","title":"릴리스 체크리스트"},{"content":"menus 테스트 목적 메뉴는 content가 아니라 구성 파일에서 관리해야 합니다. 이 페이지는 메뉴 구조를 이해하고, 바뀌어도 어디를 먼저 수정해야 하는지 확인하는 기준입니다.\n확인 항목 메뉴 역할 비고 main 핵심 탐색 docs, lab, blog를 우선 노출 taxonomies 분류 탐색 categories와 tags를 연결 utility 보조 행동 contact, search 등과 연결 가능 운영 원칙 메뉴 변경은 content와 config의 책임을 나눕니다. 새 허브가 생기면 먼저 docs에 정의를 남깁니다. 언어별 메뉴는 같은 순서를 유지합니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/50-layout-navigation/menus/","summary":"\u003ch1 id=\"menus\"\u003emenus\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e메뉴는 content가 아니라 구성 파일에서 관리해야 합니다. 이 페이지는 메뉴 구조를 이해하고, 바뀌어도 어디를 먼저 수정해야 하는지 확인하는 기준입니다.\u003c/p\u003e","title":"메뉴"},{"content":"motion shape 테스트 목적 모션과 형태는 거의 보이지 않지만 인상을 크게 바꿉니다. 과한 motion은 장식이 되고, 너무 적은 shape는 페이지를 딱딱하게 만듭니다.\n확인 항목 hover와 focus 상태가 구분되는가 radius가 카드와 버튼에 같은 문법으로 적용되는가 transition이 빠르되 거슬리지 않는가 기대 결과 레이어는 분명해야 하지만 과장되면 안 됩니다. 부드러우면서도 단정한 느낌이 목표입니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/10-foundation/motion-shape/","summary":"\u003ch1 id=\"motion-shape\"\u003emotion shape\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e모션과 형태는 거의 보이지 않지만 인상을 크게 바꿉니다. 과한 motion은 장식이 되고, 너무 적은 shape는 페이지를 딱딱하게 만듭니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003ehover와 focus 상태가 구분되는가\u003c/li\u003e\n\u003cli\u003eradius가 카드와 버튼에 같은 문법으로 적용되는가\u003c/li\u003e\n\u003cli\u003etransition이 빠르되 거슬리지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e레이어는 분명해야 하지만 과장되면 안 됩니다. 부드러우면서도 단정한 느낌이 목표입니다.\u003c/p\u003e","title":"모션과 형태"},{"content":"badges 테스트 목적 배지는 메인 정보가 아니라 보조 신호입니다. 상태, 분류, 짧은 메타가 본문을 가리지 않는지 확인합니다.\n확인 항목 짧은 라벨이 적절한 밀도로 보이는가 배지가 줄바꿈될 때 디자인이 깨지지 않는가 색이 정보의 주인공이 되지 않는가 기대 결과 배지는 시선을 빼앗지 않으면서도 맥락을 보강해야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/30-components/badges/","summary":"\u003ch1 id=\"badges\"\u003ebadges\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e배지는 메인 정보가 아니라 \u003cstrong\u003e보조 신호\u003c/strong\u003e입니다. 상태, 분류, 짧은 메타가 본문을 가리지 않는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e짧은 라벨이 적절한 밀도로 보이는가\u003c/li\u003e\n\u003cli\u003e배지가 줄바꿈될 때 디자인이 깨지지 않는가\u003c/li\u003e\n\u003cli\u003e색이 정보의 주인공이 되지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e배지는 시선을 빼앗지 않으면서도 맥락을 보강해야 합니다.\u003c/p\u003e","title":"배지"},{"content":"buttons 테스트 목적 버튼은 사용자의 행동을 유도하는 가장 중요한 상호작용 요소입니다. primary, secondary, external, utility가 같은 시스템 안에서 분리되어 보여야 합니다.\n확인 항목 primary 버튼이 가장 먼저 읽히는가 secondary 버튼이 보조 행동으로 인식되는가 external 행동이 내부 이동과 헷갈리지 않는가 긴 라벨이 줄바꿈되어도 버튼 구조가 유지되는가 shortcode 예시 구조 확인 시작 외부 문서 열기 실패 기준 행동 우선순위가 보이지 않는 경우 라벨이 길 때 버튼 높이가 제멋대로 바뀌는 경우 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/30-components/buttons/","summary":"\u003ch1 id=\"buttons\"\u003ebuttons\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e버튼은 사용자의 행동을 유도하는 가장 중요한 상호작용 요소입니다. primary, secondary, external, utility가 같은 시스템 안에서 분리되어 보여야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eprimary 버튼이 가장 먼저 읽히는가\u003c/li\u003e\n\u003cli\u003esecondary 버튼이 보조 행동으로 인식되는가\u003c/li\u003e\n\u003cli\u003eexternal 행동이 내부 이동과 헷갈리지 않는가\u003c/li\u003e\n\u003cli\u003e긴 라벨이 줄바꿈되어도 버튼 구조가 유지되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"shortcode-예시\"\u003eshortcode 예시\u003c/h2\u003e\n\u003cdiv 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 \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"trial\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/docs/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e구조 확인 시작\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e","title":"버튼"},{"content":"breadcrumbs 테스트 목적 breadcrumb는 사용자가 지금 어디에 있는지, 어디에서 왔는지 설명합니다. 깊은 구조일수록 중요합니다.\n확인 항목 상위 계층이 올바르게 나열되는가 현재 페이지가 마지막에 분명히 표시되는가 모바일에서 길이가 과도하지 않은가 기대 결과 breadcrumb는 현재 문맥을 잃지 않게 해 주는 작은 나침반입니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/50-layout-navigation/breadcrumbs/","summary":"\u003ch1 id=\"breadcrumbs\"\u003ebreadcrumbs\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003ebreadcrumb는 사용자가 지금 어디에 있는지, 어디에서 왔는지 설명합니다. 깊은 구조일수록 중요합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e상위 계층이 올바르게 나열되는가\u003c/li\u003e\n\u003cli\u003e현재 페이지가 마지막에 분명히 표시되는가\u003c/li\u003e\n\u003cli\u003e모바일에서 길이가 과도하지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003ebreadcrumb는 현재 문맥을 잃지 않게 해 주는 작은 나침반입니다.\u003c/p\u003e","title":"브레드크럼"},{"content":"color surface 테스트 목적 배경과 카드, 보조 표면의 위계가 분리되어야 합니다. 같은 색을 쓰더라도 역할이 다르면 시각적 레이어가 달라 보여야 합니다.\n확인 항목 페이지 배경과 카드가 섞이지 않는가 강조 영역이 너무 많지 않은가 라이트와 다크에서 바탕 인상이 유지되는가 시각 샘플 표면 레이어static 이미지를 사용해 figure 렌더링과 비주얼 계층을 함께 점검합니다. 실패 기준 표면이 모두 같은 덩어리처럼 보이는 경우 카드가 배경 위에서 떠 보이지 않는 경우 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/10-foundation/color-surface/","summary":"\u003ch1 id=\"color-surface\"\u003ecolor surface\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e배경과 카드, 보조 표면의 위계가 분리되어야 합니다. 같은 색을 쓰더라도 역할이 다르면 시각적 레이어가 달라 보여야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e페이지 배경과 카드가 섞이지 않는가\u003c/li\u003e\n\u003cli\u003e강조 영역이 너무 많지 않은가\u003c/li\u003e\n\u003cli\u003e라이트와 다크에서 바탕 인상이 유지되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"시각-샘플\"\u003e시각 샘플\u003c/h2\u003e\n\u003cfigure class=\"figure-frame \u0026amp;lt;nil\u0026amp;gt;\"\u003e\u003ca href=\"\u003cnil\u003e\" target=\"\u0026lt;nil\u0026gt;\" rel=\"\u0026lt;nil\u0026gt;\"\u003e\u003cimg src=\"/images/theme-upgrade-lab/cover.svg\" alt=\"색상 표면 예시\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"\u0026lt;nil\u0026gt;\"\u003e\u003c/a\u003e\u003cfigcaption\u003e\u003ch4\u003e표면 레이어\u003c/h4\u003e\u003cp\u003estatic 이미지를 사용해 figure 렌더링과 비주얼 계층을 함께 점검합니다. \u003ca href=\"\u003cnil\u003e\"\u003e\u003c!-- raw HTML omitted --\u003e\n\u003c/a\u003e\u003c/p\u003e","title":"색상과 표면"},{"content":"section list 테스트 목적 섹션 목록은 하위 페이지의 질서를 보여 줍니다. 제목, 요약, 카드, 메타가 과도하지 않으면서도 충분히 읽혀야 합니다.\n확인 항목 목록 정렬이 예측 가능한가 빈 섹션 상태에서도 UI가 무너지지 않는가 하위 페이지의 요약이 과도하게 길지 않은가 기대 결과 목록 페이지는 많은 정보를 한 화면에 넣는 대신, 사용자가 다음 단계를 고를 수 있게 도와야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/20-page-types/section-list/","summary":"\u003ch1 id=\"section-list\"\u003esection list\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e섹션 목록은 하위 페이지의 질서를 보여 줍니다. 제목, 요약, 카드, 메타가 과도하지 않으면서도 충분히 읽혀야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e목록 정렬이 예측 가능한가\u003c/li\u003e\n\u003cli\u003e빈 섹션 상태에서도 UI가 무너지지 않는가\u003c/li\u003e\n\u003cli\u003e하위 페이지의 요약이 과도하게 길지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e목록 페이지는 많은 정보를 한 화면에 넣는 대신, 사용자가 다음 단계를 고를 수 있게 도와야 합니다.\u003c/p\u003e","title":"섹션 목록"},{"content":"section pages 테스트 목적 섹션 페이지는 하위 콘텐츠를 모으는 허브입니다. 요약, 목록, 읽는 순서가 분명해야 합니다.\n확인 항목 섹션 소개와 하위 목록이 충돌하지 않는가 하위 페이지가 많아져도 읽기 쉽나 섹션 허브와 실제 본문이 혼동되지 않는가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/60-content-architecture/section-pages/","summary":"\u003ch1 id=\"section-pages\"\u003esection pages\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e섹션 페이지는 하위 콘텐츠를 모으는 허브입니다. 요약, 목록, 읽는 순서가 분명해야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e섹션 소개와 하위 목록이 충돌하지 않는가\u003c/li\u003e\n\u003cli\u003e하위 페이지가 많아져도 읽기 쉽나\u003c/li\u003e\n\u003cli\u003e섹션 허브와 실제 본문이 혼동되지 않는가\u003c/li\u003e\n\u003c/ul\u003e","title":"섹션 페이지"},{"content":"alerts 테스트 목적 알림은 주의, 경고, 정보, 성공 상태를 전달합니다. 내용이 짧아도 눈에 띄어야 하지만, 페이지 전체를 지배하면 안 됩니다.\n확인 항목 알림이 본문 문단과 혼동되지 않는가 경고와 정보의 계층이 분리되는가 긴 메시지가 들어가도 박스가 무너지지 않는가 raw HTML 예시 검증 알림: 상태 메시지는 본문보다 앞서 읽혀야 합니다. 실패 기준 알림이 본문처럼 보여 버리는 경우 색만 바뀌고 의미 구조가 없는 경우 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/30-components/alerts/","summary":"\u003ch1 id=\"alerts\"\u003ealerts\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e알림은 주의, 경고, 정보, 성공 상태를 전달합니다. 내용이 짧아도 눈에 띄어야 하지만, 페이지 전체를 지배하면 안 됩니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e알림이 본문 문단과 혼동되지 않는가\u003c/li\u003e\n\u003cli\u003e경고와 정보의 계층이 분리되는가\u003c/li\u003e\n\u003cli\u003e긴 메시지가 들어가도 박스가 무너지지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"raw-html-예시\"\u003eraw HTML 예시\u003c/h2\u003e\n\n\u003cdiv role=\"alert\" style=\"padding:1rem;border:1px solid currentColor;border-radius:0.75rem;\"\u003e\n 검증 알림: 상태 메시지는 본문보다 앞서 읽혀야 합니다.\n\u003c/div\u003e\n\n\u003ch2 id=\"실패-기준\"\u003e실패 기준\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e알림이 본문처럼 보여 버리는 경우\u003c/li\u003e\n\u003cli\u003e색만 바뀌고 의미 구조가 없는 경우\u003c/li\u003e\n\u003c/ul\u003e","title":"알림"},{"content":"language switcher 테스트 목적 언어 전환은 단순히 다른 언어 홈으로 보내는 링크가 아니라, 현재 문서의 대응 번역으로 이동해야 합니다.\n확인 항목 현재 페이지가 가능한 경우 같은 문서의 다른 언어로 이동하는가 번역이 없을 때 안전한 대체 경로가 있는가 표기와 순서가 언어별로 일관적인가 운영 원칙 secondary 언어를 준비하지 않았다면 구조만 맞추고 본문은 비워 두는 편이 낫습니다. 잘못된 번역 연결보다 비어 있는 구조가 더 안전합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/50-layout-navigation/language-switcher/","summary":"\u003ch1 id=\"language-switcher\"\u003elanguage switcher\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e언어 전환은 단순히 다른 언어 홈으로 보내는 링크가 아니라, \u003cstrong\u003e현재 문서의 대응 번역\u003c/strong\u003e으로 이동해야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e현재 페이지가 가능한 경우 같은 문서의 다른 언어로 이동하는가\u003c/li\u003e\n\u003cli\u003e번역이 없을 때 안전한 대체 경로가 있는가\u003c/li\u003e\n\u003cli\u003e표기와 순서가 언어별로 일관적인가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"운영-원칙\"\u003e운영 원칙\u003c/h2\u003e\n\u003cp\u003esecondary 언어를 준비하지 않았다면 구조만 맞추고 본문은 비워 두는 편이 낫습니다. 잘못된 번역 연결보다 비어 있는 구조가 더 안전합니다.\u003c/p\u003e","title":"언어 전환기"},{"content":"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 진입점이 명확해짐 결론 이번 작업의 핵심은 파일 수를 늘린 것이 아니라, 각 파일의 책임을 분명히 해서 앞으로의 확장이 예측 가능해진 것입니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/80-operations/upgrade-summary/","summary":"\u003ch1 id=\"upgrade-summary\"\u003eupgrade summary\u003c/h1\u003e\n\u003ch2 id=\"이번에-정리한-것\"\u003e이번에 정리한 것\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003econtent/ko를 기준 트리로 재정리\u003c/li\u003e\n\u003cli\u003edocs/content-structure와 docs/design-system을 기준 문서로 정비\u003c/li\u003e\n\u003cli\u003elab/hugo-content-lab을 페이지 타입, 컴포넌트, 마크업, 네비게이션, 구조, 운영으로 분리\u003c/li\u003e\n\u003cli\u003eblog를 실제 발행 글 형식으로 정리\u003c/li\u003e\n\u003cli\u003efront matter를 TOML 기준으로 통일\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"영향-범위\"\u003e영향 범위\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e폴더\u003c/th\u003e\n \u003cth\u003e영향\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003econtent/ko/docs\u003c/td\u003e\n \u003ctd\u003e기준 문서가 읽기 쉬워짐\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003econtent/ko/lab\u003c/td\u003e\n \u003ctd\u003e검증 포인트가 더 세분화됨\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003econtent/ko/blog\u003c/td\u003e\n \u003ctd\u003e운영 글과 검증 글이 분리됨\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003econtent/ko/categories, tags\u003c/td\u003e\n \u003ctd\u003etaxonomy 진입점이 명확해짐\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"결론\"\u003e결론\u003c/h2\u003e\n\u003cp\u003e이번 작업의 핵심은 파일 수를 늘린 것이 아니라, 각 파일의 책임을 분명히 해서 앞으로의 확장이 예측 가능해진 것입니다.\u003c/p\u003e","title":"업그레이드 요약"},{"content":"update log 변경 기록 형식 항목 설명 날짜 2026-06-23 대상 content/ko 전반 요약 docs와 lab을 중심으로 콘텐츠 구조와 front matter를 정리 영향 탐색, taxonomy, page-hub, shortcode 검증 흐름 개선 메모 모든 콘텐츠는 KO 기준으로 먼저 완성 TOML front matter로 통일 검증용 콘텐츠는 lab에만 배치 운영 글은 blog에서만 유지 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/80-operations/update-log/","summary":"\u003ch1 id=\"update-log\"\u003eupdate log\u003c/h1\u003e\n\u003ch2 id=\"변경-기록-형식\"\u003e변경 기록 형식\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e항목\u003c/th\u003e\n \u003cth\u003e설명\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e날짜\u003c/td\u003e\n \u003ctd\u003e2026-06-23\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e대상\u003c/td\u003e\n \u003ctd\u003econtent/ko 전반\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e요약\u003c/td\u003e\n \u003ctd\u003edocs와 lab을 중심으로 콘텐츠 구조와 front matter를 정리\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e영향\u003c/td\u003e\n \u003ctd\u003e탐색, taxonomy, page-hub, shortcode 검증 흐름 개선\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"메모\"\u003e메모\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e모든 콘텐츠는 KO 기준으로 먼저 완성\u003c/li\u003e\n\u003cli\u003eTOML front matter로 통일\u003c/li\u003e\n\u003cli\u003e검증용 콘텐츠는 lab에만 배치\u003c/li\u003e\n\u003cli\u003e운영 글은 blog에서만 유지\u003c/li\u003e\n\u003c/ul\u003e","title":"업데이트 로그"},{"content":"edge cases 테스트 목적 UI는 정상 입력에서만이 아니라 엣지 케이스에서 얼마나 버티는지로 품질이 드러납니다.\n확인 항목 아주 긴 URL이 줄바꿈을 망치지 않는가 한 줄짜리 강한 강조가 과도하지 않은가 영문과 한글이 뒤섞인 긴 단어가 넘치지 않는가 예시 This page keeps long URLs and English phrases readable even when the surrounding content is in Korean. 이 짧은 예시는 오른쪽 방향 컨테이너도 레이아웃을 깨지 않는지 확인하기 위한 메모입니다. ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/40-markup-rendering/edge-cases/","summary":"\u003ch1 id=\"edge-cases\"\u003eedge cases\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003eUI는 정상 입력에서만이 아니라 엣지 케이스에서 얼마나 버티는지로 품질이 드러납니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e아주 긴 URL이 줄바꿈을 망치지 않는가\u003c/li\u003e\n\u003cli\u003e한 줄짜리 강한 강조가 과도하지 않은가\u003c/li\u003e\n\u003cli\u003e영문과 한글이 뒤섞인 긴 단어가 넘치지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cdiv dir=\"ltr\"\u003eThis page keeps long URLs and English phrases readable even when the surrounding content is in Korean.\u003c/div\u003e\n\n\u003cdiv dir=\"rtl\"\u003e이 짧은 예시는 오른쪽 방향 컨테이너도 레이아웃을 깨지 않는지 확인하기 위한 메모입니다.\u003c/div\u003e","title":"엣지 케이스"},{"content":"embeds 테스트 목적 외부 임베드나 iframe은 레이아웃을 크게 흔들 수 있습니다. 폭, 높이, 반응형 처리, 주변 여백을 함께 봅니다.\n확인 항목 임베드가 페이지 너비를 넘지 않는가 주변 본문과 간격이 충분한가 로딩 실패 시도 페이지가 무너지지 않는가 메모 실제 외부 서비스가 없어도, 이 페이지는 임베드가 들어오는 자리의 여백과 비율을 검증하는 기준이 됩니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/30-components/embeds/","summary":"\u003ch1 id=\"embeds\"\u003eembeds\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e외부 임베드나 iframe은 레이아웃을 크게 흔들 수 있습니다. 폭, 높이, 반응형 처리, 주변 여백을 함께 봅니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e임베드가 페이지 너비를 넘지 않는가\u003c/li\u003e\n\u003cli\u003e주변 본문과 간격이 충분한가\u003c/li\u003e\n\u003cli\u003e로딩 실패 시도 페이지가 무너지지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"메모\"\u003e메모\u003c/h2\u003e\n\u003cp\u003e실제 외부 서비스가 없어도, 이 페이지는 임베드가 들어오는 자리의 여백과 비율을 검증하는 기준이 됩니다.\u003c/p\u003e","title":"임베드"},{"content":"medium post 중간 길이 글은 가장 현실적인 테스트입니다. 너무 짧지도, 너무 길지도 않기 때문에 본문 리듬과 구성 감각이 드러납니다.\n섹션 1 이 문단은 흐름을 확인하기 위한 문장입니다. 한글 설명 사이에 English term이 들어가도 리듬이 유지되어야 합니다.\n섹션 2 인용문은 문맥을 보강하지만, 본문을 대체하면 안 됩니다.\n항목 의미 구조 문서가 어디에 있어야 하는지 표현 화면에서 어떻게 보여야 하는지 마무리 읽는 사람은 적당한 정보량을 받아야 하고, 시스템은 그 정보를 안정적으로 표현해야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/70-real-world-posts/medium-post/","summary":"\u003ch1 id=\"medium-post\"\u003emedium post\u003c/h1\u003e\n\u003cp\u003e중간 길이 글은 가장 현실적인 테스트입니다. 너무 짧지도, 너무 길지도 않기 때문에 본문 리듬과 구성 감각이 드러납니다.\u003c/p\u003e\n\u003ch2 id=\"섹션-1\"\u003e섹션 1\u003c/h2\u003e\n\u003cp\u003e이 문단은 흐름을 확인하기 위한 문장입니다. 한글 설명 사이에 English term이 들어가도 리듬이 유지되어야 합니다.\u003c/p\u003e","title":"중간 글"},{"content":"비교·검증·예산 승인까지 한 번에 끝내는 근거우선 가이드 중소기업에서 B2B SaaS를 도입할 때 가장 자주 멈추는 지점은 하나로 수렴한다. “좋아 보이는데, 정말 우리 회사에 맞는가?”\n대표는 비용이 걱정되고, 운영팀은 실제로 일이 줄어드는지 궁금하고, IT 담당은 연동과 보안이 부담스럽고, 실무자는 또 하나의 시스템을 배우는 일이 피곤하다. 결국 도입 논의는 “필요해 보인다”에서 끝나고, 예산 승인 직전에서 멈춘다.\n이 글은 그 멈춤 지점을 넘기기 위한 실전형 가이드다. 감이 아니라 비교 기준, 검증 포인트, ROI 판단 방식, 리스크 체크리스트를 기준으로 B2B SaaS 도입 여부를 결정할 수 있도록 설계했다.\n1. 먼저 결론부터: B2B SaaS는 ‘좋은 툴’이 아니라 ‘좋은 구조’여야 한다 중소기업에서 SaaS 도입이 실패하는 이유는 기능이 부족해서가 아니라, 대부분 다음 네 가지 중 하나가 빠져 있기 때문이다.\n실패 원인 현장에서 보이는 모습 결과 도입 목적 불명확 “남들도 쓰니까”로 시작 사용률 저하 비용 구조 미검토 구독료만 보고 판단 숨은 비용 증가 업무 흐름 미반영 기존 프로세스와 충돌 현장 반발 측정 기준 부재 도입 후 효과를 못 셈 재계약 실패 즉, SaaS는 단순한 소프트웨어 구매가 아니다. 업무 방식을 바꾸는 구조적 선택이다.\n그래서 도입 전에는 반드시 “기능”이 아니라 아래 3가지를 먼저 봐야 한다.\n우리 업무에서 무엇이 줄어드는가 그 감소가 숫자로 계산되는가 그 숫자가 예산 승인에 충분한가 이 세 가지가 명확하면 도입은 훨씬 쉬워진다.\n2. B2B SaaS 도입 전, 반드시 확인해야 할 5가지 질문 아래 질문에 답할 수 없으면 아직 도입 시점이 아니다.\n1) 이 툴이 해결하는 문제는 정확히 무엇인가? “협업이 불편하다”는 말은 너무 넓다. 더 정확해야 한다.\n예시:\n승인 요청이 메일과 메신저에 흩어져 있다 고객 문의 응답이 담당자마다 달라진다 반복 입력 때문에 하루 1~2시간씩 낭비된다 보고서 취합에만 매주 반나절이 든다 문제가 구체적일수록 도입 기준도 선명해진다.\n2) 누가 가장 자주 쓰는가? 도입 성공률은 “누가 매일 쓰는가”에 달려 있다.\n대표만 보는 툴은 사용률이 낮다 실무자가 매일 쓰는 툴은 정착률이 높다 관리자만 좋아하는 툴은 오래 못 간다 3) 기존 방식보다 얼마나 나아지는가? 도입 후의 개선은 보통 아래 4개로 계산할 수 있다.\n시간 절감 오류 감소 처리 속도 향상 고객 응답 품질 개선 정성적 장점만 있으면 승인받기 어렵다. 숫자로 바뀌어야 한다.\n4) 숨은 비용은 무엇인가? 구독료만 보면 안 된다. 실제 비용에는 다음이 포함된다.\n초기 세팅 및 온보딩 비용 데이터 이전 비용 교육 시간 추가 사용자 비용 외부 연동 비용 내부 관리자의 운영 부담 겉으로는 저렴해 보여도, 1년 단위로 보면 다른 그림이 나올 수 있다.\n5) 실패했을 때의 피해는 어느 정도인가? 도입은 항상 성공만 있는 선택이 아니다.\n사용률이 낮아지면 비용이 낭비된다 데이터가 분산되면 관리가 더 어려워진다 업무가 오히려 복잡해질 수 있다 내부 반발이 생기면 다음 도입도 어려워진다 그래서 SaaS 도입은 ROI와 함께 리스크 비용도 같이 봐야 한다.\n3. 중소기업용 B2B SaaS ROI 계산법: 어렵게 말하지 말고 이렇게 보자 ROI는 복잡하게 계산할 필요가 없다. 실제 도입 판단에서는 아래 4가지만 잡아도 충분하다.\nROI 판단의 기본 공식 ROI = (도입으로 얻는 연간 절감 가치 - 연간 총비용) ÷ 연간 총비용\n여기서 핵심은 “연간 절감 가치”를 과장하지 않는 것이다.\n연간 절감 가치에 들어가는 항목 직원 시간 절감 반복 업무 자동화로 줄어든 인건비 성격의 비용 오류 수정 비용 감소 처리 지연으로 인한 기회손실 감소 외주/수작업 대체 효과 연간 총비용에 들어가는 항목 월 구독료 × 12 사용자 수 증가에 따른 추가 비용 초기 세팅비 교육 및 적응 비용 연동/커스터마이징 비용 내부 운영 인력 투입 시간 예시로 보는 간단 계산 가령 어떤 SaaS가 한 달 40만 원이고, 연간 총비용이 600만 원이라고 하자.\n이 툴로 인해\n매달 20시간의 반복 업무가 줄고 시간당 2만 원 수준의 내부 업무 가치를 줄 수 있으며 오류 수정과 재작업이 줄어든다면 연간 절감 가치는 대략 다음과 같이 계산할 수 있다.\n업무 절감: 20시간 × 12개월 × 2만 원 = 480만 원 오류/재작업 감소: 200만 원 연간 절감 가치: 680만 원 연간 총비용: 600만 원\n이 경우 단순 계산상 ROI는 플러스가 된다.\n하지만 여기서 끝내면 안 된다. 실제 의사결정에서는 **회수기간(Payback Period)**도 같이 봐야 한다.\n회수기간 = 초기투자비 ÷ 월간 순편익\n회수기간이 짧을수록 예산 승인 가능성이 높아진다.\n4. 비교할 때는 기능표보다 ‘업무표’를 보라 SaaS 비교를 할 때 흔히 기능 목록만 비교한다. 하지만 중소기업에서는 기능 수보다 업무 적합도가 더 중요하다.\n아래 표처럼 비교하면 실무 판단이 쉬워진다.\n비교 항목 확인 질문 중요도 핵심 기능 우리 업무의 가장 큰 병목을 직접 푸는가? 매우 높음 사용 난이도 실무자가 1주 안에 익힐 수 있는가? 매우 높음 연동성 기존 메일, 메신저, CRM, ERP와 연결되는가? 높음 보안/권한 접근 권한, 로그, 데이터 관리가 가능한가? 매우 높음 확장성 직원 수가 늘어도 감당 가능한가? 높음 비용 구조 사용자 증가 시 비용이 급격히 뛰지 않는가? 매우 높음 지원 체계 문의 대응, 교육, 자료가 충분한가? 높음 이 표의 핵심은 “기능이 많다”가 아니라 “우리 회사의 실제 흐름에 맞는다”를 확인하는 데 있다.\n5. 도입 전에 반드시 거쳐야 하는 체크리스트 아래 항목 중 3개 이상이 비어 있으면 바로 계약하기보다 파일럿 테스트가 먼저다.\n도입 전 체크리스트 해결하려는 문제가 명확하다 실제 사용자가 누구인지 정해져 있다 월간/연간 총비용을 계산했다 초기 세팅 및 교육 시간을 반영했다 기존 툴과의 연동 가능성을 확인했다 보안, 권한, 데이터 보관 방식을 확인했다 도입 후 성과 측정 지표를 정했다 1차 파일럿 운영 계획이 있다 반대 의견을 낼 수 있는 부서와도 사전 검토했다 실패 시 중단 기준도 정했다 이 체크리스트의 목적은 도입을 막는 것이 아니라, 도입 후 후회할 가능성을 낮추는 것이다.\n6. 대표, 운영총괄, IT담당, 실무리더가 각자 봐야 할 포인트 SaaS 도입은 한 사람이 결정하는 듯 보여도 실제로는 여러 시각이 동시에 필요하다.\n대표가 봐야 할 것 투자 대비 효과 회수기간 조직 전체 생산성 개선 실패 시 손실 규모 운영총괄이 봐야 할 것 업무 프로세스 변화 현장 정착 가능성 부서 간 협업 개선 반복 업무 감소 IT담당이 봐야 할 것 보안 권한 관리 데이터 이전 기존 시스템과의 연동 관리자 운영 부담 실무리더가 봐야 할 것 실제 사용 편의성 입력/조회 속도 일상 업무에 끼치는 영향 교육 난이도 이 네 관점이 한 번에 맞아야 도입 후 정착률이 높아진다.\n7. 이런 경우에는 도입을 미루는 것이 낫다 추천도가 낮은 경우도 분명히 있다.\n추천도 낮음: 사유가 명확한 경우 문제가 아직 정의되지 않았다 사용자가 누구인지 불분명하다 월 비용만 보고 결정하려 한다 기존 시스템을 정리할 생각이 없다 교육과 운영 인력을 배정할 수 없다 단기 유행만 보고 도입하려 한다 이 경우 SaaS는 해결책이 아니라 오히려 부담이 될 가능성이 높다.\n8. 예산 승인용으로 가장 설득력 있는 문장 도입 제안서를 쓰거나 내부 승인 요청을 할 때는 아래 구조가 유효하다.\n이 SaaS는 단순한 구독 서비스가 아니라, 반복 업무를 줄이고 오류를 감소시키며, 월간 운영 효율을 개선하는 비용 절감형 도구다. 도입 비용은 연간 총비용 기준으로 검토하되, 절감되는 시간과 재작업 비용을 함께 반영하면 회수 가능성을 객관적으로 판단할 수 있다.\n이 문장은 기능 자랑보다 훨씬 설득력이 높다. 이유는 대표와 실무자 모두가 “왜 사야 하는지”를 같은 언어로 이해할 수 있기 때문이다.\n9. 가장 현실적인 도입 방식: 바로 계약보다 파일럿부터 중소기업에서는 처음부터 전사 도입보다 작은 범위의 파일럿이 훨씬 안전하다.\n추천 도입 순서 핵심 문제 1개 정의 사용 부서 1개 선정 2~4주 파일럿 운영 사용률과 절감 시간 측정 비용 대비 효과 검토 전사 확장 여부 결정 이 순서를 따르면 “좋아 보였는데 안 쓰는 툴”을 줄일 수 있다.\n10. 결론: SaaS 도입의 핵심은 ‘구매’가 아니라 ‘판단’이다 B2B SaaS 도입은 최신 툴을 사는 일이 아니다. 우리 회사의 시간을 얼마나 덜 쓰게 만들고, 오류를 얼마나 줄이며, 운영을 얼마나 단순하게 바꾸는지 판단하는 일이다.\n정리하면 도입 전에는 반드시 아래 4가지를 확인해야 한다.\n문제 정의가 명확한가 비용 구조가 실제보다 작게 보이지 않는가 ROI와 회수기간이 계산되는가 실패 리스크까지 감당 가능한가 이 네 가지에 답할 수 있다면, SaaS는 비용이 아니라 성과를 만드는 투자가 된다.\n반대로 답하지 못한다면, 지금 필요한 것은 툴이 아니라 정리된 기준이다.\n도입 판단용 한 줄 요약 “좋아 보이는 SaaS”가 아니라 “우리 회사의 병목을 실제로 줄이는 SaaS”만 선택하라.\n다음 단계에서 바로 써먹는 질문 3개 이 툴이 없을 때 가장 힘든 업무는 무엇인가? 도입 후 가장 먼저 줄어들 비용은 무엇인가? 3개월 뒤 이 툴이 계속 쓰이고 있다고 판단할 기준은 무엇인가? 이 세 질문에 답할 수 있으면, 도입 검토는 이미 절반 이상 끝난 것이다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/insights/smb-b2b-saas-adoption-checklist/","summary":"비교·검증·예산 승인까지 한 번에 판단할 수 있도록 B2B SaaS 도입 전 체크포인트를 정리했다.","title":"중소기업이 B2B SaaS를 도입하기 전에 꼭 확인해야 할 것들"},{"content":"비교·검증·예산 승인까지 한 번에 끝내는 실전 가이드 중소기업에서 B2B SaaS를 도입할 때 가장 자주 멈추는 지점은 하나로 수렴합니다. “좋아 보이는데, 정말 우리 회사에 맞는가?”\n대표는 비용이 걱정되고, 운영팀은 실제로 일이 줄어드는지 궁금하고, IT담당은 보안과 연동이 불안하고, 실무자는 “배우기 어려우면 결국 안 쓰게 되는 것 아닌가”를 먼저 떠올립니다.\n그래서 SaaS 도입은 기능을 많이 나열하는 순간 실패하기 쉽습니다. 반대로, 비교 기준이 명확한 회사는 도입 속도도 빠르고 실패 확률도 낮습니다.\n이 글은 중소기업의 B2B SaaS 도입 검토를 위해 만들어진 실전형 가이드입니다. 읽고 나면 다음 세 가지가 정리됩니다.\n어떤 SaaS가 우리 회사에 맞는지 무엇을 기준으로 비교해야 하는지 예산 승인 전, 어디까지 검증해야 안전한지 1. 지금은 “기능이 좋은 SaaS”보다 “바로 쓰이는 SaaS”가 이긴다 2025년의 SaaS 시장은 단순히 기능 경쟁만으로 설명되지 않습니다. 요즘은 AI 기능이 붙어 있는지보다, 실제 업무 흐름 안에서 얼마나 빨리 성과를 내는지가 더 중요해졌습니다.\n특히 중소기업에서는 다음 조건이 동시에 맞아야 도입이 성공합니다.\n도입 목적이 분명할 것 기존 업무와 충돌하지 않을 것 직원들이 배울 수 있을 만큼 단순할 것 보안·권한·연동이 납득 가능한 수준일 것 비용 대비 효과가 설명 가능할 것 즉, SaaS 선택은 “기능 비교”가 아니라 업무 전환 설계에 가깝습니다.\n2. B2B SaaS 비교 전에 먼저 정해야 할 5가지 비교표를 만들기 전에 기준부터 고정해야 합니다. 기준이 흔들리면 후보군이 바뀔 때마다 결론도 바뀝니다.\n2-1. 왜 도입하는가 아래 중 하나가 아니라면 도입 이유가 흐려질 가능성이 큽니다.\n반복 업무를 줄이기 위해 팀 협업을 정리하기 위해 고객 응대 속도를 올리기 위해 영업/마케팅/운영 데이터를 한곳에 모으기 위해 AI를 활용해 인력 효율을 높이기 위해 2-2. 누가 실제 사용자인가 의사결정자와 실제 사용자는 다를 수 있습니다.\n대표: 비용, 리스크, 성과 운영총괄: 프로세스 통합, 예외 처리, 업무 시간 절감 IT담당: 보안, 계정 관리, 연동, 로그 실무리더: 사용성, 자동화, 교육 난이도 2-3. 무엇이 반드시 해결돼야 하는가 “있으면 좋은 기능”과 “없으면 안 되는 기능”을 구분해야 합니다.\n예:\n반드시 해결: 고객 데이터 통합 있으면 좋음: 자동 리포트 나중에 필요: 고급 커스터마이징 2-4. 예산은 어디까지 가능한가 SaaS는 월 구독료만 보면 안 됩니다.\n초기 셋업 비용 교육 비용 연동 비용 좌석 추가 비용 고급 기능 업그레이드 해지/이전 비용 2-5. 실패했을 때의 손실은 무엇인가 도입 실패의 비용은 생각보다 큽니다.\n현업 반발 데이터 분산 업무 이중 입력 기존 툴과의 충돌 결재 지연 3. B2B SaaS 비교표: 이 7개 항목은 반드시 본다 아래 표는 후보 3~5개를 비교할 때 가장 효율적인 기준입니다.\n비교 항목 확인 질문 낮은 수준의 신호 높은 수준의 신호 문제 해결력 우리 문제를 정확히 푸는가? 기능은 많지만 목적이 흐림 특정 업무를 빠르게 해결 사용성 현업이 1주 내 익숙해질 수 있는가? 교육 없이는 사용 어려움 직관적이고 학습 부담이 낮음 연동성 기존 시스템과 연결되는가? 수동 입력이 많음 CRM, 메신저, 스프레드시트, API 연동 용이 보안/권한 우리 수준의 보안 요구를 충족하는가? 권한 통제가 약함 역할별 권한, 로그, 인증 체계 명확 확장성 6개월 뒤에도 버틸 수 있는가? 작은 팀에만 적합 인원/조직/프로세스 확대 가능 총비용 숨은 비용은 없는가? 추가 요금 구조가 복잡 비용 구조가 투명 지원 품질 도입 후 문제를 해결해 주는가? 응답이 느리고 문서가 부족 가이드, 온보딩, 대응 체계가 안정적 추천 방식 후보가 3개 이상이면 각 항목을 1~5점으로 점수화하세요.\n5점: 매우 적합 4점: 대체로 적합 3점: 보통 2점: 아쉬움이 큼 1점: 도입 보류 점수가 같을 때는 사용성 \u0026gt; 보안/권한 \u0026gt; 총비용 \u0026gt; 기능 수 순으로 판단하는 것이 중소기업에는 더 현실적입니다.\n4. 실제로 많이 놓치는 숨은 비용 SaaS 도입이 생각보다 비싸지는 이유는 라이선스 외 비용 때문입니다.\n놓치기 쉬운 비용 목록 관리자 계정 운영 비용 데이터 마이그레이션 비용 기존 문서 정리 비용 업무 프로세스 재설계 비용 직원 교육 및 매뉴얼 제작 비용 추가 좌석/추가 기능 비용 연동 툴 사용료 체크 포인트 아래 질문에 답이 안 나오면 아직 비교가 부족합니다.\n1개월 뒤 실제 총비용은 얼마인가? 1년 뒤 총비용은 얼마인가? 인원이 2배가 되면 비용은 어떻게 변하는가? 해지할 때 데이터는 어떻게 받는가? 5. 중소기업이 SaaS를 고를 때 가장 중요한 것은 “도입 난이도”다 좋은 SaaS도 현장에 안착하지 못하면 실패합니다. 중소기업에서는 대기업보다 훨씬 더 도입 난이도가 중요합니다.\n도입 난이도를 판단하는 질문 설치나 초기 설정이 복잡한가? 팀원이 바로 따라할 수 있는가? 관리자 1명이 운영 가능한가? 예외 상황 처리가 쉬운가? 기존 습관을 크게 바꾸지 않아도 되는가? 도입 난이도가 낮을수록 초기 성과가 빨리 나고, 내부 반발도 줄어듭니다.\n6. 2025년 기준, B2B SaaS에서 특히 중요해진 흐름 요즘 SaaS를 고를 때는 아래 흐름을 빼놓기 어렵습니다.\n6-1. AI는 “있다/없다”보다 “어디에 붙어 있나”가 중요 AI 기능이 붙어 있어도 실제 업무 흐름과 연결되지 않으면 활용도가 떨어집니다. 중요한 것은 AI 자체가 아니라, 데이터 입력 → 판단 → 실행 흐름 안에 자연스럽게 녹아드는가입니다.\n6-2. 셀프서비스와 빠른 검증이 선호된다 구매자는 상담만 기다리기보다, 직접 확인하고 비교하고 판단하는 방식을 더 선호합니다. 그래서 SaaS도 데모 페이지, 체험판, 비교 자료, 가격 구조의 명확성이 점점 중요해지고 있습니다.\n6-3. 보안과 데이터 신뢰가 더 큰 경쟁력이 된다 특히 중소기업이라도 고객 정보, 거래 정보, 내부 문서가 들어가는 순간 보안은 선택이 아니라 조건이 됩니다. 권한 관리, 로그, 백업, 접근 통제는 반드시 봐야 합니다.\n7. SaaS 벤더를 비교할 때 쓰는 실전 스코어카드 아래 양식은 그대로 복사해서 회의 자료로 써도 됩니다.\nB2B SaaS 비교 스코어카드 항목 후보 A 후보 B 후보 C 비고 문제 해결력 사용성 보안/권한 연동성 자동화/AI 활용성 지원 품질 총비용 확장성 최종 점수 점수 해석 기준 36점 이상: 유력 후보 30~35점: 조건부 검토 29점 이하: 보류 또는 제외 점수는 절대적 진실이 아니라, 회의의 방향을 통일하는 도구입니다.\n8. 도입 전에 반드시 확인할 체크리스트 기능 우리 핵심 업무를 실제로 줄여 주는가? 현업이 매일 쓸 기능이 중심인가? 과한 커스터마이징 없이도 운영 가능한가? 운영 관리자 1~2명이 감당 가능한가? 기존 업무 흐름과 충돌하지 않는가? 예외 처리 방식이 명확한가? 보안 권한 분리가 가능한가? 로그와 기록이 남는가? 데이터 백업과 복구 기준이 있는가? 비용 월요금 외 비용이 투명한가? 인원 증가 시 비용이 급증하지 않는가? 해지 시 데이터 반출이 가능한가? 도입 후 교육 자료가 충분한가? 지원 응답 속도가 괜찮은가? 내부 정착까지의 로드맵이 있는가? 9. 이런 SaaS는 추천도가 낮다 아래 조건이 2개 이상 겹치면 재검토하는 것이 좋습니다.\n기능은 많은데 핵심 문제 해결이 약함 가격 구조가 불투명함 사용자 권한 관리가 약함 연동이 제한적임 현업이 쓰기 어렵게 복잡함 도입 사례는 많은데 우리 상황과 거리감이 큼 추천도 낮음(사유: 도입 후 정착 실패 가능성과 숨은 비용이 높음)\n10. 예산 승인용 한 줄 요약을 이렇게 만들면 통과가 쉽다 대표나 결재권자는 긴 설명보다 아래 3가지를 봅니다.\n왜 필요한가 무엇이 달라지는가 얼마를 아끼거나 벌 수 있는가 예시 문장:\n이 SaaS는 반복 업무를 줄이고, 고객 응대 속도를 높이며, 월간 운영 시간을 절감해 3개월 내 도입 효과를 확인할 수 있습니다.\n예시 문장:\n추가 인력 채용 전에 자동화로 처리량을 늘릴 수 있어, 연간 비용 대비 효율이 높은 도입안입니다.\n11. 최종 결론: SaaS는 “가장 좋은 제품”이 아니라 “가장 빨리 정착하는 제품”이 이긴다 중소기업의 SaaS 도입은 기능 스펙만으로 결정하면 실패하기 쉽습니다. 대신 아래 기준으로 보면 훨씬 안정적으로 고를 수 있습니다.\n문제 해결력이 분명한가 현업이 실제로 쓸 수 있는가 보안과 권한이 충분한가 총비용이 투명한가 기존 업무에 빠르게 안착하는가 결국 가장 좋은 SaaS는 화려한 제품이 아니라, 업무를 바꾸고도 현장에서 살아남는 제품입니다.\n비교표를 먼저 만들고, 체크리스트로 걸러내고, 마지막에 ROI로 판단하세요. 그 순서만 지켜도 도입 실패 확률은 크게 줄어듭니다.\n바로 적용할 실행 순서 도입 목적 1개를 문장으로 정리한다. 후보군을 3~5개로 좁힌다. 비교 스코어카드로 점수화한다. 숨은 비용과 도입 난이도를 따로 계산한다. 현업 1명, 운영 1명, 결정권자 1명이 함께 최종 판단한다. 이 5단계면, SaaS 도입은 감이 아니라 기준으로 결정할 수 있습니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/insights/b2b-saas-for-smes-checklist/","summary":"중소기업이 B2B SaaS를 도입할 때 필요한 비교 기준, 예산 승인 전 검증 포인트, 숨은 비용, 도입 난이도와 체크리스트를 실전 관점에서 정리했다.","title":"중소기업이 B2B SaaS를 도입하기 전에 꼭 확인해야 할 것들"},{"content":"short post 이 글은 짧지만 구조가 보이도록 작성했습니다. 실제 서비스에서는 짧은 공지나 소개 글이 이런 형식을 자주 씁니다.\n확인 포인트 첫 문단만 읽어도 주제가 보이는가 불필요하게 장황하지 않은가 짧아도 결론이 있는가 중간 길이 글 보기 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/70-real-world-posts/short-post/","summary":"\u003ch1 id=\"short-post\"\u003eshort post\u003c/h1\u003e\n\u003cp\u003e이 글은 짧지만 구조가 보이도록 작성했습니다. 실제 서비스에서는 짧은 공지나 소개 글이 이런 형식을 자주 씁니다.\u003c/p\u003e\n\u003ch2 id=\"확인-포인트\"\u003e확인 포인트\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e첫 문단만 읽어도 주제가 보이는가\u003c/li\u003e\n\u003cli\u003e불필요하게 장황하지 않은가\u003c/li\u003e\n\u003cli\u003e짧아도 결론이 있는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-related cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"related\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/70-real-world-posts/medium-post/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e중간 길이 글 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e","title":"짧은 글"},{"content":"cards 테스트 목적 카드는 내용 묶음의 가장 흔한 표현입니다. 제목, 설명, 메타, 링크가 같은 규칙으로 보이는지 확인합니다.\n확인 항목 제목 길이가 달라도 높이감이 유지되는가 설명 유무에 따라 카드가 부자연스럽게 바뀌지 않는가 링크가 있는 카드와 없는 카드가 시각적으로 구분되는가 기대 결과 카드는 여러 개가 나열되어도 서로 싸우지 않고, 정보 묶음으로 읽혀야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/30-components/cards/","summary":"\u003ch1 id=\"cards\"\u003ecards\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e카드는 내용 묶음의 가장 흔한 표현입니다. 제목, 설명, 메타, 링크가 같은 규칙으로 보이는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e제목 길이가 달라도 높이감이 유지되는가\u003c/li\u003e\n\u003cli\u003e설명 유무에 따라 카드가 부자연스럽게 바뀌지 않는가\u003c/li\u003e\n\u003cli\u003e링크가 있는 카드와 없는 카드가 시각적으로 구분되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e카드는 여러 개가 나열되어도 서로 싸우지 않고, 정보 묶음으로 읽혀야 합니다.\u003c/p\u003e","title":"카드"},{"content":"categories 테스트 목적 카테고리는 넓은 분류입니다. term이 늘어나도 목록의 질서가 유지되는지 확인합니다.\n확인 항목 목록 페이지가 비어도 깨지지 않는가 term 페이지로 이동이 자연스러운가 blog 글과 taxonomy 연결이 정상인가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/60-content-architecture/categories/","summary":"\u003ch1 id=\"categories\"\u003ecategories\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e카테고리는 넓은 분류입니다. term이 늘어나도 목록의 질서가 유지되는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e목록 페이지가 비어도 깨지지 않는가\u003c/li\u003e\n\u003cli\u003eterm 페이지로 이동이 자연스러운가\u003c/li\u003e\n\u003cli\u003eblog 글과 taxonomy 연결이 정상인가\u003c/li\u003e\n\u003c/ul\u003e","title":"카테고리"},{"content":"typography language 테스트 목적 한글 본문, 영어 약어, 숫자, 코드가 한 문단 안에 섞일 때도 읽기 리듬이 유지되는지 확인합니다.\n확인 항목 제목의 줄바꿈이 과도하지 않은가 영문 약어가 본문보다 튀지 않는가 숫자와 단위가 문단 흐름을 깨지 않는가 코드와 본문이 같은 톤으로 섞이지 않는가 예시 Hugo, frontend, UI, CSS, 2026 같은 조합이 자연스럽게 읽혀야 합니다. 같은 문장에서 한글과 영문이 섞여도 줄간격과 시각적 무게가 안정적이어야 합니다.\n실패 기준 영문이 과하게 굵거나 크거나 어색하게 떠 보이는 경우 긴 제목이 불필요하게 여러 줄로 찢어지는 경우 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/10-foundation/typography-language/","summary":"\u003ch1 id=\"typography-language\"\u003etypography language\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e한글 본문, 영어 약어, 숫자, 코드가 한 문단 안에 섞일 때도 읽기 리듬이 유지되는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e제목의 줄바꿈이 과도하지 않은가\u003c/li\u003e\n\u003cli\u003e영문 약어가 본문보다 튀지 않는가\u003c/li\u003e\n\u003cli\u003e숫자와 단위가 문단 흐름을 깨지 않는가\u003c/li\u003e\n\u003cli\u003e코드와 본문이 같은 톤으로 섞이지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cp\u003eHugo, frontend, UI, CSS, 2026 같은 조합이 자연스럽게 읽혀야 합니다. 같은 문장에서 한글과 영문이 섞여도 줄간격과 시각적 무게가 안정적이어야 합니다.\u003c/p\u003e","title":"타이포그래피와 언어"},{"content":"tags 테스트 목적 태그는 세밀한 연결입니다. 너무 많아지면 정보가 흐려지므로, term 페이지와 목록의 균형을 확인해야 합니다.\n확인 항목 짧은 태그가 읽기 좋게 배치되는가 태그 목록이 과밀해도 정렬이 유지되는가 연결된 글 수가 늘어나도 UI가 무너지지 않는가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/60-content-architecture/tags/","summary":"\u003ch1 id=\"tags\"\u003etags\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e태그는 세밀한 연결입니다. 너무 많아지면 정보가 흐려지므로, term 페이지와 목록의 균형을 확인해야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e짧은 태그가 읽기 좋게 배치되는가\u003c/li\u003e\n\u003cli\u003e태그 목록이 과밀해도 정렬이 유지되는가\u003c/li\u003e\n\u003cli\u003e연결된 글 수가 늘어나도 UI가 무너지지 않는가\u003c/li\u003e\n\u003c/ul\u003e","title":"태그"},{"content":"theme shortcodes 테스트 목적 테마 shortcode는 디자인 시스템과 연결되어야 합니다. 토큰, spacing, 색상, 레이아웃 가정을 별도로 유지하지 않는지 확인합니다.\n예시 다음 검증 페이지 보기 확인 항목 shortcode가 하드코딩 값에 의존하지 않는가 중앙 설정을 바꾸면 결과가 일관되게 바뀌는가 본문과 shortcode 간 간격이 너무 넓거나 좁지 않은가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/40-markup-rendering/theme-shortcodes/","summary":"\u003ch1 id=\"theme-shortcodes\"\u003etheme shortcodes\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e테마 shortcode는 디자인 시스템과 연결되어야 합니다. 토큰, spacing, 색상, 레이아웃 가정을 별도로 유지하지 않는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-related cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"related\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" 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=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e다음 검증 페이지 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e","title":"테마 shortcode"},{"content":"pagination 테스트 목적 목록이 길어질수록 페이징의 품질이 중요해집니다. 현재 위치, 이전/다음 관계, 버튼 크기가 안정적이어야 합니다.\n확인 항목 현재 페이지가 충분히 강조되는가 이전/다음 이동이 직관적인가 숫자 범위가 너무 넓거나 좁지 않은가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/50-layout-navigation/pagination/","summary":"\u003ch1 id=\"pagination\"\u003epagination\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e목록이 길어질수록 페이징의 품질이 중요해집니다. 현재 위치, 이전/다음 관계, 버튼 크기가 안정적이어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e현재 페이지가 충분히 강조되는가\u003c/li\u003e\n\u003cli\u003e이전/다음 이동이 직관적인가\u003c/li\u003e\n\u003cli\u003e숫자 범위가 너무 넓거나 좁지 않은가\u003c/li\u003e\n\u003c/ul\u003e","title":"페이지네이션"},{"content":"flat pages 테스트 목적 평면 페이지는 구조가 얕아서 단순해 보이지만, 실제로는 경로와 메타데이터를 가장 깔끔하게 보여 줍니다.\n확인 항목 상위 섹션 없이도 페이지가 독립적으로 보이는가 breadcrumb가 과하지 않은가 본문과 메타가 균형을 이루는가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/60-content-architecture/flat-pages/","summary":"\u003ch1 id=\"flat-pages\"\u003eflat pages\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e평면 페이지는 구조가 얕아서 단순해 보이지만, 실제로는 경로와 메타데이터를 가장 깔끔하게 보여 줍니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e상위 섹션 없이도 페이지가 독립적으로 보이는가\u003c/li\u003e\n\u003cli\u003ebreadcrumb가 과하지 않은가\u003c/li\u003e\n\u003cli\u003e본문과 메타가 균형을 이루는가\u003c/li\u003e\n\u003c/ul\u003e","title":"평면 페이지"},{"content":"forms 테스트 목적 폼은 상태가 많은 UI입니다. 라벨, 힌트, 오류, 도움말이 한 덩어리로 읽혀야 하고, 시각적으로도 분리되어야 합니다.\nraw HTML 예시 이름 입력 도움말은 너무 길지 않게 유지합니다. 확인 항목 라벨이 입력과 제대로 연결되는가 도움말이 입력보다 앞서거나 뒤섞이지 않는가 오류 상태가 색상만으로 표현되지 않는가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/30-components/forms/","summary":"\u003ch1 id=\"forms\"\u003eforms\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e폼은 상태가 많은 UI입니다. 라벨, 힌트, 오류, 도움말이 한 덩어리로 읽혀야 하고, 시각적으로도 분리되어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"raw-html-예시\"\u003eraw HTML 예시\u003c/h2\u003e\n\n\u003cform style=\"display:grid;gap:0.75rem;max-width:32rem;\"\u003e\n \u003clabel\u003e이름\n \u003cinput type=\"text\" style=\"display:block;width:100%;padding:0.6rem;border:1px solid currentColor;border-radius:0.5rem;\" /\u003e\n \u003c/label\u003e\n \u003csmall\u003e입력 도움말은 너무 길지 않게 유지합니다.\u003c/small\u003e\n\u003c/form\u003e\n\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e라벨이 입력과 제대로 연결되는가\u003c/li\u003e\n\u003cli\u003e도움말이 입력보다 앞서거나 뒤섞이지 않는가\u003c/li\u003e\n\u003cli\u003e오류 상태가 색상만으로 표현되지 않는가\u003c/li\u003e\n\u003c/ul\u003e","title":"폼"},{"content":"tables 테스트 목적 표는 정보 비교에 강하지만, 화면이 좁아지면 가장 쉽게 깨집니다. 표 자체보다 가독성과 줄바꿈을 함께 확인합니다.\n예시 항목 설명 확인 row 1 짧은 값 문제가 없는가 row 2 긴 설명이 들어가는 값 줄바꿈이 자연스러운가 row 3 taxonomy / navigation 폭이 과하지 않은가 확인 항목 헤더가 분명한가 셀 간 간격이 충분한가 모바일에서 가로 스크롤이 필요하면 안내가 있는가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/30-components/tables/","summary":"\u003ch1 id=\"tables\"\u003etables\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e표는 정보 비교에 강하지만, 화면이 좁아지면 가장 쉽게 깨집니다. 표 자체보다 \u003cstrong\u003e가독성과 줄바꿈\u003c/strong\u003e을 함께 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e항목\u003c/th\u003e\n \u003cth\u003e설명\u003c/th\u003e\n \u003cth\u003e확인\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003erow 1\u003c/td\u003e\n \u003ctd\u003e짧은 값\u003c/td\u003e\n \u003ctd\u003e문제가 없는가\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erow 2\u003c/td\u003e\n \u003ctd\u003e긴 설명이 들어가는 값\u003c/td\u003e\n \u003ctd\u003e줄바꿈이 자연스러운가\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erow 3\u003c/td\u003e\n \u003ctd\u003etaxonomy / navigation\u003c/td\u003e\n \u003ctd\u003e폭이 과하지 않은가\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e헤더가 분명한가\u003c/li\u003e\n\u003cli\u003e셀 간 간격이 충분한가\u003c/li\u003e\n\u003cli\u003e모바일에서 가로 스크롤이 필요하면 안내가 있는가\u003c/li\u003e\n\u003c/ul\u003e","title":"표"},{"content":"footer 테스트 목적 푸터는 사이트 끝이 아니라 보조 탐색의 출발점입니다. 링크가 너무 많아도 안 되고, 너무 적어도 정보가 사라집니다.\n확인 항목 정책 링크와 보조 링크가 분리되는가 복잡한 정보가 한 화면에 과밀하지 않은가 언어별 푸터 문맥이 일관적인가 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/50-layout-navigation/footer/","summary":"\u003ch1 id=\"footer\"\u003efooter\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e푸터는 사이트 끝이 아니라 보조 탐색의 출발점입니다. 링크가 너무 많아도 안 되고, 너무 적어도 정보가 사라집니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e정책 링크와 보조 링크가 분리되는가\u003c/li\u003e\n\u003cli\u003e복잡한 정보가 한 화면에 과밀하지 않은가\u003c/li\u003e\n\u003cli\u003e언어별 푸터 문맥이 일관적인가\u003c/li\u003e\n\u003c/ul\u003e","title":"푸터"},{"content":"header 테스트 목적 헤더는 사이트의 첫 인상입니다. 브랜드, 주요 메뉴, 언어 전환, 검색 진입점이 서로 싸우지 않아야 합니다.\n확인 항목 메뉴가 너무 많아 첫 화면을 침범하지 않는가 모바일에서 메뉴가 자연스럽게 접히는가 현재 섹션이 적절히 강조되는가 기대 결과 헤더는 존재감은 분명하되, 콘텐츠보다 앞서 나가지 않아야 합니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/50-layout-navigation/header/","summary":"\u003ch1 id=\"header\"\u003eheader\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e헤더는 사이트의 첫 인상입니다. 브랜드, 주요 메뉴, 언어 전환, 검색 진입점이 서로 싸우지 않아야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e메뉴가 너무 많아 첫 화면을 침범하지 않는가\u003c/li\u003e\n\u003cli\u003e모바일에서 메뉴가 자연스럽게 접히는가\u003c/li\u003e\n\u003cli\u003e현재 섹션이 적절히 강조되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e헤더는 존재감은 분명하되, 콘텐츠보다 앞서 나가지 않아야 합니다.\u003c/p\u003e","title":"헤더"},{"content":"mixed composition 테스트 목적 실제 글은 한 가지 마크업만 쓰지 않습니다. 문단과 표와 이미지와 shortcode가 섞여도 의미 계층이 유지되어야 합니다.\n예시 먼저 개요를 읽습니다. 표로 비교합니다. shortcode로 보조 정보를 확인합니다. 이미지로 레이아웃을 검증합니다. 혼합 구성여러 마크업이 섞여도 본문 흐름이 유지되어야 합니다. 실패 기준 shortcode가 문단을 강제로 끊는 경우 표 뒤에 나오는 본문이 너무 붙거나 너무 멀어지는 경우 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/40-markup-rendering/mixed-composition/","summary":"\u003ch1 id=\"mixed-composition\"\u003emixed composition\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e실제 글은 한 가지 마크업만 쓰지 않습니다. 문단과 표와 이미지와 shortcode가 섞여도 의미 계층이 유지되어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003e먼저 개요를 읽습니다.\u003c/li\u003e\n\u003cli\u003e표로 비교합니다.\u003c/li\u003e\n\u003cli\u003eshortcode로 보조 정보를 확인합니다.\u003c/li\u003e\n\u003cli\u003e이미지로 레이아웃을 검증합니다.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cfigure class=\"figure-frame \u0026amp;lt;nil\u0026amp;gt;\"\u003e\u003ca href=\"\u003cnil\u003e\" target=\"\u0026lt;nil\u0026gt;\" rel=\"\u0026lt;nil\u0026gt;\"\u003e\u003cimg src=\"/images/theme-upgrade-lab/pattern.svg\" alt=\"혼합 구성 패턴\" width=\"\u0026lt;nil\u0026gt;\" height=\"\u0026lt;nil\u0026gt;\" loading=\"\u0026lt;nil\u0026gt;\"\u003e\u003c/a\u003e\u003cfigcaption\u003e\u003ch4\u003e혼합 구성\u003c/h4\u003e\u003cp\u003e여러 마크업이 섞여도 본문 흐름이 유지되어야 합니다. \u003ca href=\"\u003cnil\u003e\"\u003e\u003c!-- raw HTML omitted --\u003e\n\u003c/a\u003e\u003c/p\u003e","title":"혼합 구성"},{"content":"home 테스트 목적 홈은 가장 먼저 보이는 페이지이자, 가장 적게 설명해야 하는 페이지입니다. 진입점은 분명해야 하지만 첫 화면이 너무 무거우면 안 됩니다.\n확인 항목 상단 네비게이션이 먼저 보이는가 핵심 섹션으로 바로 이동할 수 있는가 요약 정보가 첫 화면을 과하게 차지하지 않는가 카드 수가 많아져도 질서가 유지되는가 기대 결과 홈은 목록 페이지가 아니라 항해 지도처럼 보여야 합니다. 가장 중요한 영역을 먼저, 나머지는 자연스럽게 아래에 배치합니다.\n실패 기준 홈이 단순 목록처럼 보이거나, 반대로 랜딩 페이지처럼 과도하게 장식되면 균형이 깨진 것입니다.\n","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/20-page-types/home/","summary":"\u003ch1 id=\"home\"\u003ehome\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e홈은 가장 먼저 보이는 페이지이자, 가장 적게 설명해야 하는 페이지입니다. 진입점은 분명해야 하지만 첫 화면이 너무 무거우면 안 됩니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e상단 네비게이션이 먼저 보이는가\u003c/li\u003e\n\u003cli\u003e핵심 섹션으로 바로 이동할 수 있는가\u003c/li\u003e\n\u003cli\u003e요약 정보가 첫 화면을 과하게 차지하지 않는가\u003c/li\u003e\n\u003cli\u003e카드 수가 많아져도 질서가 유지되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e홈은 목록 페이지가 아니라 \u003cstrong\u003e항해 지도\u003c/strong\u003e처럼 보여야 합니다. 가장 중요한 영역을 먼저, 나머지는 자연스럽게 아래에 배치합니다.\u003c/p\u003e","title":"홈"},{"content":"markdown extended 테스트 목적 확장 마크다운 요소가 글의 의미를 해치지 않고 잘 붙는지 확인합니다.\n확인 항목 표가 좁은 화면에서 무너지지 않는가 긴 링크와 긴 단어가 줄바꿈 정책을 깨지 않는가 강조와 취소선이 과도하지 않은가 예시 항목 설명 강조 중요한 문장에만 사용 취소선 변경 전후를 보여줄 때만 사용 긴 링크 본문 폭을 확인하는 엣지 케이스 ","permalink":"https://hugo-test-pro-10.pages.dev/ko/blog/lab/40-markup-rendering/markdown-extended/","summary":"\u003ch1 id=\"markdown-extended\"\u003emarkdown extended\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e확장 마크다운 요소가 글의 의미를 해치지 않고 잘 붙는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e표가 좁은 화면에서 무너지지 않는가\u003c/li\u003e\n\u003cli\u003e긴 링크와 긴 단어가 줄바꿈 정책을 깨지 않는가\u003c/li\u003e\n\u003cli\u003e강조와 취소선이 과도하지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e항목\u003c/th\u003e\n \u003cth\u003e설명\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e강조\u003c/td\u003e\n \u003ctd\u003e중요한 문장에만 사용\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e취소선\u003c/td\u003e\n \u003ctd\u003e변경 전후를 보여줄 때만 사용\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e긴 링크\u003c/td\u003e\n \u003ctd\u003e본문 폭을 확인하는 엣지 케이스\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e","title":"확장 마크다운"}]