아동 인지발달 퍼즐 교구 패드 웹
본 프로젝트의 요구사항(5×5 보드, 도안 카드, 조각 터치·드래그·회전, 정답 판정과 재시도, 샘플 문제 데이터화)을 기반으로 직접 구현한 프로젝트입니다.
프로젝트 개요
본 프로젝트의 요구사항(5×5 보드, 도안 카드, 조각 터치·드래그·회전, 정답 판정과 재시도, 샘플 문제 데이터화)을 기반으로 직접 구현한 프로젝트입니다. 가로 태블릿 화면에서 아이가 한 손가락으로 조작하는 플레이 화면을 React와 SVG로 구성하고 문제 데이터는 Node.js·Express API로 제공합니다.
작업 범위
- 보드 조작: 5×5 격자 보드 위에서 조각을 터치로 집어 끌어 놓고, 눌러서 회전하며, 자유롭게 옮기거나 빼낼 수 있습니다
- 도안 카드: 현재 풀어야 할 도안 카드를 크게 보여주고 조건과 힌트를 아이 눈높이로 안내합니다
- 정답 판정: 배치가 끝나면 정답 여부를 판정하고 오답이면 다시 시도할 수 있는 안내를 보여줍니다
- 패드 설정: 패드 화면 방향과 터치 크기, 효과음과 진동 안내를 보호자가 조절합니다
주요 업무
- 보드 조작 화면: SVG 격자 좌표계와 Pointer Events 기반 드래그, 가장 가까운 칸으로 스냅하는 배치 로직을 구성합니다
- 도안 카드 화면: 도안 카드를 SVG 미니 보드로 렌더링하고 샘플 문제 JSON에서 불러옵니다
- 정답 판정 화면: 배치 좌표 집합을 정규화해 정답 배치와 비교하고 회전·대칭 동치를 처리합니다
- 패드 설정 화면: iPad Safari의 확대·스크롤 제스처를 차단하고 큰 터치 영역을 적용합니다
프로젝트 핵심 과제
손가락 굵기와 서툰 터치를 고려한 칸 스냅 허용 범위와 조각 선택 영역 기준 설계
회전한 조각의 좌표 변환과 보드 경계 충돌 검사를 드래그 중에도 끊김 없이 계산하는 구조
회전·대칭으로 같은 배치가 여러 형태로 나타나는 정답 비교 규칙을 문제별로 정의하는 방식
iPad Safari의 기본 제스처와 드래그 입력이 겹치지 않
이벤트 처리 순서를 조정할 계획
핵심 기능 상세
보드 조작
5×5 격자 보드 위에서 조각을 터치로 집어 끌어 놓고, 눌러서 회전하며, 자유롭게 옮기거나 빼낼 수 있습니다.
- SVG 5×5 격자를 칸 좌표 모델로 관리하고 조각 모양을 좌표 배열로 표현
- Pointer Events와 setPointerCapture로 터치·마우스 드래그를 한 경로로 통합
- 90도 단위 회전을 좌표 행렬 변환으로 처리하고 충돌 검사를 같은 모델에서 수행
조각의 위치·회전 상태를 하나의 불변 상태 객체로 관리하여 이동·회전·제거·되돌리기를 같은 흐름으로 처리합니다.
도안 카드
현재 풀어야 할 도안 카드를 크게 보여주고 조건과 힌트를 아이 눈높이로 안내합니다. 도안 카드를 SVG 미니 보드로 렌더링하고 샘플 문제 JSON에서 불러옵니다.
- 문제 JSON 스키마(보드 크기·조각 목록·정답 배치)를 TypeScript 타입으로 정의
- 도안 카드를 보드와 같은 좌표 모델로 렌더링하여 정답 비교 로직과 공유
- 문제 목록 API를 React Query로 조회하고 다음 문제를 미리 불러오는 구조 적용
샘플 문제 10~20개를 구조화된 데이터로 보관하여 문제를 추가해도 화면 코드를 수정하지 않는 확장 구조를 설계합니다.
정답 판정
배치가 끝나면 정답 여부를 판정하고 오답이면 다시 시도할 수 있는 안내를 보여줍니다. 배치 좌표 집합을 정규화해 정답 배치와 비교하고 회전·대칭 동치를 처리합니다.
- 배치 결과를 칸 좌표 집합으로 정규화하여 정답 집합과 비교
- 회전만 다른 동치 배치를 허용하는 규칙을 문제 데이터 옵션으로 분리
- 정답·재시도·다음 문제 이동을 상태 머신으로 관리
정답 판정 규칙을 순수 함수로 분리하여 단위 테스트로 검증하고 문제 유형이 늘어도 같은 판정기를 재사용합니다.
패드 설정
패드 화면 방향과 터치 크기, 효과음과 진동 안내를 보호자가 조절합니다. iPad Safari의 확대·스크롤 제스처를 차단하고 큰 터치 영역을 적용합니다.
- touch-action과 viewport 설정으로 더블탭 확대와 화면 끌림 차단
- 고해상도 화면을 고려한 SVG 벡터 렌더링과 최소 터치 영역 규칙 적용
- 가로 모드 기준 레이아웃과 세로 모드 안내 화면 분기
아이의 서툰 터치에도 화면이 흔들리지 않도록 제스처 차단과 터치 영역 기준을 화면 전체에 공통 적용합니다.
프로젝트 진행 단계
보드 좌표 모델·문제 스키마 설계 · 2026.10
5×5 격자 좌표 모델, 조각 모양 표현, 문제 JSON 스키마와 샘플 문제 10~20개 구조화
터치 드래그·회전 인터랙션 구현 · 2026.10
Pointer Events 기반 드래그, 칸 스냅, 90도 회전, 충돌 검사와 자유 수정 흐름 구현
정답 판정·진행 흐름 구현 · 2026.10
정규화 비교 판정기, 재시도와 다음 문제 이동 상태 머신, 문제 조회 API 구현
iPad 터치 점검·마무리 · 2026.10
iPad Safari 제스처 차단, 터치 영역 점검, 아동용 피드백 효과 적용
개발 결과
기술적 주안점
- 조각의 위치·회전 상태를 하나의 불변 상태 객체로 관리하여 이동·회전·제거·되돌리기를 같은 흐름으로 처리합니다
- 샘플 문제 10~20개를 구조화된 데이터로 보관하여 문제를 추가해도 화면 코드를 수정하지 않는 확장 구조를 설계합니다
- 정답 판정 규칙을 순수 함수로 분리하여 단위 테스트로 검증하고 문제 유형이 늘어도 같은 판정기를 재사용합니다
