콘텐츠블록
임베드 블록
외부 콘텐츠를 페이지에 삽입하세요.
현재 에디터에서 /embed, /bookmark 등의 임베드 전용 슬래시 명령어는 제공되지 않습니다.
외부 콘텐츠 삽입은 YouTube 블록(/youtube)과 아티팩트 블록(/artifact)을 통해 가능합니다.
아래 내용은 향후 지원 예정인 기능을 포함합니다.
코드 블록
**구문 강조(Syntax Highlighting)**가 적용된 코드 블록입니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /code |
| 마크다운 | ``` (백틱 3개) 또는 ```언어 |
| 단축키 | Cmd/Ctrl + Alt + 8 |
코드 입력
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Suits'));언어 선택
코드 블록 우상단에서 프로그래밍 언어를 선택합니다 (검색 가능한 드롭다운).
지원 언어
| 언어 | 식별자 |
|---|---|
| Plain Text | plaintext |
| JavaScript | javascript |
| TypeScript | typescript |
| Python | python |
| Java | java |
| C | c |
| C++ | cpp |
| C# | csharp |
| Go | go |
| Rust | rust |
| Ruby | ruby |
| PHP | php |
| Swift | swift |
| Kotlin | kotlin |
| HTML | html |
| XML | xml |
| CSS | css |
| SCSS | scss |
| Less | less |
| JSON | json |
| YAML | yaml |
| Bash | bash |
| Shell | shell |
| Dockerfile | dockerfile |
| Markdown | markdown |
| SQL | sql |
| GraphQL | graphql |
| Mermaid | mermaid |
Mermaid 다이어그램
언어를 Mermaid로 선택하면 다이어그램을 코드로 작성하고 시각적으로 미리볼 수 있습니다.
| 뷰 모드 | 설명 |
|---|---|
| 코드 | Mermaid 코드만 표시 |
| 분할 | 코드와 다이어그램을 나란히 표시 |
| 차트 | 렌더링된 다이어그램만 표시 |
코드 블록 설정
| 설정 | 설명 |
|---|---|
| 언어 | 구문 강조를 위한 언어 선택 (검색 가능한 드롭다운) |
마크다운 문법
언어를 지정하려면 백틱 뒤에 언어 식별자를 입력합니다.
```python
def hello():
print("Hello, World!")
```레이아웃 블록
컬럼 (Columns)
콘텐츠를 가로로 분할하여 배치합니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /2컬럼, /3컬럼, /4컬럼, /5컬럼, /6컬럼 |
| 키워드 검색 | /columns 또는 /column |
컬럼 구성
슬래시 명령어로 2~6개의 컬럼을 생성할 수 있으며, 리사이즈 핸들의 + 버튼으로 컬럼을 추가하면 최대 10개까지 확장 가능합니다.
┌───────────────┬───────────────┬───────────────┐
│ 컬럼 1 │ 컬럼 2 │ 컬럼 3 │
│ │ │ │
│ 텍스트 │ 이미지 │ 데이터 │
│ 콘텐츠 │ 콘텐츠 │ 콘텐츠 │
│ │ │ │
└───────────────┴───────────────┴───────────────┘컬럼 설정
| 설정 | 설명 |
|---|---|
| 컬럼 수 | 2~6개 (슬래시 명령어), 최대 10개 (+ 버튼) |
| 너비 비율 | 컬럼 사이 리사이즈 핸들 드래그로 60그리드 기반 비율 조절 |
| 컬럼 추가 | 컬럼 사이 리사이즈 핸들 위의 + 버튼 클릭 |
| 컬럼 삭제 | 빈 컬럼에서 Backspace |
모바일 환경에서는 컬럼이 자동으로 세로 스택(1열)으로 전환됩니다.
탭 (Tabs)
콘텐츠를 탭으로 전환하여 표시합니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /tabs |
탭 구성
┌─────────────────────────────────────────────────────────┐
│ [탭 1] [탭 2] [탭 3] │
├─────────────────────────────────────────────────────────┤
│ │
│ 탭 1 콘텐츠 │
│ │
└─────────────────────────────────────────────────────────┘적합한 용도
- 여러 플랫폼별 가이드 (iOS / Android / Web)
- 언어별 코드 예시
- 단계별 프로세스
버튼 (Button)
클릭 시 다양한 액션을 실행하는 버튼입니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /button |
버튼 설정
| 설정 | 설명 |
|---|---|
| 레이블 | 버튼에 표시할 텍스트 |
| 스타일 (variant) | default, destructive, outline, secondary, ghost, link |
| 크기 | default, sm, lg, full (전체 너비) |
| 아이콘 | 버튼 아이콘 (선택) |
액션 타입
| 타입 | 설명 |
|---|---|
| URL | 외부 링크를 새 탭에서 열기 |
| Alert | 알림 메시지 표시 |
| Workflow | 워크플로우 실행 |
| API | 외부 API 호출 |
| Custom | 커스텀 액션 |
활용 예시
┌─────────────────────────────────────────────────────────┐
│ │
│ 프로젝트 상태 보고서 │
│ │
│ [📊 보고서 생성] [📧 팀에 공유] [📅 미팅 예약] │
│ │
└─────────────────────────────────────────────────────────┘워크플로우 액션 사용 시 실행할 워크플로우를 먼저 생성해야 합니다. 워크플로우 가이드를 참고하세요.
아티팩트 블록
AI가 생성한 커스텀 UI를 sandboxed iframe에서 렌더링합니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /artifact |
아티팩트 구성
HTML, CSS, JS를 직접 작성하여 커스텀 위젯을 만들 수 있습니다.
| 설정 | 설명 |
|---|---|
| HTML | 기본 마크업 |
| CSS | 스타일링 (선택) |
| JS | 인터랙션 로직 (선택) |
| CDN 의존성 | 외부 라이브러리 CDN URL |
| 데이터 소스 | 데이터모델 또는 통계 정의 연결 |
| 워크플로우 | 실행 가능한 워크플로우 설정 |
| 높이 | iframe 높이 (숫자 또는 auto) |