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

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

---

# # 지원 문법 전체 목록

```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)` | 파란색, 호버 시 밑줄 |

| 이미지 | `` | 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단계 목록만 지원 |

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

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