FieldWeftBeta
앱 열기

빠른 시작

샘플을 읽고, 첫 번째 데이터 흐름을 그려보세요

설치나 계정 없이 시작할 수 있습니다. 먼저 준비된 주문 처리 그래프의 의미를 읽고, 빈 페이지에서 두 엔터티를 연결해보겠습니다. 약 10분이면 FieldWeft의 핵심 조작을 한 바퀴 경험할 수 있습니다.

주문 이벤트 샘플 열기전체 가이드 보기

이 튜토리얼에서 만드는 흐름

OrderEvent
주문 이벤트
CustomerApi
고객 정보 조회
FulfillmentRequest
최종 전송 데이터

실제 샘플에는 AccountDb와 RiskApi도 포함되어 있습니다. 여기서는 구조를 쉽게 익히기 위해 이벤트·API·최종 요청 세 노드에 먼저 집중합니다.

1. 샘플 그래프 읽기

엣지를 따라가며 값의 출처를 확인합니다

  1. 1

    샘플 페이지를 엽니다

    위의 주문 이벤트 샘플 열기를 누르면 갤러리의 보기 전용 샘플이 열립니다. 왼쪽에는 샘플 목록이, 가운데 캔버스에는 데이터 소스와 최종 요청이 배치되어 있습니다. 노드 위치를 옮겨도 원본이나 브라우저 저장본은 바뀌지 않습니다.

  2. 2

    한 필드의 lineage를 추적합니다

    CustomerApi.email 행에 마우스를 올리면 연결된 흐름이 미리 강조됩니다. 행을 클릭하면 오른쪽 추적 패널이 열립니다. Upstream·Downstream·Paths에서 출처와 도착지, 중간 경로를 확인하고 결과를 클릭해 해당 노드로 이동해보세요.

  3. 3

    실선과 점선을 비교합니다

    대부분의 엣지는 값을 그대로 전달하는 실선입니다. email 매핑의 점선에는 소문자 정규화 라벨이 붙어 있습니다. 값이 가공되었다는 뜻이며, 방금 연 Paths에서도 가공 배지와 같은 변환 설명을 확인할 수 있습니다.

  4. 4

    중첩 필드를 접고 펼칩니다

    items나 customer 같은 object 필드를 클릭해보세요. 하위 필드가 접히고, 연결선은 컨테이너 행으로 모여 전체 흐름을 간결하게 보여줍니다.

  5. 5

    페이지 개요를 확인합니다

    처음에는 접혀 있는 오른쪽 패널을 펼쳐보세요. 샘플 이름과 보기 전용 안내, 엔터티·프로세스·노드 관계·매핑·필드 수가 보이고, 샘플에 설정된 discriminator 기준과 선택값도 함께 확인할 수 있습니다. 패널은 캔버스 위에 열리므로 바깥 영역을 계속 조작할 수 있습니다.

2. 첫 매핑 만들기

빈 페이지에서 필드 두 개를 직접 연결합니다

  1. 1

    편집 화면에서 새 페이지를 만듭니다

    샘플 상단의 이 샘플로 시작을 누르면 원본 기준의 독립 사본이 만들어지고 메인 편집 화면이 열립니다. 빈 그래프에서 연습하려면 왼쪽 페이지 제목 옆의 + 버튼을 누르세요. 페이지 이름은 목록의 연필 버튼이나 오른쪽 개요에서 바꿀 수 있습니다.

  2. 2

    출발 엔터티를 추가합니다

    캔버스 오른쪽 아래 + 엔터티를 누르고 이름을OrderEvent, 종류를 event로 설정합니다.orderId: string과 email: string 필드를 추가하세요. 필요하면 기본으로 접힌 설명 · 태그 · metadata섹션과 각 필드 행의 annotation 버튼에서 문맥을 기록한 뒤 저장합니다.

  3. 3

    도착 엔터티를 추가합니다

    같은 방법으로 FulfillmentRequest 엔터티를 만들고orderId: string과 customerEmail: string필드를 추가합니다. 두 노드를 드래그해 좌우로 떨어뜨려 놓으면 연결하기 편합니다.

  4. 4

    필드 핸들을 연결합니다

    출발 필드 오른쪽의 작은 핸들을 끌어 도착 필드 왼쪽 핸들에 놓습니다.OrderEvent.orderId → FulfillmentRequest.orderId가 실선으로 연결되면 첫 매핑이 완성됩니다.

  5. 5

    가공 매핑을 만듭니다

    우하단 새 엣지에서 가공을 선택한 뒤email → customerEmail을 연결합니다. 생성된 점선을 클릭해 라벨을 소문자 변환으로 적어두세요. 같은 컨텍스트 메뉴에서 설명·태그·metadata도 편집할 수 있습니다.

  6. 6

    두 노드를 경계로 묶습니다

    우하단 + 경계를 누른 뒤 두 엔터티를 경계 안으로 끌어 준비 안내가 나타났을 때 놓습니다. 경계 헤더의 ✏️에서 이름·색상·유형과 설명·태그·metadata를 정하면 도메인이나 시스템 단위를 함께 표현할 수 있습니다.

3. 다음 기능 익히기

실제 시스템에 가까운 구조로 확장합니다

입력 변형

주문 상태처럼 특정 값에 따라 나타나는 필드가 달라질 때 discriminator와 when 조건을 설정합니다.

설정 방법 보기

프로세스 노드

외부 API나 계산 로직처럼 입력을 받아 다른 출력을 만드는 과정을 블랙박스로 표현합니다.

편집 방법 보기

JSON 코드 편집

오른쪽 패널을 펼쳐 개요 아래의 코드 도구로 들어가면 큰 구조를 한 번에 수정하고 적용 전에 참조와 필드 형식을 검증할 수 있습니다. FieldWeft v1은 format: "fieldweft", version: 1과 다섯 배열을 항상 요구합니다. node relation은 node 수준 lineage이고 field mapping을 암시하지 않으며, mapping과 조건은 이름·경로 대신 문서 전역 stable field ID를 참조합니다. 엔터티·프로세스·경계·필드·관계·매핑의 공통 annotation은description·tags·meta를 wrapper 없이 대상에 직접 둡니다.

코드 모델 보기

공유와 백업

현재 페이지의 엔터티·프로세스·node relation·field mapping과 stable ID, 모든 대상의 설명·태그·metadata, 정확한 위치·접힘·경계 멤버십· 크기는 #g=d1.… 공유 URL로 전달할 수 있습니다. 링크는 저장 없이 읽기 전용으로 열립니다. 새 페이지로 가져오기로 독립적인 사본을 편집하며 위키 iframe에서는 새 앱 탭이 열립니다. 처음 상태로는 임시 탐색 상태와 화면 설정을 초기화합니다. 여러 페이지와 페이지 이름을 함께 보관하거나 링크가 너무 길면 백업 파일을 사용합니다. fragment 자체는 웹서버 요청과 일반적인 Referer에 포함되지 않지만 전체 링크는 주소창·히스토리·클립보드와 붙여 넣은 메신저·문서에 남을 수 있습니다.

저장 방식 보기

저장하기 전에 알아둘 점

  • 그래프는 편집할 때마다 현재 브라우저에 자동 저장됩니다.
  • 공유 링크에는 현재 페이지의 전체 그래프—엔터티·프로세스·필드, 노드 관계·필드 매핑, 이름·label·description·tags·meta와 stable ID·위치·경계 정보—가 포함되므로 민감한 값은 넣지 않습니다.
  • 브라우저 데이터를 삭제하기 전에는 전체 페이지를 백업 파일로 내보냅니다.
  • object 컨테이너가 아니라 그 안의 말단 필드를 연결합니다.

이제 직접 흐름을 그려보세요

막히는 부분은 가이드의 기능별 설명에서 더 자세히 확인할 수 있습니다.

앱에서 시작하기