@창욱

자료 공유시 출처와 저작자를 반드시 밝혀주세요! 하네스 엔지니어링이란 AI에게 작업환경을 구축해주는 일을 일컫습니다. 각자가 원하는 AI의 작업 환경은 다르기 때문에 이 영역에 정답은 없다고 생각합니다. 여러 자료들을 훑어보시며 취향에 맞는 부분을 취사 선택하시면 되겠습니다. 사실 바이브코딩 강의는 유튜브에만 검색해도 차고 넘칩니다. 그럼에도 도름스에서 연수를 진행하고 선생님들만의 커뮤니티를 형성하는 이유는 바이브코딩과 교육적 도메인을 함께 고민하는 공간은 많지 않기 때문입니다. 앞으로도 연수가 보다 체계화 되고 선순환 시스템을 구축할 수 있도록 최선을 다하겠습니다. 교육에 AI가 어떻게 들어와야 적절한 것일까?라는 막연한 질문에 답을 교육현장의 주인인 교사들이 직접 찾아나가는 여정에 모두 모두 동참해주세요! 순수하게 열정을 가지고 나눔에 동참해주신 선생님들, 그리고 바쁜 학기말 늦은 시간에도 열심히 강의를 들어주신 선생님들 모두에게 깊은 존경을 표합니다. 개성 넘치는 각 선생님들의 자료가 한자리에 모이니 참 유익한 시간이었습니다! 1. 보평고등학교 김태영 선생님

2. 경기북과학고등학교 홍창욱 선생님

3. 학남고등학교 최시강 선생님

4. 잠원중학교 최진영 선생님

• 학생부 업무, 생활지도 관련한 체계적인 하네스와 에이전트 시스템을 소개해주셨습니다! 조만간 오픈 소스의 형태로 공유주신다고 하시네요 🥹

5. 포항중앙고등학교 정유신 선생님

지난 강의 자료 1. DoRm 1주차 바이브코딩 입문 강의 - 김태영 선생님의 바이브코딩 무작정 따라하기

-연수 원고 📂

2. DoRm 바이브코딩 기초 강의 자료 공유(3차시) - 홍창욱

하하.. 😅

도름스에 앱이 점점 쌓이면서 점점 각 선생님들이 가지신 비전에도 교집합이 생겨나는 것 같습니다. 🌀 비슷한 문제의식과 해결 방식을 지닌 앱들도 늘어나고 있는 것 같습니다. 이번 기회에 도름스 선생님들의 합작 프로젝트가 탄생하면 어떨까요? 그건 단순히 혼자 할 수 없었던 한단계 성장한 앱을 만드는 결과 뿐 아니라 엄청난 배움의 계기가 될 것이라고 확신합니다. 함께 프로젝트를 만들면서 논의를 하고, 때로는 논쟁도 생기고, 또 동료의 작업 방식을 엿보고 하다보면 서로 성장할 수 밖에 없더라고요. 제가 처음 본격적인 바이브코딩 프로젝트를 진행했던 시작은, 운좋게도 @김태영 태영이와 협업하여 저희 학교 기숙사 관리 프로그램 ZUDO를 만드는 작업이었습니다. 이미 태영이가 구축한 ZUDO라는 프로젝트에 중간에 들어갔어요. 시작을 협업으로 했다는건 참 운이 좋았던것 같습니다. 선생님들도 도름스에 수많은 인력풀을 활용하셔서 협업에 도전해보세요! 바이브코더 맞춤 GitHub 협업 방식을 정리해봤습니다. 궁금한 점은 언제든 말씀해주세요!

도름스로 열심히 활동중이신 일원분들 중 링크트리 예쁘께 꾸미고 싶으신 분 계시다면 활용해주세요! 링크트리를 맞추면 뭔가 다 함께 소속감도 생기고 좋지않을까 해서 공유드려요 ㅎㅎ 바이브코딩 AI 툴에게 깃헙 링크 알려주시고 거기 프롬프트 마크다운 파일을 읽어보라고 하면 선생님 블로그, SNS 등 설문하면서 링크 트리를 선생님에 맞게 맞춰나갈 수 있도록 안내해줄거에요. 색상조합도 취향에 맞춰 변형해보세요 ㅎㅎ 링크트리 만드신 분들은 저에게 말씀해주시면 하루에도 수많은 외부 샘들께 보내지는 도름스 링크트리에 선생님들 링크트리로 넘어가는 버튼도 만들어두겠습니다. 헤헤

귀엽쥬? 🌻 24시간 돌아가는 저의 맥미니와 함께 🧑🏻‍💻

하나의 주제를 바탕으로, 지금까지 만든 결과물들이 어떻게 탄생하게 됐는지 개인적인 경험을 담았습니다. 대단한건 없지만 바이브코딩 하는 평범한 교사가 어떤 생각을 가지고 일을 벌려(?) 왔는지 살펴보시죠!

제목이 좀 자극적이긴한데.. AI 시대의 중요한 가치에 대해 이야기하는데 너무 유익해서 공유드려 봅니다.. 끝까지 보면 넘 좋을거 같습니다 구글X CBO 인터뷰입니다 인간적 교감과 관계는 AI가 대체할 수 없다 AI로 일을 편하게 하려 하는게 아닌, 더 똑똑하게 하려고 하라 문서 편집 소프트웨어를 다운로드 받아 쓸 필요가 없는 시대, 5분이면 만들어내는 시대의 일자리 변화 등에 대해 이야기합니다

클로드코드와 함께 열심히 구축한 클로드코드 맞춤 하네스를 코덱스가 그대로 따르게만 해놨는데요 아이러니 하게도 코덱스가 작성 당사자인 클로드 코드보다 하네스를 훨씬 잘 준수하네요.. 이게 무슨 일이람? 클로드코드로 AI와의 협업 구조를 만든 다음 일은 코덱스를 시켜야 하는건가요..? ㅋㅋㅋ 그래도 아직 저는 클로드코드와의 협업이 더 익숙하고 자연스럽긴 합니다 특히 글 적는거나 인간적인 컨택은 클로드코드가 훨씬 자연스럽긴해서.. ㅎㅎ 샘들은 어떤걸 더 선호하시나요?

대박 너무 직관적이네요 ㅋㅋ

너무 행복하네요.. 😂 사실상 일하는걸 수 있는데 뭔가를 만들어낸다는건 늘 행복해요..

재밌는데 의외로 유익해요 ㅋㅋ 개인적으로 지금까지 바이브코딩을 하면서 느낀 점은 UI/UX, 보안 쪽은 따로 공부가 필요하구나 였습니다. AI는 구조상 UI/UX에 있어 완벽할 수 없더라고요. 영상을 보는것만으로도 앞으로 작업하시면서 한 번쯤 고민하며 만들게 되지 않을까하여 공유드립니다 🙂

IB가 뭔가유 부장님 @Easy쌤

나는 도름중학교 교무도름부 교무부장 오늘도 앞구르기로 교무실에 입장한다

서울: sonline20.sen.go.kr, .sen.ms.kr, .sen.es.kr, .sen.hs.kr 부산: (없음) 대구: dge.go.kr 인천: gclass.ice.go.kr 광주: gsuite.gen.go.kr 대전: dje.go.kr, djsch.kr, .djsch.kr 울산: (없음) 세종: edu.sje.go.kr, .sjedues.kr, .sjedums.kr, .sjeduhs.kr 경기: goedu.kr, goe.go.kr, .goe.go.kr 강원: (없음) 충북: cberi.go.kr 충남: g.cnees.kr, g.cnems.kr, g.cnehs.kr, .cnees.kr, .cnems.kr, .cnehs.kr 전북: (없음) 전남: e.jne.go.kr, m.jne.go.kr, h.jne.go.kr 경북: .gyo6.net 경남: gne.go.kr, g.gne.go.kr 제주: onedu.jje.go.kr === 이렇게 조사했는데 맞을까요? 오류나 추가사항 있으면 댓글로 알려주세요! 혹시나 개발하시다 필요하시면 활용하세욥 ㅎㅎ 참고로 학생들도 활용하는 도메인이다보니 교사인증용으로는 한계가 있습니다만 학교 구성원 인증은 이거로 가능할듯 합니다

0. 본 수업의 목적은 학생들이 바이브코딩을 통해 수학 문제 및 개념 이해를 돕는 시각화 자료를 만들어 보면서, 학생들의 창의력과 수학적 역량, AI 활용 역량을 평가하기 위함입니다. 꼭 수학 수업이 아니더라도 적용이 가능한 방식의 수업일 것 같습니다. 저희 학교 학생들은 이 수업을 통해 모두 바이브코딩을 한 번 쯤 경험해보게 됩니다. 비록 아직은 라이트하게 html 파일 하나 만들어보는 경험이지만.. 시작점으로는 적당하다고 생각합니다. 적당한 프롬프트와 학생들이 함께 쓸 오픈라우터 키(총알)만 있다면 도전해볼 수 있는 수업입니다! 1. 수업 때 학생들과 같은 와이파이에 연결하면 사이트에 접속할 수 있습니다.

(와이파이 연결을 끊고, 터미널 실행을 멈추면 더 이상 제작 사이트에 학생들이 접속할 수 없는 내부망입니다. 제 컴퓨터의 실제 IP가 아닙니다!) 2. 학생들이 주소에 접속하면 저의 오픈라우터 API키로 호출 가능한 챗봇이 셋팅되어있습니다.

• 교과 수업 활용 목적으로 학교 예산 10만원 가량을 품의 결재 받고 사용해요. gemini 가성비 모델을 사용하는데 퀄리티가 나쁘지 않고 두시간 수업해도 학급당 만원이 안나옵니다. ㅎㅎ

• 처음에 문제를 올려 달라고 합니다. AI는 풀이를 제공하지 않도록 프롬프팅 되어 있습니다. 학생이 직접 풀이를 해야 하고, 풀이가 틀린 경우 AI가 힌트를 주는 등 과외 선생님 역할(?)을 합니다. 풀이가 확정되고나면 시각화 자료를 함께 만들자고 AI가 제안합니다. 그때부터 본격적인 바이브코딩(?) 시간이 됩니다.

3. 작품이 완성되고나면 갤러리에 업로드하고 다 함께 공유합니다. 똑같은 문제의 풀이에 대해서, 특별한 지시가 없는 경우 동일한 형태의 html이 완성되고, 자신만의 창의적 아이디어를 프롬프트로 넣은 경우 보다 독창적인 결과물이 나오게 된 것을 확인할 수 있습니다. P. S. 학생들 결과물 몇 가지를 공유드립니다!!

혹시 궁금하신 분들은 소스 코드를 오픈 소스로 공유드릴까 합니다. 필요한 분들이 계실까요?

바로 '분리수거' 작업이라고 생각합니다. Open AI 개발자 표현을 빌려봤는데요. 저는 하나의 세션을 통해서 제가 원하는 기능이 완성 되고 나면 전역에 만들어둔 분리수거 스킬을 호출합니다. 그 세션 동안 저와 클로드가 나눈 대화를 모두 전사하며 대화와 작업에 어떤 마찰들이 있었는지 돌아보고, 전역 또는 프로젝트 하네스에서 원인을 찾고 유지보수 하는 스킬입니다. 어떤 형태로든 이러한 메타 하네스(?)는 꼭 구축하시길 강추드립니다. 계속 하다보면 나중엔 분리수거 할 필요가 점점 줄어들고 제 AI가 점점 똑똑해지는걸 느낍니다. 하네스 엔지니어링의 본질은 결국 '같은 실수를 두 번 하지 않게, AI가 딱 내가 원하는 방식으로 일하게' 만드는 시행착오 과정인 것 같습니다. 🧐 이미 비슷한 셋팅을 해두셨다면 꿀팁 혹은 인사이트를 댓글에 공유 해주세요 🥺

괜찮습니다. 아무마아알 @김태영 @김태영 @김태영 @김태영 @김태영

자유게시판에서 바이브코딩 관련 글의 분량이 다소 많은 편이라 아예 따로 빼버렸습니다! 일단 저부터.. 바이브코딩 글을 잔뜩 적다보니.. ㅋㅋ 이제 맘평히 바이브코딩 이야기를 이 공간에 나누셔도 좋습니다 👏

1차시는 바이브코딩을 할 수 있는 모든 환경설정, 그리고 간단한 체험을 해볼 수 있는 차시입니다. 클로드 또는 챗지피티 사용하고 계신 AI에게 해당되는 .md 문서를 던져주고 엔터치시면 가이드가 시작됩니다. 2차시는 바이브코딩을 이해하기위한 기초 용어들을 다뤄보고 실제 나만의 사이트를 만들어 배포해보는 수업입니다.

3차시는 바이브코딩 AI를 잘 다룰 수 있는 역량을 길러보는 하네스 엔지니어링 기초 강의입니다.

이 자료 말고도 바이브코딩 관련한 강의자료를 꾸준히 올려드릴 예정입니다. 제 생각에 요정도 공부하면 정말 기초적인 사용법은 이해하고 있다고 볼 수 있지 않나 해서 구성해본 3차시 수업자료입니다..! 공유는 얼마든지 하셔도 괜찮지만, 출처만 잘 남겨주시기 바랍니다. 감사합니다 .^^

@지오퍼스 선생님께서 UI 디자인 관련 질문해주셔서 모든 분들께 설명드려요..! UI라는건 창작의 영역이고, 음악이나 디자인이나 제가 전공자는 아니지만.. 이러한 영역은 결국 래퍼런스가 꼭 필요하더라고요. 모방은 창작의 어머니라고.. ㅎㅎ.. 그리고 AI는 확률 높은 선택을 하는 기계이기 때문에 AI에게 디자인을 맡기면 필연적으로 결과물이 마음에 안들 수 밖에 없습니다. 우리가 예쁜 디자인이라고 인식하는건 흔한 디자인과는 괴리가 있기 때문이에요. AI에게 래퍼런스를 던져주는 방법은 정말 다양할 수 있으니 선생님들의 아이디어나 방법도 공유해주세요! 간편한 방법의 사이트 하나 공유드려보자면

요 사이트 추천드립니다..! 디자인 래퍼런스를 프롬프트 형태로 바로 copy 할 수 있게 도와줘요. 무료 템플릿도 쓸모있는게 많습니다. ㅎㅎ 살핌 랜딩 페이지의 각종 손글씨 느낌도 여기서 출발해서 만들었어요!

방과후에서 활용한 수업자료 공유드립니다. 똑같은 프롬프트, 똑같은 모델 (opus / effort: medium)도 하네스에 따라 과정과 결과물이 다르다는걸 체험해보는 수업자료입니다. 활동을 통해 모두가 똑같은 셋팅에서 동일한 프롬프트를 복붙하고 결과물을 뽑아냅니다. 그 후 걸린 시간, 엔터 횟수, 모든 기능이 작동하는지, 함정에 빠졌는지 등 html에서 기입을 쭉 하면 성적표가 뜹니다! 선생님들도 모의고사 풀어보세용 ㅎㅎ

최근 객체 지향 UI 디자인과 관련된 책을 읽고 있는데 아주 흥미롭습니다. 예시로 도서관의 도서 장부 시스템을 들더군요.

• 태스크 지향의 예시: 처음 시스템에 들어갔을 때 도서 등록, 도서 삭제 이렇게 버튼이 뜨고 도서 등록을 누른 다음 책 제목 등 정보를 입력
• 객체 지향의 예시: 처음 시스템에 들어갔을 때 등록된 책 목록이 쭉 보임. +버튼을 누르면 등록이 가능하고 등록된 책 옆에 휴지통 버튼을 누르면 그 책이 삭제되고, 연필 버튼을 누르면 정보 수정이 가능함.

생각해보면 바이브코딩으로 만들어진 플랫폼은 태스크 지향으로 만들어지기 쉽습니다. 왜냐하면 저희가 AI에게 작업을 요구하는 프롬프트가 그럴 수 밖에 없기 때문이죠. 예컨대 '도서 등록 및 삭제가 가능한 도서 관리 시스템 만들어줘' 라고 입력하게 되잖아요. 원인을 덧붙이자면 책에서도 이야기 하지만 이미 저희가 쓰는 90% 가량의 플랫폼이 태스크 지향 UI 디자인으로 이루어져 있어 나쁜 사례가 훨씬 많다는 겁니다. AI는 확률 기계에 불과하니 이런 오답을 답습할 가능성이 농후하죠. 그래서 요즘은 제가 설령 태스크 지향으로 프롬프팅해도 알아서 객체 지향 UI를 구현할 수 있도록 시스템을 구축하는 방향으로 UI 관련 하네스 엔지니어링을 다듬어 보고 있습니다. 여러분들도 이러한 관점에서 만드신 플랫폼을 살펴보시기 바랍니다. 사용자 입장에서는 플랫폼에 들어갔을 때 해야할 일들만 잔뜩 나열되어 있으면 숨이 막히고 뭐하는 곳인지 파악하기 어렵습니다. 그냥 버튼을 눌러보며 가지고 놀고 싶을 뿐

영상에 나오는 사람은 고등학교를 중퇴한 open AI 연구원인데요. 학습의 개념이 바뀌고 있다고 이야기합니다. 내가 학습하고자 하는 대상을 AI에게 이해하라고 요구하는게 아니라, 학습 대상의 맥락를 이해하는데 AI를 활용해야 하는게 중요하고 이런 식으로 AI를 활용한다면 이용자인 사람이 정말 빠르게 새로운 분야를 학습할 수 있다고 강조합니다. 유튜브로 넘어가서 재생하신 다음, 설정에서 자막>자동번역>한국어로 하시면 자막과 함께 보실 수 있습니다!

oh-my-claudecode를 만드신 분과 그 팀이 함께 출연합니다. 하네스 엔지니어링이라는게 정답이 있는게 아니라 '내가 AI와 어떻게 협업하고 싶은지' 나의 페르소나에 따라 전혀 다르게 정의될 수 있다는걸 보여주는 좋은 사례인것 같습니다. 결과적으로 내가 마음에 들면 되는게 하네스 엔지니어링인가 봅니다..!

검증 하네스를 구축하는 데 교육 평가의 이론이 쓰인다는게 흥미롭네요 🧐

바이브코딩에 중독돼서 OTT를 안봐요. 교무실에서 드라마 얘기에 낄 수 없고 혼자 안드레 카파시가 어쩌고 같은 소리만 하게 되는데 어쩌죠?