Stella Align로 이해하는 변환

버튼으로 별자리를
맞추는 게임

도형을 움직이는 수학적 규칙을 알아보자.

게임 체험

같은 색 별을 과녁에 맞추는 게임

맞춘 별0 / 3

어느 버튼부터 눌러 볼까요?

버튼을 눌러 움직임을 확인해 보세요.

게임 규칙 관찰

버튼 하나로 모든 별 움직이기

성공 과정을 느리게 다시 봐요. 버튼을 한 번 누를 때마다 세 별에 같은 규칙이 적용돼요.

45° 회전→45° 회전→가로 이동

별마다 새 위치는 다르지만 적용된 규칙은 같습니다.

누르기 전에 예상하기

가로 2, 세로 1의 별을 좌우로 뒤집으면?

A·B·C 가운데 예상한 위치를 고르세요.

세로축을 거울로 생각해 보세요.

좌표

두 수로 나타내는 별의 위치

가로 위치를 먼저, 세로 위치를 나중에 읽습니다. 별을 끌어 좌표를 바꿔 보세요.

가로2 · 세로1

두 수의 순서가 바뀌면 다른 위치를 가리킵니다.

별을 마우스나 손가락으로 끌 수 있습니다

좌표 규칙

좌우 뒤집기를 가장 잘 설명한 문장은?

어느 위치의 별에도 적용할 수 있는 설명을 고르세요.

가로 2 · 세로 1 ⇆ 가로 −2 · 세로 1

한 예에만 맞는 설명인지, 모든 위치에 적용되는 설명인지 확인해 보세요.

변환 실험

점을 먼저 놓고 변환 결과 비교하기

먼저 색 점 세 개를 끌어 놓고, 변환을 골라 전후 위치를 비교하세요.

색 점을 직접 끌어 출발 위치를 바꿀 수 있습니다

선택한 변환 변환 없음

점 세 개의 출발 위치 정하기

변환 전후 비교

변환해도 그대로인 성질 찾기

변환을 바꾸고 네 성질이 그대로인지 확인하세요.

곧은 선그대로

나란한 두 선그대로

별 사이 거리그대로

두 선의 각도그대로

회전 뒤에도 거리와 각도는 그대로

원점 확인

변환 뒤에 원점은 어디에 있을까요?

회전·확대·기울임은 원점을 제자리에 둡니다. 이동은 원점을 포함한 모든 점을 같은 만큼 옮깁니다.

회전 뒤 원점: 제자리

한 칸짜리 고무판

한 칸을 바꾸면 전체 격자는?

빨강과 파랑 손잡이는 한 칸의 두 변이에요. 끝점을 자유롭게 끌면 같은 모양이 반복되며 전체 격자도 함께 늘어나고, 줄어들고, 돌아갑니다.

예시 그림별 모양 도형도 격자와 같은 방식으로 변해요

빨강·파랑 손잡이를 끌어 한 칸의 모양부터 바꿔 보세요.

밝은 한 칸·격자·별 그림이 함께 바뀝니다

수학 용어

선형변환과 아핀변환은 어떻게 다를까요?

앞에서 본 변환을 두 무리로 묶어 이름을 붙여 봐요. 계산식은 쓰지 않습니다.

기본 걸음의 관계를 지키는 변환

두 기본 걸음을 합치거나 몇 배 한 관계가 변환 뒤에도 그대로예요.

회전 · 확대/축소 · 기울임 · 뒤집기

?

전체 이동까지 더한 변환

앞의 변환 뒤에 모든 점을 같은 만큼 옮기는 단계까지 포함해요.

이동 · 이동 뒤 회전 · 이동 뒤 확대

?

원점 고정은 선형변환을 빠르게 알아보는 단서예요. 이름을 정하는 핵심은 기본 걸음의 조합 관계를 지키는지예요.

전체 움직임 예측

왜 두 화살표만 보면 될까요?

빨간 화살표와 파란 화살표의 도착점만 보고, 전체 점에 적용된 변환을 고르세요.

오른쪽 한 걸음 → 위쪽 한 걸음

위쪽 한 걸음 → 왼쪽 한 걸음

두 화살표가 어디로 갔는지 차례로 비교하세요. 나머지 점도 이 두 방향을 섞어 움직여요.

두 변환 이어 하기

변환 순서를 바꾸고 결과 비교하기

가로 이동과 좌우 뒤집기를 서로 다른 순서로 실행해 보세요.

이동 → 뒤집기

실행 전

뒤집기 → 이동

실행 전

결과가 같은지 먼저 예상해 보세요.

아핀변환을 나타내는 방법

좌표에 한 칸을 더해 이동 나타내기

가로·세로 값은 그대로 두고, 뒤에 ‘계산용 칸 1’을 붙여요. 이 칸은 실제 높이가 아니라 이동을 함께 계산하기 위한 표시예요.

1계산용 칸 1 붙이기
2높이에 따라 옆으로 밀기
3위에서 결과 읽기

가로·세로 값은 그대로. 계산용 칸에 1만 붙여요.

2차원 좌표에서의 이동은 아핀변환이에요. 계산용 칸을 하나 늘리면 더 큰 공간의 선형변환으로 나타낼 수 있어요. 3D 상자는 계산 방식을 보여 주는 모형

적용 문제

세 변환의 순서를 정해 목표 맞히기

카드의 순서를 정한 다음, 목표 위치까지 가는지 확인하세요.

123

속이 빈 별: 목표 위치

이미지 처리

얼굴 그림을 기준 틀에 맞추기

얼굴 그림을 돌리고 크기와 위치를 바꿔 점선 기준과 겹치세요.

같은 얼굴도 사진 속에서는 자리·크기·기울기가 달라져요.

이미지 처리에서는 비교 전에 위치와 크기를 맞추기도 하고, 다양한 모습의 예시를 쓰기도 해요.

현대물리학

실험실의 방향을 바꿔도 측정 규칙은 같을까요?

외부 영향이 없는 실험실의 방향만 바꾸고 같은 방법으로 빛 신호를 보냅니다.

실험실 방향 0°

바꾼 것실험실의 방향 남은 것빛이 퍼지는 규칙

자연 법칙의 형태를 바꾸지 않는 변환을 그 법칙의 대칭이라 부릅니다. 이 화면은 회전 대칭의 단순화 모형.

회전 변환과 물리학의 대칭

운동 전체를 돌려도 같은 법칙일까요?

앞에서는 실험실을 네 방향으로 돌렸습니다. 이번에는 그 사이의 각도까지 이어서 살펴봅니다.

1
기준 운동중심을 도는 작은 물체와 타원 궤도
2
두 회전 이어 보기30° 돌린 뒤 45° 더 회전
3
한 번의 회전과 비교75° 회전 결과와 정확히 겹침

회색 기준 궤도와 색 궤도가 어떻게 달라지는지 살펴보세요.

중심 물체의 힘만 고려한 단순화 모형

각도를 조금씩 바꿀 수 있고, 회전을 이어도 다시 하나의 회전입니다. 수학에서는 이런 연속 대칭의 모임을 리군이라 부르며, 현대물리학도 이를 법칙을 살피는 도구로 씁니다.

인공지능의 데이터 표현

자료를 위치 대신 특징으로 놓아 보기

가로·세로 위치 대신 밝기와 모양을 두 축에 놓아 보세요.

현재 좌표: 화면의 가로·세로 위치

실제 AI의 내부 표현에는 많은 수가 들어갑니다. 이 화면은 그중 두 방향만 골라 보여 줍니다.

문장을 처리하는 AI

같은 ‘배’가 문장에 따라 어떻게 달라질까요?

표기는 같아도 앞에 놓인 말이 다르면 문장에서 맡는 뜻이 달라져요.

배고픈아이가자기 만졌다.

항구에온아이가큰 탔다.

앞말: 배고픈 · 자기

배

몸을 뜻하는 배

앞말: 항구 · 큰

배

탈것을 뜻하는 배

시작할 때는 같은 표기

LLM은 여러 층에서 토큰을 나타내는 수를 바꾸며 주변 말의 정보를 섞어요. 실제로 ‘뜻 칸’을 고르는 방식은 아니며, 이 화면은 달라진 내부 표현을 두 갈래로 단순화한 모형이에요.

LLM의 마지막 점수 계산

문맥 속 차이는 후보 점수에서 어떻게 드러날까요?

LLM은 앞선 층에서 문맥을 여러 수로 나타냅니다. 마지막 출력 변환은 이 수들을 후보마다 다르게 읽어 다음 말의 점수를 매깁니다.

관찰 1 · 두 방향만 본 그림자

두 방향만 화면에 펼치면 몸과 탈것의 문맥 도형이 크게 겹칩니다.

한 점은 한 문맥을 줄여 나타냅니다. 실제 LLM은 문맥을 나타내는 수 수천 개를 수많은 토큰 점수로 한꺼번에 바꿉니다. 화면에서는 세 방향만 남기고 ‘만졌다’와 ‘탔다’를 토큰 하나씩으로 단순화했습니다. 실제 모델의 문맥 점이 언제나 이렇게 나뉜다는 뜻은 아니며, 도형은 문맥 점의 바깥을 이은 설명용 선입니다.

3D 애니메이션과 로봇공학

관절을 돌리면 손끝은 어떻게 움직일까요?

3D 캐릭터와 로봇 팔에는 몸통·어깨·팔꿈치처럼 여러 관절이 이어져 있습니다. 몸통이나 위쪽 관절이 돌면 아래쪽 관절도 따라 움직이고, 손끝의 자리까지 바뀝니다.

기본 자세 몸통부터 손까지 이어진 기준점을 살펴보세요.

몸통→ 어깨→ 팔꿈치→ 손

회전과 크기 변화에는 선형변환을 씁니다. 관절 위치로 옮기는 계산까지 더하면 아핀변환이 됩니다. Pixar가 개발해 공개한 OpenUSD에도 3D 모델의 변환 순서와 부모·자식 관계가 기록됩니다. 화면은 관절로 이어진 단단한 몸체만 그린 축소 모형입니다.

모델 좌표에서 영상 프레임까지

3차원 모델은 어떻게 2차원 화면에 나타날까요?

먼저 모델을 장면에 놓고, 카메라 위치를 기준으로 점의 좌표를 다시 계산합니다. 마지막으로 깊이에 따라 화면 속 위치와 크기가 정해집니다.

모델→ 장면→ 카메라→ 화면

같은 크기의 두 모델이 카메라와의 거리에 따라 어떻게 보이는지 비교해 보세요.

모델과 카메라의 회전·이동에는 선형변환과 아핀변환을 이어 씁니다. 원근 투영에서는 여기에 깊이로 나누는 계산이 하나 더 붙습니다.

공통점과 차이

게임·3D 제작·물리학·AI에서 변환은 어떻게 쓰일까요?

★

Stella Align

플레이어가 골라 적용하는 정해진 좌표 변환

3D

3D 제작

여러 변환을 이어 부품과 카메라의 위치를 계산

◎

물리학

관측 기준을 바꿔도 같은 형태로 성립하는 법칙

AI

인공지능

학습 자료에 맞춰 조정되는 내부 숫자 표현의 변환

공통된 수학적 생각 계산 규칙에 따른 표현의 변화. 유지하거나 구별할 대상은 분야와 목적에 따라 다름.

다시 적용하기

게임으로 돌아가 변환 먼저 예상하기

이번에는 버튼을 누르기 전에 별 세 개가 어디로 갈지 먼저 예상해 보세요.

원작 게임 열기 확장 활동지 · 약 45분