프로젝트 구상 ④ : 플로우차트(Flowchart) 작성하기

목차

• 시작하며
• Flowchart란?
• Flowchart 작성 방법
• 마치며

 

---

 

시작하며

이번에는 저번 포스팅에 이어서 IA를 작성하는 감을 잡기위해 플로우차트(Flowchart)를 작성해보려고 한다. 사실 저번에 IA에 대해 작성하려고 했으나, 너무 애매하게 받아들여졌기도 했고 서비스의 대략적인 흐름도(시나리오)와 메뉴 목록을 나누면 IA를 작성하기 수월하지 않을까 하는 생각이 들었다. 사실 다 작성하고보니 이전에 작성했던 유스케이스 다이어그램과 비슷하게 흘러간다는 생각이 들었다. 이번에는 구체적으로 페이지별 플로우 차트를 만들고 링크하는 방식으로 조금 더 자세하게 작성해봤다.

 

---

 

Flowchart란?

어떠한 일을 처리하는 과정을 순서대로 간단한 기호와 도형으로 도식화한 것을 의미한다.

 

---

 

Flowchart 작성 방법

아래는 플로우차트를 작성할 때 사용하는 도형들이다.

 

Flowchart 작성 시 도형 정의

 

위 도형들을 사용하여 그리면 된다. 그저 종이와 펜으로 그릴 수도 있으나 그러진 않고 노트북을 새로 산 기념(?)으로 문서 작성을 서포트 해주는 사이트를 알아봤다.

 

진짜 여러가지 사이트가 있었다. 예를 들어 이전에 유스케이스 다이어그램을 작성할 때 이용했던 draw.io 사이트도 그 중 일부라고 할 수 있다. 그런데 그런 사이트를 알아보던 중 whimsical 라는 사이트를 발견했다. 굳이 언급하는 이유는 개인적으로 다른 사이트보다 서비스를 이용하는 입장에서 유저 인터페이스 부분이 정말 간편하게 잘 되어있다고 느꼈기 때문이다.

 

플로우차트 예시

 

 

작성하는 방법은 위 사진처럼 둥근네모 도형으로 시작해서 끝까지 이어주면 되는데 개인적으로 직사각형 도형과 마름모 도형을 가장 많이 사용한 듯 하다. 아무래도 플로우차트(Flowchart)가 서비스의 시나리오를 도식화한 것이기 때문에 어떨 땐 어떤 서비스를 제공하는지에 대한 내용이 많기 때문일 것이다.

 

그림에서 끝 부분에 로그인 페이지로 이동을 거치면 로그인 페이지에서의 플로우차트가 시작되도록 따로 작성을 했다.

 

로그인 관련 페이지들

 

메인 페이지 플로우차트

 

대략적으로 첫 페이지에서 로그인을 성공적으로 완료해야 메인 페이지로 들어올 수 있고, 메인 페이지를 이 서비스의 홈 화면 페이지로 사용하려고 한다. 그래서 한 섹션(예를 들어 회원가입, 로그인 등)의 시나리오 플로우들이 종료되면 메인 페이지로 돌아오도록 설정해두었다. 

 

여담이지만 이전 회사에서도 이런 시나리오를 작성하는 업무를 해왔고 이를 문서화하여 윗 분들이나 가끔은 고객사에 직접 컨펌받아 로직화하는일도 많이 해봐서 그런지 헷갈리는 부분은 많이 없었다. 오히려 이 문서를 작성하면서 페이지에 갇히지 않고 편한 인터페이스를 생각하면서도 '다른 웹 사이트나 블로그 서비스를 보면 이런 곳에 이런 버튼을 두던데..' 하는 생각을 하면서 와이어 프레임을 어떤 식으로 작성할지도 같이 생각하게 되었던 것 같다.

 

마지막으로 전체 샷

 

 

---

마치며

이 번에 플로우차트를 작성하면서 의미있게 생각한 점은 페이지 목록화와 페이지별 시나리오를 작성함으로서 뭔가 전체적인 윤곽이 보이게 된 것이다. 물론 저기 적은 기능들을 개인적으로 소화할 수 있을지는 모르겠지만, 저 것도 불가능하진 않을 것같은 수준으로 작성하려 노력했다. 다음에는 IA와 와이어 프레임을 만들어 보려고 한다.

 

감사합니다!!