순번	교습과목	교습비
1	게임원화_평일	600,000원(1개월)
2	게임그래픽_평일	600,000원(1개월)
3	게임프로그래밍_평일	700,000원(1개월)
4	게임기획_평일	700,000원(1개월)
5	게임이펙트_평일	600,000원(1개월)
6	게임원화_주말	400,000원(1개월)
7	게임그래픽_주말	400,000원(1개월)
8	게임프로그래밍_주말	500,000원(1개월)
9	게임기획_주말	500,000원(1개월)
10	웹툰_주말	400,000원(1개월)

희망분야	상담 후 신청 게임원화 과정 게임3D그래픽 과정 게임프로그래밍 과정 게임기획 과정 웹툰 게임엔진전문가 과정 포트폴리오 과정 영상 제작자 과정 IT 과정 노코드/바이브코딩
이름
연락처	- - 필수입력사항입니다.

희망분야	상담 후 신청 게임기획 게임원화 게임3D그래픽 게임프로그래밍 언리얼엔진 VR프로그래밍 웹툰
이름
연락처	- - 필수입력사항입니다.

희망분야	상담 후 신청 게임기획 게임원화 게임3D그래픽 게임프로그래밍 언리얼엔진 VR프로그래밍 웹툰
이름
연락처	- - 필수입력사항입니다.

#노코드 #bubble #replit

코딩 없이
당신의 아이디어를 현실로!
노코드, 누구나 할 수 있습니다.

KH정보교육원에서 누구나 쉽게 배우는 노코드 교육 2가지를 준비했습니다.
비전공자, 소규모 사업자, 대학생까지! 지금 바로 당신의 비즈니스와 프로젝트를 시작하세요.

Bubble(노코드) Replit(바이브코딩)

코딩을 몰라도
당신만의 웹사이트, 앱 OK!

누구나 아이디어 하나로 디지털 세상을
창조할 수 있는 시대가 열렸습니다.
이제는 코딩 경험이 없어도
누구나 웹사이트와 웹앱을 만들 수 있어요.

Part 1 - 노코드 강의

버블(Bubble.io)은 코딩 경험이 없어도
누구나 웹사이트와 웹앱을 만들 수 있는
대표적인 노코드 플랫폼입니다.
별도의 서버 구축 없이 바로 배포할 수 있어요.

강력한 시각적 UI 편집기

마우스로 요소를 끌어다 놓는 방식으로
디자인이 가능해요. 버튼, 이미지, 입력창 등을
원하는 위치에 배치할 수 있어요.

논리적 흐름 설정(Workflow)

사용자 클릭, 페이지 로딩, 데이터 입력 등의
행동에 따라 앱이 어떤 반응을 할지
직접 설정할 수 있어요.

데이터 설정 및 관리

데이터베이스를 용도에 맞게 생성하고
쉽게 관리할 수 있어요. '사용자', '게시글',
'댓글'같은
항목을 직접 구조화 할 수 있죠.

코딩 없이도 아이디어를 실현할 수 있는 세상,

이제 Bubble로 나만의 앱을 만들어보세요!

노코드 강의 신청하러 가기

Bubble로 제작한
실제 사이트를 만나보세요

Rumind

Rumind는 사용자가 개인 향수를 발견하고 추적하며 궁극적으로 구매할 수 있도록 도와주는 뷰티 플랫폼입니다. 스마트한 검색 및 데이터 기반 인사이트를 제공합니다.

Kowl

Kowl은 아티스트가 전통적인 음악 레이블을 우회할 수 있도록 설계된 네이티브 모바일 애플리케이션입니다. 아티스트가 새 앨범을 홍보할 수 있는 전략을 개발하는 데 도움을 줍니다.

Droom - Dream Journaling App

Droom을 통해 AI로 꿈을 캡처, 저널링, 시각화할 수 있습니다. 꿈을 빠르게 기록하고 패턴을 추적하며 장르별로 스타일링할 수 있습니다. 꿈이 사라지기 전에 꿈을 저장하세요.

Planit Event

Planit은 이벤트 기획의 모든 측면을 간소화하는 올인원 이벤트 관리 플랫폼입니다. 초대장 발송, 참석 추적, 초대 그룹 생성 등을 통해 개인화된 경험을 제공합니다.

Q&A

무엇이든 물어보세요이런 게 궁금하실 거예요

노코드 개념도 모르고
Bubble도 처음 듣는데 괜찮을까요?

네, 전혀 문제없어요! Bubble은 코드를 몰라도 웹앱을 만들 수 있게 도와주는 도구예요. 화면에 요소를 드래그해서 배치하고, 클릭 몇 번으로 기능을 설정할 수 있어서 초보자도 쉽게 시작할 수 있어요. 수업에서는 기본 개념부터 차근차근 설명해 드리기 때문에 누구나 따라올 수 있어요.

Bubble로 진짜 내가 직접
웹사이트를 만들 수 있나요?

네, 가능합니다! Bubble은 단순한 소개 페이지뿐 아니라 로그인, 게시판, 예약 기능, 지도 연동 등 복잡한 기능까지 구현할 수 있어요. 원하는 기능을 설정하고 디자인까지 직접 구성할 수 있어서, 내 아이디어를 실제로 눈에 보이는 웹앱으로 만들 수 있어요.

디자인 감각이나 개발 경험이
전혀 없는데도 할 수 있을까요?

할 수 있어요! Bubble은 복잡한 디자인 툴처럼 어렵지 않고, 기본적인 틀과 구성요소를 제공해 줘서 디자인에 자신이 없어도 깔끔한 결과물을 만들 수 있어요. 기능도 '이 버튼을 누르면 → 어떤 일이 일어난다' 식으로 쉽게 연결할 수 있어 개발 경험이 없어도 충분히 가능합니다.

Bubble로 만든 웹사이트는
실제로 출시하거나 사용해도 되나요?

네, 당연히 가능합니다! Bubble은 단순한 연습용 툴이 아니라, 실제로 서비스를 운영할 수 있을 만큼 강력한 플랫폼이에요. 유료 플랜을 이용하면 도메인 연결, 사용자 데이터 관리, API 연동 등도 가능해서 스타트업, 개인 프로젝트,소규모 창업용 웹사이트로 충분히 활용할 수 있어요.

bubble 강의 커리큘럼

처음 배우는 분도 단계적으로 탄탄하게!상세한 커리큘럼을
확인해 보세요

chapter 1. 노코드와 Bubble 기초 이해

노코드란 무엇인가? 왜 주목받는가?
Bubble의 주요 개념 및 화면 구성 이해
페이지 제작, 요소 배치, 기본적인 UI 설정 방법
(실습) 나를 소개하는 미니 프로필 페이지 만들기

chapter 2. 데이터 구조와 UI 연결

Bubble에서 데이터타입과 필드 생성
반복 그룹(Repeating Group)을 활용한 리스트 출력
상세 페이지로 이동하고 개별 데이터를 보여주는 방법
(실습) 나만의 기록장 만들기

chapter 3. 워크플로우와 사용자 상호작용

워크플로우의 기본 동작 구조 이해
사용자 이벤트 처리
사용자 입력값을 기반으로 데이터 처리 및 UI 반영 방법
(실습) 나만의 성향 테스트 앱 만들기

chapter 4. 유저 인증 & 이미지 파일 처리

Bubble의 사용자 시스템 이해 / 회원가입, 로그인, 로그아웃 흐름
개인화 UI 구성
이미지 업로드 컴포넌트 사용법 및 DB 저장 방법
(실습) 나만의 기록장 업그레이드

chapter 5. 외부 API 연동 및 고급 기능

Bubble에서 외부 서비스와 데이터 주고 받기
지도 API 연동: 위치 기반 정보 표시
인터페이스 제어 고도화
(실습) 우리 동네 맛집지도 만들기

chapter 6. 최종 프로젝트 개발

각자의 주제에 맞춘 프로젝트 설계
필요한 기능 구성 및 Bubble 내 구현
디자인 피드백, 데이터 구조 점검, UX 개선
최종 프로젝트 실습
  - 우리 동네 축제·행사 지도
  - 나만의 독서기록 노트
  - MBTI/테토&에겐 테스트 앱
  - 개인 브랜딩 페이지
  - 기상 인증 커뮤니티

개발 없이도
내 아이디어를
온라인에 펼친다

코드를 몰라도 괜찮습니다. Replit은 당신의 아이디어가
현실이 되는 가장 빠르고 쉬운 무대입니다.
지금, 브라우저 하나로 디지털 창작의 세계에
뛰어들어 보세요.

Part 2 - 바이브코딩 강의

Replit은 별도의 설치 없이 웹 브라우저에서 HTML, CSS, JavaScript는 물론 다양한 언어로 코딩하고
결과를 실시간 확인할 수 있는 플랫폼입니다. 프로그래밍 기초로 매우 유용합니다.

설치 없이 즉시 시작

따로 개발 툴이나 프로그램을 설치할 필요 없이,
웹 브라우저만 열면 바로 코딩을 시작할 수 있어요.
복잡한 개발 환경 세팅이 필요 없어요.

실시간 미리보기와
결과 확인

코드 수정과 동시에 오른쪽 창에서 결과를 바로
확인할 수 있어요. 즉각적인 피드백을 통해 실습 효율이
높아지고, '코드→결과' 흐름을 쉽게 이해할 수 있어요.

협업 기능 (멀티 에디팅)

여러 명이 동시에 하나의 프로젝트에서
작업할 수 있어요. 실시간 채팅, 주석 달기,
수정 내용 추적도 가능해서
팀 프로젝트나
코딩 수업에 매우 유용해요.

이제 브라우저 하나로,

당신의 아이디어가 코드가 됩니다!

바이브코딩 강의 신청하러 가기

Replit으로 제작한 실제 사이트를 만나보세요

GuruQore

GuruQore는 AI + 바이브 마케팅 과정 웹사이트 입니다. 커뮤니티에 참여하여 강의 내용을 배우고, 커리큘럼을 미리 살펴보고, 참여하는 등 과정을 탐색하는 데 필요한것을 제공합니다.

Wayfinder Calculator

우리 회사의 라우팅 기술을 통해 해운 회사들이 얼마나 많은 비용과 CO₂을 절약할 수 있는지를 정확히 보여주는 인터랙티브 해상 계산기입니다. 복잡한 효율성 계산에 쉽게 접근할 수 있습니다.

Sonic Pics

소닉 픽처스는 이미지를 개인화된 음악 추천으로 변환하는 세련된 웹 애플리케이션입니다. 업로드된 이미지와 콘텐츠를 분석하여 고유한 재생 목록을 큐레이션합니다.

The FontCrafter

FontCrafter는 필기를 완전히 사용 가능한 글꼴로 변환할 수 있는 재미있는 앱입니다. 모든 애플리케이션에서 사용할 수 있는 TTF 파일로 내보낼 수 있습니다.

Q&A

무엇이든 물어보세요이런 게 궁금하실 거예요

코딩을 한 번도 해본 적이 없는데, Replit을 써도 되나요?

네, 당연히 가능합니다! Replit은 완전 초보자도 쉽게 접근할 수 있도록 설계된 온라인 개발 도구예요. 복잡한 설치 없이 웹 브라우저에서 바로 코드를 입력하고 실행해볼 수 있어요. 아주 쉬운 예제부터 시작하니 안심하고 도전해보세요.

Replit에서는 어떤 프로그래밍 언어를 사용할 수 있나요?

HTML, CSS, JavaScript 같은 웹 언어는 물론이고 Python, Java, C++, Node.js 등 50개 이상의 언어를 지원해요. 처음에는 웹 제작을 위한 기본 언어부터 시작해도 충분합니다.

Replit을 쓰면 어떤 걸 만들 수 있나요?

간단한 웹사이트, 계산기, 퀴즈 앱, 미니 게임, 포트폴리오 페이지 등 다양하게 만들 수 있어요. 특히 아이디어를 빠르게 테스트하거나 배운 코드를 실습해보는 데 아주 효과적입니다.

컴퓨터 사양이 낮아도 Replit을 사용할 수 있나요?

네, 사용 가능합니다!
Replit은 클라우드 기반 플랫폼이라 PC나 노트북 사양에 크게 영향을 받지 않아요. 인터넷만 연결되어 있다면 어디서든 작업할 수 있어요.

replit 강의 커리큘럼

처음 배우는 분도 단계적으로 탄탄하게!상세한 커리큘럼을
확인해 보세요

chapter 1. 바이브코딩과 Replit 기초 이해

바이브코딩이란 무엇인가? 왜 주목받는가?
Replit, Cursor등 바이브코딩 도구비교
Replit 기본 사용법
(실습) 나를 소개하는 미니 프로필 페이지 만들기

chapter 2. 개발을 위한 웹의 기본구조

웹의 동작방식과 생태계 이해
웹의 3요소: HTML/CSS/JS 역할 이해
Replit을 통한 웹구조 파악 및 수정
(실습) 프로필 페이지 테마 적용하기

chapter 3. ChatGPT를 통한 서비스 기획

생성형 AI를 활용한 서비스 기획 도입
사용 목적, 기능, 사용자 흐름 정리하기
나만의 프로젝트 방향 찾기
(실습) ChatGPT와 함께 나만의 웹앱 기획안 만들기

chapter 4. 서비스의 확장 - 외부 API 연동

API란 무엇인가? / 외부 API의 개념 이해
API연동 방식과 개발방법의 이해
간단한 지도 API 연동 체험
(실습) 학원위치 안내 지도 제작

chapter 5. 데이터를 유지하기 DB연동

웹에서 데이터를 유지하는 방법
Supabase란? 초보자도 접근 가능한 실시간 데이터베이스
Replit에서 Supabase 연결해보기
(실습) 익명 응원 메시지 저장소 만들기

chapter 6. 최종 프로젝트 개발

각자의 주제에 맞춘 프로젝트 설계
필요한 기능 구성 및 Replit을 통한 구현
디자인 피드백, 데이터 구조 점검, UX 개선
최종 프로젝트 실습
  - 나잘알 챗봇 만들기
  - MBTI/테토&에겐 테스트
  - 나만의 브랜딩 페이지
  - 1문 1답 커뮤니티
  - 익명 응원 메시지 받기 페이지