성운대학교 AI 혁신 세미나
바이브 코딩편
"지역과 함께하는 SUNG WOON" 성운대학교 교직원을 위한
Cursor Plan 모드 활용 업무 효율화 도구 개발 실습
미래휴먼사회복지학부 · AI말산업학부 · 안경광학과 특성화 대학
🎯 핵심 철학: 코딩을 배우는 게 아닙니다
복잡한 프롬프트 작성법을 배우는 것이 아닙니다. Cursor의 Plan 모드를 활용하여"무엇을 만들고 싶은지"만 전달하면, AI가 계획을 세우고 실행합니다. 우리는 그 계획을 검토하고 승인하는 역할을 합니다.
- • "버튼 크기 60px, 간격 10px로 해줘"
- • 세부적인 프롬프트 작성 필요
- • 단계별로 개별 기능 요청
- • 개발자적 사고방식 요구
- • "설문조사 앱 만들어줘"
- • 목표만 전달하면 AI가 계획 수립
- • 계획 검토 후 승인하면 실행
- • 결과 보며 대화로 개선
오전 세션
10:00 - 12:00 (2시간) | AI 코딩의 이해와 첫 경험
오리엔테이션: AI 코딩 시대의 도래
언어 모델과 코딩 도구의 만남이 가져온 혁명적 변화
💡 "코딩을 배우는 게 아니라, AI와 협업하는 법을 배웁니다"
다루는 내용:
- •AI 코딩이란? - ChatGPT와 Cursor의 결정적 차이
- •언어 모델 + 코딩 환경 = 업무 효율화의 새로운 패러다임
- •실제 업무 현장에서의 활용 사례 소개
- •Cursor 설치 확인 및 기본 인터페이스 익히기
💡 왜 지금 AI 코딩인가?
ChatGPT로 코드를 물어보고 복사-붙여넣기하던 시대는 끝났습니다. Cursor는 AI가 직접 코드를 작성하고, 파일을 만들고, 프로젝트 전체를 이해합니다. 이것이 "바이브 코딩"의 핵심입니다.
Cursor의 세 가지 모드 이해하기
Chat, Agent, Plan 모드의 원리와 활용법
💡 "세부 지시 대신, 목표를 말하세요"
다루는 내용:
- •Chat 모드: 궁금한 것을 물어보는 대화형 도우미
- •Agent 모드: AI가 직접 코드를 수정하고 파일을 생성
- •Plan 모드: 전체 프로젝트를 기획하고 실행하는 자율 에이전트
- •각 모드의 적절한 사용 시점과 전환 방법
🔮 Plan 모드의 마법
"설문조사 앱 만들어줘"라고 말하면, AI가 필요한 파일 구조를 계획하고, 하나씩 생성하며, 동작하는 앱을 완성합니다. 여러분은 계획을 검토하고 승인하기만 하면 됩니다.
서버 없이 브라우저에서 동작하는 앱 만들기
로컬 HTML/JS로 즉시 실행 가능한 도구 제작 실습
💡 "서버 설정 없이, 파일 하나로 완성되는 실용적 도구"
다루는 내용:
- •실습 1: 계산기 앱 - 기본 사칙연산부터 복잡한 계산까지
- •실습 2: 타자 연습기 - 속도와 정확도 측정 기능
- •실습 3: 부서 연락처 검색기 - JSON 데이터 활용
- •브라우저 앱의 장점: 설치 불필요, 어디서든 실행 가능
🎯 왜 브라우저 앱부터 시작하나요?
서버 설정, 데이터베이스 연결 등 복잡한 과정 없이 순수하게 "AI와 대화하며 만드는 경험"에 집중할 수 있습니다. 이 파일들은 USB에 담아 어디서든 실행할 수 있습니다.
🎯 오전 목표: "AI 코딩이 무엇인지 이해하고, 서버 없이 동작하는 간단한 앱을 직접 만들어봅니다. 복잡한 코딩 지식 없이도 도구를 만들 수 있다는 자신감을 얻습니다."
오후 세션
13:30 - 16:00 (2시간 30분) | 실전 프로젝트 개발 (Next.js + NestJS)
Plan 모드로 프로젝트 기획하기
Next.js/NestJS 기반 시스템을 AI와 함께 설계
💡 "완벽하지 않아도 됩니다. 시작이 중요합니다"
다루는 내용:
- •프로젝트 아이디어 브레인스토밍
- •Next.js(프론트엔드) + NestJS(백엔드) 구조 이해
- •Plan 모드에 요구사항 전달하는 방법
- •AI가 생성한 계획 검토 및 수정
부서별 프로젝트 아이디어:
🏗️ 좋은 기획의 비결
처음부터 모든 기능을 넣으려 하지 마세요. 핵심 기능 3-5개로 시작하고, 동작하는 것을 확인한 후 점진적으로 추가하는 것이 성공의 비결입니다.
프로젝트 개발 실습
로컬 서버에서 동작하는 풀스택 시스템 구축
💡 "막히면 AI에게 물어보세요. 그게 AI 코딩입니다"
다루는 내용:
- •Next.js 프론트엔드 + NestJS API 서버 구축
- •로컬 환경에서 서버 실행 및 테스트
- •기능 추가/수정을 위한 대화 방법
- •에러 발생 시 디버깅 요청하기
- •1:1 코칭 및 개별 지원
🔧 디버깅 팁:
- 1.에러 메시지 전체를 복사해서 AI에게 보여주기
- 2."이 부분이 왜 안 되는지 설명해줘"라고 물어보기
- 3."다른 방법으로 해결해줘"로 대안 요청하기
- 4.작은 단위로 테스트하며 문제 범위 좁히기
🔧 고급 팁: 디버깅의 기술
AI 코딩에서 가장 중요한 능력은 "문제를 명확하게 설명하는 것"입니다. "안 돼요"보다 "버튼을 클릭하면 아무 반응이 없어요"가 훨씬 좋은 질문입니다.
발표 및 공유, 그리고 다음 단계
결과물 시연과 지속 발전 방안
💡 "오늘이 끝이 아니라 시작입니다"
다루는 내용:
- •프로젝트 시연 (희망자 2-3분)
- •피드백 및 아이디어 공유
- •세미나 후 지속 개발 가이드
- •심화 과정 안내
🚀 심화 과정 안내:
만든 프로젝트를 인터넷에 공개하여 누구나 접근 가능하게
종합정보시스템, LMS 등 기존 시스템과 안전하게 연결
🌱 지속적인 성장을 위해
오늘 배운 것만으로도 다양한 업무 도구를 만들 수 있습니다. 하지만 더 복잡한 시스템, 실제 서비스 배포, 교내 데이터 연동이 필요하다면 심화 과정을 고려해보세요.
🚀 오후 목표: "Next.js + NestJS로 프론트엔드와 백엔드가 분리된 실제 시스템을 로컬에서 구축합니다. 실서버 배포는 하지 않지만, 실제 서비스와 동일한 구조를 경험합니다."
💡 더 깊이 배우고 싶다면?
오늘 세미나 후 다음 단계를 고려해보세요
심화 과정 ① 서버 배포 및 운영
오늘 만든 프로젝트를 인터넷에 배포하여 누구나 접근할 수 있는 서비스로 만들 수 있습니다.
심화 과정 ② 성운대 시스템 연동
성운대 종합정보시스템, LMS교육시스템 등 기존 시스템의 데이터를 안전하게 활용하는 방법을 배웁니다.
성운대학교 정보 자산의 안전한 활용
성운대학교의 정보 자산(학사정보, 인사정보, 시설정보 등)은 정보전산팀의 보안 검토와 적절한 권한 관리 하에 API를 통해 바이브 코더들과 연결될 수 있습니다. 이를 통해 교직원들이 직접 만든 도구가 실제 업무 데이터와 연동되어진정한 업무 효율화를 실현할 수 있습니다.
※ 실제 시스템 연동은 정보전산팀과의 협의 및 보안 검토가 필요합니다.
보안 주의사항
- • 실습에는 반드시 가상의 테스트 데이터만 사용해주세요
- • 실제 개인정보, 학생정보 사용은 금지됩니다
- • 실제 서비스 운영 시 정보전산팀 보안 검토가 필요합니다