UML 시퀀스 다이어그램 그리기 - 기획과 개발자간 소통

2024. 3. 14. 23:49ㆍTools

728x90
반응형

 

 

#1. 설명

  • UML Diagram(시퀀스다이어그램)
    • 특정 행동이 어떤 순서로 어떤 객체와 어떻게 상호작용하는 지 표현하는 행위 다이어그램
  • 사용자 / 프론트 / 백 세개의 객체로 구분하고, 기획 / 프론트엔드 / 백엔드 개발 간 상호 소통을 원활히 될 수 있도록 도울 수 있음
  • 기획자:
    • 사용자 ↔ 서비스간 상호 작용을 고려
  • 프론트엔드:
    • 사용자에게 요청이 들어오면 어떤 API를 호출해, 어떤 데이터를 백엔드로부터 받아와서 어떻게 사용자에게 뿌려줄 지 고려
  • 백엔드:
    • 프론트엔드 측에서 어떤 데이터를 통해 요청을 하여 어떤 데이터를 요구할 지 고민해서 어떤 API를 구현할 지 고민
  • 이 세 개의 고민을 해소해주기 위해 세 객체 사이의 상호 작용을 시퀀스 다이어그램을 통해서 도식화

#2. 그리는 방법

1. 코드 작성

  • 시퀀스 다이어그램의 내용이 될 코드를 작성 한다.

1) 객체 지정

@startuml
actor 사용자 order 1
boundary Front order 2
control Back order 3

2) 메시지

  • 객체 간 주고 받은 데이터를 나타낼 좌우 방향 선.
    • 호출은 실선, 응답은 점선으로 표기.
    • 호출 메시지 옆에 note를 달아서 api uri 및 parameter를 표기
사용자 -> Front: 유튜브 화면 진입

Front -> Back : 유튜브 영상 조회 API
note left : /video/all \\n(GET)
Back --> Front : 유튜브 영상 리스트 반환
Front --> 사용자 : 유튜브 영상 리스트 반환

3) 프레임

  • 일련의 메시지를 어떤 단위로 구분하고 싶을 때 사용
  • 특정 액션 기준 그룹핑
    • 개인적으로는 사용자 액션 단위로 group을 설정하는 것이 깔끔해보였음
group 유튜브 검색:

//...

end
  • 반복되는 행위 기준 그룹핑
loop 유튜브 쇼츠 내리기:

//...

end
  • 큰 단락
    • 두개의 실선으로 전체 다이어그램을 행으로 구분
      • 개인적으로는 타이틀 다는 용도로 사용 - 따라서 다이어그램 하나당 하나씩만
== 화면번호 ==

 

#3. 코드 → 그림 변환

 

 

 

 

728x90
반응형

티스토리툴바