kennedys0/taste-style-retro-terminal

사용자가 명시적으로 선택하거나 확인된 프로젝트 구성에서 지정한 경우에만 이 스킬을 사용하십시오. 설명되지 않은 새로운 UI 요청이 있을 경우 여기서 사용자의 취향을 결정하는 대신 스타일 선택기를 사용하십시오. 기존 브랜드, 접근성 및 사용자 재정의는 아래의 모든 예시보다 우선합니다. 다음 스타일 가이드는 스타일 선택 전에 UI 코딩을 시작할 수 있는 권한이 아닙니다.

스타일 팩: 레트로 터미널

ID: retro-terminal
시그니처: 정통 CRT 개발자 콘솔 시각 언어, 인광체 광선, 모노스페이스 탭 구조, 현대적인 키보드 중심 유틸리티.

이것은 스타일 팩이지, 강제 기본값이 아닙니다. 명시적 선택 또는 확인된 프로젝트 스타일 이후에만 로드하십시오. 프로젝트 지침은 개별 선택을 재정의할 수 있습니다. 접근성, 유용성 및 브랜드 제약 조건을 유지하십시오. 폰트는 제안 사항이지 필수 종속성이 아닙니다. 스타일이 없는 검은색 배경에 초록색 텍스트만 있는 페이지는 레트로 터미널에 해당하지 않습니다.

적합성 / 트레이드오프

• 적합한 경우: 개발자 포트폴리오, CLI 클라우드 대시보드, 사이버 보안 및 데브옵스 도구, 시스템 모니터링 콘솔, 창의적인 코딩 경험.
• 주의해야 할 경우: 엄격한 모노스페이스 데이터 레이아웃이나 터미널 메타포가 익숙하지 않은 비기술적 일반 소비자 대상.
• 참고 방향:
  • 클래식 앰버 CRT: 흑요석 검정 배경(#0C0D0E)에 따뜻한 인광체 앰버(#FFB000), 미세한 래스터 스캔라인, 고대비 크림 레이블.
  • 포스포르 매트릭스 그린: 짙은 흑연 캔버스(#0A0F0D)에 전기 인광체 그린(#33FF33), 대괄호 창 제목, 선명한 로그 스트림.
  • 사이버덱 시안: 고기술 터미널로 발광 시안(#00F0FF), 선명한 상자 그리기 테두리(┌─┐), 키보드 단축키 태그([ESC]).

레트로 터미널 충실도 게이트 - 필수

레트로 터미널 페이지가 완료되었다고 판단하기 전에, 열리는 뷰포트가 실제 작동하는 터미널 콘솔 또는 명령 데크로 시각적으로 읽혀야 합니다. 사용자가 이 스타일을 선택했다면, CSS 클래스에 terminal이 포함되어 있더라도 모노스페이스 폰트가 적용된 평범한 다크 웹사이트는 실패입니다.

성공적인 레트로 터미널 구현은 다음 모든 항목을 입증해야 합니다:

1. 인광체 광선 및 고대비 휘도: 텍스트와 활성 표시기는 미묘한 인광체 방사 효과(text-shadow: 0 0 6px currentColor)를 보여주며, 주요 출력은 흑요석 바탕에서 WCAG AA 대비를 통과해야 합니다.
2. 미묘한 CRT 래스터 스캔라인 오버레이: 표면은 문자 가독성을 손상시키지 않으면서 실제 디스플레이 깊이를 더하는 제어된 정적 수평 스캔라인 패턴(repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 2px))을 특징으로 합니다.
3. 구조화된 ASCII / 대괄호 레이아웃 프레임: 창 헤더, 패널 프레임 및 상태 표시줄은 선명한 1px 규칙, ASCII 상자 문자(┌─┐) 또는 대괄호 배지([SYS_OK], [MODE: CLI])를 사용합니다.
4. 정통 명령 프롬프트 및 커서: 인터페이스는 활성 셸 프롬프트 줄(visitor@terminal:~$)과 함께 단색 블록 커서(█) 및 별개의 명령 기록 스타일을 제공합니다.
5. 모노스페이스 탭 정렬: 콘텐츠는 타임스탬프, 상태 코드, 프로세스 ID 및 데이터 판독값에 대해 모노스페이스 문자 열을 따라 엄격하게 정렬됩니다.

첫 뷰포트 테스트: 데스크톱 스크린샷에서 페이지 제목을 읽지 않고 터미널 프롬프트, 인광체 광선, 스캔라인 래스터 및 대괄호 콘솔 프레임을 식별하십시오. 일반적인 다크 블로그처럼 보인다면 스캔라인 오버레이와 터미널 프롬프트 구조를 추가하십시오.

명시적 레트로 터미널 스캔라인 예외 - 인광체 광선 허용

레트로 터미널 특정 재정의: 장식용 오버레이나 화면 텍스처에 대한 범용 안티-슬롭 주의 사항은 여기서 미묘한 스캔라인, 인광체 광선 또는 셸 프롬프트 줄에 대한 금지로 해석되어서는 안 됩니다. 이것들은 CRT 콘솔 미학에 필수적인 재질 활성 속성입니다.

• 허용되는 재질 처리: 모노스페이스 상자 그리기 테두리, 인광체 텍스트 광선(0 0 6px), 정적 스캔라인 래스터 오버레이, 대괄호 상태 알약, 깜빡이거나 단색 블록 커서.
• 안티-슬롭 경계: 모든 명령줄이나 동작은 사용 가능해야 합니다. 읽을 수 없는 떨어지는 매트릭스 문자, 가짜 터미널 부트 오류, 또는 기능적 UI로 위장한 정적 장식용 코드 스니펫으로 화면을 채우지 마십시오.
• 안티-슬롭 해석: 터미널 요소를 명령 명확성, 가독성 및 개발자 생산성으로 평가하고 모노스페이스 프레임을 금지하지 마십시오. 일반적인 평면 휴리스틱을 충족시키기 위해 스캔라인과 프롬프트 줄을 제거하는 것은 디자인 퇴보입니다.

타이포그래피 및 타자기

높은 가독성의 모노스페이스: JetBrains Mono, IBM Plex Mono, Fira Code 또는 시스템 모노스페이스(ui-monospace, monospace). 본문: 14–15 px; 제목: 20–32 px, 굵게(700) 및 대문자 대괄호 스타일(### [SYSTEM_OVERVIEW]). 엄격한 문자 그리드 정렬을 유지하십시오.

색상 방향

• 다크 모드 (흑요석 CRT 인광체):
  • 캔버스 베이스: 흑요석 검정(#0C0D0E 또는 #080A08).
  • 표면 패널: 짙은 슬레이트-숯(#14171A 또는 #111613).
  • 인광체 강조 (하나 선택):
    • 클래식 앰버: #FFB000 (광선: rgba(255, 176, 0, 0.45))
    • 포스포르 그린: #33FF33 (광선: rgba(51, 255, 51, 0.45))
    • 사이버 시안: #00F0FF (광선: rgba(0, 240, 255, 0.45))
  • 테두리: 1px solid rgba(255, 176, 0, 0.25) 또는 #2A2F35.
  • 스캔라인: 반투명 다크 래스터 라인(repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px)).
• 라이트 모드 (빈티지 파치먼트 텔레타이프):
  • 캔버스 베이스: 따뜻한 종이 아이보리(#F4F1EA).
  • 표면 패널: 따뜻한 오트밀(#E8E4DA).
  • 인광체 반전 (하나 선택):
    • 짙은 번트 앰버: #5C3A00
    • 딥 터미널 그린: #0F4D19
    • 카본 잉크: #111613
  • 테두리: 1px solid #D5D0C3.
  • 스캔라인: 약화되거나 꺼짐 (none 또는 미묘한 종이 질감).
• 의미 상태: 오류 빨간색 (#FF5555 다크 / #B91C1C 라이트), 경고 노란색 (#FFCC00 다크 / #B45309 라이트), 성공 민트 (#50FA7B 다크 / #047857 라이트).
• 테마 결합 및 충돌 방지 규칙: 라이트 모드에서 밝은 인광체 강조색은 반드시 고대비 카본/다크 앰버 잉크(#111613 또는 #5C3A00)로 반전되어야 합니다. 밝은 앰버 #FFB000 또는 네온 그린 #33FF33을 밝은 종이 캔버스에 배치하는 것은 즉각적인 대비 충돌이며 엄격히 금지됩니다.

레이아웃 및 기하학

모서리는 날카롭거나 최소화(0px–4px); 1px 단색 터미널 패널 테두리; 빡빡한 세로 리듬(4px/8px 모노스페이스 라인 그리드). 패널은 모듈식 터미널 멀티플렉서(tmux/screen 스타일)를 모델로 합니다.

표면, 깊이, 질감

• 터미널 화면: 정적 스캔라인 래스터 오버레이가 있는 깊은 검정 배경.
• 콘솔 패널: 1px 단색 테두리(1px solid rgba(255, 176, 0, 0.3) 또는 #2A2F35)와 미묘한 내부 그림자.
• 활성 커서: 1초 펄스 또는 단색 활성 상태의 블록 커서.

구성 요소 구조 및 상호 작용

• 명령줄 프롬프트: user@system:~$ command --flag 기능적 입력 및 명확한 반환 결과 포함.
• 터미널 버튼 / 동작: 윤곽선 대괄호 버튼 ([ EXECUTE ] 또는 [ CANCEL ]) 호버 시 색상 반전 (background: currentColor; color: #000;).
• 데이터 로그 스트림: 타임스탬프, 로그 레벨 태그 및 메시지가 포함된 탭 형식 행.
• 키보드 단축키: 대괄호 키 표시기 ([⌘+K], [ENTER]) 명확한 포인터 클릭 대체 기능 포함.

모션

기본적으로 즉각적인 상태 변경(0–80 ms). 히어로 인트로에만 선택적 건너뛰기 가능한 문자 타이핑 효과. prefers-reduced-motion을 즉시 존중하십시오.

선택적 Anime.js v4 레시피

• 모션 결정: 모노스페이스 문자 타이핑 표시 또는 터미널 스캔 바 스윕; 프레임 속도 안정 유지.
• 시작 지속 시간: 토큰 블록당 100ms (0 = 즉시); 작업 및 사용자 선호도에 따라 조정.
• 피해야 할 것: 화면 떨림, 인공 왜곡파, 영원한 깜빡임 루프.
• 종속성: 기본적으로 CSS/네이티브. 요청된 상호 작용이 정당한 경우에만 Anime.js v4를 사용하십시오. 사용 가능할 때 Taste Engine references/motion-engine.md를 따르십시오; 독립 실행형 스킬은 위의 축소 모션 및 비장식 루프 원칙을 따릅니다.

UI 작성 및 마이크로카피

정확하고 기술적이며 명령 중심. 예시: deploy --prod, status: healthy, 4 processes running. 비꼬는 마케팅 전문 용어를 피하십시오.

시작 토큰 (제안 사항, 완전한 테마 아님)

토큰	다크 모드 기본값	라이트 모드 기본값
--taste-term-bg	#0c0d0e	#f4f1ea
--taste-term-surface	#14171a	#e8e4da
--taste-term-text	#ffb000	#5c3a00
--taste-term-amber	#ffb000	#5c3a00
--taste-term-glow	0 0 6px rgba(255, 176, 0, 0.45)	none
--taste-term-border	1px solid rgba(255, 176, 0, 0.25)	1px solid #d5d0c3
--taste-term-scanline	repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px)	none
--taste-term-radius	2px	2px
--taste-term-font-mono	JetBrains Mono, IBM Plex Mono, monospace	JetBrains Mono, IBM Plex Mono, monospace
--taste-term-motion-duration	80ms	80ms

토큰은 방향을 나타내며 모든 팔레트/플랫폼에 대해 복사-붙여넣기가 보장되지 않습니다. 프로젝트 수준에서 --taste-term-*를 정의하고, 색상 대비를 확인하며, 리터럴 값을 흩뿌리지 말고 테마 토큰을 통해 조정하십시오.

히어로 구성 (전체 첫 뷰포트)

공개 포트폴리오/랜딩/홈페이지에 히어로가 있는 경우: 하나의 화면에 표시되는 헤더+히어로 구성을 사용하십시오. min-height: 100svh에 100vh 대체를 기본 높이로 사용하고, 헤더가 일반 흐름에 있을 때만 실제 헤더를 빼십시오; 접근성과 짧은 모바일 화면을 위해 히어로가 확장되도록 하십시오. 개인 대시보드나 다른 작업 화면에는 이를 적용하지 마십시오; 사용자 직접 재정의가 우선합니다. 스타일별 방향: 첫 뷰포트를 환영 ASCII 배너, 시스템 상태 요약 및 작동하는 프롬프트 줄이 있는 정통 대화형 콘솔 세션으로 구성하십시오. 가짜 매트릭스 비 또는 읽을 수 없는 글리치 루프를 시뮬레이션하지 마십시오. 존재할 경우 라우터 references/hero-layout.md를 참조하십시오. 독립 실행형 사용은 동일한 반응형 및 안티-슬롭 원칙을 따릅니다.

스타일별 품질 게이트

• 할 것: 캔버스에 대한 높은 텍스트 대비 확인(WCAG AA); 모노스페이스 정렬 유지 확인; 모든 키보드 단축키에 클릭 대체 기능 제공; 스캔라인 가독성 테스트; 인광체 색상이 밝은 바탕에서 고대비 어두운 잉크로 반전되도록 다크/라이트 모드 전환 확인.
• 하지 말 것: 일반적인 다크 테마를 레트로 터미널로 취급하지 마십시오; 읽을 수 없는 글리치 애니메이션을 피하십시오; 사용자를 혼란스럽게 하는 가짜 비대화형 콘솔 프롬프트를 제공하지 마십시오; 파치먼트 위의 네온 그린 또는 밝은 앰버 텍스트와 같은 라이트 모드 테마 충돌을 피하십시오.
• 데스크톱 및 모바일 일관성 확인; 가시적인 키보드 포커스(:focus-visible); 로딩, 빈 상태, 비활성화, 오류 및 성공 상태; 축소 모션 동작(prefers-reduced-motion).
• 스타일별 가정을 관련 없는 프로젝트에 주입하지 마십시오. 스타일을 결합할 때는 기본 스타일과 차용한 기능을 명시적으로 명명하십시오.

범용 안티-슬롭 게이트 (자체 포함)

모든 요소는 그 자리를 차지할 자격이 있어야 합니다. 내용이 장식보다 우선합니다. 불확실성을 장식하지 마십시오. 잔액, 지표, 사용자 평가, 로고, 승인, 확인/라이브/온라인 상태, 가짜 활동 또는 성공 확인을 발명하지 마십시오; 정직한 빈 상태/로딩/오류 상태를 대신 사용하십시오. 데모 데이터는 요청된 경우에만 허용되며 명확하게 표시되어야 합니다.

장식용 카드-속-카드 레이어를 추가하지 마십시오: 중첩된 표면은 별개의 상호 작용 또는 정보 경계를 나타내야 합니다. 자동 생성된 3-기능 그리드, 4-통계 대시보드, 가짜 히어로 주장, 목적 없는 차트, 배지/칩/아이콘 스팸, 관련 없는 장식 예술 및 뷰포트를 채우기 위한 무작위 루프를 피하십시오. 타이포그래피, 간격, 정렬 및 구분선을 사용한 그룹화를 선호하십시오. 동등한 피어는 의도적인 시각적 균형이 필요합니다.

안티-슬롭 카피라이팅: 일반적인 "잠재력을 깨우세요", "미래를 경험하세요", "워크플로우를 강화하세요", "완벽한" 주장 또는 번역된 동등 표현을 사용하지 마십시오. 제목은 실제 내용을 전달해야 하고, CTA는 동작 이름을 지정해야 하며, 빈 상태/오류/성공 텍스트는 실제 상태와 다음 단계를 설명해야 합니다. 가짜 긴박감, 조작된 수치, 모호한 AI 과대광고, 불필요한 이모지 및 접근 불가능한 전체 대문자 벽을 피하십시오. 진실을 변경하지 않고 이 스타일과 사용자의 언어에 맞게 표현을 조정하십시오.

테마 및 모드 대비 무결성: 사용자가 다크 모드 또는 라이트 모드를 요청하거나 테마 전환기를 구축할 때, 배경색과 전경색은 모든 표면, 텍스트, 테두리, 입력 및 의미 배지에서 동기화된 쌍으로 반전되어야 합니다. 검은 배경에 검은 텍스트, 흰 배경에 흰 텍스트 또는 읽을 수 없는 저대비 상태 알약을 남기지 마십시오. 모든 상태는 WCAG AA 대비(본문/일반 텍스트의 경우 최소 4.5:1, 큰 제목 및 대화형 경계의 경우 3:1)를 충족해야 합니다.

반응형 및 모션: 모바일을 의도적으로 구성하고, 긴 레이블, 포커스 상태 및 접근 가능한 대비를 확인하십시오; 트렌디한 레이아웃에 맞추기 위해 텍스트를 자르지 마십시오. 기본적으로 정적; 의미 있는 상호 작용에 모션을 사용하고, 축소 모션 선호도를 존중하며, 실제 상태 없이 바운스/플로팅/펄스 장식을 피하십시오.

중요/높은 발견 사항 블록 완료: 조작된 상태/데이터, 작동하지 않는 동작, 접근 불가능/잘린 컨트롤, 오해의 소지가 있는 카피, 테마 대비 충돌 또는 심각한 모바일 실패는 수정되어야 합니다. 실제로 확인된 것을 보고하십시오; 실행되지 않은 테스트를 주장하지 마십시오.

미학 거부권 아님: 표현적인 색상, 그림자, 그래디언트, 카드 레이아웃 또는 장식 처리는 선택된 미학의 의도적인 부분이고 사용성 검사를 통과하는 경우 합법적입니다. 조용히 미니멀리즘을 강요하지 마십시오.

안티-슬롭: 스타일별

진정한 CLI 환경, 해커 배경화면이 아닙니다.

• 거부: 터미널로 위장한 일반적인 다크 카드, 장식용 비기능 콘솔 프롬프트, 눈부신 스캔라인 오버레이, 밝은 종이 배경의 네온 텍스트 및 읽을 수 없는 매트릭스 레인 루프.
• 대신: 실제 모노스페이스 계층 구조, 작동하는 명령줄 또는 탭")