{"id":5419,"date":"2025-12-26T13:38:25","date_gmt":"2025-12-26T13:38:25","guid":{"rendered":"https:\/\/blog.ggonggong.com\/?p=5419"},"modified":"2025-12-26T13:38:25","modified_gmt":"2025-12-26T13:38:25","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-7","status":"publish","type":"post","link":"https:\/\/blog.ggonggong.com\/?p=5419","title":{"rendered":"\uba38\uba54\uc774\ub4dc\ucc28\ud2b8\uc758 \uc885\ub958"},"content":{"rendered":"

<\/p>\n

\ud83e\udddc\u2640\ufe0f \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\uc758 \ubaa8\ub4e0 \uac83: \uc885\ub958\ubcc4 \ud65c\uc6a9\ubc95\uacfc \uc2e4\uc804 \uc608\uc81c\ub85c \uc815\ubcf5\ud558\uae30<\/strong><\/h2>\n

(Mermaid Chart Types: \ud575\uc2ec \uc885\ub958 \uc644\ubcbd \ubd84\uc11d\uacfc \ud504\ub85c\uc81d\ud2b8 \uc801\uc6a9 \uac00\uc774\ub4dc)<\/em><\/p>\n

\u201c\uae30\uc220 \ubb38\uc11c \uc791\uc131\uc744 \ub531 1\ubd84 \ub9cc\uc5d0 \uc2dc\uac01\ud654\ud558\ub294 \ubc95?\u201d<\/strong>
\n\ud769\uc5b4\uc9c4 \ucf54\ub4dc \ub85c\uc9c1, \ubcf5\uc7a1\ud55c \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870, \ud300 \ud68c\uc758 \ub54c\ub9c8\ub2e4 \ubc18\ubcf5\ub418\ub294 \uc124\uba85\u2026 \uac1c\ubc1c\uc790\ub77c\uba74 \ub204\uad6c\ub098 \uacbd\ud5d8\ud558\ub294 \uace0\ubbfc\uc785\ub2c8\ub2e4. **\uba38\uba54\uc774\ub4dc(Mermaid)**\ub294 \ub9c8\ud06c\ub2e4\uc6b4 \uae30\ubc18\uc73c\ub85c \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \ucf54\ub4dc\ub85c \uc0dd\uc131<\/strong>\ud558\ub294 \uc624\ud508\uc18c\uc2a4 \ub3c4\uad6c\ub85c, \ub2e8\uc21c\ud55c \ud50c\ub85c\uc6b0\ucc28\ud2b8\ubd80\ud130 \ubcf5\uc7a1\ud55c CI\/CD \ud30c\uc774\ud504\ub77c\uc778\uae4c\uc9c0 \uc9c1\uad00\uc801\uc778 \uc2dc\uac01\ud654<\/strong>\ub97c \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4.<\/p>\n

\n

\ud83d\udd0d 1. \uc65c \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\uc778\uac00?<\/strong><\/h3>\n
    \n
  • \ucf54\ub4dc \uae30\ubc18 \uc0dd\uc131<\/strong>: mermaid<\/code> \ucf54\ub4dc\ube14\ub85d \uc0bd\uc785 \u2192 \uc790\ub3d9 \ub80c\ub354\ub9c1<\/li>\n
  • \ubc84\uc804 \uad00\ub9ac \uc6a9\uc774<\/strong>: \ub2e4\uc774\uc5b4\uadf8\ub7a8 \uc18c\uc2a4\ucf54\ub4dc\ub97c Git\uc73c\ub85c \uad00\ub9ac \uac00\ub2a5<\/li>\n
  • \uc2e4\uc2dc\uac04 \ud611\uc5c5<\/strong>: GitHub\/GitLab, VS Code, Notion \ub4f1 \ub300\ubd80\ubd84 \uac1c\ubc1c \ub3c4\uad6c\uc640 \ud1b5\ud569<\/li>\n
  • \ubb34\ub8cc \uc624\ud508\uc18c\uc2a4<\/strong>: Apache 2.0 \ub77c\uc774\uc120\uc2a4<\/li>\n<\/ul>\n
    \n

    \ud1b5\uacc4\ub85c \ubcf4\ub294 \ud6a8\uc728\uc131<\/strong>: Atlassian \uc124\ubb38\uc5d0 \ub530\ub974\uba74 \uc2dc\uac01\uc801 \ubb38\uc11c\ud654\ub294 \uac1c\ubc1c\ud300 \uc0dd\uc0b0\uc131\uc744 47% \ud5a5\uc0c1<\/strong>\uc2dc\ud0b5\ub2c8\ub2e4. \uba38\uba54\uc774\ub4dc\ub294 \ub7ec\ub2dd \ucee4\ube0c \ucd5c\uc18c\ud654\ub85c \uadf8 \ud6a8\uacfc\ub97c \uadf9\ub300\ud654\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

    \n

    \ud83d\udcca 2. \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\uc758 \uc8fc\uc694 \uc885\ub958\ubcc4 \ud65c\uc6a9 \uc804\ub7b5<\/strong><\/h3>\n

    (1) \ud50c\ub85c\uc6b0\ucc28\ud2b8 (Flowchart) – \ud504\ub85c\uc138\uc2a4 \uc2dc\uac01\ud654\uc758 \ud575\uc2ec<\/strong><\/h4>\n
    \n
    \nflowchart TD\n    A[\uc694\uccad \uc2dc\uc791] --> B{\uc720\ud6a8\uc131 \uac80\uc0ac}\n    B -->|\ud1b5\uacfc| C[DB \uc800\uc7a5]\n    B -->|\uc2e4\ud328| D[\uc624\ub958 \uc751\ub2f5]\n    C --> E[\uc131\uacf5 \uc751\ub2f5]\n  <\/pre>\n<\/div>\n
      \n
    • \uad6c\uc870<\/strong>: flowchart \ubc29\ud5a5<\/code> (TD: Top-Down, LR: Left-Right)<\/li>\n
    • \ub178\ub4dc \ud0c0\uc785<\/strong>:\n
        \n
      • \uc0ac\uac01\ud615 [ ]<\/code>: \uae30\ubcf8 \ud504\ub85c\uc138\uc2a4<\/li>\n
      • \ub9c8\ub984\ubaa8 { }<\/code>: \uc870\uac74 \ubd84\uae30<\/li>\n
      • \uc6d0\ud615 (( ))<\/code>: \uc2dc\uc791\/\uc885\ub8cc<\/li>\n<\/ul>\n<\/li>\n
      • \uc2e4\uc804 \ud301<\/strong>:\n
          \n
        • %% \uc8fc\uc11d<\/code> \ucc98\ub9ac\ub85c \uc139\uc158 \uad6c\ubd84<\/li>\n
        • classDef<\/code>\ub85c CSS \uc2a4\ud0c0\uc77c \uc801\uc6a9 \uac00\ub2a5<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
          \n
          \nflowchart LR\n    classDef highlight fill:#f9f,stroke:#333\n    A --> B:::highlight\n  <\/pre>\n<\/div>\n
          \n
          (2) \uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 (Sequence Diagram) – \uc2dc\uc2a4\ud15c \uc0c1\ud638\uc791\uc6a9 \uba85\ud655\ud654<\/strong><\/h4>\n
          \n
          \nsequenceDiagram\n    participant \ud074\ub77c\uc774\uc5b8\ud2b8\n    participant \uc11c\ubc84\n    participant DB\n    \ud074\ub77c\uc774\uc5b8\ud2b8->>\uc11c\ubc84: HTTP \uc694\uccad\n    \uc11c\ubc84->>DB: \ucffc\ub9ac \uc804\uc1a1\n    DB-->>\uc11c\ubc84: \uacb0\uacfc \ubc18\ud658\n    \uc11c\ubc84-->>\ud074\ub77c\uc774\uc5b8\ud2b8: \uc751\ub2f5\n  <\/pre>\n<\/div>\n
            \n
          • \uc8fc\uc694 \uc694\uc18c<\/strong>:\n
              \n
            • participant<\/code>: \uac1d\uccb4 \uc815\uc758<\/li>\n
            • ->><\/code>: \uc2e4\uc120 \ud654\uc0b4\ud45c (\ub3d9\uae30 \ud638\ucd9c)<\/li>\n
            • -->><\/code>: \uc810\uc120 \ud654\uc0b4\ud45c (\ube44\ub3d9\uae30 \uc751\ub2f5)<\/li>\n
            • activate<\/code>: \uc2e4\ud589 \uad6c\uac04 \uac15\uc870<\/li>\n<\/ul>\n<\/li>\n
            • \uace0\uae09 \ud65c\uc6a9<\/strong>:<\/li>\n<\/ul>\n
              \n
              \nsequenceDiagram\n    autonumber\n    Alice->>John: \uc778\uc99d \uc694\uccad\n    John-->>Alice: \ud1a0\ud070 \ubc1c\uae09\n  <\/pre>\n<\/div>\n
              \n
              (3) \ud074\ub798\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 (Class Diagram) – OOP \uad6c\uc870 \uc124\uacc4 \ub3c4\uad6c<\/strong><\/h4>\n
              \n
              \nclassDiagram\n    class User {\n        +String id\n        +String name\n        +save() void\n    }\n    class Order {\n        +int amount\n        +pay() boolean\n    }\n    User "1" --> "n" Order : \uc8fc\ubb38\n  <\/pre>\n<\/div>\n
                \n
              • \uad6c\uc131 \uc694\uc18c<\/strong>:\n
                  \n
                • +<\/code>(public), -<\/code>(private), #<\/code>(protected) \uc811\uadfc\uc790<\/li>\n
                • \uad00\uacc4: --><\/code> (\uc5f0\uad00), --|><\/code> (\uc0c1\uc18d), --*<\/code> (\ud569\uc131)<\/li>\n<\/ul>\n<\/li>\n
                • \uc8fc\uc758\uc810<\/strong>:\n
                    \n
                  • \uc0c1\uc18d \uc2dc \uc790\uc2dd \ud074\ub798\uc2a4\uac00 \ubd80\ubaa8\ubcf4\ub2e4 \ub4e4\uc5ec\uc4f0\uae30<\/strong> \ub418\uc5b4\uc57c \ud568<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                    \n
                    (4) \uc0c1\ud0dc \ub2e4\uc774\uc5b4\uadf8\ub7a8 (State Diagram) – \ubcf5\uc7a1\ud55c \uc0c1\ud0dc \ubcc0\ud654 \ubaa8\ub378\ub9c1<\/strong><\/h4>\n
                    \n
                    \nstateDiagram-v2\n    [*] --> \ub300\uae30\uc911\n    \ub300\uae30\uc911 --> \uc9c4\ud589\uc911 : \uc2dc\uc791 \ubc84\ud2bc \ud074\ub9ad\n    \uc9c4\ud589\uc911 --> \uc77c\uc2dc\uc815\uc9c0 : \uc911\uc9c0 \uc694\uccad\n    \uc77c\uc2dc\uc815\uc9c0 --> \uc9c4\ud589\uc911 : \uc7ac\uac1c \uc694\uccad\n    \uc9c4\ud589\uc911 --> \uc644\ub8cc : \ucc98\ub9ac \uc885\ub8cc\n    \uc644\ub8cc --> [*]\n  <\/pre>\n<\/div>\n
                      \n
                    • \ubc84\uc804 \uccb4\ud06c<\/strong>: stateDiagram-v2<\/code> \uc0ac\uc6a9 \uad8c\uc7a5 (\uad6c\ubc84\uc804 \ub300\ube44 \uae30\ub2a5 \ud5a5\uc0c1)<\/li>\n
                    • \uc911\uc694 \uae30\ub2a5<\/strong>:\n
                        \n
                      • fork<\/code>, join<\/code>\uc73c\ub85c \ubcd1\ub82c \uc0c1\ud0dc \ubd84\uae30<\/li>\n
                      • note<\/code>\ub85c \ud2b9\uc815 \uc0c1\ud0dc\uc5d0 \uc124\uba85 \ucd94\uac00<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                        \n
                        (5) \uac04\ud2b8 \ucc28\ud2b8 (Gantt Chart) – \ud504\ub85c\uc81d\ud2b8 \uc77c\uc815 \uad00\ub9ac<\/strong><\/h4>\n
                        \n
                        \ngantt\n    title \ud504\ub85c\uc81d\ud2b8 \ud0c0\uc784\ub77c\uc778\n    dateFormat  YYYY-MM-DD\n    section \ubc31\uc5d4\ub4dc\n    API \uc124\uacc4       :a1, 2023-10-01, 7d\n    DB \uc5f0\uacb0        :after a1, 5d\n    section \ud504\ub860\ud2b8\uc5d4\ub4dc\n    UI \ud504\ub85c\ud1a0\ud0c0\uc785  :2023-10-05, 10d\n    \ud14c\uc2a4\ud2b8         :5d\n  <\/pre>\n<\/div>\n
                          \n
                        • \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5<\/strong>:\n
                            \n
                          • section<\/code>\uc73c\ub85c \ud300\/\ud30c\ud2b8 \uad6c\ubd84<\/li>\n
                          • done<\/code>, active<\/code> \ub4f1 \uc0c1\ud0dc \ud0dc\uadf8 \uc9c0\uc815<\/li>\n
                          • crit<\/code>\uc73c\ub85c \ud06c\ub9ac\ud2f0\uceec \ud328\uc2a4 \ud45c\uc2dc<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                            \n
                            (6) \ud30c\uc774 \ucc28\ud2b8 (Pie Chart) – \ub370\uc774\ud130 \ube44\uc728 \uc2dc\uac01\ud654<\/strong><\/h4>\n
                            \n
                            \npie\n    title \uc0ac\uc6a9\uc790 \uc5f0\ub839\ub300\n    "18-24\uc138" : 35\n    "25-34\uc138" : 45\n    "35-44\uc138" : 15\n    "45\uc138 \uc774\uc0c1" : 5\n  <\/pre>\n<\/div>\n
                              \n
                            • \ud55c\uacc4\uc810<\/strong>:\n
                                \n
                              • 3D \ud6a8\uacfc \ub4f1 \uace0\uae09 \uc2a4\ud0c0\uc77c\ub9c1 \ubd88\uac00<\/li>\n
                              • \uac12(%) \ubbf8\uae30\uc785 \uc2dc \uc790\ub3d9 \uacc4\uc0b0\ub418\uc9c0 \uc54a\uc74c \u2192 \ubc18\ub4dc\uc2dc \uc22b\uc790 \uc785\ub825<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                \n
                                (7) \uae43 \uadf8\ub798\ud504 (Git Graph) – \ube0c\ub79c\uce58 \uad00\ub9ac \uc2dc\uac01\ud654<\/strong><\/h4>\n
                                \n
                                \ngitGraph\n    commit\n    branch feature\n    checkout feature\n    commit\n    checkout main\n    merge feature\n  <\/pre>\n<\/div>\n
                                  \n
                                • \uc2e4\ubb34 \uc801\uc6a9<\/strong>:\n
                                    \n
                                  • cherry-pick<\/code>, revert<\/code> \uc2dc\ubbac\ub808\uc774\uc158<\/li>\n
                                  • \ubcd1\ud569 \ucda9\ub3cc \uc810 \ud45c\uc2dc \uae30\ub2a5<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                    \n
                                    (8) \uc0ac\uc774\ud004 \ub2e4\uc774\uc5b4\uadf8\ub7a8 (C4 Diagram) – \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc544\ud0a4\ud14d\ucc98 \uc124\uacc4<\/strong><\/h4>\n
                                    (Mermaid \uacf5\uc2dd \uc9c0\uc6d0\uc740 \uc544\ub2c8\uc9c0\ub9cc \ud50c\ub85c\uc6b0\ucc28\ud2b8\ub85c \uc720\uc0ac \uad6c\ud604 \uac00\ub2a5)<\/em><\/p>\n
                                    \n
                                    \nflowchart TB\n    User[\uc0ac\uc6a9\uc790] -->|HTTP| System_A\n    System_A -->|gRPC| System_B\n  <\/pre>\n<\/div>\n
                                      \n
                                    • \uad6c\uc870 \ub808\ubca8<\/strong>:\n
                                        \n
                                      • Context \u2192 Container \u2192 Component \u2192 Code<\/li>\n<\/ul>\n<\/li>\n
                                      • \ucd94\ucc9c \ud234<\/strong>: C4-PlantUML \ud655\uc7a5 \uc0ac\uc6a9 \uc2dc \ub354 \uc815\ud655\ud55c \uad6c\ud604 \uac00\ub2a5<\/li>\n<\/ul>\n
                                        \n
                                        \ud83c\udf1f 3. \ucc28\ud2b8 \uc120\ud0dd \uac00\uc774\ub4dc: \uc5b4\ub5a4 \uc0c1\ud669\uc5d0 \ubb34\uc5c7\uc744 \uc4f8\uae4c?<\/strong><\/h3>\n\n\n\n\n\n\n\n\n\n
                                        \ubaa9\uc801<\/strong><\/th>\n\ucd94\ucc9c \ucc28\ud2b8<\/strong><\/th>\n\uc0ac\ub840<\/strong><\/th>\n<\/tr>\n<\/thead>\n
                                        \uc54c\uace0\ub9ac\uc998 \ud50c\ub85c\uc6b0<\/td>\n\ud50c\ub85c\uc6b0\ucc28\ud2b8<\/td>\nif-else \ub85c\uc9c1 \uc2dc\uac01\ud654<\/td>\n<\/tr>\n
                                        \ub9c8\uc774\ud06c\ub85c\uc11c\ube44\uc2a4 \ud1b5\uc2e0<\/td>\n\uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8<\/td>\nAPI \ud638\ucd9c \ud750\ub984<\/td>\n<\/tr>\n
                                        \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uad00\uacc4<\/td>\nER \ub2e4\uc774\uc5b4\uadf8\ub7a8<\/td>\n\ud14c\uc774\ube14 \uac04 FK \uc5f0\uacb0<\/td>\n<\/tr>\n
                                        \ud504\ub85c\uc81d\ud2b8 \ub9c8\uc77c\uc2a4\ud1a4<\/td>\n\uac04\ud2b8 \ucc28\ud2b8<\/td>\n\uc2a4\ud504\ub9b0\ud2b8 \uc77c\uc815 \uad00\ub9ac<\/td>\n<\/tr>\n
                                        \uc0ac\uc6a9\uc790 \ud589\ub3d9 \ud328\ud134<\/td>\n\uc0ac\uc6a9\uc790 \uc800\ub2c8 \ub9f5<\/td>\nUI \uacbd\ub85c \uc124\uacc4 (\ud50c\ub85c\uc6b0\ucc28\ud2b8)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                                        \n
                                        \ud83d\udccc \uba38\uba54\uc774\ub4dc \ub2e8\uc810 \ubcf4\uc644\ubc95<\/strong>:<\/p>\n
                                          \n
                                        • \ub300\uaddc\ubaa8 \ub2e4\uc774\uc5b4\uadf8\ub7a8<\/strong> \u2192 %%<\/code>\ub85c \ubaa8\ub4c8 \ubd84\ud560 \ud6c4 \ubcd1\ud569<\/li>\n
                                        • \uc138\ubc00\ud55c \ub514\uc790\uc778<\/strong> \u2192 CSS classDef \ucee4\uc2a4\ud140<\/li>\n
                                        • \uc2e4\uc2dc\uac04 \ud611\uc5c5<\/strong> \u2192 VS Code Live Share \uc5f0\ub3d9<\/li>\n<\/ul>\n<\/blockquote>\n
                                          \n
                                          \ud83d\ude80 4. \uc2e4\ubb34 \uc801\uc6a9\uc744 \uc704\ud55c \ud544\uc218 \ub3c4\uad6c \uc5f0\ub3d9<\/strong><\/h3>\n
                                            \n
                                          1. VS Code<\/strong>:\n
                                              \n
                                            • \ud655\uc7a5\ud329 Mermaid Markdown Syntax Highlighting<\/strong> \uc124\uce58<\/li>\n
                                            • Ctrl + Shift + P<\/code> \u2192 Mermaid: Preview Diagram<\/code> \uc2e4\ud589<\/li>\n<\/ul>\n<\/li>\n
                                            • GitHub\/GitLab<\/strong>:\n
                                                \n
                                              • .md<\/code> \ud30c\uc77c \ub0b4 mermaid<\/code> \ucf54\ub4dc\ube14\ub85d \uc790\ub3d9 \ub80c\ub354\ub9c1<\/li>\n<\/ul>\n<\/li>\n
                                              • Notion<\/strong>:\n
                                                  \n
                                                • \/mermaid<\/code> \uc785\ub825 \ud6c4 \ucf54\ub4dc \uc0bd\uc785<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                                  \n
                                                  \u2705 5. \uacb0\ub860: \uba38\uba54\uc774\ub4dc\ub85c \ubb38\uc11c\ud654 \ud601\uba85 \uc2dc\uc791\ud558\uae30<\/strong><\/h3>\n
                                                  \uba38\uba54\uc774\ub4dc\ub294 \ub2e8\uc21c\ud55c \ub3c4\uad6c\uac00 \uc544\ub2cc \uac1c\ubc1c \uc0dd\ud0dc\uacc4\uc758 \uac8c\uc784\uccb4\uc778\uc800<\/strong>\uc785\ub2c8\ub2e4.<\/p>\n
                                                  \n
                                                  \u201c\uc2a4\ud06c\ub9b0\uc0f7\uc744 \ubc84\ub824\ub77c!<\/strong>\u201d
                                                  \n\uc9c0\uc18d<\/p>\n<\/blockquote>\n

                                                  \n
                                                  \n<script type=”module”><\/p>\n
                                                  import mermaid from ‘https:\/\/cdn.jsdelivr.net\/npm\/mermaid@10\/dist\/mermaid.esm.min.mjs’;<\/p>\n
                                                  mermaid.initialize({
                                                  \n  startOnLoad: true,
                                                  \n  theme: ‘default’,
                                                  \n  securityLevel: ‘strict’,
                                                  \n  fontFamily: ‘Arial, sans-serif’,
                                                  \n  flowchart: {
                                                  \n    useMaxWidth: true,
                                                  \n    htmlLabels: true,
                                                  \n    curve: ‘basis’,
                                                  \n  },
                                                  \n});<\/p>\n
                                                  if (document.readyState === ‘loading’) {
                                                  \n  document.addEventListener(‘DOMContentLoaded’, () => {
                                                  \n    mermaid.run();
                                                  \n  });
                                                  \n} else {
                                                  \n  mermaid.run();
                                                  \n}<\/p>\n
                                                  <\/script><\/p>\n

                                                  \n<\/p>\n","protected":false},"excerpt":{"rendered":"
                                                  \ud83e\udddc\u2640\ufe0f \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\uc758 \ubaa8\ub4e0 \uac83: \uc885\ub958\ubcc4 \ud65c\uc6a9\ubc95\uacfc \uc2e4\uc804 \uc608\uc81c\ub85c \uc815\ubcf5\ud558\uae30 (Mermaid Chart Types: \ud575\uc2ec \uc885\ub958 \uc644\ubcbd \ubd84\uc11d\uacfc \ud504\ub85c\uc81d\ud2b8 \uc801\uc6a9 \uac00\uc774\ub4dc) \u201c\uae30\uc220 \ubb38\uc11c \uc791\uc131\uc744 \ub531 1\ubd84 \ub9cc\uc5d0 \uc2dc\uac01\ud654\ud558\ub294 \ubc95?\u201d \ud769\uc5b4\uc9c4 \ucf54\ub4dc \ub85c\uc9c1, \ubcf5\uc7a1\ud55c \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870, \ud300 \ud68c\uc758 \ub54c\ub9c8\ub2e4 \ubc18\ubcf5\ub418\ub294 \uc124\uba85\u2026 \uac1c\ubc1c\uc790\ub77c\uba74 \ub204\uad6c\ub098 \uacbd\ud5d8\ud558\ub294 \uace0\ubbfc\uc785\ub2c8\ub2e4. **\uba38\uba54\uc774\ub4dc(Mermaid)**\ub294 \ub9c8\ud06c\ub2e4\uc6b4 \uae30\ubc18\uc73c\ub85c \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \ucf54\ub4dc\ub85c \uc0dd\uc131\ud558\ub294 \uc624\ud508\uc18c\uc2a4 \ub3c4\uad6c\ub85c, \ub2e8\uc21c\ud55c \ud50c\ub85c\uc6b0\ucc28\ud2b8\ubd80\ud130 \ubcf5\uc7a1\ud55c CI\/CD… <\/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-5419","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\/5419","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=5419"}],"version-history":[{"count":1,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5419\/revisions"}],"predecessor-version":[{"id":5422,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5419\/revisions\/5422"}],"wp:attachment":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}