순서도·다이어그램 그리기 사용법
- 위쪽 예시 버튼(순서도, 주고받기, 일정표, 구조도 등) 중 만들고 싶은 모양과 가장 비슷한 것을 누릅니다. 왼쪽 입력창에 예시 글이 채워지고 오른쪽에 그림이 바로 나타납니다.
- 왼쪽 글에서 이름과 화살표를 내 내용으로 고쳐 보세요. 글을 고칠 때마다 잠시 뒤 그림이 다시 그려집니다.
- 색 분위기를 바꾸고 싶다면 아래의 "기본·초록·흑백·어둡게" 중에서 고릅니다.
- 마음에 들면 "PNG로 저장" 또는 "SVG로 저장"을 눌러 파일로 받습니다. 나중에 다시 고치고 싶다면 "내용 복사"로 글을 따로 보관해 두세요.
글자만으로 그림이 그려지는 원리
이 도구는 "A --> B"처럼 짧은 글로 칸과 화살표의 관계를 적으면, 그 글을 읽어서 칸의 위치와 선의 경로를 자동으로 계산해 그림으로 바꿔 줍니다. 사람이 마우스로 칸을 끌어다 놓고 선을 맞추는 대신 "무엇이 무엇으로 이어지는지"만 적으면 되기 때문에 내용을 고칠 때도 글 한 줄만 바꾸면 전체 배치가 알아서 다시 정리됩니다. 별도의 가입 절차 없이 무료로 이용할 수 있어 필요할 때 바로 열어 쓰시면 됩니다.
그림은 확대해도 깨지지 않는 벡터 방식으로 만들어지고, 처리는 모두 이 페이지 안에서 이루어집니다. 적은 글이 서버로 나가지 않아서 회사 업무 흐름이나 개인 계획처럼 밖에 보이고 싶지 않은 내용도 마음 편히 그릴 수 있습니다.
어떤 그림을 그릴 수 있납니다
순서도는 업무 절차나 "예·아니오" 갈림길이 있는 판단 과정을 정리할 때 가장 많이 씁니다. 주고받기 그림(시퀀스)은 사용자, 앱, 서버처럼 여러 대상이 어떤 순서로 메시지를 주고받는지 보여 줄 때 좋아서 개발 문서나 업무 매뉴얼에 자주 들어갑니다.
일정표(간트)는 작업마다 시작일과 기간을 적으면 막대 모양 일정표가 그려집니다. "앞 작업이 끝난 뒤 시작"처럼 순서 관계도 적을 수 있어서 작은 프로젝트나 스터디 계획을 공유할 때 편합니다. 구조도, 상태 변화, 표 관계도는 프로그램이나 데이터의 구조를 설명하는 그림이고, 원그래프는 비율을 한눈에 보여 줍니다. 마인드맵은 생각을 가지처럼 펼쳐 정리할 때 알맞습니다.
이렇게 글로 적어 두면 그림 파일이 아니라 "글"이 원본이 되기 때문에 메모장이나 문서에 함께 보관하기 쉽고, 나중에 한 줄만 고쳐 다시 저장할 수 있습니다. 그림 파일만 남겨 두었다가 수정하려고 처음부터 다시 그리는 번거로움이 줍니다.
내용이 길어지면 큰 칸 하나에 모든 걸 넣기보다 단계를 나눠서 그림 여러 장으로 만드는 편이 읽기 좋습니다. 한 장에 칸이 열 개를 넘기면 보는 사람이 흐름을 놓치기 쉽습니다.
실제로는 이런 곳에 많이 씁니다. 신입 직원에게 업무 순서를 알려 주는 안내 그림, 앱 화면이 넘어가는 흐름을 팀원과 맞춰 보는 기획 메모, 수업이나 발표에서 개념 사이의 관계를 보여 주는 자료, 이사나 여행처럼 해야 할 일을 날짜별로 정리한 일정표 등입니다. 복잡한 설명을 글 몇 줄로 쓰는 것보다 그림 한 장으로 보여 주면 이해가 훨씬 빨라집니다.
처음부터 완벽하게 적으려고 하지 말고 칸 서너 개로 큰 흐름만 먼저 그려 보세요. 그림이 나오면 빠진 단계가 눈에 띄고, 그때 한 줄씩 덧붙이면 훨씬 수월합니다. 칸 이름은 "서류 제출"처럼 짧은 동사형으로 쓰면 읽기 쉽고, 갈림길에는 "예", "아니오"처럼 선 위에 짧은 이름을 붙여 두면 보는 사람이 헷갈리지 않습니다.
잘 그리는 요령
- 맨 윗줄에는 반드시 그림 종류를 적습니다. 종류가 없으면 그림이 나오지 않습니다.
- 칸 이름에 공백이나 괄호가 들어가면 대괄호 [ ]로 감싸 주세요.
- 오류가 나면 마지막으로 고친 줄부터 되돌려 보세요. 보통 그 줄에 원인이 있습니다.
- 블로그나 문서에 넣을 때는 확대해도 선명한 SVG를, 메신저에는 PNG를 쓰세요.
- 어두운 배경의 슬라이드에 쓸 때는 PNG 배경 투명 옵션과 어둡게 색 분위기를 같이 써 보세요.
자주 묻는 질문
글을 어떻게 적어야 그림이 그려지나요?
맨 윗줄에 그림 종류(flowchart TD, sequenceDiagram, gantt 같은 단어)를 적고, 아랫줄부터 "A --> B"처럼 연결을 적습니다. 처음에는 위쪽 예시 버튼을 눌러 나온 글을 조금씩 고쳐 보는 것이 가장 빠릅니다.
그림이 안 나오고 빨간 안내가 뜹니다.
대부분 맨 윗줄의 종류 이름이 틀렸거나, 괄호·따옴표가 짝이 안 맞거나, 들여쓰기가 어긋난 경우입니다. 안내에 나온 줄 번호 근처를 먼저 확인해 보세요. 한글 이름에 공백이 있으면 대괄호 [ ] 안에 넣어 주세요.
PNG와 SVG 중 무엇으로 저장할까요?
문서나 슬라이드에 넣을 때는 확대해도 깨지지 않는 SVG가 좋고, 메신저나 블로그에 올릴 때는 PNG가 편합니다. PNG가 흐리면 크기를 2x나 3x로 올려 보세요.
적은 내용이 저장되나요?
아니요. 서버로 보내지도 않고 브라우저에 남기지도 않습니다. 필요한 내용은 "내용 복사"로 따로 보관하세요.
한글도 잘 나오나요?
네. 한글 이름, 한글 설명 모두 그릴 수 있습니다. 다만 기기에 설치된 글꼴을 쓰기 때문에 PNG와 SVG의 글꼴 모양은 기기마다 조금 달라질 수 있습니다.
주의사항
이 도구는 간단한 그림을 빠르게 그려 주는 용도이며 칸이 아주 많은 복잡한 그림은 배치가 어색할 수 있습니다. 입력한 내용은 서버로 전송되거나 저장되지 않고 브라우저 안에서만 처리됩니다. BTSPACE WAGLE은 비공식 정보 사이트입니다. 표로 된 자료를 그래프로 만들고 싶다면 그래프·차트 만들기도 함께 써 보세요.