에디터 기능 가이드
에디터 기능 가이드
Skillnote의 에디터는 Notion 스타일 블록 에디터입니다. 플로팅 툴바, 슬래시 명령어, 드래그 핸들 등 다양한 방식으로 콘텐츠를 구성할 수 있습니다.
플로팅 툴바
텍스트를 마우스로 드래그해 선택하면 선택 영역 위에 플로팅 툴바가 나타납니다. 이 툴바는 데스크톱 환경에서만 표시됩니다.
블록 변환 (TurnIntoDropdown)
툴바 맨 왼쪽의 드롭다운을 클릭하면 현재 블록의 유형을 변환할 수 있습니다.
| 항목 | 설명 |
|---|---|
| Text | 일반 단락으로 변환 |
| Heading 1 | 대제목(H1)으로 변환 |
| Heading 2 | 중제목(H2)으로 변환 |
| Heading 3 | 소제목(H3)으로 변환 |
| Bullet List | 순서 없는 목록으로 변환 |
| Numbered List | 번호 목록으로 변환 |
| Task List | 할 일 목록으로 변환 |
| Quote | 인용 블록으로 변환 |
| Code Block | 코드 블록으로 변환 |
인라인 서식
| 버튼 | 기능 |
|---|---|
| 굵게 | 선택한 텍스트를 굵게 표시 |
| 기울임 | 선택한 텍스트를 기울임체로 표시 |
| 취소선 | 선택한 텍스트에 취소선 적용 |
| 인라인 코드 | 선택한 텍스트를 인라인 코드로 표시 |
링크 (LinkPopover)
링크 버튼을 클릭하면 URL 입력 팝오버가 열립니다.
- URL 입력: 연결할 주소를 입력합니다.
- 링크 적용: 입력한 URL로 링크를 설정합니다.
- 링크 열기: 설정된 링크를 새 탭에서 엽니다.
- 링크 제거: 현재 텍스트에서 링크를 제거합니다.
텍스트 색상 (ColorTextPopover)
텍스트 색상 버튼을 클릭하면 색상 선택 팝오버가 열립니다. 원하는 색상을 선택하거나 기본값으로 재설정 버튼으로 색상을 초기화할 수 있습니다.
슬래시 명령어
본문에서 /를 입력하면 빠른 삽입 메뉴가 열립니다. 키워드를 이어서 입력하면 목록이 필터링됩니다.
AI 그룹 (Plus/Pro 플랜 전용)
| 명령어 | 별칭 | 설명 |
|---|---|---|
| 한 줄 AI 요약 | ai, summary, 요약 | 본문 내용을 한 줄로 AI 요약 |
| 세 줄 AI 요약 | ai, summary, 요약 | 본문 내용을 세 줄로 AI 요약 |
| 이미지→LaTeX 변환 | ai, latex, ocr | 이미지 속 수식을 LaTeX로 변환 |
참고: AI 슬래시 명령어는 Plus 또는 Pro 플랜에서만 사용할 수 있습니다.
기본 그룹
| 명령어 | 설명 |
|---|---|
| Text / 단락 | 일반 단락 삽입 |
| Heading 1 | 대제목(H1) 삽입 |
| Heading 2 | 중제목(H2) 삽입 |
| Heading 3 | 소제목(H3) 삽입 |
목록 그룹
| 명령어 | 설명 |
|---|---|
| Bullet List / 목록 | 순서 없는 목록 삽입 |
| Numbered List / 번호 목록 | 번호 목록 삽입 |
| Task List / 할 일 목록 | 체크박스 목록 삽입 |
고급 그룹
| 명령어 | 설명 |
|---|---|
| Quote / 인용 | 인용 블록 삽입 |
| Code Block / 코드 블록 | 코드 블록 삽입 |
| Divider / 구분선 | 수평선 삽입 |
| Table / 표 | 3×3 표 삽입 |
| Inline Math / 인라인 수식 | 인라인 수식 삽입 |
| Block Math / 블록 수식 | 블록 수식 삽입 |
| 2 Columns | 2단 레이아웃 삽입 |
| 3 Columns | 3단 레이아웃 삽입 |
미디어 그룹
| 명령어 | 설명 |
|---|---|
| Image / 이미지 | 이미지 업로드 창 열기 |
| YouTube / 유튜브 | YouTube URL 입력 후 임베드 |
삽입 그룹
| 명령어 | 설명 |
|---|---|
| Emoji / 이모지 | : 이모지 제안 트리거 |
코드 블록
슬래시 명령어에서 Code Block / 코드 블록을 선택하거나 본문에서 백틱 세 개(```)를 입력해 코드 블록을 삽입합니다. 코드 블록 상단에서 언어를 선택하면 문법 강조가 적용됩니다.
지원 언어 목록:
JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, Swift, Kotlin, Ruby, PHP, SQL, HTML/XML, CSS, SCSS, JSON, Markdown, Bash 등 주요 언어를 모두 지원합니다.
```python
def hello():
print("Hello, Skillnote!")
```
수학 수식 (KaTeX)
Skillnote 에디터는 KaTeX를 사용해 수학 수식을 렌더링합니다.
인라인 수식
$로 수식을 감싸면 인라인 수식으로 입력됩니다. 작성 후 Enter 키를 눌러 확정합니다.
$E = mc^2$
취소하려면 Esc 키를 누릅니다.
블록 수식
$$로 시작하거나 슬래시 명령어에서 Block Math / 블록 수식을 선택합니다. 작성 후 Cmd+Enter (또는 Ctrl+Enter)를 눌러 확정합니다.
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
취소하려면 Esc 키를 누릅니다.
내장 LaTeX 매크로
에디터에는 다음 LaTeX 매크로가 기본으로 정의되어 있습니다.
| 매크로 | 의미 |
|---|---|
\R | 실수 집합 ℝ |
\N | 자연수 집합 ℕ |
\Z | 정수 집합 ℤ |
\Q | 유리수 집합 ℚ |
\C | 복소수 집합 ℂ |
이미지
이미지를 추가하는 방법은 두 가지입니다.
- 드래그 앤 드롭: 이미지 파일을 에디터 위로 끌어다 놓습니다.
- 붙여넣기: 클립보드의 이미지를 Cmd+V (또는 Ctrl+V)로 바로 붙여넣습니다.
지원 형식: JPEG, PNG, GIF, WebP, SVG
업로드 제한: 한 번에 최대 3장까지 업로드할 수 있습니다. 업로드 중에는 진행 상태가 표시됩니다.
YouTube 동영상 삽입
슬래시 명령어에서 YouTube / 유튜브를 선택하면 URL 입력창이 나타납니다. YouTube URL을 붙여넣으면 동영상이 자동으로 임베드됩니다.
- 기본 플레이어 크기는 640×360입니다.
- 플레이어 모서리를 드래그해 크기를 조절할 수 있습니다.
youtu.be/...단축 URL과youtube.com/watch?v=...전체 URL을 모두 지원합니다.
이모지
슬래시 명령어에서 Emoji / 이모지를 선택하거나 본문에서 :를 입력하면 이모지 제안 드롭다운이 열립니다. GitHub 이모지 세트를 기반으로 합니다.
예시: :smile:, :rocket: 등 GitHub 이모지 코드를 입력하면 해당 이모지로 변환됩니다.
드래그 핸들
각 블록의 왼쪽에 마우스를 올리면 드래그 핸들(⠿)이 나타납니다. 핸들을 잡고 원하는 위치로 끌어다 놓으면 블록 순서를 변경할 수 있습니다.
표
슬래시 명령어에서 Table / 표를 선택하면 3×3 표가 삽입됩니다.
- 열 경계를 드래그해 열 너비를 조절할 수 있습니다.
- 표 위에 마우스를 올리면 행·열 추가 및 삭제 컨트롤이 나타납니다.
- 셀 안에서 Tab 키를 누르면 다음 셀로 이동하고, 마지막 셀에서 Tab을 누르면 새 행이 추가됩니다.
다단 레이아웃 (2단 / 3단)
슬래시 명령어에서 2 Columns 또는 3 Columns를 선택하면 콘텐츠를 여러 열로 나눠 배치할 수 있습니다. 각 열은 독립적인 블록 에디터로 동작합니다.
모바일 툴바
모바일 환경에서는 플로팅 툴바 대신 화면 하단에 모바일 전용 툴바가 고정 표시됩니다. 자주 사용하는 서식 버튼을 탭해 적용할 수 있습니다.
키보드 단축키
| 단축키 | 기능 |
|---|---|
Cmd/Ctrl + B | 굵게 |
Cmd/Ctrl + I | 기울임 |
Cmd/Ctrl + Z | 실행 취소 |
Cmd/Ctrl + Shift + Z | 다시 실행 |
Tab | 들여쓰기 (목록, 표 내부) |
Shift + Tab | 내어쓰기 |
Enter | 새 단락 또는 새 항목 |
Shift + Enter | 단락 내 줄바꿈 |
Cmd/Ctrl + Enter (블록 수식) | 수식 확정 |
Enter (인라인 수식) | 수식 확정 |
Esc (수식) | 수식 편집 취소 |