핵심 개념 1 — 설계도와 제품

붕어빵 비유

틀은 하나지만 붕어빵은 여러 개 찍어낼 수 있습니다. 각 붕어빵은 팥, 슈크림, 피자처럼 서로 다른 속을 가질 수 있습니다.

프로그래밍으로 옮기면: 클래스(class) = 설계도, 틀. 객체(object) = 설계도로 찍어낸 실제 물건입니다.

6주차에서 배열 6개로 흩어져 있던 데이터(x, y, speed…)를 하나의 설계도 안에 묶는 것이 클래스입니다.

핵심 개념 2 — class 기본 문법: 점진적으로 만들기

공(Ball)의 설계도를 처음부터 한 줄씩 만들어 보겠습니다.

Step A: 빈 클래스 — 껍데기부터

먼저 아무것도 없는 빈 설계도를 만들어 봅니다.

class Ball {

}

가장 단순한 클래스는 class Ball { }입니다. ’Ball이라는 설계도를 만들겠다’는 뜻입니다.

구조를 보면 class 이름 { } — 중괄호 { } 안에 설계도의 내용을 넣습니다. 지금은 비어 있으니까 아무 기능도 없는 빈 설계도입니다.

클래스 이름은 대문자로 시작하는 것이 관례입니다. ball이 아니라 Ball로 쓰면, 나중에 let ball = new Ball();처럼 클래스(대문자)와 변수(소문자)를 구분하기 쉽습니다.

이 상태에서도 let ball = new Ball();로 객체를 만들 수 있습니다. 다만 아직 데이터와 동작이 없는 빈 객체입니다.

Step B: constructor 추가 — “이 객체의 setup()”

빈 설계도에 초기화 코드를 넣어 봅니다.

class Ball {
  constructor() {

  }
}

constructor() { }를 설계도 안에 넣었습니다. constructor는 객체가 만들어질 때 실행되는 생성자입니다.

P5.js에서 setup() 함수는 프로그램이 시작될 때 딱 한 번 실행되는 함수입니다. constructor()도 똑같습니다 — 객체가 만들어질 때 딱 한 번 실행되는 함수입니다.

6주차에서 함수에 매개변수를 넣었던 것처럼 constructor에도 똑같이 넣을 수 있습니다.

class Ball {
  constructor(x, y) {
    // 여기에 초기화 코드를 작성
  }
}

constructor(x, y) — 공을 만들 때 x좌표와 y좌표를 받겠다는 뜻입니다. 6주차에서 function drawFlower(x, y) { }에 매개변수를 넣은 것과 같은 원리입니다.

Step C: this가 왜 필요한지 — 실패 체험

constructor 안에 코드를 넣어 봅니다. 일부러 틀린 코드부터 살펴봅니다.

class Ball {
  constructor(x, y) {
    x = x;  // this 없이!
    y = y;
  }
}

let ball = new Ball(200, 100);
console.log(ball.x);  // undefined ← 저장 안 됐음!

콘솔에 undefined가 나옵니다. ’정의되지 않았다’는 뜻입니다. 200을 넣었는데 왜 그럴까요?

x = x;는 매개변수 x를 자기 자신에 대입한 코드입니다. 공의 서랍에 값을 넣지 않습니다. 매개변수 x는 constructor가 끝나면 사라집니다.

이제 this를 붙여 봅니다.

class Ball {
  constructor(x, y) {
    this.x = x;   // ← this 붙임!
    this.y = y;
  }
}

let ball = new Ball(200, 100);
console.log(ball.x);  // 200 ← 저장됐다!

this를 붙이면 200이 출력됩니다.

this는 ‘이 객체 자신’이라는 뜻입니다.

일상에서 자기소개할 때 ‘내 이름은 OO입니다’라고 말하듯, 코드에서는 this.name = 'OO'라고 씁니다. this는’나 자신’입니다.

this.x = x는 ’이 공의 x좌표(this.x)를 매개변수로 받은 값(x)으로 설정한다’는 뜻입니다. this가 ’이 공의 서랍’을 열어주는 열쇠입니다. this 없으면 서랍에 저장이 안 됩니다.

= 기호 왼쪽의 this.x는 저장할 장소(이 공의 서랍), 오른쪽의 x는 넣을 값(밖에서 받아온 값)입니다. 이름이 헷갈리면 왼쪽은 저장 위치, 오른쪽은 값으로 구분하세요.

Step D: 고정값 프로퍼티 추가

x, y는 매개변수로 받았습니다. 그런데 매번 같은 값인 데이터는 어떻게 할까요? 예를 들어 공 크기를 항상 30으로 하고 싶다면 다음과 같이 합니다.

class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 30;    // ← 매개변수 없이 고정값!
  }
}

this.size = 30; — 매개변수로 받지 않고, 고정값 30을 직접 넣었습니다. 모든 공이 처음에는 크기 30으로 만들어집니다.

매개변수로 받을지, 고정값으로 둘지는 우리가 정합니다. 위치는 공마다 다르게 하고 싶으므로 매개변수로 받고, 크기는 같게 하고 싶으므로 고정값으로 둘 수 있습니다.

이렇게 객체에 저장된 데이터 — this.x, this.y, this.size — 를 공식 용어로 프로퍼티(property)라고 부릅니다. ’속성’이라는 뜻입니다.

Step E: 객체 만들기 — new 키워드

설계도가 완성되었으니, 이제 실제 공을 찍어 봅니다.

let ball1 = new Ball(200, 100);
let ball2 = new Ball(300, 250);

new Ball(200, 100) — ‘Ball 설계도로 새 객체를 만들어라. x는 200, y는 100으로.’

new는 설계도로 새 객체를 만드는 동작입니다. new를 쓰면 constructor가 실행되고, 그 안에서 this.x = 200, this.y = 100, this.size = 30이 설정됩니다.

ball1과 ball2는 같은 설계도(Ball)에서 나왔지만, 서로 다른 위치를 가진 별개의 객체입니다.

Step F: 데이터 확인하기 — 점(.) 표기법

console.log(ball1.x);     // 200
console.log(ball2.x);     // 300
console.log(ball1.size);  // 30

객체의 프로퍼티에 접근할 때는 점(.)을 씁니다. ball1.x — ‘ball1의 x좌표’. ball2.x — ‘ball2의 x좌표’. 각각 독립적인 값입니다.

값을 바꿀 수도 있습니다. ball1.size = 80;을 하면 ball1만 커지고, ball2는 여전히 30입니다. 각 객체는 자기만의 저장 공간을 가집니다.

핵심 개념 3 — 메서드: 동작 추가하기

지금 Ball 클래스에는 데이터(프로퍼티)만 있습니다. 이 공이 할 수 있는 동작을 추가해 봅니다.

display() — 자기 자신을 그리기

6주차에서는 function drawFlower(x, y, size) { ... }처럼 함수를 만들었습니다. 클래스 안에도 함수를 넣을 수 있으며, 이를 메서드(method)라고 부릅니다.

차이점은 function 키워드를 쓰지 않고, 매개변수 대신 this에 저장된 데이터를 사용한다는 점입니다.

class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 30;
  }

  display() {                                    // ← 여기 추가!
    ellipse(this.x, this.y, this.size);
  }
}

display() — 이 공을 화면에 그리는 메서드입니다. ellipse(this.x, this.y, this.size) — 자기 자신의 위치와 크기로 원을 그립니다.

6주차에서 drawFlower(x, y, size)처럼 매개변수를 넘겼습니다. 클래스에서는 this에 이미 저장되어 있으니까 매개변수 없이 display()만 호출하면 됩니다.

move() — 자기 자신을 이동시키기

이동 기능도 추가합니다. constructor에 속도 매개변수도 같이 추가합니다.

class Ball {
  constructor(x, y, speedX, speedY) {            // ← 속도 추가!
    this.x = x;
    this.y = y;
    this.speedX = speedX;
    this.speedY = speedY;
    this.size = 30;
  }

  move() {                                       // ← 여기 추가!
    this.x += this.speedX;
    this.y += this.speedY;
  }

  display() {
    ellipse(this.x, this.y, this.size);
  }
}

move()는 자기 자신의 위치를 자기 자신의 속도만큼 이동시킵니다. 5주차의 x += speed;가 this.x += this.speedX;로 바뀐 형태입니다. this가 붙었을 뿐, 논리는 같습니다.

메서드 호출

let ball1 = new Ball(200, 100, 3, 2);
ball1.move();       // ball1이 이동
ball1.display();    // ball1이 화면에 그려짐

메서드 호출도 점(.)을 씁니다. ball1.move() — ‘ball1아, 움직여라.’ ball1.display() — ‘ball1아, 너를 그려라.’ 마치 명령을 내리는 것처럼 읽힙니다.

핵심 개념 4 — setup()/draw()에서 조립하기

이제 전체 코드를 조립해서 실제 움직임을 확인합니다.

전체 코드 — Ball 클래스 + setup/draw

class Ball {
  constructor(x, y, speedX, speedY) {
    this.x = x;
    this.y = y;
    this.speedX = speedX;
    this.speedY = speedY;
    this.size = 30;
  }

  move() {
    this.x += this.speedX;
    this.y += this.speedY;
  }

  display() {
    fill(100, 150, 255);
    noStroke();
    ellipse(this.x, this.y, this.size);
  }
}

let ball;

function setup() {
  createCanvas(400, 400);
  ball = new Ball(200, 200, 3, 2);
}

function draw() {
  background(220);
  ball.move();
  ball.display();
}

실행하면 파란 원이 오른쪽 아래로 움직입니다. 화면 밖으로 나가는 문제는 2교시에서 바운싱을 추가해 해결합니다.

draw() 안에는 ball.move(), ball.display() 두 줄만 있으면 됩니다. 이동 논리와 그리기 논리는 클래스 안에 들어 있습니다.

배열 코드 vs 클래스 코드 비교

클래스를 쓰면 코드가 영어 문장처럼 읽힙니다.