Markdown 표 편집 기초

Glif는 Markdown pipe table을 그대로 저장하면서, 에디터 안에서는 셀 중심의 표처럼 다룰 수 있게 한다. 렌더된 표는 원문을 대신하는 별도 데이터베이스가 아니다. 셀 값이나 행·열 순서를 바꾸면 .md 파일의 pipe table이 바뀌고, 저장 후 다른 Markdown 도구에서도 같은 값을 읽을 수 있다.

이 문서에서는 표 편집 실습 파일을 사용한다. 파일을 내려받거나 아래 내용을 새 문서에 붙여 넣는다.

| 작업 | 담당 | 상태 | 예상 시간 |
| :--- | :--- | :---: | ---: |
| 가이드 목차 확정 | 민서 | 완료 | 2 |
| 표 예제 검증 | 준 | 진행 중 | 4 |
| 영상 자막 작성 | 소라 | 대기 | 3 |

위 화면처럼 원문 모드에서는 pipe와 separator token을 직접 확인할 수 있다. 실시간 미리보기로 돌아오면 같은 원문이 아래 셀 표면으로 바뀐다.

1. 표를 활성화하고 셀을 선택한다

1. pipe table의 아무 셀이나 한 번 클릭한다.
2. 활성 셀의 강조 표시가 한 칸에만 나타나는지 확인한다.
3. 방향키를 눌러 인접 셀로 이동한다.
4. 표 경계에서 바깥쪽 방향키를 한 번 더 눌러 문서 커서로 빠져나온다.

셀을 한 번 선택한 상태는 선택 모드다. 이 상태에서 방향키, Home, End, 표 메뉴와 범위 선택을 사용할 수 있다. 셀 안에 편집 caret가 나타난 상태는 편집 모드다. 두 모드를 분리하면 단순 이동이 셀 내용을 뜻하지 않게 덮어쓰는 일을 줄일 수 있다.

아래 실증 화면에서는 민서 셀을 한 번 클릭했다. 파란 선택 테두리는 나타나지만 textarea는 없고, 표의 활성 위치만 본문 R1 C2로 바뀐다.

다음 영상은 세 셀을 차례로 클릭한 뒤 방향키로 선택을 이동한다. 파란 원은 캡처용 포인터 표시이며 문서에는 저장되지 않는다.

2. 셀 내용을 편집한다

선택한 셀에서 다음 중 하나를 사용한다.

• F2: 기존 내용을 보존한 채 편집 모드로 들어간다.
• double click: 포인터로 선택한 셀을 편집한다.
• 문자 입력: 선택 셀을 직접 편집한다.

편집 중 Esc를 누르면 변경을 취소하고 선택 모드로 돌아간다. 선택 모드에서 Esc를 다시 누르면 표 밖의 Markdown 문서로 돌아간다. 이 두 단계 탈출을 기억하면 popup이나 셀 편집에 갇혔다고 느낄 때 빠르게 복구할 수 있다.

F2를 누르면 같은 셀 위에 raw Markdown textarea가 열린다. 다음 화면은 값 민서를 덮어쓰지 않은 채 편집 caret만 활성화한 상태다.

셀 선택 모드에서는 강조, 기울임, inline code, 취소선과 안전한 inline link가 렌더될 수 있다. 편집 모드에서는 결과 대신 raw Markdown text를 고친다.

| 표현 | 원문 |
| :--- | :--- |
| 굵게 | **중요** |
| 코드 | `pnpm run build` |
| 링크 | [가이드](/docs/manual/) |

다음 6.2초 영상은 한 번 클릭으로 선택 모드에 들어가고, F2로 편집 모드로 전환한 뒤 Esc로 돌아오는 과정과 표 더보기 메뉴까지 연속으로 보여 준다.

3. 키보드로 이동하고 행을 추가한다

마지막 body cell에서 Tab을 눌러 새 행이 생겼다면 저장 후 원문을 확인한다. body row가 한 줄 추가되고, header separator는 그대로 남아야 한다.

다음 영상은 실제 표에서 Tab, Shift+Tab, 마지막 셀 Enter를 차례로 실행한다. 이어서 머리글 우클릭 메뉴로 빈 열을 추가하고, 방금 추가한 열 자체를 제거해 헤더와 셀 값이 모두 원래 구조로 돌아오는지 확인한다. 열 개수만 같아도 다른 열을 제거했다면 복구가 아니므로 내용까지 비교해야 한다.

4. 행과 열을 추가·복제·삭제한다

헤더 셀을 우클릭하면 열 작업이, 본문 셀을 우클릭하면 행 작업이 중심이 된 메뉴가 열린다.

• 헤더 셀: 열 앞/뒤 추가, 열 복제, 열 제거
• 본문 셀: 행 위/아래 추가, 행 복제, 행 제거
• hover control: 포인터가 표 경계에 있을 때 빠른 삽입
• 단축키: 열 추가와 마지막 열 제거

삭제 전에는 항상 대상이 헤더 열인지 body 행인지 확인한다. 마지막 데이터 열을 지우는 shortcut은 활성 table을 기준으로 동작하므로, 여러 표가 있는 문서에서는 먼저 대상 셀을 클릭한다.

Windows 기본 키맵에서 Ctrl+Alt+→는 활성 표의 마지막 열을 추가하고, Ctrl+Alt+←는 마지막 열을 제거한다. 이 단축키는 현재 선택한 열의 오른쪽 추가/현재 열 제거가 아니라 마지막 열 기준 작업이다. 중간 열을 넣거나 지울 때는 우클릭 메뉴를 사용한다.

단축키로 마지막 열을 추가하고 되돌린다

1. 대상 표의 아무 셀이나 클릭한다. 파란 테두리와 caret이 보이면 표가 활성화된 상태다.
2. Ctrl+Alt+→를 누른다.
3. 기존 4열 표가 5열이 되고, header와 모든 body 행의 마지막에 빈 셀 하나씩 생겼는지 확인한다.
4. 새 열에 값을 입력하기 전 Ctrl+Alt+←를 누른다.
5. header와 세 body 행이 원래 4열 내용으로 정확히 돌아왔는지 확인한다.

다음 4.1초 영상은 같은 셀을 활성화한 뒤 실제 키 입력으로 4열 → 5열 → 4열을 연속 실행한다. 추가된 열은 header와 모든 body 행에서 비어 있고, 제거 뒤 header와 세 행의 값이 실행 전과 정확히 일치한다.

경계 hover로 열을 삽입한다

1. 먼저 표의 아무 셀이나 클릭해 표를 활성화한다.
2. 두 열 사이의 세로 경계로 포인터를 옮긴다.
3. 파란 삽입선과 + 버튼이 나타나면 위치를 다시 확인한다.
4. +를 클릭한다. 경계의 오른쪽에 빈 열이 생기고 모든 body 행에도 같은 위치의 빈 셀이 추가된다.
5. 헤더와 각 body 행의 열 수가 모두 같은지 확인한다.

빈 열을 잘못 넣었다면 아직 빈 상태일 때 해당 헤더를 우클릭해 열 제거를 선택하는 복구가 가장 명확하다. Ctrl+Z를 쓸 때는 구조 변경 직후 실행하고, 문서 재열기나 editor remount 뒤에는 History 또는 명시적 열 제거를 사용한다.

5. drag handle로 순서를 바꾼다

1. 이동할 행 또는 열의 handle을 잡는다.
2. ghost preview와 삽입 선이 목표 위치에 나타날 때까지 드래그한다.
3. 포인터를 놓고 Markdown 원문의 행·열 순서가 바뀌었는지 확인한다.
4. Ctrl+Z로 한 번 되돌린 뒤 다시 실행해 undo 경계를 확인한다.

병합 overlay나 고정 열 너비가 있는 표에서는 이동이 제한될 수 있다. Glif는 Markdown과 projection profile을 함께 안전하게 갱신할 수 없는 이동을 조용히 적용하지 않는다. 이 경우 선택·병합 가이드에서 병합을 해제하거나 표·차트 설정 경계에서 너비를 auto로 바꾼 뒤 다시 시도한다.

셀 중앙에 포인터를 두면 왼쪽에는 행 handle, 머리글 위에는 열 handle이 함께 나타난다. 셀 경계에서는 삽입 버튼이 우선하므로 handle이 보이지 않으면 포인터를 셀 중앙으로 조금 옮긴다.

행을 옮길 때는 한 셀만 이동하는 것이 아니라 해당 Markdown body row 전체가 이동한다. 아래 화면에서는 표 예제 검증 행을 마지막으로 옮겨 영상 자막 작성이 두 번째가 됐다.

열을 옮길 때는 header, separator token, 모든 body 값이 함께 이동해야 한다. 아래 화면의 담당 열은 마지막으로 이동했으며 민서, 준, 소라 값도 같은 열을 따라갔다.

6. 원문 서식을 정리하고 열 정렬을 저장한다

이 절은 표 원문 서식 정리 실습 파일을 사용한다. 값은 유효하지만 pipe 주변 spacing을 일부러 불균일하게 만든 문서다.

1. 실시간 미리보기로 돌아와 표의 셀 하나를 선택한다.
2. 표 오른쪽 위 더보기를 열고 표 서식 정리를 선택한다.
3. 다시 Markdown 원문 보기를 열어 header, separator, body 행을 비교한다.
4. 셀 값과 열 순서가 유지되고 spacing만 읽기 좋은 폭으로 바뀌었는지 확인한다.

표 서식 정리는 열 수와 separator를 다시 맞춰 사람이 읽기 쉬운 pipe table로 정리한다. 데이터 의미를 바꾸는 명령은 아니지만, 적용 뒤에는 diff를 확인하는 습관이 좋다. 열 정렬 의미는 spacing과 별개로 separator token에 남는다.

정렬을 UI에서 바꾸려면 대상 열의 셀을 선택하고 오른쪽 info zone의 정렬에서 왼쪽·가운데·오른쪽 중 하나를 고른다. 다음 화면은 담당 열을 선택하고 오른쪽 정렬을 누르기 직전이다.

적용 뒤 원문을 열면 두 번째 separator가 ---:로 바뀐다. 상태의 :---:와 시간의 ---:는 그대로 보존된다.

정렬은 Glif 전용 표시 설정이 아니라 Markdown에 남는다. 반면 열 너비와 줄무늬 행은 다음 절의 projection profile에 저장된다.

7. 표 메뉴와 셀 메뉴를 구분한다

표 오른쪽 위 더보기에는 아래 다섯 항목만 있다. 열·행 구조 작업은 이 메뉴가 아니라 header/body 셀 메뉴가 소유한다.

• 표 서식 정리: 현재 pipe table의 원문 spacing과 separator를 정리한다.
• Markdown 복사: pipe table 원문을 clipboard에 복사한다.
• CSV 복사, TSV 복사: 다른 표 도구에 붙여 넣을 구분자 형식으로 복사한다.
• 표 삭제: legacy comment를 포함한 현재 표 범위를 삭제하므로 실행 전 대상 표를 다시 확인한다.

8. 기존 mdtable 문서를 연다

이 절은 구형 표 설정 마이그레이션 실습 파일을 사용한다.

<!-- mdtable: v=1 align=center scope=header+body widths=auto,160 zebra=on -->
| 작업 | 시간 |
| :--- | ---: |
| 초안 | 2 |

Glif는 기존 align, scope, widths, zebra 값을 migration 입력으로 읽을 수 있다. 위 예제를 열면 실제로 header와 body가 가운데 정렬되고, 두 번째 열은 160px, body는 줄무늬 행으로 표시된다.

마이그레이션은 comment를 지우는 별도 버튼이 아니라 새 UI 저장이 성공한 순간 일어난다.

1. 시간 열의 셀을 선택한다.
2. info zone에서 기존 값이 고정 160px, 가운데 정렬, 줄무늬 켜짐으로 읽히는지 확인한다.
3. 고정 열 너비를 240px로 바꾼다.
4. 표가 240px로 넓어지고 줄무늬가 유지되는지 확인한다.
5. 원문 보기에서 mdtable comment가 제거되고 셀 값과 separator token이 남았는지 확인한다.
6. .glif/profiles/v1/ 아래 해당 문서의 .glif.json에서 columnWidths와 zebra를 확인한다.

새 UI에서 표시 설정을 저장하면 활성 저장소는 문서별 projection profile이 되고, 같은 표의 legacy comment는 제거된다. Markdown 표 값과 기본 행·열 구조는 계속 .md 파일에 남는다. comment 자체나 루트의 레거시 projections.json을 새 표 설정의 정본이라고 가정하지 않는다.

다음 10.9초 영상은 불균일한 표 서식 정리, 담당 열의 오른쪽 정렬 token 저장, legacy 160px 설정 읽기와 240px profile 마이그레이션을 연속으로 보여 준다.

실패와 복구

완료 체크

• 셀 선택 모드와 편집 모드를 설명할 수 있다.
• Tab, Shift+Tab, 방향키와 Esc로 표를 이동하고 탈출했다.
• 행과 열을 추가·복제·삭제하고 원문 diff를 확인했다.
• 단축키의 현재 회귀와 헤더 메뉴·hover 삽입 대안을 구분했다.
• 행·열 drag reorder를 실행하고 header·separator·body 값이 함께 이동하는지 확인했다.
• 즉시 undo가 불가능하면 역방향 이동 또는 History로 원문을 복구했다.
• 정렬 token과 profile에 저장되는 표시 설정을 구분했다.
• 표 더보기의 다섯 작업과 header/body 셀 메뉴의 책임을 구분했다.
• legacy 160px·줄무늬 설정을 읽고 문서별 profile로 마이그레이션한 뒤 comment 제거를 확인했다.