1\ufe0f\u20e3 \uc65c \uc9c0\uae08 \uba38\uba54\uc774\ub4dc \ucc28\ud2b8\uc778\uac00? \ud14d\uc2a4\ud2b8 \uae30\ubc18 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc758 \ud601\uba85<\/h2>\n
\uae30\uc874 GUI \uae30\ubc18 \ub3c4\uad6c(Drag & Drop \ubc29\uc2dd)\ub294 \uc9c1\uad00\uc801\uc77c \uc218 \uc788\uc9c0\ub9cc \ubc18\ubcf5 \uc791\uc5c5\uacfc \ubc84\uc804 \uad00\ub9ac, \ub300\uaddc\ubaa8 \ud300 \ud611\uc5c5 \uc2dc \ud55c\uacc4\uac00 \uba85\ud655\ud588\uc2b5\ub2c8\ub2e4. \uba38\uba54\uc774\ub4dc\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \uac00\uc7a5 \uae30\ubcf8\uc801\uc774\uc790 \uad11\ubc94\uc704\ud558\uac8c \uc4f0\uc774\ub294 \ucc28\ud2b8\ub85c, \uc791\uc5c5 \ud750\ub984\uc774\ub098 \uc2dc\uc2a4\ud15c\uc758 \ub2e8\uacc4\uc801 \uc808\ucc28\ub97c \uc21c\ucc28\uc801\uc73c\ub85c \ud45c\ud604\ud569\ub2c8\ub2e4.<\/p>\n \n \u26a0\ufe0f Mermaid \ucc28\ud2b8 (\uc11c\ubc84 \ub80c\ub354\ub9c1 \ubd88\uac00)\n <\/p>\n \n WordPress \uc0ac\uc6a9\uc790:<\/strong> Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4. <\/p>\n \ud575\uc2ec \uc694\uc18c:<\/strong><\/p>\n \uc2e4\uc804 \ud65c\uc6a9 \uc608\uc2dc:<\/strong><\/p>\n \uc2dc\uc2a4\ud15c \uad6c\uc131 \uc694\uc18c(\uac1d\uccb4) \uac04\uc5d0 \uba54\uc2dc\uc9c0\uac00 \uc8fc\uace0\ubc1b\ub294 \uc2dc\uac04\uc801 \uc21c\uc11c\uc640 \ub3d9\uc801\uc778 \uc0c1\ud638\uc791\uc6a9<\/strong>\uc744 \uba85\ud655\ud788 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. \ud2b9\ud788 API \ud1b5\uc2e0\uc774\ub098 \uba40\ud2f0\uc2a4\ub808\ub4dc \ub3d9\uc791 \ubd84\uc11d\uc5d0 \ud544\uc218\uc801\uc785\ub2c8\ub2e4.<\/p>\n \ud575\uc2ec \uc694\uc18c:<\/strong><\/p>\n \uc2e4\uc804 \ud65c\uc6a9 \uc608\uc2dc:<\/strong><\/p>\n \uac1d\uccb4\uc9c0\ud5a5 \ud504\ub85c\uadf8\ub798\ubc0d(OOP)\uc758 \ud575\uc2ec\uc778 \ud074\ub798\uc2a4\uc758 \uc18d\uc131(Attribute), \uba54\uc11c\ub4dc(Method), \uadf8\ub9ac\uace0 \ud074\ub798\uc2a4 \uac04 \uad00\uacc4(\uc0c1\uc18d, \uc9d1\ud569, \uc758\uc874 \ub4f1)\ub97c \uc815\uc801\uc73c\ub85c \ud45c\ud604\ud569\ub2c8\ub2e4.<\/p>\n \n \u26a0\ufe0f Mermaid \ucc28\ud2b8 (\uc11c\ubc84 \ub80c\ub354\ub9c1 \ubd88\uac00)\n <\/p>\n \n WordPress \uc0ac\uc6a9\uc790:<\/strong> Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4. <\/p>\n \ud575\uc2ec \uc694\uc18c:<\/strong><\/p>\n \uc2e4\uc804 \ud65c\uc6a9 \uc608\uc2dc:<\/strong><\/p>\n \ud558\ub098\uc758 \uac1d\uccb4<\/strong>\uac00 \uac00\uc9c8 \uc218 \uc788\ub294 \ub2e4\uc591\ud55c \uc0c1\ud0dc(State)<\/strong> \uc640 \uc0c1\ud0dc \uac04 \uc804\ud658\uc744 \uc720\ubc1c\ud558\ub294 \uc774\ubca4\ud2b8(Event)\/\uc870\uac74(Guard)<\/strong> \uc744 \uc911\uc2ec\uc73c\ub85c \ud45c\ud604\ud569\ub2c8\ub2e4. \ubcf5\uc7a1\ud55c \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc758 \ud750\ub984\uc744 \uba85\ud655\ud788 \ud560 \ub54c \uac15\ub825\ud569\ub2c8\ub2e4.<\/p>\n \ud575\uc2ec \uc694\uc18c:<\/strong><\/p>\n \uc2e4\uc804 \ud65c\uc6a9 \uc608\uc2dc:<\/strong><\/p>\n \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc758 \uad6c\uc870\ub97c \uc124\uacc4\ud558\uace0 \uc774\ud574\ud558\ub294 \ub370 \ud544\uc218\uc801\uc778 \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc5d4\ud2f0\ud2f0(Entity – \ud14c\uc774\ube14)<\/strong>, \uadf8 \uc18d\uc131(Attribute – \uceec\ub7fc)<\/strong>, \uadf8\ub9ac\uace0 \uc5d4\ud2f0\ud2f0 \uac04\uc758 \uad00\uacc4(Relationship)<\/strong> \ub97c \uba85\uc2dc\uc801\uc73c\ub85c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n \n \u26a0\ufe0f Mermaid \ucc28\ud2b8 (\uc11c\ubc84 \ub80c\ub354\ub9c1 \ubd88\uac00)\n <\/p>\n \n WordPress \uc0ac\uc6a9\uc790:<\/strong> Mermaid Chart \ud50c\ub7ec\uadf8\uc778<\/a>\uc744 \uc124\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4. <\/p>\n \ud575\uc2ec \uc694\uc18c:<\/strong><\/p>\n \ud83c\udf0a \uba38\uba54\uc774\ub4dc \ucc28\ud2b8 \uc644\ubcbd \ud65c\uc6a9 \uac00\uc774\ub4dc: 8\uac00\uc9c0 \uc720\ud615\uacfc \uc2e4\uc81c \uc0ac\ub840 \ubd84\uc11d \ud14d\uc2a4\ud2b8\ub85c \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uc9c1\uc811 \uadf8\ub9ac\uace0 \uc124\uba85\ud558\ub294 \ucf54\ub4dc \uae30\ubc18 \uc2dc\uac01\ud654 \ub3c4\uad6c \uba38\uba54\uc774\ub4dc(Mermaid) \ub294 \ubcf5\uc7a1\ud55c \uc2dc\uc2a4\ud15c\uacfc \ud504\ub85c\uc138\uc2a4\ub97c \uba85\ub8cc\ud558\uac8c \uc804\ub2ec\ud558\ub294 \ud601\uc2e0\uc801\uc778 \ubc29\ubc95\uc744 \uc81c\uc2dc\ud569\ub2c8\ub2e4. GitHub, Notion \ub4f1 \uc8fc\uc694 \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uae30\ubcf8 \uc9c0\uc6d0\ub418\uba70 \uac1c\ubc1c\uc790\uc640 \ube44\uac1c\ubc1c\uc790 \ubaa8\ub450\uc5d0\uac8c \uac15\ub825\ud55c \ub3c4\uad6c\ub85c \uc790\ub9ac\uc7a1\uc558\uc2b5\ub2c8\ub2e4. \uc774 \ud3ec\uad04\uc801\uc778 \uc548\ub0b4\uc11c\uc5d0\uc11c\ub294 \uba38\uba54\uc774\ub4dc\uac00 \uc81c\uacf5\ud558\ub294 \ud575\uc2ec \ucc28\ud2b8 \uc720\ud615 8\uac00\uc9c0\ub97c \uae4a\uc774 \uc788\uac8c \ud30c\ud5e4\uce58\uace0,… <\/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-5429","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\/5429","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=5429"}],"version-history":[{"count":1,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5429\/revisions"}],"predecessor-version":[{"id":5430,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5429\/revisions\/5430"}],"wp:attachment":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\ud14d\uc2a4\ud2b8<\/code>\ub85c \ud574\uacb0\ud569\ub2c8\ub2e4.<\/p>\n\n
2\ufe0f\u20e3 \uba38\uba54\uc774\ub4dc\uc758 \ud575\uc2ec \ucc28\ud2b8 \uc720\ud615\ubcc4 \ubd84\uc11d: \ud2b9\uc9d5, \ubb38\ubc95, \uc2e4\uc804 \uc801\uc6a9\ubc95<\/h2>\n
\ud83d\udcc8 1. \ud50c\ub85c\uc6b0\ucc28\ud2b8 (Flowchart) – \ud504\ub85c\uc138\uc2a4\uc758 \uae30\ubcf8 \ubf08\ub300<\/h3>\n
\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\nflowchart TD\n A[\ub85c\uadf8\uc778 \uc2dc\ub3c4] --> |\uc131\uacf5| B[\uba54\uc778 \ud398\uc774\uc9c0 \ub85c\ub4dc]\n A --> |\uc2e4\ud328| C[\uc5d0\ub7ec \uba54\uc2dc\uc9c0 \ud45c\uc2dc]\n B --> D[\uacc4\uc815 \uc124\uc815 \ud655\uc778]\n D --> E{\ud504\ub9ac\ubbf8\uc5c4 \uc0ac\uc6a9\uc790?}\n E --> |Yes| F[\ud504\ub9ac\ubbf8\uc5c4 \uae30\ub2a5 \ub178\ucd9c]\n E --> |No| G[\uae30\ubcf8 \uae30\ub2a5 \ub178\ucd9c]\n F --> H[\ud65c\ub3d9 \uc2dc\uc791]\n G --> H\n <\/pre>\n<\/details>\n
\n \ub610\ub294<\/strong> Mermaid Live Editor<\/a>\uc5d0\uc11c \uc774\ubbf8\uc9c0\ub85c \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc138\uc694.\n <\/p>\n\nflowchart TD\n A[\ub85c\uadf8\uc778 \uc2dc\ub3c4] --> |\uc131\uacf5| B[\uba54\uc778 \ud398\uc774\uc9c0 \ub85c\ub4dc]\n A --> |\uc2e4\ud328| C[\uc5d0\ub7ec \uba54\uc2dc\uc9c0 \ud45c\uc2dc]\n B --> D[\uacc4\uc815 \uc124\uc815 \ud655\uc778]\n D --> E{\ud504\ub9ac\ubbf8\uc5c4 \uc0ac\uc6a9\uc790?}\n E --> |Yes| F[\ud504\ub9ac\ubbf8\uc5c4 \uae30\ub2a5 \ub178\ucd9c]\n E --> |No| G[\uae30\ubcf8 \uae30\ub2a5 \ub178\ucd9c]\n F --> H[\ud65c\ub3d9 \uc2dc\uc791]\n G --> H\n <\/pre>\n<\/div>\n<\/div>\n\n
[\uc9c1\uc0ac\uac01\ud615]<\/code>, {\ub9c8\ub984\ubaa8}<\/code>, (\ub465\uadfc\ubaa8\uc11c\ub9ac)<\/code>, ((\uc6d0))<\/code><\/li>\n--><\/code> (\uc2e4\uc120), -.-><\/code> (\uc810\uc120), ==><\/code> (\uad75\uc740 \uc120)<\/li>\n{\uc870\uac74}<\/code> \ub178\ub4dc\uc640 |\uc870\uac74\uc124\uba85|<\/code> \uc575\ucee4<\/li>\nclick A "URL" "\ud234\ud301"<\/code> (\ub178\ub4dc\uc5d0 \ud558\uc774\ud37c\ub9c1\ud06c \ucd94\uac00 \uac00\ub2a5)<\/li>\n<\/ul>\n\n
\ud83d\udd00 2. \uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 (Sequence Diagram) – \uac1d\uccb4 \uac04 \uc2dc\uac04\uc21c \uc0c1\ud638\uc791\uc6a9<\/h3>\n
<\/div>\n
\n
participant<\/code>: \uc0c1\ud638\uc791\uc6a9 \ucc38\uc5ec\uc790 \uc815\uc758<\/li>\n->><\/code>, -->><\/code>: \uc2e4\uc120\/\uc810\uc120 \ud654\uc0b4\ud45c (\uba54\uc2dc\uc9c0)<\/li>\n-x<\/code>: \ube44\ub3d9\uae30 \uba54\uc2dc\uc9c0 \ud45c\ud604<\/li>\nNote right\/left of<\/code>: \ud2b9\uc815 \uac1d\uccb4 \uc606 \ub178\ud2b8 \ucd94\uac00<\/li>\nloop<\/code>, alt<\/code>, opt<\/code>: \uc81c\uc5b4 \ud750\ub984 \ud45c\ud604<\/li>\n<\/ul>\n\n
\ud83c\udfd7 3. \ud074\ub798\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 (Class Diagram) – \uac1d\uccb4\uc9c0\ud5a5 \uad6c\uc870\uc758 \uccad\uc0ac\uc9c4<\/h3>\n
\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\nclassDiagram\n class User {\n +String id\n +String name\n +String email\n +DateTime createdAt\n +updateProfile() void\n +changePassword() void\n }\n\n class Order {\n +String orderId\n +String userId\n +OrderStatus status\n +List~Product~ items\n +calculateTotal() Money\n +cancelOrder() bool\n }\n\n User "1" --> "0..*" Order : Places >\n <\/pre>\n<\/details>\n
\n \ub610\ub294<\/strong> Mermaid Live Editor<\/a>\uc5d0\uc11c \uc774\ubbf8\uc9c0\ub85c \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc138\uc694.\n <\/p>\n\nclassDiagram\n class User {\n +String id\n +String name\n +String email\n +DateTime createdAt\n +updateProfile() void\n +changePassword() void\n }\n\n class Order {\n +String orderId\n +String userId\n +OrderStatus status\n +List~Product~ items\n +calculateTotal() Money\n +cancelOrder() bool\n }\n\n User "1" --> "0..*" Order : Places >\n <\/pre>\n<\/div>\n<\/div>\n\n
class ClassName { \uba64\ubc84\ub4e4 }<\/code><\/li>\n+<\/code> (public), -<\/code> (private), #<\/code> (protected)<\/li>\n\n
Airplane --|> Vehicle<\/code><\/li>\nTeam "1" o-- "1..*" Member<\/code> (Team\uc740 \uc5ec\ub7ec Member\ub97c \uac00\uc9d0)<\/li>\nCar *-- Engine<\/code> (Car\uc758 \uc0dd\uba85\uc8fc\uae30\uc640 Engine \ub3d9\uc77c)<\/li>\nOrder ..> Product<\/code> (Product\uc758 \ubcc0\ud654\uac00 Order\uc5d0 \uc601\ud5a5)<\/li>\n<\/ul>\n<\/li>\nList~Item~<\/code><\/li>\n<\/ul>\n\n
\ud83d\udd27 4. \uc0c1\ud0dc \ub2e4\uc774\uc5b4\uadf8\ub7a8 (State Diagram) – \uac1d\uccb4\uc758 \uc0dd\uba85\uc8fc\uae30\uc640 \uc0c1\ud0dc \ubcc0\ud654<\/h3>\n
<\/div>\n
\n
stateDiagram-v2<\/code> \uc9c0\uc2dc\uc790 \uc0ac\uc6a9 (\uad8c\uc7a5)<\/li>\n[*]<\/code><\/li>\n[*]<\/code><\/li>\nstate StateName { \ub0b4\ubd80 \uc0c1\ud0dc\ub4e4 }<\/code><\/li>\n\uc0c1\ud0dcA --> \uc0c1\ud0dcB : \uc774\ubca4\ud2b8\/\uc870\uac74<\/code><\/li>\n: [\uc870\uac74\uc2dd]<\/code> \uc608) : amount > 0<\/code><\/li>\n: \/ \uc561\uc158<\/code> \uc608) Submit : \/ SaveOrder<\/code><\/li>\n<\/ul>\n\n
\ud83e\udde9 5. \uc5d4\ud2f0\ud2f0 \uad00\uacc4\ub3c4(ERD) (Entity Relationship Diagram) – \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc124\uacc4\uc758 \ud575\uc2ec<\/h3>\n
\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\nerDiagram\n CUSTOMER ||--o{ ORDER : places\n CUSTOMER {\n string customerId PK\n string name\n string email\n }\n ORDER ||--|{ ORDER_ITEM : contains\n ORDER {\n string orderId PK\n date orderDate\n string customerId FK\n enum status\n }\n PRODUCT ||--o{ ORDER_ITEM : includes\n PRODUCT {\n string productId PK\n string name\n decimal price\n }\n ORDER_ITEM {\n string orderId PK,FK1\n string productId PK,FK2\n integer quantity\n }\n <\/pre>\n<\/details>\n
\n \ub610\ub294<\/strong> Mermaid Live Editor<\/a>\uc5d0\uc11c \uc774\ubbf8\uc9c0\ub85c \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc138\uc694.\n <\/p>\n\nerDiagram\n CUSTOMER ||--o{ ORDER : places\n CUSTOMER {\n string customerId PK\n string name\n string email\n }\n ORDER ||--|{ ORDER_ITEM : contains\n ORDER {\n string orderId PK\n date orderDate\n string customerId FK\n enum status\n }\n PRODUCT ||--o{ ORDER_ITEM : includes\n PRODUCT {\n string productId PK\n string name\n decimal price\n }\n ORDER_ITEM {\n string orderId PK,FK1\n string productId PK,FK2\n integer quantity\n }\n <\/pre>\n<\/div>\n<\/div>\n\n
erDiagram<\/code> \uc9c0\uc2dc\uc790 \uc0ac\uc6a9<\/li>\n\uc5d4\ud2f0\ud2f0\uba85 { \uc18d\uc131 }<\/code> (\uc18d\uc131\uc5d0 PK<\/code>(Primary Key),<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"