From 60a0a6a47a4f96e439838cfbf1985fe45015b76d Mon Sep 17 00:00:00 2001 From: zenn Date: Wed, 1 Jul 2026 10:51:36 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8B=A8=EC=B6=95=ED=82=A4=EC=99=80=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EC=95=BD=EC=96=B4=20=EB=AC=B8=EC=84=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/changelog.md | 4 + docs/map.md | 6 ++ docs/shortcuts.md | 253 ++++++++++++++++++++++++++++++++++++++++++++++ docs/update.md | 4 + package.json | 2 +- 5 files changed, 268 insertions(+), 1 deletion(-) create mode 100644 docs/shortcuts.md diff --git a/docs/changelog.md b/docs/changelog.md index 5ab0a62..332e43a 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -1,5 +1,9 @@ # 업데이트 요약 +## v1.9.29 + +- 사이트에서 쓰는 단축키, 슬래시 명령, Markdown 약식 문법을 `docs/shortcuts.md`로 정리했다. + ## v1.9.28 - 페이지 HTML 문서 작성 시 태그 내부 스마트 따옴표로 링크 속성이 깨지지 않도록 보정했다. diff --git a/docs/map.md b/docs/map.md index bebefb7..cc58896 100644 --- a/docs/map.md +++ b/docs/map.md @@ -47,6 +47,12 @@ | lib/analytics-traffic.js | referrer·User-Agent 기반 유입원·디바이스·검색 키워드 축약 분류 | | lib/social-links.js | 사이트 설정 SNS 링크 아이콘 프리셋·사용자 SVG 정리·URL 자동 보정·레거시 JSON 문자열 복구·공개 노출 목록 생성 | +## 문서 + +| 파일 | 용도 | +|------|------| +| docs/shortcuts.md | 사이트 단축키, 작성 약어, 슬래시 명령, Markdown 약식 문법 정리 | + ## Nuxt 모듈 | 파일 | 용도 | diff --git a/docs/shortcuts.md b/docs/shortcuts.md new file mode 100644 index 0000000..3b1069d --- /dev/null +++ b/docs/shortcuts.md @@ -0,0 +1,253 @@ +# 단축키 및 작성 약어 + +이 문서는 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$` | 위첨자 | + +### 블록 + +| 문법 | 결과 | +|------|------| +| `# 제목` | 제목 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 + +::: +``` + +### HTML + +```markdown +:::html +
HTML
+::: +``` + +## 페이지 작성 + +| 입력 | 동작 | 위치 | +|------|------|------| +| 빈 HTML 문서 입력창에서 `!` 입력 후 `Tab` | 기본 HTML 문서 골격 삽입 | 페이지 HTML 문서 모드 | +| 페이지 섹션 입력에서 `ArrowUp` / `ArrowDown` | 섹션 추천 이동 | 페이지 설정 | +| 페이지 섹션 입력에서 `Enter` | 선택한 섹션 적용 | 페이지 설정 | +| 페이지 섹션 입력에서 `Escape` | 섹션 추천 닫기 | 페이지 설정 | +| 빈 페이지 섹션 입력에서 `Backspace` | 선택된 섹션 제거 | 페이지 설정 | + +## 게시글 설정 + +| 입력 | 동작 | 위치 | +|------|------|------| +| 태그 입력에서 `ArrowUp` / `ArrowDown` | 태그 추천 이동 | 게시글 설정 | +| 태그 입력에서 `Enter` | 추천 태그 선택 또는 입력 태그 추가 | 게시글 설정 | +| 태그 입력에서 `,` | 입력 태그 추가 | 게시글 설정 | +| 태그 입력에서 `Escape` | 태그 추천 닫기 | 게시글 설정 | +| 빈 태그 입력에서 `Backspace` | 마지막 선택 태그 제거 | 게시글 설정 | + +## 미디어 보기 + +| 입력 | 동작 | 위치 | +|------|------|------| +| `Escape` | 이미지 라이트박스 닫기 | 공개 게시글 이미지 확대 보기 | +| `ArrowLeft` | 이전 이미지 | 이미지 라이트박스 | +| `ArrowRight` | 다음 이미지 | 이미지 라이트박스 | diff --git a/docs/update.md b/docs/update.md index 3f2a798..e9b5c56 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,9 @@ # 업데이트 이력 +## v1.9.29 + +- 사이트 단축키·슬래시 명령·Markdown 약식 문법 정리 문서 추가. + ## v1.9.28 - 페이지 HTML 문서 모드에서 태그 내부 스마트 따옴표가 HTML 속성 해석을 깨뜨리지 않도록 정규화 추가. diff --git a/package.json b/package.json index c202dcd..4daa642 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sori.studio", - "version": "1.9.28", + "version": "1.9.29", "private": true, "type": "module", "imports": {