sori.studio/docs/shortcuts.md

# 단축키 및 작성 약어

이 문서는 sori.studio에서 직접 구현한 단축키, 슬래시 명령, Markdown 약식 문법을 정리한다.
브라우저 기본 단축키는 제외한다.

## 기본 표기

- `Cmd/Ctrl`: macOS는 `Cmd`, Windows/Linux는 `Ctrl`.
- `Enter`: 선택 또는 확정.
- `Escape`: 열려 있는 패널, 메뉴, 모달을 닫음.

## 공개 화면

| 입력 | 동작 | 위치 |
|------|------|------|
| `/` | 통합 검색 모달 열기 | 공개 화면 전체. 입력창, textarea, select, contenteditable 포커스 중에는 무시 |
| `Escape` | 통합 검색 모달 닫기 | 통합 검색 모달 열림 상태 |
| `Escape` | 사용자 메뉴 닫기 | 사용자 메뉴 열림 상태 |
| `Escape` | 모바일 왼쪽 메뉴 닫기 | 모바일 왼쪽 메뉴 열림 상태 |

## 게시글 작성 에디터

### 공통

| 입력 | 동작 | 위치 |
|------|------|------|
| `Cmd/Ctrl+E` | 작성 모드와 미리보기 모드 전환 | 게시글/페이지 Markdown 에디터 |
| `Cmd/Ctrl+Z` | 에디터 자체 실행 취소 | 게시글/페이지 Markdown 에디터 |
| `Cmd/Ctrl+Shift+Z` | 에디터 자체 다시 실행 | 게시글/페이지 Markdown 에디터 |
| `Cmd/Ctrl+Y` | 에디터 자체 다시 실행 | 게시글/페이지 Markdown 에디터 |
| `Escape` | 미디어 선택 모달 닫기 | 미디어 선택 모달 열림 상태 |

### 소스 작성 모드

| 입력 | 동작 |
|------|------|
| `Cmd/Ctrl+K` | 선택 텍스트를 `[선택 텍스트](https://)` 인라인 링크로 감싸고 URL 부분 선택 |
| `Cmd/Ctrl+B` | 선택 텍스트를 `**굵은 글씨**`로 감싸기 |
| `Cmd/Ctrl+I` | 선택 텍스트를 `*기울임*`으로 감싸기 |
| `Cmd/Ctrl+Shift+K` | 선택된 줄 삭제 |
| 이미지 파일 드롭 | 이미지 1개는 이미지 블록, 여러 개는 갤러리 블록으로 업로드 삽입 |

### 미리보기/라이브 편집 모드

| 입력 | 동작 |
|------|------|
| `Cmd/Ctrl+K` | 선택 텍스트를 `[선택 텍스트](https://)` 인라인 링크로 삽입 |
| `Cmd/Ctrl+Shift+K` | 현재 줄 또는 선택 카드 블록 삭제 |
| `Cmd/Ctrl+A` | 라이브 문서 전체 선택 |
| `Backspace` / `Delete` | 선택된 카드형 블록 삭제 |
| `ArrowUp` / `ArrowDown` | 편집 커서를 이전/다음 블록으로 이동 |
| 카드형 블록에서 `Enter` | 해당 블록 아래에 새 줄 삽입 |
| 카드형 블록에서 `ArrowUp` / `ArrowDown` | 이전/다음 블록으로 이동 |

### 슬래시 명령 메뉴

본문 줄에서 `/`를 입력하면 슬래시 명령 메뉴가 열린다.

| 입력 | 동작 |
|------|------|
| `/` | 슬래시 명령 메뉴 열기 |
| `/검색어` | 명령 검색 |
| `ArrowUp` / `ArrowDown` | 명령 선택 이동 |
| `Enter` | 선택 명령 실행 |
| `Escape` | 슬래시 명령 취소 |

## 슬래시 명령 목록

| 명령 | 삽입/동작 | 설명 |
|------|-----------|------|
| `/이미지`, `/image`, `/img`, `/photo` | 미디어 선택 | 단일 이미지 삽입 |
| `/갤러리`, `/gallery`, `/images` | 미디어 선택 | 여러 이미지 갤러리 삽입 |
| `/h1`, `/heading1` | `# ` | 제목 1. 게시물 제목 외에는 비권장 |
| `/h2`, `/heading`, `/subtitle`, `/제목` | `## ` | 제목 2 |
| `/h3`, `/heading`, `/제목` | `### ` | 제목 3 |
| `/h4`, `/heading`, `/제목` | `#### ` | 제목 4 |
| `/인용`, `/quote`, `/blockquote` | `> ` | 인용문 |
| `/목록`, `/list`, `/bullet`, `/ul` | `- ` | 불릿 목록 |
| `/표`, `/table`, `/테이블` | 기본 3열 Markdown 표 | 표 삽입 |
| `/코드`, `/code`, `/pre` | 코드 블록 | 줄번호 숨김 기본값 |
| `/구분선`, `/divider`, `/hr`, `/line` | `---` | 가로 구분선 |
| `/콜아웃`, `/callout`, `/notice`, `/info` | `:::callout ... :::` | 강조 안내 블록 |
| `/토글`, `/toggle`, `/details` | `:::toggle ... :::` | 접기/펼치기 블록 |
| `/html`, `/markup`, `/tablehtml`, `/html표` | `:::html ... :::` | HTML 코드 블록 |
| `/링크`, `/link`, `/url`, `/embed`, `/youtube` | `:::link ... :::` | URL 링크/임베드 카드. 인라인 링크가 아님 |
| `/iframe`, `/frame`, `/아이프레임` | `:::iframe ... :::` | 외부 iframe 코드 |
| `/비디오`, `/video`, `/movie`, `/mp4` | 미디어 선택 | 업로드 비디오 카드 |
| `/오디오`, `/audio`, `/music`, `/mp3` | 미디어 선택 | 오디오 플레이어 카드 |
| `/파일`, `/file`, `/download`, `/pdf` | 미디어 선택 | 다운로드 파일 카드 |

## Markdown 약식 문법

### 인라인

| 문법 | 결과 |
|------|------|
| `[여기](https://example.com)` | `여기`에 링크 적용 |
| `[내부 링크](/pages/about)` | 사이트 내부 경로 링크 |
| `**텍스트**` | 굵게 |
| `*텍스트*` | 기울임 |
| `` `code` `` | 인라인 코드 |
| `::red[텍스트]` | 빨간색 인라인 텍스트 |
| `::blue[텍스트]` | 파란색 인라인 텍스트 |
| `::green[텍스트]` | 초록색 인라인 텍스트 |
| `::yellow[텍스트]` | 노란색 인라인 텍스트 |
| `::purple[텍스트]` | 보라색 인라인 텍스트 |
| `::gray[텍스트]` | 회색 인라인 텍스트 |
| `$H_2O$` | 아래첨자 |
| `$x^2$` | 위첨자 |

### 표 내부

| 문법 | 결과 |
|------|------|
| `셀 첫 줄<br>셀 둘째 줄` | 표 셀 내부 줄바꿈 |
| `[링크](https://example.com)` | 표 셀 내부 링크 |

### 블록

| 문법 | 결과 |
|------|------|
| `# 제목` | 제목 1 |
| `## 제목` | 제목 2 |
| `### 제목` | 제목 3 |
| `#### 제목` | 제목 4 |
| `> 인용` | 인용문 |
| `> [!bg=blue]` | 파란 인용 막대 옵션 |
| `> {bg=red}` | 빨간 인용 막대 옵션 |
| `- 항목` | 불릿 목록 |
| `1. 항목` | 번호 목록 |
| `---` | 구분선 |
| `![대체 텍스트](이미지URL)` | 이미지 |
| 표준 Markdown 표 | 표 |

### 코드 블록

````markdown
```javascript
console.log('hello')
```
````

| 옵션 | 설명 |
|------|------|
| ```javascript | 언어 지정 |
| ```javascript line-numbers | 줄번호 표시 |
| ```javascript linenos | 줄번호 표시 |
| ```javascript no-line-numbers | 줄번호 숨김 |
| ```javascript no-linenos | 줄번호 숨김 |

### 콜아웃

```markdown
:::callout emoji=💡 bg=blue title="안내"
본문
:::
```

| 옵션 | 설명 |
|------|------|
| `emoji=none` | 아이콘 숨김 |
| `emoji=💡` | 아이콘 표시 |
| `bg=gray` | 회색 배경 |
| `bg=blue` | 파란 배경 |
| `bg=green` | 초록 배경 |
| `bg=yellow` | 노란 배경 |
| `bg=red` | 빨간 배경 |
| `bg=purple` | 보라 배경 |
| `title="제목"` | 콜아웃 제목 |

### 토글

```markdown
:::toggle open 더 보기
내용
:::
```

| 옵션 | 설명 |
|------|------|
| `open`, `opened`, `default-open` | 기본 펼침 |
| `closed`, `close`, `default-closed` | 기본 닫힘 |

### 링크/임베드 카드

```markdown
:::link
https://example.com
:::
```

| 옵션 | 설명 |
|------|------|
| `url=https://example.com` | URL |
| `title=제목` | 카드 제목 |
| `description=설명` 또는 `desc=설명` | 카드 설명 |
| `thumbnail=이미지URL` 또는 `image=이미지URL` | 썸네일 |

### 비디오/오디오/파일 카드

```markdown
:::video
url=/uploads/posts/video.mp4
title=영상 제목
:::
```

| 옵션 | 설명 |
|------|------|
| `url=` 또는 `src=` | 파일 URL |
| `title=` | 제목 |
| `description=` 또는 `desc=` | 설명 |
| `poster=` 또는 `thumbnail=` | 비디오 포스터 |
| `caption=` | 캡션 |
| `name=`, `filename=`, `file=` | 파일명 |
| `size=` | 파일 크기 표시 |

### iframe

```markdown
:::iframe
<iframe src="https://example.com"></iframe>
:::
```

### HTML

```markdown
:::html
<div class="custom">HTML</div>
:::
```

## 페이지 작성

| 입력 | 동작 | 위치 |
|------|------|------|
| 빈 HTML 문서 입력창에서 `!` 입력 후 `Tab` | 기본 HTML 문서 골격 삽입 | 페이지 HTML 문서 모드 |
| 페이지 섹션 입력에서 `ArrowUp` / `ArrowDown` | 섹션 추천 이동 | 페이지 설정 |
| 페이지 섹션 입력에서 `Enter` | 선택한 섹션 적용 | 페이지 설정 |
| 페이지 섹션 입력에서 `Escape` | 섹션 추천 닫기 | 페이지 설정 |
| 빈 페이지 섹션 입력에서 `Backspace` | 선택된 섹션 제거 | 페이지 설정 |

## 게시글 설정

| 입력 | 동작 | 위치 |
|------|------|------|
| 태그 입력에서 `ArrowUp` / `ArrowDown` | 태그 추천 이동 | 게시글 설정 |
| 태그 입력에서 `Enter` | 추천 태그 선택 또는 입력 태그 추가 | 게시글 설정 |
| 태그 입력에서 `,` | 입력 태그 추가 | 게시글 설정 |
| 태그 입력에서 `Escape` | 태그 추천 닫기 | 게시글 설정 |
| 빈 태그 입력에서 `Backspace` | 마지막 선택 태그 제거 | 게시글 설정 |

## 미디어 보기

| 입력 | 동작 | 위치 |
|------|------|------|
| `Escape` | 이미지 라이트박스 닫기 | 공개 게시글 이미지 확대 보기 |
| `ArrowLeft` | 이전 이미지 | 이미지 라이트박스 |
| `ArrowRight` | 다음 이미지 | 이미지 라이트박스 |