# 포스트 에디터 사용법 Boutlet에서는 포스트와 참여글을 같은 에디터로 작성합니다. 짧은 생각부터 경험과 자료를 담은 긴 글까지, 필요한 요소를 하나씩 추가해보세요. 에디터는 **Notion과 비슷한 블록 편집 방식**을 사용합니다. 문단, 제목, 목록, 이미지가 각각 하나의 블록이며, 블록을 추가하거나 순서를 바꾸며 글을 구성할 수 있어요. 이 문서의 결과 예시는 실제 포스트 본문과 같은 렌더러로 표시됩니다. **Markdown으로 보기**에서는 같은 예시가 포스트의 Markdown 변환 결과로 제공됩니다. 색상·정렬과 일부 미디어 표현은 보기 방식에 따라 달라질 수 있습니다. ## `/`로 블록을 찾아 추가해요 1. 빈 줄에서 `/`를 입력합니다. 2. 원하는 블록의 이름이나 검색어를 입력합니다. 3. 메뉴에서 항목을 클릭하거나, 위·아래 방향키로 고른 뒤 Enter를 누릅니다. `/` 뒤의 글자는 블록을 찾는 **검색어**입니다. 정해진 명령어 전체를 외울 필요 없이 메뉴에 표시된 항목을 선택하면 됩니다. | 추가할 블록 | 검색 예시 | | ------------------ | ---------------------------------------- | | 본문 | `/본문`, `/paragraph` | | 제목 1~6 | `/h1`, `/h2`, `/h3`, `/h4`, `/h5`, `/h6` | | 글머리표·번호 목록 | `/목록`, `/ul`, `/ol` | | 체크리스트 | `/체크`, `/체크리스트` | | 인용 | `/인용`, `/bq` | | 코드 블록·표 | `/code`, `/표` | | 이미지·동영상 | `/이미지`, `/동영상` | | 이미지 슬라이더 | `/gallery`, `/slider` | | 구분선 | `/divider` | 블록 옆의 **`+`** 버튼으로도 추가 메뉴를 열 수 있습니다. 제목과 미디어는 에디터 상단 툴바에서도 추가할 수 있어요. ## 텍스트와 제목 ### 본문과 제목 그대로 입력하면 본문 문단이 만들어집니다. Enter를 누르면 다음 블록으로 이동하며, 문단 안에서 줄만 바꾸려면 Shift+Enter를 사용하세요. 제목은 1~6단계를 지원합니다. `/h2`처럼 검색하거나 상단의 제목 메뉴에서 단계를 선택하세요. 글의 내용을 나눌 때는 제목 2나 제목 3을 사용하면 읽기 편합니다. 줄의 시작에 `#` 뒤로 공백을 입력하면 제목 1로, `##` 뒤로 공백을 입력하면 제목 2로 바뀝니다. **결과 예시** # 직접 확인한 결과 ## 사용한 환경 ### 진행한 과정 #### 발견한 차이 ##### 참고한 자료 ###### 남은 질문 ### 글자 서식 텍스트를 선택하면 나타나는 서식 도구에서 **굵게**, 기울임, 밑줄, 취소선, 인라인 코드를 적용할 수 있습니다. 글자색과 배경색, 지원되는 블록의 정렬도 바꿀 수 있어요. 링크를 넣으려면 텍스트를 선택하고 링크 도구에 주소를 입력합니다. 코드의 짧은 이름이나 명령어는 인라인 코드로 표시하면 본문과 구분하기 좋습니다. **결과 예시** **강조할 내용** · *덧붙일 생각* · 중요한 부분 · ~~수정 전 표현~~ · `함수 이름` [Boutlet 둘러보기](https://www.boutlet.io/) ### 인용문 다른 자료의 문장이나 강조해서 보여줄 내용을 인용 블록으로 정리할 수 있습니다. `/인용`을 선택하고 내용을 입력하세요. 출처가 있는 문장이라면 관련 링크도 함께 남겨주세요. 인용 블록은 본문의 표시 형식입니다. 다른 포스트와 연결되는 **포스트 인용하기** 기능과는 별도로 사용할 수 있어요. **결과 예시** > 같은 과정을 시도해도 사용한 환경에 따라 결과가 달랐어요. ## 목록 관련 내용을 나열할 때는 글머리표 목록, 순서가 중요할 때는 번호 목록, 확인할 일을 정리할 때는 체크리스트를 사용해보세요. | 목록 | 추가 방법 | | ------------- | ----------------------------------------------------- | | 글머리표 목록 | `/ul`로 선택하거나 줄의 시작에 `-` 뒤로 공백 입력 | | 번호 목록 | `/ol`로 선택하거나 줄의 시작에 `1.` 뒤로 공백 입력 | | 체크리스트 | `/체크`로 선택하거나 줄의 시작에 `[ ]` 뒤로 공백 입력 | Enter로 다음 항목을 추가하고, 빈 목록 항목에서 Enter를 한 번 더 누르면 일반 문단으로 돌아갑니다. 하위 항목은 같은 종류의 목록으로 구성해주세요. 번호 목록은 1부터 시작합니다. 체크리스트의 체크 상태는 작성·편집 화면에서 변경합니다. 게시된 글에서는 작성자가 저장한 상태로 표시됩니다. **결과 예시** - 확인한 화면을 정리해요. - 차이가 나는 부분을 비교해요. 1. 사용한 환경을 기록해요. 2. 과정과 결과를 정리해요. - [x] 자료의 출처 확인 - [ ] 다른 환경에서도 확인 ## 코드와 표, 구분선 ### 코드 블록 여러 줄의 코드나 명령어를 공유할 때 `/code`로 코드 블록을 추가하세요. 블록의 언어 메뉴에서 작성한 코드에 맞는 언어를 선택하면 구문 강조가 적용됩니다. 일반 텍스트로 표시할 수도 있습니다. 코드 블록은 내용을 보여주는 용도이며 코드를 실행하지 않습니다. **결과 예시** ```typescript type Observation = { setup: string; result: string }; const observation: Observation = { setup: "mobile", result: "checked", }; ``` ```javascript const observations = ["first attempt", "second attempt"]; observations.forEach((item) => console.log(item)); ``` ### 표 `/표`로 표를 추가하고 각 셀에 내용을 입력하세요. 행과 열의 핸들 메뉴에서 항목을 추가하거나 삭제할 수 있습니다. 비교할 항목이 여러 개일 때 사용하면 좋습니다. 첫 행에 항목 이름을 적고, 좁은 화면에서도 읽기 쉽도록 열의 수와 내용을 간결하게 유지해주세요. **결과 예시** | 확인 항목 | 첫 번째 시도 | 두 번째 시도 | | 안내 문구 | 짧은 설명 | 예시가 있는 설명 | | 이해하기 어려운 점 | 요청 목적 | 추가 확인 필요 | ### 구분선 이야기의 흐름이 바뀌는 곳에 `/divider`로 구분선을 넣을 수 있습니다. **결과 예시** 여기까지 직접 확인한 내용을 정리했어요. --- 이어서 아직 확인하지 못한 점을 적어볼게요. ## 이미지와 동영상 ### 이미지 `/이미지` 또는 상단 이미지 버튼을 선택하고 기기의 파일을 업로드하세요. 이미지 파일을 에디터에 끌어놓거나 클립보드의 이미지를 붙여넣을 수도 있습니다. 본문에 무엇을 보여주는 이미지인지 설명을 덧붙이면 다른 사람이 경험과 결과를 이해하기 좋습니다. 공개할 수 있는 이미지만 사용하고, 화면을 첨부할 때는 개인정보를 확인해주세요. **결과 예시**  > Caption: 관찰한 내용에 관련 자료를 함께 연결해보세요. ### 이미지 슬라이더·갤러리 여러 장을 한 묶음으로 보여주려면 `/gallery` 또는 `/slider`로 이미지 슬라이더를 추가하세요. 상단 갤러리 버튼으로도 여러 이미지를 선택할 수 있습니다. 슬라이더 편집 화면에서 이미지를 추가하고 순서를 정리할 수 있습니다. 이미지 블록의 핸들 메뉴에는 **슬라이더로 표시**, 슬라이더의 메뉴에는 **개별 이미지로 표시** 기능이 있어 글의 흐름에 맞게 바꿀 수 있어요. **결과 예시** -  > 비교할 항목을 같은 기준으로 나눠요\. -  > 각 결과를 뒷받침하는 자료를 연결해요\. ### 동영상 `/동영상` 또는 상단 영상 버튼을 선택하고 파일을 업로드하세요. 업로드와 동영상 처리가 끝난 뒤 게시할 수 있습니다. 파일 업로드와 외부 영상 임베드는 추가 방법이 다릅니다. YouTube 영상은 아래의 URL 붙여넣기 방식으로 추가해주세요. **결과 예시** [짧은 화면 기록으로 변화 과정을 보여줄 수 있어요.](/docs/editor/demo.mp4) ## 링크와 외부 위젯 ### 링크 미리보기 빈 문단에 웹페이지의 URL을 단독으로 붙여넣으면 지원되는 주소를 링크 미리보기나 외부 위젯으로 변환할 수 있습니다. 일반 웹페이지는 제목·설명·이미지를 담은 링크 카드로 표시될 수 있습니다. 사이트에서 정보를 제공하지 않거나 주소에 접근할 수 없으면 표시되는 내용이 제한될 수 있어요. 본문의 문장에 링크만 넣고 싶다면 텍스트를 선택하고 링크 도구를 사용하세요. **결과 예시** [Boutlet — 관심 있는 이야기에서 대화로](https://www.boutlet.io/) ### 지원되는 외부 콘텐츠 위젯은 `/` 메뉴에서 고르기보다 **지원되는 URL을 빈 문단에 붙여넣어** 추가합니다. | 서비스 | 추가할 콘텐츠 | | ------------------- | ------------------------------------------------------------- | | YouTube | 영상 | | X·Threads·Instagram | 지원되는 공개 게시물 | | Notion | 공개하거나 게시한 페이지 | | Google Workspace | 문서·시트·슬라이드·설문지·캘린더·Drive의 지원되는 공유 콘텐츠 | 외부 서비스의 공유·공개 설정을 확인해주세요. 내 계정으로 열 수 있는 주소라도 다른 사람에게는 권한이 없을 수 있으며, Boutlet에 추가한다고 원본의 열람 권한이 바뀌지는 않습니다. 외부 콘텐츠를 표시하면 해당 서비스로 연결됩니다. 재생과 추가 불러오기는 서비스의 제공 상태와 표시된 안내에 따라 이용할 수 있어요. **결과 예시** [YouTube 동영상 임베드 예시]() ## 블록을 정리하고 저장해요 ### 순서 바꾸기와 삭제 블록 옆 핸들을 끌어 원하는 위치로 옮길 수 있습니다. 핸들을 클릭하면 블록 메뉴가 열리며, 필요 없는 블록을 삭제할 수 있어요. 본문을 제목이나 목록으로 바꾸려면 텍스트를 선택한 뒤 서식 도구의 블록 종류 메뉴를 사용하세요. 잘못 바꾸었다면 실행 취소로 되돌릴 수 있습니다. ### 초안과 게시된 글의 저장 | 작성 상태 | 저장 방법 | | -------------------------- | ------------------------------------------------------------------ | | 새 포스트·인용·참여글 작성 | 초안이 자동 저장됩니다. 나가기 전에 상단의 저장 상태를 확인하세요. | | 게시된 포스트·참여글 편집 | 편집을 마친 뒤 **변경 내용 저장**으로 반영합니다. | 초안 저장은 게시가 아닙니다. 파일 업로드와 처리가 완료되었는지 확인한 뒤 게시 버튼을 선택해주세요. 참여글도 같은 블록과 서식 도구를 사용합니다. 작성 화면 상단의 연결 대상과 보상 안내를 확인하고, 공개·무료 콘텐츠로 작성해주세요. 게시 후 편집한 내용을 평가용 제출본에도 반영하려면 재제출 가능 여부를 확인해야 합니다. 자세한 절차는 [참여글 작성과 제출](signals.md)에서 확인할 수 있습니다.