Polyglot Tutor — 3단계 학습 흐름 완전한 UI/UX 반영
PT
Polyglot Tutor
12-Language Platform
5 / 5 언어 설정완료
▼
언어 레이어 팝업 (다중 선택)
✕
C++
Go
Kotlin
Python
TypeScript
Java
C#
Ruby
Swift
Rust
PHP
JavaScript
0. 시작하기FREE
00코딩이 뭔가요?
01첫 출력 Hello World
1. 기초FREE
02변수와 타입
03연산자와 표현식
04조건문 if/else
05반복문 loop
06함수 선언
2. 데이터FREE
07문자열 다루기
08배열/컬렉션
09딕셔너리/맵
10형변환
3. 코드 구조화PRO
11스코프와 변수 범위
12클래스/구조체
13인터페이스/추상화
4. 실전 기술PRO
14에러 처리
15파일 입출력
16비동기/동시성
5. 더 잘 만들기PRO
17재귀와 탐색
18디자인 패턴 기초
U
수강생님
PRO Plan Active
⚙️
1. 기초 / 04. 반복문 loop
리스트 출력하기 (Loops)
🌓
진도율 87%
① 개념 수립 FREE
② 타이핑 연습 FREE
③ AI 튜터 실습 PRO
§ STAGE 1 — 언어 횡단 비교 카드 및 은유적 개념 학습
변수(Variable)란?
데이터를 담아두는 이름표입니다. 언어마다 선언 방식이 달라도 "이름 = 값" 이라는 본질은 전혀 다르지 않습니다.
💡 비유: 변수는 냉장고 칸막이 라벨과 같습니다. 어디에 무엇을 보관했는지 알려주죠!
C++ Lv.1 시스템
int age = 25;
std::string name = "Alice";
double height = 1.72;
auto score = 98.5; // auto 추론
타입을 직접 명시해야 합니다. auto는 컴파일러 판단에 맡깁니다.
Go Lv.2 플랫폼
var age int = 25
name := "Alice" // 단축 선언
height := 1.72
const MAX = 100
:= 기호로 타입 자동 추론이 가능합니다. const는 상수.
Kotlin Lv.2 플랫폼
var age: Int = 25
val name = "Alice" // 불변
val height: Double = 1.72
var score = 98.5
val 은 변경불가, var 은 변경가능. 현대적이고 설계가 안전합니다.
Python Lv.3 스크립트
age = 25
name = "Alice"
height = 1.72
is_student = True
타입 선언이 없습니다. 동적 타입으로 실행 중에 결정됩니다.
📖 스토리로 이해하는 변수 구조
📦
변수(Variable)
택배 상자처럼
내용물을 담는 그릇
🏷️
이름(Name)
상자 위에 붙이는 라벨
찾기 쉽게 이름을 짓죠
📐
타입(Type)
상자의 크기와 형태
숫자용, 텍스트용 상자
🎁
값(Value)
상자 안의 실제 내용물
언제든 바꿀 수 있어요
§ STAGE 2 — Ghost 타이핑 인터페이스 및 메모리 시각화 흐름도
실습 언어:
Python ✔
Go
C++
TypeScript
정확도 87%
Ghost (정답)
age = 25
name = "Alice"
height = 1.72
is_student = True
내 입력
age = 25
name = "Alice"
height = 1.72
is_student = True
⌨ 31 / 64 타 ⏱ 00:42 ✗ 오타 1 [ESC] 재시작
🔄 데이터 흐름도 및 메모리 스택 시각화
변수(Var) age = 25 이름(Name) "age" 메모리(RAM) 0xAFF2 값(Value) 25 (int)
입력하는 즉시 RAM 주소에 값이 담기고 이름표가 연결되는 과정을 형상화했습니다.
🔍 시스템 아키텍처 & 코드 실행 라이프사이클 (상세 도식)
단순 연결이 아닌, 분기(Decision)와 피드백 루프(Loop)를 포함한 실제 컴퓨터 아키텍처의 동작 방식입니다. 꺽은선(Bent Lines)과 다층 레이어 구조로 시각화했습니다.
Source Code (IDE) Runtime Engine (Compiler/Interpreter) Syntax Error / Feedback Bytecode / Binary Kernel (OS) ⚡ CPU Core 🧠 RAM Stack
💡 도식의 기술력: SVG의 path 명령어를 통한 orthogonal(직각) 연결, defs를 활용한 다중 화살표 헤더, 그리고 stroke-dashoffset 애니메이션 기술을 적용한 복합 도식입니다.
§ STAGE 3 — 템플릿 코드 구현 및 AI 튜터 힌트 시스템
Step A. 템플릿 선택
📋
투두 리스트
항목 관리·배열 실습
🧮
계산기
사칙연산·조건문
🔑
로그인 폼
문자열 검증
📊
성적 테이블
정렬 및 필터 적용
⛅
날씨 카드
API 데이터 파싱
Step B. 투두 리스트 제작 (TypeScript)
main.ts ● saved
// 🏠 앱의 제목을 화면에 보여주는 코드를 작성하세요
console.log("=== 나의 투두 리스트 ===");
// 📦 할일 항목을 담을 목록(배열) 변수를 만드세요
// 💡 배열은 여러 개를 담는 큰 상자입니다 (배열 기호 [] 사용)
// 🔁 목록을 하나씩 꺼내서 화면에 보여주는 반복문
잠김 (이전 단계 완료 후 해제)
✨
코봇 (AI 튜터)
안녕하세요! 투두 리스트를 만들어볼까요?
첫 번째 목표인 앱 제목 출력은 아주 잘 하셨어요! 🎉
이제 두 번째 목표입니다. 배열 변수를 선언해보세요. 할 일을 담을 빈 상자를 준비한다고 생각해보세요.
힌트 주세요!
L1 키워드 힌트
TypeScript에서 빈 배열을 선언할 때는 const 와 [] 기호를 사용해요.
💻 실행 결과 미리보기
=== 나의 투두 리스트 ===
...결과 대기 중...