<\/p>\n
\uac1c\ubc1c\uc790, \uae30\ud68d\uc790, \ub9c8\ucf00\ud305 \ub2f4\ub2f9\uc790\ub77c\uba74 \ub204\uad6c\ub098 \ubcf5\uc7a1\ud55c \uac1c\ub150\uc744 \uba85\ub8cc\ud558\uac8c \uc804\ub2ec<\/strong>\ud574\uc57c \ud560 \uc21c\uac04\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc804\ud1b5\uc801\uc778 \ub3c4\uad6c\ub85c \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uadf8\ub9ac\ub824\uba74 \ub054\ucc0d\ud558\uac8c \ub9ce\uc740 \uc2dc\uac04\uc774 \uc18c\uc694\ub418\uc8e0. \uc774\ub54c **\uba38\uba54\uc774\ub4dc(Mermaid)**\uac00 \ub4f1\uc7a5\ud569\ub2c8\ub2e4! \uc774 \uc624\ud508\uc18c\uc2a4 \ub3c4\uad6c\ub294 \ucf54\ub4dc\ub9cc\uc73c\ub85c \ub2e4\uc774\ub098\ubbf9\ud55c \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uc0dd\uc131\ud558\ub294 \ud601\uba85\uc744 \uc77c\uc73c\ucf30\uc2b5\ub2c8\ub2e4. \ub2e8\uc21c\ud55c \ud750\ub984\ub3c4\ubd80\ud130 \ubcf5\uc7a1\ud55c \uc2dc\uc2a4\ud15c \uc544\ud0a4\ud14d\ucc98\uae4c\uc9c0, \ud14d\uc2a4\ud2b8 \uae30\ubc18 \uc124\uba85\uc774 \uc2dc\uac01\uc801 \uc544\ud2b8\ub85c \ubcc0\uc2e0\ud558\ub294 \uacfc\uc815\uc744 \uacbd\ud5d8\ud574\ubcf4\uc138\uc694. \uac01 \ucc28\ud2b8 \uc720\ud615\ubcc4 \ud2b9\uc131\uacfc \uc2e4\uc81c \uc801\uc6a9 \uc0ac\ub840\ub97c \ud30c\ud5e4\uce58\uba70 \uc5ec\ub7ec\ubd84\uc758 \ubb38\uc11c\ub97c \ud55c \ub2e8\uacc4 \uc5c5\uadf8\ub808\uc774\ub4dc\ud569\uc2dc\ub2e4.<\/p>\n \ub85c\uc9c1\uc758 \uae38\uc744 \ub9cc\ub4e4\uc5b4\uc8fc\ub294 \uae38\uc7a1\uc774<\/strong> \ub300\ud45c\uc801 \ud65c\uc6a9 \ubd84\uc57c<\/strong>:<\/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 \u2192 \uc2e4\uc804 \ud301<\/strong>: \uba54\uc2dc\uc9c0 \ud750\ub984\uc758 \ud0c0\uc784\ub77c\uc778<\/strong> \ud575\uc2ec \ud45c\ud604 \uc694\uc18c<\/strong>:<\/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 \u2192 \ucd5c\uc801\ud654 \uc804\ub7b5<\/strong>: \uac1d\uccb4 \uad00\uacc4\uc758 \uad6c\uc870\uc801 \ub9f5<\/strong> \uc8fc\uc694 \uad00\uacc4 \uc720\ud615<\/strong>:<\/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 \u2192 \uc2e4\ubb34 \uc801\uc6a9<\/strong>: \uc18c\ud504\ud2b8\uc6e8\uc5b4 \ub9ac\ud329\ud1a0\ub9c1 \uc804 \uad6c\uc870 \ud30c\uc545 \ubcc0\ud654\uc758 \uc21c\uac04\uc744 \ud3ec\ucc29\ud558\ub294 \ub80c\uc988<\/strong> \uc8fc\uc694 \uad6c\uc131 \uc694\uc18c<\/strong>:<\/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 \u2192 \uc2e4\uc804 \ud65c\uc6a9<\/strong>: \uacb0\uc81c \uc2dc\uc2a4\ud15c\uc758 \ud2b8\ub79c\uc7ad\uc158 \uc0c1\ud0dc \uad00\ub9ac \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc124\uacc4\uc758 \ucd08\uc11d<\/strong> \uad00\uacc4\uc131 \ud45c\uae30\ubc95<\/strong>:<\/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 \u2192 \ubb3c\ub9ac\uc801 \uc124\uacc4<\/strong>: \uc9c4\ucc99\ub3c4\ub97c \ucd08\ub2e8\uc704\ub85c \ud2b8\ub798\ud0b9<\/strong> \uc8fc\uc694 \uc124\uc815 \uc635\uc158<\/strong>:<\/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 \u2192 \ub9ac\uc18c\uc2a4 \ucd5c\uc801\ud654<\/strong>: \uc804\uccb4 \ub300\ube44 \ubd80\ubd84\uc758 \uad00\uacc4<\/strong> \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud3ec\uc778\ud2b8<\/strong>:<\/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 \u2192 \uc2dc\uac01\ud654 \ud301<\/strong>: \uc758\uc874\uc131 \uccb4\uc778 \ubd84\uc11d \ub3c4\uad6c<\/strong> \uc2ec\ubcfc \uccb4\uacc4<\/strong>:<\/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 \u2192 \ucef4\ud50c\ub77c\uc774\uc5b8\uc2a4<\/strong>: \uc0ac\uc6a9\uc790 \ud589\ub3d9 \ud328\ud134 \uc2a4\ud1a0\ub9ac\ubcf4\ub4dc<\/strong> \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 \u2192 \uc815\ub7c9\uc801 \ubd84\uc11d<\/strong>: \uc22b\uc790\ub85c \uc791\uc5c5 \uc2dc\uac04\/\ub09c\uc774\ub3c4 \ud45c\uc2dc \uc9c0\uae08\uae4c\uc9c0 \uc0b4\ud3b4\ubcf8 \uba38\uba54\uc774\ub4dc\uc758 \ucc28\ud2b8 \uc720\ud615\ub4e4\uc740 \ubb38\uc81c \ud574\uacb0\uc758 \ub2e4\uc591\ud55c \ub80c\uc988<\/strong>\uc785\ub2c8\ub2e4. \ud504\ub85c\uc138\uc2a4 \uac1c\uc120\uc5d0\ub294 \u2699\ufe0f\ud750\ub984\ub3c4<\/strong>, API \uac80\uc99d\uc5d0\ub294 \u231b\uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8<\/strong>, \ub370\uc774\ud130 \uc124\uacc4\uc5d0\ub294 \ud83d\udd17ERD<\/strong>\uac00 \ucd5c\uc801\ud654\ub41c \uc120\ud0dd\uc785\ub2c8\ub2e4. \uc2e4\uc81c\ub85c Spotify\ub294 \uba38\uba54\uc774\ub4dc\ub85c \ub9c8\uc774\ud06c\ub85c\uc11c\ube44\uc2a4 \uc544\ud0a4\ud14d\ucc98 \ubb38\uc11c\ub97c \uad6c\ud604\ud574 \ud300 \uac04 \ud611\uc5c5 \uc18d\ub3c4\ub97c 40% \ud5a5\uc0c1\uc2dc\ucf30\uc2b5\ub2c8\ub2e4.<\/p>\n \ud83d\ude80 \uc9c0\uae08 \uc2dc\uc791\ud558\ub294 \uccab\uac78\uc74c<\/strong>:<\/p>\n
\n\ud83d\udcca 1. \ud750\ub984\ub3c4 (Flowchart): \ud504\ub85c\uc138\uc2a4 \uc2dc\uac01\ud654\uc758 \ud575\uc2ec<\/h3>\n
\nif-else\ubd80\ud130 \ubcf5\uc7a1\ud55c \uc758\uc0ac\uacb0\uc815 \ud2b8\ub9ac\uae4c\uc9c0 \ub2e8\uacc4\ubcc4 \uacfc\uc815\uc744 \uc9c1\uad00\uc801\uc73c\ub85c \ud45c\ud604\ud569\ub2c8\ub2e4.<\/p>\n\n
\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\nflowchart TD\n A[\uc2dc\uc791] --> B{\uc870\uac74 \ud655\uc778}\n B -->|\ucc38| C[\uc791\uc5c5 \uc2e4\ud589]\n B -->|\uac70\uc9d3| D[\uc5d0\ub7ec \ucc98\ub9ac]\n C --> E[\uacb0\uacfc \ucd9c\ub825]\n D --> E\n E --> F[\uc885\ub8cc]\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[\uc2dc\uc791] --> B{\uc870\uac74 \ud655\uc778}\n B -->|\ucc38| C[\uc791\uc5c5 \uc2e4\ud589]\n B -->|\uac70\uc9d3| D[\uc5d0\ub7ec \ucc98\ub9ac]\n C --> E[\uacb0\uacfc \ucd9c\ub825]\n D --> E\n E --> F[\uc885\ub8cc]\n <\/pre>\n<\/div>\n<\/div>\n\n
subgraph<\/code>\ub85c \ud558\uc704 \ud504\ub85c\uc138\uc2a4 \uadf8\ub8f9\ud654 \uac00\ub2a5
\n\u2192 \uc8fc\uc758\uc810<\/strong>: \ud654\uc0b4\ud45c \ubc29\ud5a5(TD<\/code>=Top-Down, LR<\/code>=Left-Right) \ucd08\uae30 \uc124\uc815\uc774 \ub808\uc774\uc544\uc6c3 \uacb0\uc815<\/p>\n<\/blockquote>\n
\n\ud83d\udce1 2. \uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 (Sequence Diagram): \uc2dc\uac04 \ucd95\uc758 \uc0c1\ud638\uc791\uc6a9<\/h3>\n
\n\uac1d\uccb4 \uac04 \ud1b5\uc2e0 \uc21c\uc11c\ub97c \uc2dc\uac04\uc801 \uad00\uc810\uc5d0\uc11c \ud3ec\ucc29\ud569\ub2c8\ub2e4. API \ud638\ucd9c, \ud2b8\ub79c\uc7ad\uc158 \ucc98\ub9ac \ubd84\uc11d\uc5d0 \ud544\uc218\uc801\uc785\ub2c8\ub2e4.<\/p>\n\n
\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\nsequenceDiagram\n \ucc38\uac00\uc790 A as \ud074\ub77c\uc774\uc5b8\ud2b8\n \ucc38\uac00\uc790 B as \uc11c\ubc84\n A->>B: \ub85c\uadf8\uc778 \uc694\uccad\n B-->>A: \uc778\uc99d \ud1a0\ud070 \ubc1c\uae09\n A->>B: \ub370\uc774\ud130 \uc870\ud68c \uc694\uccad\n B-->>A: JSON \ub370\uc774\ud130 \ubc18\ud658\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\nsequenceDiagram\n \ucc38\uac00\uc790 A as \ud074\ub77c\uc774\uc5b8\ud2b8\n \ucc38\uac00\uc790 B as \uc11c\ubc84\n A->>B: \ub85c\uadf8\uc778 \uc694\uccad\n B-->>A: \uc778\uc99d \ud1a0\ud070 \ubc1c\uae09\n A->>B: \ub370\uc774\ud130 \uc870\ud68c \uc694\uccad\n B-->>A: JSON \ub370\uc774\ud130 \ubc18\ud658\n <\/pre>\n<\/div>\n<\/div>\n
\n
activate<\/code>\/deactivate<\/code>\ub85c \uc0dd\uba85\uc120 \uc81c\uc5b4
\n\u2192 \uc0ac\ub840<\/strong>: \ub9c8\uc774\ud06c\ub85c\uc11c\ube44\uc2a4 \uc544\ud0a4\ud14d\ucc98\uc758 \uc11c\ube44\uc2a4 \ud1b5\uc2e0 \uac80\uc99d<\/p>\n<\/blockquote>\n
\n\ud83e\udde9 3. \ud074\ub798\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8 (Class Diagram): OOP\uc758 \uccad\uc0ac\uc9c4<\/h3>\n
\n\ud074\ub798\uc2a4 \uc18d\uc131, \uba54\uc11c\ub4dc, \uc0c1\uc18d \uad00\uacc4\ub97c UML \ud45c\uae30\ubc95\uc73c\ub85c \uad6c\ud604\ud569\ub2c8\ub2e4.<\/p>\n\n
..|><\/code><\/li>\n*--<\/code><\/li>\n..><\/code><\/li>\n<\/ul>\n\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\nclassDiagram\n class Vehicle {\n +String make\n +startEngine() void\n }\n class Car {\n +int doorCount\n }\n Vehicle <|-- Car : \uc0c1\uc18d\n class Wheel {\n +float pressure\n }\n Car *-- Wheel : 4\uac1c\uc758 \ud720 \ubcf4\uc720\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 Vehicle {\n +String make\n +startEngine() void\n }\n class Car {\n +int doorCount\n }\n Vehicle <|-- Car : \uc0c1\uc18d\n class Wheel {\n +float pressure\n }\n Car *-- Wheel : 4\uac1c\uc758 \ud720 \ubcf4\uc720\n <\/pre>\n<\/div>\n<\/div>\n\n
\n\u2192 \uc0ac\uc6a9\uc790 \uc815\uc758<\/strong>: <<interface>><\/code> \uc2a4\ud14c\ub808\uc624\ud0c0\uc785\uc73c\ub85c \uc778\ud130\ud398\uc774\uc2a4 \ud45c\uc2dc<\/p>\n<\/blockquote>\n
\n\ud83d\udd04 4. \uc0c1\ud0dc \ub2e4\uc774\uc5b4\uadf8\ub7a8 (State Diagram): \uac1d\uccb4\uc758 \uc0dd\uba85\uc8fc\uae30<\/h3>\n
\n\uc720\ud55c \uc0c1\ud0dc \uba38\uc2e0(FSM)\uc744 \uad6c\ud604\ud558\uc5ec \uac1d\uccb4\uc758 \uc0c1\ud0dc \uc804\uc774 \uacfc\uc815\uc744 \ub9e4\ud551\ud569\ub2c8\ub2e4.<\/p>\n\n
[*]<\/code><\/li>\n\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\nstateDiagram-v2\n [*] --> \ub300\uae30\uc911\n \ub300\uae30\uc911 --> \uc2e4\ud589\uc911 : \uc2dc\uc791 \ubc84\ud2bc \ud074\ub9ad\n \uc2e4\ud589\uc911 --> \uc77c\uc2dc\uc815\uc9c0 : \uc911\uc9c0 \uc774\ubca4\ud2b8\n \uc77c\uc2dc\uc815\uc9c0 --> \uc2e4\ud589\uc911 : \uc7ac\uac1c \uc774\ubca4\ud2b8\n \uc2e4\ud589\uc911 --> \uc644\ub8cc\ub428 : \uc791\uc5c5 \uc885\ub8cc\n \uc644\ub8cc\ub428 --> [*]\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\nstateDiagram-v2\n [*] --> \ub300\uae30\uc911\n \ub300\uae30\uc911 --> \uc2e4\ud589\uc911 : \uc2dc\uc791 \ubc84\ud2bc \ud074\ub9ad\n \uc2e4\ud589\uc911 --> \uc77c\uc2dc\uc815\uc9c0 : \uc911\uc9c0 \uc774\ubca4\ud2b8\n \uc77c\uc2dc\uc815\uc9c0 --> \uc2e4\ud589\uc911 : \uc7ac\uac1c \uc774\ubca4\ud2b8\n \uc2e4\ud589\uc911 --> \uc644\ub8cc\ub428 : \uc791\uc5c5 \uc885\ub8cc\n \uc644\ub8cc\ub428 --> [*]\n <\/pre>\n<\/div>\n<\/div>\n
\n
\n\u2192 \uace0\uae09 \uae30\ub2a5<\/strong>: fork<\/code>\/join<\/code>\uc73c\ub85c \ubcd1\ub82c \uc0c1\ud0dc \ud45c\ud604<\/p>\n<\/blockquote>\n
\n\ud83d\udd17 5. ER \ub2e4\uc774\uc5b4\uadf8\ub7a8 (Entity Relationship Diagram): \ub370\uc774\ud130 \uad00\uacc4\uc758 DNA<\/h3>\n
\n\uc5d4\ud130\ud2f0-\uc18d\uc131-\uad00\uacc4(Entity-Attribute-Relationship) \ubaa8\ub378\ub9c1\uc73c\ub85c DB \uc2a4\ud0a4\ub9c8\ub97c \uc2dc\uac01\ud654\ud569\ub2c8\ub2e4.<\/p>\n\n
||--||<\/code><\/li>\n||--o{<\/code><\/li>\n}o--o{<\/code><\/li>\n<\/ul>\n\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\nerDiagram\n CUSTOMER ||--o{ ORDER : "\uc8fc\ubb38"\n ORDER ||--|{ ORDER_ITEM : "\ud3ec\ud568"\n PRODUCT ||--o{ ORDER_ITEM : "\uc5f0\uacb0"\n CUSTOMER {\n int id PK\n string name\n }\n ORDER {\n int order_id PK\n date order_date\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 : "\uc8fc\ubb38"\n ORDER ||--|{ ORDER_ITEM : "\ud3ec\ud568"\n PRODUCT ||--o{ ORDER_ITEM : "\uc5f0\uacb0"\n CUSTOMER {\n int id PK\n string name\n }\n ORDER {\n int order_id PK\n date order_date\n }\n <\/pre>\n<\/div>\n<\/div>\n\n
PK<\/code>(Primary Key), FK<\/code>(Foreign Key) \uc5b4\ub178\ud14c\uc774\uc158 \ucd94\uac00
\n\u2192 \ub3c4\uad6c \uc5f0\ub3d9<\/strong>: SQL DDL \uc790\ub3d9 \uc0dd\uc131 \ud50c\ub7ec\uadf8\uc778\uacfc \ud638\ud658 \uac00\ub2a5<\/p>\n<\/blockquote>\n
\n\u23f3 6. \uac04\ud2b8 \ucc28\ud2b8 (Gantt Chart): \ud504\ub85c\uc81d\ud2b8\uc758 \uc2dc\uac04 \uad00\ub9ac\uc790<\/h3>\n
\n\ud14c\uc2a4\ud06c \uae30\uac04, \uc758\uc874\uc131, \ub9c8\uc77c\uc2a4\ud1a4\uc744 \ud0c0\uc784\ub77c\uc778\uc73c\ub85c \ud45c\ud604\ud569\ub2c8\ub2e4.<\/p>\n\n
section<\/code> \ud0a4\uc6cc\ub4dc<\/li>\nactive<\/code>\/done<\/code> \uc0c1\ud0dc \ud45c\uc2dc<\/li>\nYYYY-MM-DD<\/code><\/li>\n<\/ul>\n\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\ngantt\n title \ud504\ub85c\uc81d\ud2b8 \uc77c\uc815\n dateFormat YYYY-MM-DD\n section \uc124\uacc4\n \uc694\uad6c\uc0ac\ud56d \ubd84\uc11d :active, des1, 2023-10-01, 7d\n \uae30\uc220 \uc2a4\ud0dd \uc120\uc815 : des2, after des1, 5d\n section \uac1c\ubc1c\n \ubc31\uc5d4\ub4dc API : dev1, after des2, 10d\n \ud504\ub860\ud2b8\uc5d4\ub4dc : dev2, after des1, 14d\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\ngantt\n title \ud504\ub85c\uc81d\ud2b8 \uc77c\uc815\n dateFormat YYYY-MM-DD\n section \uc124\uacc4\n \uc694\uad6c\uc0ac\ud56d \ubd84\uc11d :active, des1, 2023-10-01, 7d\n \uae30\uc220 \uc2a4\ud0dd \uc120\uc815 : des2, after des1, 5d\n section \uac1c\ubc1c\n \ubc31\uc5d4\ub4dc API : dev1, after des2, 10d\n \ud504\ub860\ud2b8\uc5d4\ub4dc : dev2, after des1, 14d\n <\/pre>\n<\/div>\n<\/div>\n
\n
crit<\/code> \ud788\ud2b8\ub9f5\uc73c\ub85c \ud06c\ub9ac\ud2f0\uceec \ud328\uc2a4 \uac15\uc870
\n\u2192 \uc2e4\uc2dc\uac04 \uc5c5\ub370\uc774\ud2b8<\/strong>: \uc9c4\ud589\ub960 \ud37c\uc13c\ud2b8(%) \uc790\ub3d9 \uacc4\uc0b0<\/p>\n<\/blockquote>\n
\n\ud83d\udcc8 7. \ud30c\uc774 \ucc28\ud2b8 (Pie Chart): \ub370\uc774\ud130 \ube44\uc728\uc758 \uc778\uc0ac\uc774\ud2b8<\/h3>\n
\n\ubc94\uc8fc\ubcc4 \uad6c\uc131 \ube44\uc728\uc744 \uc6d0\ud615 \ubd84\ud560\ub85c \uc9c1\uad00\ud654\ud569\ub2c8\ub2e4.<\/p>\n\n
title<\/code> \ud30c\ub77c\ubbf8\ud130<\/li>\nshowData<\/code> \uc635\uc158<\/li>\n\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\npie title \ub370\uc774\ud130 \ubd84\ud3ec\n "JavaScript" : 42.7\n "Python" : 28.1\n "Java" : 15.3\n "\uae30\ud0c0" : 13.9\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\npie title \ub370\uc774\ud130 \ubd84\ud3ec\n "JavaScript" : 42.7\n "Python" : 28.1\n "Java" : 15.3\n "\uae30\ud0c0" : 13.9\n <\/pre>\n<\/div>\n<\/div>\n
\n
color<\/code> \ud0dc\uadf8\ub85c \ube0c\ub79c\ub4dc \uceec\ub7ec \uc801\uc6a9
\n\u2192 \ud55c\uacc4 \uadf9\ubcf5<\/strong>: 10\uac1c \uc774\ud558\uc758 \ubc94\uc8fc \uc0ac\uc6a9 \uad8c\uc7a5<\/p>\n<\/blockquote>\n
\n\ud83e\uddfe 8. \uc694\uad6c\uc0ac\ud56d \ub2e4\uc774\uc5b4\uadf8\ub7a8 (Requirement Diagram): \ubcf5\uc7a1\uc131\uc758 \uad6c\uc870\ud654<\/h3>\n
\n\uacc4\uce35\uc801 \uc694\uad6c\uc0ac\ud56d \uad00\uacc4\ub97c \ucd94\uc801\ud558\uace0 \uac80\uc99d\ud569\ub2c8\ub2e4.<\/p>\n\n
-^-<\/code><\/li>\n.-><\/code><\/li>\n<\/ul>\n\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\nrequirementDiagram\n requirement req1 {\n id: R01\n text: 3\ucd08 \ub0b4 \ud398\uc774\uc9c0 \ub85c\ub529\n }\n requirement req2 {\n id: R02\n text: CDN \uc801\uc6a9\n }\n req1 -^- req2\n element \ucef4\ud3ec\ub10c\ud2b8 {\n type: Frontend\n }\n req2 .-> \ucef4\ud3ec\ub10c\ud2b8\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\nrequirementDiagram\n requirement req1 {\n id: R01\n text: 3\ucd08 \ub0b4 \ud398\uc774\uc9c0 \ub85c\ub529\n }\n requirement req2 {\n id: R02\n text: CDN \uc801\uc6a9\n }\n req1 -^- req2\n element \ucef4\ud3ec\ub10c\ud2b8 {\n type: Frontend\n }\n req2 .-> \ucef4\ud3ec\ub10c\ud2b8\n <\/pre>\n<\/div>\n<\/div>\n\n
verify<\/code> \uad00\uacc4\ub85c \ud14c\uc2a4\ud2b8 \ucf00\uc774\uc2a4 \uc5f0\uacb0
\n\u2192 \ud2b8\ub808\uc774\uc11c\ube4c\ub9ac\ud2f0<\/strong>: \ubcc0\uacbd \uc2dc \uc601\ud5a5\ub3c4 \ubd84\uc11d \uac00\ub2a5<\/p>\n<\/blockquote>\n
\n\ud83d\udd17 9. \uc0ac\uc6a9\uc790 \uc5ec\uc815\ub3c4 (User Journey Map): \uacbd\ud5d8\uc758 \uc2dc\uac01\ud654<\/h3>\n
\n\uace0\uac1d \uacbd\ud5d8(CX)\uc744 \ub2e8\uacc4\ubcc4 \ud398\uc778\ud3ec\uc778\ud2b8\uc640 \ud568\uaed8 \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/p>\n\n \ud83d\udcca \ucc28\ud2b8 \ucf54\ub4dc \ubcf4\uae30
\n <\/summary>\n\njourney\n title \uc1fc\ud551 \uacfc\uc815\n section \ud648 \uc811\uc18d\n \uc561\uc158: \ub85c\uadf8\uc778 : 5: \uace0\uac1d\n \uc561\uc158: \uc0c1\ud488 \uac80\uc0c9 : 3: \uace0\uac1d\n section \uad6c\ub9e4 \uacb0\uc815\n \uc561\uc158: \uc7a5\ubc14\uad6c\ub2c8 \ucd94\uac00 : 4: \uace0\uac1d\n \uc561\uc158: \uacb0\uc81c \uc644\ub8cc : 8: \uc2dc\uc2a4\ud15c\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\njourney\n title \uc1fc\ud551 \uacfc\uc815\n section \ud648 \uc811\uc18d\n \uc561\uc158: \ub85c\uadf8\uc778 : 5: \uace0\uac1d\n \uc561\uc158: \uc0c1\ud488 \uac80\uc0c9 : 3: \uace0\uac1d\n section \uad6c\ub9e4 \uacb0\uc815\n \uc561\uc158: \uc7a5\ubc14\uad6c\ub2c8 \ucd94\uac00 : 4: \uace0\uac1d\n \uc561\uc158: \uacb0\uc81c \uc644\ub8cc : 8: \uc2dc\uc2a4\ud15c\n <\/pre>\n<\/div>\n<\/div>\n
\n
\n\u2192 \uc5ed\ud560 \uba85\uc2dc<\/strong>: \ucf5c\ub860(:) \ub4a4\uc5d0 \ud589\uc704\uc790 \uc9c0\uc815<\/p>\n<\/blockquote>\n
\n\u2705 \uacb0\ub860: \uc62c\ubc14\ub978 \ucc28\ud2b8 \uc120\ud0dd\uc774 \ube44\uc988\ub2c8\uc2a4 \uc5b8\uc5b4\ub2e4<\/h3>\n