feat(wysiwyg): 캔버스 키보드 nudge/마우스 드래그 + 8px 스냅 (M1 1차)

- Frame/Layer/Object 스키마(zod) 및 테스트
- 키보드 화살표 nudge 시 8px 스냅 적용
- 마우스 드래그 이동 시 8px 스냅 적용
- Canvas 컴포넌트 초기 버전 및 테스트 추가

MAIN_PLAN.md

@@ -423,3 +423,37 @@
 ### 커밋/푸쉬 원칙
 - 기능 단위 커밋은 한국어 메시지
 - 대범위 브랜치 완료 전에 푸쉬 금지(현 단계는 완료되어 푸쉬 수행)
+
+## WYSIWYG 캔버스(드림위버 스타일) 계획
+
+### 목표
+- 컨텐츠 영역에서 오브젝트를 자유 배치(드래그/리사이즈/회전)하여 랜딩을 구성
+- 웹표준/접근성/모바일·PC 반응형을 모두 충족하는 Export 산출
+
+### 핵심 설계 원칙
+- 의미론적 HTML Export: Text→h1~h6/p, Button→a/button, Image→img/picture
+- 접근성
+  - 레이어(탭) 순서 ↔ DOM 순서 매핑, 필요 시 탭 순서 수동 설정
+  - 이미지 alt/버튼 aria-label 필수, 헤딩 레벨 강제, 키보드 포커스/스킵링크 유지
+  - 색 대비/타겟 크기 가이드 및 경고
+- 반응형
+  - 1차: 고정 비율 스케일(MVP)
+  - 2차: 브레이크포인트 재배치(선택 그룹)
+  - 3차: 유동 단위/컨테이너 쿼리, clamp 폰트 확장
+- 품질 가드: 8px 격자 + 가장자리/중심 스냅, 오버랩/가독성 경고, 역할/속성 프리셋
+
+### 기술/구현 전략
+- 모델: Frame/Layer/Object(Text/Image/Button) + 의미/접근성 필드(zod 스키마)
+- 편집: Moveable로 드래그/리사이즈/회전 + 스냅/가이드/키보드 nudge
+- Export: 오브젝트→의미론 태그 매핑, 반응형(스케일→브레이크포인트), 이미지 최적화 옵션 반영
+
+### 마일스톤
+- M1: 캔버스 조작(드/리/회+스냅) TDD → 최소 구현
+- M2: 레이어/속성 패널 TDD → UI 연결(순서/잠금/숨김, 위치/크기/회전/폰트/색/링크/이미지)
+- M3: Export(의미론+스케일) TDD → ZIP 생성 연동
+- M4: a11y/반응형 회귀 스모크 확대 + 품질 가드/경고
+
+### 진행 현황
+- 브랜치: feat/wysiwyg-canvas 생성
+- 스키마 TDD 완료: lib/wysiwyg/schema.ts(+test)
+- 다음 작업: Moveable 도입 캔버스 조작 TDD(8px 격자/가장자리 스냅/키보드 nudge)