sin 과 cos 는 무엇인가: 비스듬한 화살표를 가로와 세로로 나누기

대포를 비스듬히 30° 위로 쏘고, 포탄이 1초에 10 만큼 날아가게 하고 싶습니다. 그런데 유니티의 속도는 각도와 길이로 넣는 것이 아니라 (앞으로 얼마, 위로 얼마) 두 숫자로 넣어야 합니다. 10 을 앞과 위로 어떻게 나눠야 할까요. 반반씩 5 와 5 로 나누면 45° 로, 그것도 7.07 의 빠르기로 날아갑니다.

비스듬한 화살표를 가로와 세로로 나누는 도구가 cos 와 sin 입니다. 각도만 알면 가로와 세로가 길이의 몇 배인지가 정해지고, 그 두 배수가 cos 와 sin 입니다.

직각삼각형에서 cos θ = 가로 ÷ 빗변, sin θ = 세로 ÷ 빗변 입니다. 삼각형 크기와 상관없이 각도 θ 만으로 정해집니다. 그래서 가로 = 길이 × cos θ, 세로 = 길이 × sin θ 입니다. 30° 로 10 이면 가로 8.66, 세로 5 입니다. 길이를 1 로 두면 화살표 끝은 반지름 1 인 원 위를 돌고, 그 점이 늘 (cos θ, sin θ) 입니다.

화살표 끝에서 수직선을 내리면 직각삼각형

각도는 두 선이 벌어진 정도이고, 한 바퀴를 360 칸으로 나눈 도(°) 로 셉니다. 바닥과 기둥처럼 똑바로 선 90° 를 직각이라고 부릅니다. 비스듬한 화살표 하나가 있으면, 그 끝에서 바닥으로 수직선을 내리기만 해도 세 각 중 하나가 직각인 직각삼각형이 생깁니다.

직각 맞은편의 비스듬한 변을 빗변이라고 부르고, 세 변 중 가장 깁니다. 여기서는 화살표가 빗변입니다. 직각을 낀 나머지 두 변은 이 글에서 가로(바닥에 생긴 변)와 세로(내린 수직선)라고 부릅니다. 가로는 “옆으로 얼마 갔나”, 세로는 “위로 얼마 갔나” 입니다. 화살표를 가로와 세로로 나누는 일이 곧 이 삼각형의 두 변 길이를 구하는 일입니다.

막대를 세우면 가로는 줄고 세로는 는다

길이 1 인 막대를 바닥에 눕힌 0° 에서 똑바로 선 90° 까지 세웠습니다.

각도를 정하면 가로와 세로가 하나로 정해집니다. 30° 로 세운 길이 1 막대의 가로는 언제 재도 0.87 입니다.

크기가 달라도 비율은 같다

각도는 30° 그대로 두고 막대 길이만 1, 2, 3 으로 늘렸습니다.

막대가 두 배면 가로와 세로도 두 배가 됩니다. 삼각형이 모양은 그대로 크기만 커지기 때문입니다. 사진을 확대해도 사람의 키와 어깨 너비 비율이 그대로인 것과 같습니다. 그래서 가로 ÷ 빗변 과 세로 ÷ 빗변 은 삼각형 크기와 상관없이 각도만으로 정해집니다. 이 두 비율에 이름을 붙인 것이 cos 와 sin 입니다. 각도를 글자로 적을 때는 θ(세타)를 씁니다. x 가 “어떤 수” 를 뜻하듯 θ 는 “어떤 각도” 를 뜻합니다.

cos θ = 가로 ÷ 빗변     (θ 일 때 가로는 빗변의 몇 배인가)
sin θ = 세로 ÷ 빗변     (θ 일 때 세로는 빗변의 몇 배인가)

cos 는 “코사인”, sin 은 “사인” 이라고 읽습니다. 각도를 넣으면 숫자 하나가 나오는 함수입니다. cos 30° = 0.87, sin 30° = 0.5 처럼 씁니다. 식을 뒤집으면 실제로 쓰는 모양이 됩니다.

가로 = 빗변 × cos θ
세로 = 빗변 × sin θ

길이 4m 사다리를 바닥과 60° 로 벽에 기대면, 사다리 끝의 높이는 4 × sin 60° = 4 × 0.87 = 3.46m, 벽에서 사다리 발까지는 4 × cos 60° = 4 × 0.5 = 2m 입니다. 자로 재지 않아도 길이와 각도만으로 두 변이 나옵니다.

참고로 세로 ÷ 가로 도 이름이 있습니다. tan(탄젠트)이고, 비탈의 기울기입니다. 이 글에서는 cos 와 sin 만 씁니다.

값은 어떻게 아나

cos 와 sin 의 값은 계산기나 Mathf.Cos, Mathf.Sin 이 알려 줍니다. 다만 자주 쓰는 각도 셋은 직각삼각형의 길이 규칙(피타고라스의 정리)만으로 직접 구할 수 있습니다. 피타고라스의 정리는 가로² + 세로² = 빗변² 입니다. 가로 3, 세로 4 면 9 + 16 = 25 라서 빗변이 5 입니다.

45° 는 가로와 세로가 같은 삼각형입니다. 빗변이 1 이면 가로를 a 라 할 때 a² + a² = 1, 곧 a² = 0.5 라서 a = √0.5 ≈ 0.71 입니다. 그래서 cos 45° = sin 45° = 0.71 입니다.

60° 와 30° 는 세 변이 모두 1 인 정삼각형을 반으로 자르면 나옵니다.

30° 와 60° 에서 값이 서로 자리를 바꾼 것은, 같은 삼각형을 반대쪽 꼭짓점에서 봤기 때문입니다.

길이와 각도로 가로와 세로 구하기

처음의 대포는 30° 로, 1초에 10 만큼 쏩니다.

이렇게 나눈 (8.66, 5) 의 길이를 피타고라스로 확인하면 √(8.66² + 5²) = √(75 + 25) = √100 = 10 입니다. 길이는 지키면서 방향만 30° 로 정한 것입니다. 처음에 틀렸던 (5, 5) 는 길이가 √50 ≈ 7.07 이라 느리고, 방향도 45° 였습니다.

90° 를 넘으면: 원 위의 점

막대를 90° 보다 더 돌리면 막대 끝이 왼쪽으로 넘어가고, 180° 를 넘으면 바닥 아래로 내려갑니다. 이때는 가로와 세로에 **방향(부호)**을 붙입니다. 오른쪽과 위는 양수, 왼쪽과 아래는 음수입니다.

길이 1 인 막대 끝은 반지름 1 인 원을 그립니다. 빗변이 1 이니 가로 ÷ 1 = 가로, 세로 ÷ 1 = 세로 라서, 원 위의 점의 좌표가 그대로 (cos θ, sin θ) 입니다. 수학책이 cos 와 sin 을 “반지름 1 인 원 위의 점의 x 와 y” 로 정의하는 것도 이 때문이고, 90° 안에서는 삼각형으로 정의한 것과 똑같은 값입니다.

원의 반지름이 1 이라 cos 와 sin 은 늘 −1 에서 1 사이입니다. 360° 를 돌면 처음 자리로 돌아오니 같은 값이 되풀이됩니다. sin 390° 는 sin 30° 와 같은 0.5 입니다.

유니티는 각도를 라디안으로 받는다

이제 대포를 유니티 코드로 옮깁니다. 그런데 Mathf.Sin(30) 이라고 쓰면 0.5 가 아니라 −0.99 가 나옵니다. Mathf.Sin, Mathf.Cos 는 각도를 도(°)가 아니라 라디안이라는 다른 단위로 받기 때문입니다. 30 을 30° 가 아니라 30 라디안으로 읽은 것입니다.

라디안은 각을 “반지름 1 인 원에서 막대 끝이 둘레를 따라 간 거리” 로 잽니다. 도가 한 바퀴를 360 칸으로 나눈 눈금이라면, 라디안은 줄자로 둘레를 잰 길이입니다.

반지름 1 인 원의 둘레는 2 × π ≈ 6.28 입니다(π 는 약 3.14). 그래서 한 바퀴가 6.28 라디안이고, 나머지는 그 몇 분의 몇입니다.

360° 가 6.28 라디안이니, 1° 는 6.28 ÷ 360 ≈ 0.01745 라디안입니다. 도에 이 값을 곱하면 라디안이 됩니다. 반대로 1 라디안은 360 ÷ 6.28 ≈ 57.3° 입니다. 유니티는 이 두 값을 상수로 줍니다.

이제 Mathf.Sin(30) 이 −0.99 인 이유가 보입니다. 30 라디안은 30 × 57.3 ≈ 1719° 입니다. 1719° 는 네 바퀴(1440°)를 돌고 279° 를 더 간 자리라서, 원의 오른쪽 아래에 있고 높이(sin)가 −0.99 입니다. 그래서 도로 생각한 각도는 Mathf.Deg2Rad 를 곱해서 넣습니다.

수학과 프로그래밍 언어가 라디안을 쓰는 것은 간 거리와 각이 같은 숫자라서 계산이 단순해지기 때문입니다. 반지름 r 인 원을 θ 라디안 돌면 간 거리는 그냥 r × θ 입니다. 반대로 유니티 에디터의 Rotation, transform.eulerAngles, Quaternion.Euler 는 사람이 읽기 쉬운 도를 씁니다. 수학 함수를 부르는 자리에서만 바꿔 줍니다.

대포 코드는 이렇습니다.

float angle = 30f;
float speed = 10f;

// Mathf.Cos, Mathf.Sin 은 라디안을 받는다.
// Deg2Rad(약 0.01745)를 곱하면 30° 가 0.52 라디안이 된다
float rad = angle * Mathf.Deg2Rad;

float vx = speed * Mathf.Cos(rad);   // 가로 = 빗변 × cos 30° = 8.66
float vy = speed * Mathf.Sin(rad);   // 세로 = 빗변 × sin 30° = 5

// rb 는 포탄에 붙은 Rigidbody2D. 속도를 (가로, 세로) 로 넣는다
rb.linearVelocity = new Vector2(vx, vy);

sin 은 물결이 된다

원 위를 도는 점의 높이(sin)를 각도가 늘어나는 순서대로 오른쪽에 찍었습니다.

0 에서 올라가 1, 다시 내려가 −1, 그리고 0 으로 돌아오는 물결이 나옵니다. 각도 대신 시간을 넣으면 시간이 흐를수록 위아래로 흔들리는 값이 됩니다. 아이템이 제자리에서 둥실둥실 떠 있는 연출이 이것입니다.

Vector3 start;
public float height = 0.25f;   // 얼마나 높이 흔들리나
public float speed = 2f;       // 얼마나 빨리 흔들리나

void Start()
{
    start = transform.position;
}

void Update()
{
    // Time.time 은 게임이 시작된 뒤 지난 초. 계속 늘어나니 sin 이 물결을 그린다
    // Mathf.Sin 은 라디안을 받으니, speed 2 면 1초에 2 라디안씩 돈다
    float wave = Mathf.Sin(Time.time * speed);   // −1 ~ 1

    transform.position = start + Vector3.up * wave * height;   // −0.25 ~ 0.25 사이로
}

sin 이 −1 ~ 1 이라 height 를 곱하면 그만큼 위아래로 흔들립니다. 여기서는 각도 대신 Time.time * speed 를 넣었으니 그 값이 라디안으로 읽힙니다. 한 번 출렁이는 데 한 바퀴 6.28 라디안이 필요하므로, speed 가 2 면 6.28 ÷ 2 ≈ 3.14초에 한 번 위아래를 오갑니다. 같은 자리에 cos 를 쓰면 0 이 아니라 1(가장 높은 곳)에서 출발하는 같은 물결입니다.

기억해 둘 성질

정리

• 비스듬한 화살표의 끝에서 바닥으로 수직선을 내리면 직각삼각형이 생깁니다. 화살표가 빗변, 나머지가 가로와 세로입니다
• 각도가 같으면 삼각형 크기와 상관없이 가로 ÷ 빗변, 세로 ÷ 빗변 이 같습니다. 이 비율이 cos 와 sin 입니다
• 가로 = 길이 × cos θ, 세로 = 길이 × sin θ. 30° 로 10 이면 (8.66, 5) 입니다
• 45° 는 0.71, 30° 와 60° 는 0.87 과 0.5 를 서로 바꿔 가집니다
• 길이 1 인 화살표 끝은 반지름 1 인 원 위에 있고, 그 점이 (cos θ, sin θ) 입니다. 왼쪽과 아래는 음수입니다
• cos 와 sin 은 −1 ~ 1 이고, cos² + sin² = 1 입니다
• 시간을 넣은 sin 은 위아래로 흔들리는 물결이 됩니다
• 라디안은 반지름 1 인 원에서 둘레를 따라 간 거리로 잰 각입니다. 한 바퀴가 2π ≈ 6.28, 180° 가 π ≈ 3.14 입니다
• Mathf.Cos 와 Mathf.Sin 은 각도를 라디안으로 받으니 도에 Mathf.Deg2Rad 를 곱해 넣습니다. Mathf.Sin(30) 은 sin 30° 가 아닙니다