Bolt.new로 좌석 배치용 사이트를 만들다
한 줄 의견: 개발을 하나도 모르는 데, 이게 가능하더라고요
1. 문제 정의
매주 130명 가량의 성가대원 자리를 배치한다.
엑셀을 사용해 수동으로 배치한다.
출석/미출석, 신규 단원 등의 사유로 매주 변경 사항이 생긴다.
누구를 배치하고, 배치 안 했는지 알기 힘들다
이미 좌석을 배치한 인원들 간 자리 변경이 어렵다.
2. 해결책 탐색
브라우저에서 직접 풀 스택 웹 애플리케이션을 개발, 실행, 편집 및 배포할 수 있는 AI 개발 에이전트
다양한 서비스 중 bolt.new 선택
3. 해결책 실행
프롬프트 입력
사람들 성가대석 좌석을 배치하는 사이트를 만들꺼야. 왼쪽은 피아노석, 오른쪽은 오르간석이고, 성가대 파트는 A1, A2, S1, S2, B1, B2, T1, T2 이렇게 있어. 필요에 따라 사람들은 추가하거나 뺄 수도 있어. 피아노석과 오르간석 중앙에는 통로가 있고, 통로를 기준으로 왼쪽과 오른쪽에 사람들을 배치할 수 있어. 한 행에는 15개 자리가 통로 기준으로 왼쪽과 오른쪽에 각각 있어. 즉 한 행에 최대 30명이 앉을 수 있어. 사람들은 한 칸씩 떨어져서 앉을 거야.1차 사이트 완성
배치만 하고 저장하는 기능이 없음을 확인
Supabase 연결 (무료 데이터베이스, bolt와 자동 연동 가능)
기능 추가
날짜 지정 (캘린더)
날짜 변경 시 기존 좌석 배치 자동 복사
축소/확대 기능
이미지 내보내기
인원 추가 기능 (수동, CSV 파일)
CSV 파일 불러오기/내보내기 인코딩 오류 수정
배치 현황 대시보드
빈좌석 클릭 시 블록 기능 (어두운 색으로 표시)
빈좌석 복수 블록 기능 (클릭 후 드래그)
슈퍼 관리자 추가
일반 관리자 추가/삭제 기능
관리자 로그인 전 수정 불가 기능
찬양대원 목록 불러 온 후 빈좌석 두 번 클릭 시 검색 해 자리 지정하는 기능
찬양대원 목록 내보내기 기능
드래그 앤 드롭으로 좌석에 대원 배치하는 기능
드래그하여 대원끼리 자리 서로 바꾸는 기능
4. 작업 방식
큰 틀은 bolt.new에서 작업 수행
작업 진행하다 보니 bolt는 부분 수정이 불편하다는 것을 확인
집에서는 cursor AI 활용해 수정 진행
회사에 오니 커서 환경이 달라 Visual Studio Code에 CLINE 설치 후 Claude API와 DeepSeek API로 작업 마무리
5. 최종 결과물
1) 로그인 전 화면
*로그인을 하지 않으면 수정할 수 없음
2) 로그인 및 가입 화면
3) 로그인 후 화면
3-1) 로그인한 화면
3-2) 좌석 배치 화면
3-3) 이미지 내보내기 예시
6. 기타
자잘한 버그가 발견되었지만 기능 이용에 문제되지 않아 그냥 두기로 함
이렇게 구축하는데 bolt 구독 비용까지 총 30불 정도 사용
