콘텐츠블록
임베드 블록
외부 콘텐츠를 페이지에 삽입하세요.
웹 임베드
외부 URL을 페이지에 삽입합니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /embed |
| URL 붙여넣기 | 지원되는 URL 자동 변환 |
사용 방법
/embed입력 또는 URL 붙여넣기- URL 입력 (지원되는 서비스)
- 자동으로 임베드 생성
지원되는 서비스
디자인 도구
| 서비스 | URL 예시 | 기능 |
|---|---|---|
| Figma | figma.com/file/... | 디자인 파일 미리보기, 프로토타입 |
| Miro | miro.com/app/board/... | 화이트보드 삽입 |
| Canva | canva.com/design/... | 디자인 미리보기 |
Figma 임베드 예시
┌─────────────────────────────────────────────────────────┐
│ Figma: 앱 UI 디자인 v2.0 [↗] │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ [Figma 디자인 미리보기] │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘Figma 파일의 특정 프레임만 임베드하려면 프레임을 선택한 상태에서 공유 링크를 복사하세요.
동영상 플랫폼
| 서비스 | URL 예시 | 기능 |
|---|---|---|
| YouTube | youtube.com/watch?v=... | 동영상 재생 |
| Vimeo | vimeo.com/... | 동영상 재생 |
| Loom | loom.com/share/... | 화면 녹화 재생 |
| Wistia | wistia.com/medias/... | 비즈니스 동영상 |
문서 도구
| 서비스 | URL 예시 | 기능 |
|---|---|---|
| Google Docs | docs.google.com/document/... | 문서 미리보기/편집 |
| Google Sheets | docs.google.com/spreadsheets/... | 스프레드시트 삽입 |
| Google Slides | docs.google.com/presentation/... | 프레젠테이션 삽입 |
| Google Forms | docs.google.com/forms/... | 설문 폼 삽입 |
Google Sheets 임베드
스프레드시트를 실시간으로 표시합니다. 원본이 업데이트되면 임베드도 자동으로 반영됩니다.
Google 문서 임베드는 공개 또는 링크가 있는 사용자에게 공개 설정이 필요합니다.
개발 도구
| 서비스 | URL 예시 | 기능 |
|---|---|---|
| GitHub Gist | gist.github.com/... | 코드 스니펫 |
| CodePen | codepen.io/.../pen/... | HTML/CSS/JS 데모 |
| CodeSandbox | codesandbox.io/s/... | 개발 환경 |
| Replit | replit.com/@.../... | 온라인 IDE |
| StackBlitz | stackblitz.com/edit/... | 웹 IDE |
GitHub Gist 임베드
┌─────────────────────────────────────────────────────────┐
│ Gist: api-example.js [↗] │
├─────────────────────────────────────────────────────────┤
│ 1 │ async function fetchData() { │
│ 2 │ const response = await fetch('/api/data'); │
│ 3 │ return response.json(); │
│ 4 │ } │
└─────────────────────────────────────────────────────────┘기타 서비스
| 서비스 | URL 예시 | 기능 |
|---|---|---|
| Twitter/X | twitter.com/.../status/... | 트윗 삽입 |
| Spotify | open.spotify.com/... | 음악/팟캐스트 |
| Google Maps | google.com/maps/... | 지도 삽입 |
| Airtable | airtable.com/... | 데이터베이스 뷰 |
| Typeform | typeform.com/to/... | 설문 폼 |
| Calendly | calendly.com/... | 일정 예약 |
북마크 블록
URL을 리치 프리뷰 카드로 표시합니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /bookmark |
| URL 붙여넣기 | 자동 또는 수동 선택 |
북마크 표시
URL을 입력하면 자동으로 제목, 설명, 이미지를 가져와 카드 형태로 표시합니다.
┌─────────────────────────────────────────────────────────┐
│ ┌──────────┐ │
│ │ 🖼️ │ 슈츠 - AI 기반 워크스페이스 │
│ │ 썸네일 │ 성장하는 팀을 위한 AI 기반 업무시스템 │
│ │ │ suits.work │
│ └──────────┘ │
└─────────────────────────────────────────────────────────┘임베드 vs 북마크
| 구분 | 임베드 | 북마크 |
|---|---|---|
| 표시 | 콘텐츠 자체가 표시 | 링크 카드로 표시 |
| 상호작용 | 페이지 내에서 가능 | 클릭 시 외부로 이동 |
| 적합한 용도 | 문서, 디자인, 동영상 | 참고 자료, 외부 링크 |
코드 블록
**구문 강조(Syntax Highlighting)**가 적용된 코드 블록입니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /code |
| 마크다운 | ``` (백틱 3개) |
코드 입력
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Suits'));언어 선택
코드 블록 상단에서 프로그래밍 언어를 선택합니다.
지원 언어 (일부)
| 언어 | 식별자 |
|---|---|
| JavaScript | javascript, js |
| TypeScript | typescript, ts |
| Python | python, py |
| Java | java |
| Go | go |
| Rust | rust |
| SQL | sql |
| HTML | html |
| CSS | css |
| JSON | json |
| YAML | yaml |
| Bash/Shell | bash, shell |
| Markdown | markdown, md |
그 외 100개 이상의 언어를 지원합니다.
코드 블록 설정
| 설정 | 설명 |
|---|---|
| 언어 | 구문 강조를 위한 언어 선택 |
| 줄 번호 | 줄 번호 표시 여부 |
| 테마 | 코드 블록 색상 테마 |
| 복사 버튼 | 코드 복사 버튼 표시 |
마크다운 문법
언어를 지정하려면 백틱 뒤에 언어 식별자를 입력합니다.
```python
def hello():
print("Hello, World!")
```레이아웃 블록
컬럼 (Columns)
콘텐츠를 가로로 분할하여 배치합니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /columns |
컬럼 구성
2~4개의 컬럼으로 분할할 수 있습니다.
┌───────────────┬───────────────┬───────────────┐
│ 컬럼 1 │ 컬럼 2 │ 컬럼 3 │
│ │ │ │
│ 텍스트 │ 이미지 │ 데이터 │
│ 콘텐츠 │ 콘텐츠 │ 콘텐츠 │
│ │ │ │
└───────────────┴───────────────┴───────────────┘컬럼 설정
| 설정 | 설명 |
|---|---|
| 컬럼 수 | 2, 3, 4개 중 선택 |
| 너비 비율 | 각 컬럼의 상대 너비 |
| 간격 | 컬럼 사이 간격 |
탭 (Tabs)
콘텐츠를 탭으로 전환하여 표시합니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /tabs |
탭 구성
┌─────────────────────────────────────────────────────────┐
│ [탭 1] [탭 2] [탭 3] │
├─────────────────────────────────────────────────────────┤
│ │
│ 탭 1 콘텐츠 │
│ │
└─────────────────────────────────────────────────────────┘적합한 용도
- 여러 플랫폼별 가이드 (iOS / Android / Web)
- 언어별 코드 예시
- 단계별 프로세스
버튼 (Button)
클릭 시 워크플로우를 실행하는 버튼입니다.
생성 방법
| 방법 | 설명 |
|---|---|
| 슬래시 명령어 | /button |
버튼 설정
| 설정 | 설명 |
|---|---|
| 레이블 | 버튼에 표시할 텍스트 |
| 워크플로우 | 클릭 시 실행할 워크플로우 |
| 스타일 | 색상, 크기 |
| 아이콘 | 버튼 아이콘 (선택) |
활용 예시
┌─────────────────────────────────────────────────────────┐
│ │
│ 프로젝트 상태 보고서 │
│ │
│ [📊 보고서 생성] [📧 팀에 공유] [📅 미팅 예약] │
│ │
└─────────────────────────────────────────────────────────┘버튼 클릭 시 실행할 워크플로우를 먼저 생성해야 합니다. 워크플로우 가이드를 참고하세요.
임베드 문제 해결
임베드가 표시되지 않는 경우
- URL 형식 확인: 서비스별 올바른 URL 형식인지 확인
- 공개 설정 확인: 콘텐츠가 공개되어 있는지 확인
- 임베드 허용 확인: 일부 서비스는 임베드를 제한함
임베드 크기 조절
- 블록 모서리를 드래그하여 크기 조절
- 전체 너비로 확장 옵션 사용
임베드 새로고침
콘텐츠가 업데이트되지 않으면 블록을 새로고침하거나 URL을 다시 입력하세요.