# Kajabi Sage 디자인 시스템

## Kajabi Sage 디자인 시스템 인터페이스 미리보기

가상의 강의를 선택하고 링크나 메시지를 확인한 다음, 화면에 표시된 내용을 그대로 복사하세요. 수동 복사도 가능합니다.

## Kajabi Sage 디자인 시스템 디자인 참고 자료

Sage 공개 구성 요소 및 타이포그래피 문서와 현재 문서에서 실제로 불러오는 기본/라이트 Pine 스타일시트입니다. 게시된 Sage 타이포그래피 표와 최신 Pine 별칭은 서로 별개의 참고 자료이므로, 둘이 동일하다고 간주해서는 안 됩니다.

### 현재 Pine 색상 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --pine-color-primary | var(--pine-color-grey-900) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-primary-hover | var(--pine-color-grey-950) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-text | var(--pine-color-grey-900) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-text-primary | var(--pine-color-white) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-background-app | var(--pine-color-grey-100) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-background-container | var(--pine-color-white) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-border | var(--pine-color-grey-300) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
### 현재 Pine 기본 색상

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --pine-color-grey-100 | #f8f8f8 | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-grey-300 | #d2d1d1 | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-grey-900 | #343332 | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-grey-950 | #1a1a19 | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-color-white | #ffffff | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
### 현재 Pine 치수 및 모서리 반경

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --pine-dimension-xs | var(--pine-dimension-100) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-dimension-sm | var(--pine-dimension-200) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-dimension-md | var(--pine-dimension-300) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-dimension-lg | var(--pine-dimension-400) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-dimension-100 | 8px | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-dimension-200 | 16px | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-dimension-300 | 24px | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-dimension-400 | 32px | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-border-radius-md | var(--pine-dimension-125) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-dimension-125 | 10px | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-border-radius-full | 9999px | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
### 현재 Pine 타이포그래피 항목

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --pine-font-family-body | var(--pine-font-family-inter) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-font-family-inter | "Inter", system-ui, "Segoe UI", "Roboto", "Ubuntu", sans-serif | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-font-size-body-md | var(--pine-font-size-100) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-font-size-100 | 14px | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-font-size-body-lg | var(--pine-font-size-116) | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
| --pine-font-size-116 | 16px | Sage 문서에서 불러오는 현재 기본/라이트 Pine 스타일시트 스냅샷입니다. |
### 게시된 Sage 타이포그래피 클래스

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| t-sage-heading-1 | 40px / 48px; 700; -0.6px tracking | 게시된 문서 타이포그래피 사양입니다. |
| t-sage-heading-2 | 32px / 40px; 700; -0.5px | 게시된 제목 사양입니다. |
| t-sage-heading-3 | 28px / 32px; 700; -0.15px | 게시된 제목 사양입니다. |
| t-sage-heading-4 | 24px / 32px; 600; -0.15px | 게시된 제목 사양입니다. |
| t-sage-body | 16px / 24px; 400 | 게시된 본문 사양입니다. |
| t-sage-body-small | 14px / 20px; 400 | 게시된 보조 타이포그래피 사양입니다. |
| t-sage-body-xsmall | 12px / 16px; 400 | 게시된 가장 작은 본문 사양입니다. |
| Body weight suffixes | -med 500 / -semi 600 / -bold 700 | 본문 클래스 계열에 추가합니다. |
### 복사 구성 요소 속성

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| SageCopyText.value | Required string | 표시하고 복사할 텍스트입니다. |
| semibold | Boolean, default false | 블록 전체를 강조합니다. |
| SageCopyButton.fill_container | Boolean, default false | 복사 버튼을 컨테이너 전체 너비로 표시합니다. |
| SageCopyButton.borderless | Boolean example | 강조를 낮춘 복사 동작입니다. |
| SageCopyTextCard.truncate_contents | true enables truncation | 전체 텍스트를 계속 사용할 수 있는 경우에만 긴 콘텐츠를 제한합니다. |
## Kajabi Sage 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## Kajabi Sage 디자인 시스템: 크리에이터 작업 흐름을 위한 공유 패널

### 링크 옆에서도 강의를 한눈에 알아볼 수 있습니다

> Sage는 Kajabi의 크리에이터 및 지식 커머스 인터페이스에 사용됩니다. 강의 공유 패널은 제품 정보를 긴 기술 값 및 페이지와 별도로 실패할 수 있는 동작과 결합하는 작은 구성이므로 유용합니다. 이 예시에는 독창적인 표지 아트가 적용된 가상의 강의 두 개와 학습자용 URL, 이메일로 바로 보낼 수 있는 메시지가 포함되어 있습니다.

강의를 전환하면 두 출력 항목이 모두 바뀝니다. 출력 형식을 바꾸면 복사할 텍스트가 변경되고, 선택한 강의는 계속 표시됩니다. 어떤 내용도 게시되거나 전송되지 않습니다. 사용자가 클립보드 버튼을 누를 때만 선택적으로 부수 효과가 발생합니다.

지원 사양 읽기

## Kajabi Sage 디자인 시스템과 Pine은 명확한 의존성 경계를 둡니다

### CSS 색상 함수가 항상 16진수 값을 조회하는 것은 아닙니다

현재 Sage Assets README에 따르면 Pine 토큰은 사용하는 애플리케이션에서 불러오며 sage-assets에는 포함되지 않습니다. 또한 의미가 있는 CSS 변수를 반환하는 sage-color()와 Sass 색상 연산을 위해 기존 값을 읽는 sage-color-hex()를 구분합니다. 현재 var(...)를 반환하는 색상 함수의 결과는 컴파일 시점의 16진수 계산에 안전하게 사용할 수 없습니다.

실시간 문서는 @kajabi-ui/styles/dist/pine/pine.css를 불러옵니다. 이 스타일시트의 기본/라이트 root에서는 기본 역할이 grey-900을 통해 지정되지만, 이전 README의 16진수 예시는 파란색입니다. 이 가이드에서는 두 사실을 구분합니다. 전자는 현재 사용되는 의미 기반 역할이고, 후자는 기존 16진수 조회 방식을 보여주는 예시입니다. 새 구현에서는 근거 없이 하나를 다른 것으로 대체해서는 안 됩니다.

지원 사양 읽기

## Kajabi Sage 디자인 시스템은 애플리케이션에서 절제하고 콘텐츠에서 표현력을 발휘합니다

### 동작의 의미에 맞춰 액션 색상을 사용하세요

Sage 색상 가이드라인은 인터페이스에 임의의 개성을 더하기보다 상호작용, 선택 상태, 피드백을 나타내는 데 색상을 사용합니다. 이 예시에서는 애플리케이션 프레임을 중립적으로 유지하고, 강의 아트워크로 표현력을 더합니다. 덕분에 모든 패널을 각기 다른 상태 색으로 칠하지 않고도 복사 동작을 쉽게 찾을 수 있습니다.

클립보드에 성공적으로 기록된 경우에만 성공 상태를 표시합니다. 클립보드 접근이 차단되면 초록색 성공 메시지가 아니라 직접 복사할 수 있는 상태를 보여줘야 합니다. 선택한 강의와 출력 형식의 선택 상태는 마지막 복사 결과와 별개로 유지됩니다.

지원 사양 읽기

## Kajabi Sage 디자인 시스템: 게시된 Sage 사양과 현재 토큰 별칭

### 타이포그래피 역할과 HTML 의미는 서로 독립적입니다

게시된 Sage 표에는 정확한 크기, 행간, 굵기 조합을 정의하는 t-sage-heading 및 t-sage-body 클래스가 있습니다. 문서화된 사양을 재현할 때 이 표를 참고할 수 있습니다. 최신 Pine 스타일시트에도 14픽셀 미디엄 본문 역할을 비롯한 본문 별칭이 있으므로, 현재 통합에서는 구성 요소가 어느 계층을 사용하는지 확인해야 합니다.

요소에 시각적 제목 클래스를 적용해도 의미상 제목 단계는 달라지지 않습니다. 강의명은 제목, URL은 폼 콘텐츠, 복사 동작은 버튼으로 유지됩니다. 미리보기에는 시스템 글꼴 대체를 사용해 게시된 Sage 32/40 제목 및 16/24 본문 스타일을 적용했습니다. 글꼴 파일이 번들에 포함된 것처럼 표현하지 않습니다.

지원 사양 읽기

## Kajabi Sage 디자인 시스템 복사 텍스트, 복사 버튼 및 복사 텍스트 카드

### 콘텐츠 형태에 맞는 구조를 선택하세요

문서는 인라인 복사 텍스트, 블록 카드, 복사 버튼을 구분합니다. 라벨과 여러 줄의 내용을 함께 유지해야 할 때 블록이 유용합니다. 버튼은 컨테이너 너비를 채우거나 테두리 없는 형태로 표시할 수 있으며, 구성 요소 수준에서 세미볼드 강조를 적용할 수 있습니다.

이 예시에서는 현재 페이로드를 표시할 읽기 전용 textarea를 사용합니다. 이는 의도적인 네이티브 구현으로, 클립보드에 접근할 수 없을 때에도 텍스트를 선택할 수 있고 여러 줄의 이메일 메시지를 읽기 쉽게 보여줍니다. 이 필드의 값은 브라우저에 전달되는 정확한 페이로드이며, 화면에 보이지 않는 추가 라벨이나 이전 강의 식별자를 포함하지 않습니다.

- 짧은 단일 값이 다른 문장과 함께 표시될 때는 인라인 복사 텍스트가 적합합니다.

- 복사 카드는 관련된 여러 줄을 묶어 내용을 살펴볼 수 있도록 충분한 너비를 제공합니다.

- 값이 길거나 여러 줄인 경우 별도의 버튼으로 동작을 명확히 표시할 수 있습니다.

지원 사양 읽기

## Kajabi Sage 디자인 시스템: 긴 링크가 패널을 벗어나지 않도록 합니다

### 두 열로 구성하고, 좁은 화면에서는 세로로 배치합니다

데스크톱 화면에서는 강좌 선택 레일이 현재 강좌 및 공유 컨트롤 옆에 배치됩니다. 작은 화면에서는 레일이 가로로 나란히 놓인 카드 두 개로 바뀌고, 그 아래에 공유 패널이 표시됩니다. 값 필드는 컨테이너 안에서 줄바꿈되며 버튼은 그 아래에 계속 표시됩니다.

공식 Copy Text 지침은 최대 너비를 로컬에서 지정하고 카드 콘텐츠를 말줄임 처리하는 방식을 안내합니다. 이 예시에서는 URL의 중요한 부분이 숨겨지지 않도록 줄바꿈과 수동 선택을 사용합니다. 패딩에는 검증된 Pine의 8/16/24/32 간격 단계를 적용했으며, 2열 비율과 반응형 중단점은 애플리케이션에서 선택한 값입니다.

지원 사양 읽기

## Kajabi Sage 디자인 시스템: 완전한 공개 예시와 정확한 네이티브 적용 경로

### 사용자가 동작을 실행한 후에만 복사

독립 실행형 설정은 공개 Pine 토큰을 불러오고 자체 HTML 및 클립보드 핸들러를 제공합니다. Sage 패키지 계정 없이 실행할 수 있습니다. 네이티브 Rails 예시는 기존 Sage 애플리케이션을 위한 구성 방식으로 별도로 표시되어 있으며, 헬퍼를 붙여넣기만 하면 시스템이 설치된다고 주장하지 않습니다.

Sage Assets는 게시 레지스트리로 GitHub Packages를 지정합니다. 이 경로를 사용하는 팀은 승인된 레지스트리 접근 방식을 이용하고 의미 색상 변수를 사용하기 전에 외부 Pine 레이어를 불러와야 합니다. 문서에는 폰트 도메인 제한도 명시되어 있으므로, 브랜드 폰트가 정상적으로 로드되었다고 암묵적으로 가정하기보다 시스템 폰트 대체를 사용하는 것이 정확합니다.

1. localhost 또는 HTTPS에서 독립 실행형 예시를 열고 강좌와 페이로드 형식을 선택합니다.

2. 복사를 실행합니다. 클립보드 프라미스가 해결된 후에만 성공을 알리고, 그렇지 않으면 텍스트를 선택해 수동으로 복사하도록 안내합니다.

3. 강좌나 형식을 변경하면 이전 복사 상태를 지워 오래된 페이로드를 가리키지 않도록 합니다.

지원 사양 읽기

## Kajabi Sage 디자인 시스템 컴포넌트 예시

### 완전한 독립형 인터랙티브 예제

문서 전체를 index.html로 저장한 다음 브라우저에서 여세요. Sage Copy Text의 구조, 공개된 타이포그래피 사양, 현재 기본/라이트 Pine 값을 네이티브 HTML 방식으로 독립적으로 해석했습니다. Sage 런타임이나 독점 글꼴 번들은 사용하지 않습니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Course sharing — Sage interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f8f8f8;color:#343332;font:16px/1.5 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:32px}.top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;border-bottom:1px solid #d2d1d1;padding-bottom:16px;gap:16px}h1{font-size:32px;line-height:40px;letter-spacing:-.5px;margin:24px 0 8px}h2{font-size:24px;line-height:32px;margin:0 0 8px}.intro{margin:0 0 24px;color:#6c6a69}.grid{display:grid;grid-template-columns:240px 1fr;gap:24px}.courses{display:grid;gap:16px;align-content:start}.course{background:white;border:1px solid #d2d1d1;border-radius:10px;padding:12px;text-align:left;color:inherit;font:inherit;cursor:pointer}.course[aria-pressed=true]{border:2px solid #343332;padding:11px}.course small{display:block;font-size:12px;color:#6c6a69}.art{position:relative;overflow:hidden;border-radius:6px;display:grid;place-content:center;letter-spacing:.08em;font-size:11px;text-align:center}.art b{z-index:1;position:relative;line-height:1.2}.art.studio{background:#f2b9a5;color:#682923}.art.studio:before{content:'';position:absolute;border-radius:50%;width:150px;height:150px;background:#c26e4f;right:-40px;top:25px}.art.studio:after{content:'';position:absolute;width:55px;height:120px;background:#f9e7bc;transform:rotate(25deg);left:20px;top:-20px}.art.journal{background:#d1ddaa;color:#203a30}.art.journal:before{content:'';position:absolute;width:100px;height:160px;border:22px solid #68865b;border-radius:60% 0;transform:rotate(20deg);right:5px;top:-5px}.art.journal:after{content:'';position:absolute;width:90px;height:70px;border:18px solid #b29f59;border-radius:50%;left:-30px;bottom:-20px}.course .art{height:115px;margin-bottom:12px}.panel{background:white;padding:24px;border:1px solid #d2d1d1;border-radius:10px}.hero{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;margin-bottom:24px}.hero .art{height:140px}.hero p{font-size:14px;color:#6c6a69;margin:0}.format{display:flex;gap:16px;border-bottom:1px solid #d2d1d1;margin-bottom:24px}.format button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 0;font:inherit;color:#6c6a69;cursor:pointer}.format button[aria-pressed=true]{border-bottom-color:#343332;color:#343332}label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}textarea{width:100%;resize:vertical;min-height:135px;border:1px solid #d2d1d1;border-radius:10px;padding:16px;font:14px/1.5 system-ui;background:#fcfcfc;color:#343332}.copy{font:600 14px/20px system-ui;border:0;border-radius:9999px;background:#343332;color:white;padding:12px 24px;cursor:pointer;margin-top:16px}.copy:hover{background:#1a1a19}button:focus-visible,textarea:focus-visible{outline:3px solid #6c6a69;outline-offset:3px}.status{min-height:42px;font-size:13px;color:#4d4d4c}.foot{font-size:12px;color:#6c6a69;margin-top:24px}@media(max-width:650px){main{padding:20px}.grid{grid-template-columns:1fr}.courses{grid-template-columns:1fr 1fr;gap:12px}.course .art{height:85px}.hero{grid-template-columns:90px 1fr;gap:16px}.hero .art{height:110px}.panel{padding:20px}.top{flex-direction:column;gap:4px}h1{font-size:28px;line-height:36px}h2{font-size:20px;line-height:28px}}</style><main><header class="top"><b>CREATOR WORKSPACE</b><span>Local sharing specimen</span></header><h1>Give your course a clear invitation.</h1><p class="intro">Choose a sample course and prepare the exact text to share.</p><div class="grid"><nav class="courses" aria-label="Choose a course"><button class="course" data-course="studio" aria-pressed="true"><div class="art studio" aria-hidden="true"><b>STUDIO<br>NOTES</b></div><b>Studio Notes</b><small>6 lessons · Original sample</small></button><button class="course" data-course="journal" aria-pressed="false"><div class="art journal" aria-hidden="true"><b>FIELD<br>JOURNAL</b></div><b>Field Journal</b><small>4 lessons · Original sample</small></button></nav><section class="panel"><div class="hero"><div id="cover" class="art studio" aria-hidden="true"><b>STUDIO<br>NOTES</b></div><div><h2 id="title">Studio Notes</h2><p id="description">A fictional course about building a daily creative practice.</p></div></div><div class="format" aria-label="Copy format"><button data-format="link" aria-pressed="true">Course link</button><button data-format="message" aria-pressed="false">Invitation text</button></div><label for="payload">Text to copy</label><textarea id="payload" readonly></textarea><button id="copy" class="copy" type="button">Copy visible text</button><p class="status" id="status" role="status"></p></section></div><p class="foot">Independent Sage interpretation using verified Pine light-theme colors and dimensions. Original course covers; system-font fallback. No course is published and no message is sent.</p></main><script>const courses={studio:{name:'Studio Notes',slug:'studio-notes',desc:'A fictional course about building a daily creative practice.',art:'STUDIO<br>NOTES'},journal:{name:'Field Journal',slug:'field-journal',desc:'A fictional course about observing, collecting and recording ideas.',art:'FIELD<br>JOURNAL'}};let selected='studio',format='link';const payload=document.querySelector('#payload'),status=document.querySelector('#status');function render(){const c=courses[selected],url='https://example.com/courses/'+c.slug;document.querySelector('#title').textContent=c.name;document.querySelector('#description').textContent=c.desc;document.querySelector('#cover').className='art '+selected;document.querySelector('#cover').innerHTML='<b>'+c.art+'</b>';payload.value=format==='link'?url:'You are invited to explore '+c.name+'.\n\n'+c.desc+'\n\nView the sample: '+url;document.querySelectorAll('[data-course]').forEach(b=>b.setAttribute('aria-pressed',b.dataset.course===selected));document.querySelectorAll('[data-format]').forEach(b=>b.setAttribute('aria-pressed',b.dataset.format===format));status.textContent=''}document.querySelectorAll('[data-course]').forEach(b=>b.onclick=()=>{selected=b.dataset.course;render()});document.querySelectorAll('[data-format]').forEach(b=>b.onclick=()=>{format=b.dataset.format;render()});document.querySelector('#copy').onclick=async()=>{try{await navigator.clipboard.writeText(payload.value);status.textContent='Visible text copied.'}catch{payload.focus();payload.select();status.textContent='Copy was unavailable. The text is selected; copy it manually.'}};render();</script></html>
```

코드 참조

- 복사 시도에는 브라우저 클립보드 API를 사용하고 수동 복사 대안도 제공합니다. 예시 강좌는 독창적으로 제작했으며, 네이티브 Rails CopyText 컴포넌트는 별도로 설명합니다.

### 오류 처리를 포함한 완전한 복사 상호작용

브라우저 권한 또는 삽입된 컨텍스트에서 클립보드 쓰기를 허용하지 않더라도 복사할 텍스트를 선택할 수 있습니다.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Share a sample course link</title>
<!-- Public Pine token stylesheet used by the Sage documentation. Pin its reviewed package version in production. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
<style>
body{font-family:var(--pine-font-family-body);color:var(--pine-color-text);background:var(--pine-color-background-app);padding:var(--pine-dimension-md)}
main{max-width:42rem;margin:auto;background:var(--pine-color-background-container);padding:var(--pine-dimension-md);border:var(--pine-border-width) solid var(--pine-color-border);border-radius:var(--pine-border-radius-md)}
textarea{box-sizing:border-box;width:100%;padding:var(--pine-dimension-sm);font:inherit;resize:vertical}
button{font:inherit;cursor:pointer;margin-top:var(--pine-dimension-sm);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}
button:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
</style><main><h1>Share a sample course link</h1><p>This is a fictional course URL.</p>
<label for="link">Text to copy</label><textarea id="link" readonly rows="2">https://example.com/courses/studio-notes</textarea>
<button type="button" id="copy">Copy course link</button><p id="message" role="status"></p></main>
<script>
const field=document.querySelector('#link'),message=document.querySelector('#message');
document.querySelector('#copy').onclick=async()=>{
 try{await navigator.clipboard.writeText(field.value);message.textContent='Course link copied.'}
 catch{field.focus();field.select();message.textContent='Copy was unavailable. The link is selected; copy it manually.'}
};
</script></html>
```

코드 참조

- ‘복사됨’을 표시하려면 클립보드 프라미스가 해결되어야 합니다.

- 화면에 표시되는 값과 복사되는 값은 동일한 문자열입니다.

- 이 예시는 게시된 Pine 토큰을 사용하는 독립 구현이며, Sage 클립보드 API를 임의로 만들어낸 것이 아닙니다.

### 네이티브 Sage Rails 복사 구조

이미 설정된 Sage Rails 애플리케이션에서 문서화된 Rails 헬퍼를 사용합니다.

```
<h2 class="t-sage-heading-4">Course link</h2>
<%= sage_component SageCopyTextCard, {} do %>
  <p><b>Course:</b> Studio Notes</p>
  <p>https://example.com/courses/studio-notes</p>
<% end %>
<%= sage_component SageCopyButton, { value: "https://example.com/courses/studio-notes", semibold: true, fill_container: true } %>
```

코드 참조

- 헬퍼를 사용하려면 Sage Rails, 에셋 및 시스템-JavaScript 통합이 이미 구성되어 있어야 합니다.

- 광범위한 굵게 설정을 추가하는 대신 컴포넌트 전체에 세미볼드를 사용합니다.

## Kajabi Sage 디자인 시스템 에이전트 설정

### 구현 시작점

공개 토큰을 사용하는 완전한 독립 실행형 구현입니다. 파일을 HTML로 저장하고 클립보드 기능을 사용하려면 localhost 또는 HTTPS에서 제공합니다. Sage Rails/React 컴포넌트는 불러오지 않습니다. 네이티브 Sage 에셋은 GitHub Packages 레지스트리를 통해 배포되며, 현재 에셋 README에서는 Pine 토큰을 별도로 불러오도록 안내합니다.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Share a sample course link</title>
<!-- Public Pine token stylesheet used by the Sage documentation. Pin its reviewed package version in production. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
<style>
body{font-family:var(--pine-font-family-body);color:var(--pine-color-text);background:var(--pine-color-background-app);padding:var(--pine-dimension-md)}
main{max-width:42rem;margin:auto;background:var(--pine-color-background-container);padding:var(--pine-dimension-md);border:var(--pine-border-width) solid var(--pine-color-border);border-radius:var(--pine-border-radius-md)}
textarea{box-sizing:border-box;width:100%;padding:var(--pine-dimension-sm);font:inherit;resize:vertical}
button{font:inherit;cursor:pointer;margin-top:var(--pine-dimension-sm);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}
button:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
</style><main><h1>Share a sample course link</h1><p>This is a fictional course URL.</p>
<label for="link">Text to copy</label><textarea id="link" readonly rows="2">https://example.com/courses/studio-notes</textarea>
<button type="button" id="copy">Copy course link</button><p id="message" role="status"></p></main>
<script>
const field=document.querySelector('#link'),message=document.querySelector('#message');
document.querySelector('#copy').onclick=async()=>{
 try{await navigator.clipboard.writeText(field.value);message.textContent='Course link copied.'}
 catch{field.focus();field.select();message.textContent='Copy was unavailable. The link is selected; copy it manually.'}
};
</script></html>
```

### 프로젝트를 위한 프롬프트

```
Kajabi Sage 강좌 공유 패널을 만들고 강좌 선택 및 복사할 페이로드를 명확하게 표시합니다. 게시된 Sage 타이포그래피와 외부에서 불러오는 Pine 토큰 레이어를 구분합니다. 정확한 페이로드를 표시하고, 클립보드 복사에 성공한 경우에만 성공을 알리며, 복사가 차단되면 수동으로 선택할 수 있도록 합니다. 실제 강좌, 고객 또는 게시 통합 기능은 사용하지 않습니다.
```

## Kajabi Sage 디자인 시스템의 출처 및 범위

독립적인 OpenDesign 가이드입니다. 강좌와 표지 일러스트는 독창적으로 제작했습니다. 미리보기는 네이티브 HTML와 문서화된 시각적 참조를 사용하며, Rails 예시를 사용하려면 기존의 승인된 Sage 통합이 필요합니다. 콘텐츠가 게시되거나 전송되지 않습니다.

- Sage 개요 크리에이터 제품, Rails 및 React.

- 타이포그래피 사양 게시된 클래스 크기와 굵기.

- 복사 컴포넌트 구성, Rails 속성 및 말줄임 지침.

- 색상 지침 목적에 맞는 인터랙션 및 피드백 사용.

- Sage 에셋 종속성 외부 Pine 토큰 및 레거시 16진수 색상 조회.

- 에셋 패키지 메타데이터 CSS 진입점 및 GitHub Packages 배포.

- 실시간 Pine 스타일시트 기본/라이트 토큰 별칭 및 값.

## Kajabi Sage 디자인 시스템 관련 리소스

### Kiwi Orbit

실제 제품 색상과 간격, 네이티브 수하물 선택 항목, 일관된 가격 내역, 완전한 로컬 검토 흐름을 갖춘 여행 중심 Orbit 가이드입니다.

### Maersk 디자인 시스템

실제 밝은 테마의 역할, 제목 및 본문 글꼴 크기 체계, 중첩된 모서리 반경, 식별자 처리 방식을 통해 Maersk의 운영 인터페이스 언어를 살펴봅니다. 샘플 배송 조회에서는 정확한 참조 일치와 접근성 높은 이벤트 기록을 보여주며, 실시간 물류 데이터에 접근할 수 있다고 주장하지 않습니다.

### Microsoft Fluent 2

실제 의미 토큰, 웹용 타이포그래피 및 간격 단계, 제어형 탭, 검증된 접근성 대화상자를 갖춘 Fluent UI React v9 작업 공간을 구성합니다. 테마 값을 비교하고 컴포넌트 구성을 살펴본 다음, 완성된 React 예시를 사용하기 전에 로컬 인터랙션을 시험해 보세요.


- [구현 레퍼런스](https://sage.kajabi.com/pages/component/copy_text)
- [출처](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css)
- [출처](https://sage.kajabi.com/pages/foundations/typography)
- [출처](https://sage.kajabi.com/pages/component/copy_text)
- [지원 사양 읽기](https://sage.kajabi.com/pages/index)
- [지원 사양 읽기](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md)
- [지원 사양 읽기](https://sage.kajabi.com/pages/foundations/color)
- [지원 사양 읽기](https://sage.kajabi.com/pages/foundations/typography)
- [지원 사양 읽기](https://sage.kajabi.com/pages/component/copy_text)
- [지원 사양 읽기](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json)
- [코드 참조](https://sage.kajabi.com/pages/component/copy_text)
- [Sage 개요 크리에이터 제품, Rails 및 React.](https://sage.kajabi.com/pages/index)
- [타이포그래피 사양 게시된 클래스 크기와 굵기.](https://sage.kajabi.com/pages/foundations/typography)
- [복사 컴포넌트 구성, Rails 속성 및 말줄임 지침.](https://sage.kajabi.com/pages/component/copy_text)
- [색상 지침 목적에 맞는 인터랙션 및 피드백 사용.](https://sage.kajabi.com/pages/foundations/color)
- [Sage 에셋 종속성 외부 Pine 토큰 및 레거시 16진수 색상 조회.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md)
- [에셋 패키지 메타데이터 CSS 진입점 및 GitHub Packages 배포.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json)
- [실시간 Pine 스타일시트 기본/라이트 토큰 별칭 및 값.](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css)