JavaScript로 이메일 주소 마스킹하기 — 개인정보 보호를 위한 간단한 구현 방법

이메일 마스킹이란?

웹사이트에서 사용자의 개인 이메일 주소를 그대로 노출하면 스팸 수신이나 개인정보 유출의 위험이 있습니다. 따라서 많은 웹사이트에서는 이메일 주소의 일부를 가리는 마스킹(masking) 기법을 활용해 개인정보를 보호합니다.

예를 들어 다음과 같은 이메일 주소가 있다고 가정해 보겠습니다.

const email = 'ramkumar@example.com';

마스킹을 적용하면 화면에는 아래와 같이 표시됩니다.

r...r@example.com

즉, 이름(로컬 파트)의 첫 글자와 마지막 글자만 남기고 중간 부분은 '...'으로 대체하는 방식입니다.

JavaScript로 이메일 마스킹 함수 작성하기

이제 이메일 문자열을 입력받아 마스킹된 이메일을 반환하는 JavaScript 함수를 작성해 보겠습니다.

코드

const email = 'ramkumar@example.com';
const maskEmail = (email = '') => {
  const [name, domain] = email.split('@');
  const { length: len } = name;
  const maskedName = name[0] + '...' + name[len - 1];
  const maskedEmail = maskedName + '@' + domain;
  return maskedEmail;
};
console.log(maskEmail(email));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

r...r@example.com

코드 동작 원리

1. split('@')으로 분리: 이메일을 '@' 기준으로 나누어 이름(name)과 도메인(domain)을 얻습니다.
2. 첫 글자와 마지막 글자 추출: name[0]으로 첫 글자를, name[len - 1]로 마지막 글자를 가져옵니다.
3. 마스킹된 이름 생성: 첫 글자 + '...' + 마지막 글자 형태로 새로운 이름을 만듭니다.
4. 도메인과 결합: 마스킹된 이름 뒤에 '@'와 도메인을 붙여 최종 이메일을 완성합니다.

이처럼 단 몇 줄의 코드만으로도 이메일 주소를 안전하게 가릴 수 있습니다. 회원 목록, 댓글, 프로필 페이지 등 개인정보가 노출될 가능성이 있는 화면에서 실용적으로 활용할 수 있는 기법이니 꼭 기억해 두세요.