React on 코딩이 싫은 거북이

InfoFlow: 정보가 어디서 어디로 이동하는지 기록하는 브라우저 흐름도 편집기

Fri, 02 Oct 2026 11:30:00 +0900

장비 연결도만으로 설명하기 어려운 질문

보안 검토 회의에서 필요한 그림이 항상 네트워크 구성도인 것은 아닙니다. 서버와 방화벽의 연결은 알고 있어도, 주문번호가 어떤 처리 과정을 거쳐 저장되고 외부 업체에는 어떤 항목이 전달되는지는 별도의 설명이 필요합니다. 선 하나에 “연동”이라고만 적으면 목적, 담당자, 정보 분류, 전송 보호조치를 다시 문서 곳곳에서 찾아야 합니다.

InfoFlow는 구성 요소와 그 사이를 이동하는 정보를 구분해 기록하는 한국어 브라우저 편집기입니다. 외부 주체·처리·시스템·저장소를 배치하고, 방향이 있는 흐름에 데이터 항목과 목적 등을 붙입니다. 완성된 그림뿐 아니라 검토에 필요한 속성을 함께 남기는 것이 핵심입니다.

InfoFlow 실행하기 · 소스 저장소

업무 담당자와 인터뷰하며 정보 이동을 정리하거나, 시스템 연계 변경 전후를 비교하거나, 설명 자료와 상세 속성표를 함께 준비할 때 활용할 수 있습니다. 다만 실제 트래픽을 수집하거나 시스템 설정을 읽어 자동으로 도면을 만드는 도구는 아닙니다. 입력한 내용의 사실 여부와 보안상 적절성은 작성자가 확인해야 합니다.

NetGraph·InfoFlow·PrivacyFlow 중 무엇을 고를까

세 앱은 비슷한 편집 경험을 제공하지만 기록하는 대상이 다릅니다. 파일을 서로 바꾸어 여는 하나의 제품군이 아니라, 각각 독립된 저장소와 실행 앱입니다.

앱	중심 질문	주로 기록하는 대상
NetGraph	어떤 장비가 어떤 구간에서 연결되는가?	장비, 세그먼트, 네트워크 연결
InfoFlow	어떤 정보가 어디에서 어디로 이동하는가?	구성 요소와 방향별 정보 흐름
PrivacyFlow	개인정보가 어떤 처리 단계에 놓이는가?	수집·이용·보관·제공·위탁·파기와 단계별 속성

IP나 네트워크 구간 중심의 그림이 필요하다면 NetGraph의 네트워크 구성도 작성 방식이 더 직접적입니다. 보유기간, 법적 근거, 위탁업무처럼 개인정보 처리 단계별 정보를 구분해야 한다면 PrivacyFlow의 개인정보 처리 흐름도 안내를 참고할 수 있습니다.

InfoFlow에도 이름·주소 같은 항목명을 적을 수 있지만, 개인정보 전용 단계나 법적 판단 기능이 생기는 것은 아닙니다. 반대로 주문 상태, 정산 결과, 재고 정보처럼 개인정보에 한정되지 않는 업무 정보도 같은 모델로 표현할 수 있습니다.

네 가지 구성 요소와 흐름은 서로 다른 데이터다

왼쪽 패널에는 구성 요소와 정보 흐름 탭이 있습니다. 구성 요소는 정보를 보내거나 받고, 처리하거나 보관하는 지점입니다. 흐름은 두 지점 사이에서 무엇이 어떤 방향으로 이동하는지를 설명합니다.

구성 요소 종류	내부 값	도형·색	표현 예시
외부 주체	`external`	회색 사각형	고객, 외부 협력사
처리	`process`	파란색 타원	주문 검증, 집계 처리
시스템	`system`	청록색 둥근 사각형	주문 서비스, 업무 시스템
저장소	`store`	보라색 원통형	주문 저장소, 결과 보관소

종류는 이름에서 추정하지 않고 사용자가 선택합니다. 예를 들어 이름에 “DB”가 있어도 종류가 자동으로 저장소로 바뀌지 않습니다. 색뿐 아니라 종류 이름과 도형으로도 의미를 구분합니다.

구성 요소의 속성은 이름, 종류, 담당자, 보안영역, 설명입니다. 새 구성 요소 폼에서는 이름과 종류가 필수이고, 담당자와 보안영역은 비워 둘 수 있습니다. 담당자는 계정이나 권한 객체가 아닌 자유 텍스트입니다. 조직 내 역할명이나 합성 팀명으로 적어도 되며, 앱이 담당자에게 알림을 보내지는 않습니다.

보안영역 역시 문자열입니다. “외부”, “서비스 영역”, “저장 영역”이라고 적는다고 영역 상자나 네트워크 경계가 만들어지지 않습니다. 모든 노드는 독립적인 절대좌표를 가지며, 영역에 소속된 자식 노드로 이동하는 구조가 아닙니다. 같은 의미를 가진 영역명을 제각각 쓰면 문자열 비교 결과도 달라지므로, 작성 전에 용어를 정해 두는 편이 좋습니다.

흐름에는 출발·도착 구성 요소, 흐름명, 데이터 항목, 목적, 분류, 전송방식, 주기, 보호조치, 보호조치 설명, 메모가 들어갑니다. 담당자와 영역은 노드에, 분류와 전송 보호조치는 흐름에 기록한다는 구분을 기억하면 편집이 쉬워집니다.

‘미지정’은 ‘문제없음’도 ‘없음’도 아니다

정보 분류는 미지정 / 공개 / 내부 / 기밀 / 극비, 보호조치는 미지정 / 없음 / TLS / VPN / 기타 중에서 선택합니다. 새 흐름의 분류와 보호조치는 모두 unknown, 즉 미지정으로 시작합니다. 기본값을 보안 설정이 확인된 상태처럼 보이게 만들지 않는 선택입니다.

보호조치에서 “없음”은 사용자가 보호조치가 없다고 기록한 값입니다. “미지정”은 아직 확인하거나 입력하지 않은 값입니다. 둘을 구별해야 검토자가 추가 확인이 필요한 지점과 실제로 보호되지 않는다고 기록된 지점을 나누어 볼 수 있습니다.

전송방식과 주기는 자유 텍스트입니다. “HTTPS API”를 적어도 TLS가 자동 선택되지는 않으며, TLS를 선택해도 실제 인증서나 암호화 구성이 검사되지는 않습니다. 정보 분류 역시 조직의 분류 기준을 대신하지 않습니다. 근거가 없는 값을 채워 경고만 없애기보다는, 확인 전에는 미지정으로 남기고 메모에 확인 대상을 적는 것이 낫습니다.

데이터 항목은 줄바꿈 또는 쉼표로 나누어 입력합니다. 앞뒤 공백과 빈 항목은 정리됩니다. 도면의 흐름 라벨에는 흐름명, 앞의 세 데이터 항목, 분류, 전송방식이 표시됩니다. 네 번째 이후 항목과 목적·주기·상세 메모가 그림에 보이지 않는다고 삭제된 것은 아닙니다. 전체 내용은 선택 속성이나 JSON·PPTX 상세 출력에서 확인해야 합니다.

기본 합성 예제로 주문 정보 이동을 따라가기

처음 시작할 때 기본 합성 예제를 선택하면 구성 요소 5개와 방향 흐름 4개가 만들어집니다. 문서명은 정보 흐름도 — 합성 예제, 첫 장은 흐름도 1입니다. 실제 기본 연결은 다음과 같습니다.

출발 → 도착	흐름명	초기 데이터 항목
고객 → 주문 서비스	주문 접수	이름, 주소, 주문번호
주문 서비스 → 주문 검증	검증 요청	주문번호
주문 검증 → 주문 저장소	주문 저장	이름, 주소, 주문번호
주문 저장소 → 배송업체	배송 요청	이름, 주소, 주문번호

기본 합성 예제의 연결과 속성은 그대로 두고, 흐름명과 화살표를 구분하기 쉽도록 구성 요소 사이의 간격을 수동으로 넓혀 내보냈습니다. 실제 고객 정보, 운영 인프라 또는 권장 연계 구조를 나타내지 않습니다.

노드 설명과 흐름 메모에는 합성 예시 — 실제 운영 설정이 아닙니다가 들어 있습니다. 이름·주소도 개인의 실제 값이 아니라 필드 이름입니다. 특히 저장소에서 배송업체로 이어지는 마지막 화살표는 편집 방식을 보여 주기 위한 예제이지, 실제 데이터베이스가 외부 업체와 직접 연계되어야 한다는 설계 권고가 아닙니다.

구성 요소의 책임과 영역을 적는다

캔버스나 왼쪽 목록에서 주문 서비스를 선택합니다. 오른쪽 선택 속성에서 담당자를 예시 주문운영팀, 보안영역을 예시 서비스 영역으로 적고 변경 적용을 누릅니다. 주문 저장소에는 예시 저장 영역처럼 다른 이름을 사용할 수 있습니다. 이 값들은 연습용이며 실제 조직 구조를 추정한 것이 아닙니다.

노드를 새로 만들 때는 팔레트의 종류를 클릭하거나 캔버스로 드래그합니다. 왼쪽 새 구성 요소 폼에서 이름과 종류를 정하고 구성 요소 추가를 눌러도 됩니다. 클릭 추가는 종류명과 번호가 붙은 노드로 시작하므로, 선택 속성에서 업무 의미가 드러나는 이름으로 바꿉니다.

정보 흐름의 상세 내용을 적는다

왼쪽 정보 흐름 탭에서 주문 접수를 고릅니다. 목적에는 합성 주문 접수 검토, 주기에는 예시: 요청 시처럼 연습용 문구를 입력할 수 있습니다. 분류와 보호조치는 아직 확인하지 않았다면 그대로 미지정으로 둡니다. 변경 후에는 반드시 변경 적용을 눌러 저장 상태에 반영합니다.

같은 방식으로 검증 요청을 선택하면 초기 항목이 주문번호 하나라는 점을 확인할 수 있습니다. 검토 회의에서는 이 차이를 출발점으로 “검증에 이름이나 주소까지 필요한가?”를 질문할 수 있습니다. 앱이 최소 수집 여부를 판단하는 것은 아니지만, 흐름별 항목을 구분해 적으면 검토할 질문이 구체화됩니다.

경고를 통해 빠진 기록을 찾는다

기본 예제는 담당자·분류·보호조치 등을 확정하지 않았으므로 검토 경고가 나오는 것이 자연스럽습니다. 오른쪽 검토 필요사항에서 항목을 누르면 관련 노드나 흐름으로 이동합니다. 예제를 완성된 보안 설계로 오해하지 않고, 어떤 정보가 비어 있는지 살펴보는 과정으로 사용하면 됩니다.

수정 전후를 구분하고 백업한다

탭의 복제로 원본 예제를 남겨 두고, 복제 장에서 필드를 채워 비교할 수 있습니다. 이후 **내보내기 ▾ → JSON 백업 저장 (전체 원본)**으로 저장합니다. 재현 가능한 예제가 필요하면 저장소의 information-flow-demo.json을 내려받아 JSON 불러오기로 열 수도 있습니다.

방향, 연결점, 병렬 흐름과 자동 배치

흐름은 항상 출발 → 도착입니다. 노드의 위·아래·왼쪽·오른쪽 연결점을 드래그하면 시작점에서 종료점으로 향하는 초안 흐름이 생성됩니다. 이름 없는 초안은 오른쪽에서 속성을 채울 수 있습니다. 반면 폼의 정보 흐름 추가는 출발, 도착, 흐름명을 입력해야 합니다.

연결점은 TCP·UDP 포트가 아니라 도형의 접속 위치입니다. 연결점 정보가 없는 흐름은 기본적으로 출발 노드 오른쪽과 도착 노드 왼쪽을 사용합니다. 폼에서 끝점 노드를 바꾸면 바뀐 쪽 연결점은 초기화됩니다.

같은 두 노드 사이에 서로 다른 흐름을 여러 개 만들 수 있고, 역방향 흐름과 자기 자신으로 돌아오는 흐름도 허용합니다. 예를 들어 요청과 결과 회신은 독립된 두 흐름으로 기록합니다. 정방향 화살표 하나를 그렸다고 응답 정보까지 표현된 것은 아닙니다. 노드 이름을 수정해도 연결은 ID로 유지됩니다.

자동 배치는 방향 관계를 이용합니다. 서로 순환하는 노드들을 강연결요소(SCC)로 묶고, 묶음 사이의 선행 경로를 기준으로 열을 정합니다. 순환 내부 노드는 같은 열에 놓이며 같은 열에서는 기존 노드 배열 순서에 따라 위에서 아래로 배치됩니다. 그래서 순환이 있다고 배치가 끝나지 않는 방식은 아니지만, 모든 업무 흐름을 가장 보기 좋은 모양으로 바꾸는 것은 아닙니다.

자동 배치를 누르면 기존 수동 위치가 바뀐다는 확인창이 뜹니다. 노드를 추가할 때마다 전체를 다시 배치하지는 않습니다. 폼이나 팔레트 클릭으로 추가한 노드는 첫 열의 빈 위치를 찾고, 드래그 추가는 놓은 위치를 사용합니다.

기본 배치에서 노드 사이의 간격이 좁으면 흐름 라벨이 연결선이나 화살표를 가릴 수 있습니다. 이 글의 그림처럼 노드를 옆으로 옮겨 여유를 확보하고, 흐름 방향이 눈에 보이는지 확인한 뒤 내보내세요. 이후 자동 배치를 다시 실행하면 수동으로 조정한 간격도 바뀝니다.

화살표 경로도 한계가 있습니다. 직교 경로 계산에서 장애물로 고려하는 것은 해당 흐름 양 끝 노드입니다. 다른 노드, 제목 블록, 다른 선과 라벨까지 전역적으로 회피하거나 교차를 최소화하지 않습니다. 병렬·역방향·자기 흐름은 위쪽의 서로 다른 경로를 사용하지만, 주변 내용과 겹치면 수동 배치가 필요합니다. 끝점 노드가 겹치거나 경로를 구할 수 없을 때는 점선 경고 연결과 끝점 노드 위치를 분리하세요 안내가 나옵니다.

검토 경고가 알려 주는 것과 알려 주지 않는 것

InfoFlow의 규칙은 기록 누락과 일부 조합을 확인하는 보조 장치입니다. 모든 위험을 찾아내는 보안 분석기나 ISO 27001 적합성 판정기가 아닙니다.

조건	검토 내용
구성 요소의 이름 또는 담당자가 비어 있음	구성 요소 이름·담당자 미지정
흐름명 또는 데이터 항목이 비어 있음	정보 흐름명·데이터 항목 미지정
분류 또는 보호조치가 `unknown`	정보 분류·전송 보호조치 미지정
양 끝 영역이 모두 입력되어 서로 다르고, 보호조치가 `none`	영역 간 전송 보호조치 확인 필요
분류가 기밀·극비이고, 보호조치가 `none`	중요 정보의 전송 보호조치 확인 필요

영역이 비어 있으면 영역 간 비교 조건은 성립하지 않습니다. 또한 목적·주기·전송방식·보호조치 설명이 비어 있다는 이유만으로 이 모든 항목의 경고가 생성되는 것은 아닙니다. 따라서 “경고 없음”을 “모든 속성이 충분히 작성됨”으로 해석해서도 안 됩니다.

경고가 없을 때 표시되는 문구는 설정된 검토 규칙에서 누락을 찾지 못했습니다입니다. TLS를 선택해 관련 경고가 사라져도 실제 TLS 적용, 적절한 인증, 접근권한, 계약상 전달 범위가 확인된 것은 아닙니다. 경고는 저장을 막지 않으므로, 미완성 작업도 JSON으로 백업하고 후속 검토를 이어갈 수 있습니다.

문서 정보, 여러 장, 변경이력과 실행 취소

상단 문서 정보에서 문서명, 버전, 작성일, 작성자, 검토자를 입력합니다. 이력 추가로 버전·일자·작성자·변경 내용을 기록하고 문서 정보 적용으로 반영합니다. 이것은 작성자가 관리하는 문서 변경이력이지 모든 조작을 자동 수집하는 감사 로그가 아닙니다.

하나의 프로젝트에 여러 장을 둘 수 있습니다. 탭의 이름, 복제, 삭제 버튼과 흐름도 추가를 사용하며 마지막 한 장은 삭제할 수 없습니다. 복제할 때는 노드와 흐름 ID, 흐름의 끝점 참조를 새로 만들어 원본 장과 독립적으로 편집합니다. 다만 문서 정보와 변경이력은 프로젝트 단위로 공유됩니다.

선택한 노드나 흐름은 선택 항목 삭제 또는 캔버스의 Delete로 지울 수 있습니다. 노드를 삭제하면 그 노드에 연결된 흐름도 제거됩니다. 여러 노드의 이동은 드래그가 끝날 때 함께 반영됩니다. 속성 폼은 변경 적용 방식이므로, 편집 중인 값을 반영하기 전에 다른 선택으로 이동하지 않도록 주의해야 합니다.

상단 실행 취소 / 다시 실행과 Ctrl/Cmd+Z, Ctrl/Cmd+Y, Ctrl/Cmd+Shift+Z를 지원합니다. 최근 100개 실행 취소 상태는 현재 세션에서 관리하며 새로고침 후까지 보존되는 장기 이력이 아닙니다. 입력창에 포커스가 있거나 모달이 열려 있을 때는 프로젝트 단축키가 개입하지 않습니다. 텍스트 수정 취소와 도면 작업 취소를 구분하기 위한 동작입니다.

배포용 그림과 편집 원본은 다른 파일이다

내보내기 형식은 용도에 맞추어 선택해야 합니다. 특히 “화면에 보이는 그림”과 “작성한 모든 상세 속성”은 같은 범위가 아닙니다.

형식	출력 범위	적합한 용도와 주의점
JSON	전체 프로젝트	앱에서 다시 여는 편집 원본. 모든 장·속성·좌표·문서 정보·변경이력 보존
PPTX	현재 장 또는 전체 장	편집 가능한 도형·텍스트·방향 선과 노드·흐름 상세 속성표
PNG	현재 장	흰 배경, 2배 픽셀 비율의 래스터 도면. 보고서 삽입용
SVG	현재 장	`foreignObject` 기반 도면. 지원 뷰어가 필요하며 순수 벡터 도형만의 파일이 아님
PDF	전체 장	A3 가로, 장당 한 페이지의 이미지 기반 도면

PPTX는 그림 한 장을 붙이는 방식이 아닙니다. 13.33×7.5인치 슬라이드에 네이티브 도형과 텍스트를 만들고, 꺾인 흐름은 선 구간들로 출력하며 마지막 구간에 화살표를 붙입니다. 다만 PowerPoint에서 개체를 옮겼을 때 앱처럼 경로를 자동 재계산하는 기능까지 전달되는 것은 아닙니다.

각 도면 뒤에는 노드 속성과 흐름 속성 표가 이어집니다. 참조 / 항목 / 값 구조에 N001, F001 같은 짧은 참조번호를 사용하고, 전체 ID와 이름은 별도 값으로 남깁니다. 노드의 설명·좌표부터 흐름의 전체 데이터 항목·목적·주기·보호조치 설명·메모까지 포함합니다. 긴 값은 여러 행과 슬라이드로 나누며, 현재 장만 출력해도 프로젝트 변경이력은 뒤에 포함됩니다.

PPTX는 상세 검토·후편집용이고, JSON은 InfoFlow 복원용입니다. PPTX를 수정한 뒤 앱으로 역수입하는 기능은 없습니다. PNG·SVG·PDF에는 도면에 나타나지 않은 상세 속성 전체가 실리지 않으므로 원본 대체재로 삼으면 안 됩니다. 큰 도면은 출력 크기에 맞춰 축소되므로, 글자가 많다면 장을 나누고 배포 전 결과물을 확인하는 편이 좋습니다.

자동 저장, 백업 복원, 손상 데이터 대응

편집 상태는 브라우저 localStorage의 infoflow-project-v1 키에 자동 저장됩니다. 하지만 자동 저장은 외부 백업이 아닙니다. 브라우저 데이터 삭제나 프로필 변경에 대비해, 중요한 수정 전후에는 JSON을 별도로 보관해야 합니다.

JSON 불러오기는 파일을 파싱하고 구조를 검증한 다음 현재 프로젝트 교체 여부를 묻습니다. app: "infoflow", schema: 1뿐 아니라 ID 중복, 좌표, 흐름 끝점, 활성 장 등을 확인합니다. 다른 앱의 백업은 이 앱에서 만든 백업 파일이 아닙니다로 거절됩니다. 형식이 틀렸다고 내용을 추측해 고치거나 NetGraph·PrivacyFlow 데이터로 자동 변환하지 않습니다. 지원하지 않는 임의 속성도 보존하는 범용 JSON 편집기는 아닙니다.

복원을 취소하거나 검증이 실패하면 현재 프로젝트는 바뀌지 않습니다. 복원에 성공한 뒤에는 같은 세션의 실행 취소로 이전 프로젝트로 돌아갈 수 있지만, 이것을 백업 대신 의존해서는 안 됩니다.

저장 실패는 두 경우를 구분하면 됩니다.

기존 저장 데이터가 손상되거나 지원되지 않는 경우: 복구 화면에서 자동 덮어쓰기를 막습니다. 먼저 원본 문자열 다운로드로 보관하고, 교체해도 되는지 확인한 뒤 새 프로젝트로 시작을 누릅니다. 다운로드한 원본은 조사용 평문이며 정상 JSON 백업과 동일한 형식이라고 가정하면 안 됩니다. 앱이 손상을 자동 수선해 주는 기능은 아닙니다.
저장소 접근 거부나 용량 초과 등으로 저장에 실패한 경우: 자동 저장 실패 — JSON 백업을 저장하세요 배너가 표시됩니다. 현재 편집 상태는 메모리에 남지만 창을 닫으면 잃을 수 있으므로 먼저 JSON으로 내보내야 합니다. 이후 저장이 정상적으로 성공하면 실패 상태가 해제됩니다.

로컬 처리의 의미와 공개 사이트에서의 주의점

InfoFlow는 편집 데이터를 외부 API나 AI 서비스로 전송하지 않습니다. 그렇다고 “어디에 무엇을 적어도 안전하다”는 뜻은 아닙니다. 최초 앱 HTML·JavaScript·스타일 등 정적 자산을 가져오는 데는 네트워크가 필요하며, 설치형 PWA나 오프라인 캐시가 보장되는 제품으로 소개할 수는 없습니다.

로그인, 서버 동기화, 공동 편집, 암호화 저장은 제공하지 않습니다. localStorage와 JSON은 평문이고, 같은 브라우저 프로필의 동일 origin에서 실행되는 다른 스크립트가 저장소에 접근할 수 있습니다. rebugui.github.io/infoflow/와 다른 경로의 Pages 앱은 경로가 달라도 같은 origin을 공유합니다. 앱별 저장 키는 데이터 충돌을 줄이는 장치이지 접근통제 경계가 아닙니다.

공개 사이트에서는 실제 고객 값, 자격증명, 내부 기밀 구성이나 민감한 업무 세부정보를 입력하지 말고 합성 항목명과 예시를 사용하세요. 담당자·메모·보호조치 설명에도 민감한 내용이 들어갈 수 있습니다. JSON뿐 아니라 상세 속성을 포함하는 PPTX도 배포 전에 검토해야 합니다. 조직 자료를 다뤄야 한다면 자체 실행 환경과 브라우저 프로필, 파일 보관·배포 정책까지 조직 기준으로 별도 검토해야 합니다.

구현 구성과 로컬 실행

소스는 React 19, React Flow 12, Zustand 5, Vite 8, TypeScript 6을 사용합니다. React Flow가 캔버스 조작을 담당하고 Zustand가 프로젝트와 UI 상태를 관리합니다. 화면의 노드·흐름 모델은 types.ts, 입력 폼은 Forms.tsx, 검토 규칙은 validate.ts에 나뉘어 있습니다.

배치는 layout.ts, 연결 경로는 flowGeometry.ts에 있습니다. 화면과 PPTX가 경로 계산을 공유하며, 출력 영역은 도형뿐 아니라 흐름 경로·라벨·타이틀·범례를 포함해 계산합니다. 이미지 출력은 별도 장면에서 노드 측정과 폰트 준비를 기다려 캡처합니다. 라이브러리는 PPTX에 PptxGenJS 4, PNG·SVG에 html-to-image 1, PDF에 jsPDF 3을 사용합니다.

로컬에서는 Node.js 22.12 이상을 준비하고 다음과 같이 실행할 수 있습니다. 이미 같은 이름의 작업 폴더가 있다면 별도의 위치에서 시작하세요.

1
2
3
4


git clone https://github.com/rebugui/infoflow.git
cd infoflow
npm ci
npm run dev -- --host 127.0.0.1

터미널이 안내하는 로컬 주소를 브라우저로 엽니다. 정적 배포 산출물이 필요하면 npm run build, 생성 결과를 로컬에서 살펴보려면 npm run preview -- --host 127.0.0.1을 사용할 수 있습니다. 로컬 주소와 공개 Pages는 origin이 다르므로 저장된 프로젝트가 자동으로 따라오지 않습니다. 필요한 작업은 JSON으로 내보내 옮깁니다.

현재 CSV·TSV·Excel 붙여넣기나 .xlsx 통합문서 가져오기는 지원하지 않습니다. 엄격한 DFD 표기법의 연결 제한과 레벨 분해도 강제하지 않으며, 대규모 도면의 전역 자동 정리나 모바일 최적화를 전제로 선택하는 도구도 아닙니다. 공개 소스를 확인할 수 있다는 것과 특정 라이선스의 이용 권한은 별개이므로, 재배포·재사용 전에는 저장소의 라이선스 조건을 별도로 확인해야 합니다.

사용을 시작할 때 기억할 기준과 참고 자료

첫 작업은 간단하게 잡는 것이 좋습니다. 합성 예제로 네 가지 종류를 구분하고, 흐름별 항목을 확인한 뒤, 담당자와 확인되지 않은 값을 표시합니다. 작업 원본은 JSON, 상세 검토 자료는 PPTX, 본문 삽입용 도면은 PNG·SVG·PDF로 나누어 관리하면 출력 형식의 차이 때문에 정보가 빠지는 일을 줄일 수 있습니다.

InfoFlow가 대신하는 것은 업무 사실을 판단하는 일보다 확인한 사실과 아직 확인하지 못한 부분을 같은 구조로 적는 일입니다. 경고를 모두 없애는 것보다 미지정을 정직하게 남기고, 다음 검토자가 무엇을 확인해야 하는지 메모하는 것이 더 중요한 경우가 있습니다.

이 글의 기능 설명은 아래 공개 구현과 합성 템플릿을 기준으로 정리했습니다.

NetGraph: 서브넷부터 그리는 브라우저 네트워크 구성도 편집기

Fri, 02 Oct 2026 11:30:00 +0900

네트워크 구성도를 수정하다 보면 도형보다 먼저 정리해야 할 것이 보입니다. 서버의 소속 대역이 어디인지, VLAN과 CIDR이 맞는지, 링크에 적힌 속도가 무엇인지가 그것입니다. 그림은 보기 좋은데 주소표와 맞지 않거나, 발표용 파일만 남아 다음 변경 때 원본을 다시 만드는 일도 생깁니다.

NetGraph는 대역을 먼저 정의하고, 그 안에 장비를 배치한 뒤 링크를 연결하는 한국어 네트워크 구성도 편집기입니다. 브라우저에서 편집하고, 구성도는 PPTX·PNG·SVG·PDF로 내보내며, 다시 편집할 원본은 JSON으로 보관합니다. 장비를 탐색하거나 실제 네트워크에 설정을 적용하는 도구가 아니라, 사람이 알고 있는 구조를 문서로 정리하는 도구입니다.

어떤 업무에 맞는가

NetGraph의 출발점은 자유로운 그림판이 아니라 대역·장비·링크라는 구조화된 데이터입니다. 사무망과 서버망을 나누고, 각 장비의 주소와 소속을 기록하고, 검토용 문서로 전달하는 작업에 잘 맞습니다. 보안 담당자가 영역별 연결을 설명하거나, 인프라 담당자가 변경 전후 구성을 나란히 관리하거나, 인수인계 자료를 만들 때 활용할 수 있습니다.

반면 스위치에 접속해 설정을 읽거나, 패킷을 수집하거나, SNMP로 자산을 자동 발견하지는 않습니다. 링크의 10G는 사람이 입력한 설명이지 측정된 처리량이 아닙니다. 방화벽 도형을 추가한다고 정책 검토가 끝나는 것도 아닙니다. 문서의 입력 일관성을 돕는 기능과 실제 망의 상태 확인은 별개라는 전제가 중요합니다.

처음에는 실제 사내 자료 대신 아래 합성 예제로 조작 방법을 익히는 편이 안전합니다. 공개 서비스 화면에는 실제 내부 주소 체계, 호스트명, 보안 구성, 계정 정보 같은 기밀을 입력하지 않는 것을 권합니다.

NetGraph·InfoFlow·PrivacyFlow의 선택 기준

세 앱은 비슷한 편집 화면을 사용하지만, 기록하려는 질문이 다릅니다.

앱	중심 질문	기본 구성 단위
NetGraph	어떤 장비가 어느 대역에 속하고 어떻게 연결되는가?	대역, 장비, 링크
InfoFlow	어떤 정보가 어디에서 어디로 이동하는가?	외부 주체·처리·시스템·저장소, 방향이 있는 정보 흐름
PrivacyFlow	개인정보를 어느 단계에서 어떤 목적으로 처리하는가?	수집·이용·보관·제공·위탁·파기 활동과 전달 흐름

주문번호가 외부 배송업체로 전달되는 과정을 설명하려면 InfoFlow의 정보 흐름도 안내가 더 적합합니다. 개인정보 항목과 처리 목적, 보유기간, 위탁업무를 함께 검토하려면 PrivacyFlow의 개인정보 처리 흐름도 안내를 참고하면 됩니다.

NetGraph의 링크는 네트워크 연결을 표현합니다. InfoFlow처럼 데이터 항목·목적·분류를 가진 방향 흐름으로 해석하면 안 됩니다. 세 앱의 JSON도 서로 바꿔 넣는 공용 문서 형식이 아니며, 별도 저장소와 독립적인 데이터 모델을 사용합니다.

대역·장비·링크로 읽는 데이터 모델

**대역(Segment)**에는 이름, VLAN, CIDR, 게이트웨이와 화면상의 위치·크기가 들어갑니다. 대역은 단순한 배경색 상자가 아니라 장비의 소속 대상입니다. VLAN 번호와 IP 대역을 함께 기록할 수 있지만, VLAN이 실제 장비에 생성되어 있는지까지 확인하지는 않습니다.

**장비(Device)**에는 이름, 유형, IP, 호스트명, 모델, 소속 대역, 위치가 들어갑니다. 소속을 지정하지 않은 장비는 미소속 (코어 계층)으로 둘 수 있습니다. 인터넷·방화벽·라우터처럼 여러 영역의 위쪽에 놓을 요소와, 특정 대역 안의 서버·단말을 구분하는 방식입니다.

중요한 구현상의 차이는 대역 내부 장비의 위치가 부모 대역 기준 상대좌표라는 점입니다. 대역을 이동하면 내부 장비도 함께 이동하고, 장비는 부모 범위 안에서 움직입니다. 소속 대역을 없애는 것과 장비를 지우는 것은 다릅니다. 대역을 삭제하면 소속 장비는 화면상의 위치를 유지하며 미소속으로 전환됩니다.

**링크(Link)**는 양 끝의 ID를 참조하고 속도, VLAN 태그 목록, VPN 여부, 이중화 여부를 기록합니다. 장비끼리만 연결하는 것이 아니라 장비와 대역을 직접 연결할 수도 있습니다. 이름 대신 ID로 연결하므로 장비명을 고쳐도 연결 대상을 다시 지정할 필요가 없습니다.

17종 장비와 표현 방식

팔레트에 마련된 유형은 총 17종입니다. 숫자를 강조하기보다는 어떤 표현을 재사용할 수 있는지 살펴보면 좋습니다.

구분	제공 유형
외부 연결	인터넷, 외부클라우드
경계·보안	방화벽, 보안장비(IPS/WAF)
네트워크	라우터, L3 스위치, L2 스위치, 무선 AP
서버·저장	서버, DB, NAS
사용자·주변 장치	PC, 노트북, 프린터, CCTV, IP전화
기타	사용자 정의

유형별로 도형과 색이 정해져 있고, 현재 장에 등장한 유형은 범례에 반영됩니다. 서버·DB·NAS는 원통형, 라우터와 CCTV는 타원형처럼 구분되며, 사용자 정의 장비는 색을 지정할 수 있습니다. 같은 장비 사양 정의를 캔버스와 PPTX 출력이 공유합니다.

보안장비(IPS/WAF)는 보안 제품 목록을 세분화한 자산 카탈로그가 아닙니다. 합성 예제의 DDoS 방어, IPS, WAF 같은 역할은 장비명과 모델 설명으로 구분합니다. 17종은 유형의 개수이지, 예제에 들어가는 장비 인스턴스의 개수가 아닙니다. 같은 유형의 방화벽을 A·B 두 개 배치할 수도 있습니다.

합성 예제로 따라가는 서브넷 우선 작성

그림: security-all-devices.json을 바탕으로 내보낸 합성 예시입니다. 실제 조직의 인프라가 아니며, 권장 보안 아키텍처나 운영 설정을 의미하지 않습니다.

위 예제에는 DMZ, 업무망, 보안관리망과 여러 보안 장비가 들어 있습니다. JSON 파일을 내려받아 JSON 불러오기로 열 수 있지만, 이 동작은 현재 프로젝트를 교체합니다. 먼저 JSON 백업 저장으로 작업을 보관하세요. 예제 JSON 불러오기와 CSV 장비 추가는 동작이 다릅니다.

직접 작성하려면 처음 화면의 빈 캔버스를 선택하고 다음 순서로 진행하면 됩니다. 기존 프로젝트가 있다면 백업 후 새 프로젝트에서 시작합니다.

대역부터 만든다

왼쪽 대역의 새 대역 폼에서 아래 값을 넣고 대역 추가를 누릅니다. 모두 연습용 값입니다.

대역 이름	VLAN	CIDR	게이트웨이
예제 사무망	10	192.168.10.0/24	192.168.10.1
예제 서버망	20	192.168.20.0/24	192.168.20.1

CIDR을 입력하면 네트워크 주소, 가용 범위, 호스트 수가 표시됩니다. 위 /24의 일반 호스트 범위는 .1부터 .254까지지만, 게이트웨이에 쓸 주소를 서버에도 할당하지 않도록 운영 기준은 별도로 정해야 합니다. 계산기가 보여 주는 가용 범위는 조직의 DHCP 예약이나 장비 할당 현황을 알고 계산한 결과가 아닙니다.

처음부터 간단한 뼈대가 필요하면 기본 골격을 선택해도 됩니다. 사무망·서버망 두 대역과 인터넷·방화벽·라우터·L3 스위치 네 장비, 이들을 잇는 다섯 링크로 시작합니다. 이 기본 골격은 앞의 17종 종합 예제와 다른 자료입니다.

장비의 속성과 소속을 입력한다

왼쪽 장비에서 예제 업무 PC를 PC 유형으로 추가하고 IP를 192.168.10.10, 소속을 예제 사무망으로 지정합니다. 이어 예제 업무 서버를 서버 유형, 192.168.20.10, 예제 서버망으로 추가합니다. 호스트명은 demo-pc, demo-app처럼 합성 이름을 사용합니다.

장비 팔레트 · 캔버스로 드래그를 펼쳐 도형을 놓는 방법도 있습니다. 다만 처음 익힐 때는 폼의 소속 대역을 명시하는 방식이 소속을 이해하기 쉽습니다. 이미 만든 장비는 캔버스나 목록에서 선택한 뒤 오른쪽 선택 정보를 수정하고 변경 적용을 누릅니다. 입력 중인 초안과 프로젝트에 적용된 값은 구분해야 합니다.

연결하고 링크의 의미를 적는다

미소속 L3 스위치를 하나 추가하고 캔버스 연결점을 드래그해 각 대역에 연결합니다. 선을 선택하면 속도, VLAN 태그 (쉼표 구분), VPN 터널, 이중화 항목을 편집할 수 있습니다. 예를 들어 속도에 1G, VLAN 태그에 10,20을 넣고 적용합니다.

VPN과 이중화 표시는 연결의 설명입니다. VPN 설정이나 HA 구성이 생성되거나 검증되는 것은 아닙니다. 실제 물리 회선 두 개를 각각 설명해야 하는지, 하나의 논리 링크에 이중화 표시를 할지부터 문서의 관점을 정하는 편이 좋습니다.

배치를 다듬고 문서로 남긴다

여러 장비를 선택해 함께 옮길 수 있고, 드래그가 끝나면 위치가 저장됩니다. 자동 배치는 수동 조정한 위치를 초기화하므로 확인 문구를 읽고 실행합니다. 새 대역은 기존 대역과 미소속 장비를 피해 배치되지만, 이를 모든 선 교차나 라벨 겹침까지 해결하는 자동 도면 설계로 기대해서는 안 됩니다.

마지막으로 문서 정보를 넣고 JSON을 먼저 보관한 뒤 배포용 형식을 선택합니다. “그림을 완성한 뒤 원본은 나중에 저장”하기보다, 구조를 바꾸기 전후마다 JSON을 남기는 습관이 유용합니다.

IP 계산과 경고를 정확하게 해석하기

오른쪽 IP 계산기는 IPv4 네트워크 주소, 브로드캐스트, 마스크, 와일드카드, 가용 호스트 범위와 수, 사설망 여부를 보여 줍니다. 이 대역으로 세그먼트 추가를 누르면 계산한 네트워크를 대역으로 만들 수 있습니다. /31은 호스트 두 개, /32는 한 개로 취급합니다.

장 단위 검토에는 다음 규칙이 포함됩니다.

대역 CIDR과 장비·게이트웨이 IPv4 형식 오류
장비 또는 게이트웨이가 지정 대역 밖에 있는 경우
같은 장의 장비 사이 중복 IPv4
두 대역의 CIDR 중첩과, 중첩 대역 사이의 동일 게이트웨이
/31보다 큰 주소 공간에서 장비가 네트워크·브로드캐스트 주소를 사용하는 경우
일부 말단 장비 유형의 대역 미지정, 링크 양 끝이 같은 셀프 루프

예를 들어 사무망 소속 장비에 192.168.20.10을 적으면 대역 밖 IP 검토 대상이 됩니다. 반면 같은 IP가 서로 다른 탭에 있다는 사실까지 프로젝트 전체를 합쳐 비교하는 것은 아닙니다. VRF나 별도 라우팅 도메인도 모델에 없으므로, 의도적인 주소 재사용은 도면의 범위와 문서 설명을 함께 검토해야 합니다.

IPv6는 계산·검증 대상이 아닙니다. 2001:db8::10/64처럼 접미사가 있는 문자열을 원문으로 보관할 수 있지만 지원 안내가 표시되고 IPv4 검증에서 제외됩니다. 저장된다고 IPv6 주소 계산이나 중복 검사가 지원된다는 뜻은 아닙니다. 또한 경고가 없다고 망 설계, 접근통제, 가용성 또는 보안 적합성이 보장되지는 않습니다.

엑셀 목록은 CSV·TSV와 붙여넣기로 가져오기

상단 CSV 가져오기는 장비 목록을 현재 장에 추가하는 기능입니다. 입력 양식 내려받기로 열 이름을 확인하고, CSV·TSV 파일을 선택하거나 엑셀 셀 범위를 복사해 장비 목록 붙여넣기에 넣습니다. .xlsx 통합문서 업로드 기능은 아닙니다. 셀의 값으로 된 표를 넘기는 방식이며 수식·서식·여러 시트를 해석하지 않습니다.

아래는 그대로 붙여 넣어 볼 수 있는 합성 CSV입니다.

1
2
3


장비명,유형,IP,서브넷마스크,CIDR,호스트명,모델,세그먼트명,VLAN,게이트웨이
예제 웹서버,서버,192.168.20.10,255.255.255.0,,demo-web,Demo Server,예제 서버망,20,192.168.20.1
예제 DB,DB,192.168.20.20/24,,,demo-db,Demo DB,예제 서버망,20,192.168.20.1

IP의 /24 접미사와 255.255.255.0 같은 점선 마스크를 지원합니다. 둘을 함께 넣었다면 일치해야 합니다. 미리보기에서 반영 가능과 제외, 기존·신규 대역 여부를 확인한 다음 반영을 누릅니다. 잘못된 행은 제외되고, 인식하지 못한 장비 유형은 사용자 정의로 처리되므로 미리보기를 건너뛰지 않는 것이 좋습니다.

대역명은 특히 중요합니다. 이름이 있으면 이름으로 기존 대역을 찾고, 이름이 없으면 CIDR로 묶습니다. 새 대역명을 명시하면 기존 대역과 CIDR이 같아도 별도 대역이 생성될 수 있습니다. 서버망과 서버 망처럼 표기가 달라 의도치 않게 분리되지 않도록 가져오기 전에 이름을 맞추세요.

CSV 반영은 기존 장비를 이름으로 찾아 갱신하는 동기화가 아니라 장비 추가입니다. 같은 표를 두 번 반영하면 중복 장비가 생길 수 있습니다. 링크도 자동 생성하지 않으며, 반영 후에는 자동 배치가 적용됩니다. 수동 위치를 세밀하게 잡기 전에 목록을 가져오고, 중복 IP 같은 장 단위 경고는 반영 후 별도로 확인하는 순서가 낫습니다.

문서 정보, 여러 장, 실행 취소는 서로 다른 이력이다

문서 정보에서 문서명, 버전, 작성일, 작성자, 검토자를 입력합니다. 이력 추가로 버전·일자·작성자·변경 내용을 기록하고 문서 정보 적용을 누르면 됩니다. 이것은 사람이 작성하는 문서 변경이력이며, 모든 편집을 자동 기록하는 감사 로그가 아닙니다.

상단 탭의 **＋**는 장을 추가합니다. 더블클릭으로 장 이름과 물리·논리·기타 구분을 바꾸고, 우클릭 메뉴의 구성도 복제로 비교용 장을 만들 수 있습니다. 예를 들어 현재 구성과 개선안을 별도 장으로 관리하면 한 그림에 두 상태를 섞지 않아도 됩니다. 이 구분은 문서의 관점을 표시하는 것이지 물리망과 논리망을 자동 변환하는 기능은 아닙니다.

자동으로 붙는 장 이름과 복사 이름은 충돌을 피하지만, 수동 이름은 중복을 허용합니다. 마지막 한 장은 삭제할 수 없습니다. 장비는 Delete/Backspace 또는 선택 항목 삭제로 삭제할 수 있으므로, 속성을 고치는 것과 개체를 지우는 것을 구분해 조작하세요.

실행 취소는 또 다른 기능입니다. Ctrl/Cmd+Z로 최근 100개 편집을 되돌리고, Ctrl/Cmd+Y 또는 Ctrl/Cmd+Shift+Z로 다시 실행합니다. 여러 장비를 한 번에 드래그한 작업은 한 번에 되돌릴 수 있습니다. 자동 배치, CSV 반영, 문서 정보 변경, 탭 편집과 프로젝트 복원도 대상이며 단순 탭 전환은 이력에 쌓이지 않습니다.

되돌린 결과도 자동 저장됩니다. 하지만 새로고침하면 실행 취소 이력은 사라지고, 실행 취소 후 새 편집을 하면 다시 실행 이력이 지워집니다. 입력칸에서는 브라우저의 텍스트 실행 취소가 작동하고, 대화상자가 열려 있을 때는 프로젝트 단축키를 처리하지 않습니다. 장기 보관은 실행 취소가 아니라 JSON 백업과 문서 변경이력으로 관리해야 합니다.

PPTX는 편집용 도면, JSON은 편집 원본

내보내기 형식은 파일 확장자보다 “받는 사람이 무엇을 해야 하는가”를 기준으로 고르는 것이 좋습니다.

형식	범위·구현	적합한 용도와 주의점
JSON 백업	메타데이터, 변경이력, 전체 장, 대역·장비·링크·위치	NetGraph에서 다시 편집할 원본. 가장 먼저 보관
PPTX	현재 장 또는 전체 장, 네이티브 도형·텍스트·선	PowerPoint에서 도면을 수정하고 발표 자료에 편집·배치
PNG	현재 장 전체, 흰 배경, 2배 픽셀 해상도	문서·게시물 삽입. 개별 장비 속성은 편집할 수 없음
SVG	현재 장 전체, `foreignObject` 포함	지원 브라우저·뷰어에서 표시. 순수 SVG 도형만 있는 형식은 아님
PDF	전체 장, A3 가로, 장당 도면 한 페이지	고정 배포·인쇄. 내부 도면은 이미지 기반

PPTX는 구성도 한 장을 이미지로 붙이는 방식이 아닙니다. 대역과 장비는 도형, 라벨은 텍스트, 연결은 선으로 만들어집니다. 문서 정보와 범례, 마지막 변경이력 표도 포함되고 긴 이력은 다음 슬라이드로 이어집니다.

그러나 NetGraph의 PPTX에는 InfoFlow·PrivacyFlow 방식의 전체 노드·흐름 속성표가 없습니다. 편집 가능한 발표 자료라는 것과 데이터 모델 전체를 다시 불러올 수 있는 원본이라는 것은 다릅니다. PPTX를 NetGraph로 재가져오는 기능도 없으므로 PowerPoint에서 수정한 결과가 JSON에 역으로 반영되지는 않습니다.

화면의 연결선은 부드럽게 꺾인 경로를 사용하지만 PPTX는 양 끝 연결점을 잇는 네이티브 직선으로 내보냅니다. 화면과 픽셀 단위로 같은 선 배치를 기대하기보다, 출력 후 교차와 라벨 겹침을 검토해야 합니다. 폰트와 특수문자의 표현도 운영체제·PowerPoint 환경에 따라 달라질 수 있습니다.

PNG·SVG·PDF는 화면 밖에 별도 장면을 렌더링하므로 현재 확대율이나 화면 이동 위치에 맞춰 잘라 찍는 방식이 아닙니다. 타이틀 블록과 범례를 포함하도록 구성되고 활성 탭을 바꾸지 않습니다. 다만 매우 큰 도면을 한 페이지에 축소하면 글자가 작아집니다. 출력 가독성 때문에라도 업무 단위로 장을 나누는 편이 좋습니다.

로컬 자동 저장의 편리함과 보안 경계

편집 데이터는 브라우저 localStorage의 netgraph-project-v1 키에 자동 저장됩니다. 편집 내용을 GitHub에 커밋하거나 외부 API·AI 서비스에 전송하는 구조는 아닙니다. 다만 최초 접속과 앱 자산 다운로드에는 네트워크가 필요하며, 서비스 워커로 오프라인 실행을 보장하는 PWA라고 소개할 수는 없습니다.

여기서 “로컬”은 “암호화된 개인 금고”를 뜻하지 않습니다. localStorage와 JSON 파일은 평문이고 앱에는 로그인, 권한 관리, 서버 동기화, 공동 편집, 암호화 저장이 없습니다. 같은 브라우저 프로필을 쓰는 사람이나 같은 origin에서 실행되는 스크립트가 데이터에 접근할 가능성을 고려해야 합니다. 같은 rebugui.github.io 아래 앱들의 저장 키를 다르게 쓰는 것은 충돌 방지일 뿐 접근통제 장치가 아닙니다.

브라우저·프로필·origin이 달라지면 저장 공간도 달라집니다. 로컬 실행 주소와 공개 배포 주소 사이를 옮길 때는 JSON 백업과 불러오기를 사용하세요. 사이트 데이터 삭제로 프로젝트가 지워질 수 있고, 저장 용량 제한이나 브라우저 정책에도 영향을 받습니다. NetGraph에는 손상된 로컬 데이터를 차단하고 원문을 내려받게 하는 전용 복구 화면을 전제로 한 보장이 없습니다.

따라서 실제 업무에서는 다음 원칙이 현실적입니다.

공개 origin에서는 합성 자료로 기능을 익힙니다.
기밀 자료를 다뤄야 한다면 조직의 정책을 먼저 확인하고 통제된 실행·보관 환경을 정합니다.
큰 변경 전, 다른 JSON을 불러오기 전, 작업 종료 전에 JSON을 별도 보관합니다.
백업 파일도 민감 문서로 취급하고 공유 대상과 저장 위치를 관리합니다.

로컬에서 실행하더라도 백업 파일과 브라우저 프로필에 대한 보안 책임이 없어지지는 않습니다.

구현 구조와 직접 실행하는 방법

화면은 React 19와 React Flow 12, 프로젝트 상태는 Zustand 5, 빌드 환경은 Vite 8과 TypeScript 6을 사용합니다. PPTX는 PptxGenJS 4, 이미지·SVG 캡처는 html-to-image 1, PDF 생성은 jsPDF 3이 담당합니다. 별도 애플리케이션 서버나 데이터베이스 없이 정적 웹 앱으로 동작합니다.

소스를 읽을 때는 src/types.ts에서 모델을 확인한 다음, deviceTypes.ts의 장비 사양, ip.ts의 IPv4 계산, validate.ts의 장 단위 검토, csvImport.ts의 입력 매핑, useProjectStore.ts의 저장·복제 동작 순으로 보면 흐름이 잡힙니다. 기본 골격도 별도 템플릿 파일이 아니라 프로젝트 스토어에 정의되어 있습니다.

로컬에서 시작하려면 Node.js 20.19 이상 또는 22.12 이상이라는 README 요구사항을 확인합니다. 새 환경에서는 지원되는 Node 22.12 이상 계열을 준비한 뒤 다음 명령을 실행하면 됩니다.

1
2
3
4


git clone https://github.com/rebugui/netgraph.git
cd netgraph
npm ci
npm run dev

터미널에 표시된 로컬 주소를 브라우저로 엽니다. 배포용 파일을 만들고 로컬에서 확인하려면 다음 명령을 사용합니다.

1
2


npm run build
npm run preview

산출물은 dist/이며 정적 웹 서버로 제공해야 합니다. HTML 파일을 더블클릭하는 file:// 실행 방식이 아닙니다. 개발 서버와 미리보기 서버의 포트가 다르면 origin도 달라지므로, 같은 브라우저라고 프로젝트가 자동으로 옮겨 보이지 않을 수 있습니다. 이때도 JSON으로 이동합니다. 소스가 공개되어 있다는 사실만으로 특정 라이선스나 무제한 재사용 권한을 가정하지 말고, 재배포 전 저장소의 라이선스 조건을 별도로 확인하세요.

도입 전에 확인할 질문

IPAM이나 자산 관리 시스템을 대체할 수 있나요?
아닙니다. 주소 할당 승인, 변경 요청, 실제 장비 상태, 다중 사용자 권한 같은 운영 절차를 제공하지 않습니다. 구성도와 최소한의 주소 검토를 돕는 편집기로 보는 것이 정확합니다.

대역 안에 장비를 넣으면 방화벽 정책이나 라우팅도 맞춰지나요?
아닙니다. 대역 소속과 링크는 문서의 표현입니다. 정책, 라우팅 테이블, NAT, 통신 허용 여부를 시뮬레이션하지 않습니다. 보안 장비가 여러 개 등장하는 합성 예제도 완성된 보안 설계가 아닙니다.

한 장에 많은 장비를 넣어도 자동으로 읽기 좋게 정리되나요?
계층 배치와 대역 배치는 지원하지만 모든 선 교차·겹침을 전역 최적화하는 기능은 아닙니다. 특히 캔버스와 PPTX의 선 표현 차이를 고려해 최종 배포 파일을 직접 검토해야 합니다. 모바일에 최적화된 편집기라는 보장도 하지 않습니다.

왜 JSON과 PPTX를 둘 다 남겨야 하나요?
JSON은 다음 편집의 기준 데이터, PPTX는 사람에게 전달하고 수정할 도면입니다. 서로의 역할을 바꾸면 나중에 원본 구조를 복원하기 어렵습니다. JSON 원본 + 검토된 배포본을 한 쌍으로 관리하는 것이 이 도구의 가장 단순한 운영 방식입니다.

소스와 다음 읽을거리

이 글의 기능 설명은 공개된 README와 아래 구현을 기준으로 정리했습니다. 네트워크 설계의 적합성이나 모든 실행 환경의 동작을 보증하는 자료는 아니며, 기능 변경 시에는 최신 소스를 함께 확인하는 것이 좋습니다.

NetGraph로 먼저 장비와 대역의 관계를 정리한 뒤, 같은 업무를 정보 이동 관점에서 보고 싶다면 InfoFlow, 개인정보 처리 단계와 검토 항목까지 기록하려면 PrivacyFlow로 관점을 옮길 수 있습니다. 세 그림을 하나의 복잡한 도면으로 합치기보다, 서로 다른 질문에 답하는 문서로 나눠 관리하는 접근입니다.

PrivacyFlow: 수집부터 파기까지, 개인정보 처리 흐름을 브라우저에서 정리하기

Fri, 02 Oct 2026 11:30:00 +0900

개인정보 처리 현황을 설명할 때 시스템 이름만 나열하면 중요한 질문이 남는다. 어떤 항목을 수집하는가? 어디에서 이용하고 얼마나 보관하는가? 외부 기관으로 넘어가는 흐름은 무엇인가? 보유기간이 끝난 뒤 어떤 활동으로 이어지는가?

PrivacyFlow는 이런 질문을 처리 활동과 방향 있는 전달 흐름으로 정리하는 브라우저 편집기다. 수집·이용·보관·제공·위탁·파기를 나누고, 각 활동의 목적·담당자·항목·법적 근거 등을 기록한다. 도면뿐 아니라 상세 속성도 함께 관리한다는 점이 단순한 상자와 화살표 그리기와 다르다.

다만 실제 시스템을 조사하거나 개인정보를 탐지하는 도구는 아니다. 사용자가 입력한 내용을 시각화하며, 제공·위탁의 법적 성격이나 보유기간의 적정성을 판정하지 않는다. 공개 앱에서는 실제 개인정보 값이나 조직의 비밀 정보를 넣지 말고, 합성 항목명과 가상 처리 활동으로 기능을 살펴보자.

어떤 업무에 맞는 편집기인가

PrivacyFlow는 개인정보 처리 현황을 인터뷰하거나 문서화하는 과정에 적합하다. 개발팀의 회원관리 기능, 운영팀의 보관 위치, 담당자가 확인한 외부 전달 관계를 한 장에서 연결하고, 현황 초안과 검토안을 별도 장으로 관리할 수 있다.

함께 공개한 세 편집기는 질문의 중심이 다르다.

도구	중심 질문	문서화 대상
NetGraph	어떤 장비가 어떤 구간에서 연결되는가?	네트워크 구간·장비·링크
InfoFlow	어떤 정보가 어디로, 어떤 방식으로 이동하는가?	외부 주체·처리·시스템·저장소와 정보 흐름
PrivacyFlow	개인정보가 어떤 단계에서 어떤 목적으로 처리되는가?	처리 단계·활동별 속성·전달 관계

장비와 네트워크 구성이 먼저라면 NetGraph 소개를, 개인정보에 한정하지 않은 업무 정보의 이동과 분류·보호조치를 정리하려면 InfoFlow 소개를 참고하면 된다. 세 앱은 독립 프로젝트이며, 서로의 JSON을 변환해 주거나 편집 상태를 연동하지 않는다.

다섯 가지 종류와 여섯 가지 단계는 다른 축이다

노드의 종류는 “무엇을 표현하는가”, 처리 단계는 “이 위치에서 어떤 처리를 표현하는가”에 해당한다. 두 속성은 독립적으로 선택한다.

노드 종류	내부 값	용도와 도형
정보주체	`subject`	개인정보 처리의 대상이 되는 주체를 표현하는 사각형
처리 활동	`activity`	수집·파기 같은 활동을 표현하는 둥근 사각형
시스템	`system`	처리에 사용하는 시스템을 표현하는 사각형
저장소	`store`	보관 대상을 표현하는 원통형
상대 기관	`recipient`	제공·위탁 관계의 상대를 표현하는 사각형

처리 단계는 collect 수집, use 이용, store 보관, provide 제공, delegate 위탁, destroy 파기의 여섯 가지다. 노드의 색은 단계에 따라 달라지고 단계 이름도 함께 표시한다. 도형과 색만 보고 법적 의미를 추측할 필요가 없도록 텍스트가 병행된다.

종류가 상대 기관이라고 해서 자동으로 제공이 되는 것은 아니다. 같은 종류에 제공 또는 위탁 단계를 사용자가 명시적으로 선택한다. 기관 이름에 “배송”, “상담”, “수탁”이 포함되는지를 분석해 단계를 추정하지 않는다. 단계의 선택 자체도 법적 판정은 아니다. 실제 처리 목적과 관계를 조직이 검토한 뒤 그 결과를 기록해야 한다.

또한 한 시스템이 여러 단계에 등장할 수 있다. 같은 회원관리 시스템이 이용과 보관에 관여한다면 노드를 각각 만들고 시스템명에 같은 이름을 적을 수 있다. 이 노드들은 서로 다른 ID를 가진 독립 항목이다. 하나의 자산 레코드를 여러 화면에서 공유하는 모델이 아니므로, 한쪽의 속성을 바꿔도 다른 노드가 함께 수정되지는 않는다.

노드 속성: 공통 정보와 단계별 정보

노드의 필수 항목은 이름·종류·처리 단계다. 나머지는 미완성 상태로 저장하고 검토 목록에서 보완할 수 있다. 근거를 임의로 채우기보다 미확인 상태를 남기는 구조다.

공통 속성은 주체 유형, 개인정보 항목명, 담당자, 시스템명, 처리 목적, 법적 근거, 민감정보·고유식별정보 포함 여부, 보호조치, 메모다. 주체 유형과 항목명은 줄바꿈 또는 쉼표로 나누며 앞뒤 공백과 빈 항목은 정리된다.

항목명에는 이름, 주소, 회원번호처럼 필드 이름만 적는다. 캔버스에는 이름·단계·담당자와 항목명 앞 세 개가 표시되며, 전체 항목은 선택 속성에 보존된다.

처리 단계	추가로 표시하는 속성
보관	보유기간, 보관위치
제공	상대 기관, 목적지 국가
위탁	상대 기관, 목적지 국가, 위탁업무
파기	파기방법

법적 근거와 보유기간은 자유 텍스트다. 법 조항 검색, 법정기간 추천, 동의 필요 여부 계산은 하지 않는다. 목적지 국가를 쓴다고 국외 이전 요건이 충족되는 것도 아니다. 해당 조직과 처리 상황에 맞는 별도 검토가 필요하다.

민감정보와 고유식별정보는 미지정 / 예 / 아니오의 세 상태다. 내부적으로 unknown / yes / no를 사용한다. 미지정은 아니오가 아니다. 확인하지 못한 항목을 자동으로 “포함하지 않음”으로 바꾸지 않는다는 뜻이다. 이 선택 역시 입력된 항목명을 분석한 자동 분류 결과가 아니라 작성자의 기록이다.

단계가 바뀌어도 이전 입력값은 남는다

보관으로 작성한 노드를 이용으로 바꾸면 보유기간과 보관위치는 현재 단계의 주요 입력 영역에서 빠진다. 하지만 값까지 지우지는 않는다. 값이 있는 비적용 필드는 접힌 이전 단계의 보존 값 영역에 남고, 필요하면 펼쳐 확인하거나 편집할 수 있다.

이 동작은 검토 도중 단계를 잘못 바꾸거나 모델링 방식을 수정했을 때 입력을 잃지 않도록 한다. 보관으로 되돌리면 기존 보유기간과 보관위치를 다시 사용할 수 있다. JSON에도 남고, PPTX에서는 현재 단계 비적용 — 보존 값이라는 표시 아래 구분된다. 비적용 필드가 비어 있다는 이유로 현재 단계의 경고를 추가하지는 않는다.

단계를 바꾼 뒤에는 보존 영역도 확인하자. 노드를 다른 활동으로 재사용했다면 불필요한 이전 값을 직접 정리해야 한다. 숨겨짐은 삭제가 아니다.

기본 합성 예제: 일곱 노드와 여섯 흐름

첫 화면의 합성 예제를 선택하면 문서명은 개인정보 처리 흐름도 — 합성 예제, 장 이름은 흐름도 1로 시작한다. 기본 구성은 다음 일곱 노드다.

이름	종류	단계
정보주체	정보주체	수집
회원정보 수집	처리 활동	수집
회원관리	시스템	이용
회원DB	저장소	보관
보유기간 종료 파기	처리 활동	파기
배송사	상대 기관	제공
고객상담 수탁업체	상대 기관	위탁

주 경로는 정보주체 → 회원정보 수집 → 회원관리 → 회원DB → 보유기간 종료 파기다. 여기에 회원관리에서 배송사로, 회원관리에서 고객상담 수탁업체로 향하는 두 분기가 추가된다. 흐름명도 아래와 같이 정해져 있다.

정보주체 → 회원정보 수집: 회원정보 수집
회원정보 수집 → 회원관리: 회원정보 등록
회원관리 → 회원DB: 회원정보 보관
회원DB → 보유기간 종료 파기: 파기 대상 전달
회원관리 → 배송사: 배송정보 제공
회원관리 → 고객상담 수탁업체: 고객상담 위탁

기본 합성 예제의 일곱 노드·여섯 흐름과 속성·연결 관계는 유지하고, 가독성을 위해 위치만 수동 조정한 도면이다. 기본 자동 배치 결과가 아니며, 실제 조직의 처리 현황이나 법적 관계를 나타내지 않는다.

예제의 주체 유형은 회원, 항목명은 이름, 주소, 회원번호, 담당자는 가상 운영팀이다. 상대 기관에는 가상 배송사, 가상 고객상담사를 사용한다. 노드와 흐름의 메모에는 합성 예시 — 실제 운영 설정이 아닙니다가 기록된다.

법적 근거와 보관 단계의 보유기간은 예시 — 조직별 검토 필요다. 보관위치와 파기방법 역시 조직별 검토가 필요한 예시다. 특정 기간이나 근거를 권장하지 않는다. 특히 예제에서 배송사를 제공, 상담업체를 위탁으로 표현한 것은 두 분기를 보여 주기 위한 합성 설정이다. 실제 배송·상담 업무가 항상 그 구분에 해당한다는 설명으로 읽으면 안 된다.

각 흐름의 전송 보호조치는 미지정에서 시작한다. 화면을 깔끔하게 만들려고 TLS를 자동으로 채우지 않으므로 합성 예제에도 전송 보호조치 검토 안내가 나타날 수 있다.

합성 예제로 따라 하는 편집 순서

기본 예제를 복제한 장에서 실제 운영 정보 없이 연습해 보자.

합성 예제를 연 뒤 상단의 문서 정보에서 문서명을 가상 회원서비스 처리 검토로 바꾼다. 작성자·검토자에는 가상 역할명을 쓰고 문서 정보 적용을 누른다.
현재 장 복제를 누르고 이름 변경으로 복제한 장을 합성 검토안이라고 정한다. 복제본의 노드와 흐름은 새 ID를 받으므로 원본 장의 항목과 독립적으로 편집된다.
회원DB를 선택한다. 우측 선택 속성에서 보유기간과 보관위치를 읽고 조직별 확인이 필요하다는 메모를 보완한 뒤 변경 적용을 누른다. 입력 중인 초안과 적용된 값은 구분된다.
고객상담 수탁업체를 선택해 처리 단계가 위탁인지, 상대 기관과 위탁업무가 무엇인지 확인한다. 연습으로 위탁업무를 비우고 적용하면 관련 검토 안내를 볼 수 있다. 다시 가상 회원 문의 상담을 적어 적용한다.
좌측 전달 흐름에서 고객상담 위탁을 선택한다. 출발·도착, 항목명, 전달 방식·주기, 전송 보호조치를 기록한다. 예를 들어 전달 방식에 합성 API 예시, 보호조치에 기타를 선택했다면 보호조치 설명에도 합성 설정이라는 설명을 남긴다. 입력은 구현된 보안 기능의 증명이 아니다.
새로운 활동이 필요하면 좌측 처리 활동의 팔레트 처리 단계부터 선택한다. 이후 종류 버튼을 누르거나 캔버스로 끌어 놓는다. 아래 새 처리 활동 폼에서는 이름·종류·처리 단계를 지정해 추가할 수도 있다.
마지막으로 검토 필요사항에서 항목을 눌러 해당 노드나 흐름을 확인하고, JSON 백업 저장으로 편집 원본을 내려받는다.

전달 흐름과 배치의 의미

전달 흐름에는 출발·도착 노드, 흐름명, 개인정보 항목명, 전달 방식, 전달 주기, 전송 보호조치와 설명, 메모가 있다. 폼으로 만들 때는 출발·도착·흐름명이 필요하다. 캔버스의 연결점을 드래그하면 이름 없는 초안 흐름이 만들어지므로, 이후 속성을 보완해야 한다.

화살표는 언제나 출발에서 도착으로 향한다. 반대 방향도 필요하다면 별도의 흐름을 추가한다. 같은 두 노드 사이의 여러 흐름, 역방향 흐름, 자기 자신으로 돌아오는 흐름도 표현할 수 있다. 한 화살표에 서로 다른 목적의 전달을 모두 몰아넣기보다 의미가 다르면 나누어 적는 편이 낫다.

자동 배치는 수집·이용·보관·제공·위탁·파기를 여섯 열로 정렬한다. 실행 전 수동 위치가 바뀐다는 확인을 받는다. 이 열 순서는 문서 정리 규칙이지, 모든 데이터가 제공을 거쳐 위탁으로 가야 한다는 뜻이 아니다. 기본 예제의 두 외부 전달도 서로 연결된 순서가 아니라 독립 분기다. 새 노드 하나를 추가했다고 기존 노드 전체를 다시 배치하지는 않는다.

경로 계산은 연결 양 끝 노드를 중심으로 선을 우회한다. 다른 노드·제목·라벨까지 모두 장애물로 처리하거나 전체 선 교차를 최소화하지는 않는다. 복잡한 장에서는 수동으로 간격을 조정해야 한다. 끝점이 겹치는 등 정상 경로를 만들기 어려우면 연결을 삭제하지 않고 점선과 끝점 노드 위치를 분리하세요 안내를 표시한다.

검토 목록은 체크리스트이지 준법 판정이 아니다

우측 검토 필요사항은 입력 누락과 일부 조합을 확인한다. 기본 규칙을 알아두면 경고를 정확하게 읽을 수 있다.

대상	확인하는 내용
모든 노드	이름 누락
정보주체·상대 기관을 제외한 노드	담당자, 처리목적, 개인정보 항목, 법적근거 누락
보관 단계	보유기간, 보관위치 누락
제공·위탁 단계	상대기관 누락
위탁 단계	위탁업무 누락
파기 단계	파기방법 누락
민감정보 또는 고유식별정보가 예인 노드	보호조치 미기재
모든 전달 흐름	흐름명, 개인정보 항목 누락
항목이 있는 전달 흐름	전송 보호조치가 없음 또는 미지정
보호조치가 기타인 흐름	보호조치 설명 누락

경고는 저장을 막지 않는다. 조사 중인 초안을 계속 보관하면서 빠진 정보를 찾아갈 수 있다. 반대로 아무 문장이나 채웠다고 그 내용의 타당성을 검증해 주지는 않는다. 법적 근거에 부정확한 설명을 적거나 실제 적용되지 않은 보호조치를 선택해도 앱은 외부 자료나 시스템 설정과 대조하지 않는다.

경고가 없을 때의 문구도 설정된 검토 규칙에서 누락을 찾지 못했습니다다. 법적 적합성, 인증 충족, 안전성 확보를 선언하는 문구가 아니다. 개인정보 스캐너, DLP, 동의 관리 시스템, 법률 자문을 대신하지 않으며, 목적지 국가나 보유기간의 적정성을 평가하는 규칙 엔진도 아니다.

장, 문서 변경이력, 실행 취소는 구분해서 사용하기

장으로 서비스별·업무별 또는 현행·변경안을 나눌 수 있다. 현재 장 복제는 노드·흐름과 연결 참조를 새 ID로 복제하며 이름 중복을 피한다. 마지막 한 장은 삭제할 수 없다.

문서 정보에서는 문서명, 버전, 작성일, 작성자, 검토자를 관리한다. 이력 추가로 변경 내용도 남길 수 있다. 이것은 사용자가 작성하는 문서 변경이력이며 모든 클릭을 자동으로 기록하는 감사 로그가 아니다. 이름을 적었다고 검토자의 승인이나 전자서명이 성립하는 것도 아니다.

실행 취소 / 다시 실행은 최근 100개까지 관리한다. Ctrl/Cmd+Z로 취소하고 Ctrl/Cmd+Y 또는 Ctrl/Cmd+Shift+Z로 다시 실행한다. 이력은 현재 세션 전용이므로 새로고침하면 초기화된다. 입력창에서는 텍스트 실행 취소가 우선하고, 모달에서는 프로젝트 단축키가 차단된다.

노드 삭제 시 연결된 흐름도 함께 제거된다. 실수는 즉시 실행 취소하고, 큰 변경 전에는 JSON을 저장하자. 실행 취소는 장기 백업이 아니다.

출력 형식: 도면과 상세 원본을 나누어 선택하기

PrivacyFlow의 출력에서 가장 중요한 구분은 화면에 보이는 도면과 노드·흐름의 전체 속성이다.

형식	범위	용도와 주의점
PPTX	현재 장 또는 전체 장	편집 가능한 네이티브 도형·텍스트·화살표, 노드·흐름 속성표, 문서 변경이력
PNG	현재 장	흰 배경 2배 해상도 도면 이미지
SVG	현재 장	`foreignObject` 기반 도면, 사용하는 뷰어의 지원 여부 확인 필요
PDF	전체 장	A3 가로, 장당 도면 한 페이지인 이미지 기반 문서
JSON	전체 프로젝트	상세 속성·좌표·장·문서 정보·변경이력을 포함하는 재편집용 백업

PPTX는 각 장의 도면 뒤에 전체 노드·흐름 속성표를 붙인다. N001, F001 같은 참조와 별도 행의 전체 ID를 사용하고, 긴 값은 행·페이지로 나눈다. 이전 단계 보존 값도 구분한다. 현재 장만 출력해도 프로젝트 변경이력은 포함된다.

PNG·SVG·PDF는 전체 속성 보존본이 아니다. 도면에서 생략된 항목은 포함하지 않는다. PPTX 재가져오기도 지원하지 않으므로 상세 보고용 PPTX와 복원용 JSON은 서로 대체재가 아니다.

자동 저장, JSON 복원, 손상 데이터 복구

프로젝트는 localStorage의 privacyflow-project-v1 키에 자동 저장된다. 다른 브라우저나 기기로 동기화되지 않으며 브라우저 데이터 삭제나 저장 제한으로 사라질 수 있다.

JSON 불러오기는 파일을 읽은 뒤 앱 식별자, 스키마, 필수 구조, ID 충돌, 좌표와 연결 참조 등을 검사한다. PrivacyFlow의 백업이 아니면 이 앱에서 만든 백업 파일이 아닙니다로 거절한다. 유효한 파일도 현재 프로젝트를 바꾼다는 확인을 받은 뒤 교체한다. 취소나 검증 실패는 현재 프로젝트를 교체하지 않으며, 성공한 복원은 현재 세션에서 실행 취소로 이전 상태로 돌아갈 수 있다.

자동 저장 데이터가 손상되었거나 읽을 수 없는 버전이면 복구 화면으로 들어간다. 원문을 곧바로 덮어쓰지 않고 원본 문자열 다운로드를 제공한다. 새 프로젝트로 시작은 기존 데이터를 버리겠다는 확인 후 진행된다. 여기서 받은 파일은 손상 원문을 보존하는 자료이지 자동으로 수리된 JSON 백업이 아니다.

저장 접근이 거부되거나 용량 문제로 쓰기에 실패하면 자동 저장 실패 — JSON 백업을 저장하세요 배너가 나타난다. 편집 상태는 메모리에 남아 있으므로 창을 닫기 전에 JSON을 내려받아야 한다. 자동 저장, 손상 원문 보존, 별도 JSON 백업은 각각 다른 안전장치다.

평문 저장의 경계와 로컬 실행

편집 데이터를 외부 API나 AI 서비스에 보내지 않는 것과 데이터가 암호화되어 안전하게 격리되는 것은 다른 이야기다. localStorage와 JSON은 평문이며 로그인·암호화 저장·서버 동기화·실시간 협업을 제공하지 않는다. 최초 웹 페이지와 자산을 받으려면 네트워크도 필요하다. 설치형 PWA나 오프라인 캐시를 보장하는 앱으로 소개할 수는 없다.

rebugui.github.io의 앱들은 경로가 달라도 같은 origin이다. 저장 키 분리는 충돌 방지일 뿐 같은 브라우저 프로필·origin의 다른 스크립트를 막는 접근통제가 아니다. 공개 앱에는 실제 개인정보나 기밀 현황을 넣지 말고, 내려받은 JSON·PPTX·복구 원문도 안전하게 보관하자.

자체 환경에서 코드를 살펴보려면 Node.js 22.12 이상 환경을 준비하고 다음과 같이 실행할 수 있다. 저장소를 둘 디렉터리에서 시작한다.

1
2
3
4


git clone https://github.com/rebugui/privacyflow.git
cd privacyflow
npm ci
npm run dev -- --host 127.0.0.1

터미널에 출력되는 로컬 주소를 연다. 특정 포트가 비어 있다고 가정하지 않고 실제 출력 주소를 사용하면 된다. 로컬 실행이 필요하더라도 조직의 단말·백업·소프트웨어 사용 정책을 함께 확인해야 하며, 로컬 실행만으로 JSON이 암호화되는 것은 아니다.

구현은 React 19, React Flow 12, Zustand 5, Vite 8, TypeScript 6 기반이다. React Flow는 캔버스, Zustand는 상태·영속화를 맡는다. PptxGenJS 4는 도형·속성표, html-to-image는 도면 캡처, jsPDF 3은 PDF를 담당한다. 세 앱은 독립 실행되며 공유 런타임이 없다.

도입 전에 확인할 한계와 구현 참고자료

엑셀 목록을 그대로 가져올 수 있을까? 현재 PrivacyFlow는 CSV·TSV·엑셀 붙여넣기나 .xlsx 통합문서 업로드를 지원하지 않는다. 가져오기는 해당 앱의 JSON 형식이다. NetGraph·InfoFlow의 JSON이나 기존 별도 HTML 도구의 백업을 자동 변환하지도 않는다.

도면을 완성하면 개인정보 처리방침이나 법정 문서가 완성될까? 아니다. 처리방침·계약·동의문·법적 근거의 타당성은 별도로 검토해야 한다. 도면의 제공·위탁 단계는 작성자가 기록한 분류이며, 시스템이 승인한 법적 결론이 아니다.

복잡한 조직 전체를 한 장에 넣어도 자동으로 읽기 좋게 정리될까? 단계별 배치는 가능하지만 모든 교차와 라벨 겹침을 해결하지 않는다. 업무 단위로 장을 나누고 수동으로 조정하는 접근이 현실적이다. 모바일 최적화나 무제한 규모의 편집 성능도 전제로 삼지 않는 편이 좋다.

소스 공개는 자유로운 재배포·수정 권한과 같은 뜻이 아니다. 별도 사용·배포 전 저장소의 라이선스 제공 여부와 조건을 확인해야 한다.

다음은 법률 해석이 아니라 앱의 저장·검토·출력 동작을 확인할 구현 자료다.

목표는 경고 숫자 0이 아니라 항목이 어떤 활동에서 어떻게 이어지는지 설명하고, 미확인 부분을 다음 검토 과제로 남기는 것이다. 합성 예제로 익힌 뒤 조직이 승인한 환경과 자료 관리 방식 안에서 문서화 절차를 설계하자.