시리즈 3편: 드래그 앤 드롭으로 완성하는
프로페셔널 매뉴얼
캡처 익스텐션으로 조준하고 기록한 스텝을 강력한 에디터(Workspace) 창에서 순서를 드래그 앤 드롭으로 재정렬하고 중복 요소를 복제/삭제하여 완벽한 배포용 매뉴얼(SOP)을 출력하는 최종 단계를 마스터합니다.
개요
멋지게 캡처한 가이드 스텝들도 조각조각 흩어져 있으면 매뉴얼로서의 가치를 가지기 힘듭니다. Quitboarding의 **Workspace 에디터**는 포획 단계에서 수집한 메타데이터와 이미지 자산을 한데 모아 한 페이지짜리 완성형 문서로 조립 및 출력하는 가이드북의 공장 역할을 합니다.
💡 이 문서에서 다루는 내용
- 에디터 아키텍처 — 데이터가 독립된 샌드박스로 적재 및 렌더링되는 구조
- 드래그 앤 드롭 — 인덱스를 시각적으로 연동하며 스왑하는 정렬 물리 연산
- 스마트 복사/직렬화 — Ctrl + C 와 Ctrl + V 로 스냅샷 구조 복제
- 다중 출판 — PDF, MDX, Live Web 링크로 공유 배포하는 법
1Workspace 에디터 설계 아키텍처
1.1 단일 소스 아키텍처 (Single Source of Truth)
Quitboarding 에디터는 익스텐션의 주입형 오버레이가 아닌, **독립된 샌드박스 웹 애플리케이션 화면**으로 구동됩니다. 캡처된 모든 데이터(스크린샷, DOM 메타데이터, 사용자 코멘트)는 하나의 통일된 JSON 구조의 `SOP Object`로 메모리에 적재되며, 에디터 내에서 발생하는 모든 상호작용(순서 변경, 삭제, 텍스트 편집)은 이 객체를 가공하는 절차를 거칩니다.
1.2 노드 클로닝 및 보존 (Node Cloning)
캡처 단계에서 주입된 요소의 계층(Tree) 구조, ARIA 속성, 계산된 스타일(Computed Styles)은 스냅샷으로 기록되어 있습니다. 에디터는 본 기능의 속성들을 바탕으로 사용자가 원본 페이지에 다시 접속하지 않더라도 **가상의 뷰 렌더(Virtual Render)**를 통해 해당 요소가 어떻게 생겼었는지를 화면에 고스란히 복원하여 렌더링에 주입합니다.
🧠 PRO TIP: 가상 뷰 렌더(Virtual Render)
Quitboarding은 타겟 페이지에서 추출된 폰트 크기, 마진, 색상값 등의 핵심 스타일링 토큰을 그대로 캐싱해 가져옵니다. 덕분에 에디터 내에서도 실제 어플리케이션을 건드리는 듯한 생동감을 느끼며 후가공을 할 수 있습니다.
2물리적 드래그 앤 드롭과 실시간 렌더링
순서가 꼬인 가이드북은 매뉴얼로서의 가치를 잃습니다. Quitboarding 에디터는 가장 직관적인 형태의 **물리적 드래그 앤 드롭 제어**를 통해 시퀀스 인덱스를 동적으로 보정하는 알고리즘을 탑재하고 있습니다.
2.1 트래킹 메커니즘 (Tracking Mechanism)
좌측 인덱스 패널에서 특정 스텝의 그립(Grip) 아이콘을 집어 올리면, 해당 카드는 **절대 좌표(Absolute Position)**로 투사됩니다. 이후 마우스의 `Y`축 이동을 실시간 오프셋으로 추적하여 인접한 다른 카드들의 물리적 충돌 및 임계값 교차 여부를 판정합니다.
📋 정렬시 주의할 가이드 원칙
- 그립 영역 타겟: 리스트의 숫자 뱃지 대신 우측 끝 `Grip` 바 레인지를 마우징하여 드래그하십시오.
- 물리 스왑 트리거: 요소 바닥 라인이 다른 노드의 상단을 약 50% 이상 침범할 때 트래션을 양도받습니다.
- 우측 프리뷰 검증: 드롭하는 순간 우측 팩토리 렌더 뷰도 리오더버 정렬에 동참하며 싱크가 정렬됩니다.
2.2 순서 교정 보정 (Auto Shifting)
특정 카드가 위치가 밀리게 될 때, 기존 순서에 위치했던 카드들은 CSS `transform` 속성을 활용해 공간을 양보하도록 시각적 연출과 동시에 DOM Index Swap을 일으킵니다. 드래그가 해제되는 즉시, 우측의 **Document Preview** 프레임 또한 가상 리스트 렌더링을 일치시킵니다.
▲ 드래그 앤 드롭으로 순서를 바꾼 뒤 즉시 우측 프리뷰 렌더에 반영되는 동작 시뮬레이션입니다.
3스마트 복사 및 붙여넣기 (Duplicate)
비슷한 구조를 가진 중복되는 단계(예: 다른 입력창에 값을 각각 넣기만 하는 단계들)는 굳이 매번 캡처할 필요가 없습니다. 메모리 복제 기술을 통해 스텝 단위의 복제를 제공합니다.
3.1 클립보드 직렬화 복제 (Serialization Copy)
스텝 카드의 우측에 있는 복사 단축 버튼을 누르거나 Ctrl + C / Ctrl + V 단축키 바인딩 시, 현재 카드 객체 구조가 메모리 복제되어 즉시 현재 선택된 슬롯 하단에 새로운 중첩 스펙으로 주입됩니다. 이 복제된 카드는 본인만의 고유 UUID 키를 새롭게 발급받아 원본 유실 방지 가드를 구성합니다.
▲ 카드 선택 후 Ctrl+C 단축키 조합을 통해 신속하게 인스턴스를 복제하는 오버레이 시뮬레이션입니다.
3.2 자동 넘버링 갱신
복사가 완료되는 폭발적인 연산 직후, 에디터는 상단의 부모 노드들로부터 꼬리 노드들까지 순차 인덱스 카운트를 재조정합니다. 이에 맞추어 본문 타이틀의 `Step 1`, `Step 2` 등의 접두사(Prefix) 넘버링이 자동 정렬 배치됩니다.
3.3 미리보기 캔버스 직관적 제어
조직의 매뉴얼이 나열된 우측 **Document Preview** 영역에 도달해서도 스텝을 직접 클릭해 선택한 후, 동일하게 Ctrl + C, Ctrl + V를 누르면 좌측 리스트 노드가 역방향으로도 실시간 동기화 마운트됩니다.
▲ 우측 미리보기 캔버스를 직접 클릭 선택하여 복제할 때 일어나는 양방향 딥 모드 동기화입니다.
4문서 커스터마이징 및 다중 퍼블리싱
완성된 매뉴얼은 내부 저장용이 아닌 외부에 공개되어 조직의 생산성을 높이는 수단으로 변모합니다. 사용자는 다양한 포맷과 디자인의 옵션을 선택해 최종 렌더링 파일을 인출할 수 있습니다.
4.1 글로벌 디자인 템플릿과 로고 배포
에디터 상단의 브랜드 로고 업로드 메뉴를 통해 기업 전용 워터마크나 배너를 상단 영역에 주입 가능합니다. 더불어 노션(Notion) 테마, 가이드북 테마, 프레젠테이션 테마 중 원하는 CSS 렌더 옵션을 불러와 원클릭 프리셋 정렬을 수행할 수 있습니다.
4.2 익스포트 타입 (MDX, PDF, Live Web)
출력 옵션은 텍스트 및 미디어 번들 파일로 전환되어 사용자에게 제공됩니다.
| 출력 포맷 | 주요 특징 및 활용처 | 핵심 강점 |
|---|---|---|
| HTML / MDX | 개발 문서 위키(Git), 기술 블로그 연동용 마크다운 형식 | 경량성 & 버전 관리 |
| Standard PDF | 고객 전달 전용 교본, 오프라인 인쇄용 단일 바이너리 문서 | 절대 고정 레이아웃 |
| Live Web Link | 클라우드 발행 링크 공유, 전용 인터랙티브 프리뷰 노출 | 실시간 동적 싱크 |
🎉 Smart Capture 시리즈 마스터
축하합니다! 시리즈의 모든 가이드를 읽고 스마트 록온, 휠 트래버셜, 구역 고정부터 드래그 앤 드롭 및 스마트 복사 편집까지 정복하셨습니다. 이제 완벽한 가이드북을 자유롭게 구축해 보세요!