왜 행렬을 다시 복습하는가

02편까지는 화면이라는 공간 자체를 읽는 법을 다졌습니다. 이제부터 04편에서 다룰 이동·회전·확대 같은 기하 변환은 전부 점의 좌표에 특정한 행렬을 곱하는 계산으로 표현됩니다. 독학사 3단계는 이산수학·자료구조 등 2단계 과목에서 행렬의 기초 개념을 이미 다뤘다고 전제하므로, 이 편은 행렬 전체를 처음부터 가르치지 않고 컴퓨터그래픽스 계산에 필요한 만큼만 압축해서 복습합니다. 여기서 다지는 “행렬 곱을 실제 숫자로 계산하는 감각”이 이후 모든 본론 편의 밑바탕이 됩니다.

1. 점을 행렬로 표현하기

컴퓨터그래픽스에서 평면 위의 한 점 (x, y)는 다음과 같이 세로로 나열한 열벡터(Column Vector) 형태의 행렬로 표현합니다.

• $P$: 점의 좌표를 나타내는 행렬(벡터)
• $x$: 가로 방향 좌표값
• $y$: 세로 방향 좌표값

행렬(Matrix)은 숫자를 직사각형 모양으로 줄지어 늘어놓은 것입니다. 가로줄을 행(Row), 세로줄을 열(Column)이라고 부르며, 행이 $m$개, 열이 $n$개인 행렬을 ”$m \times n$ 행렬”이라고 씁니다. 점 (x, y)를 나타낸 위 행렬은 행이 2개, 열이 1개이므로 $2 \times 1$ 행렬입니다.

2. 행렬 곱셈 — 좌표를 바꾸는 연산

두 행렬을 곱하려면 앞 행렬의 열 개수와 뒤 행렬의 행 개수가 같아야 합니다. 결과 행렬의 각 성분은 앞 행렬의 한 행과 뒤 행렬의 한 열을 각각 순서대로 곱한 뒤 모두 더해서 구합니다.

$2 \times 2$ 행렬과 $2 \times 1$ 열벡터를 곱하는 가장 기본적인 형태부터 실제 숫자로 계산해 보겠습니다. 행렬 $A = \begin{bmatrix} 2 & 0 \\ 0 & 3 \end{bmatrix}$를 점 $(4, 5)$에 곱합니다.

• 첫 번째 행 $[2\ \ 0]$과 열벡터 $[4,\ 5]$를 각각 곱해서 더하면 $2 \times 4 + 0 \times 5 = 8$
• 두 번째 행 $[0\ \ 3]$과 열벡터 $[4,\ 5]$를 각각 곱해서 더하면 $0 \times 4 + 3 \times 5 = 15$
• 결과: 점 $(4, 5)$가 행렬 $A$를 거쳐 점 $(8, 15)$로 바뀌었다.

이 결과를 해석하면, $A$는 x좌표를 2배, y좌표를 3배로 늘리는 스케일(확대) 변환 행렬이라는 것을 알 수 있습니다. 대각선 위치(왼쪽 위에서 오른쪽 아래로 이어지는 성분)의 값이 각 축의 배율을 결정하고, 나머지 자리가 0이면 두 축이 서로 영향을 주지 않고 독립적으로 늘어난다는 뜻입니다. 04편에서는 이 대각 성분 대신 삼각함수(사인·코사인)를 채워 넣어 회전 변환을 만드는 과정을 다룹니다.

자주 틀리는 점: 행렬 곱셈은 순서를 바꾸면 결과가 달라지는 경우가 대부분입니다(교환법칙이 성립하지 않음). $AB$와 $BA$는 일반적으로 다른 행렬이므로, 04편·07편에서 이동·회전·확대를 여러 번 합성할 때는 곱하는 순서를 반드시 지켜야 합니다.

3. 동차좌표 — 2차원 점을 3개의 수로 표현하는 이유

앞서 살펴본 $2 \times 2$ 행렬 곱셈은 확대·축소·회전처럼 원점을 고정한 채 일어나는 변환은 잘 표현하지만, 평행이동(원점이 아닌 방향으로 점을 밀어내는 변환)은 표현할 수 없습니다. 왜냐하면 $2 \times 2$ 행렬을 곱하는 연산은 항상 (0, 0)을 (0, 0)으로 보내는데, 평행이동은 (0, 0)을 원점이 아닌 다른 점으로 옮겨야 하기 때문입니다.

쉽게 말하면: 확대·회전은 “제자리에서 크기나 방향만 바꾸는 것”이라 곱셈만으로 되지만, 평행이동은 “통째로 밀어내는 것”이라 곱셈에 없는 덧셈이 필요합니다.

이 문제를 해결하기 위해 컴퓨터그래픽스는 평면 위의 점 (x, y)를 2개의 수가 아니라, 인위적으로 만든 세 번째 값 w를 덧붙여 (x, y, w)라는 3개의 수로 표현합니다. 이렇게 차원을 하나 늘려 표현한 좌표를 동차좌표(Homogeneous Coordinates)라고 부릅니다. 보통 w = 1로 둔 (x, y, 1) 형태를 표준으로 사용하며, 이 동차좌표에 $3 \times 3$ 행렬을 곱하면 이동·회전·확대를 모두 곱셈 하나로 표현할 수 있게 됩니다.

• $P_h$: 점 $(x, y)$의 동차좌표 표현
• $w = 1$: 이 점이 “일반적인 점”임을 나타내는 인위적인 세 번째 성분(방향 벡터를 나타낼 때는 $w = 0$을 쓰기도 하지만, 이 과목에서는 점의 좌표에 집중한다)

예를 들어 평행이동은 다음과 같은 $3 \times 3$ 행렬로 표현됩니다.

• $t_x$: x축 방향으로 이동할 거리
• $t_y$: y축 방향으로 이동할 거리
• 이 행렬을 동차좌표 $(x, y, 1)$에 곱하면 결과의 첫 번째 성분이 $x + t_x$, 두 번째 성분이 $y + t_y$가 되어, 원래는 곱셈으로 표현할 수 없던 “더하기”가 곱셈 형태 안에 자연스럽게 들어가게 된다.

이 평행이동 행렬을 실제 점 $(2, 3)$에 $t_x = 5,\ t_y = 4$로 곱해 확인해 보겠습니다.

• 첫 번째 행: $1 \times 2 + 0 \times 3 + 5 \times 1 = 7$ → 새 x좌표
• 두 번째 행: $0 \times 2 + 1 \times 3 + 4 \times 1 = 7$ → 새 y좌표
• 세 번째 행: $0 \times 2 + 0 \times 3 + 1 \times 1 = 1$ → w는 그대로 1로 유지
• 결과: 점 $(2, 3)$이 $x$ 방향으로 5, $y$ 방향으로 4만큼 이동해 점 $(7, 7)$이 되었다. 세 번째 성분(w)이 1로 유지되므로, 앞의 두 성분을 그대로 화면 좌표 $(7, 7)$로 읽으면 된다.

이처럼 동차좌표를 쓰면 이동·회전·확대를 전부 $3 \times 3$ 행렬 곱셈이라는 같은 형식으로 다룰 수 있고, 이것이 04편에서 여러 변환을 하나의 행렬로 합칠 수 있는(합성 변환) 근거가 됩니다. 3차원 공간에서는 점을 (x, y, z) 대신 (x, y, z, 1)이라는 동차좌표로 표현하고 $4 \times 4$ 행렬을 곱하는데, 이 확장은 07편에서 이어서 다룹니다.

자주 틀리는 점: “동차좌표는 2차원 점을 3차원 공간의 점으로 바꾸는 것이다”라는 설명은 오해를 부를 수 있습니다. 동차좌표의 세 번째 성분 w는 실제 공간의 새로운 차원이 아니라, 이동을 곱셈 형태로 표현하기 위해 수학적으로 추가한 도구입니다. w = 1인 동차좌표 $(x, y, 1)$은 여전히 2차원 평면 위의 점 $(x, y)$를 가리킵니다.

4. 행렬의 크기와 그래픽스에서의 쓰임

이 표는 이후 본론 전체를 관통하는 뼈대입니다. 04편은 $3 \times 3$ 행렬로 2차원 변환을, 07편·08편은 $4 \times 4$ 행렬로 3차원 변환과 투영을 다룹니다. “몇 차원 점을 다루려면 그보다 한 칸 큰 정사각행렬을 쓴다”는 규칙만 기억해 두면 이후 어떤 크기의 행렬이 왜 등장하는지 헷갈리지 않습니다.

자주 틀리는 점: 2차원 평행이동을 $2 \times 2$ 행렬만으로 표현하려는 접근이 오답으로 나올 수 있습니다. 2차원 점의 평행이동을 포함한 모든 변환을 표현하려면 동차좌표를 쓴 $3 \times 3$ 행렬이 필요합니다.

핵심 정리

• 평면 위의 점은 열벡터 행렬로 표현하며, 행렬 곱셈의 각 성분은 앞 행렬의 행과 뒤 행렬의 열을 순서대로 곱해 더해서 구한다.
• $2 \times 2$ 행렬 곱셈은 원점을 고정한 확대·축소·회전은 표현할 수 있지만, 평행이동(덧셈)은 표현할 수 없다.
• 동차좌표는 점 $(x, y)$에 인위적인 세 번째 성분 $w = 1$을 추가해 $(x, y, 1)$로 표현하는 방식이며, 이를 통해 이동·회전·확대를 모두 $3 \times 3$ 행렬 곱셈이라는 하나의 형식으로 다룰 수 있다.
• 2차원 동차좌표는 $3 \times 3$ 행렬, 3차원 동차좌표는 $4 \times 4$ 행렬을 사용한다.

마무리 복습

참고 자료

• MDN - Transformations - Canvas API 
• 국가평생교육진흥원 독학학위제 - 과목별 평가영역