🔐 비밀번호 보호 페이지 만들기

HTML과 JavaScript만으로도 간단한 비밀번호 보호 페이지를 만들 수 있습니다. 이 방법은 서버 없이 정적인 페이지에서 인증 기능을 구현하고자 할 때 유용합니다.

기본 구조는 다음과 같습니다:

<input type="password" id="password">
<button onclick="checkPassword()">입장</button>

<script>
  function checkPassword() {
    const correct = "1234";
    const input = document.getElementById("password").value;
    if (input === correct) {
      alert("입장 성공!");
      // 또는 콘텐츠 보여주기
    } else {
      alert("비밀번호가 틀렸습니다.");
    }
  }
</script>

이처럼 간단한 비교 로직으로 조건에 따라 콘텐츠를 보여줄 수 있으며, 상태 유지를 위해 localStorage를 사용할 수도 있습니다.

정식 인증 기능은 아니지만, 프론트엔드 수준에서 충분히 학습할 수 있는 기초적인 보안 구조입니다.

현재 이 웹사이트 역시 위에서 소개한 로직을 활용하여 비밀번호 보호 기능을 구현하였습니다.

원래는 PostgreSQL을 통해 사용자 인증을 처리할 수도 있지만, Naver Cloud Platform(NCP)에서는 슈퍼어드민 계정에 직접 접근이 불가능하여 데이터베이스 테이블 생성 및 제어에 제한이 있습니다.

이를 보완하기 위해서는 PHP 파일 내에서 인증 로직을 구현하고, 별도의 서버 인증 처리 또는 파일 기반 접근 제어 방식을 적용할 수 있습니다. 그러나 현재는 SQL 접근 권한이 제한되어 있기 때문에, JavaScript와 localStorage를 활용한 프론트엔드 기반의 인증 방식을 사용하고 있습니다.

이 방식은 완전한 보안 수준의 인증은 아니지만, 정적 웹사이트나 개인 포트폴리오와 같이 간단한 보호 기능이 필요한 경우 유용하게 사용될 수 있습니다.