Dark Place Security Labs

배경

보안 개념을 이론으로만 배우는 것은 한계가 있습니다. SQL 인젝션이 "위험하다"는 것은 누구나 알지만, 실제로 어떻게 동작하는지 체험해본 사람은 드뭅니다. 안전한 환경에서 보안 위협을 직접 실험할 수 있는 인터랙티브 교육 플랫폼을 만들고 싶었습니다.

도전 과제

보안 시뮬레이션의 안전성

실제 보안 공격을 시뮬레이션하되, 외부 서버와의 통신 없이 브라우저에서만 동작해야 했습니다. 서버 사이드 로직 없이 SQL 인젝션, 쿠키 탈취, 패킷 스니핑을 현실적으로 재현하는 것이 핵심 과제였습니다.

난이도 체계

초보자부터 중급자까지 다양한 수준의 학습자를 수용해야 했습니다. Easy / Medium / Hard 3단계 난이도를 설계하고, 각 랩마다 학습 목표와 힌트 시스템을 구현해야 했습니다.

다크 테마 UX

White Place의 밝은 Glassmorphism과 완전히 다른 다크 터미널 느낌의 UI를 구현해야 했습니다. 기존 CSS 변수와 충돌 없이 독립적인 디자인 시스템을 운영하는 것이 도전이었습니다.

해결 방법

클라이언트 전용 보안 시뮬레이션

모든 "공격"은 JavaScript 로직으로 시뮬레이션됩니다. 예를 들어 SQL 인젝션 랩에서는 사용자 입력을 클라이언트 측 파서가 분석하고, 주입 패턴이 감지되면 미리 정의된 "취약한 응답"을 반환합니다.

// SQL Injection 시뮬레이션 예시
function simulateQuery(input: string) {
  const injectionPattern = /('|"|;|--|\bOR\b|\bUNION\b)/i;
  if (injectionPattern.test(input)) {
    return { success: true, data: hiddenRecords };
  }
  return { success: false, data: [] };
}

7개 보안 랩

난이도	랩	학습 목표
Easy	시저 암호	고전 암호의 원리
Easy	피싱 퀴즈	소셜 엔지니어링 식별
Easy	패킷 스니핑	네트워크 트래픽 분석
Medium	쿠키 탈취	세션 하이재킹 원리
Medium	SQL 인젝션	입력값 검증의 중요성
Medium	암호화 플레이그라운드	대칭/비대칭 암호화
Hard	보안 평가	종합 취약점 분석

Dark Place 디자인 시스템

--dp-* 접두사의 독립적 CSS 변수 토큰을 사용합니다. Route Group (darkplace)로 레이아웃을 분리해 White Place와의 스타일 충돌을 원천 차단했습니다.

결과

7개 인터랙티브 보안 실습 완성
3단계 난이도 체계 (Easy 3 / Medium 3 / Hard 1)
100% 클라이언트 실행 서버 불필요
Framer Motion 터미널 애니메이션 몰입감 있는 UX
독립 다크 테마 White Place와 완전 분리

배운 점

보안 시뮬레이션을 클라이언트에서만 구현하는 것은 예상보다 가능했습니다. 핵심은 "실제 공격"이 아니라 "공격의 원리를 체험"하는 것이 목적이므로, 패턴 매칭과 상태 머신으로 충분히 현실적인 경험을 제공할 수 있었습니다.

Route Group을 활용한 레이아웃 분리 패턴은 하나의 Next.js 앱에서 완전히 다른 두 개의 "사이트"를 운영할 수 있게 해줬습니다. 이 패턴은 다른 프로젝트에서도 유용하게 활용할 수 있을 것입니다.

배경