교사가 직접 만드는 학생 출결 관리 시스템, '바이브 코딩'으로 시작하기

 

안녕하세요! 오늘은 최근 제가 푹 빠져 있는 '바이브 코딩(Vibe Coding)'과 그 핵심 도구인 '커서(Cursor)' 활용기를 공유해 보려고 합니다.

평소 학생들의 최소성취수준 관리를 위해 출결 체크 시스템이 있으면 좋겠다고 생각만 하다가, 코딩 초보인 저도 AI의 도움을 받아 직접 웹앱을 개발해 보기로 했습니다.

 

 

 

💡 왜 '커서(Cursor)'인가요?

코딩이라고 하면 복잡한 문법부터 떠올리시죠? 커서는 다릅니다. 제가 "이런 기능이 필요해"라고 자연어로 입력하면, AI가 알아서 코드를 작성하고 수정까지 해줍니다. 마치 똑똑한 조수와 함께 프로젝트를 진행하는 기분이에요.

📝 실전! 나만의 학생 출결 관리 앱 만들기

저는 이번에 학생들을 위한 '귀여운 출결 체크 시스템'을 만들고 있어요. 제가 구상한 앱의 핵심은 이렇습니다:

1. 귀여운 UI/UX: 학생들이 매일 들어오고 싶게 파스텔톤 컬러와 애니메이션 활용.
2. 실시간 출결 체크: 시간표별로 클릭 한 번으로 출결 기록.
3. 위험군 알림: 결석률이 1/3에 가까워지면 캐릭터가 걱정스러운 메시지를 보내주는 기능!

🚀 작업 과정 (바이브 코딩 맛보기)

1. 프롬프트 입력: Ctrl + L을 눌러 AI에게 구체적인 기능을 설명합니다. (예: "귀여운 느낌의 파스텔톤 출결 버튼을 만들어줘.")
   나의 프롬포트
   [프롬프트] "최소성취수준 출결 관리를 위한 학생용 웹앱을 만들고 싶어. 다음 기능을 포함해줘.
   1. UI 컨셉: 아주 귀엽고 따뜻한 느낌. 파스텔톤 컬러 사용.
   2. 기능:
      • 오늘 시간표가 나오고, 각 시간마다 '출석/결석'을 체크하는 버튼이 있음.
      • 체크할 때마다 '오늘의 출석률'이 캐릭터 애니메이션(예: 출석하면 캐릭터가 웃음)과 함께 표시됨.
   3. 데이터: 각 과목별 결석 횟수를 누적해서 보여주고, 1/3 이상 결석 시 '위험해요!' 경고 메시지가 뜨게 해줘.
   4. 기술: HTML, CSS, JavaScript로 구성하고, Firebase와 연결할 수 있는 구조로 기본 코드를 짜줘."
      
      자동으로 구성되는 코드들
      
      
      
   
   
   
2. 코드 생성: AI가 바로 코드를 생성해 줍니다.
   

   

   
   
   
   
3. 피드백 및 수정: 결과물을 보고 "버튼이 너무 작아, 좀 더 크게 해줘"라고 말하면 즉시 반영됩니다. (이 과정이 정말 쉽고 재밌어요!)
   - 나의 피드백: 시간표를 입력할 수 있도록 일 별로 교체 되는 경우 교체 가능하게 그리고 출결 체크의 경우 시작과 끝만 누르면 가운데 교시는 알아서 다 들어가록 추가해달라고 했어

 

 

여러 수정을 통해서 데모버전을 만들어 봤습니다.