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

MAIN_PLAN.md

@@ -64,6 +64,19 @@
 - 멀티선택 혼합/최근접 보강 케이스 수평축/복합 시나리오 추가 점검
 - 접근성 보강: 선택/스냅/가이드 상태에 대한 라이브 리전 안내 및 ARIA 속성 방안 설계
 
+### 접근성 라이브 리전(2025-11-17)
+- 목표: 캔버스에서 선택 개수 변화와 가이드(스냅 라인) 좌표 변화를 스크린리더에 폴라이트로 안내
+- TDD
+  - `components/wysiwyg/Canvas.a11y.guides.test.tsx`
+    - 초기 선택 1개 안내, Shift+클릭 후 2개 안내
+    - 드래그로 가이드 표시 시 `x/y` 좌표 포함하여 라이브 리전 텍스트 갱신 검증
+- 구현: `components/wysiwyg/Canvas.tsx`
+  - `role="status" aria-live="polite"` 라이브 리전 요소 추가(`data-testid="aria-live"`)
+  - 텍스트는 `useMemo`로 파생 계산(선택 수, 가이드 표시 여부, 가이드 좌표)
+  - 상태(setState) 기반 이펙트 대신 파생 텍스트로 전환하여 렌더 루프/린트 경고 회피
+- 결과: 테스트 그린(전체 232/232)
+- 디버깅 메모: useEffect 내 setState 경고 발생 → useMemo로 파생 텍스트 계산으로 해결
+
 ## 목표
 - 비개발자도 사용 가능한 단일 페이지 랜딩 페이지 빌더.
 - 결과물: 정적 ZIP(HTML/CSS/JS) 다운로드. 이미지: 외부 URL 또는 로컬 업로드(서버 저장 없음, ZIP에 패키징). 폰트는 외부 CDN 허용.

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}