큐레이션 · 오픈 · 무료

SFMOMA

세계적 수준의 현대 미술관을 위한, 사진 중심의 대담한 편집 디자인입니다.

01

디자인 DNA

대형 사진과 굵은 타이포그래피를 우선시하여 물리적 갤러리 경험을 불러일으키는, 현대 미술관의 디지털 로비입니다.

02

컬러

순백의 기본색과 깊은 차콜 잉크를 사용하는 절제된 고대비 팔레트이며, 단 하나의 선명한 빨간색 강조색은 인터랙티브 및 멤버십 요소에 엄격히 적용됩니다.

03

타이포그래피

geometric-sans · humanist-sans

• display32px · 500
• body16px · 400
• caption14px · 400
• overline12px · 400

제목에는 두꺼운 굵기와 좁은 행간의 디스플레이 고딕체를 사용합니다. · 본문에는 가독성이 높은 휴머니스트 산세리프체를 사용합니다. · 라벨과 태그는 일관되게 대문자로 표시하고 자간을 넓게 설정합니다.

04

여백

넉넉한 수직 간격을 사용하며, 주요 콘텐츠 블록에는 120px의 큰 상단 패딩을 적용하여 개방감과 물리적 갤러리 공간감을 만듭니다.

05

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

rgba(68, 73, 76, 0.2) 0px 3px 15px 0px

06

레이아웃

주요 콘텐츠를 위한 단일 컬럼 풀폭 레이아웃으로, 뷰포트 전체 너비를 차지하는 대형 이미지를 활용합니다.

07

모션과 인터랙션

인터랙티브 요소의 transform 및 box-shadow에 부드러운 전환을 적용합니다 (0.4s). · 상태 변화를 위한 일반적인 0.2s 전환.

포인터 커서로 나타내는, 인터랙티브 요소의 색상 변화 또는 미세한 변형. · 표준 링크 동작으로 즉각적인 반응.

08

컴포넌트

• button 선명한 빨간색 강조색과 표준 포인터 커서를 사용하는 고스트 버튼 또는 텍스트 링크입니다.
• card 큰 풀폭 이미지와 그 뒤에 이어지는 텍스트 블록으로 구성된 콘텐츠 블록으로, 눈에 띄는 테두리나 배경 컨테이너가 없습니다.
• chip 태그 또는 카테고리로 사용되는 대문자 텍스트 라벨입니다.
• input 활성화되기 전까지 눈에 띄는 입력 필드가 없는 검색 아이콘 트리거입니다.
• hero 반투명한 흰색 디스플레이 타이포그래피가 덧입혀진 풀블리드 사진 영웅 영역입니다.

09

보이스와 금지 목록

• 톤 제도적이고 권위적이면서도, 친근하고 접근 가능한 어조입니다.
• 헤드라인 굵고 간결하며 임팩트 있는, 주로 즉각적인 주목을 끌기 위해 디스플레이 굵기를 사용합니다.
• CTA 행동 지향적이고 명확하며, 일반적으로 'Membership'이나 'Tickets'와 같은 표준 동사를 사용합니다.

• 컨테이너나 이미지에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 정사각형의 모서리를 보여줍니다.
• 드롭 캡이나 장식용 폰트를 사용하지 마세요 — 스크린샷은 깨끗하고 현대적인 디스플레이 고딕체를 사용합니다.
• 빨간색 강조색을 과용하지 마세요 — 스크린샷은 이를 주요 내비게이션과 인터랙티브 요소에만 엄격히 제한합니다.
• 밀집된 다중 컬럼 텍스트 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 여백과 단일 컬럼 읽기 경로에 의존합니다.
• 그림자나 테두리가 있는 복잡한 카드 스타일을 사용하지 마세요 — 스크린샷은 테두리 없이 이미지가 강조된 블록을 사용합니다.
• 다크 모드나 어두운 배경을 사용하지 마세요 — 스크린샷은 주로 밝고 흰색 배경의 인터페이스를 보여줍니다.
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 지저분한 텍스트 블록
• 피하기: 일반적인 스톡크 사진

10

팩 안의 실제 스크린샷

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

11

System Prompt

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