시각화 JavaScript 라이브러리 Mermaid " 백엔드를 위한 시각화 도구? "

 

 

 

 

 

 

 

제가 스타트업에서 업무를 처음 시작해서 그런지 모르겠지만 개발자는 다재다능 해야한다는 결론이 들었습니다. 팀원들과 협업을 위한 커뮤니케이션 능력, 추상화된 요구사항을 일반화 하여 정리하는 능력, 운영업무 전반을 이해하고 있고 개발과 운영을 따로 나누지 않고 개발자는 운영업무를 어떤 포지션을 가더라도 기본은 할 수 있도록 숙지해야 정말 우리가 생각하는 비지니스를 코드에 녹여낼 수 있는것 같습니다.

 

현장에 나가서 직접 업무를 진행하기도 하고 운영 업무를 직접 진행한 후 코드를 이해하는 시간이 짧아지더군요. 도메인을 고도화함에 있어서도 기획자분들과의 소통에도 양질의 질문이 오갈 수 있고 도메인을 서로 크로스체크 할 수 있었습니다. 이런 까닭으로 데브옵스 능력과 데브옵스의 철학을 이해하고 수행하려고 노력하는 팀원들이 있는 개발조직이 서로의 높은 신뢰도를 바탕으로 좋은 성과를 낼 수 있지않나란 생각이 문득 듭니다.

 

 

개발자가 다양한 업무를 함에있어 다양한 분야를 이해하고있어야 하고 그걸 실천하는건 즐거웠지만 항상 힘들었던 부분이 있었습니다. 제가 백엔드 개발자이기 때문인것 같기도 하지만 디자인적 감각이나 생각한 이미지를 실질적으로 보여주는 부분이 제일 힘들더군요. 보여주고싶은데 그런 이미지를 상상하는 부분이 참 힘들더군요.

 

GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdo

 

특히 문서를 작성할때 시각적인 자료를 필요로 할때 참 많이 힘들었었는데 그때! Notion Code블럭에 있던... Mermaid라는게 보이더군요. 이건 뭘까 라고 검색해서 찾아보니 정말 다양한 방식으로 데이터 시각화 해주는 JavaScript라이브러리 더군요.

 

 

 

 

정말 다양한 종류의 시각화 도구를 지원해서 정말 시각화를 힘들어하는 저같은 백엔드 개발자에게는 정말 생각을 표현할 수 있는 좋은 라이브러리로 활용할 수 있었습니다.

 

sequenceDiagram
	participant F as Front
	participant KF as Kakao Login Front
	participant S as Server
	participant KA as Kakao Auth Server
	participant kAPI as Kakao Api Server
	
	F->>S: 카카로 소셜 로그인 버튼 클릭
	activate S
	S->>KF: 카카오 소셜 로그인 페이지 리다이렉트
	deactivate S
	activate KF
	loop 카카오 로그인 성공시까지
		KF->>KF: 카카오 소셜 로그인
	end
	KF->>F: CODE명의 라우트 파라미터 포함하여 리다이렉트
	deactivate KF
	F->>S: 라우터 파라미터로 전달받은 CODE값을 Server로 전달
	activate S
	S->>KA: CODE값을 통해 Kakao Auth AccessToke 발급 요청
	deactivate S
	activate KA
	KA->>S: Kakao AccessToken 발급
	deactivate KA	
	activate S
	S->>KAPI: Authorization헤더에 AccessToken을 포함하여 사용자 프로필및 DI요청
	deactivate S
	activate KAPI
	KAPI->>S: 사용자 프로필및 DI응답
	deactivate KAPI
	activate S
	alt DI값이 DB에 존재하지 않는다면
		S->>S: 프로필 정보 DB 저장
	else DI값이 DB에 존재한다면
		S->>S: DI값으로 유저정보 조회		
	end 
	S->>F: AccessToken 발급
	deactivate S

 

 

예시로 보여드리기 위해 코드를 통해서 간단하게 카카오 소셜 로그인 관련 시퀀스 차트를 작성해 보았습니다. 실제 업무를 진행하며 간단하게 팀원들 끼리 차트를 통해 의사소통 하기도하고 문서화 하여 PPT에도 활용하기도 했습니다.

 

이러한 도구를 통해 말로 설명하기 어려운 부분들을 시각화 하여 서로 소통의 폭을 늘리면 팀원들간의 신뢰도및 퍼포먼스는 증가할거라고 믿어 의심치 않습니다!

 

글도 중요하지만 시각화 자료를 많이 참고해 보세요!

 

아래 링크를 통해 예시를 확인해보세요.

 

https://mermaid.js.org/syntax/examples.html

Examples | Mermaid