SSEM 사용 안내
SSEM Markdown Editor 1.0.2 기준
1. 설치
- Chrome 웹 스토어에서 Chrome에 추가를 누릅니다. 업데이트는 Chrome이 자동으로 설치합니다.
- 툴바의 퍼즐 모양 확장 프로그램 아이콘을 누르고 SSEM Markdown Editor 옆의 핀을 눌러 고정합니다. 고정한 아이콘을 누르면 설정 팝업이 열립니다.
2. 마크다운 파일 열기
주소가 .md, .mdx, .mkd, .markdown으로 끝나는 페이지(대문자 확장자와 ? 뒤 쿼리가 붙은 주소 포함)를 열면 SSEM Markdown Editor가 자동으로 문서를 렌더링합니다. 따로 버튼을 누를 필요가 없습니다.
- 웹의 파일: 서버가 마크다운 원문을 그대로 보내 주는 주소에서 동작합니다. 예를 들어 GitHub에서는 저장소 화면(github.com/…/README.md)이 아니라 Raw 버튼으로 연
raw.githubusercontent.com주소에서 동작합니다. 저장소 화면은 GitHub이 이미 HTML로 바꿔 보여 주는 페이지이기 때문입니다. - 내 컴퓨터의 파일: 파일을 Chrome 창에 끌어다 놓거나, 주소창에
file:///경로를 입력합니다. 먼저 파일 URL 액세스를 허용해야 합니다. - 폴더: 내 컴퓨터의 폴더 주소(
file:///…/)를 열면 그 안의README.md, 없으면index.md를 자동으로 엽니다. 팝업의 index.md 자동 열기로 끌 수 있습니다.
3. 내 컴퓨터의 파일 열기 (파일 URL 액세스 허용)
Chrome은 보안을 위해 확장 프로그램이 file:// 주소에 접근하지 못하게 막아 둡니다. 내 컴퓨터의 마크다운 파일을 보려면 한 번만 허용해 주세요. 허용하지 않은 상태에서는 팝업 위쪽에 빨간 안내가 보입니다.
- 주소창에
chrome://extensions를 입력하거나, 툴바의 확장 프로그램 아이콘 › 확장 프로그램 관리를 엽니다. - SSEM Markdown Editor의 세부정보를 누릅니다.
- 파일 URL에 대한 액세스 허용을 켭니다.
- 이미 열어 둔 마크다운 탭은 새로고침합니다.
이 권한을 켜도 확장 프로그램은 사용자가 브라우저로 연 파일만 다룹니다. 컴퓨터의 다른 파일을 스스로 찾아 읽지 않습니다.
4. 보기 모드
문서 위쪽의 버튼이나 Ctrl/⌘ + E로 세 모드를 차례로 바꿉니다. 처음 여는 문서의 모드는 팝업의 보기 모드에서 정합니다(처음 설치하면 분할).
| 모드 | 화면 |
|---|---|
| 편집기 | 줄 번호와 함께 마크다운 원문만 보여 주고 고칠 수 있습니다. |
| 분할 | 왼쪽에서 고치면 오른쪽 미리보기에 바로 반영됩니다. |
| 뷰어 | 렌더링된 문서만 보여 줍니다. 읽을 때 가장 깔끔한 모드입니다. |
왼쪽 위의 사이드바 버튼(또는 Alt + Shift + B)을 누르면 제목으로 만든 목차가 열립니다. 목차 항목을 누르면 그 제목으로 이동합니다.
5. 편집과 저장
편집기·분할 모드에서 원문을 고칠 수 있습니다. 다만 브라우저는 확장 프로그램이 원본 파일을 덮어쓰도록 허용하지 않기 때문에, 고친 내용은 원본에 저장되지 않습니다.
- 문서 위쪽의 다운로드 버튼이나 Ctrl/⌘ + S를 누르면 같은 파일 이름으로 브라우저 다운로드가 시작됩니다. Chrome 설정에 따라 다운로드 폴더에 저장되거나 저장 위치를 묻습니다.
- 원본을 바꾸려면 내려받은 파일로 원본을 직접 교체하세요.
- 탭을 닫거나 새로고침하면 내려받지 않은 편집 내용은 사라집니다.
자동 새로고침을 켜 두었다면 뷰어 모드에서 원본 파일이 바뀔 때 화면이 원본 내용으로 다시 채워집니다. 편집할 때는 편집기·분할 모드를 쓰세요(이 모드에서는 자동 새로고침이 멈춥니다).
6. 설정 팝업
툴바의 SSEM Markdown Editor 아이콘을 누르면 설정 팝업이 열립니다. 바꾼 설정은 열려 있는 문서에 바로 적용되고, 이 브라우저에 저장됩니다.
| 항목 | 설명 |
|---|---|
| 활성화 | 끄면 모든 마크다운 페이지를 렌더링하지 않고 브라우저 기본 화면(원문)으로 보여 줍니다. |
| 가운데 정렬 | 문서 폭을 줄여 가운데로 모읍니다(AltShiftC). 팝업에는 “중간에서”로 표시됩니다. |
| 자동 새로고침 | 뷰어 모드에서 같은 주소를 짧은 간격으로 다시 읽어, 파일이 바뀌면 화면에 반영합니다(AltShiftR). 다른 편집기로 문서를 쓰면서 결과를 볼 때 편리합니다. |
| index.md 자동 열기 | 내 컴퓨터의 폴더를 열면 README.md 또는 index.md를 자동으로 엽니다. |
| 플러그인 | 아래 확장 문법을 하나씩 켜고 끕니다. |
| 보기 모드 | 문서를 처음 열 때의 모드(분할·편집기·뷰어). |
| 테마 | 라이트·다크·자동(운영체제 설정을 따름). |
| 언어 | 팝업 화면의 언어. 한국어, English, 简体中文, 繁體中文, Українська를 고를 수 있습니다. |
7. 지원하는 문법
표, 코드 블록(구문 강조) 등 기본 마크다운(CommonMark)에 더해, 다음 확장 문법을 팝업의 플러그인에서 켜고 끌 수 있습니다. 처음에는 모두 켜져 있습니다.
| 플러그인 | 쓰는 법 |
|---|---|
| 이모지 | :rocket: → 🚀 |
| 위 첨자 · 아래 첨자 | x^2^, H~2~O |
| 삽입 · 강조 | ++삽입++, ==형광펜== |
| 약어 | *[HTML]: Hyper Text Markup Language |
| 정의 목록 | 용어 다음 줄에 : 설명 |
| 각주 | 본문[^1] … [^1]: 각주 내용 |
| 작업 목록 | - [x] 완료, - [ ] 할 일 |
| 목차(카테고리) | 문서 안에 [[toc]]를 쓰면 그 자리에 목차가 들어갑니다. |
| 알림 블록 | > [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION] |
| 공식 · 다이어그램 | 아래 다이어그램과 수식 참고 |
코드 블록 오른쪽 위의 복사 버튼으로 코드를 복사하고, 문서 속 이미지를 누르면 크게 볼 수 있습니다.
8. 다이어그램과 수식
Mermaid 다이어그램
언어를 mermaid로 지정한 코드 블록은 다이어그램으로 그려집니다. Mermaid 10을 쓰므로 흐름도, 시퀀스, 클래스, 상태, 간트, 파이, quadrantChart, mindmap, timeline 등을 지원합니다.
```mermaid
graph LR
A[편집] --> B[미리보기] --> C[저장]
```다이어그램 대신 오류가 보이면 Mermaid 문법(특히 괄호와 따옴표)을 확인하세요. 테마를 바꾸면 다이어그램도 그 테마에 맞춰 다시 그립니다.
KaTeX 수식
문장 안의 수식은 $…$, 별도 줄의 수식은 $$…$$로 감쌉니다.
에너지: $E = mc^2$
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$9. 단축키
| 단축키 | 동작 |
|---|---|
| Ctrl/⌘ + S | 편집한 문서 내려받기 |
| Ctrl/⌘ + E | 보기 모드 바꾸기(분할 → 편집기 → 뷰어) |
| Alt + Shift + B | 목차 사이드바 열기·닫기 |
| Alt + Shift + C | 가운데 정렬 켜기·끄기 |
| Alt + Shift + R | 자동 새로고침 켜기·끄기 |
| Alt + Shift + T | 라이트·다크 테마 바꾸기 |
Mac에서 Alt는 ⌥ Option 키입니다. Alt + Shift 단축키는 주소창에 chrome://extensions/shortcuts를 입력해 바꾸거나 끌 수 있습니다. 다른 확장 프로그램과 겹치면 Chrome이 한쪽에만 지정합니다.
10. 끄기와 삭제
- 잠시 끄기: 설정 팝업의 활성화를 끄면 마크다운 파일을 원문 그대로 봅니다.
- 사용 중지:
chrome://extensions에서 SSEM Markdown Editor의 스위치를 끕니다. - 삭제: 툴바 아이콘을 오른쪽 클릭하고 Chrome에서 삭제를 누르거나,
chrome://extensions에서 삭제를 누릅니다. 이 브라우저에 저장된 설정도 함께 지워집니다. 삭제하면 Chrome이 개발자 웹페이지를 새 탭으로 한 번 엽니다.
더 궁금한 점은 지원 페이지를 보세요.