클라이언트 단에서 데이터를 가볍게 숨기고 싶을 때
웹 개발을 하다 보면 브라우저(프론트엔드) 단에서 특정 문자열이나 파라미터 값을 남들이 쉽게 알아보지 못하게 처리해야 할 때가 있습니다. 물론 비밀번호나 주민등록번호 같은 민감한 개인정보는 반드시 서버 단에서 단방향 암호화(SHA-256 등)나 강력한 양방향 암호화(AES-256) 알고리즘을 사용해야 합니다.
하지만 보안 수준이 아주 높을 필요는 없으면서, 단순히 URL 파라미터나 로컬 스토리지에 저장되는 텍스트를 "가볍게 꼬아서(Obfuscation) 눈가림"하고 싶을 때는 무거운 암호화 라이브러리를 통째로 불러오는 것이 오히려 비효율적일 수 있습니다.
오늘은 자바스크립트의 내장 함수인 charCodeAt()과 fromCharCode()를 활용하여, 나만의 키(Key) 값을 더해 문자열을 암호화하고 다시 복호화하는 아주 가볍고 실용적인 로직을 구현해 보겠습니다.
1. 암호화의 기본 원리: 유니코드(Unicode) 변환
컴퓨터는 'A', 'B', '가', '나' 같은 문자를 그대로 이해하지 못하고 모두 숫자로 기억합니다. 자바스크립트에서는 이 원리를 이용해 문자를 숫자로 바꾸고, 다시 숫자를 문자로 바꿀 수 있습니다.
charCodeAt(): 특정 문자를 컴퓨터가 알아듣는 숫자(유니코드 값)로 변환해 줍니다. (예: 'A' -> 65)
String.fromCharCode(): 반대로 숫자(유니코드 값)를 던져주면 원래의 문자로 되돌려 줍니다. (예: 65 -> 'A')
우리가 만들 암호화 로직의 핵심은 간단합니다. 원래 문자를 숫자로 바꾼 뒤 ➔ 우리가 정한 비밀 키(Key) 값과 임의의 숫자를 더해서 엉뚱한 숫자로 만들고 ➔ 그 숫자를 다시 문자로 변환하여 아무도 못 알아보는 외계어(?)를 만들어내는 것입니다.
2. 암호화 및 복호화 전체 소스 코드
아래는 특정 문자열(str)과 비밀 키 값(key)을 매개변수로 받아서 암호화 및 복호화를 수행하는 전체 함수입니다.
| // [1] 문자열 암호화 함수 function Encrypt(str, key) { let output = ""; let TextSize = str.length; // 키값이 정상적인 숫자인지 검증 (예외 처리) if (isNaN(parseInt(key))) { alert("키 값이 올바르지 않습니다. 숫자를 입력해주세요."); return; } for (let i = 0; i < TextSize; i++) { // 원래 문자의 유니코드 값 + 키값 + 123 + 현재 인덱스(i)를 더하여 변환 output += String.fromCharCode(str.charCodeAt(i) + parseInt(key) + 123 + i); } return output; } // [2] 문자열 복호화 함수 function Decrypt(str, key) { let output = ""; let TextSize = str.length; // 키값이 정상적인 숫자인지 검증 (예외 처리) if (isNaN(parseInt(key))) { alert("키 값이 올바르지 않습니다. 숫자를 입력해주세요."); return; } for (let i = 0; i < TextSize; i++) { // 암호화 시 더했던 값들을 반대로 빼주어 원래의 유니코드 값으로 복구 output += String.fromCharCode(str.charCodeAt(i) - (parseInt(key) + 123 + i)); } return output; } |
3. 핵심 로직 상세 분석 및 예외 처리
① 변환 연산식의 비밀
루프(for문) 안을 보면 문자를 치환하는 수학 연산이 들어있습니다.
암호화: str.charCodeAt(i) + parseInt(key) + 123 + i
단순히 유니코드에 키(key) 값만 더해도 되지만, 여기에 123이라는 상수와 반복문의 인덱스인 i를 함께 더해주었습니다. 인덱스 i를 더해준 이유는 "AAAA"처럼 똑같은 문자가 반복되더라도 암호화된 결과물은 서로 다른 문자로 나타나게 만들어 유추를 더욱 어렵게 하기 위함입니다.
복호화할 때는 더했던 것과 완벽히 동일한 괄호 식을 반대로 빼주기만(-) 하면 원래 문자로 돌아옵니다.
② isNaN()을 활용한 예외 처리 (방어 코드)
함수 도입부를 보면 isNaN(parseInt(key)) 구문이 있습니다. 만약 사용자가 비밀 키(Key) 값으로 숫자가 아닌 문자를 잘못 넘겼을 경우, 수식 전체가 망가지면서 오류(NaN)를 뱉어내게 됩니다. 이를 방지하기 위해 키 값이 정상적인 숫자인지 사전에 판별하고, 올바르지 않다면 경고창(alert)을 띄우고 함수를 종료(return;) 시키는 안전장치를 마련해 두었습니다.
(만약 숫자 대신 영문자 형태의 키 값을 사용하고 싶다면, 입력받은 키 문자열 역시 charCodeAt 함수를 사용해 숫자 코드로 치환한 뒤 연산식에 대입하도록 커스텀하면 됩니다.)
※주의사항
다시 한번 강조하지만 주의사항이 있습니다!
이 방식은 일종의 '치환 암호'이므로 숙련된 해커가 코드를 뜯어보고 분석하면 원래 데이터를 알아낼 수 있습니다. 따라서 회원가입 비밀번호, 결제 정보, 개인정보 등을 다룰 때는 절대 이 로직을 사용하시면 안 되며, 반드시 서버 단에서 검증된 암호화 모듈(Bcrypt, SHA-256 등)을 거쳐 저장해야 한다는 점, 꼭 명심하시길 바랍니다!