큐레이션 · 오픈 · 무료

David Hckh

웹 개발자를 위한 장난기 있는 3D 일러스트레이션 개인 포트폴리오

01

디자인 DNA

아늑하고 일러스트레이션이 된 개발자 작업 공간이 생생하게 표현됨

02

컬러

따뜻한 크림 베이스에 다크 잉크로 대비를 주고 활기찬 오렌지를 주요 액션에 사용

03

타이포그래피

humanist-sans · monospace

• display72px · 800
• h248px · 800
• body16px · 400

내비게이션과 배지 레이블에는 대문자 사용 · 큰 디스플레이 텍스트에는 타이트한 음수 자간 유지 · 강한 시각적 계층 구조를 만들기 위해 제목에 굵은 굵기 사용

04

여백

일관된 4px 그리드와 주요 섹션 주변의 넉넉한 여백

05

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

윤곽선용 2px solid 잉크 색상, 배지용 4px solid 강조색

0 4px 24px rgba(45, 42, 36, 0.08) · 0 8px 32px rgba(45, 42, 36, 0.12)

06

레이아웃

전체 너비 히어로에 분할 레이아웃, 프로젝트용 2열 그리드

07

모션과 인터랙션

호버 시 매끄러운 배경색 및 transform 전환 · 색상 및 불투명도 변경을 위한 ease-in-out 전환

인터랙티브 요소에서 미세한 배경색 및 transform 변경 · 마이크로 전환으로 즉각적인 반응

08

컴포넌트

• button 100px border-radius의 알약 모양, 오렌지 배경에 흰색 텍스트
• card 이미지와 함께 24px border-radius, 약간 둥근 모서리
• chip 기울어진 4px 테두리 배지 레이블과 대문자 텍스트
• input 스크린샷에서 보이지 않음
• hero 왼쪽에 큰 굵은 제목, 오른쪽에 3D 일러스트레이션이 있는 분할 레이아웃

09

보이스와 금지 목록

• 톤 친근하고 접근하기 쉬우며 전문적
• 헤드라인 개성 있는 소문자 경향의 큰 굵은 humanist sans-serif
• CTA 높은 대비 오렌지의 대문자 알약 모양 버튼

• 얇은 폰트 굵기 사용 금지 — 스크린샷에서 제목은 굵기 800 사용
• 다크 배경 사용 금지 — 스크린샷은 따뜻한 크림 #F5EFE6 배경 사용
• 사각 모서리 사용 금지 — 스크린샷은 최대 100px의 border-radius를 사용하여 알약 모양 표현
• 강조색으로 파란색 사용 금지 — 스크린샷은 주요 강조색으로 오렌지 #FF8400 사용
• 세리프 타이포그래피 사용 금지 — 스크린샷은 Urbanist humanist sans-serif만 독점 사용
• 최소 여백 사용 금지 — 스크린샷은 넉넉한 패딩과 섹션 간 간격 사용
• 피하기: 세리프 폰트 사용 금지
• 피하기: 주요 강조색으로 차갑거나 임상적인 파란색 사용 금지
• 피하기: 날카로운 사각 모서리 사용 금지
• 피하기: 제목에 얇거나 가벼운 폰트 굵기 사용 금지
• 피하기: 다크 모드 배경 사용 금지
• 피하기: 섹션 사이 비좁은 간격 사용 금지

10

팩 안의 실제 스크린샷

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

11

System Prompt

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