망보드 마크다운 사용방법

2026.04.28

망보드 마크다운 사용방법

망보드 게시판에서 마크다운 문법으로 글을 작성할 수 있습니다. 플러그인 활성화만으로 모든 망보드 게시판에 자동 적용됩니다.


지원 문법 전체 목록

flowchart LR
    A((마크다운
문법)) --> B["제목 H1-4"] A --> C["굵게 / 기울임"] A --> D["인라인 코드"] A --> E["코드 블록"] A --> F["인용문"] A --> G["구분선"] A --> H["표"] A --> I["목록"] A --> J["링크 / 이미지"] A --> K["Mermaid 다이어그램"]

1. 제목 (Headers)

# 뒤에 반드시 공백을 입력합니다.

작성법 결과
# 제목 H1 — 파란색, 그라데이션 보더
## 제목 H2 — 검정, 그라데이션 보더
### 제목 H3 — 회색, 짧은 보더
#### 제목 H4 — 회색, 더 짧은 보더

주의: #제목 (공백 없음)은 제목으로 인식되지 않습니다.


2. 텍스트 스타일

작성법 결과 설명
**굵은 텍스트** 굵은 텍스트 별표 2개
*기울임 텍스트* 기울임 텍스트 별표 1개
`var x = 10;` | var x = 10; 백틱으로 감싸기

3. 코드 블록 (Code Blocks)

백틱 3개로 감싸며, 첫 줄에 언어명을 지정하면 구문 강조 + 라인 번호가 자동 적용됩니다.

언어 지정 예 결과
javascript JavaScript 구문 강조 + 라인 번호 + 복사 버튼
python Python 구문 강조 + 라인 번호 + 복사 버튼
bash Shell 구문 강조 + 라인 번호 + 복사 버튼
(생략) 일반 텍스트 (다른 배경색, 라인 번호 없음)

지원 언어 (30+)

언어 지정어 별칭
Bash/Shell bash sh, zsh
Python python py
JavaScript javascript js
TypeScript typescript ts
PHP php
Java java
Go go
Rust rust
SQL sql
YAML yaml yml
JSON json
CSS css
HTML html xml
Docker docker dockerfile
INI/Properties ini properties, env
C# csharp cs
Ruby ruby
C/C++ c / cpp
Markdown markdown md
Mermaid mermaid — (다이어그램으로 렌더링)

언어 자동 감지

언어를 생략하고 코드 블록 첫 줄에 언어명만 쓰면 자동 감지합니다. 첫 줄의 언어명은 출력에서 제거됩니다.


4. 표 (Tables)

| 로 열을 구분하며, 두 번째 행은 구분자(---)로 헤더와 본문을 나눕니다.

작성법 결과
| 항목 | 내용 | 첫 행이 헤더
|------|------| 구분자
| CPU | i7 | 일반 셀

백틱 안의 |는 표 구분자로 인식되지 않습니다.


5. 목록 (Lists)

종류 작성법 설명
순서 없는 - 항목 또는 * 항목 불릿 목록
순서 있는 1. 항목 번호 목록

현재 1단계 목록만 지원합니다.


6. 인용문 (Blockquote)

> 로 시작합니다. 여러 줄을 연속으로 쓸 수 있습니다.


7. 구분선 (Horizontal Rule)

--- 또는 *** 세 개 이상을 입력합니다.


8. 링크 & 이미지

종류 작성법 설명
링크 [링크 텍스트](https://example.com) 파란색, 호버 시 밑줄
이미지 ![설명](url) CKEditor가 삽입한 <img> 태그는 자동 보존

9. Mermaid 다이어그램

코드 블록의 언어를 mermaid로 지정하면 SVG 다이어그램으로 자동 렌더링됩니다.

지원 다이어그램 종류

flowchart TD
    A((Mermaid)) --> B["flowchart — 순서도"]
    A --> C["sequence — 시퀀스"]
    A --> D["class — 클래스"]
    A --> E["state — 상태"]
    A --> F["er — ER 다이어그램"]
    A --> G["gantt — 간트 차트"]
    A --> H["pie — 파이 차트"]
    A --> I["mindmap — 마인드맵"]
    A --> J["timeline — 타임라인"]
    A --> K["gitgraph — Git 그래프"]

9-1. Flowchart (순서도)

방향: TD(위→아래) 또는 LR(좌→우)

flowchart TD
    A[사용자 접속] --> B{로그인 여부}
    B -->|YES| C[대시보드 표시]
    B -->|NO| D[로그인 페이지]
    D --> E[인증 처리]
    E -->|성공| C
    E -->|실패| D
flowchart LR
    A[요청] --> B[컨트롤러]
    B --> C[서비스]
    C --> D[DB]
    D --> C
    C --> B
    B --> A
flowchart TD
    A[요청] --> B[API Gateway]


    subgraph Frontend["프론트엔드"]
        B
        C[React App]
    end


    subgraph Backend["백엔드"]
        D[Node.js]
        E[Express]
    end


    B --> D
    D --> E
    E --> F[(MySQL)]

노드 형태

형태 작성법 용도
사각형 A[텍스트] 일반 프로세스
둥근 사각형 A(텍스트) 시작/종료
마름모 A{텍스트} 조건 분기
원형 A((텍스트)) 연결점
데이터베이스 A[(텍스트)] 데이터베이스

링크 라벨

작성법 의미
A -->\|라벨\| B 화살표 + 라벨
A ---\|라벨\| B 선 + 라벨
A -.\->\|라벨\| B 점선 화살표
A ==>\|라벨\| B 굵은 화살표

9-2. Sequence Diagram (시퀀스 다이어그램)

sequenceDiagram
    actor 사용자
    participant 클라이언트
    participant 서버
    participant DB


    사용자->>클라이언트: 버튼 클릭
    클라이언트->>서버: API 요청
    서버->>DB: 쿼리 실행
    DB-->>서버: 결과 반환
    서버-->>클라이언트: JSON 응답
    클라이언트-->>사용자: 화면 갱신
메시지 유형 작성법 의미
실선 화살표 A->>B: 메시지 동기 요청
점선 화살표 A-->>B: 메시지 응답
참여자 유형 작성법
------------- --------
사람 아이콘 actor 사용자
사각형 participant 서버
별칭 지정 participant DB as 데이터베이스
sequenceDiagram
    client->>server: 요청
    loop 최대 3회 재시도
        server->>API: 데이터 조회
        API-->>server: 응답
    end
    server-->>client: 최종 결과

9-3. Class Diagram (클래스 다이어그램)

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +fetch() void
    }
    class Cat {
        +bool isIndoor
        +purr() void
    }
    Animal <|-- Dog
    Animal <|-- Cat
관계 작성법 의미
상속 A <\|-- B B가 A를 상속
합성 A *-- B B가 A에 포함
집합 A o-- B
연관 A --> B
의존 A ..> B

9-4. State Diagram (상태 다이어그램)

stateDiagram-v2
    [*] --> 대기
    대기 --> 처리중: 요청 수신
    처리중 --> 완료: 성공
    처리중 --> 실패: 에러
    실패 --> 대기: 재시도
    완료 --> [*]

9-5. ER Diagram (ER 다이어그램)

erDiagram
    USER ||--o{ POST : "작성"
    USER ||--o{ COMMENT : "작성"
    POST ||--o{ COMMENT : "포함"
    POST }o--|| CATEGORY : "속함"


    USER {
        int id PK
        string name
        string email
    }
    POST {
        int id PK
        int user_id FK
        string title
        text content
    }

9-6. Gantt Chart (간트 차트)

gantt
    title 프로젝트 일정
    dateFormat  YYYY-MM-DD
    section 기획
    요구사항 분석   :a1, 2026-04-01, 7d
    설계           :after a1, 5d
    section 개발
    프론트엔드     :2026-04-15, 14d
    백엔드        :2026-04-15, 14d
    section 테스트
    통합 테스트     :2026-05-01, 7d
    버그 수정       :2026-05-08, 5d

9-7. Pie Chart (파이 차트)

pie title 트래픽 소스 비율
    "직접 접속" : 35
    "검색 엔진" : 30
    "소셜 미디어" : 20
    "외부 링크" : 15

9-8. Mindmap (마인드맵)

flowchart TD
    A((서버
아키텍처)) --> B["웹 서버
Nginx, SSL"] A --> C["애플리케이션
Node.js, Express"] A --> D["데이터베이스
MySQL, Redis"] A --> E["인프라
Docker, GitHub Actions"]

Mermaid mindmap은 한글 특수문자에서 오류가 발생할 수 있습니다. 이 경우 flowchart를 사용하세요.


9-9. Timeline (타임라인)

timeline
    title 프로젝트 진행 이력
    2026-04 : 기획 완료
             : 디자인 시안 승인
    2026-05 : 개발 완료
             : QA 테스트 통과
    2026-06 : 베타 릴리즈
             : 정식 출시

9-10. Gitgraph (Git 그래프)

gitGraph
    commit id: "init"
    commit id: "feature-add"
    branch develop
    checkout develop
    commit id: "dev-1"
    commit id: "dev-2"
    checkout main
    merge develop id: "merge-dev"
    commit id: "release"

10. 실전 예시

예시 1: PC 조립 가이드

flowchart TD
    A["1. CPU 장착"] --> B["2. RAM 장착"]
    B --> C["3. M.2 SSD 장착"]
    C --> D["4. 쿨러 장착"]
    D --> E["5. GPU 장착"]
    E --> F["6. BIOS 설정"]
    F --> G["7. OS 설치"]

예시 2: 시스템 아키텍처

flowchart TD
    A["사용자"] --> B["Nginx"]
    B --> C["WordPress"]
    C --> D["MangBoard"]
    D --> E[(MariaDB)]
    C --> F["Redis 캐시"]
sequenceDiagram
    client->>nginx: HTTPS 요청
    nginx->>wordpress: 프록시 전달
    wordpress->>db: 쿼리
    db-->>wordpress: 데이터
    wordpress-->>nginx: HTML
    nginx-->>client: 응답

예시 3: 트러블슈팅 가이드

flowchart TD
    Start["장애 발생"] --> Check{"서버 상태 확인"}
    Check -->|"정상"| App{"애플리케이션 확인"}
    Check -->|"다운"| Restart["서버 재시작"]
    App -->|"정상"| Cache["캐시 클리어"]
    App -->|"에러"| Log["로그 확인"]
    Log --> Fix["원인 수정"]
    Fix --> Cache
    Restart --> Verify["정상 동작 확인"]
    Cache --> Verify

주의사항

항목 설명
제목 공백 #텍스트 (X) → # 텍스트 (O) — 공백 필수
코드블록 줄바꿈 백틱 3개는 각각 별도 줄에 작성
중첩 코드블록 코드블록 안에 코드블록 중첩 불가
중첩 목록 현재 1단계 목록만 지원
취소선 ~~취소선~~ 미지원
목록 페이지 글 목록 페이지에서는 렌더링되지 않음
▣ 마크 다운(Markdown) 문서(Mermaid 포함) 지원합니다.
글보기
제목망보드 마크다운 사용방법2026-04-28 16:46
카테고리컴퓨터 꿀팁
작성자 Level 10

# 망보드 마크다운 사용방법


망보드 게시판에서 마크다운 문법으로 글을 작성할 수 있습니다. 플러그인 활성화만으로 **모든 망보드 게시판에 자동 적용**됩니다.


---


## 지원 문법 전체 목록


```mermaid

flowchart LR

    A((마크다운<br/>문법)) --> B["제목 H1-4"]

    A --> C["굵게 / 기울임"]

    A --> D["인라인 코드"]

    A --> E["코드 블록"]

    A --> F["인용문"]

    A --> G["구분선"]

    A --> H["표"]

    A --> I["목록"]

    A --> J["링크 / 이미지"]

    A --> K["Mermaid 다이어그램"]

```


---


## 1. 제목 (Headers)


`#` 뒤에 **반드시 공백**을 입력합니다.


| 작성법 | 결과 |

|--------|------|

| `# 제목` | H1 — 파란색, 그라데이션 보더 |

| `## 제목` | H2 — 검정, 그라데이션 보더 |

| `### 제목` | H3 — 회색, 짧은 보더 |

| `#### 제목` | H4 — 회색, 더 짧은 보더 |


> **주의**: `#제목` (공백 없음)은 제목으로 인식되지 않습니다.


---


## 2. 텍스트 스타일


| 작성법 | 결과 | 설명 |

|--------|------|------|

| `**굵은 텍스트**` | **굵은 텍스트** | 별표 2개 |

| `*기울임 텍스트*` | *기울임 텍스트* | 별표 1개 |

| `` `var x = 10;` `` | `var x = 10;` | 백틱으로 감싸기 |


---


## 3. 코드 블록 (Code Blocks)


백틱 3개로 감싸며, 첫 줄에 언어명을 지정하면 **구문 강조 + 라인 번호**가 자동 적용됩니다.


| 언어 지정 예 | 결과 |

|-------------|------|

| `javascript` | JavaScript 구문 강조 + 라인 번호 + 복사 버튼 |

| `python` | Python 구문 강조 + 라인 번호 + 복사 버튼 |

| `bash` | Shell 구문 강조 + 라인 번호 + 복사 버튼 |

| (생략) | 일반 텍스트 (다른 배경색, 라인 번호 없음) |


### 지원 언어 (30+)


| 언어 | 지정어 | 별칭 |

|------|--------|------|

| Bash/Shell | `bash` | `sh`, `zsh` |

| Python | `python` | `py` |

| JavaScript | `javascript` | `js` |

| TypeScript | `typescript` | `ts` |

| PHP | `php` | — |

| Java | `java` | — |

| Go | `go` | — |

| Rust | `rust` | — |

| SQL | `sql` | — |

| YAML | `yaml` | `yml` |

| JSON | `json` | — |

| CSS | `css` | — |

| HTML | `html` | `xml` |

| Docker | `docker` | `dockerfile` |

| INI/Properties | `ini` | `properties`, `env` |

| C# | `csharp` | `cs` |

| Ruby | `ruby` | — |

| C/C++ | `c` / `cpp` | — |

| Markdown | `markdown` | `md` |

| Mermaid | `mermaid` | — (다이어그램으로 렌더링) |


### 언어 자동 감지


언어를 생략하고 코드 블록 **첫 줄에 언어명**만 쓰면 자동 감지합니다. 첫 줄의 언어명은 출력에서 제거됩니다.


---


## 4. 표 (Tables)


`|` 로 열을 구분하며, 두 번째 행은 구분자(`---`)로 헤더와 본문을 나눕니다.


| 작성법 | 결과 |

|--------|------|

| `| 항목 | 내용 |` | 첫 행이 헤더 |

| `|------|------|` | 구분자 |

| `| CPU | i7 |` | 일반 셀 |


> 백틱 안의 `|`는 표 구분자로 인식되지 않습니다.


---


## 5. 목록 (Lists)


| 종류 | 작성법 | 설명 |

|------|--------|------|

| 순서 없는 | `- 항목` 또는 `* 항목` | 불릿 목록 |

| 순서 있는 | `1. 항목` | 번호 목록 |


> 현재 1단계 목록만 지원합니다.


---


## 6. 인용문 (Blockquote)


`>` 로 시작합니다. 여러 줄을 연속으로 쓸 수 있습니다.


---


## 7. 구분선 (Horizontal Rule)


`---` 또는 `***` 세 개 이상을 입력합니다.


---


## 8. 링크 & 이미지


| 종류 | 작성법 | 설명 |

|------|--------|------|

| 링크 | `[링크 텍스트](https://example.com)` | 파란색, 호버 시 밑줄 |

| 이미지 | `![설명](url)` | CKEditor가 삽입한 `<img>` 태그는 자동 보존 |


---


## 9. Mermaid 다이어그램


코드 블록의 언어를 `mermaid`로 지정하면 **SVG 다이어그램**으로 자동 렌더링됩니다.


### 지원 다이어그램 종류


```mermaid

flowchart TD

    A((Mermaid)) --> B["flowchart — 순서도"]

    A --> C["sequence — 시퀀스"]

    A --> D["class — 클래스"]

    A --> E["state — 상태"]

    A --> F["er — ER 다이어그램"]

    A --> G["gantt — 간트 차트"]

    A --> H["pie — 파이 차트"]

    A --> I["mindmap — 마인드맵"]

    A --> J["timeline — 타임라인"]

    A --> K["gitgraph — Git 그래프"]

```


---


### 9-1. Flowchart (순서도)


방향: `TD`(위→아래) 또는 `LR`(좌→우)


```mermaid

flowchart TD

    A[사용자 접속] --> B{로그인 여부}

    B -->|YES| C[대시보드 표시]

    B -->|NO| D[로그인 페이지]

    D --> E[인증 처리]

    E -->|성공| C

    E -->|실패| D

```


```mermaid

flowchart LR

    A[요청] --> B[컨트롤러]

    B --> C[서비스]

    C --> D[DB]

    D --> C

    C --> B

    B --> A

```


```mermaid

flowchart TD

    A[요청] --> B[API Gateway]


    subgraph Frontend["프론트엔드"]

        B

        C[React App]

    end


    subgraph Backend["백엔드"]

        D[Node.js]

        E[Express]

    end


    B --> D

    D --> E

    E --> F[(MySQL)]

```


#### 노드 형태


| 형태 | 작성법 | 용도 |

|------|--------|------|

| 사각형 | `A[텍스트]` | 일반 프로세스 |

| 둥근 사각형 | `A(텍스트)` | 시작/종료 |

| 마름모 | `A{텍스트}` | 조건 분기 |

| 원형 | `A((텍스트))` | 연결점 |

| 데이터베이스 | `A[(텍스트)]` | 데이터베이스 |


#### 링크 라벨


| 작성법 | 의미 |

|--------|------|

| `A -->\|라벨\| B` | 화살표 + 라벨 |

| `A ---\|라벨\| B` | 선 + 라벨 |

| `A -.\->\|라벨\| B` | 점선 화살표 |

| `A ==>\|라벨\| B` | 굵은 화살표 |


---


### 9-2. Sequence Diagram (시퀀스 다이어그램)


```mermaid

sequenceDiagram

    actor 사용자

    participant 클라이언트

    participant 서버

    participant DB


    사용자->>클라이언트: 버튼 클릭

    클라이언트->>서버: API 요청

    서버->>DB: 쿼리 실행

    DB-->>서버: 결과 반환

    서버-->>클라이언트: JSON 응답

    클라이언트-->>사용자: 화면 갱신

```


| 메시지 유형 | 작성법 | 의미 |

|-------------|--------|------|

| 실선 화살표 | `A->>B: 메시지` | 동기 요청 |

| 점선 화살표 | `A-->>B: 메시지` | 응답 |


| 참여자 유형 | 작성법 |

|-------------|--------|

| 사람 아이콘 | `actor 사용자` |

| 사각형 | `participant 서버` |

| 별칭 지정 | `participant DB as 데이터베이스` |


```mermaid

sequenceDiagram

    client->>server: 요청

    loop 최대 3회 재시도

        server->>API: 데이터 조회

        API-->>server: 응답

    end

    server-->>client: 최종 결과

```


---


### 9-3. Class Diagram (클래스 다이어그램)


```mermaid

classDiagram

    class Animal {

        +String name

        +int age

        +makeSound() void

    }

    class Dog {

        +String breed

        +fetch() void

    }

    class Cat {

        +bool isIndoor

        +purr() void

    }

    Animal <|-- Dog

    Animal <|-- Cat

```


| 관계 | 작성법 | 의미 |

|------|--------|------|

| 상속 | `A <\|-- B` | B가 A를 상속 |

| 합성 | `A *-- B` | B가 A에 포함 |

| 집합 | `A o-- B` | — |

| 연관 | `A --> B` | — |

| 의존 | `A ..> B` | — |


---


### 9-4. State Diagram (상태 다이어그램)


```mermaid

stateDiagram-v2

    [*] --> 대기

    대기 --> 처리중: 요청 수신

    처리중 --> 완료: 성공

    처리중 --> 실패: 에러

    실패 --> 대기: 재시도

    완료 --> [*]

```


---


### 9-5. ER Diagram (ER 다이어그램)


```mermaid

erDiagram

    USER ||--o{ POST : "작성"

    USER ||--o{ COMMENT : "작성"

    POST ||--o{ COMMENT : "포함"

    POST }o--|| CATEGORY : "속함"


    USER {

        int id PK

        string name

        string email

    }

    POST {

        int id PK

        int user_id FK

        string title

        text content

    }

```


---


### 9-6. Gantt Chart (간트 차트)


```mermaid

gantt

    title 프로젝트 일정

    dateFormat  YYYY-MM-DD

    section 기획

    요구사항 분석   :a1, 2026-04-01, 7d

    설계           :after a1, 5d

    section 개발

    프론트엔드     :2026-04-15, 14d

    백엔드        :2026-04-15, 14d

    section 테스트

    통합 테스트     :2026-05-01, 7d

    버그 수정       :2026-05-08, 5d

```


---


### 9-7. Pie Chart (파이 차트)


```mermaid

pie title 트래픽 소스 비율

    "직접 접속" : 35

    "검색 엔진" : 30

    "소셜 미디어" : 20

    "외부 링크" : 15

```


---


### 9-8. Mindmap (마인드맵)


```mermaid

flowchart TD

    A((서버<br/>아키텍처)) --> B["웹 서버<br/>Nginx, SSL"]

    A --> C["애플리케이션<br/>Node.js, Express"]

    A --> D["데이터베이스<br/>MySQL, Redis"]

    A --> E["인프라<br/>Docker, GitHub Actions"]

```


> Mermaid mindmap은 한글 특수문자에서 오류가 발생할 수 있습니다. 이 경우 flowchart를 사용하세요.


---


### 9-9. Timeline (타임라인)


```mermaid

timeline

    title 프로젝트 진행 이력

    2026-04 : 기획 완료

             : 디자인 시안 승인

    2026-05 : 개발 완료

             : QA 테스트 통과

    2026-06 : 베타 릴리즈

             : 정식 출시

```


---


### 9-10. Gitgraph (Git 그래프)


```mermaid

gitGraph

    commit id: "init"

    commit id: "feature-add"

    branch develop

    checkout develop

    commit id: "dev-1"

    commit id: "dev-2"

    checkout main

    merge develop id: "merge-dev"

    commit id: "release"

```


---


## 10. 실전 예시


### 예시 1: PC 조립 가이드


```mermaid

flowchart TD

    A["1. CPU 장착"] --> B["2. RAM 장착"]

    B --> C["3. M.2 SSD 장착"]

    C --> D["4. 쿨러 장착"]

    D --> E["5. GPU 장착"]

    E --> F["6. BIOS 설정"]

    F --> G["7. OS 설치"]

```


### 예시 2: 시스템 아키텍처


```mermaid

flowchart TD

    A["사용자"] --> B["Nginx"]

    B --> C["WordPress"]

    C --> D["MangBoard"]

    D --> E[(MariaDB)]

    C --> F["Redis 캐시"]

```


```mermaid

sequenceDiagram

    client->>nginx: HTTPS 요청

    nginx->>wordpress: 프록시 전달

    wordpress->>db: 쿼리

    db-->>wordpress: 데이터

    wordpress-->>nginx: HTML

    nginx-->>client: 응답

```


### 예시 3: 트러블슈팅 가이드


```mermaid

flowchart TD

    Start["장애 발생"] --> Check{"서버 상태 확인"}

    Check -->|"정상"| App{"애플리케이션 확인"}

    Check -->|"다운"| Restart["서버 재시작"]

    App -->|"정상"| Cache["캐시 클리어"]

    App -->|"에러"| Log["로그 확인"]

    Log --> Fix["원인 수정"]

    Fix --> Cache

    Restart --> Verify["정상 동작 확인"]

    Cache --> Verify

```


---


## 주의사항


| 항목 | 설명 |

|------|------|

| 제목 공백 | `#텍스트` (X) → `# 텍스트` (O) — 공백 필수 |

| 코드블록 줄바꿈 | 백틱 3개는 각각 별도 줄에 작성 |

| 중첩 코드블록 | 코드블록 안에 코드블록 중첩 불가 |

| 중첩 목록 | 현재 1단계 목록만 지원 |

| 취소선 | `~~취소선~~` 미지원 |

| 목록 페이지 | 글 목록 페이지에서는 렌더링되지 않음 |


댓글
자동등록방지
(자동등록방지 숫자를 입력해 주세요)