에디터 기능 가이드

에디터 기능 가이드

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 Columns2단 레이아웃 삽입
3 Columns3단 레이아웃 삽입

미디어 그룹

명령어설명
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 (수식)수식 편집 취소