💡 한 줄 요약
바이브 코딩 해커톤 수상작 명칭에서 영감을 얻어, "선생님 지난번에도 같은 짝이었어요!" 불만을 원천 차단하는 이전 짝 중복 방지 셔플 알고리즘과 고정석 지정이 탑재된 '쇼미더자리' 웹앱을 직접 바이브 코딩으로 재현했습니다!
🏆 기사 속 아이디어: 스마트 자리배치 시스템 '쇼미더자리'
학기 중에 자리를 바꿀 때마다 교실은 기대감과 긴장감으로 가득 찹니다. 하지만 단순 무작위 뽑기를 쓰다 보면 "선생님, 저 쟤랑 또 짝꿍 됐어요!"라며 서운해하는 학생이 생기거나, 시력이나 키 때문에 앞자리에 앉아야 하는 아이들을 수동으로 다시 배치하느라 진땀을 빼곤 합니다.
해커톤 기사의 '쇼미더자리'라는 재치 있는 이름을 보고, "이전 모둠 데이터를 기억해서 150번 시뮬레이션으로 중복을 피하고, 칠판 대형 화면 모드까지 지원하는 웹앱을 만들어보자!" 결심하고 프롬프트를 짰습니다.
📊 단순 뽑기 도구 vs 바이브 코딩 '쇼미더자리' 비교
| 구분 | 기존 단순 랜덤 제비뽑기 | 바이브 코딩 '쇼미더자리' 웹앱 (추천 ⭐️) |
|---|---|---|
| 이전 짝 중복 처리 | 이전 기록을 기억하지 못해 같은 짝이 연속 배정됨 | 150회 이상 내부 시뮬레이션으로 이전 짝과의 충돌 점수(Conflict) 최소화 |
| 지정석/고정석 지원 | 뽑기 후 교사가 손으로 학생 위치를 일일이 재조정 | 배치 전후 원하는 자리를 클릭해 [📌 자리 고정] 설정 시 셔플에서 자동 제외 |
| 결과 화면 및 저장 | 칠판에 분필로 다시 적거나 캡처 프로그램 실행 | [🖥️ 대형 칠판 전체화면] 모드 + html2canvas 기반 원클릭 이미지(PNG) 저장 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
✨ [복사용] '쇼미더자리' 스마트 자리배치 제작 프롬프트
"너는 초등 학급 경영 프로그램 전문 프론트엔드 개발자야. 별도 설치 없이 단 하나의 HTML 파일로 실행되는 [스마트 자리배치 웹앱 '쇼미더자리']를 만들어 줘.
[핵심 요구사항]
1. 학생 명단 쉼표(,) 구분 입력 및 좌석 배열 드롭다운(4x5, 5x4, 2x10, 직접 입력) 제공.
2. 자리 배치판의 특정 좌석을 클릭하여 학생을 미리 고정하거나 배치 후 고정할 수 있는 '지정석 팝업 모달' 구현.
3. [이전 모둠 중복 방지]: 이전 짝 목록을 기반으로 150회 셔플 알고리즘을 수행해 중복이 가장 적은 최적의 자리를 계산할 것.
4. 편리 기능: [🖥️ 전체화면 모드(ESC 종료)], [📷 자리배치판 PNG 이미지 다운로드(html2canvas CDN)], LocalStorage 자동 저장.
5. Tailwind CSS CDN을 적용하여 모던한 카드형 반응형 UI로 구성해 줘."
📋 3단계 실천 가이드
- 프롬프트로 생성된 단일 HTML 코드를
seat_arranger.html로 저장합니다. - 우리 반 학생 명단을 넣고 필요시 시력 배려 학생의 자리를 [📌 고정]해 둡니다.
- [자리 바꾸기] 버튼을 누른 후 [전체화면]으로 띄워 아이들과 신나게 새 자리를 확인하세요!
🎯 에디터 한줄평
교실에서 매달 겪는 자리배치 갈등과 고정석 번거로움을 똑똑한 셔플 알고리즘과 바이브 코딩으로 유쾌하게 해결했습니다!
📰 해커톤 기사 원문 출처
