GODRICH

HUD 디자인, 화면이 나를 겨누는 랜딩 부품 9개

· Godrich · 9종 · 7분 읽기

디자인 트렌드페이지 템플릿CSS만랜딩 페이지히어로 섹션CTA 버튼

HUD 디자인은 게임이나 SF 영화 속 조준경·레이더처럼, 화면 위에 좌표·상태 수치를 얹어 마치 나를 지켜보고 있는 듯한 인상을 주는 인터페이스 스타일입니다.

아래 원페이지를 먼저 스크롤해 보십시오. 상단 내비게이션부터 맨 아래 터미널 푸터까지, 네 귀퉁이 브래킷과 스캔라인이 화면 전체에서 같은 리듬으로 움직이는지가 이 스타일이 성립하는 기준입니다.

새 창에서 원페이지 열기

이 화면을 만든 부품 아홉 개는 아래 격자에서 각각 따로 열어 볼 수 있습니다. 배열 순서는 방문자가 실제로 페이지를 훑는 흐름(첫눈에 들어오기, 메뉴 살피기, 기능 훑기, 진행 로그 보기, 요금 고르기, 후기로 믿음 얻기, 행동 촉구, 가입, 하단 정리) 그대로입니다.

01 hero-hud 02 nav-hud 03 card-grid-hud 04 feature-list-hud 05 pricing-hud 06 testimonial-hud 07 cta-band-hud 08 footer-hud 09 buttons-inputs-hud

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

01락온 히어로

헤드라인 카드를 감싼 네 귀퉁이 브래킷이 0.15초씩 어긋난 시차로 조여들듯 맥동하고, 뒤로는 스캔라인이 카드 안쪽을 위에서 아래로 한 번씩 훑고 지나갑니다. SaaS 랜딩 첫 화면이나 제품 출시 커버처럼, 처음 보는 순간 "이 화면이 나를 인식하고 있다"는 인상을 줘야 하는 자리에 씁니다.

브래킷 락온스캔라인 스윕모노스페이스 리드아웃
<div class="relative w-full max-w-md overflow-hidden rounded-control bg-ink px-6 py-8 shadow-glow">
  <span class="corner corner-tl" aria-hidden="true"></span>
  <span class="corner corner-tr" aria-hidden="true"></span>
  <span class="corner corner-bl" aria-hidden="true"></span>
  <span class="corner corner-br" aria-hidden="true"></span>
  <div class="scan-sweep absolute inset-0 pointer-events-none" aria-hidden="true"></div>
  <p class="mb-3 flex items-center gap-2 text-[11px] font-bold uppercase tracking-widest text-accent">
    <span class="blink-dot inline-block h-1.5 w-1.5 rounded-full bg-accent"></span>SENTRY / ONLINE
  </p>
  <h1 class="mb-2 text-2xl font-bold leading-tight">놓치는 순간 없이 지켜보는 대시보드</h1>
  <p class="mb-4 text-sm text-cream/60">실시간으로 감지하고 기록합니다</p>
  <button class="rounded-control border border-accent bg-accent/10 px-5 py-2 text-sm font-bold text-accent">무료로 시작</button>
</div>

02상태 표시줄 내비

내비게이션 전체가 HUD 상태 표시줄처럼 브래킷에 감싸이고, 활성 탭 아래 밑줄이 스캔하듯 탭 사이를 미끄러져 이동합니다. 랜딩 페이지 상단바나 대시보드 내비처럼 브랜드·메뉴·상태가 한 줄에 같이 들어가는 자리에 씁니다.

스캔 밑줄 이동브래킷 프레임깜빡이는 상태 점
<nav class="relative flex items-center gap-4 rounded-control bg-ink/95 px-3 py-2 shadow-glow" aria-label="SENTRY">
  <span class="shrink-0 whitespace-nowrap pl-2 font-extrabold text-sm">SENTRY</span>
  <div class="relative flex min-w-0 flex-1 items-stretch">
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">홈</span>
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">기능</span>
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">요금</span>
    <span class="relative z-10 flex-1 whitespace-nowrap py-2 text-center text-xs font-semibold text-cream/70">문의</span>
    <span class="nav-indicator absolute bottom-0 left-0 h-[2px] w-1/4 bg-accent"></span>
  </div>
  <span class="shrink-0 whitespace-nowrap flex items-center gap-1 pr-2 text-[10px] font-bold tracking-widest text-accent">
    <span class="blink-dot inline-block h-1.5 w-1.5 rounded-full bg-accent"></span>LIVE
  </span>
</nav>

03타겟 인식 카드

격자의 카드마다 카메라 뷰파인더 같은 브래킷 프레임이 둘리고, 스캔라인이 카드 순서대로 하나씩 훑으며 우상단 좌표 리드아웃이 함께 표시됩니다. 기능 소개 격자나 포트폴리오 카드처럼 같은 형태가 여러 칸 반복되는 자리에 씁니다.

뷰파인더 브래킷순차 스캔좌표 리드아웃
<div class="relative overflow-hidden rounded-card bg-ink p-4 shadow-glow">
  <span class="corner corner-sm corner-tl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-tr" aria-hidden="true"></span>
  <span class="corner corner-sm corner-bl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-br" aria-hidden="true"></span>
  <div class="scan-sweep absolute inset-0 pointer-events-none" style="animation-delay:-.5s"></div>
  <span class="relative mb-2 block text-right text-[10px] font-bold text-data/85">#A1</span>
  <span class="relative mb-3 block h-5 w-5 rounded border border-accent bg-accent/20"></span>
  <p class="relative text-sm font-bold">추적</p>
</div>

04시스템 로그 리스트

목록 각 줄이 타임스탬프 접두어를 달고 있고, 밝은 스캔 바가 위에서 아래로 줄을 하나씩 훑으며 OK 표시를 남깁니다. 기능 목록이나 온보딩 체크리스트처럼 "확인이 순서대로 끝나고 있다"는 진행감을 줘야 하는 자리에 씁니다.

세로 스캔타임스탬프순차 체크
<ul class="flex flex-col gap-1">
  <li class="row-scan flex items-center gap-3 rounded px-3 py-2">
    <span class="flex-none text-[10px] font-bold text-accent/70">00:01</span>
    <span class="min-w-0 flex-1 text-sm font-semibold">사용자 인증 확인</span>
    <span class="flex-none text-[10px] font-bold text-accent">OK</span>
  </li>
  <li class="row-scan flex items-center gap-3 rounded px-3 py-2" style="animation-delay:-.5s">
    <span class="flex-none text-[10px] font-bold text-accent/70">00:02</span>
    <span class="min-w-0 flex-1 text-sm font-semibold">위치 데이터 동기화</span>
    <span class="flex-none text-[10px] font-bold text-accent">OK</span>
  </li>
</ul>
<p class="mt-3 text-[10px] text-accent/70">READY <span class="blink-dot inline-block h-2.5 w-1.5 bg-accent"></span></p>

05락 타겟 플랜

추천 플랜 카드만 브래킷이 숨 쉬듯 맥동하고 LOCKED 배지가 붙어, 다른 카드는 불투명도를 낮춰 초점이 나간 듯 물러납니다. 2단 요금제나 무료·유료 비교처럼 어느 쪽을 밀고 있는지 한눈에 보여줘야 할 때 씁니다.

브래킷 맥동LOCKED 배지디포커스
<div class="glow-breathe relative flex-1 basis-40 rounded-card bg-ink p-5 shadow-glow">
  <span class="corner corner-sm corner-tl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-tr" aria-hidden="true"></span>
  <span class="corner corner-sm corner-bl" aria-hidden="true"></span>
  <span class="corner corner-sm corner-br" aria-hidden="true"></span>
  <span class="mb-2 inline-block rounded bg-accent/15 px-2 py-1 text-[10px] font-bold tracking-widest text-accent">LOCKED</span>
  <p class="mb-1 text-base font-bold">프로</p>
  <p class="mb-3 text-xs text-cream/60">월 9,900원</p>
  <ul class="flex flex-col gap-1 text-xs text-cream/75">
    <li>실시간 추적</li>
    <li>채널 무제한</li>
  </ul>
</div>

06얼굴 인식 후기

아바타 위로 얼굴 인식 상자가 한 번 훑고 지나가고, 인용 카드는 VERIFIED 태그와 함께 브래킷 프레임을 두릅니다. 고객 후기나 파트너 인용처럼 "이 말은 확인된 사람이 했다"는 신뢰를 시각적으로 얹고 싶을 때 씁니다.

원샷 스캔VERIFIED 태그브래킷 프레임
<div class="flex flex-wrap items-center gap-4">
  <div class="relative h-16 w-16 flex-none overflow-hidden rounded-control bg-ink">
    <span class="face-scan absolute left-0 top-0 h-[3px] w-full bg-accent/85"></span>
  </div>
  <div class="relative min-w-[220px] flex-1 rounded-card bg-ink p-4 shadow-glow">
    <span class="corner corner-sm corner-tl" aria-hidden="true"></span>
    <span class="corner corner-sm corner-tr" aria-hidden="true"></span>
    <span class="mb-2 inline-block text-[10px] font-bold tracking-widest text-accent">VERIFIED</span>
    <blockquote class="mb-2 text-sm font-semibold leading-relaxed">놓치는 게 없어서 마음이 편해요</blockquote>
    <p class="text-xs text-cream/60">이도윤 · 보안팀 매니저</p>
  </div>
</div>

07경보 밴드

화면 폭 전체 밴드 위로 대각선 스캔라인이 천천히 흐르고 브래킷 모서리가 맥동하며, 버튼은 2초에 한 번 짧게 흔들리는 글리치를 냅니다. 가입 유도 띠나 무료 체험 시작처럼 페이지 중간에서 한 번 더 시선을 붙잡아야 하는 자리에 씁니다.

대각 스캔 드리프트브래킷 맥동글리치 호버
<div class="relative overflow-hidden rounded-card bg-ink px-8 py-12 shadow-glow">
  <span class="corner corner-tl" aria-hidden="true"></span>
  <span class="corner corner-tr" aria-hidden="true"></span>
  <span class="corner corner-bl" aria-hidden="true"></span>
  <span class="corner corner-br" aria-hidden="true"></span>
  <div class="scan-diag absolute inset-0 pointer-events-none"></div>
  <p class="mb-2 text-[11px] font-bold uppercase tracking-widest text-accent">ALERT</p>
  <h2 class="mb-5 max-w-2xl text-2xl font-bold leading-snug sm:text-3xl">지금 바로 감시망을 켜보세요</h2>
  <button class="glitch-btn rounded-control border border-accent bg-accent/10 px-6 py-3 text-sm font-bold text-accent">무료 체험 시작</button>
</div>

08터미널 푸터

먹색 배경 위 옅은 노이즈가 프레임마다 자리를 바꿔 깜빡이고, 링크 칸은 데이터 리드아웃처럼 정리되며 상단 모서리엔 브래킷이 남습니다. 멀티 컬럼 푸터나 사이트맵 정리처럼 링크가 많은 하단 영역에 톤을 맞출 때 씁니다.

노이즈 플리커브래킷 코너모노스페이스 링크
<footer class="relative overflow-hidden rounded-t-card bg-ink px-6 pt-8 pb-6 shadow-glow">
  <span class="corner corner-tl" aria-hidden="true"></span>
  <span class="corner corner-tr" aria-hidden="true"></span>
  <div class="noise-flicker absolute inset-0 pointer-events-none"></div>
  <div class="relative grid grid-cols-1 gap-6 sm:grid-cols-3">
    <div class="min-w-0">
      <p class="mb-2 text-[10px] font-bold uppercase tracking-widest text-accent">SYSTEM</p>
      <ul class="flex flex-col gap-1 text-xs text-cream/70">
        <li>대시보드</li>
        <li>알림 설정</li>
      </ul>
    </div>
  </div>
  <p class="relative mt-6 border-t border-accent/20 pt-3 text-[10px] text-cream/40">SENTRY © 2026</p>
</footer>

09락온 버튼·스캔 인풋

버튼을 누르면 네 귀퉁이 브래킷이 안쪽으로 스냅되며 잠기고, 입력창은 포커스를 받으면 밑줄이 스캔하듯 번지는 호박색 글로우로 바뀝니다. 폼 제출 버튼이나 이메일 입력창처럼 방문자의 마지막 클릭 하나에 확실한 반응을 줘야 하는 자리에 씁니다.

브래킷 스냅스캔 포커스 글로우깜빡이는 캐럿
<form class="mx-auto flex max-w-md flex-col gap-3 rounded-card bg-ink p-6 shadow-glow sm:flex-row">
  <label class="field-glow relative flex-1 rounded-control bg-ink">
    <input class="w-full rounded-control bg-transparent px-4 py-3 text-sm text-cream outline-none" type="email" placeholder="이메일 주소">
  </label>
  <button class="btn-snap relative rounded-control border border-accent bg-accent/10 px-5 py-3 text-sm font-bold text-accent">
    <span class="snap-corner snap-tl" aria-hidden="true"></span>
    <span class="snap-corner snap-tr" aria-hidden="true"></span>
    <span class="snap-corner snap-bl" aria-hidden="true"></span>
    <span class="snap-corner snap-br" aria-hidden="true"></span>
    가입하기
  </button>
</form>

tailwind.config 커스텀

이 편의 부품 아홉 개와 원페이지는 색·글꼴·반경·그림자 값을 오직 이 설정 하나에서만 가져다 씁니다. 여기 숫자를 고치면 브래킷 색부터 카드 모서리까지 화면 전체가 한 번에 같이 바뀝니다.

theme: {
  extend: {
    colors: {
      ink: "#17141a",
      cream: "#fff7e6",
      accent: "#ffd23f",
      data: "#2f6df6",
      line: "rgba(255,210,63,.12)",
    },
    fontFamily: {
      display: ["'Space Grotesk'", "system-ui", "sans-serif"],
      body: ["'Inter'", "system-ui", "sans-serif"],
    },
    borderRadius: { control: "12px", card: "16px", pill: "999px" },
    boxShadow: {
      glow: "0 0 0 1px rgba(255,210,63,.4), 0 0 24px rgba(255,210,63,.16)",
      "glow-strong": "0 0 0 1px rgba(255,210,63,.6), 0 0 32px rgba(255,210,63,.4)",
    },
    spacing: { gutter: "16px" },
  },
},

색은 두 개뿐입니다. accent(#ffd23f) 호박색이 브래킷·상태 점·버튼을 전부 맡고, data(#2f6df6) 파란색은 좌표·아이디 번호처럼 "이건 수치다"라고 구분해야 할 딱 한 자리에만 예외로 씁니다.

바이브코딩 프롬프트

이 값을 프로젝트에 먼저 심고 나면, Claude Code나 Cursor에 남길 지시는 아래 한 단락으로 충분합니다. 더 자세한 규칙까지 담은 전체 원문은 zip의 prompt.md에 있습니다.

배경은 ink(#17141a) 하나, 강조는 accent(#ffd23f) 호박색 하나. 카드·헤더·CTA 모서리마다
ㄱ자 브래킷을 두고 accent 색으로 옅게 맥동시킨다. 좌표·타임스탬프·상태 텍스트만
모노스페이스로 쓰고 본문 폰트는 그대로 둔다. 반경은 rounded-card·rounded-pill·
rounded-control 세 값만 쓴다.

page/index.html에 이 지시를 실제로 적용한 뒤 1280px 너비로 전체 페이지를 캡처해 아래에 남겼습니다.

결과

어디서 깨지는가 — 함정

가장 흔한 함정은 큰 제목에 max-width를 걸어두고 여러 화면 폭을 확인하지 않는 것입니다. 이 편 07번 경보 밴드도 처음엔 제목에 max-w-sm(384px)을 걸어 뒀는데, 1280px 데스크톱처럼 화면이 넓어도 "지금 바로 감시망을 켜보세" 다음 줄에 "요" 한 글자만 남는 어색한 줄바꿈이 났습니다 — 뷰포트 폭이 아니라 max-width 값 자체가 원인이라, 좁은 화면만 살펴서는 절대 못 잡습니다. max-w-2xl로 바꾸고서야 1280·768·375px 세 폭 모두 자연스럽게 정리됐습니다. 두 번째 함정은 06번 얼굴 인식 후기입니다. 스캔 상자가 내려가는 거리(61px)가 아바타 높이(64px)에서 상자 두께를 뺀 값으로 고정 px로 박혀 있어, 아바타 크기를 바꾸면 이 값도 손으로 같이 계산해서 고쳐야 합니다.

이 아홉 개 파일과 react 판·프롬프트 원문을 전부 담은 압축 파일의 비밀번호는 t2nt5x9v 이고, 아래 버튼을 누르면 내려받을 수 있습니다.

세 번째 함정은 03번 카드 격자처럼 스캔 순서를 nth-child 지연값으로 매기는 항목입니다. 카드 수를 4장에서 늘리거나 줄이면 animation-delay 배열도 손으로 다시 맞춰야 하고, 그렇지 않으면 스캔이 카드 중간에서 겹치거나 빈 순번이 생깁니다.

접근성

부품 아홉 개는 MDN이 정의한 prefers-reduced-motion 조건을 하나도 빠짐없이 넣어, 동작 줄이기를 켠 방문자 화면에는 스캔·글리치·맥동 대신 "이미 잠긴" 정지 상태(브래킷 100% 크기, 점·캐럿은 항상 켜짐)만 남습니다. 브래킷·스캔라인·노이즈 레이어는 모두 aria-hidden="true"로 감춰 스크린리더가 읽지 않게 했고, LOCKED·VERIFIED·LIVE 같은 상태는 색이 아니라 글자 자체로 전달되므로 색맹 방문자도 그대로 알아볼 수 있습니다.

감시 카메라 톤 말고 다른 디자인 유행도 궁금하면 디자인 트렌드 모음을 열어 보시고, 부품마다 어떤 기준으로 통과시켰는지는 소개 페이지에 적어 뒀습니다.

FAQ

실제 게임이나 SF 영화 속 HUD를 그대로 베낀 건가요?

아니요. 이 편의 부품은 특정 게임·영화·서비스의 화면을 복제한 것이 아니라 브래킷 락온·스캔라인·모노스페이스 리드아웃 같은 일반적인 감시 카메라 시각 언어만 참고했습니다. 서비스명 SENTRY도 예시로 지어낸 가상의 이름입니다.

이 다크 톤을 밝은(라이트) 사이트에도 쓸 수 있나요?

부분적으로는 가능하지만 권하지 않습니다. HUD·터미널 감성은 어두운 배경 위에서 브래킷과 스캔라인이 도드라져야 성립하는데, 배경을 밝게 바꾸면 같은 대비를 내기 위해 accent 색을 더 진하게 써야 해서 다른 트렌드(경고·에러 톤)처럼 보이기 쉽습니다.

Tailwind 없이 순수 CSS로도 쓸 수 있나요?

가능합니다. zip에 같이 담긴 tokens.css가 tailwind.config.js의 색·반경 값을 --color-ink·--color-accent 같은 CSS 변수로 그대로 옮겨 둔 파일이라, 이 한 장만 불러오면 Tailwind가 없는 프로젝트에서도 var(--color-accent)로 같은 호박색을 낼 수 있습니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.