순서도 만들기

순서도 만들기 소개

순서도는 작업의 흐름을 그림으로 나타낸 것입니다. 각 단계는 상자 안에 넣고, 화살표로 순서를 보여 줍니다. 선택해야 할 때는 마름모 안의 질문이 길을 예와 아니오로 나눕니다. 전체 과정이 한눈에 보이기 때문에 순서도는 설명하기도, 확인하기도 쉽습니다.

대부분의 순서도 도구는 상자와 화살표를 하나하나 손으로 끌어다 놓아야 합니다. 시간이 오래 걸리고 선도 자주 겹칩니다. 여기서는 종이에 목록을 쓰듯이 단계를 한 줄에 하나씩 적기만 하면 됩니다. 상자 배치, 화살표, 선 간격은 도구가 알아서 합니다. 한 줄만 바꿔도 순서도가 바로 바뀝니다.

주요 기능

글을 넣으면 순서도가 나옵니다 — 한 줄에 한 단계. 상자, 화살표, 간격은 자동입니다
예/아니오 질문 — 줄 끝에 ?를 붙이고 아래에 갈래를 적습니다
반복과 이동 — -> 단계 이름으로 앞(또는 뒤)의 단계로 이동하며, 옆쪽에 선으로 그려집니다
표준 도형 — 둥근 시작과 끝, 상자, 마름모, 입력·출력용 기울어진 상자
알기 쉬운 메시지 — 문제마다 줄 번호가 나오고, 한 번 클릭하면 그 줄로 이동합니다
8가지 스타일 — 클래식, 미니멀, 볼드, 파스텔, 다크, 청사진, 손그림, 칠판
위에서 아래로 또는 왼쪽에서 오른쪽으로 — 수업 자료용 도형 범례도 넣을 수 있습니다
PNG와 SVG — 슬라이드에 쓸 선명한 그림, 또는 편집·인쇄할 수 있는 SVG. 입력한 글은 이 브라우저에 저장됩니다

텍스트로 순서도 쓰는 방법

한 줄에 한 단계씩 적습니다. 말에 따라 도형이 정해집니다.

입력	결과
`물 끓이기`	상자 안의 단계
`물이 뜨거운가?`	마름모 안의 질문 (줄이 ?로 끝남)
질문 아래의 `예:`와 `아니오:`	질문에서 나가는 길
`-> 물 끓이기`	그 단계로 가는 화살표 (단계가 위에 있으면 반복)
`시작`, `끝` 또는 `끝: 완료`	둥근 시작 또는 끝
`입력: 이름` 또는 `출력: 합계`	입력 또는 출력용 기울어진 상자
`// 내 메모`	나를 위한 메모. 그려지지 않습니다

갈래의 단계는 예: 또는 아니오: 아래 줄에 적고, 공백 2칸으로 들여씁니다. 갈래가 끝나면 다시 왼쪽으로 돌아오세요. 다음 줄은 질문 다음에 오고, 두 길은 거기서 다시 합쳐집니다. 짧은 갈래는 한 줄에 쓸 수 있습니다: 예: 우산 챙기기.

두 길을 모두 쓸 필요는 없습니다. 질문에 예:만 있으면 「아니오」 길은 그대로 다음 단계로 이어집니다. 갈래에는 빨강:, 노랑:, 초록:처럼 다른 짧은 이름도 붙일 수 있어서, 질문 하나에서 세 갈래 이상으로 나눌 수도 있습니다.

이동은 단계에 적힌 말을 그대로 씁니다. 대소문자와 끝의 ?는 상관없습니다. 단계 다음에 앞으로 돌아가려면 다음 줄이나 같은 줄 끝에 -> 단계 이름을 적으세요: 먼저 돈 모으기 -> 돈이 있는가?.

괄호로도 도형을 고를 수 있습니다. (글)은 둥근 끝, [글]은 상자, /글/은 입력·출력 상자, <글>은 마름모입니다. ?로 끝나지만 질문이 아닌 단계에는 [ ]를 쓰세요. 예: [「왜?」라고 묻기].

시작하기 좋은 예시 세 가지

텍스트 상자 아래의 예시를 누르면 불러옵니다. 그다음 마음대로 바꿔 보세요. 첫 번째 예시인 아침 준비에서 기본 개념을 볼 수 있습니다.

줄	앞의 공백	하는 일
시작: 일어나기	0	둥근 시작
알람 끄기	0	단계
학교나 회사에 가는 날인가?	0	질문
예:	2	「예」 길이 시작됨
간단히 샤워하기	4	「예」 길의 단계
옷 입기	4	「예」 길의 다음 단계
아니오:	2	「아니오」 길이 시작됨
한 시간 더 자기	4	「아니오」 길의 단계
아침 먹기	0	두 길이 여기서 합쳐짐
비가 오는가?	0	「예」 길만 있는 질문
예: 우산 챙기기	2	한 줄로 쓴 짧은 「예」 길
이 닦기	0	「아니오」 길이 곧바로 여기로 옴
끝: 집에서 나가기	0	둥근 끝

살까 말까?에는 반복과 중간 종료가 들어 있습니다. 돈이 있는가? 아래에서 「아니오」 길은 먼저 돈 모으기를 거쳐 -> 돈이 있는가?로 이어지므로, 순서도가 되돌아가서 다시 묻습니다. 아니오: 끝: 사지 않기 줄은 갈래 안에서 과정을 끝냅니다.

로그인 과정은 입력·출력 상자와 갈래 안의 질문을 사용합니다. 비밀번호를 틀린 뒤 3번 실패했는가?에서 계정을 잠그거나, 아니오: -> 입력: 이메일과 비밀번호로 되돌아갑니다.

순서도 기호와 뜻

도형	이름	쓰는 곳
둥근 상자	단말	과정이 시작하고 끝나는 곳
상자	처리	「합계에 1 더하기」 같은 동작 하나
마름모	판단	답이 둘 이상인 질문
기울어진 상자	입력 / 출력	「숫자 읽기」, 「결과 출력하기」처럼 들어오거나 나가는 데이터
화살표	흐름선	단계의 순서

고급 옵션에서 도형 범례 표시를 체크하면 이 범례가 순서도 아래에 표시됩니다. 순서도에 쓰인 도형만 나옵니다.

8가지 스타일

클래식 — 부드러운 색, 도형 종류마다 다른 색
미니멀 — 흰 바탕에 검은 선, 인쇄할 때 잉크 절약
볼드 — 흰 글씨의 진한 채움 도형, 슬라이드용
파스텔 — 은은한 색과 둥근 모서리
다크 — 어두운 배경 위에서 빛나는 도형, 화면용
청사진 — 파란 격자 위의 흰 선, 설계도 느낌
손그림 — 줄 노트에 그린 스케치
칠판 — 초록 칠판 위의 분필 선, 교실용

스타일은 모양만 바꿉니다. 단계, 배치, 다운로드는 그대로입니다. 도형마다 다른 색은 스타일 목록 아래에서 모두 같은 색으로 바꿀 수 있습니다.

순서도는 이런 분들이 씁니다

학생 — 컴퓨터 수업의 알고리즘, 과학 실험 순서, 수학 풀이 방법 계획
선생님 — 학급 규칙이나 「막혔을 때 할 일」을 전체 화면으로 칠판에 보여 주기
팀 — 요청, 주문, 고객 문의가 어떻게 처리되는지 단계별로 설명
프로그래머 — 코드를 쓰기 전에 함수의 논리 스케치
집에서 — 결정을 내리거나, 아이들이 따라 할 하루 일과 그리기

자주 묻는 질문

순서도란 무엇인가요?

순서도는 과정의 단계를 나타낸 그림입니다. 상자에는 단계를 넣고, 화살표로 순서를 보여 주며, 마름모에는 길이 갈라지는 질문을 넣습니다. 학교, 사무실, 프로그래밍에서 무언가가 어떻게 돌아가는지 설명할 때 씁니다.

예/아니오 판단은 어떻게 추가하나요?

줄 끝에 물음표를 붙이세요. 예를 들면 비가 오는가?입니다. 다음 줄들에 예:와 아니오:를 적고, 각각의 단계를 공백 2칸으로 들여쓰세요. 하나만 쓰면 다른 길은 그대로 다음 단계로 이어집니다.

반복은 어떻게 만드나요?

->와 앞에 있는 단계에 적힌 말을 그대로 쓰세요. 예를 들면 -> 돈이 있는가?입니다. 화살표가 그 단계로 돌아갑니다. 순서도 옆쪽에 선으로 그려지므로 다른 선과 겹치지 않습니다.

빨간색, 노란색 메시지는 무슨 뜻인가요?

빨간 줄은 도구가 그릴 수 없는 문제입니다. 예를 들어 없는 단계로 이동하는 경우입니다. 노란 줄은 나가는 길이 하나뿐인 질문 같은 팁입니다. 각 메시지는 줄 번호로 시작합니다. 클릭하면 텍스트 상자에서 그 줄이 선택됩니다. 상자 왼쪽의 줄 번호에도 표시가 됩니다.

순서도를 다른 프로그램에서 편집할 수 있나요?

네. SVG를 다운로드하세요. Inkscape, Illustrator, Figma에서 열 수 있고 PowerPoint나 Word에 넣을 수도 있습니다. 글자는 그대로 글자로 남습니다. PNG는 2배 크기의 그림이라 슬라이드와 문서에 선명하게 쓸 수 있습니다.

만든 순서도가 저장되거나 업로드되나요?

입력한 글과 설정은 이 브라우저에 저장되므로 다시 와도 순서도가 그대로 있습니다. 업로드되는 것은 없습니다. 순서도는 사용하는 기기에서 그려집니다.

다른 언어로도 쓸 수 있나요?

네. 단계는 어떤 언어로든 입력할 수 있습니다. 한국어, 중국어, 일본어는 글자 사이에서 줄이 바뀌고, 아랍어와 히브리어는 오른쪽에서 왼쪽으로 그려집니다. 이 페이지에서는 특별한 말을 한국어로도 영어로도 쓸 수 있습니다(시작, 끝, 예, 아니오, 입력, 출력 또는 Start, End, yes, no, Input, Output). (글), /글/ 같은 괄호는 모든 언어에서 작동합니다.