암호화와 복호화: 타입스크립트 활용 사례 🔐

안녕하세요, 여러분! 오늘은 정말 흥미진진한 주제로 찾아왔어요. 바로 암호화와 복호화에 대해 타입스크립트를 활용해 알아볼 거예요. 어렵게 들릴 수 있지만, 걱정 마세요! 제가 쉽고 재미있게 설명해드릴게요. 마치 카톡으로 수다 떠는 것처럼요. ㅋㅋㅋ

암호화와 복호화라고 하면 뭔가 첩보 영화에나 나올 법한 느낌이죠? 근데 실제로 우리 일상 곳곳에서 사용되고 있답니다! 예를 들어, 여러분이 좋아하는 재능넷(https://www.jaenung.net)에서 계정을 만들 때도 암호화 기술이 사용된다는 거 알고 계셨나요? 😲

자, 이제 본격적으로 시작해볼까요? 준비되셨나요? 그럼 고고씽~! 🚀

1. 암호화란 뭐야? 🤔

암호화는 쉽게 말해서 비밀 메시지를 만드는 과정이에요. 여러분이 친구한테 쪽지를 보낼 때, 다른 애들이 읽지 못하게 하고 싶다면 어떻게 할까요? 그렇죠, 암호를 만들어서 쓰겠죠! 이게 바로 암호화예요.

예를 들어볼까요? 🧐

"안녕 철수야" 라는 메시지를 "ㅇㄴ ㅊㅅㅇ" 로 바꾸는 거예요.

이렇게 하면 다른 사람들은 이게 무슨 뜻인지 모르겠죠? 하지만 철수는 이 규칙을 알고 있으니까 무슨 뜻인지 알 수 있어요. 이게 바로 간단한 형태의 암호화예요!

컴퓨터에서의 암호화도 비슷해요. 다만, 좀 더 복잡하고 안전한 방법을 사용하죠. 예를 들어, 여러분이 재능넷에서 비밀번호를 설정할 때, 그 비밀번호는 암호화되어 저장돼요. 그래서 해커들이 데이터베이스를 훔쳐가도 여러분의 진짜 비밀번호는 알 수 없답니다. 😎

위의 그림을 보면 암호화 과정이 어떻게 이루어지는지 한눈에 볼 수 있죠? 원본 메시지가 암호화 알고리즘을 거쳐 암호화된 메시지로 변하는 거예요. 쿨하죠? 😎

그런데 여기서 궁금증! 🤔

암호화된 메시지는 어떻게 다시 원래 메시지로 바꿀 수 있을까요?
암호화 방법에는 어떤 종류가 있을까요?
타입스크립트에서는 어떻게 암호화를 구현할 수 있을까요?

이 모든 궁금증을 하나하나 풀어나가 볼게요! 재밌겠죠? ㅎㅎ

2. 복호화: 비밀 메시지 풀기 🔓

자, 이제 암호화가 뭔지 알았으니까, 그 반대 과정인 복호화에 대해 알아볼까요?

복호화는 쉽게 말해서 암호화된 메시지를 다시 원래대로 되돌리는 과정이에요. 아까 예시로 들었던 "ㅇㄴ ㅊㅅㅇ"를 다시 "안녕 철수야"로 바꾸는 거죠.

암호화: "안녕 철수야" → "ㅇㄴ ㅊㅅㅇ"
복호화: "ㅇㄴ ㅊㅅㅇ" → "안녕 철수야"

컴퓨터에서의 복호화도 이와 비슷해요. 암호화된 데이터를 받아서, 특정한 알고리즘과 키를 사용해 원래의 데이터로 되돌리는 거죠.

예를 들어, 여러분이 재능넷에서 로그인할 때, 서버는 여러분이 입력한 비밀번호를 암호화해서 저장된 암호화된 비밀번호와 비교해요. 이 과정에서 복호화가 사용되는 것은 아니지만, 암호화된 두 값을 비교함으로써 로그인 여부를 결정하는 거죠.

이 그림을 보면 복호화 과정이 암호화의 반대로 진행되는 걸 알 수 있죠? 암호화된 메시지가 복호화 알고리즘을 거쳐 다시 원본 메시지로 돌아오는 거예요. 신기하지 않나요? 🤩

그런데 여기서 한 가지 중요한 점! 모든 암호화 방식이 복호화가 가능한 건 아니에요. 어떤 암호화 방식은 일부러 복호화가 불가능하게 만들어져 있답니다. 이런 방식을 해시 함수라고 해요.

해시 함수는 주로 비밀번호를 저장할 때 많이 사용돼요. 왜 그럴까요? 🤔

해시 함수로 암호화된 비밀번호는 원래 비밀번호로 되돌릴 수 없어요.
같은 입력값에 대해 항상 같은 해시값을 출력해요.
해시값만으로는 원래 입력값을 추측하기 거의 불가능해요.

이런 특성 때문에 해시 함수는 비밀번호 저장에 딱이에요! 예를 들어, 재능넷에서도 여러분의 비밀번호를 해시 함수로 암호화해서 저장할 거예요. 그래서 설령 해커가 데이터베이스를 털어가도 실제 비밀번호는 알 수 없답니다. 안전하죠? 😎

자, 이제 암호화와 복호화에 대해 기본적인 이해가 되셨나요? 그럼 이제 타입스크립트로 이걸 어떻게 구현하는지 알아볼까요? 기대되지 않나요? ㅎㅎ

3. 타입스크립트로 암호화/복호화 구현하기 💻

드디어 우리의 주인공 타입스크립트가 등장할 시간이에요! 🎉 타입스크립트로 간단한 암호화와 복호화 함수를 만들어볼 거예요. 재미있을 거예요, 약속해요! ㅋㅋㅋ

먼저, 가장 간단한 형태의 암호화 방식인 시저 암호를 구현해볼게요. 시저 암호는 각 문자를 알파벳 상에서 일정한 거리만큼 밀어서 다른 문자로 대체하는 방식이에요.

예를 들어, 3만큼 밀면:

A → D
B → E
C → F
...
Z → C

이렇게 되는 거죠. 간단하면서도 재미있죠? 😄

자, 이제 타입스크립트로 이걸 구현해볼게요!


function caesarCipher(str: string, shift: number): string {
  return str.split('').map(char => {
    if (char.match(/[a-z]/i)) {
      const code = char.charCodeAt(0);
      const isUpperCase = char === char.toUpperCase();
      const base = isUpperCase ? 65 : 97;
      return String.fromCharCode((code - base + shift) % 26 + base);
    }
    return char;
  }).join('');
}

// 암호화
const encrypted = caesarCipher("Hello, World!", 3);
console.log(encrypted); // "Khoor, Zruog!"

// 복호화
const decrypted = caesarCipher(encrypted, -3);
console.log(decrypted); // "Hello, World!"

우와! 😲 이게 뭔가 싶죠? 하나씩 설명해드릴게요.

caesarCipher 함수는 문자열(str)과 밀어낼 거리(shift)를 인자로 받아요.
문자열을 한 글자씩 쪼개서 배열로 만들고(split('')), 각 글자마다 변환을 적용해요(map).
알파벳인 경우에만 변환을 해요. 그 외의 문자(쉼표, 공백 등)는 그대로 둬요.
대문자는 대문자끼리, 소문자는 소문자끼리 변환해요.
변환된 글자들을 다시 하나의 문자열로 합쳐요(join('')).

이렇게 하면 암호화와 복호화를 동시에 할 수 있어요. 암호화할 때는 양수 shift를, 복호화할 때는 음수 shift를 사용하면 돼요. 쿨하죠? 😎

하지만 이 방식은 너무 단순해서 쉽게 깨질 수 있어요. 실제로는 더 복잡하고 안전한 암호화 방식을 사용해야 해요. 그 중 하나가 바로 AES(Advanced Encryption Standard)예요.

AES는 현재 가장 널리 사용되는 대칭키 암호화 알고리즘 중 하나예요. 타입스크립트에서 AES를 구현하려면 외부 라이브러리를 사용하는 게 좋아요. 대표적으로 crypto-js 라이브러리가 있죠.

먼저 crypto-js를 설치해볼까요?

npm install crypto-js
npm install @types/crypto-js

이제 AES 암호화/복호화를 구현해볼게요!


import * as CryptoJS from 'crypto-js';

function aesEncrypt(message: string, secretKey: string): string {
  return CryptoJS.AES.encrypt(message, secretKey).toString();
}

function aesDecrypt(ciphertext: string, secretKey: string): string {
  const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
  return bytes.toString(CryptoJS.enc.Utf8);
}

// 사용 예
const secretKey = "mySecretKey123";
const message = "안녕하세요, 재능넷입니다!";

const encrypted = aesEncrypt(message, secretKey);
console.log("암호화된 메시지:", encrypted);

const decrypted = aesDecrypt(encrypted, secretKey);
console.log("복호화된 메시지:", decrypted);

우와! 이제 진짜 프로처럼 암호화를 하고 있어요! 👨‍💻👩‍💻 이 코드가 하는 일을 간단히 설명하자면:

aesEncrypt 함수는 메시지와 비밀 키를 받아서 암호화된 문자열을 반환해요.
aesDecrypt 함수는 암호화된 문자열과 비밀 키를 받아서 원래 메시지를 복원해요.
암호화할 때는 CryptoJS.AES.encrypt를, 복호화할 때는 CryptoJS.AES.decrypt를 사용해요.

이렇게 하면 아주 안전하게 메시지를 암호화하고 복호화할 수 있어요. 예를 들어, 재능넷에서 중요한 사용자 정보를 저장하거나 전송할 때 이런 방식을 사용할 수 있겠죠?

그런데 여기서 주의할 점! 🚨

비밀 키 관리가 정말 중요해요! 비밀 키가 노출되면 암호화된 데이터도 위험해질 수 있어요. 그래서 보통 비밀 키는 환경 변수나 안전한 키 관리 시스템에 저장해요.

자, 이제 우리는 타입스크립트로 간단한 암호화부터 복잡한 암호화까지 구현할 수 있게 됐어요. 멋지지 않나요? 🎉

다음 섹션에서는 이런 암호화 기술들이 실제로 어떻게 사용되는지, 그리고 주의해야 할 점은 무엇인지 알아볼 거예요. 기대되지 않나요? ㅎㅎ

4. 실제 사용 사례와 주의점 🚀

자, 이제 우리가 배운 암호화와 복호화 기술이 실제로 어떻게 사용되는지 알아볼 차례예요! 😃 재능넷 같은 웹 서비스에서는 이런 기술들이 정말 중요하게 쓰인답니다.

1. 비밀번호 저장 🔒

가장 흔한 사용 사례는 바로 비밀번호 저장이에요. 하지만 여기서 주의할 점! 비밀번호는 절대로 평문으로 저장하면 안 돼요. 대신 해시 함수를 사용해야 해요.

타입스크립트에서 비밀번호를 안전하게 저장하는 방법을 볼까요?


import * as bcrypt from 'bcrypt';

async function hashPassword(password: string): Promise<string> {
  const saltRounds = 10;
  return await bcrypt.hash(password, saltRounds);
}

async function verifyPassword(password: string, hash: string): Promise<boolean> {
  return await bcrypt.compare(password, hash);
}

// 사용 예
async function main() {
  const password = "mySecurePassword123";
  
  const hashedPassword = await hashPassword(password);
  console.log("해시된 비밀번호:", hashedPassword);
  
  const isMatch = await verifyPassword(password, hashedPassword);
  console.log("비밀번호 일치?", isMatch);
}

main();
</boolean></string>

이 코드에서는 bcrypt라는 라이브러리를 사용했어요. bcrypt는 비밀번호 해싱에 특화된 알고리즘이에요. 왜 이걸 쓸까요? 🤔

bcrypt는 자체적으로 솔트(salt)를 추가해요. 솔트란 랜덤한 값을 비밀번호에 추가하는 거예요. 이렇게 하면 같은 비밀번호라도 매번 다른 해시값이 나와서 더 안전해요.
bcrypt는 의도적으로 느리게 설계되었어요. 이게 왜 좋냐고요? 해커가 무차별 대입 공격을 하기 어렵게 만들어주거든요!

재능넷 같은 서비스에서 이런 방식으로 비밀번호를 저장하면, 설령 데이터베이스가 해킹당해도 사용자의 실제 비밀번호는 안전하게 보호될 수 있어요. 쩔지 않나요? 😎

2. 민감한 데이터 전송 📡

웹 서비스에서 민감한 정보(예: 신용카드 정보, 개인식별정보 등)를 주고받을 때도 암호화가 필요해요. 이때는 우리가 앞서 배운 AES 같은 대칭키 암호화를 사용할 수 있어요.

하지만 여기서 한 가지 문제가 있어요. 어떻게 안전하게 암호화 키를 공유할 수 있을까요? 🤔 이를 위해 보통 비대칭키 암호화를 함께 사용해요.

비대칭키 암호화는 공개키와 개인키 한 쌍을 사용해요. 공개키로 암호화한 데이터는 개인키로만 복호화할 수 있죠. 타입스크립트에서 RSA라는 비대칭키 암호화를 구현해볼까요?


import * as crypto from 'crypto';

// 키 쌍 생성
const { publicKey, privateKey } = crypto.generateKeyPairSync('rsa', {
  modulusLength: 2048,
});

// 암호화 함수
function encrypt(data: string): string {
  const encryptedData = crypto.publicEncrypt(
    {
      key: publicKey,
      padding: crypto.constants.RSA_PKCS1_OAEP_PADDING,
      oaepHash: "sha256",
    },
    Buffer.from(data)
  );
  
  return encryptedData.toString('base64');
}

// 복호화 함수
function decrypt(encryptedData: string): string {
  const decryptedData = crypto.privateDecrypt(
    {
      key: privateKey,
      padding: crypto.constants.RSA_PKCS1_OAEP_PADDING,
      oaepHash: "sha256",
    },
    Buffer.from(encryptedData, 'base64')
  );
  
  return decryptedData.toString();
}

// 사용 예
const message = "이 정보는 매우 중요해요!";
const encrypted = encrypt(message);
console.log("암호화된 메시지:", encrypted);

const decrypted = decrypt(encrypted);
console.log("복호화된 메시지:", decrypted);

우와, 이제 우리는 진짜 해커(?)가 된 것 같아요! ㅋㅋㅋ 😎 이 코드가 하는 일을 간단히 설명하자면:

먼저 RSA 키 쌍(공개키와 개인키)을 생성해요.
encrypt 함수는 공개키를 사용해 데이터를 암호화해요.
decrypt 함수는 개인키를 사용해 암호화된 데이터를 복호화해요.

이렇게 하면 공개키는 안전하게 공유할 수 있고, 개인키는 서버에 안전하게 보관할 수 있어요. 예를 들어, 재능넷에서 결제 정보를 전송할 때 이런 방식을 사용할 수 있겠죠?

3. 데이터 무결성 검증 ✅

때로는 데이터가 변조되지 않았다는 것을 확인해야 할 때가 있어요. 이럴 때 사용하는 게 바로 해시 함수예요. 해시 함수는 어떤 데이터에 대해 고유한 '지문'같은 값을 만들어내요.

타입스크립트에서 SHA-256 해시 함수를 사용해보겠습니다:


import * as crypto from 'crypto';

function hashData(data: string): string {
  return crypto.createHash('  sha256').update(data).digest('hex');
}

// 사용 예
const originalData = "이 데이터는 변조되면 안 돼요!";
const hash = hashData(originalData);
console.log("원본 데이터의 해시:", hash);

// 나중에 데이터 무결성 검증
const receivedData = "이 데이터는 변조되면 안 돼요!";
const receivedHash = hashData(receivedData);

if (hash === receivedHash) {
  console.log("데이터가 변조되지 않았습니다.");
} else {
  console.log("경고: 데이터가 변조되었을 수 있습니다!");
}

이 코드는 데이터의 무결성을 검증하는 데 사용할 수 있어요. 예를 들어, 재능넷에서 중요한 파일을 다운로드할 때, 파일의 해시값을 함께 제공하면 사용자는 다운로드한 파일이 중간에 변조되지 않았다는 것을 확인할 수 있죠.