알고리즘 표현하기

중학생이 의사코드와 순서도를 함께 익힐 수 있는 웹 기반 알고리즘 학습 도구입니다. 의사코드를 쓰면 순서도가 자동으로 만들어지고 순서도를 직접 편집하면 의사코드가 다시 생성됩니다.

주요 기능

• 의사코드를 순서도로 실시간 변환
• 순서도를 의사코드로 역변환
• 단말·입출력·처리·판단 기호를 마우스 또는 터치로 추가·편집·연결
• 반복과 조건 분기를 포함한 순서도 자동 배치
• 문법 오류가 난 줄과 해결 방법을 쉬운 한국어로 안내
• 앱으로 설치해 인터넷 없이 사용

시작하기

Node.js와 pnpm이 필요합니다.

pnpm install
pnpm dev

개발 서버가 시작되면 터미널에 표시된 주소를 브라우저에서 엽니다.

명령어

명령어	설명
pnpm dev	개발 서버 실행
pnpm build	포맷·TypeScript 검사 후 배포용 파일 생성
pnpm format	TypeScript·Sass·설정 파일을 Prettier로 정리
pnpm typecheck	TypeScript 타입 검사
pnpm preview	생성된 배포용 파일 미리보기
pnpm test	Vitest 테스트 한 번 실행

브랜드 마크를 고쳤을 때만 node scripts/generate-icons.mjs로 설치 아이콘 PNG를 다시 만듭니다. 빌드에는 포함되지 않습니다.

사용 방법

의사코드로 순서도 만들기

1. 왼쪽 편집기에 시작부터 의사코드를 씁니다.
2. 시작과 끝 사이의 문장은 공백 2칸으로 들여씁니다.
3. 입력을 멈추면 약 300ms 뒤 오른쪽 순서도가 자동으로 바뀝니다.
4. 문법이 맞지 않으면 표시된 줄과 한국어 안내를 확인해 고칩니다.

시작
  합계 ← 0
  수 ← 1
  [수가 5보다 작거나 같을 때까지 반복]
    합계 ← 합계 + 수 × 수
    수 ← 수 + 1
  출력: 합계
끝

키보드로 <-를 입력하면 ←로, *를 입력하면 ×로 자동 변환됩니다. 화면의 기호 입력 버튼으로 ←, ×, ÷를 넣을 수도 있습니다.

순서도로 의사코드 만들기

1. 아래쪽 팔레트에서 기호를 캔버스로 끌어다 놓습니다.
2. 터치 화면에서는 기호를 탭한 다음 넣을 위치를 탭할 수도 있습니다.
3. 기호의 연결점을 이어 흐름을 만듭니다.
4. 기호를 선택해 내용을 편집하거나 삭제합니다.
5. 순서도 작업은 Ctrl/Cmd + Z로 되돌리고 Ctrl/Cmd + Shift + Z로 다시 실행합니다.
6. 순서도가 올바른 구조가 되면 왼쪽 의사코드가 자동으로 만들어집니다.

연결이 끊겼거나 끝 기호가 없는 등 순서도가 완성되지 않은 동안에는, 다음에 해야 할 작업을 화면에서 안내합니다.

예제와 이미지 저장

• 상단의 예제 보기에서 제곱의 합 구하기, 짝수 판별하기 예제를 불러올 수 있습니다.
• 순서도 패널 오른쪽 위의 이미지로 저장을 누르면 현재 순서도가 흰 배경의 2배 해상도 PNG로 저장됩니다.

작업 내용 자동 저장

• 만들던 내용은 브라우저에 자동으로 저장됩니다. 창을 닫았다가 다시 열어도 순서도, 의사코드, 기호 위치가 그대로 남습니다.
• 아직 연결하지 않은 기호처럼 만드는 도중의 상태도 그대로 저장됩니다.
• 처음부터 다시 시작하려면 상단의 초기화를 누릅니다. 확인 창에서 한 번 더 확인하며, 되돌릴 수 없습니다.
• 저장은 사용하는 브라우저 안에만 남습니다. 다른 컴퓨터나 다른 브라우저에서는 보이지 않으므로, 제출할 결과는 이미지로 저장을 이용합니다.

앱으로 설치하고 인터넷 없이 쓰기

• 주소창 오른쪽의 설치 버튼을 누르면 앱으로 설치됩니다. 주소를 외우지 않아도 아이콘으로 열리고 주소창과 탭바가 없어 화면이 조금 더 넓어집니다.
• 한 번 열어 본 뒤에는 인터넷이 끊겨도 그대로 동작합니다. 의사코드 편집, 순서도 편집, 예제 보기, 이미지 저장, 자동 저장이 모두 됩니다.
• 오프라인 캐시가 준비되면 인터넷 없이도 같은 한글 글꼴을 사용합니다.
• 새 버전이 나오면 "새 버전이 나왔어요" 창이 뜹니다. 작업 도중이라면 나중에를 눌러도 되고, 지금 새로 고침을 눌러도 만들던 내용은 그대로 남습니다.

의사코드 문법

구문	형식	순서도 기호
시작	시작	노란색 단말
끝	끝	노란색 단말
일반 동작	물을 끓인다. 같은 일반 문장	파란색 처리
대입·계산	변수 ← 식	파란색 처리
입력	입력: 변수 또는 변수 입력	분홍색 입출력
출력	출력: 식 또는 식 출력	분홍색 입출력
반복	[조건 반복] 뒤에 들여쓴 본문	초록색 판단
조건 분기	[만약 조건이면], 선택적으로 [아니면] 뒤에 들여쓴 본문	초록색 판단

빈 프로그램은 시작 한 줄만으로 올바릅니다. 문장을 하나라도 추가하면 마지막 줄에 끝이 필요합니다. 조건식은 실행하거나 계산하지 않고 작성한 문자열을 그대로 보존합니다.

순서도 기호

의미	모양	색상
시작·끝	둥근 사각형	노란색
입력·출력	평행사변형	분홍색
처리·대입	직사각형	연한 파란색
조건 판단	마름모	연한 초록색

판단 기호의 두 화살표에는 예와 아니오가 표시됩니다. 조건이든 반복이든 늘 같은 방향으로 읽을 수 있도록 예는 마름모의 왼쪽 꼭짓점, 아니오는 오른쪽 꼭짓점에서 출발하며, 자동 배치도 예 쪽 기호를 왼쪽에 놓아 두 선이 교차하지 않게 합니다.

동작 구조

의사코드와 순서도는 공통 중간 표현인 AST를 중심으로 서로 변환됩니다.

의사코드 ── 파싱 ──▶ AST ── 자동 배치 ──▶ 순서도
의사코드 ◀─ 코드 생성 ─ AST ◀─ 구조 변환 ── 순서도 편집

한쪽 표현을 수정할 때 AST를 갱신한 뒤 반대쪽 표현을 다시 만들기 때문에, 의사코드와 순서도가 같은 알고리즘을 유지합니다.

기술 스택

• React 18, TypeScript, Vite
• React Flow (@xyflow/react): 순서도 렌더링과 편집
• dagre: 노드 자동 배치
• CodeMirror 6: 의사코드 편집기
• zustand: AST 중심 상태 관리
• vite-plugin-pwa (Workbox): 설치와 오프라인 실행
• Sass: 디자인 토큰과 재사용 스타일 관리
• Prettier: 빌드 전 코드 형식 검증
• Vitest: 파서와 양방향 변환 테스트

프로젝트 구조

public/                 그대로 배포되는 파일
  icon.svg              favicon이자 아이콘 원본
  icon-maskable.svg     잘려도 되는 아이콘의 원본
  icon-*.png            설치 아이콘 (원본에서 생성)
  screenshot-wide.png   설치 창 미리보기
scripts/
  generate-icons.mjs    SVG에서 설치 아이콘 PNG 만들기
src/
  core/                 UI와 무관한 변환·검증 로직
    ast.ts              AST 타입
    parser.ts           의사코드 → AST
    astToText.ts        AST → 의사코드
    astToFlow.ts        AST → 순서도 그래프
    flowToAst.ts        순서도 그래프 → AST
    decisionKind.ts     판단 기호 조건 분기 ↔ 반복 전환 재배선
    removeNodes.ts      기호 삭제(판단 기호와 짝 합류 기호를 함께)
    graphTopology.ts    공통 합류점 탐색과 짝 식별 규칙
    edgeGeometry.ts     화면·저장 이미지 공용 화살표 경로 계산
    flowToSvg.ts        순서도 그래프 → 저장용 SVG
    workspaceStore.ts   작업 내용 자동 저장(localStorage)
  components/           편집기, 캔버스, 팔레트, 예제 화면
  constants/            여러 편집 화면이 공유하는 상수
    pwa.ts              설치 manifest와 배포 경로
  examples/             예제 알고리즘
  hooks/                해시 기반 화면 전환과 공통 타이머
  store/                전역 상태
  styles/               Sass 디자인 토큰, 믹스인, 컴포넌트 스타일

테스트

pnpm test
pnpm build

테스트는 의사코드 파싱, AST → 의사코드 → AST 왕복 변환, 순서도 변환과 화살표 경로, 작업 내용 저장 형식, 설치 manifest와 배포 경로의 결합 등을 검증합니다.

지원 범위와 알려진 제한

• 대상 환경은 데스크톱과 가로형 크롬북입니다. 휴대폰과 태블릿 세로 화면용 별도 레이아웃은 제공하지 않습니다.
• 1366×768과 1440×900 뷰포트에서 화면 배치와 주요 조작을 확인했습니다.
• 2026-08-24 실제 터치 Chromebook에서 캔버스 제스처, 기호 편집·연결, 화면 키보드와 앱 설치 후 화면 동작을 확인했습니다.
• 자동 저장은 쓰던 브라우저에만 남고 한 번에 한 벌만 보관합니다. 여러 작업을 이름 붙여 저장할 수는 없습니다.
• 오프라인 사용은 한 번 이상 접속해 앱과 글꼴의 캐시가 준비된 뒤부터 가능합니다. Pretendard는 자체 호스팅하며 최초 다운로드에 약 0.8 MB가 포함됩니다(상용 한글 2,350자 서브셋이라 드문 음절은 시스템 글꼴로 보입니다).
• 아이폰·아이패드 설치 아이콘과 세로 화면 레이아웃은 제공하지 않습니다.

개발 문서

개발자를 위한 문서는 docs/README.md에서 주제별로 확인할 수 있습니다.

• 프로젝트 개요와 기술 결정
• 아키텍처
• 의사코드와 AST
• 순서도 기호 규칙
• 순서도 변환과 렌더링
• UI와 터치 입력
• 테스트와 유지보수
• 구현 단계 기록