[2025 다했니X바이브코딩] 재밌는 사람
1. 일단 시작해 보는 바이브코딩
오픈 카톡에서도 뉴스에서도 인스타에서도 스레드에서도 바이브코딩 관련 이야기를 수없이 마주했다. 궁금하고 해보고 싶기는 한데, 만사 다 귀찮은 게 문제였다. '바이브코딩 한 번 해보고 싶다.'는 마음이 '바이브코딩 한 번 해봐야겠다.'는 마음가짐으로 전환되지가 않았다. 갈팡질팡하던 와중에 다했니 선생님께서 다했니 API를 활용한 바이브코딩 연수를 기획해 주셨다. 그녀는 실로 참 기획자가 아닐 수 없다. 30분 남짓 진행된 연수를 들으며 감히 이런 생각을 해보았다.
오~ 뭐야 코딩을 진짜 1도 몰라도 되네? 바이브코딩 생각보다 복잡한 게 아니네. 그러니까 제미나이랑 열심히 수다를 잘 떨면 되는 거잖아.
문득 초등학교 방과 후 컴퓨터 교실의 풍경이 떠올랐다. 그 수업에서 했던 홈페이지 만들기 활동은 유년기 시절 받은 공교육과 사교육을 통틀어 가장 흥미가 생기지 않는 분야였다. html 문서에서 무언가를 만들어내는 일은 꽤나 비효율적인 작업이라는 생각이 들었다. '인간의 말귀를 못 알아듣는 컴퓨터와 씨름을 해서 어렵고 복잡한 고난의 행군을 거쳤는데, 이게 뭐야! 겨우 색깔 하나 바꿔주고, 틀 하나 만들어 줬잖아.' 이렇듯 프로그래밍 세계와의 첫 조우에서 아로새겨진 편견은 성인이 되어서도 여전히 남아있었다. 그래서 '코딩'이라는 단어가 내게 주는 느낌은 '어렵다, 복잡하다, 모르겠다.'였다.
왜 갑자기 이런 선사시대 이야기를 구구절절 적냐면, 나처럼 방과 후 컴퓨터 교실의 홈페이지 만들기 수업이 지겹고 힘들었던 코딩무식자들도 재미있게 할 수 있는 게 바로 바이브코딩이기 때문이다. '코딩'이라는 단어가 분명 들어가 있지만, 코딩의 ㅋ을 몰라도 제미나이랑 실컷 수다 떨면서 이걸 분석해 봐라, 저걸 만들어봐라, 요걸 다시 고쳐봐라 하니, 뚝딱 코드를 넘겨준다. 참으로 신통방통한 일이 아닐 수 없다. 그러니까 '아이디어를 가졌지만 코딩에 대한 기술이 전무한 개인'도, '아이디어 구현이 가능하다'는 가능성을 보았달까. 하지만 대부분의 일들이 그러하듯이 '할 수 있다.'는 것이 '잘할 수 있다.'는 것을 의미하는 것은 아니다.
어찌 됐든 다했니 플러스 서드파티 개발을 시작하기 위해 제미나이와 나누었던 최초의 대화는 이거였다.
나는 다했니(www.dahandin.com) 다했어요(www.dahandout.com)를 이용한 바이브코딩 웹을 제작하려고 해. 내가 제작하고 싶은 플랫폼은 다했니의 과제별 쿠키 통계를 통해, 1년 동안 학생들의 과제 활동을 점검할 수 있는 일종의 자기 분석자료를 만들어보고 싶어. 아래는 다했니에서 제공하는 API야. 내가 만들고 싶은 플랫폼 구현이 가능할까? _다했니 Open API 설명서 (v1)
원하는 걸 요구하면서, 다했니에서 공개한 Open API설명서(v1)를 복붙해서 함께 넣었다. 몇십 초가 채 지나지도 않아 제미나이는 답변을 시작했다. 제미나이는 내가 바라는 건 현재 공개된 API로는 구현이 불가능하다고 했다. 거기서 끝난 게 아니라 그렇다면 현재 API로 구현 가능한 기능까지 정리해서 알려줬다. 그때부터 우리는 계속 주거니 받거니 하며 수다를 떨었다.
내가 막연하게 지니고 있던 아이디어를 제미나이랑 계속 이야기를 나누는 과정을 통해 점점 구체화되는 점이 매우 흥미로웠다. 제미나이를 닦달하며 만들어낸 코드를 메모장에 복붙하고 html로 저장만 하면 끝! 방과 후 교실 홈페이지 만들기 트라우마 완치?
html파일이 50개가 쌓일 무렵, 제법 마음에 드는 초안이 완성되었다. 요금제를 결제하지 않은 상태에서도 AI를 이렇게나 부려먹을 수 있음에 감탄이 절로 나오고 있던 와중에, 제미나이가 태업(?)을 하기 시작했다. 아직 더 변경하고 싶은 사항이 무척 많았지만 제미나이는 내 요구사항을 더 이상 잘 이해하지 못하는 것 같았다. 뭐랄까 "거 좀 적당히 하쇼!"라는 의중을 넌지시 전하는 것만 같았던 제미나이...
내 말 못 알아듣는 척하는 거니? 우리 좋았잖아...
코딩무식자의 습격...이제 슬슬 코딩에도 프롬프트 엔지니어링에도 문외한인 내 한계가 드러나는 거 같았다. 제미나이도 열받고 나도 열받은 상태라 일단 html50에서 멈췄다. 그리고 나름 열심히 만든 우리의 첫 프로젝트를 드디어 웹에 올리는 작업을 시도했다. 다했니 연구대회에 참여하시는 분들이 https://www.netlify.com/ 를 쓰시는 것 같아서 나도 일단 이 사이트에서 회원가입을 했다. 음... 그런데 요상하게도 갑자기 깃헙 계정이 있냐고 물었다. 깃헙 계정을 만들어야만 하는 거 같아서 묻지도 따지지도 않고 yes! ok! yes! ok! 를 하다 보니 깃헙 계정이 생겼다. 혼자 난리부르스를 떨면서 아무거나 눌러보고 있는 코딩무식자를 애잔하게 보던 남편(개발자다.)은 깃헙 데스크톱 앱 설치, 내가 작업한 메모장 html의 파일명을 index로 바꾸기, workplace 폴더를 생성해서 어떻게 작업을 이어가야 하는지, commit 하고 push 해서 배포하는 과정 등을 알려주었다. 그런데 너무 빨리 휙휙 알려줘서 아직 완전 내 것으로 체화하지는 못했다. 아주 복잡한 키오스크 작동법을 10초 만에 휘리릭 배웠지만 혼자서는 온전한 햄버거를 주문할 수 없는 것 같은 그런 느낌.
어찌 됐든 우당탕당 어찌어찌해서 완성한 나의 첫 프로젝트. 객관적으로 봐도 아직 많이 허술하지만, 나에게는 소중한 첫 결과물이다.
다했니 카페에 올리기 위한 설명서도 제미나이와 같이 정리해 보았다.
2025년 다했니 교육연구대회_바이브코딩
한 페이지에 담는 1년의 성장!
⭐다했니 다했어요 성장기록 보고서 "상담준비 다했니?(Dahandincounsel)"⭐
1. 웹 설계 필요성
1.1. 배경: 정량적 데이터의 상담 활용 효율성 제고
'다했니? 다했어요!'는 학생들의 학급 활동 참여, 과제 수행, 보상 획득 및 사용 내역을 쿠키(경제), 초코칩(칭찬/보상), 뱃지(역량)라는 정량적 지표를 효과적으로 기록합니다.
다했니에 이미 탑재된 '학생 리포트'와 '우리 반 리포트' 기능 또한 상담 자료로 활용이 가능하지만, 실제 상담 시 여러 탭과 화면을 번갈아 가며 정보를 확인해야 하는 번거로움이 있었습니다. 또한, 다했니 학급에 소속되지 않은 학부모에게 우리 학급의 쿠키, 초코칩, 뱃지, 과제 활용 등 다했니를 활용한 학급 운영 방안을 재차 설명해야 하는 수고로움이 있었습니다.
1.2. 설계 목적: 데이터 기반, 학생 중심 상담 시스템 구축
제가 개발한 웹 솔루션은 교사가 다했니 API를 통해 학생의 누적 활동 데이터를 실시간으로 조회하고, 이를 교육 전문가적 해석(교사 입력 활용 방안) 및 시각화 자료와 결합하여 A4 한 페이지에 출력 가능한 '학생 성장 기록 보고서'로 즉각 변환하는 것을 목표로 합니다.
"상담준비 다했니?"를 사용하여 교사의 교육과정 운영 방안, 학생 활동 성찰, 정량적 데이터를 일목요연하게 제시하고 상담 자료의 가독성 및 활용도를 높이는 방향으로 웹을 설계했습니다.
2. 교사 사용자 입장에서의 프로그램 사용 방법(User Guide)
2.1 인증
다했니 Open API Key를 [API Key 입력] 란에 입력합니다. 본 프로그램은 API Key와 학생 코드를 활용하여 누구나 쉽게 보고서를 생성할 수 있도록 설계되었습니다.
2.2 모드선택
1명의 학생만 조회할 경우 '개별 학생 조회', 전체 학급 또는 다수의 학생을 조회할 경우 '전제 학생 일괄 조회'를 선택합니다. (일괄 조회 시 코드 목록을 쉼표(,)로 구분하여 입력)
2.3 학급 활용 방안 입력
학급에서 운영한 쿠키/초코칩/배지의 '획득/사용(또는 소개/획득)' 구체적 방안을 해당 텍스트 영역에 입력합니다.
2.4 보고서 항목 선택
보고서에 포함할 항목(쿠키 활동, 초코칩 활동, 뱃지 활동, 총평 섹션)을 체크박스를 이용해 선택 출력 할 수 있습니다.
2.5 보고서 생성
[성장 기록표 출력] 버튼 클릭. API 통신을 통해 실시간 데이터를 수집하고, 설정된 내용과 결합하여 '성장 기록 보고서'를 생성합니다.
2.6 출력
2.7 인쇄 및 PDF 저장 가능
3. 본 프로그램의 특장점 (Key Features)
3.1 다했니 데이터의 유기적 통합 : 다했니의 정량 데이터를 맥락에 맞게 결합하여, 교사의 현장 활용성을 높여줍니다.
3.2 데이터 시각화 : 학생의 쿠키 자산 현황을 원형 그래프로 시각화하여 저축/사용 비율을 직관적으로 보여주며, 뱃지 획득 현황을 미니 포트폴리오 형태로 제시합니다.
3.3 학급 맞춤형 보고서 : 교사가 직접 학급의 운영 방안 및 획득/사용 규칙을 상세히 입력하여 보고서에 반영할 수 있어, 학급 맞춤형 성장 기록이 가능합니다.
3.4 상담 활성화 : 보고서 하단에 '칭찬과 다짐(학생)' 및 '격려의 한 마디(학부모)'를 위한 전용 입력칸을 배치하여, 보고서가 단순한 자료 전달을 넘어 소통과 성찰의 도구로 활용되도록 지원합니다.
4. 시급한 개발 과제(프로토타입 고도화)
본 웹이 교사-학생-학부모 간의 협력적 성장을 실질적으로 지원하기 위해, 정보 입력/저장 및 배포 프로세스 개선이 최우선 목표입니다.
4.1 학생 친화적 접근성 확보 : 교사가 생성한 링크를 통해 학생이 접속할 경우, API Key 입력 없이 다했니 학생 코드 입력만으로 보고서를 조회할 수 있도록 개선합니다.
4.2 학생 성찰 내용 입력 및 저장 기능 구현 : 학생이 보고서 내 '칭찬과 다짐' 등 성찰 영역에 내용을 입력하고 저장할 수 있는 임시 저장/영구 저장 기능을 개발합니다.
4.3 상담지 확정 및 공유 프로세스 구축 : 교사가 학생의 작성이 완료된 후 '마감' 또는 '확정' 처리를 할 수 있는 기능을 추가하여, 학생의 수정 접근을 차단합니다. 이후, 교사는 완성된 상담 자료를 학부모에게 전용 공유 링크로 안전하게 전달할 수 있도록 합니다.
5. 향후 개발 희망사항(장기 로드맵)
5.1 시계열 데이터 분석 추가 : API 연동이 더욱 확장되면, 학생의 쿠키/초코칩/배지 획득 및 사용 추이(월별/분기별)를 분석하여 선 그래프로 시각화하는 기능을 추가하여, 과정중심평가의 도구로 활용한다.
5.2 자동 요약 및 피드백 기능 고도화 : API에서 획득한 정량 데이터를 기반으로 학생 활동 참여 경향(예 : 저축형, 적극 참여형, 도전형)을 자동으로 분석하여 총평 섹션에 제시하는 AI기반 자동 총평 기능을 개발한다.
5.3 다양한 보고서 템플릿 지원 : 중, 고등, 특성화학교 등 다양한 교육 환경에 맞춘 보고서 템플릿을 추가하여 활용 범위를 넓힌다.
배포 URL: https://sojocosmos-dev.github.io/dahandincounsel/
이제는 위 배포 URL에 들어가도 내가 이 브런치에 정리한 장면을 볼 수는 없다. 이 글을 미처 다 정리하기도 전에, 대대적인 수정을 감행했기 때문이다. 다음 브런치글은 제미나이로 초안을 잡은 나의 첫 프로젝트를 VS code와 Claude를 활용해 수정한 내용을 정리해보려 한다.
ⓒ2025. kantorka All right reserved
