트랜스파일·컴파일이 뭐야 — 코드를 번역하는 두 가지

`, and paragraph count intact. Key targets: a few mechanical connectives and slightly stiff phrasings. Returning the humanized HTML in full.
트랜스파일과 컴파일은 둘 다 코드를 다른 형태로 번역하지만, 트랜스파일은 비슷한 급의 언어끼리 바꾸고 컴파일은 더 낮은 단계(기계어 쪽)로 바꿉니다. 2026년 7월 기준으로 AI에게 코드를 받아 웹을 만들다 보면 "이건 트랜스파일해야 돌아간다" 같은 말을 자주 만나게 됩니다.
이 글을 읽으면 두 단어가 왜 헷갈리는지, 초보 입장에서 무엇만 기억하면 되는지 정리됩니다.

트랜스파일은 같은 급의 언어끼리 번역하는 것(타입스크립트를 자바스크립트로, 최신 자바스크립트를 구형 자바스크립트로)이고, 컴파일은 사람이 쓴 코드를 기계어처럼 더 낮은 단계로 번역하는 것입니다. 초보는 "빌드할 때 코드 번역이 일어난다"만 기억해도 충분합니다.

왜 코드를 번역해야 할까

브라우저가 읽을 수 있는 언어는 사실 자바스크립트 하나입니다.
그런데 우리가 코드를 쓸 때는 브라우저가 바로 못 읽는 형태를 많이 씁니다.
대표적인 게 타입스크립트입니다.
타입스크립트는 자바스크립트에 "값의 종류 규칙(타입)"을 더한 언어라, 브라우저가 이걸 그대로 실행하지 못합니다.
최신 자바스크립트 문법도 마찬가지입니다.
새로 나온 문법은 오래된 브라우저에서 안 돌아갈 수 있습니다.
그래서 "사람이 쓰기 편한 코드"를 "브라우저가 읽을 수 있는 코드"로 한 번 바꿔주는 단계가 필요합니다.
이 번역 과정을 부르는 이름이 트랜스파일과 컴파일입니다.

트랜스파일은 무엇인가

트랜스파일은 비슷한 수준의 언어끼리 번역하는 것입니다.
가장 흔한 예가 타입스크립트를 자바스크립트로 바꾸는 경우입니다.
둘은 급이 비슷한 언어라, 번역해도 "완전히 다른 세계의 말"로 바뀌지 않습니다.
최신 자바스크립트를 구형 자바스크립트로 바꾸는 것도 트랜스파일입니다.
같은 자바스크립트인데 버전만 옛날 문법으로 낮춰주는 셈입니다.
쉽게 말하면 한국어 표준말을 옛날 어투로 바꾸는 것에 가깝습니다.
말 자체는 여전히 한국어이고, 표현 방식만 상대가 알아듣게 조정하는 것입니다.

컴파일은 무엇이 다른가

컴파일은 보통 더 낮은 단계로 번역하는 것을 뜻합니다.
여기서 "낮은 단계"란 사람의 말에서 기계의 말 쪽으로 내려가는 방향입니다.
사람이 쓴 코드를 컴퓨터가 직접 실행하는 기계어에 가깝게 바꾸는 것이 대표적인 컴파일입니다.
트랜스파일이 옆으로 번역하는 것이라면, 컴파일은 아래로 번역하는 것에 가깝습니다.
같은 급끼리 표현만 바꾸는 게 아니라, 층을 한 단계 내려가는 번역인 셈입니다.

번역 방향	옆으로(비슷한 수준끼리)	아래로(더 낮은 단계로)
대표 예시	타입스크립트 → 자바스크립트, 최신 JS → 구형 JS	사람 코드 → 기계어에 가까운 형태
비유	표준말을 다른 어투로	사람 말을 기계 말로

개인적으로는 초보 단계에서 이 둘을 칼같이 나누려고 애쓸 필요는 없다고 봅니다.
실무에서도 트랜스파일을 넓은 의미의 컴파일에 포함시켜 부르는 경우가 많기 때문입니다.

---

초보는 여기까지만 기억하면 된다

두 단어를 정확히 구분하는 것보다 중요한 게 하나 있습니다.
"빌드할 때 코드 번역이 자동으로 일어난다"는 사실입니다.
빌드는 개발용 코드를 배포용으로 바꾸는 전체 과정인데, 그 안에 트랜스파일 같은 번역 단계가 들어 있습니다.
즉 우리가 직접 "지금 트랜스파일해!"라고 명령할 일은 거의 없습니다.
빌드 도구가 알아서 번역까지 처리해 줍니다.
그래서 초보 입장에서는 두 단어의 경계보다, 번역이 빌드 안에서 자동으로 벌어진다는 그림을 잡아두는 편이 훨씬 쓸모 있습니다.

AI랑은 무슨 상관일까

요즘은 AI에게 코드를 받아 웹을 만드는 사람이 많습니다.
그런데 AI가 준 코드를 그대로 브라우저에 넣으면 안 도는 경우가 자주 생깁니다.
AI는 보통 사람이 쓰기 편한 최신 문법이나 타입스크립트로 코드를 주기 때문입니다.
이런 코드는 브라우저가 바로 못 읽으니, 번역(트랜스파일) 단계를 거쳐야 합니다.
그 번역이 빌드 과정 안에서 일어나는 것입니다.
그래서 "AI가 준 코드가 왜 안 돌지"의 답이 "빌드를 안 거쳐서"인 경우가 꽤 많습니다.

자주 묻는 질문

트랜스파일과 컴파일을 꼭 구분해야 하나요

초보 단계에서는 굳이 구분하지 않아도 됩니다.
트랜스파일은 비슷한 급의 언어끼리, 컴파일은 더 낮은 단계로 번역한다는 정도만 알아두면 충분합니다.
실무에서도 트랜스파일을 컴파일의 한 종류로 부르는 경우가 흔합니다.

제가 직접 트랜스파일 명령을 쳐야 하나요

대부분은 아닙니다.
빌드 도구가 빌드 과정에서 번역까지 자동으로 처리하기 때문입니다.
보통은 빌드 명령 한 번이면 번역 단계가 함께 실행됩니다.

---

정리

트랜스파일은 옆으로, 컴파일은 아래로 번역하는 것입니다.
둘 다 "사람이 쓰기 편한 코드"를 "실제로 돌아가는 코드"로 바꾸는 일을 합니다.
초보는 경계를 외우기보다 "빌드할 때 번역이 자동으로 일어난다"만 챙기면 됩니다.
이 감만 잡아두면 AI가 준 코드가 왜 빌드를 거쳐야 도는지도 자연스럽게 이해됩니다.
 
 

참고한 자료

타입스크립트 공식 문서와 MDN의 자바스크립트 문법 설명을 참고해, 브라우저가 읽는 언어와 사람이 쓰는 언어의 차이를 기준으로 정리했습니다. 구체적인 문법 버전과 도구 동작은 발행 전 공식 문서 확인이 필요합니다.