🔥 공대생은 성장 중/일잘하기

개발자의 다이어그램 익숙해지기

민돌v 2024. 2. 2. 21:24
3주만에 쓰는 글입니다 ㅎㅎ
요즘 글쓰는게 조금씩 부담감이 커져, 점점 안쓰게되는데.. 다시 가벼운 마음으로 가볍게 가볍게 포스팅을 이어나가볼까 합니당 

 

최근 스터디로 [육각형 개발자 - 최범균] 책을 읽고있는데, 코드 이해를 위한 도구 중 하나로 "다이어그램"이 나와 이에 대해 스터디 팀원들과 이야기를 해보았습니다.

책의 요지는 다음과 같았습니다.

  1. 서비스는 사회 환경의 변화에 맞춰 함께 변화되어야한다.
  2. 그러기위해서는 코드비용(코드를 변경하는데 드는 인건비)이 적어야한다.
  3. 개발자가 코드를 변경할때는 [(1)코드 이해], [(2) 코드 수정] 이 2가지 단계를 거친다.
  4. 이 중 "코드를 이해하는 시간"을 줄이기 위해서는 2가지 역량이 요구된다.
    1. 코드를 제대로 이해할 수 있는 역량
    2. 이해하기 쉬운 코드를 작성하는 역량
  5. 이 중 "코드를 제대로 이해할 수 있는 역량" 을 키우기 위한 효과적인 방법은 "코드 시각화" 이고, 그 중 한가지 방법이 [다이어그램]이다.

 

저는 사실 1년 6개월간의 짧은 현업기간 동안 다이어그램을 사용해본 적이 없습니다.
하지만, 다른 팀원분들은 아주 효율적인 방법이다라고 이야기 하시더군요.

나는 왜 다이어그램을 사용할 생각을 안했을까.. 고민해보았더니
그리기 불편해서! 익숙하지 않아서! 효용성을 못느껴서! 정도의 이유가 나오더라구요...ㅎㅎ

효용성은 스터디분들의 대화에서 충분히 느꼈으니 "그리기 불편해서" 와 "익숙하지 않아서" 를 해결해 볼까 합니다!

 

[목차]

  1. 코드시각화 - 다이어그램의 종류
    1. activity diagram
    2. sequence diagram
    3. class diagram
    4. state diagram
  2. 다이어그램 그리기 툴
    1. draw.io (with. IDE)
    2. IntelliJ
    3. figma
    4. ppt
    5. mermaid
  3. 시퀸스 다이어그램으로 레거시 코드 분석하기

 

1. 코드시각화 - 다이어그램의 종류

✔️ "육각형 개발자" 에 나온 코드 시각화에 유용한 다이어그램에 대해서만 정리해 볼 예정입니다.

✔️ 저자이신 최범균님께서는, UML (Unified Modeling Language) 다이어그램을 주로 사용하신다고 합니다.

✔️ UML 다이어그램은 표준화된 다양한 모델들이 존재하고, 도형마다 정해진 의미가 있기 때문에 보는 이로 하여금, 다르게 해석할 여지를 줄일 수 있는 장점이 존재합니다. (따라서 정해진 방법대로 그릴수 있도록, 숙달이 필요해 보입니다.)

 

1) 액티비티 다이어그램 (Activity)

  • 액티비티 다이어그램은 시스템에서 단계별로 비지니스로직의 제어 흐름을 그림으로 표현한 다이어그램입니다.
  • 코드의 실행 흐름을 이해하는데 도움이 됩니다.
  • 아래의 그림같이, 코드의 실행 흐름을 분석하기 쉽게 시각화할 수 있습니다.
  • 코드 한줄마다 그릴필요는 없고, 논리적인 단위로 묶어서 표시하는게 분석 팁이라고 합니다. (책에서)

 

액티비티 다이어그램 예시

(좌)는 활동 다이어그램을 이해하기 쉽게 가져온 예시사진
(우)는 실제 코드레벨에서 그려볼 수 있는 코드 이해를 위한 활동 다이어그램 예시사진

 

2) 시퀀스 다이어그램 (Sequence)

  • 시퀸스 다이어그램은 객체의 특정 행동이 어떠한 순서로 어떠한 객체와 서로 상호작용을 하는지 표현한 다이어그램입니다.
  • 런타임에 객체와 객체, 혹은 프로세스간의 상호 작용도 시간의 흐름에 따라 정리할 수 있어 유용합니다.
  • 시퀀스 다이어그램은 계속 강조하다시피, 시간의 흐름에 따라 구성 요소간의 연동과정이 담겨있기 때문에
    문제 발생 시점이나 동시성 문제의 원인을 파악할때 매우 유용하다고 합니다.
  • 💡 스터디원 분들도 시퀀스를 소통 및 면접용도의 정리로 자주 사용하신다고 합니다 :)

 

(좌) 출처 : https://brownbears.tistory.com/511

 

3) 클래스 다이어그램 (Class)

  • 클래스 다이어그램은 어떤 클래스가 존재하고, 각 클래스간 어떻게 연결되어있는지 파악할 때 쓰는 다이어그램입니다.
  • 클래스의 구성요소와 관계를 시각화하여 나타낼 수 있기 때문에 코드의 정적인 구조를 이해하는데 도움이 됩니다.
  • 클래스 다이어그램은 도메인 모델을 분석할 때 유용하게 사용된다고 합니다.
  • 다만, 저자이신 최범균님은 대다수의 레거시 코드의 경우 비지니스로직이 하나의 객체에 몰려있어 이런 경우에는 클래스 다이어그램이 유용하지 않았다고 합니다.

 

4) 상태 다이어그램 (State)

  • 회원의 상태(정산, 휴먼, 신규), 결제의 상태 (결제 대기, 완료, 배송 중 등) 처럼 객체의 상태의 변화와 상태를 변경시키는 로직을 도식화한 다이어그램이 상태 다이어그램 입니다.
  • 행동 다이어그램(Activity)과 어찌보면 유사해보이지만, Activity 는 전체 시스템의 비지니스의 흐름을 도식화하는데 집중한다는 느낌을 받았고
    상태 다이어그램(State)은 특정 객체의 구성요소값(상태 값)이 변화하는 흐름과 과정을 도식화하는데 집중한다는 점에서 차이점이 느껴집니다.

 

 

2. 다이어그램 그리기 툴 모음

이제 실질적으로 다이어그램을 사용하기 위해서는 툴을 알아볼까 합니다.
손으로 직접 그릴수는 없으니까요!

✔️ Drawing TooL List

  1. draw.io (with. IDE)
  2. IntelliJ
  3. figma
  4. ppt? (는 너무 불편하더라고요.. 넘어가겠습니다 ㅎ)
  5. mermaid

1) draw.io (with. IDE)

링크 : https://www.drawio.com/

  • drawio 는 별도의 회원가입 없는 무료사이트로, 웹으로 사용해도 되고 windows 와 mac용 프로그램을 다운받아 사용할 수 도있습니다.
  • 예전 전공과제할때 참 많이 사용했는데, UML 의 다양한 종류의 다이어그램을 대부분 지원해주고, 그에 맞춰 도형들 까지 존재하기 때문에 사용하기 나쁘지않았습니다.
  • 군더더기 없는 ui 도 썩 쓸만했던걸로 기억합니다.
  • 하지만 일일히 하나씩 그려주고 이어주고 확대해주고,, 적어주는게 그렇게 편하지만은 않았습니다.

만약 VsCode 를 사용한시다면 Draw.io 플러그인을 사용하여 편하게 사용할 수 있다고 합니다. (참고)

이런 느낌

2) IntelliJ

  • 인텔리제이에서도 간단하게 다이어그램을 시각화할 수 있었습니다.
  • 인텔리제이에서 제공해주는 기본 기능을 이용하여 Class Diagram을 볼 수 있고, (Ultimate 기준)
  • 별도의 플러그인을 설치하여 시퀀스 다이어그램을 나타낼 수 있었습니다.
  • 사용해보니 두 UML 을 굉장히 편하게 그릴 수 있어 좋았지만, 자동으로 생성되기 때문에 원하는만큼 디테일하지는 않기에 디테일한 분석을 위해 사용하기에 적당해 보이지는 않았습니다.
  • 다만, 빠른 분석 및 파악이 목적이라면 이 방법이 가장 효과적으로 보이네요

 

(1) Class Diagram

  • 원하는 클래스의 마우스 오른쪽 클릭 - diagram

(2) Sequence Diagram

  • Intellij 를 사용하면서 Sequence Diagram을 그리기 위해서는 아래의 플러그인을 설치하여야 합니다.
  • 플러그인 설치 후, 메소드 단위 혹은 클래스단위로도 시퀀스 다이어그램을 시각화 할 수 있습니다.

https://plugins.jetbrains.com/plugin/8286-sequencediagram

 

SequenceDiagram - IntelliJ IDEs Plugin | Marketplace

SequenceDiagram is tool to generate simple sequence diagram(UML) from java, kotlin, scala(Beta) and groovy(limited) code. Warning : SequenceDiagram upgrade from free...

plugins.jetbrains.com

사용방법

  1. 시퀀스 다이어그램을 그리기 희망하는 메소드 혹은 클래스로 가셔서, 상단의 Tool 옵션으로 선택할 수 있습니다.
  2. 혹은 직접 메소드에서 오른쪽 마우스 우클릭으로 접근하거나, alt + s (option + s) 로도 적용할 수 있었습니다.

Tool - SequenceDiagram

 

직접 접근 (좌) option + s / (우) 마우스 우클릭

결과

intellij sequece diagram

3) Figma (FigJam)

  • 피그마는 macOS 및 윈도우용 데스크톱 애플리케이션들에 의해 활성화되는 추가 오프라인 기능들을 갖춘 인터페이스 디자인을 위한 협업 웹 애플리케이션 입니다.
  • Figma 프로그램에서, Figzam 이라는 별도의 도형과 선을 쉽고 간편하게 생성할 수 있는 툴이 존재합니다.
  • 또한 다양한 템플릿이 존재하기 때문에, 원하는 UML 다이어그램의 템플릿을 불러와 사용할 수 있었습니다.
  • 링크 : https://www.figma.com

 

4) mermaid

  • mermaid 는 다이어그램과 차트를 그리기 위한 별도의 툴 프로그램입니다.
  • Markdown에서 영감을 받은 텍스트 정의를 렌더링하여 다이어그램을 동적으로 생성하고 수정하는 JavaScript 기반 다이어그램 작성 및 차트 작성 도구라고 합니다.
  • 즉, Markdown 언어로 다이어그램 or 차트를 생성할 수 있다는 말인데, 이러한 특성으로 GitHub 등과 같은 원격 저장소의 README.md 에도 손쉽게 차트를 넣을 수 있다는 점도 또 하나의 장점으로 보여지는 것 같습니다.
  • 또한, 코드 기반으로 그려지는거기 때문에 수정에 매우매우 용이하며, 형상관리까지 가능하다는 장점이 존재하는 것 같습니다.
    (개인적으로 가장 큰 장점으로 여겨짐!)
  • 하지만 그렇기때문에, 특정 문법을 알아야한다는 학습곡선이 존재한다는 점은 단점으로 다가올 수도 있을 것 같습니다.
  • 가이드 : https://mermaid.js.org/intro/

 

코드(MarkDown 기반의 언어)로 구성된다는 특성때문에 Mermaid 를 활용하는 방법이 굉장히 다양한 것 같습니다.
사용방법을 몇가지만 살펴보겠습니다.

✔️ Mermaid 사용방법

1. mermaid aditor (링크)

첫번째 방법은, 간단하게 머메이드 공식 홈페이지에서 제공해주는 에디터에서 사용할 수 있습니다.

 

2. markdown (with. IDE)

  • 두번재는, 계속 말했다 시피 MarkDown을 이용하는 방법입니다.
  • 저는 인텔리제이를 사용했기 때문에 인텔리제이에서 제공해주는 플러그인을 다운받았습니다. (다운안받으면 안나옵니다 ㅠ)
  • 위에 머메이드 에디터에 나오는 코드를 그대로 가져다 붙여서 사용했습니다.
# 머메이드 테스트

```mermaid
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

 

3. Notion

  • 개발할때 특정 로직의 요구사항을 분석하고 정리하기 위해 Notion을 굉장히 많이 사용하는데, Notion에서도 바로 사용할 수 가 있습니다.
  • Notion 의 코드블럭을 이용해서 Mermaid 를 사용할 수 있었습니다.

4. Chat GPT

  • Mermaid 를 사용하기 위해서는 mermaid의 Markdown 문법을 알아야하는데 이걸 chat gpt로 만들 수 있더라고요.. (좋은 세상)
  • 별도의 플러그인이 존재하지만, 저는 유료사용자가 아니기에 그냥 시도해봤습니다. (https://docs.mermaidchart.com/plugins/chatgpt)

→ Actor 라는 단어를 mermaid에서 에러로 받아들이기 User로만 수정한 후 결과를 보니 원하는데로 다이어그램이 그려짐을 확인했습니다.
→ 간단한 요구사항이지만 정말 편하네요

 

3. 시퀸스 다이어그램으로 레거시 코드 분석하기

✔️ 사실 가장 사용해보고 싶었던 건 [시퀸스 다이어그램] 입니다.

✔️ 스터디원분들 중 2분이 실제 현업에서 사용중이시라고 하셔서 궁금했고, 사실상 "레거시 분석"이나 "코드 설명"에 가장 유용할 것 같다는 생각이 들었습니다.

✦ 다이어그램을 그릴 때 유의사항

  1. 코드를 다이어그램으로 표현할 때는 필요한 요소만 표현하여 모든 내용을 표시하지 않도록 한다.
  2. 의도에 맞게 불필요한 요소는 생략하기 위해서 어떤 정보를 제공하기 위해 다이어그램을 그리는지 분명히하고 목적에 맞는 요소만을 포함토록 한다.

 

 

느낀점 및 후기 (Sequece Diagram 및 Mermaid)

  • Notion 을 이용해 요구사항을 정리하고, Mermaid로 다이어그램을 그려보았습니다.
  • 기존의 마구잡이로 작성해서 비대해졌던 사이드프로젝트의 한 로직을 이용해 작성해보았습니다.

 

✔️ 장점

  1. 확실히 다이어그램을 그린다,, 생각하고 한 단계식 글로 흐름을 정리해보니 효과적으로 그 흐름이 머릿속에 들어오는 것 같았습니다.
  2. Notion 에 다이어그램과 함께 정리되니, 이후 유지보수를 위해 다시 분석할 때 굉장히 유용할 것 같습니다.

 

✔️ 단점

  1. 일단, mermaid 문법에 익숙하지 않아 시간이 오래걸린다는게 지금의 문제점인거 같습니다.
    시간을두고 연습할만한 가치가 있지만, 어느정도의 학습곡선이 있다는게 부담으로 다가왔습니다.
  2. 사실, 복잡한 쿼리문을 디테일하게 분석하고 싶은마음이 컸는데 시퀀스 다이어그램과는 성질이 맞지 않았던 것 같습니다. (제가 학습이 부족한 것일 수 도 있습니다.)
  3. 시퀀스 다이어그램도 확실하게 한번 집고 넘어가는게 좋을거같다는 것을 느꼈습니다..ㅎ

 

✔️ 느낀점

  • 처음으로 실무에 다이어그램을 적용해 보았습니다. 
  • 다이어그램으로 시각화하기 위해서는 요구사항 분석 단계에서 디테일하게 코드단위의 흐름을 생각하며 다시 한단계 한단계 정리해나가야한다는 점이 좋다고 생각되어졌습니다.
  • 지금은 익숙하지 않아 시간이 꽤 걸리지만, 계속 사용하다면 요구사항 분석 능력을 키우는데 도움이 되지않을까..? 생각되어지네요
  • 모든 로직에 적용하기는 힘들것 같고 앞으로, 핵심 비지니스 로직 또는 작았다가 커져가서 분리가 필요해진 로직을 분석하는데 주로 사용하게 될것 같습니다!
  • 핵심 : Notion 을 자주 사용하고 더 많이 기록하는 습관을 들이자!

 

 

끝..!

'🔥 공대생은 성장 중 > 일잘하기' 카테고리의 다른 글

클래스 다이어그램 정리  (0) 2024.04.30

'🔥 공대생은 성장 중/일잘하기'의 다른글

  • 현재글개발자의 다이어그램 익숙해지기

관련글

티스토리툴바