2월 10, 2024

[Github] use case 작성하기, diagrams.net Github와 연동시키기

어떤 프로젝트를 하기 전 Use Case를 먼저 작성하면 프로젝트의 전반적 flow뿐 아니라 요구사항, 기능들을 더 쉽게 이해할 수 있다. 

Use Case를 작성하기 위해 도움을 받을 수 있는 사이트는 대표적으로 diagrams.net이라는 사이트가 있다. 


위 사이트로 들어가면 된다. 이전에는 draw.io로 불렸었는데 현재는 diagrams.net이라고 불리고 있으며 온라인에서 간단하게 다이어그램을 그릴 수 있도록 도와주는 사이트이다. 

오늘은 이 사이트를 통해 Github와 연동하고 diagram을 그리는 방법에 대해 알아보도록 하자.


먼저 위 사이트에 들어가서 우측 상단의 Start Now 버튼을 클릭해주자

그러면 아래와 같이 다이어그램 저장 위치를 설정할 수 있는 창이 뜬다.

여기서 Github를 클릭해준다. 

그러면 Github로 결정이 된 상태에서 아래와 같이 새로운 다이어그램을 만들지, 기존 다이어그램을 열지에 대해 선택하게 된다.

여기서 새로운 다이어그램 만들기를 클릭해준다. 

그러면 위와 같이 diagram의 파일명과 템플릿을 선택할 수 있는 창이 나온다. Use Case에 100% 적합한 템플릿은 없어보이므로 빈 템플릿으로부터 만들어가면 된다. 

기본- 새 다이어그램을 선택해주겠다. 그런 다음 만들기를 누르면 원래 Github와 인증 연동이 되어 있을 경우에는 폴더 선택으로 바로 가게 되지만 처음에 Github 인증이 되어 있지 않으면 아래와 같이 Github 인증 절차를 한 번 더 거쳐야한다. 


여기서 이제 승인 버튼을 누르고 인증만 간단히 해주면 된다.


위와 같은 화면이 뜨면 'Authorize draw.io App'을 클릭해준다. 

만약 private repository로 설정해두었다면

폴더 선택하는 부분에서 repository가 보이지 않을 수 있다. 그럴 경우 위의 입력을 클릭해서 repository 명을 검색하고 이후에 Github에 연동되는 인증을 추가로 수행해주면 된다.

나는 Github에서 draw.io App Install하라는 페이지가 나와서 install 한 뒤 Repository Access를 "All Repositories"로 설정해주었다. 


위 install과 access 범위를 설정해주면 정상적으로 원하는 repository를 클릭할 수 있고, repository 안에서도 원하는 폴더를 선택해줄 수 있다. 

Commit Message

이후 Commit Message를 적고 확인을 눌러주면 된다. 


위 과정을 모두 잘 따라했다면 이런 식으로 다이어그램을 그릴 수 있는 페이지가 나온다. 

여기서 원하는 flow와 요구사항을 잘 정의하여 use case를 생성해주면 된다.