큐레이션 · 오픈 · 무료

Dribbble

비주얼 스토리텔링을 통해 디자이너와 클라이언트를 연결하는 큐레이션된 마켓플레이스입니다.

01

디자인 DNA

디지털 디자인 포트폴리오를 위한 깔끔한 갤러리 스타일 전시장입니다.

02

컬러

사용자가 생성한 다채로운 작업물이 중심이 될 수 있도록 설계된 고대비, 중립적인 기반입니다.

03

타이포그래피

grotesque-sans

• display52px · 600
• headline32px · 600
• body-lg16px · 400
• body14px · 400
• caption12px · 400

대형 디스플레이 헤드라인에는 -1px letterSpacing을 적용하여 견고하고 프리미엄한 느낌을 줍니다. · 주요 헤드라인에는 일관되게 600 웨이트를, 본문 텍스트에는 400 웨이트를 유지합니다.

04

여백

엄격한 4px 기반 그리드와 넉넉한 여백으로 깔끔하고 여유로운 레이아웃을 유지합니다.

05

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

1px solid rgba(13, 12, 34, 0.08)

0px 3px 6px rgba(0, 0, 0, 0.14) · 0px 15px 50px rgba(27, 32, 50, 0.1) · 0px 2px 4px rgba(6, 3, 24, 0.1)

06

레이아웃

모바일에서 4칼럼으로 축소되는 반응형 12칼럼 그리드입니다.

07

모션과 인터랙션

버튼과 카드의 hover 시 미세한 인터랙션. · 배경색 변화를 위한 부드러운 0.5초 ease-in-out 전환.

카드의 미묘한 그림자 상승과 버튼의 배경색 변화. · 0.05초의 색상 전환으로 즉각적인 시각적 피드백 제공.

08

컴포넌트

• button 다크 배경에 화이트 텍스트가 적용된 필 모양의 주요 버튼; 연한 그레이 테두리가 있는 보조 버튼.
• card 최소한의 메타데이터를 사용한 이미지 중심 카드로, 12px 둥근 모서리와 미묘한 hover 그림자를 적용.
• chip 탐색 및 필터링에 사용되는 배경이 밝고 둥근 모서리의 소형 태그.
• input 통합된 액션 버튼과 플레이스홀더 텍스트가 있는 크고 둥근 검색창.
• hero 대담한 좌측 정렬 헤드라인과 우측 정렬 컨텍스트 이미지가 특징인 분리형 히어로.

09

보이스와 금지 목록

• 톤 자신감 있고 전문적이며, 사용자를 empower하는 어조.
• 헤드라인 직설적이고 혜택 중심적이며, 종종 굵은 타이포그래피로 핵심 기능을 강조합니다.
• CTA 행동을 유도하고 명확하며, 주요 콜 투 액션에 필 모양 버튼을 활용합니다.

• 세리프 서체를 사용하지 마세요 — 스크린샷에서는 전체적으로 grotesque-sans의 일관된 사용을 보여줍니다.
• 카드의 둥근 모서리 반경을 12px보다 크게 사용하지 마세요 — 스크린샷에서는 12px가 표준임을 보여줍니다.
• 고채도 배경색을 사용하지 마세요 — 스크린샷에서는 엄격히 화이트와 연한 그레이 팔레트만 사용합니다.
• 히어로에서 좌측 정렬 텍스트를 사용하지 마세요 — 스크린샷에서는 섹션에 따라 중앙 정렬 또는 우측 정렬 레이아웃을 보여줍니다.
• 얇고 대비가 낮은 테두리를 사용하지 마세요 — 스크린샷에서는 rgba(13, 12, 34, 0.08)의 뚜렷한 1px 테두리를 보여줍니다.
• 다크 모드 테마를 사용하지 마세요 — 스크린샷에서는 순수한 라이트 모드 인터페이스를 보여줍니다.
• 피하기: 지나치게 캐주얼하거나 비속어가 많은 언어.
• 피하기: 지시문에서 수동태 사용.
• 피하기: 맥락 없는 전문 용어.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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