큐레이션 · 오픈 · 무료

Wieden+Kennedy

몰입형 사진과 대규모 타이포그래피를 통해 높은 임팩트의 창작 작품을 선보이는 대담하고 시네마틱한 에이전시 포트폴리오.

01

디자인 DNA

시네마틱한 영화제 프로그램

02

컬러

깊은 검은색과 풍부한 사진 배경 위의 선명한 흰색 텍스트에 의존하는 고대비 시네마틱 팔레트

03

타이포그래피

grotesque-sans

• display68px · 300
• h232px · 300
• body16px · 300

정교하고 공기감 있는 느낌을 위해 주로 300 (라이트) 웨이트 사용 · 임팩트를 위해 큰 디스플레이 크기(68px) 사용 · 디스플레이 헤드라인의 타이트한 자간

04

여백

개방적이고 시네마틱한 호흡 공간을 만들기 위한 넉넉한 패딩 블록(75px, 96px)을 사용한 비대칭 레이아웃

05

표면 (라운드 / 그림자 / 경계선)

주로 구조적 분리를 위해 드물게 사용되는 1px 얇은 테두리

rgba(0, 0, 0, 0.25) 0px 0px 5px 0px

06

레이아웃

오버레이된 텍스트가 있는 풀블리드 사진 히어로에서, 작품 쇼케이스를 위한 구조화된 그리드 레이아웃으로 전환

07

모션과 인터랙션

콘텐츠 전환을 위한 불투명도 페이드(0.75초) · 스크롤 기반 표시를 위한 트랜스폼 움직임(0.5초) · 인터랙티브 상태를 위한 색상 전환(0.25초)

인터랙티브 요소에서 커서가 포인터로 변경; 미묘한 색상 또는 불투명도 변화 · 표준 포인터 상호작용

08

컴포넌트

• button 최소주의적인 텍스트 기반 버튼, 때로는 대문자 사용
• card 보이는 테두리 없이 이미지 모서리에 의존하는 대규모 사진 카드
• chip 관찰되지 않음
• input 관찰되지 않음
• hero 전체 뷰포트 시네마틱 이미지와 하단 왼쪽에 오버레이된 크고 가벼운 웨이트의 타이포그래피

09

보이스와 금지 목록

• 톤 자신감 있고 절제된, 예술적인 어조
• 헤드라인 크고 가벼운 웨이트(300), 소문자 또는 타이틀 케이스에 최소한의 구두점
• CTA 깔끔한 대문자 텍스트 링크

• 무거운 폰트 웨이트를 사용하지 마세요 — 스크린샷에서 라이트(300) 웨이트가 지배적임을 확인할 수 있습니다
• 밝고 채도 높은 강조 색상을 적용하지 마세요 — 스크린샷에서 단색/사진 팔레트를 확인할 수 있습니다
• 카드나 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷에서 날카롭고 사각적인 모서리를 확인할 수 있습니다
• 타이트한 간격으로 요소를 밀집시키지 마세요 — 스크린샷에서 넉넉한 패딩과 여백(75px~96px)을 확인할 수 있습니다
• 장식용 또는 세리프 서체를 사용하지 마세요 — 스크린샷에서 깔끔한 그로테스크 산세리프를 확인할 수 있습니다
• 복잡한 배경 질감에 의존하지 마세요 — 스크린샷에서 단색 검은색 또는 사진 채우기를 확인할 수 있습니다
• 피하기: 지저분한 레이아웃이나 바쁜 배경 패턴을 피합니다
• 피하기: 무거운 볼드 웨이트를 피합니다 (300~500 범위를 유지)
• 피하기: 밝은 네온이나 채도 높은 강조 색상을 피합니다
• 피하기: 복잡한 내비게이션 메뉴를 피합니다; 최소주의를 유지합니다
• 피하기: 장식용 세리프 폰트를 피합니다
• 피하기: 주요 UI 요소의 둥근 모서리를 피합니다

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko