프론트엔드백엔드

회원가입 없이 7 일 둘러보기 + 보안 7 대 안전장치 사용자 언어로 소개 — POP-SPOT v2.0 게스트 모드

김동현
··2분 읽기

상용화 직전의 두 마무리 — 회원가입 안 하고도 메인을 쉭석 볼 수 있는 7일 게스트 모드 + JWT·BCrypt 같은 보안이 코드 안에만 있던 걸 /about 으로 사용자에게 설명.

상용화 직전의 두 가지 일이었음. (a) 아예 가입도 안 하고 둘러볼 수 있게 진입 장벽 낮추기, (b) 코드와 README 에만 있던 보안 장치를 사용자 언어로 소개하기.

이 글에서 다루는 것

  • 7 일 게스트 모드 의 입장·만료 흐름과 localStorage 기반 구현
  • "JWT · BCrypt · Rate Limit · Bucket4j" 같은 기술 용어를 "출입증 · 비밀번호 뒤섮 저장 · 자동 회수 한도" 으로 운 이유
  • /about 에 7 대 안전장치 카드 추가
  • Footer 에 "서비스 소개" 링크 추가
  • 모르는 단어 한 줄로

    용어한 줄 설명
    게스트 모드회원가입 안 하고 둘러볼 수 있는 임시 자격. 키 = localStorage 의 날짜 + 플래그
    localStorage브라우저에 작은 값을 저장해두는 공간. 탭 닫아도 남아있음
    D-N pill"D-7" 같은 작은 라벨. "남은 일수" 표시에 쓰임

    무엇이 바뀌었나

    항목v1.9v2.0
    비로그인 진입강제 로그인7 일 게스트로 메인 둘러보기 가능
    보안 소개코드 / README 에만 존재/about 에 7 대 안전장치 카드
    Footer/about 진입 동선 없음"서비스 소개" 링크 추가

    왜 이렇게 했음

    진입 장벽 낮추기 — 첫 방문자가 메인에 뭐가 있는지 보기도 전에 "이메일 적으세요" 면을 만난다면 이탈이 늘어난다. 일단 가입 안 해도 메인·지도·랭킹 정도는 보게 하고, 코스 저장·음악·메이트 같은 "내 것" 이 필요한 기능은 여전히 로그인 요구.

    보안을 사용자 언어로 — README 에 "JWT HS256 32B+, BCrypt 12, Bucket4j Rate Limit, OAuth2, CORS 화이트리스트" 라고 적어둔 건 개발자에게만 의미가 있다. 일반 사용자 입장에서는 "이 사이트가 내 비밀번호·결제를 다루는 방법" 이 알고 싶은 포인트. 그래서 /about 에 카드 7 개를 둔다 — "로그인 세션은 출입증처럼 서명해서 발급" 같은 은유.

    7 일: 3일은 넘어보기엔 짧고 14일은 잘 안 돌아올 거 같아서, 그 사이의 식이섬 관심 주기인 7일로 설정.


    코드로는 어떻게 (필요한 부분만)

    typescript
    // src/lib/guestMode.ts
    const GUEST_KEY = 'popspot.guest';
    const MAX_DAYS = 7;
    
    export function startGuestMode() {
      localStorage.setItem(GUEST_KEY, JSON.stringify({
        startedAt: new Date().toISOString(),
      }));
    }
    
    export function getGuestState() {
      const raw = localStorage.getItem(GUEST_KEY);
      if (!raw) return { active: false, daysLeft: 0 };
      const { startedAt } = JSON.parse(raw);
      const days = Math.floor(
        (Date.now() - new Date(startedAt).getTime()) / 86_400_000);
      return { active: days < MAX_DAYS, daysLeft: MAX_DAYS - days };
    }
    typescript
    // src/lib/useGuestMode.ts — 그 상태를 리액트에서 쓰기 좋게
    export function useGuestMode() {
      const [state, setState] = useState(() => getGuestState());
      useEffect(() => {
        setState(getGuestState());
      }, []);
      return state;
    }

    핵심 파일: popspot-frontend/src/lib/guestMode.ts, popspot-frontend/src/lib/useGuestMode.ts, popspot-frontend/src/app/about/page.tsx


    직접 보는 법

    popspot.co.kr 에 로그아웃 상태로 방문 → 하단 Footer 의 "서비스 소개" → 7 대 안전장치 카드. 인트로 페이지에서 "게스트로 7일 둘러보기" 버튼을 눌러볼 수 있음. (단, v2.0 시점에는 버튼이 없었고 v2.5 에서 다시 연결됨.)


    관련 글

  • 이전 — v1.9, 매거진 풀 리디자인
  • 다음 — v2.1~v2.3, 자동 인트로 실패담
  • 공유

    댓글