📱 [앱 개발 지시서] 스마트 모둠 생성기 웹 애플리케이션

1. 개요

• 목적: 교사가 학생들을 여러 모둠으로 쉽고 빠르게, 그리고 특정 조건(기피, 앞자리 등)을 반영하여 배치할 수 있도록 돕는 웹 기반 도구입니다.

• 기술 스택: HTML5, CSS3 (Tailwind CSS 활용), JavaScript (단일 파일로 구성)

• 핵심 기능: 조건부 랜덤 배치, 6x6 그리드 기반 교실 맵 커스텀, 드래그 앤 드롭 자리 교체, 결과 이미지 캡처

2. 레이아웃 및 디자인 (UI/UX)

• 전체 테마: 깔끔한 대시보드 스타일. 배경은 연한 회색 바탕에 미세한 도트 무늬 적용.

• 로고 및 헤더: 상단 중앙에 로고 이미지(https://i.ibb.co/0RrYkTgr/logo2.png)를 배치하고 모서리가 둥근 흰색 박스로 감쌈. 아래에 굵고 큰 폰트로 "스마트 모둠 생성기" 타이틀 표시.

• 화면 전환: '정보 입력 화면(입력 폼)'과 '결과 보기 화면(배치도)'이 분리되어 있으며, 모둠 생성 시 부드러운 애니메이션과 함께 상호 전환됨.

3. 정보 입력 화면 (입력 폼)

• 입력 방식 탭 (토글): '1️⃣ 번호로 만들기'와 '📝 이름으로 만들기' 두 가지 모드를 탭으로 제공하여 사용자가 선택 가능.

  • 번호 모드: 총 학생 수(숫자)를 입력받음.

  • 이름 모드: 여러 줄의 텍스트 영역(textarea)을 제공. 엑셀에서 복사해 붙여넣으면 줄바꿈 단위로 이름을 인식. 우측 상단에 '인식된 학생: 00명' 뱃지를 실시간으로 업데이트하여 표시.

• 모둠 개수 입력: 사용할 최대 모둠 수를 입력 (기본값 6, 최대 12). 입력 시 하단의 '교실 모둠 대형 직접 그리기' 파레트 색상 수가 동적으로 변경됨.

• 교실 모둠 대형 직접 그리기 (6x6 그리드 에디터):

  • 상단에 '지우개'와 최대 12개의 모둠(색상) 버튼으로 구성된 파레트 제공.

  • 하단에 6x6 형태의 빈 격자(그리드) 제공. 처음에 모두 빈칸으로 시작.

  • 사용자가 파레트에서 색상을 선택하고 격자를 클릭/드래그하여 원하는 모둠의 책상 배치를 직접 그림.

  • 선택된 모둠 번호에 따라 격자의 색상이 칠해짐.

  • 칠해진 총 책상 개수가 학생 수보다 적으면 붉은색 경고 메시지 출력.

• 특수 조건 입력 (선택 사항):

  • 피해야 할 조합: '1-5, 3-8' 또는 '김철수-박영희' 형태로 입력받음. 이들은 같은 모둠에 절대 배치되지 않아야 함.

  • 칠판 앞쪽 배치 학생: 번호나 이름 목록을 쉼표로 구분하여 입력받음. 이 학생들은 생성된 모둠 중 가장 앞쪽(그리드 상단) 책상에 우선 배치됨.

• 모둠 만들기 버튼: 클릭 시 유효성 검사(학생 수, 책상 수 확인) 후 배치 알고리즘 실행.

4. 결과 보기 화면 (배치도)

• 상단 컨트롤 버튼:

  • '조건 유지하고 다시 섞기': 기존 입력 데이터를 바탕으로 랜덤 배치를 다시 실행.

  • '이미지로 저장': 현재 결과 영역(칠판+배치도)을 캡처하여 .png 파일로 다운로드 (html2canvas 사용).

  • '처음 정보 입력 화면으로': 입력 폼 화면으로 돌아감.

• 칠판 그래픽: 상단에 학교 칠판 느낌의 직사각형 박스 그래픽(손글씨 폰트 적용) 표시.

• 배치도 (6x6 그리드):

  • 입력 화면에서 사용자가 그린 6x6 맵 구조를 그대로 가져와 화면 중앙에 렌더링.

  • 각 책상(셀)은 해당 모둠의 고유 색상으로 표시되며, 배정된 학생의 이름(또는 번호)이 굵게 표시됨.

  • 책상의 좌측 상단에는 작게 '1모둠', '2모둠' 식의 텍스트 뱃지 표시.

  • 빈 바닥(0번) 영역은 투명하고 작게(점선 테두리) 표시. 모둠 칸이지만 학생이 배정되지 않아 남는 책상은 반투명한 점선 테두리로 표시.

• 드래그 앤 드롭 기능 (인터랙티브):

  • 결과 화면의 모든 칸(배정된 학생, 빈 책상, 빈 바닥) 간에 드래그 앤 드롭으로 1:1 위치 교환이 가능.

  • 시각적 효과: 드래그 시작 시 반투명화, 드롭 대상 위로 올라가면 하이라이트 테두리 적용.

5. 핵심 알고리즘 요구사항

• 셔플링: 학생 목록을 무작위로 섞음 (Fisher-Yates 알고리즘 등 활용).

• 충돌 회피: 특정 책상에 학생을 넣기 전, '피해야 할 조합' 배열을 검사하여 현재 모둠의 다른 학생과 충돌이 있는지 확인. 충돌이 있으면 다른 자리를 찾음.

• 우선 배치: '앞쪽 배치 학생' 그룹을 먼저 섞어 그리드 내의 빈 책상 중 가장 r(행) 값이 작은 자리(앞쪽)부터 우선 할당함.

• 재시도 메커니즘: 조건이 너무 까다로워 교착 상태(배치 불가)에 빠질 경우를 대비해, 내부적으로 최대 1000번까지 알고리즘을 재시도하고 실패 시 사용자에게 알림 메시지 출력.