–
플로우 차트와 같은 다이어그램은 우리의 생각을 시각화하고 함께 확인하는 과정에 많은 도움을 가져다줍니다. 무엇보다 불필요한 내용을 빼고, 일정한 흐름과 단계에 따라 내용을 살펴보며 놓친 부분은 없는지 따져보기 좋은 환경을 제공합니다. 서비스를 설계할 때 다이어그램을 자주 사용하는 이유이기도 하고요. 이제는 자주 생성해 꽤 익숙해졌지만, 초기에는 어떤 방법으로 작성해야 하는지 필요한 자료가 없어 꽤 애를 먹었던 기억이 나는데요. 그래서 오늘은 온라인 결제, 음식점 예약, 광고 생성 등 우리에게도 익숙한 여러 기능 단위에 대한 다이어그램 샘플을 다양한 방법에 따라 제공하는 서비스를 소개하고자 합니다.
‘Gleek’는 다이어그램 제작 툴입니다. 기존 다이어그램 제작 툴과 다른 점이 있다면, 마우스를 활용하지 않고 생성할 수 있다는 점인데요. 코드를 작성하는 것처럼 다이어그램에 필요한 문자를 왼쪽에 입력하면, 오른쪽에 작성한 내용에 따른 다이어그램을 바로 확인할 수 있는 구성을 취하고 있습니다. 이어서 소개할 다이어그램 템플릿을 그대로 가져와 편집하는 것도 가능한데, 아직 제겐 마우스를 통한 다이어그램 생성이 더 익숙하게 다가오네요.
다이어그램 템플릿을 제공하는 이유도, 기존에 다이어그램을 생성하고 활용하던 경험이 대부분 ‘마우스’를 통한 입력으로 형성되었기 때문이라고 생각합니다. 이런 상황에서 사용자가 쉽게 이 툴을 활용할 수 있는 방법은, 익숙한 기능이나 서비스 단위의 다이어그램 샘플을 제공하고, 어떻게 구성되었는지 확인한 뒤 편집할 수 있는 기회를 제공하는 것입니다. 실제 제공되는 다이어그램 샘플을 보면, 링크드인 채용공고 생성과 같이 우리에게 익숙한 내용으로 구성된 것을 알 수 있습니다.
리스트를 통해 궁금한 다이어그램 샘플을 찾아 상세 화면으로 들어가면, 해당 다이어그램이 어떤 내용으로 구성되어 있는지 간략한 정보를 확인할 수 있습니다. 소개 내용을 통해 링크드인 채용공고는 어떤 과정으로 진행되는지, 광고는 어떻게 생성할 수 있는지를 플로우 차트로 구성한 내용이라는 점을 자세히 알 수 있습니다.
이미지가 길어 플로우 차트 전체 내용은 글에 넣지 못했지만, 소개 내용 아래로 전체 플로우 차트를 리스트 대비 더 자세히 확인할 수 있으며, 이후 플로우 차트 자체에 대한 설명과 이곳에서 제공하는 또 다른 플로우 차트 샘플 리스트를 제공하는 모습입니다. 직접 제작한 내용을 찾아보는 게 아닌 경우 보통 검색을 통해 관련 자료를 찾는 경우가 많아 이렇게 유사한 자료를 한 곳에서 자세히 들여다볼 수 있다는 점이 좋습니다.
제공하는 다이어그램 종류가 여러 개라 각 정의 내용과 샘플을 확인하는 즐거움이 있습니다. 앞서 확인한 플로우 차트에 이어 이번에는 ER 다이어그램 관련 내용을 살펴본 모습입니다. 이곳에서는 플로우 차트와 ER을 포함해 총 4개의 다이어그램 샘플을 확인할 수 있습니다. (flowchart, sequence, class, entity-relationship)
이 글을 작성하는 날을 기준으로 총 57개의 다이어그램 샘플이 등록되어 있으며, 초반에 말씀드린 것처럼 다이어그램 상세 화면을 통해 편집 화면으로 접근하는 것도 가능합니다. 다만, 다이어그램 생성 자체는 기존과 다른 배경에서 진행되기에 (마우스 미사용 등) 별도의 학습 과정과 시간을 필요로 합니다. 그럼에도 불구하고, 기존에 쉽게 접할 수 없었던 다양한 다이어그램을 확인할 수 있다는 것 자체로 만족스러운 서비스라고 생각합니다. 다이어그램에 대한 더 자세한 내용은 ‘링크’를 참고해주세요!
- 다양한 도형과 아이콘을 활용해 플로우차트를 제작할 수 있는 : Zenflowchart
- 이미지를 활용한 사이트맵 제작, ‘Flowmapp’
- 사이트맵을 포함한 초기 구조를 짜는데 많은 도움을 주는 ‘Gloo Maps’
–
