--- url: "/ko/pitchdeck/design/import-markdown.md" description: "Pitchdeck으로 .md, .markdown 프레젠테이션 파일을 Figma로 가져오세요. Deckset 스타일 문법, 편집 가능한 텍스트, 이미지, 표, 발표자 노트, 바닥글, 로컬 슬라이드 링크, 지원되는 Markdown 프레젠테이션 명령을 사용할 수 있어요." --- # Markdown 프레젠테이션 파일을 편집 가능한 Figma 슬라이드로 가져오기 > Pitchdeck으로 .md, .markdown 프레젠테이션 파일을 Figma로 가져오세요. Deckset 스타일 문법, 편집 가능한 텍스트, 이미지, 표, 발표자 노트, 바닥글, 로컬 슬라이드 링크, 지원되는 Markdown 프레젠테이션 명령을 사용할 수 있어요. > **Note:** **Markdown 가져오기는 베타 버전이에요**. 이 가져오기 도구는 일반적인 Markdown 프레젠테이션 파일에 쓰이는 Deckset 문법을 지원하며, 표준 Markdown에 슬라이드 구분선, 배경, 이미지, 노트, 바닥글용 프레젠테이션 명령을 더한 덱에서 가장 잘 작동해요. ## Markdown 파일 가져오기 {#importing-a-markdown-file} Markdown 프레젠테이션 파일을 Figma로 가져오려면 Pitchdeck 플러그인을 열고 컴퓨터의 `.md`, `.markdown`, `.zip` 파일을 슬라이드 목록 아래의 가져오기 드롭 영역으로 끌어다 놓으세요. 가져오기 드롭 영역을 클릭해 파일을 찾아 선택할 수도 있어요. Deckset용으로 작성한 덱이라면 같은 Markdown 파일을 그대로 가져올 수 있어요. Pitchdeck은 슬라이드 구분선, 발표자 노트, 이미지, 바닥글, 슬라이드 번호 등 지원되는 프레젠테이션 명령에 Deckset 스타일 문법을 지원해요. Pitchdeck은 현재 Figma 파일에 새 페이지를 만든 다음, Markdown 슬라이드마다 편집 가능한 Figma 슬라이드 프레임을 추가해요. 가져온 콘텐츠 대부분은 일반 Figma 텍스트, 이미지, 벡터, 레이아웃 레이어로 만들어지므로 가져온 뒤에도 덱을 계속 편집할 수 있어요. > **Tip:** **로컬 미디어를 Markdown 파일과 함께 ZIP으로 묶으세요**. Markdown 파일이 로컬 이미지, SVG, 동영상, 오디오 파일을 참조한다면 `.md` 또는 `.markdown` 파일 하나와 그 파일이 참조하는 로컬 미디어 파일을 모두 담은 `.zip` 파일을 만드세요. 로컬 파일을 묶고 싶지 않다면 외부 이미지나 미디어의 직접 URL을 대신 사용하세요. ## 지원되는 Markdown 콘텐츠 {#supported-markdown-content} Markdown 가져오기는 일반적인 프레젠테이션 콘텐츠를 지원하며, 가능하면 편집 가능한 Figma 레이어로 가져와요. - 제목, 단락, 인용문, 인라인 코드, 코드 블록, 수식은 편집 가능한 텍스트로 가져와요. - 굵게, 기울임꼴, 취소선, 위 첨자, 아래 첨자, 인라인 링크, 간단한 `` 텍스트 스타일을 지원해요. - 글머리 기호 목록, 번호 목록, 중첩 목록, 원본 번호를 유지하는 목록을 지원해요. - 기본 정렬이 적용된 표를 지원해요. - 이름 있는 각주와 여러 줄 각주를 포함한 각주를 지원해요. - `^ note` 줄의 발표자 노트를 가져와요. - `[Jump](#slide-anchor)` 링크를 포함한 로컬 슬라이드 앵커와 링크를 지원해요. - 인라인 이미지, 배경 이미지, 좌우 분할 이미지, 이미지 행, 원격 SVG, 누락된 미디어 자리표시자를 지원해요. - 동영상과 오디오 참조는 미디어 메타데이터나 자리표시자로 가져와요. - Mermaid 순서도, 그래프, 원형 다이어그램은 벡터 다이어그램으로 가져와요. - Pikchr 상자/화살표 다이어그램은 벡터 다이어그램으로 가져와요. ## 프레젠테이션 명령 {#presentation-commands} Markdown 파일 맨 위에 명령을 추가해 가져오기 전체를 제어할 수 있어요. ```markdown autoscale: true background-image: hero.png build-lists: notFirst fit-header: #, ## footer: Confidential image-corner-radius: 18 paragraphs-as-presenter-notes: false slide-dividers: #### slidecount: true slidenumbers: true time-budget: 12 ``` 대괄호 문법으로 슬라이드별 명령을 추가할 수도 있어요. ```markdown [.background-color: #111827] [.footer: Local footer override] [.slidenumbers: false] # Slide title ``` 일부 명령은 Figma에 직접 대응하는 편집 기능이 없더라도 원래 Markdown의 의도가 사라지지 않도록 메타데이터로 보존돼요. ```markdown build-lists: notFirst slide-transition: dissolve(0.4) time-budget: 12 ``` 슬라이드 전환에는 `dissolve(0.4)`, `fade(0.4)`, `push(left, 0.4)`, `move(right, 0.4)`, `reveal(bottom, 0.4)` 같은 값을 사용하세요. `dissolve`와 `fade`는 모두 같은 디졸브 스타일 전환을 요청해요. ## 슬라이드 구분선과 앵커 {#slide-dividers-and-anchors} 슬라이드는 `---`로 구분하세요. 제목을 기준으로 슬라이드를 나누고 싶다면 파일 맨 위에 `slide-dividers` 명령을 추가하세요. ```markdown slide-dividers: #### # First slide --- #### Second slide ``` 앵커는 제목에 추가하거나 HTML 앵커 태그로 추가할 수 있어요. ```markdown # Closing Summary {#closing-summary} ``` 외부 링크는 Figma 텍스트 하이퍼링크로 가져와요. 가져온 슬라이드 앵커를 가리키는 로컬 링크는 모든 슬라이드가 만들어진 뒤 Figma 프로토타입 탐색 링크로 변환돼요. ```markdown [Visit Hypermatic](https://hypermatic.com) [Jump to closing](#closing-summary) ``` ## 이미지와 미디어 {#images-and-media} 이미지에는 일반 Markdown 이미지 문법을 사용하세요. ```markdown ![inline 50%](diagram.png) ![left fit](product-shot.png) ![right alpha(0.6)](panel.png) ``` 로컬 이미지는 참조하는 파일 경로를 Markdown 파일과 같은 `.zip` 안에 두세요. ```text presentation.zip deck.md images/hero.png diagrams/flow.svg ``` 그런 다음 Markdown에서 해당 파일을 참조하세요. ```markdown ![inline](images/hero.png) ![inline](diagrams/flow.svg) ``` 이미지가 ZIP 가져오기에 포함되지 않는다면 외부 직접 URL을 대신 사용하세요. ```markdown ![inline](https://example.com/images/hero.png) ``` 자주 쓰는 이미지 수정자는 다음과 같아요. - `inline`: 슬라이드 본문 안의 인라인 이미지 - `left` 또는 `right`: 이미지 분할 슬라이드 레이아웃 - `fit` 또는 `fill`: 이미지 크기 맞춤 - `alpha(0.6)`: 이미지 불투명도 - `corner-radius(16)`: 이미지 모서리 둥글게 - `bn`, `bw`, `vivid`, `noir`, `chrome`, `fade`, `saturation()`, `blur()`, `contrast()`, `brightness()`, `exposure()`, `sepia()`, `vignette()`, `sharpen()`: 정적 이미지 필터 근사치 슬라이드 맨 앞에 이미지만 있는 줄은 배경 이미지로 처리돼요. SVG 배경 이미지는 Figma 이미지 채우기 대신 일반 벡터 콘텐츠로 가져와요. 동영상과 오디오 참조는 Markdown 미디어 메타데이터로 보존돼요. 미디어 파일을 찾을 수 있으면 Pitchdeck이 파일 메타데이터로 자리표시자를 만들고, 찾을 수 없으면 누락된 미디어임을 알 수 있는 자리표시자를 만들어 가져오기를 계속 진행해요. ## 다이어그램 {#diagrams} Mermaid와 Pikchr 펜스 코드 블록은 지원되는 다이어그램 유형에 한해 벡터 다이어그램으로 가져와요. ````markdown ```mermaid flowchart LR A[Markdown] --> B[Pitchdeck] B --> C[Figma] ``` ```` ````markdown ```pikchr box "Markdown" arrow right box "Figma" ``` ```` 더 복잡한 Mermaid나 Pikchr 다이어그램은 대체 수단으로 벡터 소스 카드 형태로 가져올 수 있어요. 이렇게 하면 원래 다이어그램 소스가 가져온 뒤에도 보이고 편집할 수 있게 남아요. ## 표와 각주 {#tables-and-footnotes} Markdown 표는 편집 가능한 텍스트 기반 표 레이아웃으로 가져와요. ```markdown | Left | Center | Right | | --- | :---: | ---: | | Plain | _Emphasis_ | **Strong** | ``` 각주는 해당 각주를 참조하는 슬라이드에 모아서 표시돼요. ```markdown Here is a claim with a footnote.[^source] [^source]: First footnote line. Continuation line for the same footnote. ``` ## 발표자 노트 {#presenter-notes} `^`로 시작하는 줄을 사용해 슬라이드에 발표자 노트를 추가하세요. ```markdown # Slide title Visible slide content. ^ This note is saved with the imported slide. ``` 발표자 노트는 가져온 슬라이드에 Pitchdeck 슬라이드 데이터와 Markdown 전용 플러그인 데이터로 저장되므로, 가져온 뒤 Pitchdeck에서 사용할 수 있어요. ## 현재 제한 사항 {#current-limitations} - 수식 문법은 편집 가능한 텍스트로 그대로 보이며, 렌더링된 수식 다이어그램으로 변환되지 않아요. - 빌드 목록 명령은 Markdown 메타데이터로 보존되지만, Figma 레이어의 기본 빌드 단계로 변환되지는 않아요. - 일반 Figma 디자인 파일로 가져올 때 슬라이드 전환 명령은 메타데이터로만 저장돼요. Figma Slides 파일로 가져올 때는 Figma API가 지원하면 Pitchdeck이 가장 가까운 Figma Slides 기본 전환을 적용하려고 시도해요. - “슬라이드 간 디졸브” 효과를 원한다면, 일반 Figma 디자인 파일에서 별도의 Pitchdeck 슬라이드 설정을 찾지 말고 Markdown 원본에 위의 `slide-transition` 명령을 사용하세요. - 오디오 파일은 가져온 Figma 프레임에서 바로 재생되지 않으며, 오디오 참조는 메타데이터/자리표시자로 보존돼요. - 원격 미디어를 가져오려면 플러그인에서 해당 URL에 직접 접근할 수 있어야 해요. - 일부 다이어그램과 이미지 필터 명령은 사용 가능한 가장 가까운 Figma 동작에 맞춰 근사치로 처리돼요. ## 문제 해결 {#troubleshooting} 가져오기가 느리게 느껴진다면 가져오기 도구가 Markdown 슬라이드 준비를 마칠 때까지 기다려 주세요. 원격 이미지가 많은 큰 Markdown 파일은 덱을 렌더링하기 전에 플러그인이 해당 에셋을 불러와야 하므로 시간이 더 걸릴 수 있어요. 가져온 뒤 이미지, 동영상, 오디오 파일이 누락되었다면 Markdown 파일을 다시 가져오되, 참조하는 로컬 미디어 파일을 같은 드래그 앤 드롭 동작에 함께 포함하세요. 로컬 슬라이드 링크를 눌러도 다른 슬라이드로 이동하지 않는다면 대상 슬라이드에 고유한 앵커가 있는지, 링크가 같은 앵커 ID를 사용하는지 확인하세요. ## AI로 Markdown 덱 만들기 {#creating-markdown-decks-with-ai} > **Tip:** **AI로 호환되는 `.md` 덱 초안을 만드세요**. OpenAI, Claude, Gemini 같은 AI 도구에 슬라이드 아이디어, 대략적인 개요, 회의록, 녹취록, 기존 문서를 Pitchdeck과 호환되는 Markdown으로 바꿔 달라고 요청할 수 있어요. 좋은 결과를 얻으려면 일반 Markdown만 요청하고, 슬라이드 사이에는 `---`를, 제목에는 `#`과 `##`를 사용하고, 발표자 노트는 `^`로 추가하고, 지원되지 않는 HTML이나 사용자 지정 CSS는 피하세요. 복사해서 상황에 맞게 고쳐 쓸 수 있는 프롬프트 예시예요. ```text Turn the notes below into a Pitchdeck-compatible Markdown presentation. Use Deckset-style syntax with: - `---` between slides - `#` for slide titles - concise bullets - Markdown tables where useful - `^` lines for presenter notes Add these commands at the top of the file: autoscale: true fit-header: #, ## slide-dividers: --- slidenumbers: true Output only the final .md file content, with no explanation. Notes: [paste your notes here] ``` ```text Create a 10-slide product demo deck as a Pitchdeck Markdown import file. Use a strong title slide, problem slide, workflow slide, feature slides, a comparison table slide, and a closing slide. Use `---` to separate slides, `#` and `##` for headings, and `^` lines for presenter notes. Add simple per-slide commands like `[.background-color: #f8fafc]` only where they help the design. Do not use unsupported HTML layouts or custom CSS. Output only Markdown. ``` ```text Convert this meeting transcript into an executive summary deck for Pitchdeck. Keep each slide focused on one idea. Include slide titles, 3-5 bullets per slide, and presenter notes that summarize what to say. Use Deckset-style Markdown syntax compatible with Pitchdeck import: - `---` between slides - `#` and `##` headings - Markdown tables where comparison is useful - `^` lines for presenter notes Output only the .md file. Transcript: [paste your transcript here] ``` ## Markdown 시작 예시 {#starter-markdown-example} Markdown 가져오기를 빠르게 써 보고 싶다면 아래 예시를 새 `.md` 파일에 복사해 붙여 넣거나, 더 완성도 높은 데모 덱을 다운로드하세요. Pitchdeck Markdown 가져오기 데모 `.md` 파일 다운로드 ```markdown autoscale: true background-color: #f8fafc fit-header: #, ## footer: Pitchdeck Markdown Import Demo slide-dividers: --- slidecount: true slidenumbers: true [.background-color: #0f172a] [.header: #ffffff, alignment(center), text-scale(92)] [.text: #cbd5e1, alignment(center), text-scale(34)] # [fit] Markdown to Figma Slides Turn a plain `.md` deck into editable Pitchdeck slides. ^ This note is saved as a presenter note on the imported slide. --- # Why Markdown Import? [.column] ## Write fast - Draft in any editor - Keep slides in Git - Reuse existing Markdown notes [.column] ## Design later - Import as editable Figma layers - Adjust type, layout, and colors - Export to PPTX when ready [.end-columns] --- # One file, many layer types | Markdown source | Imported result | | --- | :---: | | Headings and paragraphs | Editable text | | Lists and quotes | Structured text | | Tables | Text-based table layout | | Presenter notes | Slide notes | --- [.background-color: #ecfdf5] [.header: #065f46, alignment(center), text-scale(76)] # Try it yourself 1. Save this as `pitchdeck-demo.md`. 2. Open Pitchdeck in Figma. 3. Drag the `.md` file into the import dropzone. 4. Edit the imported slides in Figma. ``` ## 파일 크기 제한 {#file-size-limits} 가져오는 파일은 압축을 풀기 전 기준으로 최대 100 MB까지 가능해요. 압축 파일 안의 각 파일은 최대 64 MB까지 가능하고, 중첩된 패키지를 포함해 전체 파일은 최대 10,000개, 압축을 푼 콘텐츠는 합계 최대 256 MB까지 가능해요. 가져오기가 이 한도를 넘으면 문서를 나누거나 이미지 크기를 줄인 다음 다시 시도하세요.