큐레이션 · 오픈 · 무료

Jun Works

그래픽 디자인 작업을 소개하는 타이포그래피 중심의 미니멀 개인 포트폴리오입니다.

01

디자인 DNA

깔끔한 타이포그래피와 넉넉한 여백을 가진 고급 인쇄 포트폴리오 책과 같습니다.

02

컬러

타이포그래피와 콘텐츠를 강조하기 위해 흑백만 사용하는 엄격한 단색 팔레트입니다.

03

타이포그래피

grotesque-sans

• display54px · 400
• body13px · 400

모든 텍스트에 Neue Haas Grotesk 또는 유사한 grotesque-sans를 사용합니다. · 큰 디스플레이 텍스트의 경우 -2px로 엄격한 letter-spacing을 유지합니다. · 모든 요소에 걸쳐 일관되게 font-weight 400을 사용합니다.

04

여백

주요 섹션 주변에 45px의 넉넉한 패딩을 적용하여 여유롭고 숨 쉬는 레이아웃을 만듭니다.

05

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

버튼과 인터랙티브 요소에 4px solid black 테두리를 사용하고, 알약 모양(border-radius: 129.6px) 코너를 적용합니다.

06

레이아웃

큰 타입, 넉넉한 패딩, 텍스트의 엄격한 좌측 정렬을 적용한 단일 컬럼 중앙 정렬 레이아웃입니다.

07

모션과 인터랙션

링크와 버튼에 'all' 속성을 사용한 hover 전환

인터랙티브 요소에 맞춤 커서 변경과 미묘한 전환 효과를 적용합니다. · 표준 포인터 동작을 따릅니다.

08

컴포넌트

• button 4px solid black 테두리를 가진 알약 모양 버튼으로, 흰색 배경에 검은색 텍스트와 넉넉한 내부 패딩을 적용합니다.
• card 카드는 없으며, 콘텐츠는 연속적인 텍스트 블록이나 목록으로 제시됩니다.
• chip 얇은 검은색 테두리를 가진 알약 모양 태그(예: #creative, #branding)를 사용합니다.
• input 눈에 보이는 입력 필드는 없으며, 주로 정적 콘텐츠입니다.
• hero 좁은 letter-spacing을 적용한 크고 굵은 소개 텍스트 블록으로, 좌측 정렬되어 뷰포트를 지배합니다.

09

보이스와 금지 목록

• 톤 전문적이고 간결하며 매우 세련된 어조입니다.
• 헤드라인 크고 굵은 grotesque-sans 텍스트로 좁은 간격을 적용합니다.
• CTA 얇은 검은색 테두리와 깔끔한 텍스트를 가진 알약 모양 버튼을 사용합니다.

• 여러 색상을 사용하지 마세요 — 스크린샷은 엄격한 흑백 단색 팔레트를 보여줍니다.
• 장식용 서체를 사용하지 마세요 — 스크린샷은 전체적으로 깔끔한 grotesque-sans 타이포그래피를 보여줍니다.
• 드롭 쉐도우를 사용하지 마세요 — 스크린샷은 완전히 평면적인 디자인 요소를 보여줍니다.
• 버튼에 사각 코너를 사용하지 마세요 — 스크린샷은 알약 모양(999px 반경) 버튼을 보여줍니다.
• 무거운 폰트 웨이트를 사용하지 마세요 — 스크린샷은 일관된 font-weight 400을 보여줍니다.
• 좁은 간격을 사용하지 마세요 — 스크린샷은 콘텐츠 섹션 주변의 넉넉한 패딩(45px)을 보여줍니다.
• 피하기: 장식 요소를 피합니다.
• 피하기: 불필요한 색상을 피합니다.
• 피하기: 복잡한 레이아웃을 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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