가이드

3-1. 한눈에 보기

아래는 실제 해설 화면과 똑같은 부품으로 만든 예시예요. 직접 눌러서 넘겨 봐도 돼요.

1class Box {
2    int value;
3 
4    Box(int value) {
5        this.value = value;
6    }
7}
8 
9public class Main {
10    public static void main(String[] args) {
11        Box a = new Box(1);
12        Box b = a;
13        b.value = 5;
▶14        Box c = new Box(7);
15        System.out.println(a.value + " " + c.value);
16    }
17}

(아직 출력 없음)

↑ 맨 위로

3-2. 가장 중요한 규칙: ▶는 "실행 직전"

짧은 예시의 두 단계를 나란히 놓고 보면 이렇게 돼요.

1x = 3
▶2x = x * 2
3nums = [1, 2, 3]
4nums[1] = x
5print(x, nums)

1x = 3
2x = x * 2
▶3nums = [1, 2, 3]
4nums[1] = x
5print(x, nums)

• 노랗게 반짝 = 직전 단계와 비교해 값이 바뀌었거나 새로 생긴 변수예요. 배열·리스트는 바뀐 칸만 반짝여요.
• 화살표(→ arr[2], → @2)가 다른 곳을 가리키게 되거나, 힙 객체·딕셔너리에서 값이 바뀐 필드·항목도 그 줄만 반짝여요. 새로 생긴 변수와 객체는 이름까지 반짝여요.
• 반짝임은 한 번만 지나가요. 놓쳤다면 ◀ 이전 → 다음 ▶으로 다시 보면 돼요.

직접 넘겨 보세요.

▶1x = 3
2x = x * 2
3nums = [1, 2, 3]
4nums[1] = x
5print(x, nums)

(아직 출력 없음)

↑ 맨 위로

3-3. 단계 표시의 네 종류

↑ 맨 위로

3-4. 변수 (콜 스택)

💭 비유:식판 쌓기. 함수를 부를 때마다 새 식판(칸)이 맨 위에 올라가고, 함수가 끝나면 맨 위 식판부터 치워요. 일은 언제나 맨 위 식판에서 해요.

화면에서는

• 파란 테두리 칸 = 지금 실행 중인 함수(맨 위). 그 아래 칸들은 “내가 부른 함수가 끝나길 기다리는 중”이에요.
• 칸 제목 = 함수 이름. 예: main() total() Main.main(), 생성자 Box(), Python 맨 바깥 코드는 전역
• 칸 안 = 그 함수의 지역 변수와 매개변수. 이름 옆 작은 글씨는 자료형(int, int[5], str …)이에요.
• 전역 / static 칸: C의 전역 변수, Java의 static 필드. 어느 함수에서나 같은 값을 봐요.

재귀가 이해되는 순간

가이드 예시 total(3) → total(2) → total(1)이 가장 깊이 들어간 순간의 콜 스택이에요.

• 같은 이름 n이 여러 개 보이는 건 오류가 아니에요. 호출마다 자기 변수를 따로 가져요. 같은 이름이지만 다른 칸 = 다른 변수예요.
• return할 때마다 맨 위 칸이 하나씩 사라지고, 아래 칸이 돌려받은 값으로 계산을 이어가요.
• 공부 팁: 함수 반환 단계의 초록 표시만 따라가도 결과가 조립되는 과정이 보여요 — return 1 → return 3 → return 6

▶1def total(n):
2    if n == 1:
3        return 1
4    return n + total(n - 1)
5 
6print(total(3))

(아직 출력 없음)

↑ 맨 위로

3-5. 힙 (객체)

💭 비유:물건은 창고(힙)에, 변수에는 창고 번호표만. Java에서 new Box(1)을 하면 객체는 힙에 만들어지고, 변수에는 “그 객체가 어디 있는지”(참조)만 들어가요.

화면에서는

• 변수 값이 → @1 처럼 보이면 “힙의 @1번 상자를 가리킨다”는 뜻이에요. 오른쪽 아래 힙 (객체)에서 @1을 찾아요.
• 힙의 상자 = 객체 하나. 맨 위 회색 줄은 실제 클래스 이름, 아래는 필드와 값이에요.
• 두 변수가 똑같이 → @1이면 같은 객체 하나를 함께 가리켜요. 한쪽에서 바꾸면 다른 쪽에서도 바뀐 값이 보여요. 아래 예시에서 b.value = 5를 실행하는 순간 힙의 @1 상자 안 value 줄이 반짝이는 걸 확인해 보세요.

• this도 참조예요. 생성자·메서드 안에서 this → @1 = “지금 다루는 객체는 @1”.
• 필드 이름 옆 괄호 x (Parent), x (Child): 부모와 자식이 같은 이름의 필드를 각각 가진 경우예요. 둘은 다른 칸이에요.

• 정처기 단골 함정: 생성자 안에서 오버라이딩된 메서드 호출 → 콜 스택 맨 위가 자식 메서드로 바뀌는 순간, 자식 필드가 아직 기본값(0)인 것을 힙에서 확인해 보세요.
• 힙 칸은 비어 있으면 아예 보이지 않아요. Python은 리스트·객체를 변수 칸 안에 바로 보여 줘서 힙 칸이 나오지 않아요.

1class Box {
2    int value;
3 
4    Box(int value) {
5        this.value = value;
6    }
7}
8 
9public class Main {
10    public static void main(String[] args) {
▶11        Box a = new Box(1);
12        Box b = a;
13        b.value = 5;
14        Box c = new Box(7);
15        System.out.println(a.value + " " + c.value);
16    }
17}

(아직 출력 없음)

↑ 맨 위로

3-6. 포인터·참조 화살표

• C 포인터 p int * → arr[1] = p에 arr[1]의 주소가 들어 있다 = “p가 arr[1]을 가리킨다”.
  • *p = 가리키는 곳의 값 (아래 그림에서는 arr[1]의 값 6)
  • p++ 하면 화살표가 → arr[2]로 한 칸 이동하는 게 보여요(바뀐 화살표는 노랗게 반짝여요)
  • → NULL = 아무것도 가리키지 않음

• Java 참조와 C의 malloc 메모리도 같은 화살표 표기(→ @1)를 써요. Java에서 비어 있는 참조(null)도 → NULL로 보여요.
• Python 변수는 화살표 없이 값(리스트·객체 포함)을 칸 안에 바로 보여 줘요.

↑ 맨 위로

3-7. 값 읽는 법

↑ 맨 위로

3-8. 출력 (stdout)

• 프로그램이 지금까지 화면에 찍은 전부가 쌓여 보여요.
• 노란 글씨 = 이번 단계에서 새로 찍힌 부분. 어느 줄이 무엇을 찍었는지 바로 연결돼요.
• 출력 결과 문제를 틀렸다면: 마지막 단계의 출력과 내 답을 한 글자씩 비교해 보세요(공백·줄바꿈 위치).

1 2
3 4

↑ 맨 위로

3-9. 조작법

↑ 맨 위로

3-10. 언어별로 다르게 보이는 점

↑ 맨 위로

3-11. 추천 공부 순서

1. 먼저 손(종이)으로 끝까지 추적해서 답을 내요.
2. 해설에서 ▶ 재생으로 한 번 전체 흐름을 봐요.
3. 내 추적과 달라지는 지점을 슬라이더로 찾아 그 단계에서 멈춰요 — 어떤 변수가 예상과 다른지.
4. 함수 호출 / 함수 반환 단계와 노랗게 반짝이는 값만 골라 다시 봐요.
5. 핵심 정리로 개념을 정리하고, 내 말로 학습자 해설을 남겨요.

↑ 맨 위로