WYSIWYG: a11y 라이브 리전 안내 추가\n- 선택 개수/좌표 및 가이드 좌표 안내(useMemo 기반)\n- a11y 테스트 추가(guides/nudge)\n- 메인플랜 업데이트\n- 전체 테스트 그린

components/wysiwyg/Canvas.a11y.guides.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import { Canvas } from '@/components/wysiwyg/Canvas'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function makeFrame(): Frame {
+  return {
+    id: 'f1',
+    width: 320,
+    height: 240,
+    background: '#ffffff',
+    layers: [
+      {
+        id: 'l1',
+        name: 'L1',
+        visible: true,
+        locked: false,
+        objects: [
+          { id: 'o1', type: 'image', x: 16, y: 16, width: 32, height: 32, rotate: 0, zIndex: 0, props: { src: 'a', alt: '' } },
+          { id: 'o2', type: 'image', x: 80, y: 16, width: 32, height: 32, rotate: 0, zIndex: 1, props: { src: 'b', alt: '' } },
+        ],
+      },
+    ],
+  }
+}
+
+describe('WYSIWYG Canvas a11y live region', () => {
+  it('announces selection count and guideline position changes', async () => {
+    const frame = makeFrame()
+    const { getByTestId } = render(<Canvas frame={frame} />)
+
+    const live = getByTestId('aria-live')
+
+    // initial selection exists (first object)
+    await waitFor(() => {
+      expect(live.textContent).toMatch(/선택\s*1개/)
+    })
+
+    // add second selection via Shift+click
+    fireEvent.mouseDown(getByTestId('obj-o2'), { clientX: 80, clientY: 16, shiftKey: true })
+    await waitFor(() => {
+      expect(live.textContent).toMatch(/선택\s*2개/)
+    })
+
+    // start dragging o2 to trigger guide updates
+    const canvas = getByTestId('wysiwyg-canvas')
+    fireEvent.mouseDown(getByTestId('obj-o2'), { clientX: 80, clientY: 16 })
+    fireEvent.mouseMove(canvas, { clientX: 96, clientY: 24 })
+
+    await waitFor(() => {
+      // guide should be visible and aria-live includes guide coordinates
+      const t = live.textContent || ''
+      expect(t).toMatch(/가이드\s*x=\d+/)
+      expect(t).toMatch(/y=\d+/)
+    })
+
+    fireEvent.mouseUp(canvas)
+  })
+})

components/wysiwyg/Canvas.a11y.nudge.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import { Canvas } from '@/components/wysiwyg/Canvas'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function makeFrame(): Frame {
+  return {
+    id: 'f1',
+    width: 200,
+    height: 160,
+    background: '#ffffff',
+    layers: [
+      {
+        id: 'l1',
+        name: 'L1',
+        visible: true,
+        locked: false,
+        objects: [
+          { id: 'o1', type: 'image', x: 10, y: 12, width: 32, height: 24, rotate: 0, zIndex: 0, props: { src: 'a', alt: '' } },
+        ],
+      },
+    ],
+  }
+}
+
+describe('WYSIWYG Canvas a11y live region for keyboard nudge', () => {
+  it('announces selected object coordinates after Arrow key nudge', async () => {
+    const frame = makeFrame()
+    const { getByTestId } = render(<Canvas frame={frame} />)
+
+    const canvas = getByTestId('wysiwyg-canvas')
+    const live = getByTestId('aria-live')
+
+    // Focus and nudge to the right by 1 (snap8 applies → from 10 to 8 or 16 depending on rounding)
+    canvas.focus()
+    fireEvent.keyDown(canvas, { key: 'ArrowRight' })
+
+    await waitFor(() => {
+      const t = live.textContent || ''
+      expect(t).toMatch(/선택\s*1개/)
+      expect(t).toMatch(/위치\s*x=\d+/)
+      expect(t).toMatch(/y=\d+/)
+    })
+
+    // Nudge down
+    fireEvent.keyDown(canvas, { key: 'ArrowDown' })
+    await waitFor(() => {
+      const t = live.textContent || ''
+      expect(t).toMatch(/위치\s*x=\d+,\s*y=\d+/)
+    })
+  })
+})

components/wysiwyg/Canvas.tsx

@@ -56,6 +56,15 @@ export function Canvas({ frame, onChange }: CanvasProps) {
     return null
   }, [model, selectedId])
 
+  // a11y 라이브 리전 텍스트: 선택 개수 및 가이드 좌표를 폴라이트로 알림
+  const ariaLiveText = useMemo(() => {
+    const count = selectedIds.length
+    const base = `선택 ${count}개`
+    const pos = selected ? `, 위치 x=${selected.x}, y=${selected.y}` : ''
+    const guide = showGuides ? `, 가이드 x=${guidePos.x}, y=${guidePos.y}` : ''
+    return `${base}${pos}${guide}`
+  }, [selectedIds.length, showGuides, guidePos.x, guidePos.y, selected?.x, selected?.y])
+
   const updateObject = useCallback((id: string, updater: (o: WObject) => WObject) => {
     setModel((prev) => {
       const next: Frame = { ...prev, layers: prev.layers.map((ly) => ({ ...ly, objects: ly.objects.map((o) => (o.id === id ? updater(o) : o)) })) }
@@ -263,6 +272,7 @@ export function Canvas({ frame, onChange }: CanvasProps) {
           <div data-testid="guide-y" style={{ position: 'absolute', top: guidePos.y, left: 0, right: 0, height: 1, background: '#0ea5e9' }} />
         </>
       )}
+      <div role="status" aria-live="polite" data-testid="aria-live" style={{ position: 'absolute', left: -9999, top: 'auto', width: 1, height: 1, overflow: 'hidden' }}>{ariaLiveText}</div>
       {model.layers.map((layer) => layer.visible !== false && layer.objects.map((o) => (
         <div
           key={o.id}