ChatGPT를 처음 접하게 된 계기는 출시 당시 순수한 호기심이었습니다. 나는 개인적으로 코드를 작성하지는 않지만 특히 코드 생성을 논의하는 기사에 끌렸습니다. 그리고 처음에는 그 기능이 나와 관련이 없을 것이라고 믿었습니다.

그러나 내가 만들고 싶지 않은 하나의 UML 다이어그램을 작업하고 있는 순간이 왔습니다.

프로세스를 단순화하거나 신속하게 처리하기 위해 다양한 방법을 사용했습니다. 나는 보통 PlantUML 코드를 사용하여 UML 다이어그램을 만듭니다. 여기서 깨달은 것은 이것이 코드의 한 형태이고 코드가 생성될 수 있다는 것입니다.

따라서 ChatGPT는 다이어그램 작성을 위한 귀중한 도구로 발전했으며 이제 내 경험을 여러분과 공유하게 되어 기쁩니다.

UML에 대한 몇 마디

UML은 Unified Modeling Language 의 약자로, 소프트웨어 시스템의 아티팩트를 지정, 시각화, 구성 및 문서화하는 언어 역할을 합니다. UML은 객체 지향 프로그래밍 언어의 개념을 활용합니다. 개발 지식이 있으면 UML 모델링에 도움이 되지만 필수는 아닙니다.

이는 주로 소프트웨어 설계 측면을 설명하기 위해 설계되었지만 비즈니스 또는 사용자 요구 사항을 모델링하기 위한 일련의 동작 다이어그램도 제공합니다.

저는 IT 비즈니스 프로세스에 참여하며 특히 분석, 최적화를 위해 프로세스를 모델링하고 개발자가 구현할 수 있는 명확한 형식으로 변환하는 데 중점을 둡니다.

모델링할 때 저는 다양한 접근 방식과 도구를 사용하는데 그 중 하나가 UML입니다.

여기에 장점이 있습니다. UML을 활용하기 위해 소프트웨어 엔지니어가 될 필요는 없습니다. 저는 소프트웨어로 구현된 비즈니스 프로세스를 탐색하는 데 이를 사용하지만 그 이상입니다. 놀라울 정도로 다재다능하고 다양한 개발 단계에서 다양한 역할에 적용될 수 있습니다. 전체적으로 시도해 보십시오. 당신은 그것을 좋아하는 자신을 발견할 수도 있습니다.

그리기 대 코드

다른 다이어그램과 마찬가지로 쉽게 그릴 수 있습니다. 간단하고 편리하며 빠르며 프로세스와 결과에 대한 명확한 보기를 제공합니다. 이 목적을 위해 수많은 그래픽 도구를 사용할 수 있으며 저는 그것을 사용합니다. 그러나 나는 PlantUML 덕분에 "코드" 접근 방식을 선택하는 경우가 많습니다.

오픈 소스 모델링 언어 및 도구인 PlantUML을 사용하면 일반 텍스트 언어를 기반으로 다이어그램을 생성할 수 있습니다. 간단히 말해서 PlantUML에 코드를 작성하여 다이어그램을 만들 수 있습니다.

나는 '창의적 모드'에서 다이어그램 스케치를 즐기지만, 나중에 이를 코드로 변환하거나 직접 코드를 작성하는 경우가 많습니다. 여기에는 두 가지 주요 이유가 있습니다.

1. 다이어그램에서 블록을 훨씬 더 효율적으로 삽입, 이동 및 삭제할 수 있습니다.

   그려진 다이어그램의 블록 순서를 변경하면 전체 다이어그램이 수정되어 다른 블록과 링크에 영향을 미치는 경우가 많습니다. 코드 작업을 할 때 시각적인 측면에 대해 걱정할 필요가 없습니다. 당신은 텍스트를 다루고 있으며 PlantUML은 당신을 위해 그래픽 표현을 처리합니다.

   
   

2. 사진을 다루는 대신 간단한 텍스트 파일로 작업하고 저장할 수 있습니다.

   이는 문서에서 다이어그램 이미지를 볼 때 특히 유용합니다. 품질이 손상될 수 있습니다. 그러한 다이어그램으로 작업을 계속하는 것은 불가능하며 다시 그릴 수만 있고 편집하거나 확장할 수는 없습니다.

또 다른 중요한 이점은 ChatGPT가 PlantUML을 이해하고 코드를 생성할 수 있으므로 코드 생성의 이점을 누리고 UML과 원활하게 통합할 수 있다는 것입니다. 아래에서 개인적인 경험의 몇 가지 예를 공유하겠습니다.

PluntUML용 코드 편집기를 사용할 수 있습니다. 저는 개인적으로 Visual Studio Code와 PlantUML 확장을 선호합니다. 또 다른 방법은 https://plantuml.com 또는 기타 온라인 교정기를 사용하는 것입니다.

ChatGPT, 나를 위해 PluntUML 코드 작성

예 1 – 백지 상태로 시작하고 싶지 않습니다.

택시 애플리케이션에 대한 사용 사례 다이어그램을 만들어 보겠습니다.

먼저 프롬프트를 사용합니다.

https://plantuml.com/ru/use-case-diagram의 구문을 사용하여 택시 앱의 사용 사례 다이어그램을 만듭니다.

ChatGPT는 코드를 생성합니다.

 @startuml left to right direction actor "Passenger" as passenger actor "Driver" as driver rectangle "Taxi App" { usecase "Request Ride" as request usecase "Cancel Ride" as cancel usecase "Track Ride" as track usecase "Payment" as payment passenger -- (request) passenger -- (cancel) passenger -- (track) passenger -- (payment) driver -- (track) driver -- (payment) (request) --> (cancel) (request) --> (track) (track) --> (payment) } @enduml

시각적인 보기:

아이디어는 좋지만 4개의 경우만으로는 충분하지 않은 것 같습니다. PlantUML에는 유사한 구문이 없기 때문에 추가 사례를 추가하고 몇 가지 구문 예제로 이를 개선할 것을 요청합니다. 즉각적인:

더 많은 사례를 추가하면 포함, 확장 및 일반화, 구문과 같은 다양한 유형의 링크를 사용할 수 있습니다.

(case1) .> (case2_includes_case1) : <<include>>

(상위) <|-- (하위)

(case1은 Case 2를 확장합니다) .> (case2) : <<extends>>

그러다가 몇번이나 물어보는데

사례를 더 추가하세요

다시 한 번 오류 수정을 위한 구체적인 요청을 하세요.

ChatGPT의 최종 결과는 다음과 같습니다.

 @startuml left to right direction actor "Passenger" as passenger actor "Driver" as driver rectangle "Taxi App" { usecase "Request Ride" as request usecase "Cancel Ride" as cancel usecase "Track Ride" as track usecase "Payment" as payment usecase "Rate Driver" as rate usecase "View Ride History" as history usecase "Select Ride Type" as selectType usecase "Provide Feedback" as feedback usecase "View Driver Information" as driverInfo usecase "Update Profile" as updateProfile usecase "Promo Code" as promoCode usecase "Emergency Assistance" as emergencyAssistance passenger -- (selectType) passenger -- (request) passenger -- (cancel) passenger -- (track) passenger -- (payment) passenger -- (rate) passenger -- (history) passenger -- (feedback) passenger -- (driverInfo) passenger -- (updateProfile) passenger -- (promoCode) passenger -- (emergencyAssistance) driver -- (track) driver -- (payment) driver -- (rate) (request) ---> (cancel) (request) ---> (track) (track) ---> (payment) (track) ---> (rate) (history) --> (payment) (rate) --> (payment) (rate) ---> (track) (cancel) --> (request) (selectType) --> (request) (feedback) --> (rate) (driverInfo) ---> (track) (updateProfile) --> (track) (promoCode) --> (payment) (emergencyAssistance) --> (track) } @enduml 

나는 케이스를 좋아하지만 케이스 사이의 연결은 마음에 들지 않습니다. 그래서 해당 코드를 약간 편집했습니다.

최종 결과는 다음과 같습니다.

 @startuml actor "Passenger" as passenger actor "Driver" as driver rectangle "Taxi App" { usecase "Request Ride" as request usecase "Cancel Ride" as cancel usecase "Track Ride" as track usecase "Payment" as payment usecase "Rate Driver" as rate usecase "View Ride History" as history usecase "Select Ride Type" as selectType usecase "Provide Feedback" as feedback usecase "View Driver Information" as driverInfo usecase "Update Profile" as updateProfile usecase "Promo Code" as promoCode usecase "Emergency Assistance" as emergencyAssistance passenger -- (selectType) passenger - (request) passenger -- (track) passenger -- (payment) passenger -- (history) passenger -- (rate) passenger -- (updateProfile) passenger -- (emergencyAssistance) driver - (request) driver - (payment) driver - (rate) (request) --> (track) (track) --> (payment) (track) --> (rate) (selectType) --> (request) (cancel) .> (request) : <<extends>> (rate) <.. (feedback) : <<include>> (payment) <..(promoCode) : <<include>> (driverInfo) .> (track) : <<extends>> } @enduml 

물론 더 많은 시나리오를 통합할 수도 있습니다. 예를 들어 사용자 등록 및 로그인에 대한 정보가 없습니다. 또한 ChatGPT를 안내하여 디자인과 관련된 다이어그램을 만들 수 있습니다. 중요한 것은 사용할 수 있는 기초가 있다는 것입니다.

예 2 - 다이어그램을 확인하고 개선해야 합니다.

역방향 프록시를 사용하는 사진 저장소 솔루션에 대한 간단한 버전의 시퀀스 다이어그램이 있습니다.

 @startuml participant Client boundary "Reverse Proxy" as Proxy participant Back participant FileStorage participant Admin actor Editor Editor -> Admin: Add picture Admin -> FileStorage: Add picture Client -> Proxy: Get picture Proxy -> Proxy: Check cache alt cash is not empty Proxy -->> Client: Return picture else cash is empty Proxy -> FileStorage: Recieve picture FileStorage --> Proxy: Picture Proxy -> Proxy: Save to cache Proxy -->> Client: Return picture end @enduml 

그것을 개선해 봅시다. 내 프롬프트:

이미지 저장 및 사용을 위한 솔루션을 설계 중입니다. 이 다이어그램을 확인하고 필요한 경우 편집하세요.

ChatGPT 제안:

 1. **Participant Name Clarification:** - Consider renaming "Back" to something more descriptive, like "Application Server" or a similar term that better represents the functionality. 2. **Actor Placement:** - Move the "Editor" actor to a more standard position, usually at the top. @startuml participant Client actor Editor boundary "Reverse Proxy" as Proxy participant ApplicationServer participant FileStorage participant Admin Editor -> Admin: Add picture Admin -> FileStorage: Add picture Client -> Proxy: Get picture Proxy -> Proxy: Check cache alt cache is not empty Proxy -->> Client: Return picture else cache is empty Proxy -> ApplicationServer: Receive picture ApplicationServer --> Proxy: Picture Proxy -> Proxy: Save to cache Proxy -->> Client: Return picture end @enduml

배우 배치에 대한 요점이 마음에 들지 않아 다시 설정했습니다. 다른 모든 것은 괜찮습니다.

그런 다음 나는 다음과 같은 메시지를 여러 번 반복했습니다.

이 다이어그램을 확인하고 필요한 경우 개선하세요.

프롬프트를 작성합니다.

ApplicationServer가 데이터베이스에서 사진을 가져오는 방법을 보여줍니다.

통제의 초점을 추가하다

일부 코너 케이스 추가

마무리하기 위해 제어 초점을 조정하고 이름 지정을 일부 변경합니다. 최종 결과는 다음과 같습니다.

 @startuml participant Client boundary "Reverse Proxy" as Proxy participant ApplicationServer database FileStorage participant Admin actor Editor Editor -> Admin: Add picture activate Admin deactivate Admin Admin -> FileStorage: Add picture activate FileStorage deactivate FileStorage Admin -> ApplicationServer: Store metadata activate ApplicationServer Client -> Proxy: Get picture activate Proxy Proxy -> Proxy: Check cache alt cache is not empty Proxy -->> Client: Return picture else cache is empty Proxy -> ApplicationServer: Receive picture request activate FileStorage ApplicationServer -> FileStorage: Retrieve picture from database alt picture not found in database FileStorage --> ApplicationServer: Picture not found deactivate FileStorage ApplicationServer -> Proxy: Notify picture not found Proxy -->> Client: Picture not found else FileStorage --> ApplicationServer: Picture data deactivate FileStorage ApplicationServer -> Proxy: Send picture to Proxy Proxy -> Proxy: Save to cache Proxy -->> Client: Return picture end end deactivate Proxy deactivate ApplicationServer deactivate Admin deactivate Editor @enduml 

단점

우선 "ChatGPT는 실수를 할 수 있다"고 해서 모든 것을 확인해야 합니다. 이는 사용자를 대체하기 위한 것이 아니라 작업을 간소화하고 최적화하는 도구입니다.

가장 일반적인 오류는 PlantUML 구문과 관련되어 있습니다. 때로는 대화 중에 이런 일이 발생하는데, 이를 수정하고 ChatGPT를 올바른 방향으로 되돌려야 합니다.

둘째, 저는 ChatGPT 3.5 무료 버전을 사용하고 있는데, 여기에는 장단점이 있습니다. 때로는 더 나쁘게 작동하고 동일한 프롬프트에 대해 임의의 답변을 제공합니다.

셋째, ChatGPT는 일부 다이어그램을 다른 다이어그램보다 더 잘 이해합니다. 예를 들어, 유스 케이스 다이어그램보다 시퀀스 다이어그램을 사용하는 것이 훨씬 더 좋습니다.

그러나 이러한 제한에도 불구하고 ChatGPT는 여전히 효율성을 높이고 시간을 절약할 수 있는 귀중한 도구이자 훌륭한 보조자입니다.

결론

저는 업무에서 ChatGPT를 영구적으로 사용합니다. 관리자, 분석가, 개발자, 테스터 또는 기타 역할을 맡고 있는 경우 UML을 사용할 수 있습니다. 그렇다면 PlantUML 코드를 작성하고 생성하는 것을 고려해 보십시오. 시간을 절약하고 효율성을 높일 수 있습니다.

제 경험이 여러분에게 도움이 되고 영감을 주기를 바랍니다. 감사합니다!