콘텐츠로 이동

사이버펑크 비주얼 테마

SFH의 게임 UI와 개발 위키는 같은 전술 단말기 언어를 사용합니다. 검은 바탕 위에 #02e5e1을 핵심 신호색으로 사용하고, 가는 격자·스캔라인·상태 점멸·각진 패널로 정보의 기능을 구분합니다. 참조 이미지는 방향만 참고했으며 워터마크가 있는 이미지나 UI 조각을 저장소에 복제하지 않았습니다.

디자인 토큰

역할 사용 규칙
핵심 신호색 #02e5e1 선택, 활성 테두리, 링크, 진행 막대, 상태 점
배경 #02090d 화면 바탕. 순수 검정 대신 청록 기운을 남겨 패널 경계를 읽게 함
기본 패널 #06151b 문서 카드와 게임 HUD의 1단 표면
상승 패널 #0b2027 hover, 선택 후보, 보조 정보의 2단 표면
강조 패널 #102a31 현재 위치와 집중 영역의 3단 표면
경계선 #2f7074 비활성 테두리와 구분선. 기본 패널 대비 3:1 이상
제목 문자 #eafcfc 제목, 주요 값, 표 머리글
본문 문자 #c2dcde 문단, 목록, 표 데이터
보조 문자 #94b4b6 설명, 메타 정보, 비활성 상태
최소 문자 #748f92 제한적인 3차 정보. 배경 대비 4.5:1 이상

체력 위험·실패·희귀도처럼 의미가 이미 정해진 색은 보조 의미색을 유지합니다. 핵심 신호색은 의미색을 덮기 위한 색이 아니라 화면의 공통 조작·활성 상태를 표현합니다.

가독성 배합 원칙

  • #02e5e1은 클릭 가능·선택됨·현재 위치에만 사용하고 긴 본문 전체를 청록으로 칠하지 않습니다.
  • 제목→본문→보조→최소 정보는 색상보다 명도 차이로 먼저 구분합니다.
  • 배경→기본 패널→상승 패널→강조 패널은 한 단계씩 밝아져 중첩된 카드의 깊이를 인식할 수 있어야 합니다.
  • 링크에는 청록과 밑줄을 함께, 키보드 포커스에는 밝은 청록 2px 외곽선을 함께 사용해 색만으로 상태를 전달하지 않습니다.
  • 본문·보조 텍스트는 배경 대비 7:1 이상, 제한적인 최소 문자는 4.5:1 이상, 패널 경계는 인접 표면 대비 3:1 이상을 배포 검사에서 보장합니다.
  • 스캔라인·도트 노이즈는 본문 위에서 31% 이하, 모바일에서는 18% 이하로 제한하고 제목 글로우는 한 픽셀의 약한 잔상만 남깁니다.

반응형·저점유 인터페이스 원칙

  • 전투 중 지속 표시하는 것은 생존, 현재 행동 가능 여부, 임무, 전체 지도뿐입니다. 장비·무기 상세는 값이 바뀐 뒤 1.8초만 표시합니다.
  • 화면 폭만 줄이는 축소가 아니라 정보 우선순위를 바꿉니다. 1100px 미만에서는 장비·무기 상세를 제거하고, 900px 미만에서는 미니맵 장식과 크기를 한 단계 더 줄입니다.
  • 상호작용 프롬프트가 나타나면 임무와 행동 도크의 불투명도를 낮춰 지금 눌러야 할 입력이 먼저 보이게 합니다.
  • 일반 HUD 패널은 반투명 표면을 사용하고, 체력 35% 이하처럼 즉시 대응이 필요한 상태만 완전한 불투명도로 강조합니다.
  • 전체 지형·탈출·플레이어 위치처럼 판단에 필요한 데이터는 축약하지 않습니다. 미니맵은 제목·범례·그림자만 걷어내고 전체 지도 텍스처는 유지합니다.
  • 1280×720에서 지속 HUD와 미니맵의 단순 면적 합은 화면의 20% 이하여야 합니다. 일시적 상세 카드와 F 프롬프트는 이 예산에 포함하지 않되 자동 종료되어야 합니다.

타이포그래피와 라이선스

한글·영문 모두 Galmuri 11 계열을 사용합니다. 게임은 여러 크기에서 레이아웃을 안정적으로 계산하는 Galmuri11-Bold.ttf, 위키는 전송 용량이 작은 Galmuri11.woff2를 사용합니다. Galmuri는 SIL Open Font License 1.1이며 상업 빌드에 포함할 수 있습니다. 원본 커밋·해시·라이선스 원문은 외부 에셋 라이선스 원장에 기록합니다.

게임 표현 모듈

presentation_theme 폴더는 게임 규칙과 분리된 표현 계층입니다.

  • cyberpunk_theme.tres: Button, Panel, 입력창, 게이지, 탭의 공통 색·테두리·폰트
  • CyberpunkScreenFX: 화면 크기가 바뀔 때만 정적 스캔라인·희박한 결정론적 노이즈·모서리 표식을 다시 그림
  • CyberpunkOverlay: 작은 상태 점과 한 줄 스캔 바만 이동하며 마우스 입력을 가로채지 않음
  • FeatureManifest.cyberpunk_theme_enabled: 표현 계층 전체 활성화
  • cyberpunk_motion_enabled, cyberpunk_noise_enabled: 움직임과 정적 노이즈 개별 활성화

표현 모듈은 체력, 전투, 경제, 장비 데이터를 읽거나 수정하지 않습니다. 비활성화해도 모든 플레이 규칙과 UI 입력은 유지됩니다.

위키 표현

위키는 CSS 한 파일에서 같은 토큰을 사용합니다. 32px 전술 격자, 6px 스캔라인, 희박한 도트 노이즈, 각진 카드, 활성 신호 점을 적용합니다. 본문·목차·표·코드·노드맵은 같은 문자와 표면 토큰을 공유합니다. 상태 점멸과 화면 스캔은 CSS 애니메이션이며 운영체제가 prefers-reduced-motion을 요청하면 자동으로 멈춥니다.

성능·가독성 경계

  • 정적 노이즈는 난수나 매 프레임 텍스처를 만들지 않고 화면 크기 변경 시에만 다시 계산합니다.
  • 매 프레임 갱신은 2px 스캔 바의 위치와 5px 상태 점 투명도뿐입니다.
  • 게임 오버레이의 모든 Control은 MOUSE_FILTER_IGNORE입니다.
  • 픽셀 폰트 전환 뒤 작전 브리핑·임무 추적기·미니맵 최소 폭을 다시 측정했습니다.
  • 1280×720 실제 입력 E2E에서 내부 증강 선택을 포함한 23개 UI 상태, 화면 경계·HUD 비겹침·지속 점유율 20% 상한을 통과합니다.
  • 800px 폭 계약에서 상세 카드가 제거되고 전투 HUD는 compact_edge, 미니맵은 edge_compact로 전환됩니다.
  • 대형 작전 헤드리스 측정은 평균 7.086ms, 피크 18.860ms, Node 1,499개로 기존 예산 안입니다.
  • 위키 빌드는 어두운 화면과 밝은 화면 토큰의 본문·보조문·상태색·경계선 22개 대비 조합을 자동 검사합니다.

검색 별칭

사이버펑크, cyberpunk, UI 테마, 테마 색, 02e5e1, 청록 HUD, 도트 폰트, 픽셀 폰트, Galmuri, 스캔라인, 노이즈, 점멸 상태, 반응형 UI, 저점유 HUD, 시야 방해 최소화