🌳 고급 보안
코드 난독화가 뭔가요?
쉽게 이해하기
스파이 영화에서 암호문을 보낸 적 있죠? '내일 3시 카페'를 'X42Z#9@'로 바꿔서 보내면 중간에 가로채도 무슨 뜻인지 모르잖아요. 코드 난독화도 비슷해요. `userName`을 `a`, `getUserInfo()`를 `b()` 같이 바꿔서 코드를 읽어도 무슨 기능인지 알 수 없게 만드는 거예요.
핵심 정리
소스 코드를 읽기 어렵게 변환해 역공학을 막고 지적 재산을 보호하는 기술이에요
자세히 알아보기
코드 난독화(Obfuscation)는 프론트엔드 JavaScript나 모바일 앱 코드를 보호할 때 필수적인 기술이에요. 웹은 브라우저에서 코드가 그대로 노출되니까요.
어떻게 동작할까요? 첫째, 변수명과 함수명을 의미 없는 문자로 바꿔요. `calculateTotal()`이 `a()`가 되는 식이죠. 둘째, 불필요한 공백과 줄바꿈을 제거해 한 줄로 만들어요(Minification). 셋째, 제어 흐름을 복잡하게 만들어요. `if (x > 5)`를 `x - 5 > 0 ? ... : ...` 같은 삼항 연산자와 중첩 조건으로 바꾸는 거죠.
실무에서는 Webpack의 Terser 플러그인이나 javascript-obfuscator를 많이 써요. React 앱을 빌드하면 `bundle.js` 파일이 난독화된 상태로 나와요. 게임이나 유료 앱처럼 로직 보호가 중요한 경우 더 강력한 난독화를 적용하죠.
하지만 완벽한 보호는 아니에요. 시간과 노력을 들이면 역난독화(Deobfuscation) 도구로 어느 정도 복원할 수 있거든요. 그래서 난독화는 '속도 저하 장치'로 봐야 해요. 해커가 포기하도록 만드는 거지, 영원히 막는 게 아니에요.
주의할 점: 난독화하면 코드 크기가 약간 커지고 실행 속도도 미세하게 느려져요. 또 디버깅이 어려워지니 소스맵(Source Map)은 배포 서버에 올리지 말고 개발팀만 보관해야 해요. 민감한 API 키나 비밀번호는 난독화해도 결국 노출되니 절대 프론트엔드 코드에 넣으면 안 돼요.