큐레이션 · 오픈 · 무료

Buzzusborne

복잡한 문제를 간결하고 사랑스러운 제품으로 전환하는 개인 메이커 포트폴리오.

01

디자인 DNA

자신의 디지털 창작물을 소개하는 친근한 동네 메이커.

02

컬러

고대비와 가독성을 위한 깨끗한 흰색 캔버스와 짙은 네이비 타이포그래피.

03

타이포그래피

humanist-sans · geometric-sans

• display46px · 500
• body15px · 400

본문 텍스트에는 Roboto를, 굵은 디스플레이 헤드라인에는 Poetsen One을 사용합니다. · 가독성을 위해 본문 라인 높이를 넉넉하게 유지합니다(본문 1.6). · 친근한 느낌을 유지하기 위해 큰 헤드라인에서 좁은 자간을 사용하지 않습니다.

04

여백

데스크톱에서 중앙 콘텐츠에 집중하기 위해 150px의 넉넉한 사이드 패딩을 적용한 여백.

05

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

미세한 UI 요소를 위한 짙은 네이비색의 2px 실선 테두리.

0 4px 20px rgba(42, 57, 78, 0.05)

06

레이아웃

섹션 간 넉넉한 수직 간격을 둔 중앙 정렬 단일 열 레이아웃.

07

모션과 인터랙션

뷰포트에 진입하는 요소들을 위한 부드러운 페이드인 및 트랜스폼 트랜지션.

인터랙티브 요소에 대한 미세한 불투명도 또는 색상 변화. · 약간의 스케일이나 색상 변화로 즉각적인 시각적 피드백을 제공합니다.

08

컴포넌트

• button 짙은 배경에 흰색 텍스트가 들어간 둥근 알약 모양 버튼.
• card 프로젝트 스크린샷을 보여주는 부드러운 베이지색 배경의 둥근 컨테이너.
• hero 장난스러운 이모지가 포함된 큰 중앙 정렬 헤드라인과 그 뒤에 오는 프로젝트 쇼케이스 카드.

09

보이스와 금지 목록

• 톤 친근하고 접근 가능하며 자신감 있는 어조.
• 헤드라인 장난스러운 이모지가 포함된 1인칭 대화형 문장.
• CTA 짙은 배경 버튼 위의 명확한 행동 지향적 텍스트.

• 차갑고 냉랭한 색상 팔레트를 사용하지 마세요 — 스크린샷은 친근한 짙은 네이비 텍스트와 따뜻한 흰색을 보여줍니다.
• 카드에 날카롭고 각진 모서리를 사용하지 마세요 — 스크린샷은 큰 20px 둥근 모서리를 보여줍니다.
• 작고 비좁은 타이포그래피를 사용하지 마세요 — 스크린샷은 46px의 크고 읽기 쉬운 디스플레이 타입을 보여줍니다.
• 복잡한 다중 열 레이아웃을 사용하지 마세요 — 스크린샷은 깔끔하고 단일 열로 중앙 정렬된 디자인을 보여줍니다.
• 빽빽하고 텍스트가 많은 섹션을 사용하지 마세요 — 스크린샷은 넉넉한 여백과 공간감을 보여줍니다.
• 공격적이고 기업적인 언어를 사용하지 마세요 — 스크린샷은 친근하고 1인칭 대화체 톤을 보여줍니다.
• 피하기: 지나치게 전문적인 용어
• 피하기: 공격적인 판매 언어
• 피하기: 복잡한 다중 단어 CTA
• 피하기: 차갑고 기업적인 톤
• 피하기: 전체 대문자 강조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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