각도 변환기 (도 · 라디안 · 그라디안 · turn)
도·라디안·grad·turn을 동시에, 정규화와 π 배수까지
10진수. 부호·소수 가능
45°
0.785398rad= 0.25π
50grad
0.125turn
45°
각도 단위가 여럿인 이유
각도를 재는 방법은 하나가 아닙니다. 같은 “직각”을 90°, 1.5708 rad, 100 grad, 0.25 turn 으로 적을 수 있습니다. 전부 같은 각이고, 표기만 다릅니다 — 진법이 같은 수를 다르게 적는 것과 같습니다. 문제는 도구마다 요구하는 단위가 달라서, 잘못 넣으면 조용히 틀린 방향으로 돈다는 것입니다.
도(°): 사람의 약속
도는 한 바퀴를 360으로 나눈 값입니다. 왜 하필 360이냐면, 약수가 아주 많기 때문입니다 — 360은 2·3·4·5·6·8·9·10·12·15·18… 로 깔끔하게 나뉘어서, 반(180)·삼분의 일(120)· 직각(90)이 전부 정수로 떨어집니다. 고대 바빌로니아의 60진법에서 온 관습이기도 합니다. 사람이 읽고 쓰기엔 더없이 편해서, CSS·디자인 도구·나침반이 도를 씁니다.
라디안(rad): 원이 스스로 정한 단위
라디안은 약속이 아니라 원의 기하에서 나오는 값입니다. 각을 “호의 길이 ÷ 반지름” 으로 정의합니다. 반지름이 1인 원에서 호의 길이가 곧 각이 되고, 원 전체(둘레 = 2π)를 한 바퀴로 삼으니 한 바퀴가 2π rad, 반 바퀴가 π, 직각이 π/2입니다.
번거로워 보이는 이 단위가 계산에서는 오히려 필수입니다. sin·cos, 회전 행렬, 미적분의 각도 공식이 전부 라디안을 전제로 만들어져 있습니다. 그래서 프로그래밍의 수학 함수에 도를 그대로 넣으면 틀립니다 — Math.sin(90) 은 1이 아니라 약 0.894입니다(90 라디안의 사인이니까). 90°의 사인을 구하려면 Math.sin(90 * Math.PI / 180) 이어야 합니다. 이 변환기가 도 옆에 라디안과 “몇 π” 를 함께 찍는 이유입니다.
실무 함정: 같은 화면 안에서도 단위가 다르다
각도 버그의 대부분은 계산이 아니라 단위를 섞는 데서 옵니다. 가장 흔한 두 가지입니다.
- CSS 는 도, Canvas·WebGL 은 라디안.
transform: rotate(45deg)는 되는데ctx.rotate(45)는 45바퀴에 가깝게 돕니다 — Canvas 에는Math.PI / 4를 넘겨야 합니다. three.js 의 회전도 마찬가지로 라디안입니다. - CSS 안에서도 0의 기준이 다르다.
linear-gradient의0deg는 위쪽이고 시계 방향으로 커지지만(그래서 90deg 가 왼→오),transform: rotate는 또 다른 기준입니다. 수학의 “0°=오른쪽, 반시계” 규약과도 다릅니다. “그라디언트가 90도 틀어졌다”는 대개 이 기준 차이입니다.
정규화: 방향이냐 회전량이냐
마지막으로 각도를 다룰 때 늘 갈리는 갈림길 하나. 370° 와 10° 는 같은 방향을 가리키지만 같은 회전은 아닙니다.나침반 방향처럼 ‘어디를 향하는가’만 중요하면 둘은 같고(이때 위 변환기의 정규화 0~360°값을 씁니다), 스피너 애니메이션처럼 ‘몇 바퀴 도는가’가 중요하면 370°가 한 바퀴를 더 돕니다. 이 둘을 구분하지 않으면 애니메이션이 의도보다 덜 돌거나 갑자기 되감기는 버그가 납니다. 각도는 단순해 보여도, ‘방향’과 ‘회전량’ 중 무엇을 다루는지부터 정하는 게 먼저입니다.
자주 묻는 질문
- 라디안(rad)이 무엇이고 왜 쓰나요?
- 각을 '호의 길이 ÷ 반지름'으로 잰 값입니다. 반지름이 1인 원에서 호의 길이가 곧 각의 크기라, 한 바퀴(둘레)는 2π rad가 됩니다. 도(°)는 한 바퀴를 360으로 나눈 사람의 약속이지만, 라디안은 원의 기하에서 자연스럽게 나오는 값입니다. 그래서 미적분·물리·그래픽처럼 각을 '계산'하는 곳에서는 라디안을 씁니다 — sin·cos 함수도, 회전 행렬도 라디안을 전제로 만들어져 있어서, 도를 넣으면 값이 틀립니다.
- CSS는 deg인데 왜 Canvas·three.js는 라디안인가요?
- CSS는 사람이 직접 적는 스타일 언어라, 읽기 쉬운 도(rotate(45deg))를 씁니다. 반면 Canvas 2D의 ctx.rotate()나 three.js의 회전은 수학 라이브러리(sin·cos) 위에 있어서 라디안을 받습니다. 그래서 'CSS에서는 45로 됐는데 Canvas에서는 안 된다'는 대부분 단위 문제입니다 — Canvas에는 45가 아니라 Math.PI/4를 넘겨야 합니다. 이 변환기로 45°가 몇 라디안인지 바로 확인할 수 있고, 코드에서는 각도 * Math.PI / 180으로 변환합니다.
- CSS 그라디언트의 0deg는 왜 오른쪽이 아니라 위쪽인가요?
- CSS 그라디언트·나침반은 수학의 각도 규약과 다르기 때문입니다. 수학에서는 0°가 오른쪽(동쪽)이고 반시계 방향으로 커지지만, CSS linear-gradient의 각도는 0deg가 위쪽(아래→위 방향)이고 시계 방향으로 커집니다. 그래서 90deg는 왼쪽→오른쪽입니다. 이 어긋남 때문에 '그라디언트 각도가 생각과 90도 틀어졌다'는 일이 자주 생깁니다. 반면 transform: rotate()는 또 다른 규약(시계 방향, 0deg가 변형 없음)이라, 같은 CSS 안에서도 각도의 기준이 속성마다 다르다는 점을 기억해야 합니다.
- 그라디안(grad·gon)은 어디에 쓰나요?
- 직각이 딱 100이 되도록 한 바퀴를 400으로 나눈 단위입니다. 측량과 토목에서 주로 쓰입니다 — 90°가 100grad라 십진법과 잘 맞아 계산이 편하기 때문입니다. CSS도 grad를 지원하고(전자계산기의 'GRAD' 모드가 이것), 일부 유럽권 도면에서 만납니다. 자주 쓰진 않지만, 계산기가 이유 없이 각도 값을 이상하게 낼 때 모드가 DEG가 아니라 GRAD·RAD로 되어 있는 경우가 많습니다.
- 1회전(turn)은 몇 도, 몇 라디안인가요?
- 1 turn = 360° = 2π rad = 400 grad입니다. turn은 CSS에서 쓸 수 있는 단위로, 회전 애니메이션에 직관적입니다 — rotate(0.5turn)은 반 바퀴, rotate(2turn)은 두 바퀴입니다. '스피너를 세 바퀴 돌린다'를 3turn으로 적으면 1080deg보다 읽기 쉽습니다. 이 변환기는 turn을 포함한 네 단위를 동시에 보여 주므로, 애니메이션 각도를 도·라디안과 나란히 확인할 수 있습니다.
- 360도가 넘거나 음수인 각도는 어떻게 되나요?
- 각도로는 유효합니다. 370°는 10°와 같은 방향을 가리키고, -90°는 270°와 같습니다. 다만 회전 '애니메이션'에서는 370°와 10°가 다릅니다 — 전자는 한 바퀴를 더 돕니다. 그래서 방향만 중요할 때는 이 변환기가 함께 보여 주는 '정규화(0~360°)' 값을 쓰고, 회전량이 중요할 때는 원래 값을 씁니다. 두 경우를 구분하지 않으면 애니메이션이 의도보다 덜/더 도는 버그가 생깁니다.