안녕하세요. 구름의 UX 기획자 지니(jinnie)입니다.
구름은 꾸준히 성장하면서 조직의 규모가 커짐에 따라 효율적으로 협업할 수 있는 환경을 만들기 위해 노력하고 있습니다. 저 또한 여러 팀원들과 잘 소통하면서 협업할 수 있는 방법에 대해 늘 고민하고 있는데요. 고민 끝에 찾은 방법 중에서 최근에는 기획 단계에 시퀀스 다이어그램을 도입하였고, 그 결과 협업할 때 커뮤니케이션 리소스를 크게 줄일 수 있었습니다.
이 글에서 기획 단계에 시퀀스 다이어그램을 도입한 이유와 적용 과정, 적용 후에 팀원이 느낀 점을 공유해 보려고 합니다.
시퀀스 다이어그램을 도입한 이유
제가 속한 EDU 스쿼드는 기획자, 디자이너, 개발자로 구성되어 함께 서비스를 개발하고 있습니다. 기획자인 저는 여러 직군의 팀원과 효율적으로 협업하기 위해 팀원 모두에게 가장 필요한 기획 문서가 무엇일지 고민했고, 고민 끝에 2가지 조건을 리스트업했습니다.
구름에 필요한 기획 문서의 조건
- 팀원이 비즈니스 플로우를 빠르게 이해할 수 있는가
- 피드백을 반영하기에 용이한가
이렇게 구름에 도입하기에 적합한 기획 방법을 찾던 중 구글 기술 문서의 도움을 받았습니다. 시퀀스 다이어그램을 활용하여 비즈니스 플로우를 설명한 글이었는데요. 특히 여러 서비스 모듈 관계를 시각화한 부분이 인상적이었습니다.
구글이 공개하고 있는 시퀀스 다이어그램을 보니 하나의 시퀀스 안에서 Google UI, Google Server, Payment Integrator Server 등 각 구성 요소의 역할을 분리하여 표현함으로써 플로우를 한눈에 파악하기 훨씬 쉬웠어요. 그래서 저도 구름의 개발 프로세스에 맞게 시퀀스 다이어그램을 기획 단계에 도입해보기로 결정했습니다.
적용한 사례
1. 도입 배경
구글 기술 문서를 읽고 구름의 기획 단계에 시퀀스 다이어그램을 적용해 보려던 차에, 구름EDU의 특정 강좌 수강 시에 본인 인증을 필수로 실행할 수 있도록 하는 기능을 추가하기로 결정하여, 이에 바로 적용해 보기로 했습니다.
2. 문제 상황
하지만 기능을 적용하기까지 네 가지 이슈가 있었는데요. 구름EDU의 본인 인증 플로우가 정립되어 있지 않은 상황이었습니다. 그리고 새로 개발할 mOTP 연동 모듈이 구름EDU의 기존 수강 비즈니스 플로우에 추가되어야 했고, 인증 자체는 구름 서비스 외부의 모듈을 사용해야 했습니다. 이러한 상황에서 기존의 기획 및 개발 소요 기간보다 짧은 시일 내에 빠르게 진행해야 했어요.
3. 시퀀스 다이어그램으로 문제 해결하기
1) 모듈을 정의하고 분리하기
구글 기술 문서의 예시와 같이 시퀀스 다이어그램을 작성하기 위해서는 비즈니스 플로우의 구성 요소를 정의해야 하는데요. 이러한 구성 요소를 모듈 단위로 정의하고 분리했습니다.
- 기존 모듈:
구름 스쿨 UI 페이지 - 신규 모듈:
구름 Public mOTP 연동 모듈 - 외부 모듈:
1차 외부 인증 모듈,2차 외부 인증 모듈
2) 모듈별 책임과 역할을 정의하기
아래와 같이 모듈별 책임과 역할을 정의하고 모듈간의 의존성을 분리했습니다.
기존 모듈
구름 스쿨 UI 페이지- 현재 로그인 한 유저 정보를
구름 Public mOTP 연동 모듈에 전달 - 본인 인증 결과를 유저에게 표시
- 현재 로그인 한 유저 정보를
신규 모듈
구름 Public mOTP 연동 모듈- 전달된 유저 정보를 바탕으로 외부 인증 모듈의 인증 API 호출
- 1차 본인 인증 실패 시
2차 외부 인증 모듈에 인증 요청 - 인증 결과를
구름 스쿨 UI 페이지에 전달
외부 모듈
1차 외부 인증 모듈- 1차 본인 인증 진행
- 인증 결과를
구름 Public mOTP 연동 모듈에 전달
2차 외부 인증 모듈- 2차 본인 인증 진행
- 인증 결과를
구름 Public mOTP 연동 모듈에 전달
위 작업으로 신규 기능의 적용 범위가 분명하게 정의되었고, 신규 기능 추가로 인한 기존 서비스의 변화 정도 또한 추정할 수 있었습니다.
3) Usecase 선정하기
본인 인증 기능의 핵심 비즈니스 플로우를 Usecase로 정리했습니다.
(UCM1) 구름 스쿨 회원은 본인 인증이 강제된 채널에 가입한 경우 로그인 시 본인 인증을 진행할 수 있다.
(UCM2) 채널 Admin 관리자는 본인 인증 설정 탭에서 해당 채널의 권한별로 본인 인증이 1회 강제 되도록 설정할 수 있다.
(UCM3) 채널 Admin 관리자는 멤버 페이지에서 해당 채널의 모든 구성원을 대상으로 본인 인증 완료 여부를 조회할 수 있다.
(UCM4) 구름 Admin 관리자는 모든 채널의 본인 인증 설정 페이지에 접근할 수 있다.4) Usecase별로 시퀀스 다이어그램 작성하기
Usecase별 시퀀스 다이어그램을 작성했어요. 이번에는 아래 Usecase에 대한 시퀀스 다이어그램을 예시로 보여드리려고 해요.
앞서 정의했던 모듈별 책임과 역할에 근거하여 유저의 본인 인증 진행 시 각 모듈의 비즈니스 로직을 표현했습니다.
5) 팀 내 피드백 반영하기
처음부터 완벽한 시퀀스 다이어그램을 작성하기는 어려웠는데요. 시퀀스 다이어그램 작성 후 팀에 공유하면서 피드백을 반영하였습니다. 시퀀스 다이어그램을 사용했기 때문에 본인 인증 정책, 인증 실패 시 비즈니스 플로우 등 중요한 피드백을 빠르게 반영할 수 있었습니다.
6) 기획 문서를 토대로 제작된 디자인 산출물
팀의 피드백을 반영하여 시퀀스 다이어그램을 포함한 최종 기획 문서를 팀원에게 전달드렸고, 기획 내용을 토대로 프로덕트 디자이너가 시안을 제작해 주셨어요.
| 본인 인증 요청 페이지
| 본인 인증 성공 안내 페이지
| 본인 인증 실패 안내 페이지
적용 후 구름에 나타난 변화
기획 단계에 시퀀스 다이어그램을 적용하면서 각 직군의 업무 과정에도 크고 작은 변화가 나타났는데요. 기획자인 저는 논의 과정에서 나온 피드백을 보다 쉽고 빠르게 반영할 수 있어 이전보다 효율적으로 기획 업무를 수행할 수 있게 되었어요.
프로덕트 디자이너와 개발자도 실무를 하면서 느낀 경험을 작성해 주셨어요.
시퀀스 다이어그램 작성 도구 소개: PlantUML
저는 시퀀스 다이어그램을 작성할 때 PlantUML이라는 도구를 활용하고 있는데요. PlantUML을 활용하면 직접 그리지 않고, 간단한 문법과 텍스트 입력으로 시퀀스 다이어그램을 빠르게 그릴 수 있기 때문에 작성이 매우 편리하고 피드백을 반영하기에도 수월했어요. 시퀀스 다이어그램을 효율적으로 작성할 수 있으니 PlantUML 사용을 추천드립니다. 🙂
| PlantUML에서 기본 문법으로 작성한 시퀀스 다이어그램 (intelliJ)
마치며
지금까지 구름의 기획 단계에 시퀀스 다이어그램을 도입한 경험을 공유해 드렸습니다. 저의 경험이 다른 분들께 도움이 되면 좋겠습니다. 앞으로도 유용하고 좋은 기획 경험이 있다면 함께 나누겠습니다. 감사합니다.
Text Jinnie Design Lily
