큐레이션 · 오픈 · 무료

Womp

강력한 브라우저 기반 3D 도구를 통해 아이디어를 실물로 변환하는 깔끔하고 접근 가능한 플랫폼입니다.

01

디자인 DNA

디지털 모델링과 실물 제조 간의 격차를 해소하는 현대적인 브라우저 기반 3D 디자인 스튜디오입니다.

02

컬러

소프트 그레이 서피스를 포함한 고대비 모노크롬 팔레트로, 3D 제품 이미지가 초점이 되도록 보장합니다.

03

타이포그래피

humanist-sans · monospace

• display60px · 400
• h148px · 400
• body16px · 400
• caption12px · 500

대형 디스플레이 텍스트에는 타이트한 자간 사용 · 기본 텍스트에는 일관된 정규체 (400) 유지 · 기술 라벨('OR LAUNCH A QUICK APP' 등)에는 모노스페이스 사용

04

여백

패딩과 간격을 위한 일관된 8px 기본 리듬과, 섹션 구분을 위한 더 넓은 80px 수직 패딩을 사용합니다.

05

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

1px solid 보더로 주로 #EEEEEE 또는 고대비 요소를 위해 rgba(32,32,32,1)를 사용합니다.

inset 0 0 0 1px color(srgb 0.85098 0.85098 0.85098)

06

레이아웃

여유로운 수직 여백을 둔 중앙 정렬 단일 열 히어로에서, 피처 카드를 위한 2열 그리드로 전환됩니다.

07

모션과 인터랙션

모든 인터랙티브 상태 (배경, box-shadow, transform, scale)에 대한 일관된 150ms ease-in-out 트랜지션.

버튼 및 인터랙티브 요소의 배경 및 box-shadow 변화. · 스케일 또는 변환 마이크로 인터랙션.

08

컴포넌트

• button 흰색 텍스트가 있는 채워진 검정색과 둥근 필 모양, 어두운 텍스트와 둥근 필 모양의 고스트/아웃라인 두 가지 주요 스타일이 있습니다.
• card 큰 둥근 모서리 (14px), 미묘한 배경색 (#F2F2F2), 그리고 아래쪽의 깔끔한 타이포그래피를 특징으로 하는 피처 카드입니다.
• chip 섹션 구분자로 사용되는 둥근 모서리가 있는 회색 테두리의 작은 모노스페이스 대문자 칩입니다.
• input 내부에 검정색 행동 유도 버튼이 있는, 밝은 회색 배경과 둥근 모서리를 가진 크고 중앙 정렬된 프롬프트 상자입니다.
• hero 클린한 화이트 배경을 중심으로 텍스트가 많은 미니멀한 히어로 섹션으로, 큰 인터랙티브 프롬프트 상자가 특징입니다.

09

보이스와 금지 목록

• 톤 직설적이고 자신감 있으며 격려하는 어조.
• 헤드라인 타이트한 자간을 사용한 간결하고 혜택 중심적인 문장.
• CTA 화살표 아이콘을 사용하며 행동 지향적인 스타일로, 고대비 검정색 채우기 또는 미묘한 고스트 아웃라인을 사용합니다.

• 장식용 그래디언트나 복잡한 배경을 사용하지 마세요 — 스크린샷은 깔끔하고 근접 화이트의 단색 배경을 보여줍니다.
• 헤드라인에 전부 대문자를 사용하지 마세요 — 스크린샷은 기본 디스플레이 텍스트에 문장이나 제목 대소문자를 사용합니다.
• 둥근 사각형이나 날카로운 모서리를 사용하지 마세요 — 스크린샷은 타이트한 필과 넉넉한 14px 둥근 모서리의 혼합을 보여줍니다.
• 고채도 강조 색상을 사용하지 마세요 — 스크린샷은 지배적인 밝은 색상이 없는 엄격한 모노크롬 팔레트를 보여줍니다.
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 높이감을 위해 미묘한 1px 인셋 보더만 사용합니다.
• 여러 열로 레이아웃을 지저분하게 만들지 마세요 — 스크린샷은 매우 집중된, 중앙 정렬된 단일 열 히어로를 보여줍니다.
• 피하기: 지나치게 전문적인 전문 용어
• 피하기: 빈약한 문단
• 피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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