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

Category: 미디어 및 소비자 시각적 발견. 레드 액센트, 메이슨리 그리드, 이미지 우선.

1. 비주얼 테마 및 분위기

Pinterest 웹사이트는 시각적 발견을 라이프스타일 매거진처럼 느끼게 만드는 따뜻하고 영감 넘치는 캔버스입니다. 디자인은 부드럽고 약간 따뜻한 흰색 배경 위에 Pinterest 레드（#e60023）를 유일하고 강렬한 브랜드 액센트로 사용합니다. 대부분의 테크 플랫폼의 쿨한 블루와 달리, Pinterest의 뉴트럴 스케일은 뚜렷한 따뜻한 언더톤을 가집니다——그레이는 쿨 스틸이 아닌 올리브/샌드 톤（#91918c, #62625b, #e5e5e0）으로 기울어져 있어 아늑하고 수공예 같은 분위기를 만들어 브라우징을 유도합니다.

타이포그래피는 Pin Sans를 사용합니다——일본어 폰트를 포함한 광범위한 폴백 스택을 가진 커스텀 독점 폰트로, Pinterest의 글로벌 범위를 반영합니다. 디스플레이 크기（70px, 웨이트 600）에서 Pin Sans는 크고 초대하는 헤드라인을 만듭니다. 작은 크기에서 시스템은 컴팩트합니다: 버튼 12px, 캡션 12–14px. CSS 변수 명명 시스템（--comp-*, --sema-*, --base-*）은 정교한 3단계 디자인 토큰 아키텍처를 드러냅니다: 컴포넌트 레벨, 시맨틱 레벨, 베이스 레벨 토큰.

Pinterest를 차별화하는 것은 넉넉한 보더 라디우스 시스템（12px–40px, 원형에는 50%）과 따뜻한 버튼 배경입니다. 세컨더리 버튼（#e5e5e0）은 차가운 그레이가 아닌 뚜렷하게 따뜻한 샌드 톤을 가집니다. 프라이머리 레드 버튼은 16px 라디우스 사용——둥글지만 필 형태는 아닙니다. 따뜻한 배지 배경（hsla(60,20%,98%,.5)——미묘한 노란 따뜻한 세척）과 사진 주도 레이아웃을 결합하면, 기업적이고 무균적이지 않은 수공예적이고 개인적인 디자인이 탄생합니다.

주요 특징:

• 올리브/샌드 톤 뉴트럴을 가진 따뜻한 화이트 캔버스——아늑함, 임상적이지 않음
• Pinterest 레드（#e60023）를 유일한 강렬한 액센트로——결코 미묘하지 않고, 항상 자신감 있음
• 글로벌 폴백 스택（CJK 포함）을 가진 Pin Sans 커스텀 폰트
• 3단계 토큰 아키텍처: --comp-* / --sema-* / --base-*
• 따뜻한 세컨더리 서피스: 샌드 그레이（#e5e5e0）, 따뜻한 배지（hsla(60,20%,98%,.5)）
• 넉넉한 보더 라디우스: 표준 16px, 큰 컨테이너에는 최대 40px
• 사진 우선 콘텐츠——핀/이미지가 주요 비주얼 요소
• 어두운 근보라색 텍스트（#211922）——따뜻하고, 자두빛 힌트가 있음

2. 컬러 팔레트 및 역할

프라이머리 브랜드

• Pinterest 레드（#e60023）: 프라이머리 CTA, 브랜드 액센트——강렬하고 자신감 있는 빨강
• 그린 700（#103c25）: --base-color-green-700, 성공/자연 액센트
• 그린 700 호버（#0b2819）: --base-color-hover-green-700, 눌린 그린

텍스트

• 플럼 블랙（#211922）: 프라이머리 텍스트——자두빛 언더톤을 가진 따뜻한 근검정
• 블랙（#000000）: 세컨더리 텍스트, 버튼 텍스트
• 올리브 그레이（#62625b）: 세컨더리 설명, 뮤트 텍스트
• 웜 실버（#91918c）: --comp-button-color-text-transparent-disabled, 비활성 텍스트, 입력 보더
• 화이트（#ffffff）: 어두운/컬러 서피스 위의 텍스트

인터랙티브

• 포커스 블루（#435ee5）: --comp-button-color-border-focus-outer-transparent, 포커스 링
• 퍼포먼스 퍼플（#6845ab）: --sema-color-hover-icon-performance-plus, 퍼포먼스 기능
• 리커멘데이션 퍼플（#7e238b）: --sema-color-hover-text-recommendation, AI 추천
• 링크 블루（#2b48d4）: 링크 텍스트 색상
• Facebook 블루（#0866ff）: --facebook-background-color, 소셜 로그인
• 프레스드 블루（#617bff）: --base-color-pressed-blue-200, 눌린 상태

서피스 및 보더

• 샌드 그레이（#e5e5e0）: 세컨더리 버튼 배경——따뜻하고, 수공예 느낌
• 웜 라이트（#e0e0d9）: 원형 버튼 배경, 배지
• 웜 워시（hsla(60, 20%, 98%, 0.5)）: --comp-badge-color-background-wash-light, 미묘한 따뜻한 배지 배경
• 포그（#f6f6f3）: 라이트 서피스（50% 불투명도）
• 보더 비활성（#c8c8c1）: --sema-color-border-disabled, 비활성 보더
• 호버 그레이（#bcbcb3）: --base-color-hover-grayscale-150, 호버 보더
• 다크 서피스（#33332e）: 다크 섹션 배경

시맨틱

• 에러 레드（#9e0a0a）: 체크박스/폼 에러 상태

3. 타이포그래피 규칙

폰트 패밀리

• 프라이머리: Pin Sans, 폴백: -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial

계층 구조

원칙

• 컴팩트 타입 스케일: 범위는 12px–70px로 극적인 점프——대부분의 기능적 텍스트는 12–16px로, 밀도 높은 앱 같은 정보 계층을 만듭니다.
• 따뜻한 웨이트 분포: 헤딩에 600–700, 본문에 400–500. 초경량 웨이트 없음——텍스트는 항상 실질감이 있습니다.
• 헤딩의 네거티브 트래킹: 28px 헤딩에서 -1.2px는 아늑하고 친밀한 섹션 타이틀을 만듭니다.
• 단일 폰트 패밀리: Pin Sans가 모든 것을 처리——세컨더리 디스플레이나 모노스페이스 폰트는 감지되지 않았습니다.

4. 컴포넌트 스타일링

버튼

프라이머리 레드

• 배경: #e60023（Pinterest 레드）
• 텍스트: #000000（검정——레드 위에 대비를 위한 특이한 선택）
• 패딩: 6px 14px
• 라디우스: 16px（넉넉히 둥글지만 필 형태 아님）
• 보더: 2px solid rgba(255, 255, 255, 0)（투명）
• 포커스: CSS 변수를 통한 시맨틱 보더 + 아웃라인

세컨더리 샌드

• 배경: #e5e5e0（따뜻한 샌드 그레이）
• 텍스트: #000000
• 패딩: 6px 14px
• 라디우스: 16px
• 포커스: 동일한 시맨틱 보더 시스템

서큘러 액션

• 배경: #e0e0d9（웜 라이트）
• 텍스트: #211922（플럼 블랙）
• 라디우스: 50%（원형）
• 용도: 핀 액션, 네비게이션 컨트롤

고스트/투명

• 배경: 투명
• 텍스트: #000000
• 보더 없음
• 용도: 3차 액션

카드 및 컨테이너

• 넉넉한 라디우스（12px–20px）를 가진 사진 우선 핀 카드
• 대부분의 카드에 전통적인 박스 쉐도우 없음
• 화이트 또는 따뜻한 포그 배경
• 일부 이미지 컨테이너에 8px 화이트 두꺼운 보더

인풋

• 이메일 인풋: 흰 배경, 1px solid #91918c 보더, 16px 라디우스, 11px 15px 패딩
• 포커스: CSS 변수를 통한 시맨틱 보더 + 아웃라인 시스템

네비게이션

• 화이트 또는 따뜻한 배경 위의 깔끔한 헤더
• Pinterest 로고 + 검색 바 중앙 배치
• 네비 링크에 Pin Sans 16px
• 활성 상태에 Pinterest 레드 액센트

이미지 처리

• 핀 스타일 메이슨리 그리드（Pinterest 시그니처 레이아웃）
• 이미지 둥근 모서리: 12px–20px
• 사진을 주요 콘텐츠로——모든 핀은 이미지
• 피처드 이미지 컨테이너에 두꺼운 화이트 보더（8px）

5. 레이아웃 원칙

간격 시스템

• 기본 단위: 8px
• 스케일: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
• 큰 점프: 섹션 간격에 32px → 80px → 100px

그리드 및 컨테이너

• 핀 콘텐츠에 메이슨리 그리드（시그니처 레이아웃）
• 넉넉한 최대 너비를 가진 중앙 정렬 콘텐츠 섹션
• 전체 너비 다크 푸터
• 주요 네비게이션 요소로서의 검색 바

공백 철학

• 영감 밀도: 메이슨리 그리드는 핀을 촘촘히 쌓습니다——콘텐츠 밀도 자체가 가치 제안입니다. 공백은 그리드 내부가 아닌 섹션 사이에 존재합니다.
• 위에서 숨쉬고, 아래에서 밀도: 히어로/피처 섹션은 넉넉한 패딩을 얻습니다; 핀 그리드는 컴팩트하고 몰입적입니다.

보더 라디우스 스케일

• 표준（12px）: 소형 카드, 링크
• 버튼（16px）: 버튼, 인풋, 중형 카드
• 편안함（20px）: 피처 카드
• 라지（28px）: 대형 컨테이너
• 섹션（32px）: 탭 요소, 대형 패널
• 히어로（40px）: 히어로 컨테이너, 대형 피처 블록
• 서클（50%）: 액션 버튼, 탭 인디케이터

6. 깊이와 높이

쉐도우 철학: Pinterest는 최소한의 쉐도우를 사용합니다. 메이슨리 그리드는 엘리베이션 효과가 아닌 콘텐츠（사진）에 의존하여 시각적 흥미를 만듭니다. 깊이는 서피스 색상의 따뜻함과 컨테이너의 넉넉한 라운딩에서 옵니다.

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

해야 할 것

• 따뜻한 뉴트럴（#e5e5e0, #e0e0d9, #91918c）사용——따뜻한 올리브/샌드 톤이 아이덴티티
• Pinterest 레드（#e60023）는 프라이머리 CTA에만 적용——강렬하고 단독
• Pin Sans만 독점 사용——모든 것에 하나의 폰트
• 넉넉한 보더 라디우스 적용: 버튼/인풋에 16px, 카드에 20px 이상
• 메이슨리 그리드를 밀도 높게 유지——콘텐츠 밀도가 가치
• 따뜻한 배지 배경（hsla(60,20%,98%,.5)）을 미묘한 따뜻한 워시에 사용
• 프라이머리 텍스트에 #211922（플럼 블랙）사용——순수한 검정보다 따뜻함

하지 말아야 할 것

• 쿨 그레이 뉴트럴 사용하지 않기——항상 따뜻한/올리브 톤
• 프라이머리 텍스트에 순수한 검정（#000000）사용하지 않기——플럼 블랙（#211922）사용
• 필 형태 버튼 사용하지 않기——16px 라디우스는 둥글지만 필 형태 아님
• 무거운 쉐도우 추가하지 않기——Pinterest는 디자인적으로 플랫, 깊이는 콘텐츠에서
• 카드에 작은 보더 라디우스（<12px）사용하지 않기——넉넉한 라운딩이 핵심
• 추가 브랜드 색상 도입하지 않기——빨강 + 따뜻한 뉴트럴이 완전한 팔레트
• 얇은 폰트 웨이트 사용하지 않기——Pin Sans 최소 400

8. 반응형 동작

브레이크포인트

접힘 전략

• 핀 그리드: 5+ 컬럼 → 3 → 2 → 1
• 네비게이션: 검색 바 + 아이콘 → 단순화된 모바일 네비
• 피처 섹션: 나란히 → 스택
• 히어로: 70px → 비례적으로 축소
• 푸터: 다크 멀티컬럼 → 스택

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

빠른 컬러 레퍼런스

• 브랜드: Pinterest 레드（#e60023）
• 배경: 화이트（#ffffff）
• 텍스트: 플럼 블랙（#211922）
• 세컨더리 텍스트: 올리브 그레이（#62625b）
• 버튼 서피스: 샌드 그레이（#e5e5e0）
• 보더: 웜 실버（#91918c）
• 포커스: 포커스 블루（#435ee5）

컴포넌트 프롬프트 예시

• “히어로 만들기: 흰 배경. 헤드라인은 70px Pin Sans 웨이트 600, 플럼 블랙（#211922）. 레드 CTA 버튼（#e60023, 16px 라디우스, 6px 14px 패딩）. 세컨더리 샌드 버튼（#e5e5e0, 16px 라디우스）.”
• “핀 카드 디자인: 흰 배경, 16px 라디우스, 쉐도우 없음. 사진이 상단을 채우고, 아래에 16px Pin Sans 웨이트 400 설명을 #62625b로.”
• “서큘러 액션 버튼 구성: #e0e0d9 배경, 50% 라디우스, #211922 아이콘.”
• “입력 필드 만들기: 흰 배경, 1px solid #91918c, 16px 라디우스, 11px 15px 패딩. 포커스: 시맨틱 토큰을 통한 블루 아웃라인.”
• “다크 푸터 디자인: #33332e 배경. 흰색 Pinterest 스크립트 로고. 12px Pin Sans 링크, #91918c로.”

이터레이션 가이드

1. 모든 곳에 따뜻한 뉴트럴——올리브/샌드 그레이, 쿨 스틸은 절대 안 됨
2. Pinterest 레드는 CTA에만——강렬하고 단독
3. 버튼/인풋에 16px 라디우스, 카드에 20px 이상——넉넉하지만 필 형태 아님
4. Pin Sans가 유일한 폰트——UI는 12px로 컴팩트, 디스플레이는 70px
5. 사진이 디자인을 이끌어——UI는 따뜻하고 미니멀하게 유지
6. 텍스트에 플럼 블랙（#211922）——순수한 검정보다 따뜻함