복사된 텍스트를 암호화하면서 화면에 읽을 수 있게 표시하는 React 컴포넌트 구축

Source: Dev.to

작동 원리

• 텍스트는 화면에 정상적으로 표시됩니다.
• 사용자가 텍스트를 복사하면 클립보드에는 무작위 Vigenère 암호로 생성된 암호화된 난독화 문자열이 들어갑니다.
• 암호화 키는 각 렌더링 시마다 새로 생성되며 절대 노출되지 않아 복호화가 불가능합니다.

사용법

import { ProtectedText } from "react-text-protect";

function App() {
  return (
    <ProtectedText>
      This text looks normal but
      copying it produces encrypted
      output that cannot be decoded.
    </ProtectedText>
  );
}

복사 출력 예시

Jeb lhag fdiax josfi kljpdy ftq ut peryuobv xvvrf

왜 이 접근 방식인가

• 오른쪽 클릭 메뉴가 깨지거나 접근성 문제가 없습니다.
• 브라우저의 검사 요소(Inspect Element)로 우회할 수 없습니다.
• 사용자를 위한 일반 텍스트 동작을 유지합니다.
• 의존성이 없으며 번들 크기가 약 2 KB에 불과합니다.

사용 사례

• 온라인 시험 및 평가
• AI 스크래퍼 차단
• 독점 문서화
• 읽을 수는 있지만 복사할 수 없어야 하는 모든 콘텐츠

설치 및 링크

npm install react-text-protect

피드백 환영합니다!