플로우차트 사용 가이드

1. 먼저 문서 목적을 한 문장으로 정합니다

차트를 그리기 전에 “회원 가입이 완료되는 과정”, “오류가 발생했을 때 확인할 순서”처럼 목적을 한 문장으로 적어보세요. 목적이 분명하면 필요한 노드와 끝나는 지점을 고르기 쉬워집니다.

2. 상황에 맞는 노드를 추가합니다

노드는 캔버스에서 드래그해 옮길 수 있습니다. 노드를 선택하면 우측에서 문구, 도형 모양, 기본 비율, 너비·높이, 글자 크기, 채우기 색상과 테두리를 바꾸거나 복제할 수 있습니다. 선택 프레임의 네 모서리를 드래그해도 크기를 조절할 수 있습니다.

여러 노드는 빈 공간을 드래그해 둘러싸거나 Ctrl(Windows)·Cmd(Mac)를 누른 채 클릭해 선택합니다. 선택된 노드 하나를 드래그하면 간격을 유지한 채 함께 이동하며, 우측 패널에서 내부 연결을 포함해 함께 복제하거나 삭제할 수 있습니다.

3. 목적에 맞는 디자인 테마를 고릅니다

편집기 상단의 디자인 테마에서 전체 분위기를 바꿀 수 있습니다. 단정한은 업무 문서용, 클래식 문서는 교재·보고서용, 컬러 보드는 역할을 강하게 구분할 때, 파스텔 발표는 슬라이드 공유용으로 어울립니다.

테마를 바꾸면 캔버스 배경, 그리드, 글꼴, 기본 노드 색상, 연결선과 라벨이 함께 바뀝니다. 이미 특정 노드에 직접 지정한 채우기·테두리 색상은 유지됩니다. 선택한 테마는 JSON 작업 파일에 저장되며 PNG·SVG에도 같은 색과 글꼴로 반영됩니다.

4. 연결선을 만들고 의미를 적습니다

1. 흐름이 시작되는 노드를 선택합니다.
2. 노드 연결 버튼을 누릅니다.
3. 다음에 이어질 노드를 선택합니다.
4. 조건 분기라면 연결선을 선택해 “예”, “아니오” 또는 구체적인 기준을 입력합니다.

같은 방향의 연결선은 중복으로 만들 수 없습니다. 반대 방향의 연결은 반복 과정이나 되돌아가는 흐름을 표현할 때 사용할 수 있습니다. 연결선을 선택하면 파란색으로 강조되며, 경로가 꺾인 선은 작은 원형 핸들을 드래그해 꺾이는 위치를 조절할 수 있습니다.

5. 자동 정렬과 흐름 점검을 사용합니다

자동 정렬은 시작과 결과 단계를 구분하고, 노드 크기와 반복 경로를 고려해 단계별 위치와 직각 연결선을 함께 계산합니다. 가로·세로 방향과 세 가지 간격을 고른 뒤 미리보기할 수 있으며, 취소하면 기존 배치로 돌아갑니다.

흐름 점검은 연결되지 않은 단계나 끝나지 않는 경로뿐 아니라 노드 겹침, 연결선의 노드 관통·교차, 지나치게 축소되는 배치도 함께 알려 줍니다.

흐름 점검은 시작 노드 누락, 시작점에서 도달할 수 없는 노드, 선택지가 부족한 조건 노드, 다음 단계가 없는 과정 노드를 확인합니다. 점검 결과는 오류 확정이 아니라 검토가 필요한 항목을 알려주는 보조 기능입니다.

노드 찾기에서는 노드와 연결 문구를 검색해 해당 위치로 바로 이동할 수 있습니다. 텍스트로 만들기에는 줄바꿈이나 화살표로 나눈 단계를 붙여 넣어 미리 본 뒤 현재 차트에 직선 흐름으로 추가할 수 있습니다.

6. 작업 파일과 이미지의 차이를 이해합니다

문서 이름은 내려받는 파일명에만 사용됩니다. PNG와 SVG의 왼쪽 위에는 사이트 이름이나 문서 제목이 삽입되지 않으며, 실제 노드와 연결선 영역만 저장됩니다. PNG는 고해상도로 저장되고, 텍스트 줄바꿈·도형·연결선·선택한 테마는 편집 화면과 같은 규칙으로 출력됩니다.

7. PNG 이미지를 간단히 수정합니다

이미지 편집을 누르면 현재 플로우차트를 바로 가져오거나 기존 PNG·JPG·WebP 파일을 열 수 있습니다. 크기 변경, 90도 회전, 좌우·상하 뒤집기, 수동·자동 자르기, 여백 추가, 흰 배경 투명화, 텍스트·워터마크 추가를 한 뒤 PNG로 저장하거나 클립보드에 복사합니다.

자동 자르기는 파란 범위를 먼저 보여주므로 옅은 도형이 포함됐는지 확인한 뒤 적용하세요. X·Y·너비·높이를 직접 바꿔 범위를 조절할 수도 있습니다. 흰색 투명화는 기본적으로 외곽과 이어진 배경만 지켜 도형 내부의 흰색을 보존하며, 특별히 필요한 경우에만 ‘이미지 전체의 흰색’을 선택하세요.

이미지 편집은 브라우저 안에서만 실행되고 파일은 서버로 업로드되지 않습니다. 실행 취소 이력은 이미지 크기에 따라 최대 12단계·총 96MB 안에서 보관하며, 큰 이미지는 원본 복원을 유지하고 실행 취소 복사본을 제한합니다. PNG로 불러온 노드와 연결선은 하나의 이미지이므로 문구나 연결 관계를 다시 바꾸려면 JSON 작업 파일을 사용해야 합니다.

8. 읽기 쉬운 플로우차트를 만드는 방법

• 가능하면 흐름 방향을 왼쪽에서 오른쪽 또는 위에서 아래로 통일합니다.
• 과정 노드는 “확인한다”, “전송한다”처럼 하나의 행동만 담습니다.
• 조건 노드는 예·아니오로 답할 수 있는 질문 형태로 작성합니다.
• 연결선이 많이 교차하면 과정을 나누거나 메모 노드로 보충합니다.
• 결과 노드는 성공뿐 아니라 취소, 보류, 추가 확인 같은 종료 상태도 표시합니다.

키보드와 화면 조작

게임·창작 플로우차트 작성 기준

조건 노드는 확인할 수 있는 질문으로 씁니다

좋은 조건 문구는 누가 보아도 같은 결과를 낼 수 있습니다. “충분히 친한가?”보다 “호감도 6 이상인가?”처럼 기준값과 비교 방향을 함께 적으세요. 아이템 보유, 이전 선택, 날짜처럼 여러 조건이 있다면 한 마름모에 몰아넣지 말고 순서대로 연결하는 편이 확인하기 쉽습니다.

진엔딩과 노멀엔딩은 결과보다 조건부터 나눕니다

먼저 결과 노드에 진엔딩과 노멀엔딩을 둔 뒤, 각 결과에 필요한 선택과 조건을 거꾸로 연결해 보세요. 이렇게 하면 한 조건을 빠뜨리거나 어떤 선택이 결말에 영향을 주는지 모호해지는 일을 줄일 수 있습니다.

반복 퀘스트와 실패 후 되돌아가기

재료 부족이나 실패 후 다시 도전할 수 있는 흐름은 뒤로 향하는 연결선으로 표시하고, 연결선에 재시도 이유를 적으세요. 반복을 끝내는 기간 종료·횟수 제한·포기 결과도 따로 두어 무한 반복처럼 보이지 않게 만드는 것이 좋습니다.

대화 선택지와 호감도 조건을 읽기 쉽게 배치합니다

조건 노드에는 질문을, 연결선에는 플레이어가 고르는 답을 씁니다. 대사 전체는 메모 노드에 보관하고, 주 흐름에는 관계 변화와 다음 결과만 남기면 표가 길어져도 읽기 편합니다. 호감도는 언제 확인하는지와 변화량을 함께 메모해 두세요.