Web Toolarium

순서도 시뮬레이터

순서도 시뮬레이터

변수, 연산, 분기, 반복문을 조합한 순서도를 만들고 실행하면서 값의 변화를 확인할 수 있습니다.

브라우저에서 처리 자동 저장 JSON 가져오기 및 내보내기 임의 JavaScript 실행 안 함 PC 사용 권장

PC 사용 권장: 노드 배치, 연결, 편집은 마우스를 사용할 수 있는 화면에 적합합니다.

EDITOR

순서도

100%
노드를 배치하여 흐름을 만드세요
Delete: 선택 삭제Ctrl+Z UndoCtrl+Y RedoCtrl+S: 저장두 번 클릭: 설정
이 기기의 localStorage에 자동 저장

HOW TO USE

만들고 실행하며 값의 변화를 확인하세요

왼쪽에서 노드를 추가하고 각 출력 포트를 다음 노드에 연결하세요. 오른쪽 ‘설정’에서 처리식, 조건식, 표시식을 편집할 수 있습니다.

왜 필요한가요? 그림만으로는 어떤 분기로 진행되는지, 변수가 어떻게 바뀌는지, 반복이 끝나는지 확인하기 어렵습니다. 직접 실행하면 생각한 순서대로 처리되는지 확인할 수 있습니다.

다음과 같은 경우에 사용하세요. 프로그래밍 전 처리 흐름 정리, 수업이나 설명 중 흐름 확인, 조건·계산·반복 동작 점검, 구현 전 오류 찾기에 활용할 수 있습니다.

  1. 오른쪽의 ‘변수’를 열고 숫자형, 문자열형, 불리언형 변수를 등록하세요
  2. 시작부터 종료까지 노드를 연결하고 판단 노드에는 Yes / No 두 연결을 추가하세요
  3. ‘한 단계 실행’을 선택하여 현재 노드와 변수 변화를 확인하세요
  4. 완성한 흐름은 JSON으로 저장하고 여러 안은 ‘열기’에서 관리하세요

식은 제한된 안전한 표현식 언어로 평가됩니다. 임의의 JavaScript를 실행하지 않으며 순서도나 변수 데이터를 브라우저 밖으로 전송하지 않습니다.

GUIDE

순서도 기본 및 사용 방법

순서도는 도형과 연결선으로 처리 순서와 조건 분기를 나타냅니다. 이 도구에서는 만든 흐름을 그대로 실행할 수 있습니다.

순서도란?

작업이나 프로그램의 흐름을 위에서 아래로 이어지는 도형과 연결선으로 나타낸 그림입니다. 처리 순서, 조건 분기, 반복을 눈으로 확인하여 흐름을 정리하고 설명하는 데 도움이 됩니다.

각 도형의 역할

단자(시작/종료)
흐름의 시작과 끝을 나타냅니다.
설정 방법:왼쪽 목록에서 시작 또는 종료 단자를 추가하세요. 오른쪽 설정에서 단자 유형을 변경할 수도 있습니다.
예:시작 → 처리 → 종료
처리
변수 대입이나 계산처럼 실행할 작업을 나타냅니다.
설정 방법:오른쪽 설정에서 표시 이름과 처리식을 입력하세요. 한 줄에 대입식 하나를 작성합니다.
예:표시 이름 ‘카운트 증가’, 처리식 count = count + 1
판단
조건식을 판정하여 Yes와 No 두 방향으로 분기합니다.
설정 방법:오른쪽 설정에서 조건식을 입력하고 Yes와 No 출력을 각각 연결하세요.
예:조건식 score >= 70. 참이면 Yes, 거짓이면 No로 이동합니다.
표시
계산 결과나 메시지를 오른쪽 ‘출력’에 추가합니다.
설정 방법:오른쪽 설정에서 표시 이름과 출력식을 입력하세요.
예:출력식 "count=" + count
반복 시작
조건이 참인 동안 반복 본문으로 진행하고, 거짓이 되면 반복 종료 후 단계로 이동합니다.
설정 방법:오른쪽 설정에서 조건식을 입력하고 대응하는 반복 종료를 지정하세요.
예:조건식 count < 5. 참이면 본문으로, 거짓이면 반복 종료 후로 이동합니다.
반복 종료
반복 본문의 끝에서 대응하는 반복 시작으로 돌아갑니다. 시작 조건이 거짓이면 반복 이후 처리로 진행합니다.
설정 방법:오른쪽 설정에서 대응하는 반복 시작 노드를 선택하세요.
예:count를 증가시키는 처리 뒤에 배치하고 count가 5보다 작은 동안 반복합니다.

도형 배치 방법

공통 작성 절차

  1. 왼쪽 노드 목록에서 도형을 중앙 캔버스로 끌어다 놓으세요.
  2. 시작부터 종료까지 처리 순서에 따라 도형을 배치하세요. 노드를 드래그하여 위치를 조정할 수 있습니다.
  3. 노드를 클릭해 메뉴를 열고 ‘처리 편집’에서 표시 이름이나 식을 설정하세요.

도형별 배치 및 설정

단자(시작/종료)

배치:흐름 맨 앞에 시작 노드 하나를, 맨 끝에 종료 노드를 배치하세요.

연결:시작에서는 다음 노드로 OUT 하나만 연결하고 종료에는 IN만 연결하세요. 종료에서 OUT은 만들지 않습니다.

처리

설정:‘처리 편집’에서 표시 이름과 처리식을 입력합니다. 처리식은 한 줄에 하나의 대입식으로 작성하세요.

연결:이전 노드를 IN에 연결하고 다음 노드에 OUT 하나를 연결합니다. 예:count = count + 1

판단

설정:조건식을 입력하세요. 결과는 true 또는 false 가 되도록 작성합니다.

연결:아래쪽 Yes와 No를 각각 다음 노드 하나에 연결합니다. 예:score >= 70

표시

설정:표시 이름과 출력식을 입력하세요. 실행하면 결과가 오른쪽 ‘출력’에 추가됩니다.

연결:이전 노드를 IN에 연결하고 다음 노드에 OUT 하나를 연결합니다. 예:"count=" + count

반복 시작

설정:조건식을 입력하고 같은 색과 번호의 반복 종료 노드와 짝을 지정하세요.

연결:OUT은 반복 본문 시작에 하나만 연결합니다. 조건이 false이면 반복 종료로 자동 이동합니다.

반복 종료

설정:오른쪽 설정에서 대응하는 반복 시작을 선택하고 반복 본문 끝에 배치하세요.

연결:OUT은 반복 이후 처리에 하나만 연결합니다. 반복 시작으로 돌아가는 선은 만들지 않아도 실행 중 자동으로 돌아갑니다.

연결 방법 및 규칙

  1. ‘연결 모드’를 누르거나 노드 메뉴에서 ‘연결 시작’을 선택하세요.
  2. 출발 노드 아래의 OUT 또는 판단 노드의 Yes / No를 클릭하세요.
  3. 대상 노드 위의 IN을 클릭하면 연결됩니다.
  4. 일반 OUT은 한 개만 연결할 수 있고 IN은 여러 노드에서 연결할 수 있습니다.
  5. 같은 OUT을 다른 노드에 연결하면 기존 연결이 자동으로 새 연결로 대체됩니다.
  6. 연결선을 삭제하려면 선을 선택한 뒤 Delete 키를 누르세요.
  7. 연결선이 교차하지 않도록 노드를 드래그해 배치를 조정하세요.
OUT 하나만
처리 A
처리 B

OUT 하나에서는 연결 하나만 나갈 수 있습니다. 다른 노드에 연결하면 기존 선이 대체됩니다.

IN은 여러 연결을 받을 수 있음
처리 A
처리 B
처리 C

여러 OUT을 같은 노드의 IN에 연결할 수 있습니다. 분기 후 흐름을 하나로 합칠 때 사용하세요.

Yes와 No는 판단 노드에서만 각각 연결합니다. 반복 시작과 종료는 설정에서 짝을 지정하고 서로 직접 연결하지 않습니다.

오른쪽 패널 설명

출력
실행된 표시 노드의 결과를 실행 순서대로 보여줍니다. 분기에서 건너뛴 표시 노드의 결과는 추가되지 않습니다.
확인:실행 전에는 ‘아직 출력이 없습니다.’가 표시되고 실행 중에는 ‘출력’ 패널이 자동으로 열립니다.
변수
변수 이름, 유형, 초기값을 등록합니다. 실행 중에는 현재 실제 값을 확인할 수 있습니다.
기록
통과한 노드, 조건 판정, 변수 변화를 단계별로 확인할 수 있습니다.
설정
선택한 노드의 표시 이름, 처리식, 조건식, 출력식을 편집합니다.

출력 확인 방법

  1. 표시 노드 설정에 출력식을 입력하세요. 예:"count=" + count
  2. ‘한 단계 실행’ 또는 ‘연속 실행’을 사용해 표시 노드까지 진행하세요.
  3. 표시 노드가 실행되면 식의 계산 결과가 ‘출력’에 추가됩니다.
  4. 반복문에서 같은 표시 노드가 여러 번 실행되면 각 결과가 실행 순서대로 추가됩니다.
  5. 출력을 처음부터 확인하려면 편집 모드에서 ‘지우기’를 누른 뒤 실행하세요.

예:변수 count 이 1 일 때 출력식 "count=" + count 의 출력은 count=1 입니다.

실행 중에는 편집할 수 없으며 오른쪽에 변수의 실제 값과 출력이 표시됩니다. ‘실행 종료’를 누르면 편집 모드로 돌아갑니다.

실행 방법

한 단계 실행현재 노드 하나를 실행합니다.

연속 실행설정한 속도로 자동 실행합니다.

일시정지연속 실행을 일시정지합니다.

실행 종료실행 모드를 종료하고 편집으로 돌아갑니다.

속도: 보통연속 실행 속도를 선택합니다.

  1. 왼쪽 노드 목록에서 도형을 중앙 캔버스로 끌어다 놓으세요.
  2. 캔버스의 노드를 드래그하여 위치를 조정하세요.
  3. 노드를 클릭해 메뉴를 열고 ‘처리 편집’에서 내용을 변경하세요.
  4. 연결선을 클릭해 선택한 다음 Delete 키로 삭제하세요.
  5. ‘한 단계 실행’은 노드 하나씩, ‘연속 실행’은 자동으로 진행합니다. 멈추려면 ‘실행 종료’를 누르세요.
  6. 프로젝트는 이 기기에 자동 저장되며 JSON으로 백업할 수 있습니다.

조건식에서 사용하는 산술 연산과 예

종류기호예의미
덧셈+score + 10score에 10을 더함
뺄셈-count - 1count에서 1을 뺌
곱셈*price * quantityprice와 quantity를 곱함
나눗셈/total / 2total을 2로 나눔
나머지%count % 2 == 0짝수인지 판정

비교 및 논리 연산자

종류기호예의미
같음==score == 70score가 70과 같음
다름!=score != 0score가 0이 아님
보다 큼>score > 70score가 70보다 큼
이상>=score >= 70score가 70 이상
보다 작음<count < 5count가 5보다 작음
이하<=count <= 5count가 5 이하
그리고&&score >= 70 && count < 5양쪽 조건이 모두 참
또는||score < 0 || score > 100양쪽 중 하나의 조건이 참
부정!!isFinished불리언 값을 반전

= 는 처리에서 값을 대입하는 기호이고== 는 조건에서 값을 비교하는 기호입니다.!isFinished 를 사용하는 경우isFinished 를 불리언 변수로 등록하세요. 복잡한 조건은 괄호로 묶으세요. 예: (score + bonus) >= 70 처럼 괄호로 묶습니다.

실행 오류 해결 방법

오류 메시지 실행할 수 없는 이유는 실행 버튼 아래에 표시됩니다. 문제가 있는 노드는 캔버스에도 표시되므로 안내에 따라 하나씩 수정하세요.

  1. 구조 오류라면 표시된 노드 이름과 연결 내용을 확인하세요.
  2. 노드를 클릭하고 ‘처리 편집’을 선택해 처리식, 조건식, 출력식을 수정하세요.
  3. 연결이 부족하면 출력 포트와 대상 입력 포트를 연결하세요.
  4. 실행 중 오류가 발생하면 ‘실행 종료’로 편집 모드로 돌아간 뒤 수정하고 ‘한 단계 실행’으로 다시 확인하세요.

연결 및 구조 확인

  • 시작 노드는 하나만 두고 시작부터 종료까지 연결하세요.
  • 판단과 종료를 제외한 노드는 다음 연결을 하나씩 두세요.
  • 각 판단 노드에 Yes와 No를 하나씩 연결하세요.
  • 반복 시작과 종료를 같은 번호로 짝지으세요.

식 및 값 확인

  • 처리식은 한 줄에 대입 하나로 작성하고 변수를 먼저 등록하세요.
  • 숫자형, 문자열형, 불리언형을 혼합하지 마세요.
  • 판단 및 반복 조건식의 결과는 true 또는 false 가 되도록 합니다.
  • 0으로 나누는 경우와 닫히지 않은 괄호 또는 문자열이 있는지 확인하세요.

LOCAL PROJECTS

저장된 프로젝트