상단은 몰입, 중간은 이해, 하단은 신뢰로 이어지는 메인 구조
학생은 먼저 눌러보고 싶고, 학부모는 중간에서 과정과 가격을 이해하고, 하단에서 리포트와 강사를 보며 안심하도록 흐름을 다시 설계했습니다.
전문 튜터와 1:1 또는 소수 프로젝트 수업
관련 전공, 현업 경험, 온라인 티칭 경험을 갖춘 강사가 입문부터 프로젝트까지 직접 수업합니다. 맞춤형 난이도 조절과 과제 피드백이 핵심입니다.
스크래치부터 텍스트코딩까지 이어지는 4개 핵심 코스
스크래치, 파이썬, 알고리즘, 프로젝트. 너무 많은 과정을 늘어놓기보다 실제 등록과 운영에 필요한 4개 코스로 압축해 이해를 쉽게 만들었습니다.
수업 후 학습리포트와 결과물 기록
매 수업 후 오늘 배운 내용, 실행 결과, 강사 코멘트, 다음 목표를 학부모가 바로 확인할 수 있습니다. 리포트는 문장이 아니라 성장 기록입니다.
블록코딩과 파이썬코딩을 바로 해보고, 제출하면 리포트 팝업이 열립니다
다크·퍼플·네온 톤에서 먼저 몰입하게 하고, 체험 결과를 리포트 팝업으로 보여준 뒤 중간의 과정·가격 이해 구간으로 자연스럽게 이어지게 했습니다.
엔트리 기반 CodeAI 블록코딩 체험기
메인페이지 안에서 엔트리 블록코딩 워크스페이스를 바로 열고, 블록을 배치해 움직이기/말하기/반복 흐름을 체험해보세요. 제출하면 리포트 팝업과 추천 과정이 이어집니다.
클릭하면 EntryJS 라이브러리를 로드하고 메인페이지 안에 블록코딩 워크스페이스를 바로 띄웁니다.
코드를 직접 실행해보는 서버 실행형 첫 체험
짧은 파이썬 코드를 수정하고 실행해보세요. 제출하면 실제 실행 결과를 바탕으로 리포트가 팝업으로 표시됩니다.
아이들이 직접 만들고 끝까지 완성합니다
블록코딩부터 텍스트코딩까지, 수업의 끝은 결과물입니다. 게임, 애니메이션, 문제해결 기록, 프로젝트 포트폴리오가 남습니다.
움직이며 배우는 스크래치
캐릭터 움직임, 충돌 판정, 점수판을 만들어 보며 순서·반복·조건을 자연스럽게 익힙니다.
나도 파이썬 개발자
출력, 조건문, 반복문을 통해 미니 게임, 계산기, 퀴즈 프로그램을 직접 완성합니다.
결과물을 남기는 프로젝트 코스
웹, 앱, AI 활용, 자동화 프로젝트로 연결해 실제 발표와 포트폴리오까지 이어집니다.
CodeAI에서 시작해야 하는 4가지 이유
체험과 결과를 메인에서 바로 확인
상담을 먼저 열지 않아도, 스크래치와 파이썬 체험 결과를 바로 보고 수업 진입 장벽을 낮춥니다.
코스와 가격을 한 화면에서 투명하게 안내
메인페이지에서 4개 과정과 가격을 모두 확인할 수 있어, 학부모가 비교와 결정까지 빠르게 할 수 있습니다.
수업 후 리포트 접근이 쉬운 구조
학부모포털과 리포트 샘플 링크를 전면 배치해 수업을 하면 무엇을 받는지 가입 전에 먼저 보게 합니다.
4개 핵심 과정에 집중한 간결한 설계
너무 많은 메뉴와 코스 대신 실제 운영과 전환에 필요한 핵심 4개 코스로 시작 경로를 단순화했습니다.
스크래치부터 프로젝트까지, 4개 핵심 코스
단계는 분명하게 유지하되, CodeAI는 메인에서 한 번에 이해되도록 4개 코스로 압축했습니다. 과정별 결과물과 추천 대상을 같이 보여줍니다.
밝은 카드형 UI로 과정과 가격을 한눈에 이해하세요
중간 구간은 화이트 기반 카드형 레이아웃으로 구성해 학부모가 대상, 수업 방식, 가격을 어렵지 않게 비교하도록 만들었습니다.
운영 메모
현재 표시 가격은 MVP 예시가입니다. 운영 전에는 실제 수강료로 한 번만 수정하면 됩니다. 각 코스 카드와 신청 모달은 같은 데이터 소스를 사용하도록 구성했습니다.
| 코스 | 대상 | 수업 방식 | 가격 |
|---|
* 가격은 메인페이지에 표시되는 공개 기준가 예시입니다. 실제 운영가로 바로 교체 가능하게 데이터화했습니다.
우리 아이에게 맞는 과정을 간단히 추천해보세요
CodeAI는 경험·학년·목적을 기준으로 과정을 안내합니다. 결과 화면에서 바로 신청으로 이어지게 설계했습니다.
1. 코딩 경험이 있나요?
2. 학년/대상은 어떻게 되나요?
3. 수업 목적은 무엇인가요?
선택하면 추천 과정이 여기 표시됩니다
3개의 질문을 모두 선택하면 시작하기 좋은 과정과 이유, 권장 수업 방식, 바로 신청 버튼이 나타납니다.
화이트 + 블루 톤의 리포트 화면으로 마지막 신뢰를 만듭니다
하단은 완전히 밝고 정돈된 화면으로 바꿔, 수업 후 무엇을 받는지와 어떻게 관리되는지를 가장 쉽게 보여주는 구간으로 설계합니다.
파이썬 입문 · 조건문으로 퀴즈 만들기
2026-03-20 · 학생명 홍길동오늘의 목표
입력값과 조건문을 연결해 사용자가 정답을 맞히면 점수가 올라가는 퀴즈를 만든다.
강사 코멘트
출력과 조건문 연결은 안정적이었습니다. 오답 처리 문장을 스스로 고쳐본 점이 좋았습니다.
결과물
콘솔 퀴즈 1문항 완성, 정답 시 점수 표시. 다음 차시에는 3문항 버전으로 확장합니다.
다음 목표
반복문을 이용해 여러 문항을 연속으로 풀 수 있게 만들고, 마지막에 총점을 출력합니다.
마지막엔 강사와 운영 신뢰를 확인합니다
리포트 다음에는 강사 카드가 이어지게 배치해, 학부모가 결과와 사람을 같은 흐름에서 확인한 뒤 신청까지 이어지도록 구성했습니다.
최초 3가지 정보만으로 신청을 시작하세요
학생 이름, 연락처, 구분만 입력하면 과정 신청이 접수됩니다. 선택한 과정과 유입 경로는 자동으로 기록되도록 설계했습니다.
체험 또는 과정 선택
스크래치/파이썬 체험 후 추천을 받거나, 4개 과정 중 바로 선택합니다.
3가지 정보 입력 + 포인트 이어받기
학생 이름, 연락처, 초등·중등·고등·일반인 구분만 입력하면 접수됩니다.
추천 과정·리포트 안내
접수 후 추천 과정, 준비 안내, 학부모 리포트 예시 확인 흐름으로 자연스럽게 이어집니다.
과정 신청하기 · 포인트 이어받기
자주 묻는 질문
놀이처럼 시작해 실력으로 이어지는 첫 코딩, 지금 바로 시작해보세요
체험, 과정 안내, 가격, 리포트 미리보기, 간편 신청까지. CodeAI는 메인페이지 한 장에서 처음 시작하는 학부모의 결정을 끝낼 수 있게 구성했습니다.