PlayStation에서 영감을 받은 디자인 시스템

Category: 미디어 & 소비자 게임 콘솔 리테일. 3면 채널 레이아웃, 조용한 권위감의 디스플레이 서체, 시안 호버 스케일.

1. 비주얼 테마 & 분위기

PlayStation.com은 마치 엔터테인먼트를 판매하는 프리미엄 소비자 가전 브랜드의 마케팅 부서처럼 스스로를 표현합니다. 페이지는 교차하는 서피스의 수직 채널로 구성됩니다: 거의 검정에 가까운 마스트헤드와 히어로 영역, 중간부의 종이 흰색 에디토리얼 패널 시퀀스, 그리고 전체 경험을 고정하는 진한 코발트블루 푸터. 이 서피스 모드 사이에서 사이트는 사진과 3D 제품 렌더링—PS5 콘솔, 게임 커버 아트, DualSense 컨트롤러—에 크게 의존하여 하드웨어가 감성적인 역할을 담당하는 동안 크롬 요소들은 절제된 상태를 유지합니다.

타이포그래피의 시그니처는 SST Light (굵기 300)를 대형 사이즈에 사용하는 것입니다. Sony의 커스텀 SST 패밀리는 22px부터 54px까지 굵기 300으로 사용되어, 디스플레이 헤드라인에 게임 스토어보다는 명품 시계 광고에 가까운 부드럽고 우아한 품격을 부여합니다. 이 “조용한 권위감”은 The Verge의 Manuka 스타일 강렬함이나 Wired의 신문 가판대 밀도와는 정반대입니다—PlayStation은 서체가 뒤로 물러나고 제품이 앞으로 나오기를 원합니다. 본문과 UI는 굵기 500–700에 의존하지만, 디스플레이 톤은 일관되게 얇고 차분합니다.

절제가 깨지는 유일한 지점은 인터랙션입니다. 모든 primary 버튼은 동일한 호버 동작을 갖습니다: 채우기가 일렉트릭 시안 #1eaedb으로 전환되고, 2px 흰색 테두리가 나타나며, 2px PlayStation 블루 외곽 링이 뒤에서 피어오르고, 버튼 전체가 1.2×로 확대됩니다. 색상 팝, 테두리, 링, 리프트 스케일의 이 조합은 주요 브랜드 중 Sony만의 시그니처 동작으로, 사이트가 단일 페이지에서 수백 번 반복하는 소형 “전원 켜기” 애니메이션입니다.

주요 특징:

• 3면 채널 레이아웃: 거의 검정의 히어로, 종이 흰색 콘텐츠, 코발트블루 푸터—교차하되 혼합하지 않음
• 디스플레이용 SST 굵기 300, 22–54px — 제품 사진을 주인공으로 만드는 “조용한 권위감” 헤드라인
• PlayStation Blue #0070cc를 브랜드 앵커로; 시안 #1eaedb는 호버/포커스 상태에만 독점 사용
• 모든 인터랙티브 요소는 호버 시 1.2× 확대 — PlayStation만의 시그니처 “전원 켜기” 리프트
• 버튼은 완전한 999px 반지름의 필 형태; 카드 아트는 12–24px 둥근 직사각형
• 커머스 오렌지 #d53b00은 PlayStation Store / 구매 상태 CTA에만 독점 사용
• 최대 2120px까지 넓은 브레이크포인트 지원 — 4K TV 브라우징 환경까지 스케일 대응

2. 컬러 팔레트 & 역할

Primary (브랜드 앵커)

• PlayStation Blue (#0070cc): 브랜드의 앵커 컬러. 주요 푸터, 인라인 링크, 어두운 서피스의 primary 버튼 채우기, 모든 “공식” 마커에 사용. 소비자 기억 속에서 브랜드와 가장 강하게 연결된 색상이므로 불변 요소로 취급할 것.
• Console Black (#000000): 마스트헤드, 히어로 배경, 제품 프레젠테이션 영역에 사용하는 순수 검정. PlayStation은 미술관이 조각품을 검정으로 프레이밍하듯 하드웨어를 검정으로 프레이밍합니다.

Secondary & 액센트

• PlayStation Cyan (#1eaedb): 인터랙션 컬러. 버튼과 링크의 호버, 포커스, 활성 상태에만 적용. 기본 배경이나 정적 텍스트 색상으로는 절대 사용하지 않음. 호버 시 완전한 시그니처 처리를 위해 2px #ffffff 테두리와 2px #0070cc 외곽 링과 함께 페어링할 것.
• Link Hover Blue (#1883fd): 인라인 텍스트 링크 호버에 사용하는 더 밝은 변형. 시안과는 구별됨—이것은 링크 색상이고, 시안은 버튼 색상입니다.
• Dark Link Blue (#0068bd): 밝은 서피스에서 정적 상태의 링크 색상 — 브랜드 블루의 약간 더 채도 높은 사촌.

서피스 & 배경

• Paper White (#ffffff): 마스트헤드와 푸터 사이 에디토리얼 패널의 주요 콘텐츠 캔버스.
• Ice Mist (#f5f7fa): 밝은 섹션 그라디언트의 대기적 끝점. 특정 패널 뒤에 미묘하게 사용되어 순수 흰색에서 살짝 부각시킴.
• Divider Tint (#f3f3f3): 콘텐츠 행 사이의 조용한 수평 구분선 색상.
• Masthead Black (#000000): 상단 네비게이션과 히어로 캔버스 — 제품 중심 영역에 사용.
• Shadow Black (#121314): 패널에 대기적 깊이가 필요할 때 사용하는 어두운 섹션 그라디언트의 시작 앵커.
• Filter Mist (rgba(245, 247, 250, 0.3)): 고정 필터 바 뒤에 사용하는 반투명 배경 — 사이트에서 유일한 “글래스모피즘” 순간.

중립 & 텍스트

• Display Ink (#000000): 흰색 서피스의 주요 디스플레이 헤드라인.
• Deep Charcoal (#1f1f1f): 본문 헤드라인과 정적 상태 링크 색상 — 큰 텍스트 블록에서 시각적 진동을 줄이기 위해 순수 검정보다 약간 부드러움.
• Body Gray (#6b6b6b): 보조 본문 텍스트와 메타데이터.
• Mute Gray (#cccccc): 3차 레이블, 비활성화 상태.
• Placeholder Ink (rgba(0, 0, 0, 0.6)): 폼 플레이스홀더 텍스트 — 별도의 회색 값이 아닌 60% 검정.
• Inverse White (#ffffff): 어두운 서피스와 파란색 서피스의 주요 텍스트.
• Dark-Link Blue (#53b1ff): 어두운/검정 서피스에서 정적 상태의 링크 색상 — 검정 배경에서 가독성을 위한 PlayStation Blue의 더 밝고 경쾌한 변형.

시맨틱 & 커머스

• Commerce Orange (#d53b00): PlayStation Store 구매 상태 CTA, 가격 콜아웃, “할인” 뱃지에 사용. 사이트에서 유일한 따뜻한 색상 — 드물게 사용하고 커머스 맥락 외에는 절대 사용하지 않음.
• Commerce Orange Active (#aa2f00): 커머스 버튼의 눌림/활성 상태.
• Warning Red (#c81b3a): 폼 오류와 파괴적 액션 경고.
• Shadow Wash 80 (rgba(0, 0, 0, 0.8)): 제품 사진 위 히어로 텍스트 뒤에 사용하는 극적인 스크림.
• Shadow Wash 16 (rgba(0, 0, 0, 0.16)): 카드의 저중량 엘리베이션 링.
• Shadow Wash 08 (rgba(0, 0, 0, 0.08)): 깃털처럼 가벼운 카드 엘리베이션 — 거의 보이지 않지만 흰색 배경에서 흰색 패널을 분리함.
• Shadow Wash 06 (rgba(0, 0, 0, 0.06)): 시스템에서 가장 가벼운 그림자.

그라디언트 시스템

PlayStation은 두 가지 섹션 그라디언트만 사용합니다:

• Light Section Gradient: #ffffff → #f5f7fa — 패널을 캔버스에서 조용하게 부각시키는 거의 눈에 띄지 않는 워시.
• Dark Section Gradient: #121314 → #000000 — 색조 변화 없이 히어로 패널에 미묘한 비네트를 부여하는 짧은 수직 워시.

두 그라디언트 모두 섹션 배경으로만 사용하며, 컴포넌트 내부에는 사용하지 않습니다. 그라디언트 버튼, 그라디언트 텍스트, 빛나는 헤일로는 없습니다. 브랜드는 파란색입니다—파란색에서 보라색으로, 파란색에서 시안으로가 아닙니다.

3. 타이포그래피 규칙

폰트 패밀리

• SST / Playstation SST (Sony, 독점 소유) — 폴백: Arial, Helvetica. Toshi Omagari와 Akira Kobayashi가 디자인한 Sony의 커스텀 글로벌 서체. 홈페이지 전반에서 굵기 300 / 500 / 600 / 700을 커버. 22–54px에서의 굵기 300이 PlayStation의 타이포그래피 시그니처입니다.
• SST (condensed / alternate) — 폴백: helvetica, arial. 너비가 중요한 일부 UI 모듈에서 사용하는 압축 변형.
• Arial — 시스템 산세리프로 렌더링되는 드문 버튼 변형을 위한 유틸리티 폴백.

계층 구조

원칙

• 대형 사이즈에서 굵기 300이 목소리입니다. PlayStation은 히어로 헤드라인에 라이트 웨이트 디스플레이를 사용하는 유일한 주요 콘솔 브랜드입니다. 디스플레이 서체를 500이나 700으로 “업그레이드”하려는 충동을 억제하세요 — 조용함이 곧 개성입니다.
• UI 레이어에서 굵기가 점프합니다. 18px 이하에서 시스템은 가독성을 위해 500–700으로 전환됩니다. 300 (디스플레이) → 400 (본문) → 500 (캡션) → 700 (버튼)의 굵기 그라디언트가 곧 계층 구조입니다.
• 자간은 거의 없는 수준입니다. 대부분의 값이 0.1–0.45px로 양수 또는 약간 음수입니다. 54px 히어로의 -0.1px은 디스플레이 서체를 “디자인된” 느낌으로 충분히 조이지만 타이포그래피적 선언이 되지 않습니다.
• 두 가지 SST 케이싱. “SST”와 “Playstation SST”는 메트릭 세트가 약간 다른 기능적으로 동일한 패밀리입니다 (Playstation SST는 소형 사이즈에서 더 타이트함). Sony의 내부 라이선싱 외의 목적에서는 상호 교환 가능하게 취급하세요.
• 대문자 없음. The Verge나 Wired와 달리 PlayStation은 대문자 레이블을 거의 사용하지 않습니다. 키커와 태그는 타이틀 케이스나 문장 케이스를 유지합니다 — 또 다른 “조용한 권위감”의 표현입니다.
• 세리프 없음. 전체 시스템은 산세리프입니다. 인쇄 감성의 대응물이 없습니다.

4. 컴포넌트 스타일

버튼

Primary — PlayStation Blue 필

• 배경: #0070cc (PlayStation Blue)
• 텍스트: #ffffff, SST 18px / 500 / 0.4px 자간
• 테두리: 정적 상태에서 없음
• 테두리 반지름: 999px — 완전한 필
• 패딩: ~12px 24px (사이즈 클래스에 따라 가변)
• 아웃라인: 정적 상태에서 rgb(255, 255, 255) none 0px
• 호버 (시그니처 동작):
  • 배경이 #1eaedb (PlayStation Cyan)으로 전환
  • 텍스트는 #ffffff 유지
  • 2px #ffffff 테두리 등장
  • 2px #0070cc 외곽 링 섀도우 등장 (0 0 0 2px #0070cc)
  • transform: scale(1.2) — 버튼이 실제로 20% 성장
• 활성: opacity: 0.6 — 누름을 알리는 빠른 어두워짐
• 포커스: 호버와 동일하지만 링이 rgb(0, 114, 206) 0px 0px 0px 2px 포커스 섀도우로 변환
• 전환: 배경, transform, 섀도우에 ~180ms ease 적용

Secondary — 어두운 배경의 흰색 아웃라인

• 배경: #ffffff
• 텍스트: #0172ce (PlayStation Blue 변형)
• 테두리: 2px outset #000000 — 현대 CSS에서 매우 드문 실제 outset 테두리
• 반지름: 가변 (종종 999px 또는 36px)
• 패딩: 16px 20px
• 호버: 동일한 시그니처 시안 채우기 + scale(1.2) + 링 처리
• 포커스: 동일한 링 처리

Commerce Orange

• 배경: #d53b00 (Commerce Orange)
• 텍스트: #ffffff, SST 18px / 700 / 0.45px 자간
• 테두리 반지름: 999px — 필
• PS Store / 구매 / Plus 구독 CTA에만 사용
• 활성: 배경이 #aa2f00으로 어두워짐
• 호버: 모든 다른 버튼과 같이 시안 반전 규칙 적용 (오렌지 전용 호버가 아님)

Transparent Ghost

• 배경: transparent
• 텍스트: #1f1f1f (Deep Charcoal)
• 테두리: 1px solid #dedede
• 패딩: 0 10px (타이트, 네비게이션 최적화)
• 호버: 시안 채우기, 흰색 텍스트, 2px 흰색 테두리, scale(1.2)
• 활성: 텍스트가 #0072ce로 이동, opacity 0.6

Icon Circle

• 배경: 사진 위에서 rgba(0, 0, 0, 0.2); 밝은 서피스에서 #ffffff
• 테두리 반지름: 100% — 완전한 원
• 캐러셀 이전/다음 화살표와 공유 버튼에 사용
• 호버: var(--color-role-backgrounds-primary-link-hover) (밝은 배경에서 대략 #e5e5e5)로 밝아짐

Mini CTA (카드 내부)

• SST 14px / 700 / 0.324px 자간
• 패딩 ~8px 16px
• 반지름: 999px
• 게임 카드 내부 “지금 구매” / “장바구니에 추가” 미니 CTA에 사용

카드 & 컨테이너

Hero Card (게임 피처)

• 배경: 사진/렌더링 — 보통 검정 앵커
• 테두리 반지름: 피처 카드에 24px 또는 19px
• 패딩: 내부 32–48px
• 섀도우: rgba(0, 0, 0, 0.8) 0px 5px 9px 0px — 카드가 히어로 사진과 겹칠 때만 사용하는 극적인 드롭 섀도우
• 호버: 미묘한 스케일 변환, primary CTA에 시안 아웃라인 등장

Game Cover Tile

• 배경: 게임 커버 아트, 패딩 없음
• 테두리 반지름: 12px 또는 13px (이미지) / 19px (카드 프레임)
• 섀도우: rgba(0, 0, 0, 0.08) 0px 5px 9px 0px — 깃털처럼 가벼운 엘리베이션
• 호버: 카드의 primary CTA가 시안으로 켜지고, 카드 자체는 1.02×로 확대될 수 있음
• 전환: transform에 200ms ease 적용

Content Panel (White)

• 배경: #ffffff 또는 밝은 섹션 그라디언트 #ffffff → #f5f7fa
• 테두리: 일반적으로 없음; 이웃 요소와는 간격과 미묘한 섀도우로 분리
• 반지름: 패널 계층에 따라 12px–24px
• 섀도우: rgba(0, 0, 0, 0.06) 0px 5px 9px 0px — 시스템에서 가장 가벼운

Dark Card on Dark

• 배경: 사진 위에서 rgba(0, 0, 0, 0.2)
• 테두리 반지름: 6px (컴팩트) 또는 24px (피처)
• 히어로 비디오 위의 “프레스 킷” 또는 “통계 블록” 인레이에 사용

입력 & 폼

• 기본: #ffffff 배경, 1px solid #cccccc 테두리, 3px 테두리 반지름 (시스템의 나머지보다 타이트 — 입력란은 PlayStation이 진정으로 컴팩트해지는 유일한 곳), SST 16px 텍스트 #1f1f1f, 플레이스홀더 rgba(0, 0, 0, 0.6).
• 포커스: box-shadow: 0 0 0 2px #0070cc를 통한 2px #0070cc 포커스 링. 테두리 색상 변화 없음 — 링이 역할을 담당.
• 오류: 테두리와 텍스트가 #c81b3a (Warning Red)로 전환, 아래 같은 빨간색으로 인라인 오류 텍스트 표시.
• 전환: 테두리와 섀도우에 ~180ms ease 적용.

네비게이션

• 상단 네비게이션: 흰색 PlayStation 로고가 왼쪽 정렬된 검정 (#000000) 전체 폭 스트립, SST 14–16px / 500으로 카테고리 링크 중앙 정렬, “로그인” CTA 오른쪽 정렬.
• 네비게이션 링크 호버: 색상이 #ffffff에서 #1883fd (Link Hover Blue)로 전환, 밑줄 없음.
• 활성 섹션: #0070cc의 미묘한 2px 밑줄로 표시.
• 모바일: 네비게이션이 햄버거 드로어로 접힘. 드로어 내부에서 링크가 16px 간격과 20px 수평 패딩으로 수직 스택.
• 고정 동작: 네비게이션은 스크롤 시 상단에 고정; 밝은 서피스 영역에 진입해도 반전되지 않음 — 전체적으로 검정 배경 유지.

이미지 처리

• 종횡비: 16:9 히어로 비디오/사진, 1:1 콘솔 렌더링, 3:4 게임 커버 아트, 4:3 라이프스타일 이미지.
• 모서리: 카드 맥락에 따라 12px, 13px, 또는 24px로 둥글게. 게임 커버는 6–12px, 히어로 이미지는 24px.
• 전체 폭: 마스트헤드 히어로와 푸터 프로모션 배너에서만. 나머지는 모두 패딩된 콘텐츠 칼럼 내부에 위치.
• 섀도우: 히어로에는 극적인 rgba(0, 0, 0, 0.8) 0 5px 9px 0 드롭, 그리드 타일에는 깃털 rgba(0, 0, 0, 0.06) 0 5px 9px 0.
• 호버: 이미지는 정적 유지, 카드 프레임과 primary CTA가 반응.
• 지연 로딩: 폴드 아래의 모든 것에 loading="lazy", 마스트헤드 히어로는 eager.

Game Store 필 (독특한 요소)

• 배경: #ffffff
• 텍스트: #000000, SST 14px / 500
• 패딩: 14px 18px
• 반지름: 9999px — 완전한 필
• 게임 커버 옆에 플랫폼을 레이블링하는 중립적인 필 태그 (“PS5”, “PS4”, “PSVR2”). 어두운 배경의 흰색 대비.

5. 레이아웃 원칙

간격 시스템

• 기본 단위: 8px.
• 스케일: 1, 2, 3, 4.5, 5, 8, 9, 10, 12, 14, 15, 16, 18, 20, 21px.
• 섹션 패딩: 주요 패널 사이 48–96px 수직 간격. 히어로에서 콘텐츠로의 전환에는 더 큰 값 사용.
• 카드 패딩: 내부 20–32px. 피처 히어로 카드는 48px까지 확장 가능.
• 인라인 간격: 헤드라인과 덱 사이 8–12px, 덱과 CTA 사이 12–16px.
• 마이크로 스케일: 1/2/3/4.5/5/9/10/12 값은 필 패딩, 캡션 간격, 테두리 오프셋에 사용 — 에디토리얼 리듬에는 아님.

그리드 & 컨테이너

• 최대 너비: ~1920px (dembrandt에서 2120px까지 브레이크포인트 감지). 컨테이너는 패널에 따라 보통 1280–1920px로 제한.
• 칼럼 패턴: 계층에 따라 3/4/6칼럼 게임 타일 행으로 해소되는 12칼럼 반응형 그리드. 히어로 영역은 종종 12칼럼 전체 span; 피처 타일은 6+3+3 또는 4+4+4 구성.
• 외부 패딩: 모바일 16px → 태블릿 48px → 데스크탑 64–96px.
• 거터: 칼럼 사이 16–24px, 타일 클러스터 내부에서는 더 타이트 (8–12px).

여백 철학

PlayStation은 여백을 럭셔리 브랜드가 매장 조명을 대하듯 — 프리미엄 신호로 — 취급합니다. 다른 주요 리테일 사이트보다 모듈 사이에 수직 여유 공간이 현저히 많으며, 흰색 에디토리얼 패널은 종종 히어로 스케일 패딩에 헤드라인 하나 + 이미지 하나 + CTA 하나만 담습니다. 효과는 각 제품이 섬네일 그리드에서 경쟁하지 않고 자신만의 공간을 갖는 “갤러리 페이스”입니다.

테두리 반지름 스케일

• 2px — 쿠키 배너 버튼과 소형 어드민 UI
• 3px — 폼 입력란, 탭 패널 (다른 모든 것보다 타이트 — 의도적인 “기능적 UI” 신호)
• 6px — 컴팩트 버튼과 인라인 이미지
• 12px — 표준 게임 커버 이미지와 콘텐츠 이미지
• 13px — 특정 피규어 래퍼 (네스팅을 위한 12px에서 1px 오프셋)
• 19px — 피처 카드
• 20px — 인라인 태그 span
• 24px — 히어로 카드, 주요 피처 프레임
• 36px — 전체 필 네비게이션과 secondary 버튼 변형
• 48px — 대형 피처 버튼
• 999px / 100% — 전체 필 primary 버튼과 원형 아이콘 버튼

11개의 개별 반지름 값 — 이 카탈로그의 어떤 사이트보다 풍부한 반지름 시스템. PlayStation이 계층에 따라 의도적으로 다른 반지름을 사용하기 때문에 이 범위가 존재합니다: 유틸리티에 3px, 미디어에 12px, 피처에 24px, CTA에 999px.

6. 깊이 & 엘리베이션

PlayStation의 깊이 철학은 레이어드이지만 절제됩니다. 섀도우 스케일은 일반 상태에서 0.06에서 0.16으로 실행되다가 히어로 드롭에서 0.8로 점프합니다 — 0.2, 0.3, 0.4의 중간 지점이 없습니다. 효과는 페이지 대부분이 거의 평평하게 앉아 있지만, 히어로 카드가 사진 위에 떠 있어야 할 때 진짜로 떠 있다는 것입니다. 엘리베이션은 속삭이거나 외치거나 — 결코 중얼거리지 않습니다.

장식적 깊이

• 섹션 그라디언트 (어두운 것과 밝은 것, 위에서 모두 설명) — 섹션 배경으로만 사용
• 포커스/호버 링 2px, 상태에 따라 항상 파란색 또는 시안
• 섹션 그라디언트 두 가지 외에 글로우, 블러, 대기 효과 없음
• 그라디언트 버튼이나 그라디언트 텍스트 없음 — 비주얼 시스템은 섹션 전환 외에는 모든 곳에서 단색 블록

7. 해야 할 것과 하지 말아야 할 것

해야 할 것

• 하세요: PlayStation Blue (#0070cc)를 primary CTA 채우기와 푸터 앵커로 사용. 브랜드의 앵커 컬러입니다.
• 하세요: 22px 이상의 모든 디스플레이 헤드라인에 SST 굵기 300 사용. 조용한 굵기의 헤드라인이 바로 목소리입니다.
• 하세요: 모든 primary 버튼에 완전한 호버 시그니처 적용: 시안 채우기 + 2px 흰색 테두리 + 2px 파란색 외곽 링 + scale(1.2).
• 하세요: primary 및 커머스 버튼에 전체 필 반지름 (999px) 사용.
• 하세요: PlayStation Cyan (#1eaedb)은 호버, 포커스, 활성 상태에만 독점 사용 — 정적 배경으로는 절대 사용하지 않기.
• 하세요: Commerce Orange (#d53b00)는 PlayStation Store / 구매 CTA 및 가격 콜아웃에만 사용.
• 하세요: 어두운 히어로 패널과 흰색 콘텐츠 패널을 교차하고 진한 파란색 푸터로 고정 — 3면 채널 레이아웃이 페이지 리듬입니다.
• 하세요: 카드가 제품 사진과 겹칠 때 극적인 rgba(0, 0, 0, 0.8) 히어로 드롭 섀도우 사용.
• 하세요: 상단 네비게이션을 모든 스크롤 위치에서 검정으로 유지 — 밝은 패널 위에서 흰색으로 반전하지 않기.

하지 말아야 할 것

• 하지 마세요: 디스플레이 헤드라인을 굵게 하지 말기. 22–54px에서 굵기 300이 PlayStation의 목소리입니다. 굵기 700 디스플레이 서체는 “또 다른 게임 리테일러”처럼 보입니다.
• 하지 마세요: 대문자 레이블이나 키커를 사용하지 말기. PlayStation은 대문자를 거의 사용하지 않습니다 — 조용한 권위감 브랜드이지, 경고 테이프 브랜드가 아닙니다.
• 하지 마세요: 두 선언된 섹션 그라디언트 외에 그라디언트 버튼, 텍스트, 배경을 사용하지 말기.
• 하지 마세요: Commerce Orange 외에 따뜻한 색상을 도입하지 말기. 빨간색 CTA, 노란색 하이라이트, 녹색 성공 필 없음.
• 하지 마세요: 버튼이나 미디어에 직각 모서리를 사용하지 말기. 시스템에 11개의 반지름이 있습니다 — 하나를 선택하되, 절대 0은 안 됩니다.
• 하지 마세요: primary 버튼에서 scale(1.2) 호버 동작을 생략하지 말기. 리프트 스케일은 브랜드 인터랙션 시그니처입니다.
• 하지 마세요: 세리프 서체를 사용하지 말기. 시스템은 100% SST 산세리프입니다.
• 하지 마세요: 시안 #1eaedb이 정적 상태에서 텍스트 또는 배경 색상으로 나타나지 않도록 하기. 오직 동작 중에만 존재합니다.
• 하지 마세요: 주의를 끌기 위해 경쟁하는 패널을 디자인하지 말기. PlayStation의 여백 리듬은 각 모듈에 자체 “갤러리 공간”을 줍니다.

8. 반응형 동작

브레이크포인트

dembrandt 스윕에서 320px와 2120px 사이에서 30개의 브레이크포인트가 감지되었습니다 — 비정상적으로 넓은 반응형 범위. PS5 소유자들이 콘솔의 브라우저를 통해 또는 폰에서 TV로의 캐스팅을 통해 TV에서 사이트를 자주 탐색하기 때문에 PlayStation은 대형 화면 맥락 (1920–2120px)을 위해 구체적으로 튜닝합니다. 대부분의 리테일 사이트는 1440px에서 튜닝을 중지하지만 PlayStation은 4K까지 계속 튜닝합니다.

터치 타겟

• Primary 필 버튼은 ~48–56px 높이 (SST 18px 텍스트 + ~12–16px 수직 패딩) — WCAG AAA에 편안하게 적합.
• 네비게이션 링크는 데스크탑에서 더 작음 (~32–40px 높이); 모바일에서는 드로어 내부에서 48px+로 패딩.
• 아이콘 원 버튼은 40–48px — 터치 친화적.

접힘 전략

• 네비게이션: 뷰포트가 좁아질수록 전체 네비게이션 → 축소 → 햄버거 드로어. 로고는 왼쪽에 고정; CTA는 오른쪽에 고정.
• 그리드: 6칼럼 → 4칼럼 → 3칼럼 → 2칼럼 → 1칼럼. 게임 타일 카드는 커버 아트를 자르지 않고 재배열.
• 간격: 뷰포트가 좁아질수록 섹션 패딩이 96px → 64px → 48px → 32px → 24px로 타이트해짐.
• 서체: SST 히어로가 54px → 44px → 35px → 28px → 22px로 스케일. 라이트 굵기 300은 모든 크기에서 유지.
• 히어로 사진: 아트 디렉션 스왑 — 데스크탑은 넓은 16:9 크롭, 모바일은 제품이 중앙에 오는 4:3 또는 1:1 크롭.

이미지 동작

• 반응형 래스터 (srcset + 아트 디렉션이 있는 <picture>), 종횡비는 브레이크포인트마다 유지.
• 4K 준비: 사이트는 TV 탐색 시 업스케일링을 피하기 위해 1920px+에서 고밀도 이미지 제공.
• 폴드 아래의 모든 것에 loading="lazy"; 히어로는 프리로드 힌트와 함께 eager.

9. 에이전트 프롬프트 가이드

빠른 컬러 참조

• Primary CTA: “PlayStation Blue (#0070cc)”
• 호버 / 포커스 액센트: “PlayStation Cyan (#1eaedb)”
• 배경 (흰색 서피스): “Paper White (#ffffff)”
• 배경 (어두운 서피스): “Console Black (#000000)”
• 흰색 배경의 헤딩 텍스트: “Display Ink (#000000)”
• 흰색 배경의 본문 텍스트: “Deep Charcoal (#1f1f1f)”
• 검정 배경의 본문 텍스트: “Inverse White (#ffffff)”
• 커머스 / 구매 액센트: “Commerce Orange (#d53b00)”
• 푸터 앵커: “PlayStation Blue (#0070cc)“

컴포넌트 프롬프트 예시

1. “#0070cc PlayStation Blue 채우기, SST 18px / 500 / 0.4px 자간의 흰색 텍스트, 999px 테두리 반지름, 12px × 24px 패딩으로 primary CTA 버튼을 만드세요. 호버 시 배경이 #1eaedb PlayStation Cyan으로 전환되고, 2px #ffffff 테두리가 나타나며, box-shadow를 통해 2px #0070cc 외곽 링이 피어오르고, 버튼 전체가 1.2×로 확대됩니다 — 모두 180ms ease 전환으로.”
2. “#000000 Console Black 캔버스 위에, -0.1px 자간과 1.25 줄 높이로 #ffffff의 54px SST 굵기 300 헤드라인이 있는 히어로 패널을 디자인하세요. 아래에 표준 PlayStation 호버 처리가 적용된 single primary CTA를 배치하세요. 어디에도 대문자 레이블 없음.”
3. “게임 커버 타일 만들기: 12px 테두리 반지름과 깃털 rgba(0, 0, 0, 0.08) 0 5px 9px 0 드롭 섀도우가 있는 3:4 종횡비 이미지, 아래 14px SST 700 제목, 12px SST 500 플랫폼 태그, PlayStation Blue의 14px / 700 / 0.324px 자간 미니 primary CTA.”
4. “PlayStation Store 구매용 커머스 필 버튼 만들기: #d53b00 Commerce Orange 채우기, SST 18px / 700 / 0.45px 자간의 #ffffff 텍스트, 999px 반지름, 12px × 28px 패딩. 활성 상태는 #aa2f00으로 어두워짐. 호버는 1.2× 스케일의 표준 시안 반전을 따름.”
5. “어두운 히어로 섹션 사이의 흰색 콘텐츠 패널 디자인: 미묘한 #ffffff → #f5f7fa 밝은 섹션 그라디언트가 있는 #ffffff 배경, 24px 테두리 반지름, 48px 내부 패딩, 깃털 rgba(0, 0, 0, 0.06) 0 5px 9px 0 엘리베이션, 35px SST 300 헤드라인, 18px 본문 단락, single primary CTA.”

반복 작업 가이드

이 디자인 시스템으로 생성된 기존 화면을 개선할 때:

1. 디스플레이 굵기를 감사하세요. 22px 이상의 모든 헤드라인은 SST 굵기 300이어야 합니다. 히어로 스케일에서 굵기 500이나 700이 보이면 PlayStation의 목소리를 잃은 것입니다.
2. 호버 처리를 감사하세요. 모든 primary 버튼은 시안 채우기 + 흰색 테두리 + 파란색 링 조합으로 호버 시 1.2×로 확대되어야 합니다. 그 네 가지 중 하나라도 놓치면 인터랙션 시그니처가 깨집니다.
3. 모서리를 감사하세요. 모든 컨테이너와 버튼은 2, 3, 6, 12, 13, 19, 20, 24, 36, 48, 또는 999px / 100%에 해당해야 합니다. 직각 모서리는 목소리를 깨뜨립니다.
4. 색상 확산을 감사하세요. PlayStation Blue (#0070cc), Cyan (#1eaedb), Commerce Orange (#d53b00), 그리고 선언된 회색/검정/흰색만 크롬에 나타나야 합니다. 다른 색조가 보이면 수정하세요.
5. 서피스 교차를 감사하세요. 페이지는 어두운 히어로 → 흰색 콘텐츠 → 어두운 히어로 → 흰색 콘텐츠 → 파란색 푸터 순으로 교차해야 합니다. 두 개의 동일한 서피스 패널이 인접해 있으면 전환을 삽입하세요.
6. 케이싱을 감사하세요. 문장 케이스와 타이틀 케이스만. 대문자 레이블, 버튼, 키커 없음. 대문자가 보이면 변환하세요.
7. 섀도우 굵기를 감사하세요. 섀도우 불투명도는 0.06 / 0.08 / 0.16 / 0.8에 해당해야 합니다 — 그 사이는 없습니다. 0.1, 0.2, 0.3, 0.5 드롭 섀도우가 보이면 가장 가까운 선언 티어로 수정하세요.
8. 여백을 감사하세요. 두 모듈이 “경쟁적”으로 느껴진다면 (주의를 끌기 위해 싸우는 것처럼), 48–96px의 수직 여유 공간을 추가하세요. PlayStation의 갤러리 페이스 리듬은 협상 불가능합니다.