슬라이딩 퍼즐 만들기 CoSTAR 프롬프트

Context (C)

이 앱은 단순히 숫자를 맞추는 퍼즐을 넘어, 사용자가 직접 이미지를 업로드하여 커스텀 이미지 퍼즐을 즐길 수 있는 기능을 포함해야 합니다.

Objective (O)

다음 기능을 포함하는 단일 파일(index.html) 웹 앱을 생성하세요.

1. 보드 설정: 3x3, 4x4, 4x8 등 다양한 격자 크기 선택 기능.

2. 로직:

   • 빈칸(0) 탐색 및 인접 타일 스왑.

   • 셔플: 무작위 이동을 반복(최소 100회 이상)하여 항상 풀 수 있는(Solvable) 상태 보장.

   • 판정: 모든 타일이 정답 위치에 오면 '완성' 메시지 출력.

3. 이미지 모드:

   • 사용자가 로컬 이미지를 업로드하면 각 타일에 이미지를 등분하여 배경으로 표시.

   • 이미지 모드에서도 가독성을 위해 숫자를 힌트로 오버레이(반투명) 표시.

4. 조작: 키보드 화살표 및 마우스/터치 클릭 지원.

Style (S)

• 외부 라이브러리(jQuery, React 등) 없이 순수 HTML, CSS, JavaScript(Vanilla JS)로만 작성.

• 디자인: Tailwind CSS 스타일의 깔끔한 UI. CSS Grid를 활용한 반응형 레이아웃.

• 코드 구조: SlidingPuzzle 클래스를 활용한 객체 지향적 설계. 핵심 로직에 상세한 주석 포함.

Tone (T)

• UI 문구 및 사용자 메시지는 한국어로 작성하며 친절하고 간결한 톤 유지.

• 개발자용 주석은 영어 또는 한국어로 명확하게 작성.

Audience (A)

• 웹 브라우저에서 즉시 시연하려는 학생 및 교사. 별도의 서버 설정 없이 파일 실행만으로 동작해야 함.

Response (R)

• 결과물은 오직 하나의 index.html 파일로 출력할 것.

• 방향 정의 명시: "↑ 키 입력 시 빈칸이 위로 이동(즉, 위쪽 타일이 아래로 내려옴)"하는 직관적인 규칙을 채택할 것.

• 셔플 후 우연히 정답 상태인 경우를 방지하는 예외 처리 포함.

필수 구현 세부사항 (Constraints)

• background-position을 백분율(%)로 계산하여 이미지 타일링 구현.

• FileReader API를 사용하여 클라이언트 측 이미지 로드 처리.

• 0(빈칸)은 렌더링하지 않거나 배경을 비워둘 것.