{"id":5487,"date":"2026-02-16T08:01:39","date_gmt":"2026-02-16T08:01:39","guid":{"rendered":"https:\/\/blog.ggonggong.com\/?p=5487"},"modified":"2026-02-16T08:01:39","modified_gmt":"2026-02-16T08:01:39","slug":"%eb%a8%b8%eb%a9%94%ec%9d%b4%eb%93%9c-%ec%b0%a8%ed%8a%b8mermaid-chart-%ec%99%84%eb%b2%bd-%ea%b0%80%ec%9d%b4%eb%93%9c","status":"publish","type":"post","link":"https:\/\/blog.ggonggong.com\/?p=5487","title":{"rendered":"\uba38\uba54\uc774\ub4dc \ucc28\ud2b8(Mermaid Chart) \uc644\ubcbd \uac00\uc774\ub4dc"},"content":{"rendered":"<p><!-- Blog Post Metadata\n{\n  \"title\": \"\uba38\uba54\uc774\ub4dc \ucc28\ud2b8(Mermaid Chart) \uc644\ubcbd \uac00\uc774\ub4dc\",\n  \"description\": \"\uba38\uba54\uc774\ub4dc \ucc28\ud2b8(Mermaid Chart) \uc644\ubcbd \uac00\uc774\ub4dc     \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\ub780 \ubb34\uc5c7\uc778\uac00?  \ucd5c\uadfc \uac1c\ubc1c\uc790 \ube14\ub85c\uadf8, \uae30\uc220 \ubb38\uc11c, \uc0ac\ub0b4 \uc704\ud0a4, \uc624\ud508\uc18c\uc2a4 \ud504\ub85c\uc81d\ud2b8 \ubb38\uc11c\uc5d0\uc11c \uc885\uc885 \ub208\uc5d0 \ub744\ub294 \ucf54\ub4dc \ube14\ub85d\uc774 \ud558\ub098 \uc788\uc2b5\ub2c8\ub2e4. \ubc14\ub85c \ud14d\uc2a4\ud2b8\ub85c \uadf8\ub9b4 \uc218 \uc788\ub294 \ub2e4\uc774\uc5b4\uadf8\ub7a8,   \uba38\uba54\uc774\ub4dc(Mermaid)   \ucc28\",\n  \"author\": \"AI Blog Generator\",\n  \"generator\": \"AI Blog Generator v1.0.0\",\n  \"createdAt\": \"2026-02-16T08:01:38.240Z\"\n}\n--><\/p>\n<h1 style=\"font-size: 2.5rem; font-weight: 800; margin: 2rem 0 1rem; color: #1a202c; line-height: 1.2;\">\uba38\uba54\uc774\ub4dc \ucc28\ud2b8(Mermaid Chart) \uc644\ubcbd \uac00\uc774\ub4dc<\/h1>\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;\">\uba38\uba54\uc774\ub4dc \ucc28\ud2b8\ub780 \ubb34\uc5c7\uc778\uac00?<\/h2>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\">\ucd5c\uadfc \uac1c\ubc1c\uc790 \ube14\ub85c\uadf8, \uae30\uc220 \ubb38\uc11c, \uc0ac\ub0b4 \uc704\ud0a4, \uc624\ud508\uc18c\uc2a4 \ud504\ub85c\uc81d\ud2b8 \ubb38\uc11c\uc5d0\uc11c \uc885\uc885 \ub208\uc5d0 \ub744\ub294 \ucf54\ub4dc \ube14\ub85d\uc774 \ud558\ub098 \uc788\uc2b5\ub2c8\ub2e4. \ubc14\ub85c \ud14d\uc2a4\ud2b8\ub85c \uadf8\ub9b4 \uc218 \uc788\ub294 \ub2e4\uc774\uc5b4\uadf8\ub7a8, <strong style=\"font-weight: 700; color: #1a202c;\">\uba38\uba54\uc774\ub4dc(Mermaid)<\/strong> \ucc28\ud2b8\uc785\ub2c8\ub2e4. Mermaid\ub294 \ubcf5\uc7a1\ud55c \ub3c4\uc2dd, \ud750\ub984\ub3c4, \uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 \ub4f1 \ub2e4\uc591\ud55c \ucc28\ud2b8\ub97c \ub9c8\ud06c\ub2e4\uc6b4 \ubb38\uc11c\ucc98\ub7fc \uac04\ub2e8\ud558\uac8c \uc791\uc131\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \ub3c4\uad6c\uc785\ub2c8\ub2e4.<\/p>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\">\uc774 \uae00\uc5d0\uc11c\ub294 Mermaid \ucc28\ud2b8\uac00 \ubb34\uc5c7\uc778\uc9c0, \uc5b4\ub5a4 \uc2dd\uc73c\ub85c \uc791\ub3d9\ud558\ub294\uc9c0, \uc2e4\ubb34\uc5d0\uc11c \uc5b4\ub5bb\uac8c \ud65c\uc6a9\ub418\ub294\uc9c0, \uadf8\ub9ac\uace0 \uc2e4\uc81c \ucf54\ub4dc \uc608\uc2dc \ubc0f \ud65c\uc6a9 \uafc0\ud301\uae4c\uc9c0 \ucd5c\ub300\ud55c \uc0c1\uc138\ud558\uac8c \uc548\ub0b4\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uac1c\ubc1c\uc790\ubfd0\ub9cc \uc544\ub2c8\ub77c \ud559\uc0dd, \uae30\ud68d\uc790, \ub514\uc790\uc774\ub108 \ub4f1 \ub2e4\uc591\ud55c \ubd84\uc57c\uc758 \ubd84\ub4e4\uc5d0\uac8c \ub3c4\uc6c0\uc774 \ub420 \uc2e4\uc6a9 \uac00\uc774\ub4dc\uac00 \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">\uba38\uba54\uc774\ub4dc \ucc28\ud2b8\uc758 \uc815\uc758\uc640 \ud2b9\uc9d5<\/h2>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">Mermaid\ub780?<\/h3>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\">\uba38\uba54\uc774\ub4dc(Mermaid)\ub294 **\uac04\ub2e8\ud55c \ud14d\uc2a4\ud2b8 \uae30\ubc18 DSL(Domain Specific Language, \ub3c4\uba54\uc778 \ud2b9\ud654 \uc5b8\uc5b4)**\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e4\uc591\ud55c \uc885\ub958\uc758 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \ube60\ub974\uac8c \uc791\uc131\ud558\uace0, \uc774\ub97c SVG, PNG \ub4f1 \uc2dc\uac01\uc801 \uacb0\uacfc\ubb3c\ub85c \ub80c\ub354\ub9c1\ud574\uc8fc\ub294 \uc624\ud508\uc18c\uc2a4 \ub3c4\uad6c\uc785\ub2c8\ub2e4.<\/p>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">\uc8fc\uc694 \ud2b9\uc9d5<\/h3>\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;\">\ucf54\ub4dc\ub85c \ub2e4\uc774\uc5b4\uadf8\ub7a8 \uc0dd\uc131<\/strong>: \ubcf5\uc7a1\ud55c \uadf8\ub798\ud53d UI \uc5c6\uc774, \uc21c\uc218 \ud14d\uc2a4\ud2b8 \ucf54\ub4dc\ub85c \ub2e4\uc774\uc5b4\uadf8\ub7a8 \uc791\uc131<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ub9c8\ud06c\ub2e4\uc6b4\uacfc \ud638\ud658<\/strong>: \uc5ec\ub7ec \ub9c8\ud06c\ub2e4\uc6b4 \uc9c0\uc6d0 \ubb38\uc11c \ud50c\ub7ab\ud3fc(GitHub, Notion, Obsidian \ub4f1)\uc5d0\uc11c \uc0ac\uc6a9 \uac00\ub2a5<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ub2e4\uc591\ud55c \ucc28\ud2b8 \uc9c0\uc6d0<\/strong>: Flowchart, Sequence Diagram, Gantt Chart, Class Diagram \ub4f1 \uc9c0\uc6d0<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ubc84\uc804 \uad00\ub9ac \uc218\uc6d4<\/strong>: \ucf54\ub4dc\ud615\ud0dc\ub77c\uc11c Git \ub4f1\uc73c\ub85c \ucda9\ub3cc \uc5c6\uc774 \uad00\ub9ac \uac00\ub2a5<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\uc790\ub3d9\ud654\/\uc7ac\uc0ac\uc6a9 \uc6a9\uc774<\/strong>: \ubcc0\uc218\ub098 \ud558\uc704 \ubaa8\ub4c8 \uc7ac\ud65c\uc6a9 \uac00\ub2a5<\/li>\n<\/ul>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">Mermaid\uac00 \uc8fc\ubaa9\ubc1b\ub294 \uc774\uc720<\/h2>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\">\uae30\uc874\uc5d0 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uadf8\ub9b4 \ub54c \ub3d9\uc801\uc73c\ub85c, \ud639\uc740 \ud654\uba74\uc0c1\uc5d0\uc11c \uc9c1\uc811 \ub4dc\ub798\uadf8&amp;\ub4dc\ub86d\uc744 \uc774\uc6a9\ud55c** Visio, <a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"http:\/\/draw.io\">draw.io<\/a>, Lucidchart** \ub4f1 \ub3c4\uad6c\ub97c \ub9ce\uc774 \uc37c\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ub2e4\uc74c \ubb38\uc81c\uc810\uc774 \uc788\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\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;\">\uc218\ub3d9 \uc791\uc5c5 \ubc18\ubcf5, \ube44\ud6a8\uc728\uc801<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\">\uacf5\ub3d9\ud3b8\uc9d1, \ubc84\uc804\uad00\ub9ac \uc5b4\ub824\uc6c0 (\ucda9\ub3cc, \ud1b5\ud569 \ub09c\uc774\ub3c4 \ud07c)<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\">\ucf54\ub4dc\ud654\ub41c \uc808\ucc28\/\ud504\ub85c\uc138\uc2a4 \uad00\uc810\uc5d0\uc11c \ubb38\uc11c \uc790\ub3d9\ud654 \uc5b4\ub824\uc6c0<\/li>\n<\/ul>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\"><strong style=\"font-weight: 700; color: #1a202c;\">Mermaid\ub294 \ubc14\ub85c \uc774 \ub2e8\uc810\uc744 \ud574\uacb0<\/strong>\ud574 \uc90d\ub2c8\ub2e4. \uc989, \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 &quot;\ucf54\ub4dc\ud654&quot;\ud568\uc73c\ub85c\uc368 \ud611\uc5c5, \uc790\ub3d9\ud654, \ubb38\uc11c\ud654 \uacfc\uc815\uc744 \ud601\uc2e0\uc801\uc73c\ub85c \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">Mermaid \ucc28\ud2b8\uc758 \uae30\ubcf8 \ubb38\ubc95<\/h2>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">\uc124\uce58 \uc5c6\uc774 \ubc14\ub85c \uc368\ubcf4\uae30<\/h3>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\">Mermaid\ub294 \ub300\ud45c\uc801\uc73c\ub85c \ub2e4\uc74c\uacfc \uac19\uc740 \ub3c4\uad6c\uc5d0\uc11c \uc9c0\uc6d0\ub429\ub2c8\ub2e4.<\/p>\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;\">GitHub<\/strong>: \uc77d\uae30 \uc804\uc6a9 \uc9c0\uc6d0 (<code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">```mermaid<\/code> \ucf54\ub4dc\ube14\ub7ed)<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">Notion, Obsidian<\/strong>: \ud50c\ub7ec\uadf8\uc778 \ud639\uc740 \ub0b4\uc7a5 \uc9c0\uc6d0<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">Typora, VSCode, HackMD \ub4f1<\/strong>: \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8 \uc9c0\uc6d0<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\uacf5\uc2dd \uc628\ub77c\uc778 \uc5d0\ub514\ud130<\/strong>: <a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/mermaid-js.github.io\/mermaid-live-editor\/\">Mermaid Live Editor<\/a><\/li>\n<\/ul>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">\ucf54\ub4dc \uc608\uc81c : \uac00\uc7a5 \uac04\ub2e8\ud55c \ud750\ub984\ub3c4<\/h3>\n<div class=\"wp-block-embed__wrapper\" style=\"margin: 2rem 0;\">\n  <!-- WordPress Mermaid \ud50c\ub7ec\uadf8\uc778\uc774 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4 --><\/p>\n<pre class=\"mermaid\" id=\"mermaid-mtj0gn8mv\">\nflowchart TD\n    A[\uc2dc\uc791] --&gt; B{\uc870\uac74}\n    B -- \uc608 --&gt; C[\ucc98\ub9ac1]\n    B -- \uc544\ub2c8\uc624 --&gt; D[\ucc98\ub9ac2]\n    C --&gt; E[\uc885\ub8cc]\n    D --&gt; E\n  <\/pre>\n<p>  <noscript><\/p>\n<div style=\"background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border: 2px dashed #dee2e6;\">\n<p style=\"text-align: center; color: #6c757d; margin: 0;\">\n        \ud83d\udcca Mermaid \ucc28\ud2b8 (\ub80c\ub354\ub9c1 \ud544\uc694)<br \/>\n        <small><a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/wordpress.org\/plugins\/mermaid-chart\/\" target=\"_blank\" rel=\"noopener\">Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/small>\n      <\/p>\n<\/p><\/div>\n<p>  <\/noscript>\n<\/div>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\">\uc704 \ucf54\ub4dc\ub294 \ub2e4\uc74c \uc758\ubbf8\ub97c \uac00\uc9d1\ub2c8\ub2e4:<\/p>\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;\">\ub2e4\uc774\uc5b4\uadf8\ub7a8 \uc885\ub958: <code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">flowchart<\/code> (\ud750\ub984\ub3c4)<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">TD<\/code>: Top-Down(\uc704\uc5d0\uc11c \uc544\ub798 \ubc29\ud5a5)<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">[ ]<\/code>: \ubc15\uc2a4(\ud504\ub85c\uc138\uc2a4)<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">{ }<\/code>: \uc870\uac74(\ub2e4\uc774\uc544\ubaac\ub4dc)<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">--&gt;<\/code>: \ubc29\ud5a5 \ud654\uc0b4\ud45c<\/li>\n<\/ul>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">Mermaid\uac00 \uc9c0\uc6d0\ud558\ub294 \ucc28\ud2b8 \uc885\ub958<\/h2>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">1. Flowchart (\ud750\ub984\ub3c4)<\/h3>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ud504\ub85c\uc138\uc2a4, \uc54c\uace0\ub9ac\uc998, \ub85c\uc9c1 \ub4f1 \uc808\ucc28\uc801 \ud750\ub984<\/strong>\uc744 \uc2dc\uac01\ud654\ud560 \ub54c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<br \/>\n\ubb38\ubc95\uc740 <code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">flowchart<\/code>, \ubc29\ud5a5(TD, LR, RL, BT \ub4f1) \uc9c0\uc815.<\/p>\n<div class=\"wp-block-embed__wrapper\" style=\"margin: 2rem 0;\">\n  <!-- WordPress Mermaid \ud50c\ub7ec\uadf8\uc778\uc774 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4 --><\/p>\n<pre class=\"mermaid\" id=\"mermaid-88cmwqrg1\">\nflowchart LR\n    Start --&gt; Step1\n    Step1 --&gt;|yes| Step2\n    Step1 --&gt;|no| End\n    Step2 --&gt; End\n  <\/pre>\n<p>  <noscript><\/p>\n<div style=\"background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border: 2px dashed #dee2e6;\">\n<p style=\"text-align: center; color: #6c757d; margin: 0;\">\n        \ud83d\udcca Mermaid \ucc28\ud2b8 (\ub80c\ub354\ub9c1 \ud544\uc694)<br \/>\n        <small><a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/wordpress.org\/plugins\/mermaid-chart\/\" target=\"_blank\" rel=\"noopener\">Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/small>\n      <\/p>\n<\/p><\/div>\n<p>  <\/noscript>\n<\/div>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">2. Sequence Diagram (\uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8)<\/h3>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\"><strong style=\"font-weight: 700; color: #1a202c;\">\uc2dc\uac04 \ud750\ub984, \uac1d\uccb4 \uac04 \uba54\uc2dc\uc9c0 \uad50\ud658<\/strong> \uc2dc\uac01\ud654.<br \/>\n\uc8fc\ub85c \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc124\uacc4, API \ub3d9\uc791 \uc6d0\ub9ac \ub4f1\uc5d0 \ub9ce\uc774 \uc0ac\uc6a9.<\/p>\n<div class=\"wp-block-embed__wrapper\" style=\"margin: 2rem 0;\">\n  <!-- WordPress Mermaid \ud50c\ub7ec\uadf8\uc778\uc774 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4 --><\/p>\n<pre class=\"mermaid\" id=\"mermaid-a6s2hu0i2\">\nsequenceDiagram\n    participant User\n    participant Server\n    User-&gt;&gt;Server: \ub85c\uadf8\uc778 \uc694\uccad\n    Server--&gt;&gt;User: \uc778\uc99d \ud1a0\ud070 \ubc18\ud658\n  <\/pre>\n<p>  <noscript><\/p>\n<div style=\"background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border: 2px dashed #dee2e6;\">\n<p style=\"text-align: center; color: #6c757d; margin: 0;\">\n        \ud83d\udcca Mermaid \ucc28\ud2b8 (\ub80c\ub354\ub9c1 \ud544\uc694)<br \/>\n        <small><a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/wordpress.org\/plugins\/mermaid-chart\/\" target=\"_blank\" rel=\"noopener\">Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/small>\n      <\/p>\n<\/p><\/div>\n<p>  <\/noscript>\n<\/div>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">3. Gantt Chart (\uac04\ud2b8 \ucc28\ud2b8)<\/h3>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\"><strong style=\"font-weight: 700; color: #1a202c;\">\uc77c\uc815\/\ud504\ub85c\uc81d\ud2b8 \uad00\ub9ac<\/strong> \uc2dc \ud3b8\ub9ac.<br \/>\n\uc5c5\ubb34\uc758 \uc2dc\uc791\/\uc885\ub8cc, \uae30\uac04, \uc6b0\uc120\uc21c\uc704 \ub4f1 \ud55c\ub208\uc5d0 \ud30c\uc545.<\/p>\n<div class=\"wp-block-embed__wrapper\" style=\"margin: 2rem 0;\">\n  <!-- WordPress Mermaid \ud50c\ub7ec\uadf8\uc778\uc774 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4 --><\/p>\n<pre class=\"mermaid\" id=\"mermaid-7kdfe2p0u\">\ngantt\n    title \ud504\ub85c\uc81d\ud2b8 \uc77c\uc815\ud45c\n    dateFormat  YYYY-MM-DD\n    section \uc124\uacc4\n    \uc694\uad6c\ubd84\uc11d :a1, 2024-07-01, 3d\n    \uad6c\uc870\uc124\uacc4 :after a1, 5d\n    section \uac1c\ubc1c\n    \uad6c\ud604 :2024-07-10, 7d\n    \ud14c\uc2a4\ud2b8 :2024-07-17, 4d\n  <\/pre>\n<p>  <noscript><\/p>\n<div style=\"background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border: 2px dashed #dee2e6;\">\n<p style=\"text-align: center; color: #6c757d; margin: 0;\">\n        \ud83d\udcca Mermaid \ucc28\ud2b8 (\ub80c\ub354\ub9c1 \ud544\uc694)<br \/>\n        <small><a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/wordpress.org\/plugins\/mermaid-chart\/\" target=\"_blank\" rel=\"noopener\">Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/small>\n      <\/p>\n<\/p><\/div>\n<p>  <\/noscript>\n<\/div>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">4. Class Diagram (\ud074\ub798\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8)<\/h3>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\"><strong style=\"font-weight: 700; color: #1a202c;\">\uac1d\uccb4\uc9c0\ud5a5 \ubaa8\ub378\ub9c1<\/strong>\uc5d0 \uc801\ud569, \ud074\ub798\uc2a4 \uad00\uacc4, \uc0c1\uc18d, \uc778\ud130\ud398\uc774\uc2a4 \ub4f1 \ud45c\uae30.<\/p>\n<div class=\"wp-block-embed__wrapper\" style=\"margin: 2rem 0;\">\n  <!-- WordPress Mermaid \ud50c\ub7ec\uadf8\uc778\uc774 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4 --><\/p>\n<pre class=\"mermaid\" id=\"mermaid-on1dz27tf\">\nclassDiagram\n    Animal &lt;|-- Duck\n    Animal &lt;|-- Fish\n    class Animal {\n        +String name\n        +move()\n    }\n  <\/pre>\n<p>  <noscript><\/p>\n<div style=\"background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border: 2px dashed #dee2e6;\">\n<p style=\"text-align: center; color: #6c757d; margin: 0;\">\n        \ud83d\udcca Mermaid \ucc28\ud2b8 (\ub80c\ub354\ub9c1 \ud544\uc694)<br \/>\n        <small><a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/wordpress.org\/plugins\/mermaid-chart\/\" target=\"_blank\" rel=\"noopener\">Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/small>\n      <\/p>\n<\/p><\/div>\n<p>  <\/noscript>\n<\/div>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">5. Pie, ER, State, Journey \ub4f1 \uadf8 \uc678 \ucc28\ud2b8<\/h3>\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;\">Pie Chart (\ud30c\uc774 \ucc28\ud2b8): \uac04\ub2e8\ud55c \ube44\uc728 \ud45c\ud604<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\">ER Diagram: \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ud14c\uc774\ube14 \uad6c\uc870 \uc124\uba85<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\">State Diagram: \uc0c1\ud0dc \uc804\uc774<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\">Journey Diagram: \uace0\uac1d \uc5ec\uc815 \ub4f1<br \/>\n\ucd94\ud6c4 \uacf5\uc2dd \ubb38\uc11c\/\uc5d0\ub514\ud130\uc5d0\uc11c \ub2e4\uc591\ud55c \ucd94\uac00 \ucc28\ud2b8 \ud655\uc778 \uac00\ub2a5<\/li>\n<\/ul>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">\uc2e4\ubb34\u00b7\ud611\uc5c5\uc5d0\uc11c Mermaid \ucc28\ud2b8 \ud65c\uc6a9 \ud301<\/h2>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">1. GitHub \ub9ac\ub4dc\ubbf8(<a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"http:\/\/README.md\">README.md<\/a>)\uc5d0 Mermaid \uc4f0\uae30<\/h3>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\">README.md\uc5d0 Mermaid \ucc28\ud2b8 \ucf54\ub4dc\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \ub123\uc73c\uba74,<br \/>\nGitHub \uc6f9\ubdf0\uc5d0\uc11c\ub294 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/p>\n<pre style=\"background: #2d3748; color: #e2e8f0; padding: 1.5rem; border-radius: 0.5rem; overflow-x: auto; margin: 1.5rem 0; font-family: 'Courier New', monospace; font-size: 0.95rem; line-height: 1.6;\"><code class=\"language-markdown\">&lt;!--MERMAID_BLOCK_5--&gt;\n<\/code><\/pre>\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;\">\ub2e8, <strong style=\"font-weight: 700; color: #1a202c;\">\uc77c\ubd80 \ube0c\ub77c\uc6b0\uc800\ub098 \uace0\uc804 \ub808\uac70\uc2dc \ubdf0\uc5b4\uc5d0\uc11c\ub294 \ubbf8\uc9c0\uc6d0<\/strong><br \/>\n\ub300\uccb4 PNG \uc774\ubbf8\uc9c0\ub85c export \ud6c4 \ucca8\ubd80\ud558\uba74 \ubb34\ubc29<\/p>\n<\/blockquote>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">2. Notion, Obsidian \ub4f1 \ud544\uae30 \uc571\uc5d0\uc11c<\/h3>\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;\">Notion<\/strong>: <code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">\/mermaid<\/code> \ube14\ub85d\uc744 \uc0ac\uc6a9\ud558\uac70\ub098 \uc678\ubd80 \uc784\ubca0\ub4dc<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">Obsidian<\/strong>: \ud50c\ub7ec\uadf8\uc778 \uc124\uce58 \ud6c4 \ucf54\ub4dc\ube14\ub85d(&#8220;`mermaid) \ud65c\uc6a9<\/li>\n<\/ul>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">3. \uc790\ub3d9\ud654 \/ CI \ubb38\uc11c\ud654 \uc5f0\ub3d9<\/h3>\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;\">CI\/CD \ubb38\uc11c\ud654 \uc2a4\ud06c\ub9bd\ud2b8\uc640 \uacb0\ud569<\/strong>\ud558\uba74,\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;\">\ucd5c\uc2e0 \ucf54\ub4dc\/\uc0c1\ud0dc\/\ud504\ub85c\uc138\uc2a4\uc5d0 \ub9de\ub294 \ub2e4\uc774\uc5b4\uadf8\ub7a8 \uc790\ub3d9 \uc0dd\uc131 \uac00\ub2a5<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\">\uc608: \ucf54\ub4dc\uc5d0\uc11c function\uc774\ub098 class \ucd94\ucd9c \u2192 Mermaid \ucf54\ub4dc \uc790\ub3d9 \uc0dd\uc131 \u2192 \ubb38\uc11c\ud654<\/li>\n<\/ul>\n<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ubcc0\uc218\/\ub9e4\ud06c\ub85c \ud65c\uc6a9 \uac00\ub2a5<\/strong> (\uace0\uae09 \uc0ac\uc6a9\uc790 \ub300\uc0c1)<\/li>\n<\/ul>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">4. \uc2a4\ud0c0\uc77c\ub9c1, \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5<\/h3>\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;\">\uacf5\uc2dd \ubb38\uc11c\uc5d0\uc11c <strong style=\"font-weight: 700; color: #1a202c;\">\ud14c\ub9c8(theme) \uc9c0\uc6d0<\/strong>, \uc0c9\uc0c1\/\ud3f0\ud2b8\/\uc544\uc774\ucf58 \uc9c0\uc815 \ub4f1 \ub2e4\uc591<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\">\uc608\ub97c \ub4e4\uc5b4, important \ub178\ub4dc\uc5d0 \ud2b9\ubcc4\ud55c \uc0c9\uc0c1\/\uc2a4\ud0c0\uc77c \ubd80\uc5ec \uac00\ub2a5<\/li>\n<\/ul>\n<div class=\"wp-block-embed__wrapper\" style=\"margin: 2rem 0;\">\n  <!-- WordPress Mermaid \ud50c\ub7ec\uadf8\uc778\uc774 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4 --><\/p>\n<pre class=\"mermaid\" id=\"mermaid-ghyniq886\">\nflowchart TD\n    A[\uc2dc\uc791]:::start\n    classDef start fill:#f96,stroke:#333,stroke-width:2px;\n  <\/pre>\n<p>  <noscript><\/p>\n<div style=\"background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border: 2px dashed #dee2e6;\">\n<p style=\"text-align: center; color: #6c757d; margin: 0;\">\n        \ud83d\udcca Mermaid \ucc28\ud2b8 (\ub80c\ub354\ub9c1 \ud544\uc694)<br \/>\n        <small><a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/wordpress.org\/plugins\/mermaid-chart\/\" target=\"_blank\" rel=\"noopener\">Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/small>\n      <\/p>\n<\/p><\/div>\n<p>  <\/noscript>\n<\/div>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">Mermaid \ucc28\ud2b8 \uc791\uc131\uc758 \uc88b\uc740 \uc2b5\uad00<\/h2>\n<ol style=\"margin: 1rem 0; padding-left: 2rem;\">\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\uac04\uacb0\uc131<\/strong>: \ub108\ubb34 \ub9ce\uc740 \uc694\uc18c\ub97c \ud55c \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc5d0 \ub123\uc9c0 \ub9d0 \uac83<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\uc8fc\uc11d \ud65c\uc6a9<\/strong>: \ud070 \ud750\ub984\uc774\ub098 \uc758\ubbf8 \uc788\ub294 \ubd80\ubd84\uc740 \uc8fc\uc11d(<code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">%% \uc8fc\uc11d<\/code>)\uc73c\ub85c \ubcf4\uac15<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ud30c\uc77c\ub85c \ubd84\ub9ac \uad00\ub9ac<\/strong>: \ubcf5\uc7a1\ud55c \ucc28\ud2b8\ub294 \ubcc4\ub3c4 <code style=\"background: #edf2f7; color: #e53e3e; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em;\">.mmd<\/code> \ud30c\uc77c\ub85c \uad00\ub9ac<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ubcc0\uacbd\ub0b4\uc5ed \uad00\ub9ac<\/strong>: \ucf54\ub4dc\ub97c \ud1b5\ud574 \uae30\ub85d\ub418\ubbc0\ub85c, \uc5ed\uc0ac\/\ud611\uc5c5\uc5d0 \uc720\ub9ac<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ub514\uc790\uc778 \uc77c\uad00\uc131<\/strong>: \ud070 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ud45c\uc900 \uc2a4\ud0c0\uc77c \uc9c0\uc815, classDef \ud65c\uc6a9<\/li>\n<\/ol>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">Mermaid \ucc28\ud2b8 \uc2e4\uc804 \uc608\uc81c<\/h2>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">\uc694\uad6c\uc0ac\ud56d \ubd84\uc11d, \uc124\uacc4\/\uac1c\ubc1c\/\ud14c\uc2a4\ud2b8 \uc5c5\ubb34 \ud750\ub984<\/h3>\n<div class=\"wp-block-embed__wrapper\" style=\"margin: 2rem 0;\">\n  <!-- WordPress Mermaid \ud50c\ub7ec\uadf8\uc778\uc774 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4 --><\/p>\n<pre class=\"mermaid\" id=\"mermaid-iywmy99m3\">\nflowchart LR\n    \uc694\uad6c\uc0ac\ud56d --&gt; \uc124\uacc4 --&gt; \uac1c\ubc1c --&gt; \ud14c\uc2a4\ud2b8 --&gt; \ubc30\ud3ec\n    \uac1c\ubc1c --&gt;|\ud53c\ub4dc\ubc31| \uc124\uacc4\n    \ud14c\uc2a4\ud2b8 --&gt;|\ubc84\uadf8| \uac1c\ubc1c\n  <\/pre>\n<p>  <noscript><\/p>\n<div style=\"background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border: 2px dashed #dee2e6;\">\n<p style=\"text-align: center; color: #6c757d; margin: 0;\">\n        \ud83d\udcca Mermaid \ucc28\ud2b8 (\ub80c\ub354\ub9c1 \ud544\uc694)<br \/>\n        <small><a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/wordpress.org\/plugins\/mermaid-chart\/\" target=\"_blank\" rel=\"noopener\">Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/small>\n      <\/p>\n<\/p><\/div>\n<p>  <\/noscript>\n<\/div>\n<h3 style=\"font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #4a5568;\">API \ud638\ucd9c \uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8<\/h3>\n<div class=\"wp-block-embed__wrapper\" style=\"margin: 2rem 0;\">\n  <!-- WordPress Mermaid \ud50c\ub7ec\uadf8\uc778\uc774 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4 --><\/p>\n<pre class=\"mermaid\" id=\"mermaid-mad1irvqy\">\nsequenceDiagram\n    participant Client\n    participant API\n    participant DB\n    Client-&gt;&gt;API: POST \/user\/login\n    API-&gt;&gt;DB: SELECT * FROM users\n    DB--&gt;&gt;API: \uacb0\uacfc \ubc18\ud658\n    API--&gt;&gt;Client: 200 OK + \ud1a0\ud070\n  <\/pre>\n<p>  <noscript><\/p>\n<div style=\"background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border: 2px dashed #dee2e6;\">\n<p style=\"text-align: center; color: #6c757d; margin: 0;\">\n        \ud83d\udcca Mermaid \ucc28\ud2b8 (\ub80c\ub354\ub9c1 \ud544\uc694)<br \/>\n        <small><a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/wordpress.org\/plugins\/mermaid-chart\/\" target=\"_blank\" rel=\"noopener\">Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/small>\n      <\/p>\n<\/p><\/div>\n<p>  <\/noscript>\n<\/div>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">Mermaid \ud55c\uacc4\uc640 \uc8fc\uc758\uc810<\/h2>\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;\">\uadf9\ub3c4\ub85c \ubcf5\uc7a1\ud55c \ub3c4\uc2dd<\/strong>\uc5d0\ub294 \ud55c\uacc4 (<a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"http:\/\/draw.io\">draw.io<\/a>, Visio \ub4f1 \uc804\ubb38 \ud234\uc740 \ub354 \uc6b0\uc218)<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ud14c\ub9c8 \ucee4\uc2a4\ud130\ub9c8\uc774\uc988<\/strong>\ub294 \uae30\ub2a5 \uc81c\uc57d<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ube0c\ub77c\uc6b0\uc800 \ub80c\ub354\ub9c1 \uc758\uc874<\/strong> \u2192 \uad6c\ubc84\uc804 \ud50c\ub7ab\ud3fc\uc5d0\uc11c\ub294 \uc77c\ubd80 \ubbf8\uc9c0\uc6d0<\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\"><strong style=\"font-weight: 700; color: #1a202c;\">\ubcf4\uc548 \uc774\uc288<\/strong>: \uc678\ubd80 \ub80c\ub354\ub7ec \uc0ac\uc6a9\uc2dc \ucf54\ub4dc \ud574\uc11d \uc8fc\uc758<\/li>\n<\/ul>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">\uacb0\ub860: Mermaid\ub85c \ubb38\uc11c\ud654\u00b7\ub2e4\uc774\uc5b4\uadf8\ub7a8\uc774 \uc26c\uc6cc\uc9c4\ub2e4<\/h2>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\"><strong style=\"font-weight: 700; color: #1a202c;\">\uba38\uba54\uc774\ub4dc \ucc28\ud2b8(Mermaid Chart)\ub294 \ud14d\uc2a4\ud2b8 \ucf54\ub529\ub9cc\uc73c\ub85c\ub3c4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 \ubc0f \uc2dc\uac01\ud654 \uc791\uc5c5\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \ud601\uc2e0\uc801\uc778 \ub3c4\uad6c<\/strong>\uc785\ub2c8\ub2e4. \uc26c\uc6b4 \ubb38\ubc95, \ub2e4\uc591\ud55c \uc9c0\uc6d0 \ud50c\ub7ab\ud3fc, \ub6f0\uc5b4\ub09c \ud611\uc5c5\uc131\uacfc \uc790\ub3d9\ud654 \ub355\ubd84\uc5d0 \uac1c\ubc1c\uc790\ubfd0 \uc544\ub2c8\ub77c \ub204\uad6c\ub098 \ubb38\uc11c\ud654, \uc124\uacc4, \ubcf4\uace0, \uae30\ud68d, \ud68c\uc758\uc790\ub8cc \ub4f1\uc5d0 \uc720\uc6a9\ud558\uac8c \uc4f8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\">\uc9c0\uae08 \ubc14\ub85c \uc5ec\ub7ec\ubd84\uc758 \ub9c8\ud06c\ub2e4\uc6b4 \ubb38\uc11c\uc5d0\uc11c Mermaid\ub97c \uc2dc\ub3c4\ud574 \ubcf4\uc138\uc694. \ubcf5\uc7a1\ud55c \uc808\ucc28\ub098 \uc54c\uace0\ub9ac\uc998, \uc758\uc0ac\uc18c\ud1b5\uc5d0 \ud601\uc2e0\uc801\uc778 \ubcc0\ud654\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<hr style=\"border: none; height: 2px; background: linear-gradient(to right, transparent, #cbd5e0, transparent); margin: 2rem 0;\">\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;\">\ucc38\uace0:<\/p>\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;\">\uacf5\uc2dd \ubb38\uc11c: <a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/\">https:\/\/mermaid-js.github.io\/mermaid\/#\/<\/a><\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\">Mermaid Live Editor: <a style=\"color: #667eea; text-decoration: underline; font-weight: 500; transition: color 0.2s;\" href=\"https:\/\/mermaid-js.github.io\/mermaid-live-editor\/\">https:\/\/mermaid-js.github.io\/mermaid-live-editor\/<\/a><\/li>\n<li style=\"margin: 0.5rem 0; line-height: 1.8; color: #4a5568;\">\uc8fc\uc694 \uc9c0\uc6d0 \ub3c4\uad6c: GitHub, Notion, Obsidian, Typora, HackMD, VSCode, Confluence<\/li>\n<\/ul>\n<\/blockquote>\n<p style=\"line-height: 1.8; margin: 1rem 0; color: #2d3748; font-size: 1.05rem;\"><strong style=\"font-weight: 700; color: #1a202c;\">\uac04\ub2e8\ud788, \uac15\ub825\ud558\uac8c, \uadf8\ub9ac\uace0 \ud6a8\uc728\uc801\uc73c\ub85c! \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\ub85c \ubb38\uc11c\uc5d0 \uc0dd\uba85\uc744 \ubd88\uc5b4\ub123\uc5b4 \ubcf4\uc138\uc694.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uba38\uba54\uc774\ub4dc \ucc28\ud2b8(Mermaid Chart) \uc644\ubcbd \uac00\uc774\ub4dc \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\ub780 \ubb34\uc5c7\uc778\uac00? \ucd5c\uadfc \uac1c\ubc1c\uc790 \ube14\ub85c\uadf8, \uae30\uc220 \ubb38\uc11c, \uc0ac\ub0b4 \uc704\ud0a4, \uc624\ud508\uc18c\uc2a4 \ud504\ub85c\uc81d\ud2b8 \ubb38\uc11c\uc5d0\uc11c \uc885\uc885 \ub208\uc5d0 \ub744\ub294 \ucf54\ub4dc \ube14\ub85d\uc774 \ud558\ub098 \uc788\uc2b5\ub2c8\ub2e4. \ubc14\ub85c \ud14d\uc2a4\ud2b8\ub85c \uadf8\ub9b4 \uc218 \uc788\ub294 \ub2e4\uc774\uc5b4\uadf8\ub7a8, \uba38\uba54\uc774\ub4dc(Mermaid) \ucc28\ud2b8\uc785\ub2c8\ub2e4. Mermaid\ub294 \ubcf5\uc7a1\ud55c \ub3c4\uc2dd, \ud750\ub984\ub3c4, \uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 \ub4f1 \ub2e4\uc591\ud55c \ucc28\ud2b8\ub97c \ub9c8\ud06c\ub2e4\uc6b4 \ubb38\uc11c\ucc98\ub7fc \uac04\ub2e8\ud558\uac8c \uc791\uc131\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Mermaid \ucc28\ud2b8\uac00 \ubb34\uc5c7\uc778\uc9c0,&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":[14],"tags":[],"class_list":["post-5487","post","type-post","status-publish","format-standard","hentry","category-blog-setup-guide"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5487","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=5487"}],"version-history":[{"count":1,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5487\/revisions"}],"predecessor-version":[{"id":5488,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5487\/revisions\/5488"}],"wp:attachment":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}