자리배치 소요시간
2~3분 → 10초 이내
검증됨 · 평상시 기준 현장 측정 기록
← SHOWROOM INDEX
Vibe Coding2026
출석 기반 랜덤 자리배치기
아침 조례 종이 제비뽑기를 웹앱으로 바꿔 평상시 2~3분을 10초 이내로 줄인 현장 사례.
Status
출시·운영 검증
Context
서울 소재 자활센터 청년사업단의 실제 운영 문제
My Role
현장 관찰, 문제 정의, 좌석 UI 설계, 기능 구현, 기기별 확인, 배포와 운영 전달
Duration
원본 MVP 30분 · 익명 공개판 정비 별도
01 · 문제 정의
매일 아침 조례에서 종이 제비뽑기로 13명의 자리를 정했다(카페팀 오픈조 2명은 고정석). 처음엔 흥미로운 방식이었지만, 실무자 선생님이 제비뽑기 가방을 깜빡한 날이면 즉석에서 종이를 찢어 번호를 적고, 한 명씩 돌아가며 뽑고, 각자 번호를 확인해 자리를 찾아 앉기까지 5~10분이 걸렸다. 평소에도 뽑기와 착석 확인에 2~3분은 필요했고, 결석자 반영이나 사용하지 않는 자리 제외, 손님 응대(오픈조) 배치 같은 그날의 좌석 사정은 종이로 다루기 어려웠다.
02 · 요구사항과 제약
- 카페팀 오픈조 2명은 고정 좌석(손님 응대)을 유지해야 했다.
- 나머지 13명은 당일 출석 상태에 따라 배치해야 했다.
- 실무자 선생님이 태블릿에서 설명 없이 쓸 수 있어야 했다.
- 배치 결과를 바로 확인하고 단톡방에 공유할 수 있어야 했다.
03 · 측정된 결과
배치 인원
13명 + 고정 2석
검증됨 · 현장 명단·좌석 규모
원본 MVP 제작
30분
검증됨 · 포트폴리오 DB 작업 기록
04 · 선택 이유와 트레이드오프
출석·자리 잠금·배치·공유를 한 화면으로 통합
출석을 따로 확인하고 제비를 뽑고 결과를 다시 찍어 올리는 3단계 재작업을 없애기 위해서다.
검토한 대안 · 종이 제비 유지 / 사다리타기 서비스 사용
트레이드오프 · 범용 추첨기가 아니라 해당 현장의 좌석 구조(TV·13자리·카페팀 2석)에 맞춘 도구가 됐다.
배치 로직은 Fisher-Yates 셔플 + 제약 사전 필터링
매일 쓰는 추첨이라 특정 자리로 결과가 쏠리면 안 됐다. 무작위는 검증된 Fisher-Yates 셔플로 돌리고, 제약은 셔플 전에 대상을 줄이는 방식으로 단순화했다 — 결석자와 카페팀 배치자는 명단에서, 잠긴 자리는 좌석 풀에서 미리 제외한다.
검토한 대안 · 자리마다 개별 랜덤 추출 후 중복이면 재시도 / 전체 배치 후 제약 위반 자리만 교환으로 보정
트레이드오프 · 출석 인원이 가용 좌석보다 많으면 배치를 중단하고 안내만 한다. 자동으로 해결하는 대신 사람이 자리 잠금을 풀어 결정하도록 남겼다.
프레임워크 없는 단일 HTML 파일 + localStorage
실무자 선생님 태블릿 브라우저에 바로가기 하나로 배포하고, 서버 없이 그 기기 안에서만 데이터를 다루기 위해서다.
검토한 대안 · React 등 프레임워크 + 번들러 / 서버·DB 기반 웹서비스
트레이드오프 · 배포·운영은 단순해졌지만 코드가 한 파일에 모여 자동 테스트를 붙이기 어렵다.
채팅 LLM 복붙 대신 Cursor로 에디터 안에서 바이브코딩
채팅 LLM에 프롬프트를 쓰고, 나온 코드를 복사해 메모장이나 VSCode에 붙여넣는 왕복으로는 여러 로직을 동시에 고치기 어려웠다. 에디터 안에서 코드에 직접 AI를 붙이는 Cursor Pro(월 20달러)를 구독해 복사·붙여넣기 왕복을 없앴다.
검토한 대안 · 채팅 LLM + 수동 복사·붙여넣기(메모장·VSCode) / AI 없이 직접 손코딩
트레이드오프 · 구독이 고정비로 생겼다. 게다가 월간 대신 연간 결제를 해버려서, 도구를 충분히 검증하기 전에 지갑부터 연 성급함은 교훈으로 남았다.
공개 배포본 폐기 후 실명 치환 공개판으로 재공개
실제 구성원 이름이 포함된 배포본을 포트폴리오에서 노출하지 않기 위해서다.
검토한 대안 · 기존 배포본 유지 / React로 새로 만든 재구축판만 공개
트레이드오프 · 재구축판은 진정성이 떨어져, 원본 코드에서 실명만 치환한 익명 공개판으로 교체했다.
05 · 검증과 운영
- 담당자 기기에 바로가기를 설치해 실제 운영 흐름에서 사용
- 노트북·태블릿·모바일 화면 확인
- 출석 반영·자리 잠금·자리 섞기·결과 공유 흐름 검증
06 · 증거
demo
익명 공개판 데모 (실행 가능) →실제 운영하던 앱에서 실명만 가상 이름으로 치환. 데이터는 브라우저에만 저장
source
익명 공개판 GitHub 저장소 →원본 단일 HTML 그대로 — 변경점은 실명 치환과 가상 명단 표기 두 가지뿐
document
Yohan Studio 포트폴리오 DB 기록
문제·기능·현장 결과·다음 개선이 정리된 내부 기준 문서
07 · 개인정보와 운영 책임
과거 공개 배포본에서 실제 이름 노출을 발견해 배포를 폐기했다. 현재 공개판은 실제로 쓰던 원본 코드에서 실명을 전원 가상 이름으로 치환하고 그 사실을 화면에 명시한 것이며, 실제 출결·기관 상세명은 공개하지 않는다.
08 · 한계
- 2~3분 → 10초 이내는 평상시 기준의 당시 현장 측정 기록이다. 준비물을 깜빡한 날은 즉석 제비 제작까지 5~10분이 걸렸지만, 개선 수치는 보수적으로 평상시 기준으로만 표기한다.
- 장기 사용량과 재작업 발생률은 체계적으로 수집하지 못했다.
- 배치 로직에 대한 자동 테스트는 아직 없다(단일 HTML 구조).
- 상태가 전역 변수에 흩어져 있고 화면 갱신 함수가 길다. 단일 파일 구조가 만든 품질 한계로, 다음 개선의 로직 분리가 이를 겨냥한다.
09 · 다음 개선
- 배치 로직 분리 후 자동 테스트 추가
- 카페팀 출퇴근표 탭 기능을 사례 본문에서 보강
회고
이 프로젝트의 핵심은 랜덤 함수가 아니라, 준비물 누락과 재추첨이 반복되는 아침 조례의 흐름을 관찰하고 실무자 선생님이 실제로 쓰는 한 화면으로 바꾼 데 있습니다.
공개 중인 데모는 실제 운영하던 원본 코드에서 실명만 가상 이름으로 치환한 익명 공개판입니다. 한때 React로 새로 만든 재구축판을 공개했지만, 원본 소스 보존을 확인한 뒤 진정성을 위해 원본 익명판으로 교체했습니다. 그 과정은 저장소 히스토리에 그대로 남아 있습니다.
사용 기술
HTML/CSS/JSlocalStoragehtml2canvasVercelCursor
링크
자주 묻는 질문
공개 데모는 실제 현장에서 쓰던 앱인가요?
네. 실제로 운영하던 단일 HTML 앱에서 실명을 전원 가상 이름으로 치환하고 그 사실을 화면에 표기한 익명 공개판입니다. 실명이 노출됐던 과거 배포본은 폐기했습니다.
10초라는 결과는 어떻게 측정했나요?
당시 현장에서 출석 확인 후 배치 결과를 공유하기까지 확인한 평상시 기준 기록입니다. 준비물을 깜빡한 날은 종이 제비를 즉석에서 만들며 5~10분까지 걸렸지만, 개선 수치는 평상시 기준으로만 표기합니다.