시퀀스(Sequence) 다이어그램
Sequence diagram with Plant UML
시퀀스 다이어그램이란?
정의 및 목적
- 시간의 흐름에 따른 오브젝트들간의 상호동작(interaction)을 표현
- 시나리오에 연관된 오브젝트들을 표현
- 각 오브젝트들간의 주고받는 메시지 표현
- 이벤트 다이어그램(event diagrams) 또는 이벤트 시나리오(event scenarios)로 불리기도 함.
시퀀스 다이어그램
- 유즈케이스 다이어그램에서 작성한
식물구매시나리오
시퀀스 다이어그램 그리기
카테고리별 참여자 정의
- 해당 시나리오 참여하는 사용자 및 서비스를 정의
- 시나리오를 그리면서 혼동을 피하기 위해서 참여자를 명확히 정의
@startuml
skinparam backgroundcolor transparent
actor "서비스 사용자" as u
box "식물 쇼핑몰 서비스"
participant "식물앱" as app
control "인증 서버" as auth
participant "API 서버" as api
database "사용자 DB" as adb
database "식물 DB" as db
end box
box "외부 서비스"
participant "페이먼트 게이트웨이(PG)" as pg
end box
@enduml
문법 설명
- 참여자 키워드는
actor,participant,control등 다양한 키워드가 있음.- 상세한 정보는Plant UML 참여자 설명에서 확인
as xx는 시퀀스 다이어그램을 그릴때 사용할 이름(xx)을 정의- 인터넷 서비스 설계측면에서는 주로
actor,participant,database수준을 사용
box는 시나리오 측면에서 각 참여자들을 쉽게 구분하기 위해서 사용- 외부 컴포넌트 및 참여자의 특징을 구분
사용자 시나리오 정의
- 사용자가 수행하는 행위를 중심으로 시나리오 작성
- 사용자 관점에서의 행위와 정보에 중점을 맞춤.
- 본 시나리오에서는 사용자와 웹/앱 간의 시나리오 작성
- 개발자와 기획자 간의 협의를 위해서 사용될 수 있음.
- 요구되는 정보에 대한 상세화가 될수록 좋음.
@startuml
skinparam backgroundcolor transparent
skinparam sequence {
groupbodybackgroundcolor transparent
}
actor "서비스 사용자" as u
box "식물 쇼핑몰 서비스"
participant "식물앱" as app
control "인증 서버" as auth
participant "API 서버" as api
database "사용자 DB" as adb
database "식물 DB" as db
end box
box "외부 서비스"
participant "페이먼트 게이트웨이(PG)" as pg
end box
u -> app+: 식물검색
return 식물목록 페이지
u -> app+: 식물선택
return 식물 상세페이지
u -> app: 식물 구매
activate app
app -> u: 로그인 페이지
u -> app: 로그인 정보
alt 인증성공
app -> u: 인증완료 및 결제페이지
u -> app: 결제
app -> u: 결제 결과 페이지
else 인증실패
app -> u: 인증에러
end
deactivate app
@enduml
문법 설명
a -> b: {{message}}는a가b에게{{message}}를 준다라는 의미->실선으로 연결 해주며,-->사용시 점선으로 표시됨.a -> b+: ..를 사용시에b를 활성화 시킨다는 의미- 활성화란 시퀀스 다이어그램에서 하얀선을 표시해서 세션이 유지됨을 표시
return과 쌍으로 사용되어야 하며, 가장 가까운것을 기준으로 세션이 비활성화 됨.return점선 화살표를 생성
activate,deactivate도+와 동일하게 세션 활성화를 의미activate,deactivate처리가 끝난 다음에 명시적으로 비활성화- 가장 근접한 순으로 리턴하는 경우가 아닐 때 사용
- 여러번의
deactivate가 가능하므로, 리턴이 명시적이지 않을때 사용 가능. - 세션 활성화 구간을 명확하게 하고 싶을 때 사용
alt/else/end를 통해서 특정 케이스 대한 시나리오 작성else를 여러개 입력하여 상황을 추가 할 수 있음.
서비스간 시나리오 정의
- 서비스 간에 동작하는 시나리오에 대해서 작성
- 개발자들간의 협의를 위해서 주로 사용할 수 있음.
- 인터페이스를 중심으로 작성하면, 도움이 될 수 있음.
@startuml
skinparam backgroundcolor transparent
skinparam sequence {
groupbodybackgroundcolor transparent
}
actor "서비스 사용자" as u
box "식물 쇼핑몰 서비스"
participant "식물앱" as app
control "인증 서버" as auth
participant "API 서버" as api
database "사용자 DB" as adb
database "식물 DB" as db
end box
box "외부 서비스"
participant "페이먼트 게이트웨이(PG)" as pg
end box
u -> app+: 식물검색
app -> api+: 검색정보
return 식물목록
return 식물목록 페이지
u -> app+: 식물선택
app -> api+: 식물아이디
return 식물상세정보
return 식물 상세페이지
u -> app: 식물 구매
activate app
app -> u: 로그인 페이지
u -> app: 로그인 정보
app -> auth: 사용자 이름, 비밀번호
activate auth
auth -> auth: 사용자 검증
alt 인증성공
auth -> app: 인증토큰
app -> u: 인증완료 및 결제페이지
u -> app: 결제
app -> u: 결제 결과 페이지
else 인증실패
auth -> app: 에러
deactivate auth
app -> u: 인증에러
end
deactivate auth
deactivate app
@enduml
서비스간 상세시나리오 정의
- 데이터베이스 및 외부서비스와의 상호동작에 대해서 작성
- 본 단계는 인터넷 서비스 설계에서는 작성하지 않아도 설계상에 큰 문제는 없음.
- 설계를 최소화하고자 하는 경우에는 작성하지 않을 수 있음.
@startuml
skinparam backgroundcolor transparent
skinparam sequence {
groupbodybackgroundcolor transparent
}
actor "서비스 사용자" as u
box "식물 쇼핑몰 서비스"
participant "식물앱" as app
control "인증 서버" as auth
participant "API 서버" as api
database "사용자 DB" as adb
database "식물 DB" as db
end box
box "외부 서비스"
participant "페이먼트 게이트웨이(PG)" as pg
end box
u -> app+: 식물검색
app -> api+: 검색정보
api -> db+: 식물검색 쿼리
return 검색결과
return 식물목록
return 식물목록 페이지
u -> app+: 식물선택
app -> api+: 식물아이디
api -> db+: 식물아이디 조회
return 식물상세정보
return 식물상세정보
return 식물 상세페이지
u -> app: 식물 구매
activate app
app -> u: 로그인 페이지
u -> app: 로그인 정보
app -> auth: 사용자 이름, 비밀번호
activate auth
auth -> adb+: 사용자이름, 비밀번호
return 사용자 정보
auth -> auth: 사용자 검증
alt 인증성공
auth -> app: 인증토큰
app -> u: 인증완료 및 결제페이지
u -> app: 결제
app -> pg: 상품결제정보, 사용자정보
activate pg
pg --> u: 결제페이지
u --> pg: 결제정보
alt 결제성공
pg -> app: 결제키
app -> api+: 결제키정보
api -> pg: 결제키
pg -> api: 결제정보
return 완료
else 결제실패
pg -> app: 결제에러
end
deactivate pg
app -> u: 결제 결과 페이지
else 인증실패
auth -> app: 에러
deactivate auth
app -> u: 인증에러
end
deactivate auth
deactivate app
@enduml
스타일 적용 및 가독성 향상
- 박스와 참여자간의 간격 조정을 위해서 패딩을 스타일 적용
boxpadding,participantpadding적용
== xx ==를 통해서 분리자를 추가할 수 있음.
@startuml
skinparam backgroundcolor transparent
skinparam boxpadding 10
skinparam sequence {
participantpadding 20
groupbodybackgroundcolor transparent
}
actor "서비스 사용자" as u
box "식물 쇼핑몰 서비스"
participant "식물앱" as app
control "인증 서버" as auth
participant "API 서버" as api
database "사용자 DB" as adb
database "식물 DB" as db
end box
box "외부 서비스"
participant "페이먼트 게이트웨이(PG)" as pg
end box
== 비회원 및 회원 앱 사용 ==
u -> app+: 식물검색
app -> api+: 검색정보
api -> db+: 식물검색 쿼리
return 검색결과
return 식물목록
return 식물목록 페이지
u -> app+: 식물선택
app -> api+: 식물아이디
api -> db+: 식물아이디 조회
return 식물상세정보
return 식물상세정보
return 식물 상세페이지
== 회원전용 식물 구매 ==
u -> app: 식물 구매
activate app
app -> u: 로그인 페이지
u -> app: 로그인 정보
app -> auth: 사용자 이름, 비밀번호
activate auth
auth -> adb+: 사용자이름, 비밀번호
return 사용자 정보
auth -> auth: 사용자 검증
alt 인증성공
auth -> app: 인증토큰
app -> u: 인증완료 및 결제페이지
u -> app: 결제
app -> pg: 상품결제정보, 사용자정보
activate pg
pg --> u: 결제페이지
u --> pg: 결제정보
alt 결제성공
pg -> app: 결제키
app -> api+: 결제키정보
api -> pg: 결제키
pg -> api: 결제정보
return 완료
else 결제실패
pg -> app: 결제에러
end
deactivate pg
app -> u: 결제 결과 페이지
else 인증실패
auth -> app: 에러
deactivate auth
app -> u: 인증에러
end
deactivate auth
deactivate app
@enduml
