{"id":5415,"date":"2025-12-23T18:14:39","date_gmt":"2025-12-23T18:14:39","guid":{"rendered":"https:\/\/blog.ggonggong.com\/?p=5415"},"modified":"2025-12-23T18:14:39","modified_gmt":"2025-12-23T18:14:39","slug":"%eb%a8%b8%eb%a9%94%ec%9d%b4%eb%93%9c%ec%b0%a8%ed%8a%b8%ec%9d%98-%ec%a2%85%eb%a5%98-6","status":"publish","type":"post","link":"https:\/\/blog.ggonggong.com\/?p=5415","title":{"rendered":"\uba38\uba54\uc774\ub4dc\ucc28\ud2b8\uc758 \uc885\ub958"},"content":{"rendered":"<p><!-- Blog Post Metadata --><\/p>\n<div data-blog-metadata>\n<\/div>\n<h2 style=\"font-size: 2rem;font-weight: 700;margin: 1.75rem 0 1rem;color: #2d3748;border-bottom: 3px solid #667eea;padding-bottom: 0.5rem\">\ud83c\udf0a \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\uc758 \ubaa8\ub4e0 \uac83: 10\uac00\uc9c0 \uc720\ud615\ubcc4 \ud65c\uc6a9 \uac00\uc774\ub4dc\uc640 \uc2e4\uc81c \uc608\uc2dc<\/h2>\n<p style=\"line-height: 1.8;margin: 1rem 0;color: #2d3748;font-size: 1.05rem\"><strong style=\"font-weight: 700;color: #1a202c\">(Mermaid Chart Types: \ube44\uc988\ub2c8\uc2a4, \uac1c\ubc1c, \ubb38\uc11c\ud654\uc5d0 \ucd5c\uc801\ud654\ub41c \uac00\uc77c\ub4dc \ub9f5)<\/strong><\/p>\n<h3 style=\"font-size: 1.5rem;font-weight: 600;margin: 1.5rem 0 0.75rem;color: #4a5568\">\uc11c\ub860: \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc758 \ud310\ub3c4\ub97c \ubc14\uafbc \u2018\uba38\uba54\uc774\ub4dc\u2019 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/h3>\n<p style=\"line-height: 1.8;margin: 1rem 0;color: #2d3748;font-size: 1.05rem\">\ubcf5\uc7a1\ud55c \uc815\ubcf4\ub97c \uc2dc\uac01\ud654\ud558\uace0 \uc2f6\uc744 \ub54c \ud50c\ub85c\uc6b0\ucc28\ud2b8\ubd80\ud130 \ub808\uc774\uc544\uc6c3 \uc124\uacc4\uae4c\uc9c0 \uace0\ubbfc\ub418\uc168\ub098\uc694? **\ucf54\ub4dc \uba87 \uc904\ub85c \uc778\uc0ac\uc774\ud2b8\ub97c \uc2dc\uac01\ud654\ud558\ub294 \uba38\uba54\uc774\ub4dc(Mermaid.js)**\uac00 \ub2f5\uc785\ub2c8\ub2e4. \uc774 \uc624\ud508\uc18c\uc2a4 \ub3c4\uad6c\ub294 \uac1c\ubc1c\uc790, \uae30\ud68d\uc790, \uad50\uc721\uc790 \ubaa8\ub450\uac00 <strong style=\"font-weight: 700;color: #1a202c\">\ub9c8\ud06c\ub2e4\uc6b4 \ud658\uacbd\uc5d0\uc11c \uc804\ubb38 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uc0dd\uc131<\/strong>\ud560 \uc218 \uc788\uac8c \ud569\ub2c8\ub2e4. \uac04\ub2e8\ud55c \ud14d\uc2a4\ud2b8 \ubb38\ubc95\ub9cc\uc73c\ub85c\ub3c4 \uc9c1\uad00\uc801\uc778 \ucc28\ud2b8\ub97c \ub80c\ub354\ub9c1\ud55c\ub2e4\ub294 \uc810\uc5d0\uc11c \ud611\uc5c5 \ud6a8\uc728\uc744 \ud601\uc2e0\uc801\uc73c\ub85c \ub192\uc774\uc8e0. GitLab, Notion, VS Code \ub4f1 \uc8fc\uc694 \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uae30\ubcf8 \uc9c0\uc6d0\ub418\uba70, 2023\ub144 \uae30\uc900 <strong style=\"font-weight: 700;color: #1a202c\">\uc6d4\uac04 8\ubc31\ub9cc \uc774\uc0c1\uc758 npm \ub2e4\uc6b4\ub85c\ub4dc<\/strong>\ub97c \uae30\ub85d\ud560 \ub9cc\ud07c \ud655\uc0b0 \uc911\uc778 \uc774 \ub3c4\uad6c\uc758 \ud575\uc2ec \ucc28\ud2b8 \uc720\ud615\uc744 \ud30c\ud5e4\uccd0\ubd05\ub2c8\ub2e4.<\/p>\n<hr style=\"border: none;height: 2px;background: linear-gradient(to right, transparent, #cbd5e0, transparent);margin: 2rem 0\">\n<h3 style=\"font-size: 1.5rem;font-weight: 600;margin: 1.5rem 0 0.75rem;color: #4a5568\">\ud83e\udde0 10\uac00\uc9c0 \uba38\uba54\uc774\ub4dc \ucc28\ud2b8 \uc720\ud615\uc758 \uc644\ubcbd \ud65c\uc6a9 \uac00\uc774\ub4dc<\/h3>\n<h4>1. Flowchart (\ud750\ub984\ub3c4)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: \uc791\uc5c5 \ud504\ub85c\uc138\uc2a4\ub098 \uc54c\uace0\ub9ac\uc998\uc758 \uc21c\ucc28\uc801 \ud750\ub984\uc744 \ud45c\ud604.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: \uc5c5\ubb34 \uc808\ucc28 \uc815\uc758, \uc758\uc0ac\uacb0\uc815 \ud2b8\ub9ac, \uc2dc\uc2a4\ud15c \uc544\ud0a4\ud14d\ucc98.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">flowchart LR  \n  A[\ub85c\uadf8\uc778 \uc694\uccad] --&gt; B{\uc778\uc99d \ud655\uc778}  \n  B --&gt;|\uc131\uacf5| C[\uba54\uc778 \ud654\uba74 \uc9c4\uc785]  \n  B --&gt;|\uc2e4\ud328| D[\uc7ac\uc2dc\ub3c4 \ud31d\uc5c5]  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>2. Sequence Diagram (\uc21c\ucc28\ub3c4)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: \ucef4\ud3ec\ub10c\ud2b8 \uac04 \uc0c1\ud638\uc791\uc6a9\uc758 \uc2dc\uac04\uc801 \uc21c\uc11c\ub97c \uac15\uc870.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: API \ud638\ucd9c \ud750\ub984, \ub9c8\uc774\ud06c\ub85c\uc11c\ube44\uc2a4 \ud1b5\uc2e0, \uc0ac\uc6a9\uc790-\uc2dc\uc2a4\ud15c \uc778\ud130\ub799\uc158.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">sequenceDiagram  \n  \uc0ac\uc6a9\uc790-&gt;&gt;\uc11c\ubc84: GET \/data \uc694\uccad  \n  \uc11c\ubc84-&gt;&gt;DB: SELECT Query \uc2e4\ud589  \n  DB--&gt;&gt;\uc11c\ubc84: \uacb0\uacfc \ubc18\ud658  \n  \uc11c\ubc84--&gt;&gt;\uc0ac\uc6a9\uc790: JSON \uc751\ub2f5  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>3. Gantt Chart (\uac04\ud2b8 \ucc28\ud2b8)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: \ud504\ub85c\uc81d\ud2b8 \uc77c\uc815\uacfc \ud0dc\uc2a4\ud06c\uc758 \uae30\uac04\uc744 \uc2dc\uac01\ud654.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: \uc2a4\ud504\ub9b0\ud2b8 \uacc4\ud68d, \ub9ac\uc18c\uc2a4 \ud560\ub2f9, \ub9c8\uc77c\uc2a4\ud1a4 \ucd94\uc801.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">gantt  \n  title \ud504\ub85c\uc81d\ud2b8 \uc77c\uc815  \n  dateFormat  YYYY-MM-DD  \n  section \uac1c\ubc1c  \n  \ubc31\uc5d4\ub4dc API   :active,  des1, 2023-10-01, 14d  \n  \ud504\ub860\ud2b8\uc5d4\ub4dc \uad6c\ud604 :         des2, after des1, 7d  \n  \ud14c\uc2a4\ud2b8       :         des3, after des2, 5d  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>4. Pie Chart (\ud30c\uc774 \ucc28\ud2b8)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: \ub370\uc774\ud130\uc758 \ube44\uc728\uc744 \uc6d0\ud615 \ubd84\ud560\ub85c \ud45c\ud604.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: \uc608\uc0b0 \ubd84\ubc30, \uc124\ubb38\uc870\uc0ac \uacb0\uacfc, \ud2b8\ub798\ud53d \ubd84\uc11d.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">pie title \uac1c\ubc1c \uc5b8\uc5b4 \uc0ac\uc6a9 \ube44\uc728  \n  \u201cJava\u201d : 45  \n  \u201cPython\u201d : 30  \n  \u201cJavaScript\u201d : 25  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>5. State Diagram (\uc0c1\ud0dc \ub2e4\uc774\uc5b4\uadf8\ub7a8)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: \uac1d\uccb4\uc758 \uc0c1\ud0dc \ubcc0\ud654\uc640 \uc804\uc774 \uc870\uac74\uc744 \ubaa8\ub378\ub9c1.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: \uc8fc\ubb38 \uc0c1\ud0dc \uba38\uc2e0, \uc0ac\uc6a9\uc790 \uc138\uc158 \uad00\ub9ac, IoT \ub514\ubc14\uc774\uc2a4 \ub3d9\uc791.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">stateDiagram-v2  \n  [*] --&gt; \ub300\uae30\uc911  \n  \ub300\uae30\uc911 --&gt; \ucc98\ub9ac\uc911 : \uc8fc\ubb38 \ubc1c\uc0dd  \n  \ucc98\ub9ac\uc911 --&gt; \uc644\ub8cc : \uacb0\uc81c \ud655\uc778  \n  \ucc98\ub9ac\uc911 --&gt; \ucde8\uc18c : \uc8fc\ubb38 \ud3d0\uae30  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>6. Entity Relationship Diagram (ERD)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc758 \ud14c\uc774\ube14 \uad00\uacc4\ub97c \uad6c\uc870\ud654.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: DB \uc2a4\ud0a4\ub9c8 \uc124\uacc4, \ub370\uc774\ud130 \ubaa8\ub378\ub9c1.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">erDiagram  \n  CUSTOMER ||--o{ ORDER : \uc8fc\ubb38  \n  ORDER ||--|{ LINE-ITEM : \ud3ec\ud568  \n  PRODUCT ||--|{ LINE-ITEM : \ub300\uc0c1  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>7. Git Graph (\uae43 \uadf8\ub798\ud504)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: \ube0c\ub79c\uce58 \ubc0f \ucee4\ubc0b \ud788\uc2a4\ud1a0\ub9ac\ub97c \uc2dc\uac01\uc801 \ud2b8\ub9ac\ub85c \ud45c\ud604.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: \ucf54\ub4dc \ubcd1\ud569 \uc774\ub825 \ubd84\uc11d, \ubc30\ud3ec \uc804\ub7b5 \uc2dc\ubbac\ub808\uc774\uc158.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">gitGraph  \n  commit  \n  branch feature  \n  checkout feature  \n  commit  \n  checkout main  \n  merge feature  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>8. Mind Map (\ub9c8\uc778\ub4dc\ub9f5)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: \uc544\uc774\ub514\uc5b4\ub97c \uc911\uc2ec \uc8fc\uc81c\uc5d0\uc11c \uacc4\uce35\uc801\uc73c\ub85c \ud655\uc7a5.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: \ube0c\ub808\uc778\uc2a4\ud1a0\ubc0d, \ucf58\ud150\uce20 \uad6c\uc870 \uc124\uacc4.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">mindmap  \n  root((\ud504\ub85c\uc81d\ud2b8))  \n    \uae30\ub2a5  \n      \ud68c\uc6d0\uac00\uc785  \n      \uacb0\uc81c \ubaa8\ub4c8  \n    \uae30\uc220 \uc2a4\ud0dd  \n      Frontend  \n      Backend  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>9. User Journey (\uc0ac\uc6a9\uc790 \uc5ec\uc815\ub3c4)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: \uc0ac\uc6a9\uc790\uc758 \uc11c\ube44\uc2a4 \uacbd\ud5d8 \ub2e8\uacc4\ub97c \uc778\uc0ac\uc774\ud2b8\uc640 \ud568\uaed8 \ub3c4\uc2dd\ud654.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: UX \uac1c\uc120 \ud3ec\uc778\ud2b8 \ub3c4\ucd9c, \ud37c\ub110 \ubd84\uc11d.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">journey  \n  title \uc1fc\ud551\ubab0 \uad6c\ub9e4 \ud504\ub85c\uc138\uc2a4  \n  section \uac80\uc0c9  \n    \uc0c1\ud488 \uc870\ud68c : 5: \uc0ac\uc6a9\uc790  \n    \ud544\ud130 \uc801\uc6a9 : 3: \uc0ac\uc6a9\uc790  \n  section \uacb0\uc81c  \n    \uacb0\uc81c \uc644\ub8cc : 1: \uc0ac\uc6a9\uc790  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>10. Class Diagram (\ud074\ub798\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8)<\/h4>\n<ul style=\"margin: 1rem 0;padding-left: 2rem;list-style-type: disc\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc815\uc758<\/strong>: OOP \uc2dc\uc2a4\ud15c\uc758 \ud074\ub798\uc2a4 \uad00\uacc4\uc640 \uc18d\uc131\uc744 \uad6c\uc870\ud654.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc0ac\uc6a9 \uc2dc\ub098\ub9ac\uc624<\/strong>: \ucf54\ub4dc \uad6c\uc870 \ubb38\uc11c\ud654, \uc0c1\uc18d\/\uc778\ud130\ud398\uc774\uc2a4 \uc124\uacc4.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\uc608\uc2dc \ucf54\ub4dc<\/strong>:\n<pre style=\"background: #2d3748;color: #e2e8f0;padding: 1.5rem;border-radius: 0.5rem;margin: 1.5rem 0;font-family: 'Courier New', monospace;font-size: 0.95rem;line-height: 1.6\"><code class=\"language-mermaid\">classDiagram  \n  class User {  \n    +String name  \n    +void login()  \n  }  \n  User &lt;|-- Admin : \uc0c1\uc18d  \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<hr style=\"border: none;height: 2px;background: linear-gradient(to right, transparent, #cbd5e0, transparent);margin: 2rem 0\">\n<h3 style=\"font-size: 1.5rem;font-weight: 600;margin: 1.5rem 0 0.75rem;color: #4a5568\">\u2705 \uc65c \uba38\uba54\uc774\ub4dc\uc778\uac00? \ud0c0 \ub3c4\uad6c \ub300\ube44 \uc555\ub3c4\uc801 \uac15\uc810<\/h3>\n<table style=\"width: 100%;border-collapse: collapse;margin: 1.5rem 0\">\n<thead style=\"background: #667eea;color: white\">\n<tr>\n<th style=\"padding: 1rem;text-align: left;font-weight: 600;border: 1px solid #e2e8f0\">\uae30\ub2a5<\/th>\n<th style=\"padding: 1rem;text-align: left;font-weight: 600;border: 1px solid #e2e8f0\">\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 0.75rem;border: 1px solid #e2e8f0;color: #2d3748\"><strong style=\"font-weight: 700;color: #1a202c\">\ubb34\ub8cc \uc624\ud508\uc18c\uc2a4<\/strong><\/td>\n<td style=\"padding: 0.75rem;border: 1px solid #e2e8f0;color: #2d3748\">\ubcc4\ub3c4 \uad6c\ub3c5 \uc5c6\uc774 \ubaa8\ub4e0 \uae30\ub2a5 \ubb34\uc81c\ud55c \uc0ac\uc6a9<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 0.75rem;border: 1px solid #e2e8f0;color: #2d3748\"><strong style=\"font-weight: 700;color: #1a202c\">\ucf54\ub4dc \uae30\ubc18 \uc0dd\uc131<\/strong><\/td>\n<td style=\"padding: 0.75rem;border: 1px solid #e2e8f0;color: #2d3748\">\uc218\uc791\uc5c5 \ub4dc\ub798\uadf8 \ubd88\ud544\uc694 \u2192 \ubc84\uc804 \uad00\ub9ac(Git)\uc640 \uc5f0\ub3d9 \uc6a9\uc774<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 0.75rem;border: 1px solid #e2e8f0;color: #2d3748\"><strong style=\"font-weight: 700;color: #1a202c\">\uc2e4\uc2dc\uac04 \ub80c\ub354\ub9c1<\/strong><\/td>\n<td style=\"padding: 0.75rem;border: 1px solid #e2e8f0;color: #2d3748\">VS Code \ud655\uc7a5\ud329 \ub4f1\uc73c\ub85c \ud3b8\uc9d1\uacfc \ub3d9\uc2dc\uc5d0 \uc2dc\uac01 \ud655\uc778 \uac00\ub2a5<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 0.75rem;border: 1px solid #e2e8f0;color: #2d3748\"><strong style=\"font-weight: 700;color: #1a202c\">\ud655\uc7a5\uc131<\/strong><\/td>\n<td style=\"padding: 0.75rem;border: 1px solid #e2e8f0;color: #2d3748\">\ucee4\uc2a4\ud140 \ud14c\ub9c8, \ud50c\ub7ec\uadf8\uc778 \uc9c0\uc6d0 (e.g., \ub2e4\ud06c \ubaa8\ub4dc, \ud3f0\ud2b8 \ubcc0\uacbd)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote style=\"border-left: 4px solid #667eea;padding-left: 1.5rem;margin: 1.5rem 0;color: #4a5568;font-style: italic;background: #f7fafc;padding: 1rem 1.5rem;border-radius: 0.25rem\">\n<p style=\"line-height: 1.8;margin: 1rem 0;color: #2d3748;font-size: 1.05rem\">\ud83d\ude80 \uc2e4\uc81c \uc801\uc6a9 \uc0ac\ub840: AWS\ub294 \uba38\uba54\uc774\ub4dc\ub97c \ud65c\uc6a9\ud574 <strong style=\"font-weight: 700;color: #1a202c\">\ub0b4\ubd80 \uc2dc\uc2a4\ud15c \uc544\ud0a4\ud14d\ucc98 \ubb38\uc11c\ub97c \uc790\ub3d9\ud654<\/strong>\ud558\uc5ec \ud300 \uac04 \uc18c\ud1b5 \ud6a8\uc728\uc744 40% \ud5a5\uc0c1\uc2dc\ucf30\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n<hr style=\"border: none;height: 2px;background: linear-gradient(to right, transparent, #cbd5e0, transparent);margin: 2rem 0\">\n<h3 style=\"font-size: 1.5rem;font-weight: 600;margin: 1.5rem 0 0.75rem;color: #4a5568\">\uacb0\ub860: \uc624\ub298\ubd80\ud130 \uc2dc\uc791\ud558\ub294 \uba38\uba54\uc774\ub4dc \uc0dd\uc0b0\uc131 \ub808\ubca8\uc5c5<\/h3>\n<p style=\"line-height: 1.8;margin: 1rem 0;color: #2d3748;font-size: 1.05rem\">\uba38\uba54\uc774\ub294 <strong style=\"font-weight: 700;color: #1a202c\">\u201c\ubb38\uc11c\uc640 \ucf54\ub4dc\uc758 \uacbd\uacc4\ub97c \ud5c8\ubb34\ub294\u201d<\/strong> \ud601\uc2e0\uc801\uc778 \ub3c4\uad6c\uc785\ub2c8\ub2e4. \ub2e8\uc21c\ud55c \uc2dc\uac01\ud654\ub97c \ub118\uc5b4 \ube44\uc988\ub2c8\uc2a4 \uc758\uc0ac\uacb0\uc815, \ud14c\ud06c\ub2c8\uceec \ucee4\ubba4\ub2c8\ucf00\uc774\uc158, \uad50\uc721 \uc790\ub8cc \uc81c\uc791\uae4c\uc9c0 \ud3ed\ub113\uac8c \uc4f0\uc774\uc8e0.<\/p>\n<p style=\"line-height: 1.8;margin: 1rem 0;color: #2d3748;font-size: 1.05rem\"><strong style=\"font-weight: 700;color: #1a202c\">\ud83d\ude80 \ubc14\ub85c \ub530\ub77c\ud558\uae30<\/strong>:<\/p>\n<ol style=\"margin: 1rem 0;padding-left: 2rem\">\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><a style=\"color: #667eea;text-decoration: underline;font-weight: 500\" href=\"https:\/\/mermaid.live\">Mermaid \uacf5\uc2dd \uc2e4\uc2b5 \uc5d0\ub514\ud130<\/a>\uc5d0\uc11c \uc608\uc2dc \ucf54\ub4dc\ub97c \ubd99\uc5ec\ub123\uc5b4\ubcf4\uc138\uc694.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\">\ud300\uc758 Confluence\/GitHub Wiki\uc5d0 &#8220;&#8220;mermaid` \ube14\ub85d\uc744 \ucd94\uac00\ud574 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \ud1b5\ud569\ud558\uc138\uc694.<\/li>\n<li style=\"margin: 0.5rem 0;line-height: 1.8;color: #4a5568\"><strong style=\"font-weight: 700;color: #1a202c\">\u201c90%\uc758 \ubcf5\uc7a1\ud568\uc744 10%\uc758 \ucf54\ub4dc\ub85c \ub2e8\uc21c\ud654\u201d<\/strong> \ud55c\ub2e4\ub294 \ucca0\ub3c4\ub97c \uccb4\ud5d8\ud574\ubcf4\uc2dc\uae38 \uad8c\ud569\ub2c8\ub2e4!<\/li>\n<\/ol>\n<blockquote style=\"border-left: 4px solid #667eea;padding-left: 1.5rem;margin: 1.5rem 0;color: #4a5568;font-style: italic;background: #f7fafc;padding: 1rem 1.5rem;border-radius: 0.25rem\">\n<p style=\"line-height: 1.8;margin: 1rem 0;color: #2d3748;font-size: 1.05rem\">\ud83d\udcc8 \uba38\uba54\uc774\ub4dc \ub9c8\uc2a4\ud130\ub9ac\uac00 \ub418\uba74 <strong style=\"font-weight: 700;color: #1a202c\">\ubb38\uc11c \uc791\uc131 \uc2dc\uac04 60% \uc808\uc57d<\/strong>, <strong style=\"font-weight: 700;color: #1a202c\">\ud504\ub85c\uc81d\ud2b8 \uc774\ud574\ub3c4 2\ubc30 \ud5a5\uc0c1<\/strong>\uc744 \uacbd\ud5d8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc9c0\uae08 \uc2dc\uc791\ud558\uc138\uc694!<\/p>\n<\/blockquote>\n<p><!-- Mermaid.js \ucd08\uae30\ud654 \uc2a4\ud06c\ub9bd\ud2b8 --><\/p>\n<p>\/\/ {<br \/>\n      mermaid.run();<br \/>\n    });<br \/>\n  } else {<br \/>\n    mermaid.run();<br \/>\n  }<br \/>\n\/\/]]&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf0a \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\uc758 \ubaa8\ub4e0 \uac83: 10\uac00\uc9c0 \uc720\ud615\ubcc4 \ud65c\uc6a9 \uac00\uc774\ub4dc\uc640 \uc2e4\uc81c \uc608\uc2dc (Mermaid Chart Types: \ube44\uc988\ub2c8\uc2a4, \uac1c\ubc1c, \ubb38\uc11c\ud654\uc5d0 \ucd5c\uc801\ud654\ub41c \uac00\uc77c\ub4dc \ub9f5) \uc11c\ub860: \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc758 \ud310\ub3c4\ub97c \ubc14\uafbc \u2018\uba38\uba54\uc774\ub4dc\u2019 \ub77c\uc774\ube0c\ub7ec\ub9ac \ubcf5\uc7a1\ud55c \uc815\ubcf4\ub97c \uc2dc\uac01\ud654\ud558\uace0 \uc2f6\uc744 \ub54c \ud50c\ub85c\uc6b0\ucc28\ud2b8\ubd80\ud130 \ub808\uc774\uc544\uc6c3 \uc124\uacc4\uae4c\uc9c0 \uace0\ubbfc\ub418\uc168\ub098\uc694? **\ucf54\ub4dc \uba87 \uc904\ub85c \uc778\uc0ac\uc774\ud2b8\ub97c \uc2dc\uac01\ud654\ud558\ub294 \uba38\uba54\uc774\ub4dc(Mermaid.js)**\uac00 \ub2f5\uc785\ub2c8\ub2e4. \uc774 \uc624\ud508\uc18c\uc2a4 \ub3c4\uad6c\ub294 \uac1c\ubc1c\uc790, \uae30\ud68d\uc790, \uad50\uc721\uc790 \ubaa8\ub450\uac00 \ub9c8\ud06c\ub2e4\uc6b4 \ud658\uacbd\uc5d0\uc11c \uc804\ubb38 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uc0dd\uc131\ud560 \uc218&hellip;&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[52],"tags":[],"class_list":["post-5415","post","type-post","status-publish","format-standard","hentry","category-blog-tips"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5415"}],"version-history":[{"count":1,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5415\/revisions"}],"predecessor-version":[{"id":5416,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5415\/revisions\/5416"}],"wp:attachment":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}