안녕하세요!
평소 일상적인 아이디어나 중요한 개인 정보를 메모할 때, “이 데이터가 서버에 그대로 저장되어도 안전할까?”라는 고민을 해본 적 없으신가요? 오늘은 별도의 외부 라이브러리 설치 없이, 오직 브라우저 내장 기능만을 활용해 데이터를 철저히 보호하는 자바스크립트 암호화 기반의 개인 메모장을 만들어보려고 합니다. 서버 관리자조차 내용을 알 수 없는 완벽한 프라이버시 보호 시스템을 우리 손으로 직접 구축해 보시죠.
왜 Web Crypto API인가?
보통 자바스크립트에서 암호화를 구현할 때 crypto-js 같은 라이브러리를 떠올리곤 합니다. 하지만 2026년 현재, 최신 브라우저들은 이미 강력한 보안 표준인 Web Crypto API를 내장하고 있습니다.
라이브러리를 쓰지 않으면 초기 로딩 속도가 빨라지고 보안 취약점으로부터 자유로워집니다. 특히 이번 프로젝트에서 핵심이 되는 자바스크립트 암호화 기술은 ‘AES-GCM’ 알고리즘입니다. 이는 데이터의 기밀성뿐만 아니라 무결성(데이터가 변조되지 않았음)까지 보장하는 현대 암호학의 정수라고 할 수 있습니다.
암호화 메모장의 동작 원리 – 보안의 3단계 설계
우리 메모장의 보안 메커니즘은 단순한 데이터 가공을 넘어, 현대 암호학의 표준을 철저히 따릅니다. 사용자가 메모를 작성하고 저장 버튼을 누르는 짧은 순간, 브라우저 내부에서는 다음과 같은 정교한 자바스크립트 암호화 프로세스가 진행됩니다.
1. 비밀번호의 진화: PBKDF2를 통한 키 유도 (Key Derivation)
가장 먼저 사용자가 설정한 ‘마스터 비밀번호’를 처리합니다. 보안의 세계에서 비밀번호를 있는 그대로 암호화 키로 사용하는 것은 매우 위험한 발상입니다. 비밀번호는 대개 사람이 기억하기 쉬운 단어로 이루어져 있어 해커들의 무차별 대입 공격(Brute Force)에 취약하기 때문입니다.
이를 방지하기 위해 우리는 PBKDF2(Password-Based Key Derivation Function 2) 알고리즘을 사용합니다. 이 기술은 비밀번호에 ‘솔트(Salt)’라는 무작위 데이터를 섞고, 수만 번에서 수십만 번의 해싱 과정을 반복하여 강력한 256비트 바이너리 키를 생성합니다. 2026년 보안 표준에 맞춰 반복 횟수(Iterations)를 높게 설정함으로써, 해커가 암호를 역추적하는 데 걸리는 시간을 물리적으로 불가능한 수준까지 끌어올리는 것이 이 단계의 핵심입니다.
2. AES-GCM 알고리즘: 기밀성과 무결성의 결합
강력한 키가 준비되었다면, 이제 실제 메모 내용을 자바스크립트 암호화할 차례입니다. 우리는 현존하는 대칭키 암호화 방식 중 가장 신뢰받는 AES-GCM(Advanced Encryption Standard – Galois/Counter Mode)을 채택합니다.
AES-GCM이 특별한 이유는 단순히 내용을 암호화(기밀성)하는 것에 그치지 않고, 데이터가 전송되거나 저장되는 과정에서 누군가에 의해 단 1바이트라도 변조되었는지 확인하는 ‘인증 태그(Auth Tag)’를 생성하기 때문입니다. 이를 통해 복호화 시 데이터의 무결성을 완벽하게 검증할 수 있습니다. 암호화 과정에서는 매번 새로운 ‘초기화 벡터(IV)’가 생성되어, 설령 같은 내용을 암호화하더라도 매번 다른 암호문이 출력되도록 설계하여 보안의 무작위성을 극대화합니다.
3. 안전한 로컬 보관 및 구조화
마지막으로, 이렇게 생성된 암호문(Ciphertext)과 복호화에 필수적인 부가 정보(Salt, IV)를 브라우저의 저장소에 안전하게 안착시킵니다. 이 과정은 이전에 다루었던 LocalStorage를 활용한 자바스크립트 할 일 목록의 원리를 계층적으로 확장한 것입니다.
암호화된 결과물은 바이너리 데이터 형태이므로, 이를 웹 환경에서 안전하게 보관하기 위해 Base64 인코딩을 거쳐 텍스트 형태로 변환합니다. 이후 JSON 객체 구조로 매핑하여 LocalStorage에 저장함으로써, 사용자가 브라우저를 닫거나 컴퓨터를 재부팅하더라도 오직 마스터 비밀번호를 아는 본인만이 데이터를 다시 불러올 수 있는 완벽한 ‘엔드 투 엔드(End-to-End)’ 보안 환경을 완성하게 됩니다.
핵심 로직: 비밀번호를 암호화 키로 변환하기
비밀번호를 직접 키로 사용하는 것은 위험합니다. 브라우저의 subtle.deriveKey 메소드를 사용하여 사용자 비밀번호를 한 번 더 꼬아주는 과정이 필요합니다.
// 사용자의 비밀번호로부터 암호화 키를 생성하는 로직
async function deriveKey(password, salt) {
const enc = new TextEncoder();
const baseKey = await window.crypto.subtle.importKey(
"raw",
enc.encode(password),
"PBKDF2",
false,
["deriveKey"]
);
return window.crypto.subtle.deriveKey(
{
name: "PBKDF2",
salt: salt,
iterations: 100000,
hash: "SHA-256"
},
baseKey,
{ name: "AES-GCM", length: 256 },
true,
["encrypt", "decrypt"]
);
}여기서 salt는 무작위 데이터로, 동일한 비밀번호라도 매번 다른 키가 생성되게 하여 보안성을 높여줍니다. 이 과정이 바로 자바스크립트 암호화의 가장 중요한 첫 단추입니다.
실전 구현: 메모 암호화 및 복호화
이제 실제 메모를 암호화하는 함수를 작성해 보겠습니다. 암호화 시에는 매번 새로운 초기화 벡터(IV)를 생성해야 합니다.
async function encryptMemo(text, password) {
const enc = new TextEncoder();
const salt = window.crypto.getRandomValues(new Uint8Array(16));
const iv = window.crypto.getRandomValues(new Uint8Array(12));
const key = await deriveKey(password, salt);
const encrypted = await window.crypto.subtle.encrypt(
{ name: "AES-GCM", iv: iv },
key,
enc.encode(text)
);
// salt, iv, 암호화된 데이터를 하나로 묶어 저장 (Base64 변환 권장)
return {
content: btoa(String.fromCharCode(...new Uint8Array(encrypted))),
salt: btoa(String.fromCharCode(...salt)),
iv: btoa(String.fromCharCode(...iv))
};
}이 코드를 통해 사용자가 입력한 평문 메모는 알아볼 수 없는 외계어 같은 문자열로 변합니다. 이 데이터는 해킹을 당해 유출되더라도, 비밀번호가 없다면 슈퍼컴퓨터로도 풀기 어렵습니다.
반대로 저장된 데이터를 읽어올 때는 복호화 과정을 거칩니다. 자바스크립트 할 일 목록 기능을 구현해 보셨다면, 암호화된 문자열을 불러와 decrypt 함수에 넣는 구조를 쉽게 이해하실 수 있을 겁니다.
시행착오와 성능 최적화 경험
사실 단순히 암호화 알고리즘을 적용하는 것보다 더 중요한 것은 ‘보안의 설계 철학’입니다. 개발 과정에서 제가 가장 깊게 고민했던 부분은 “사용자가 브라우저를 새로고침하거나 창을 닫았을 때, 어떻게 하면 보안성을 유지하면서도 편리하게 데이터를 복구할 수 있을까?”였습니다.
많은 초보 개발자가 실수하는 부분 중 하나가 암호화 키를 소스코드에 하드코딩하거나, salt 값을 고정된 상수로 사용하는 것입니다. 하지만 이런 방식은 자바스크립트 암호화의 본질적인 목적을 상실하게 만듭니다. 저는 이번 프로젝트에서 window.crypto.getRandomValues를 활용해 예측 불가능한 암호학적 난수를 생성함으로써, 레인보우 테이블 공격(Rainbow Table Attack)과 같은 무차별 대입 공격으로부터 데이터를 보호하는 로직을 구축했습니다.
또한, 암호화된 데이터를 LocalStorage에 저장할 때의 구조적 설계도 중요합니다. 단순히 암호문만 저장하는 것이 아니라, 복호화에 필요한 salt와 iv(Initial Vector)를 어떻게 안전하게 페어링하여 보관할지에 대한 고민이 필요했습니다. 저는 이를 JSON 객체 형태로 구조화하여 관리했는데, 이는 객체 매핑 설계로 코드 줄이기: 자바스크립트 단위 변환기 포스팅에서 다루었던 효율적인 데이터 관리 기법과도 일맥상통하는 부분입니다.
마지막으로 강조하고 싶은 점은 ‘에러 핸들링’입니다. 잘못된 비밀번호를 입력했을 때 단순히 오류를 뱉고 멈추는 것이 아니라, DOM 조작 기초: 실시간 자바스크립트 랜덤 명언 생성기에서 보여주었던 것처럼 사용자에게 친절하지만 보안 정보는 노출하지 않는 세련된 알림 시스템(Toast UI)을 연동하는 과정이 필요합니다. Web Crypto API는 복호화 실패 시 OperationError를 발생시키는데, 이를 try-catch문으로 정교하게 잡아내어 “비밀번호가 틀렸습니다”라는 메시지 대신 “데이터를 불러올 수 없습니다”와 같은 중립적인 메시지를 출력하는 것이 보안 UX의 핵심입니다.
암호화 메모장 사용해보기
앞서 설명한 로직이 실제로 어떻게 작동하는지 궁금하시죠? 아래는 별도의 라이브러리 없이 구현한 암호화 메모장 데모입니다. 직접 비밀번호와 메모를 입력하고 ‘암호화 저장’을 누른 뒤, 새로고침을 하고 다시 ‘복호화 불러오기’를 테스트해 보세요.
🔒 나만의 비밀 메모장
오늘은 Web Crypto API를 활용해 그 누구도 침범할 수 없는 자바스크립트 암호화 메모장을 만들어보았습니다. 단순히 기능을 만드는 것을 넘어, 내 소중한 데이터를 스스로 지키는 보안 로직을 직접 구현해 본다는 점에서 개발자로서 큰 성취감을 느낄 수 있는 프로젝트입니다.
이 로직을 응용하면 비밀번호 관리자나 개인 일기장 앱으로도 확장할 수 있습니다. 보안은 타협할 수 없는 가치입니다. 여러분도 오늘 배운 코드를 바탕으로 더 안전하고 멋진 서비스를 만들어 보시길 바랍니다. 궁금한 점은 언제든 댓글로 남겨주세요!