YourERD 사용자 매뉴얼

1. 화면 구성

화면은 크게 3개 영역으로 나뉩니다. 엔티티·관계선·메모의 상세 편집은 화면 한쪽에 상시 고정된 패널이 아니라, 필요할 때 여는 편집 모달로 이루어집니다(→ 4.2·6.3·7.2).

┌─────────────────────────────────────────────────────────────┐
│  ① 상단 바 (YourERD · 실행취소/다시실행 · 저장 · 계정)         │
├──────────┬──────────────────────────────────────────────────┤
│          │                                                  │
│ ② 좌측    │              ③ 캔버스 (풀폭)                       │
│  사이드바  │       (엔티티·관계선 배치 + 편집 모달 트리거)          │
│          │           ┌────────┐ ◀ 줌 툴바                    │
└──────────┴──────────────────────────────────────────────────┘

2. 상단 바 (Top Nav)

3. 좌측 사이드바

• Add Entity — 캔버스에 새 엔티티(테이블)를 추가합니다.
• 내 다이어그램 (로그인 시에만 표시) — 내 계정에 저장된 다이어그램 목록. 항목 클릭으로 전환, ＋로 새 다이어그램, 항목 호버 시 이름 변경(✎)·복제(⧉)·삭제(🗑). 복제는 이름을 입력(기본값 "원본 이름 사본")하면 현재 캔버스는 그대로 두고 동일한 내용의 새 다이어그램을 목록에 추가합니다.
• Entity List — 현재 다이어그램의 엔티티 목록. 클릭하면 해당 엔티티가 캔버스에서 선택(하이라이트)됩니다. 색상·논리명(한글)이 함께 표시됩니다.
• 샘플로 시작 (캔버스가 비어 있을 때만 표시) — 쇼핑몰 주문·블로그·인사관리(조직도) 3종의 예제 다이어그램을 클릭 한 번으로 캔버스에 불러옵니다. 처음 편집기를 여는 비로그인 방문자에게는 쇼핑몰 주문 예제가 자동으로 한 번 먼저 로드됩니다(이후에는 자동으로 다시 뜨지 않으며, 이 목록에서 언제든 수동으로 다시 불러올 수 있습니다). 예제는 저장·자동저장을 유발하지 않는 미리보기 상태이며, 캔버스 위쪽 "예제: 《이름》" 배너의 새로 시작하기로 빈 캔버스로 돌아갈 수 있습니다. 실제로 고치기 시작하면 배너가 사라지고 자연스럽게 내 작업물이 됩니다.
• 접기/펼치기 — 헤더의 패널 접기 버튼(⊟)으로 사이드바를 얇은 막대로 접어 캔버스를 넓게 볼 수 있습니다.
• 하단 메뉴 — MCP 연결(로그인 후 개인 토큰을 발급해 Claude Code 연결 명령 한 줄을 복사하는 모달) · MCP 연결 가이드(연결 방법 상세, 새 탭) · Claude 프롬프트 가이드 · Docs(이 매뉴얼). 맨 아래 작은 글씨로 홈 · 소개 · 문의 · 개인정보처리방침 · 이용약관 링크가 있습니다.

4. 엔티티(테이블) 작성

4.1 엔티티 추가

좌측 Add Entity 버튼을 누르면 캔버스에 새 엔티티가 생깁니다.

4.2 엔티티 선택·미리보기·편집

엔티티 헤더에는 ⓘ (info) 아이콘이 있습니다.

• 클릭 — 엔티티 본문(물리명, 논리명, 설명, 색상, 컬럼)을 편집하는 모달을 엽니다.
• 마우스 올리기(호버) — 클릭 없이 훑어볼 수 있는 읽기전용 미리보기가 뜹니다. 설명(Description)과 UNIQUE 여부처럼 노드 본문에는 표시되지 않는 정보까지 한 번에 보여줍니다.
• 노드 더블클릭 빠른 편집 — 캔버스 상의 엔티티 물리명·논리명(한글명)이나 컬럼 속성명·한글명·데이터 타입을 더블클릭하면 모달을 열지 않고 캔버스 상에서 바로 수정할 수 있습니다(→ 5.1).
• 엔티티 본문(헤더 제외)을 클릭하면 선택(하이라이트)만 되며, 모달은 열리지 않습니다. 또는 우클릭 → 편집으로도 같은 모달을 열 수 있습니다(→ 4.6).

모달에서 편집 가능한 항목:

4.3 엔티티 삭제

편집 모달 헤더의 🗑(삭제) 버튼을 누르거나, 엔티티를 우클릭 → 삭제하거나, 엔티티를 선택한 상태에서 Delete 키를 누르면 확인 후 삭제됩니다. 연결된 관계선과, 다른 엔티티에 자동 생성됐던 FK 컬럼도 함께 정리됩니다.

4.5 엔티티 접기 / 펼치기

엔티티 헤더 우측의 접기 아이콘을 누르면 컬럼 목록이 감춰지고 헤더만 남습니다. 작은 노트북처럼 세로 공간이 부족할 때, 지금 보는 테이블 2~3개만 펼쳐 두고 나머지는 접으면 전체 구조와 상세를 한 화면에서 함께 볼 수 있습니다.

• 접힌 엔티티에는 컬럼 수 배지가 표시되어 규모를 알 수 있습니다.
• 접혀 있어도 관계선 연결·선택·삭제·ⓘ 편집 모달은 그대로 동작합니다.
• 줌 툴바의 모두 접기 / 모두 펼치기 버튼으로 한 번에 전환할 수 있습니다. 모두 접은 뒤 자동 정렬(🌳)을 누르면 간격까지 다시 계산되어 훨씬 촘촘해집니다.
• 접힘 상태는 보기 설정이라 다이어그램에 저장되지 않습니다. 다시 열면 모두 펼쳐진 상태로 시작합니다.

4.6 우클릭 컨텍스트 메뉴

엔티티(또는 관계선·메모)를 우클릭하면 편집 · 삭제 두 항목의 메뉴가 뜹니다. info 아이콘·✎ 아이콘 클릭과 동일하게 편집 모달을 열 수 있는 대체 경로이며, 메모처럼 전용 아이콘이 없는 요소는 이 방법이 편집 모달을 여는 유일한 경로입니다.

5. 컬럼(속성) 관리

컬럼 및 엔티티 정보 관리는 캔버스 노드 더블클릭 빠른 편집과 상세 모달 편집 2가지 방식을 모두 지원합니다.

5.1 캔버스 노드 더블클릭 빠른 편집

상세 모달(ⓘ 아이콘)을 열지 않고도 캔버스 상의 엔티티 노드 텍스트를 더블클릭하여 즉시 수정할 수 있습니다.

• 속성명(물리명): 컬럼명을 더블클릭 후 수정 → Enter (예: coupon_id)
• 한글명(논리명): 한글명 텍스트를 더블클릭 후 수정 (한글명이 없을 때는 호버 시 나타나는 +한글명 힌트를 더블클릭하여 새로 입력 가능)
• 데이터 타입 및 크기: 데이터 타입을 더블클릭 후 수정 → Enter (예: VARCHAR(200), DECIMAL(12,2) 등으로 입력하면 타입명과 크기가 정규식으로 자동 분리 파싱되어 반영됩니다)
• 엔티티 이름: 엔티티 헤더의 영문 물리명과 한글 논리명을 동일하게 더블클릭으로 즉시 변경할 수 있습니다.

5.2 상세 모달 편집

엔티티 편집 모달의 Columns 영역에서 상세 속성(PK/FK, NOT NULL, UNIQUE, 순서 등)을 통합 관리합니다(엔티티의 ⓘ 아이콘 클릭으로 모달을 엽니다). Add로 추가하고, 행을 클릭하면 펼쳐져 상세 편집이 가능합니다.

5.5 컬럼 순서 변경

컬럼 행 왼쪽의 드래그 핸들(⠿)을 잡고 위아래로 끌어 순서를 바꿀 수 있습니다. (실행 취소 가능)

5.6 지원 데이터 타입

VARCHAR INT BIGINT BOOLEAN TEXT DATE DATETIME TIMESTAMP DECIMAL FLOAT CHAR SMALLINT TINYINT UUID JSON BLOB

6. 관계(Relationship) 연결

6.1 관계선 만들기

• 엔티티 위에 마우스를 올리면 상·하·좌·우에 연결 핸들이 나타납니다.
• 부모(상위) 엔티티의 핸들에서 자식(하위) 엔티티로 드래그합니다.
• 관계 종류 선택 창이 열리면 원하는 타입을 고릅니다.

6.2 관계 종류

관계를 만들 때 선택 창에서 6가지 프리셋을 빠르게 고를 수 있고(각 타입 옆에 선 모양 미리보기 표시), 만든 뒤에는 편집 모달에서 좌/우 절반을 더 세밀하게 조정할 수 있습니다(→ 6.3).

표기법 (바커 표기법 기반)

• 까마귀발(crow's foot) — 1:다 관계의 "다(M)" 쪽 표시
• 점선(부모쪽) — 선택적 참여, 실선(자식쪽) — 필수 참여
• 식별자 막대(uid bar) — 식별 관계에서 자식 쪽에 추가되는 짧은 세로선

6.3 관계 편집 (좌/우 절반 설정)·삭제

관계선을 클릭하면 선택(하이라이트)되고, 선 중간에 작은 ✎ 편집 아이콘이 나타납니다. 이 아이콘을 클릭하면(또는 관계선을 우클릭 → 편집) 관계 속성 편집 모달이 열립니다. 선에서 부모 쪽 절반·자식 쪽 절반(각 엔티티에 가까운 절반, 화면 위치와 무관)을 독립적으로 설정해 모든 관계를 표현할 수 있습니다. 모달에는 각 절반이 어느 엔티티 쪽인지 이름으로 표시됩니다.

• 부모 쪽 / 자식 쪽 참여 — 각 절반을 실선(필수) 또는 점선(선택)으로. 두 절반의 조합으로 실선+실선·점선+점선·실선+점선·점선+실선이 모두 가능합니다.
• 카디널리티 — 자식 쪽을 1(단일) 또는 다(까마귀발)로 전환합니다.
• 식별 관계 — 켜면 자식 FK가 PK에 포함되고 식별 막대가 표시됩니다. 자식 쪽이 점선(선택)이면 식별 FK가 NULL을 허용할 수 없어 식별 관계로 지정할 수 없습니다(체크 자동 해제·비활성).
• 관계 삭제 — 모달 하단의 관계 삭제 버튼을 누르거나, 관계선을 우클릭 → 삭제하거나, 관계선을 선택한 상태에서 Delete 키를 눌러 제거합니다(자동 생성된 FK 컬럼도 함께 정리).

6.4 관계선 모양 조정 — 끝점 위치·우회 경로

끝점 위치 옮기기 — 관계선은 기본적으로 두 엔티티의 위치에 맞춰 연결 위치가 자동으로 정해집니다. 원하는 위치에 붙이고 싶다면 관계선을 클릭해 선택한 뒤, 양 끝에 나타나는 둥근 핸들을 드래그하세요.

• 끝점은 연결된 같은 엔티티의 테두리 위에서만 움직입니다(다른 엔티티로 옮겨지지 않음). 가장 가까운 면(상·하·좌·우)에 자동으로 달라붙습니다.
• 엔티티를 이동하거나 컬럼을 추가해 크기가 바뀌어도 옮긴 위치가 상대적으로 유지됩니다.
• 핸들을 더블클릭하면 자동 위치로 되돌아갑니다.
• 옮긴 위치는 저장되며 Ctrl+Z로 되돌릴 수 있습니다. (자기 참조 관계는 끝점 드래그를 지원하지 않습니다.)

선을 우회시키기 — 사이에 놓인 엔티티 피하기 — A와 B를 잇는 관계선 위에 C 엔티티가 겹쳐 선이 가려질 때, 관계선을 위/아래로 드래그하면 양쪽 엔티티에서 나온 선이 늘어나면서 드래그한 높이로 돌아가는 직각 경로가 만들어집니다.

• 잡은 구간만 움직입니다. 우회한 선은 세 구간으로 나뉘고 각각 자기 방향으로만 끌립니다 — 가운데 우회선(가로로 도는 구간)은 위/아래로 높이를, 부모 쪽 다리(내려가는 세로 구간)와 자식 쪽 다리(올라가는 세로 구간)는 각각 좌/우로 위치를 옮깁니다(위아래 배치면 역할이 서로 바뀝니다). 한쪽 다리를 옮겨도 반대쪽 다리는 그대로이므로, 장애물을 앞에서 내려갈지 지나쳐서 내려갈지 양쪽 따로 정할 수 있습니다.
• 선 위에 마우스를 올리면 커서(↕ / ↔)가 그 구간을 어느 방향으로 끌 수 있는지 알려줍니다. 아직 우회하지 않은 직선은 전체가 우회선이라 위/아래로 끌면 꺾입니다.
• 축은 끝점이 어느 면(상·하·좌·우)에 붙어 있는지가 아니라 두 엔티티의 배치로 판단하므로, 끝점을 하단 면에 붙여 놓은 좌우 배치에서도 위/아래로 드래그하면 됩니다.
• 선 위 아무 곳에서나 드래그할 수 있고, 선택 시 선 가운데 나타나는 ✎ 아이콘에서 끌어도 됩니다. 움직이지 않고 그냥 클릭하면 지금처럼 편집 모달이 열립니다.
• 우회 정도는 자동 중간점 기준 상대값으로 저장되어, 엔티티를 옮기면 우회 모양도 함께 따라갑니다.
• 선을 더블클릭하거나 관계 편집 모달의 우회 해제(자동 경로로 복귀) 버튼을 누르면 자동 경로로 돌아갑니다. Ctrl+Z로도 되돌릴 수 있습니다. (자기 참조 관계는 우회를 지원하지 않습니다.)

7. 메모(스티키 노트)

캔버스 어느 위치에나 자유로운 형식의 메모를 붙여 설계 의도·주의사항·TODO 등을 기록할 수 있습니다. 메모는 엔티티와 독립적으로 배치되며, 저장/불러오기 시 함께 유지됩니다.

7.1 메모 추가

• 사이드바 버튼 — 좌측 사이드바의 Add Memo 버튼 클릭 (캔버스 중앙에 생성)
• 캔버스 더블클릭 — 빈 캔버스 영역을 더블클릭하면 클릭한 위치에 메모 생성

7.2 메모 편집

• 노드 내 textarea — 메모 위에서 직접 클릭해 바로 텍스트를 입력할 수 있습니다. 별도로 모달을 열지 않아도 되는 가장 빠른 방법입니다.
• 편집 모달 — 메모는 전용 아이콘이 없으므로, 메모를 우클릭 → 편집으로 모달을 엽니다. 텍스트를 더 넓은 영역에서 편집하고, 6가지 배경 색상 중 하나를 선택할 수 있습니다.

7.3 색상 변경

메모 노드 헤더의 색상 점들을 클릭해 바로 변경하거나, 메모를 우클릭 → 편집으로 연 모달의 색상 섹션에서 6가지 색상(노란·초록·파란·빨간·보라·주황) 중 하나를 선택합니다.

7.4 크기 조절

메모를 클릭해 선택하면 테두리에 리사이즈 핸들이 나타납니다. 핸들을 드래그해 크기를 자유롭게 조절할 수 있습니다.

7.5 메모 삭제

• 노드 × 버튼 — 메모 노드 헤더 우측의 × 아이콘 클릭 (확인 없이 즉시 삭제)
• 우클릭 → 삭제 — 확인 후 삭제
• 편집 모달 — 우클릭 → 편집으로 연 모달 하단의 삭제 버튼 → 확인 후 삭제
• 키보드 — 메모를 선택한 상태에서 Delete 키 → 확인 후 삭제

8. 캔버스 조작 (하단 줌 툴바)

8.1 전체화면 모드

전체화면 버튼을 누르면 상단 바·사이드바가 사라지고 캔버스가 화면 전체를 채웁니다. 전체화면 상태에서도 줌 툴바와 미니맵, 편집 모달은 그대로 사용할 수 있습니다. Esc 키 또는 종료 버튼으로 빠져나옵니다.

8.2 미니맵

캔버스 우측 하단의 미니맵으로 전체 구조를 한눈에 보고 빠르게 이동할 수 있습니다. 미니맵 블록 색상은 엔티티 색상과 동일합니다.

8.3 화면 이동·확대

• 이동(팬) — 빈 캔버스를 드래그
• 확대/축소 — 마우스 휠 또는 줌 툴바
• 엔티티 이동 — 엔티티를 드래그

8.4 여러 개 한 번에 선택·이동하기 (다중 선택)

빈 캔버스에서 Shift 키를 누른 채 드래그하면 사각형 선택 박스가 그려지고, 그 안에 완전히 들어온 엔티티·메모가 모두 선택됩니다.

• 선택된 항목 중 하나를 드래그하면 나머지도 상대 위치를 유지한 채 함께 이동합니다.
• 우측에 "N개 선택됨" 패널이 뜨며, 선택 항목 삭제 버튼이나 Delete 키로 한 번에 삭제할 수 있습니다(연결된 관계선·자동 생성 FK 컬럼도 함께 정리).
• 그룹 이동·일괄 삭제 모두 Ctrl+Z 한 번으로 전체가 복원됩니다.
• 선택을 풀려면 빈 캔버스를 클릭하세요.

9. 저장 · 불러오기

9.1 JSON 파일 (로그인 불필요)

• Save — 현재 다이어그램을 .json 파일로 내려받습니다.
• 불러오기(📂) — 저장한 .json 파일을 다시 엽니다.

9.2 클라우드(DB) 저장 (로그인 필요)

• 우측 상단 계정(👤) 버튼으로 아이디·비밀번호 가입/로그인을 합니다.
• 상단 DB 저장 버튼으로 내 계정에 저장합니다.
• 저장한 다이어그램은 좌측 내 다이어그램 목록에서 전환·이름변경·삭제할 수 있습니다.

9.3 공유 및 실시간 함께 보기

DB에 저장한 다이어그램을 링크로 공유해 여러 사람이 실시간으로 함께 볼 수 있습니다.

• 다이어그램을 연 뒤 상단 공유 버튼을 누릅니다. (DB에 저장된 다이어그램만 공유 가능)
• 뷰어 링크 생성 → https://.../d/… 링크가 만들어집니다. 복사(⧉)로 복사해 전달하세요.
• 링크를 받은 사람은 로그인 없이 바로 볼 수 있고, 소유자의 편집이 그 화면에 실시간 반영됩니다.
• 링크로 들어온 사람은 계정 유무와 무관하게 읽기 전용("읽기 전용" 배지). 편집 버튼·단축키는 비활성화되고 나가기로 내 작업으로 돌아갑니다.
• 상단 참여자 아바타로 함께 보는 사람을 확인하고, 공유 모달 목록에서 링크를 폐기(🗑)할 수 있습니다.

10. 내보내기

11. 단축키

12. 빠른 시작 (튜토리얼)

• Add Entity로 엔티티를 추가합니다.
• 엔티티의 ⓘ 아이콘을 클릭해 편집 모달을 열고 물리명/논리명을 입력합니다. (예: user / 사용자)
• Columns → Add로 컬럼을 추가하고, 첫 컬럼은 🔑(PK)로 지정합니다.
• 엔티티를 하나 더 만든 뒤, 부모의 연결 핸들을 자식으로 드래그해 관계를 만듭니다. → FK 자동 생성.
• 줌 툴바의 자동 정렬(🌳)로 보기 좋게 배치합니다.
• SQL 내보내기(🗄)로 DDL을 받거나 Save로 작업 파일을 보관합니다.
• (선택) 로그인 후 DB 저장으로 클라우드에 보관합니다.

13. 자주 묻는 질문

Q. 로그인하지 않아도 쓸 수 있나요?

네. 엔티티/관계 편집, PNG·SQL 내보내기, JSON 파일 저장/불러오기는 로그인 없이 사용할 수 있습니다. 클라우드(DB) 저장만 로그인이 필요합니다.

Q. 관계 타입을 잘못 골랐어요.

관계선을 선택한 뒤 ✎ 아이콘(또는 우클릭 → 편집)으로 관계 속성 모달을 열면 좌/우 절반(실선·점선), 카디널리티(1·다), 식별 여부를 언제든 바꿀 수 있습니다. 식별↔비식별 전환 시 FK 제약(PK 포함 여부·NULL 허용)이 자동 조정됩니다.

Q. 부모 엔티티를 지웠더니 자식의 FK 컬럼은요?

참조가 사라진 자동 생성 FK 컬럼은 함께 정리됩니다. (실행 취소로 복원 가능)

Q. 작업 내용이 자동 저장되나요?

아니요. 명시적으로 Save(JSON) 또는 DB 저장을 눌러야 보관됩니다. 이름 옆 점(●) 표시로 미저장 여부를 확인하세요.

14. 화면 언어 (한국어 / English)

상단 바의 🌐 언어 버튼으로 화면 언어를 한국어(KO)와 영어(EN) 사이에서 전환합니다.

소개 페이지(/)의 상단 EN 링크를 누르면 영문 소개 페이지(/en/)로 이동하고, 거기서 Open editor로 들어가면 편집기도 영어로 열립니다(반대 방향도 동일). 소개·정책 페이지의 편집기 링크는 /app?lang=en처럼 고른 언어를 함께 넘기며, 적용된 뒤에는 주소에서 파라미터가 지워집니다.

• 기본값은 한국어입니다. 브라우저 언어를 자동 감지하지 않고, 직접 고른 값만 사용합니다.
• 선택한 언어는 이 브라우저에 저장되어 새로고침·재방문 후에도 유지됩니다.
• 좌측 사이드바의 세 가이드 페이지(MCP 연결 가이드 · Claude 프롬프트 가이드 · Docs)도 선택한 언어의 판본으로 열립니다. 가이드 페이지 안에서도 목차 하단의 🌐 링크로 서로 오갈 수 있습니다.

언어를 바꿔도 달라지지 않는 것 — 다이어그램에 저장되는 값은 전부 그대로입니다.