공격형 사이버 보안 & SaaS

Sentinel by Kayzen

엔지니어에게 보안 제품을 판다는 것: 모든 주장은 입증할 수 있어야 했습니다.

연도
2026
제작 기간
4주
기술 스택
Next.js · React · TypeScript · Tailwind · Vercel
  • 포지셔닝
  • 디자인
  • 개발
  • 테크니컬 SEO
  • 카피라이팅
https://sentinel.kayzen-lyon.com/
Sentinel by Kayzen 웹사이트 메인 페이지 — 공격형 사이버 보안 & SaaS, Kayzen Web 제작
건의 오탐을 표방모든 발견 사항에 재현 가능한 PoC 첨부
0
첫 유효 렌더링CDN에서 제공되는 정적 HTML
< 1초
로딩 시 호출되는 외부 도메인
0
출발점

해결해야 했던 과제.

배경

Sentinel은 Kayzen Web의 자율 침투 테스트 플랫폼입니다. AI 에이전트가 코드를 분석하는 데 그치지 않고, 애플리케이션을 실행해 실제로 공격을 시도하며, 확인된 취약점마다 재현 가능한 개념 증명(PoC)을 첨부합니다. 이 사이트는 제품의 상업적 쇼윈도이자 체험판의 진입점입니다.

제약

대상 고객인 CISO, 리드 개발자, 플랫폼 팀은 마케팅이 가장 통하지 않는 사람들입니다. “완벽한 보호”를 약속하는 보안 사이트는 첫 줄에서 신뢰를 잃습니다. 결코 과장하지 않으면서 관심을 끌고, 세 업체를 비교하러 온 비기술직 경영자도 읽을 수 있는 사이트가 필요했습니다.

해법

통상적인 위계를 뒤집었습니다. 약속보다 증거가 먼저입니다. 홈은 먼저 실제 보고서의 한 부분, 즉 취약점, 공격 요청, 제안된 수정안을 보여 주고, 그다음에야 설득 논리를 펼칩니다. 어휘는 업계의 것(PoC, 오탐, CVSS)을 유지했습니다. 독자가 이미 알고 있고, 쉽게 풀어 쓰면 무지로 받아들여지기 때문입니다.

디자인 & 아트 디렉션

모든 선택에는 이유가 있습니다.

  1. 기본은 다크, 하지만 장식은 아니게

    다크 테마는 이 업계의 관습입니다. 보안 도구는 터미널 안에 삽니다. 여기서는 기능적인 이유가 있습니다. 코드 블록과 보고서 발췌가 페이지에서 가장 많이 읽히는 요소이고, 어두운 배경은 오래 읽을 때 눈부심을 줄입니다. 텍스트와 배경의 대비는 최소 기준인 AA가 아니라 AAA 수준인 7:1 이상을 유지합니다.

  2. 구성 요소가 된 증거

    재사용 가능한 “보고서 발췌” 구성 요소: 취약점 헤더, CVSS 심각도, 요청, 응답, 수정안. 페이지에 서로 다른 사례로 네 번 등장합니다. 페이지에서 유일하게 움직이는 요소로, 구매 결정이 이루어지는 곳으로 시선을 모읍니다.

  3. 추상적인 일러스트 없음

    자물쇠도, 방패도, 와이어프레임 지구본도 없습니다. 시각 자료는 도구의 실제 화면입니다. 이 시장에서 흔한 아이콘은 제품이 아직 존재하지 않는다는 가장 확실한 신호입니다.

  4. 통제된 밀도

    한 줄은 68자로 제한하고, clamp()로 유연한 타이포그래피 스케일을 적용했습니다. 콘텐츠는 본래 밀도가 높습니다. 이를 보완해야 하는 것은 독자가 아니라 레이아웃입니다.

프로젝트 색상 팔레트

  • 잉크

    #0B1120

    페이지 배경

  • 슬레이트

    #1E293B

    카드와 코드 블록

  • 시그널

    #38BDF8

    링크와 강조

  • 경보

    #F43F5E

    치명적 심각도 전용

타이포그래피 체계

제목용 서체

Inter (굵기 600–800)

본문용 서체

Inter (400–500)

하나의 서체 패밀리, 두 가지 역할. 보고서 발췌는 시스템 고정폭 폰트 스택을 쓰므로 추가 폰트를 내려받지 않습니다.

엔지니어링

보이지 않는 곳의 기술.

  • Next.js
  • React
  • TypeScript
  • Tailwind
  • Vercel
  1. 정적 렌더링의 Next.js

    모든 페이지는 빌드 시 생성됩니다. 제품 쇼케이스에는 제공할 동적 데이터가 없습니다. 상시 서버 렌더링은 아무 이득 없이 지연 시간과 공격 표면만 늘립니다. 완성된 HTML이 CDN에서 제공됩니다.

  2. 로딩 시 외부 의존성 제로

    Google 폰트도, 외부 분석 스크립트도, 채팅 iframe도 없습니다. 보안 사이트에서 첫 렌더링 때 호출되는 외부 도메인 하나하나는 스스로에게 불리한 증거이자, 공급망으로 들어오는 실제 진입점입니다.

  3. 완비된 보안 헤더

    엄격한 Content-Security-Policy, preload를 포함한 HSTS, Referrer-Policy, 기본적으로 닫힌 Permissions-Policy. 보안 소프트웨어 회사에 기대되는 최소한이며, 기술에 밝은 잠재 고객은 가장 먼저 네트워크 탭을 열어 확인합니다.

  4. 당당히 밝힌 오픈소스 엔진

    실행 엔진은 오픈소스 프로젝트 Strix를 기반으로 합니다. 사이트는 이를 숨기지 않고 밝히며 링크까지 겁니다. 이 고객층에게는 블랙박스보다 기술 구성 요소의 추적 가능성이 더 가치 있습니다.

검색엔진 최적화

사이트가 검색되는 방식.

  1. 일반 검색어보다 비교 검색어

    “자동화 침투 테스트”, “DAST vs 수동 모의해킹”, “취약점 스캐너 오탐”. 검색량은 적지만 의도가 매우 강한 퍼널 중간 단계의 검색어입니다. “사이버 보안”으로 싸워 봐야 소용없었을 것입니다.

  2. SoftwareApplication 마크업

    카테고리, 운영체제, 오퍼를 담은 SoftwareApplication JSON-LD, 그리고 반복되는 반론(“에이전트가 운영 환경을 망가뜨릴 수 있나요?”)에 대한 FAQPage. AI 어시스턴트가 인용하는 것이 바로 이런 답변입니다.

  3. 공들인 소셜 메타데이터

    이 제품은 동료들 사이에서 Slack과 LinkedIn으로 공유됩니다. 그래서 Open Graph와 Twitter 카드를 로고가 아닌 전용 이미지로 만들어, 하나의 유입 채널로 다뤘습니다.

웹 접근성

누구나 사용할 수 있도록.

2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.

  1. 본문에 AAA 대비

    다크 테마의 전형적인 함정은 짙은 회색 위의 옅은 회색입니다. 모든 색 조합을 측정했으며, 본문은 12:1, 보조 레이블은 7:1입니다.

  2. 키보드로 탐색 가능한 코드 블록

    보고서 발췌는 모바일에서 가로로 스크롤됩니다. 포커스를 받을 수 있고 스크롤 가능한 영역으로 안내되도록 했습니다. 그렇지 않으면 마우스 없이는 내용에 닿을 수 없습니다.

사이트 구조

납품한 결과물.

  • 홈 — 증거, 약속, 체험판
  • 작동 방식 — 에이전트 기반 감사의 사이클
  • 보고서 — 결과물의 해부
  • 요금
  • 문서 & 오픈소스 엔진
방법론

프로젝트 진행 과정.

  1. 범위 설정

    제품팀 인터뷰, 다뤄야 할 반론과 그 순서 정의.

  2. 콘텐츠

    시안 작업 전에 엔지니어의 검증을 거친 기술 문서 작성.

  3. 디자인

    다크 시스템, 증거 구성 요소, 타이포그래피 스케일.

  4. 개발

    정적 Next.js, 보안 헤더, 성능 예산.

  5. 오픈

    보안 검수, 헤더 점검, Search Console.

질문

자주 받는 질문.

대상 고객이 직접 확인하기 때문입니다. 기술에 밝은 잠재 고객은 메시지를 읽기 전에 개발자 도구를 엽니다. 거기서 외부 추적기 여섯 개와 보안 정책의 부재를 발견하면, 어떤 설득 논리도 회복할 수 없습니다.

네, 구매자가 전문가라면 어디든 가능합니다. 제조, 의료, 엔지니어링, 전문 사무소. 규칙은 같습니다. 설명하기 전에 실제 결과물을 보여 주는 것입니다.

같은 수준의 기준을, 귀하의 사이트에도.

현재 사이트 무료 진단, 24시간 이내 견적, 그리고 방금 읽으신 것과 같은 서면 분석을 제공합니다. 3회 무이자 분할 결제가 가능하며, 이용 가능한 지역 지원금은 계약 전에 확인합니다.

공유