큐레이션 · 오픈 · 무료

Josh Comeau

밝고 장난기 있는 일러스트와 명확한 타이포그래피를 사용하여 복잡한 코딩 개념을 쉽게 이해할 수 있게 만드는 교육용 웹 개발자 블로그입니다.

portfolioblog

↓ 디자인 시스템 다운로드 (6 MB)OpenDesign 에서 열기

원본 사이트: https://www.joshwcomeau.com

📦 팩 내용 보기 →

디자인 DNA

교육적장난기 있는접근 가능한기술적인친근한

친근한 일러스트 교과서로, 다채롭고 인터랙티브한 비유를 사용하여 복잡한 웹 기술을 설명합니다.

컬러

#E60067Accent

#0A0C10Ink

#294E60Ink soft

#FFFFFFBG

#B1DFF6BG soft

#F0F4F6BG quiet

#5A6072Muted

rgba(10, 12, 16, 0.1)Line

시그니처 스카이 블루(#B1DFF6)와 강렬한 마젠타 악센트(#E60067)가 주도하는 밝고 통통한 미학으로, 최대 가독성을 위해 깊은 네이비 텍스트(#0A0C10)로 안정감을 줍니다.

타이포그래피

geometric-sans · monospace

display36px · 700
heading24px · 600
subtitle19px · 400
body16px · 400
caption14px · 400

카테고리 레이블에는 대문자와 넓은 자간을 사용합니다. · 모노스페이스 폰트는 코드 스니펫과 기술 용어에만 독점적으로 사용합니다. · 긴 글의 가독성을 위해 넉넉한 행간(1.5)을 유지합니다. · 레이아웃을 압도하지 않으면서 핵심 용어를 강조하기 위해 볼드체를 절제하여 사용합니다.

여백

4px

8px

12px

16px

24px

32px

48px

64px

96px

4px 기본 그리드가 일관된 리듬을 보장하며, 구조 요소 사이에는 넉넉한 24px 간격, 주요 섹션 구분에는 48-96px 간격을 둡니다.

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

카드와 입력 필드에는 중성 그레이의 미세하고 얇은 테스트(예: rgba(10, 12, 16, 0.1))가 사용되며, 카테고리 태그는 약간 더 뚜렷한 테두리를 사용합니다.

0px 2px 4px rgba(0, 0, 0, 0.02) · 0px 4px 12px rgba(0, 0, 0, 0.03) · 0px 8px 24px rgba(0, 0, 0, 0.05)

레이아웃

1200container

12columns

24pxgutter

768 / 1024breakpoints

'인기 콘텐츠'와 '카테고리'를 위한 좁은 사이드바(300px)와 넓은 본문 칼럼을 가진 2단 레이아웃입니다.

모션과 인터랙션

125msmicro

300mssmall

500msmedium

cubic-bezier(0.06, 0.63, 0.43, 1)easing

UI 상태 변화를 위한 부드러운 opacity 트랜지션. · 인터랙티브 요소를 위한 미세한 transform 애니메이션. · 콘텐츠 섹션을 위한 단계별 진입 애니메이션.

즉각적인 시각적 피드백을 위해 인터랙티브 요소에 미세한 스케일링 또는 색상 변화. · 최소한의 지연으로 새로운 상태 또는 페이지로 부드럽게 전환.

컴포넌트

button 간단한 텍스트 기반 버튼 또는 밝은 배경 채우기와 둥근 모서리를 가진 미세한 알약 모양 태그.
card 명확한 타이포그래피 계층과 강조를 위한 미세한 배경색을 가진 깔끔한 가장자리까지 확장된 콘텐츠 카드.
chip 대문자 텍스트를 가진 작은 알약 모양 태그로, 분류(예: CSS, React)에 사용됩니다.
input 미세한 테두리와 명확한 포커스 상태를 가진 깔끔한 둥근 입력 필드.
hero 3D 스타일 그래픽과 밝은 블루 그라데이션 배경을 특징으로 하는 전폭 히어로 섹션.

보이스와 금지 목록

톤 도움이 되는 멘토처럼 친근하고 접근 가능하며 격려하는 어조.
헤드라인 명확하고 직접적이며 이점을 강조하는 스타일로, 종종 'An Interactive Guide to...' 또는 'A Friendly Introduction to...'와 같은 형식을 사용합니다.
CTA 콘텐츠 흐름에 자연스럽게 녹아드는 미세한 텍스트 기반 행동 유도.

본문 영역에 어두운 배경을 사용하지 마세요 — 스크린샷은 밝고 밝은 배경 미학을 보여줍니다.
순수 단색 또는 그레이스케일 팔레트를 사용하지 마세요 — 디자인은 밝은 스카이 블루와 마젠타 악센트에 의존합니다.
본문 텍스트에 전통적인 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 기하학적 산세리프와 모노스페이스만 독점적으로 사용합니다.
UI 컴포넌트에 날카롭고 검은색 테두리를 사용하지 마세요 — 테두리는 미세하고 밝으며, 종종 투명하거나 회색입니다.
좁은 여백으로 레이아웃을 혼잡하게 채우지 마세요 — 디자인은 넉넉한 여백과 명확한 섹션 구분을 사용합니다.
버튼이나 카드에 날카로운 90도 모서리를 사용하지 마세요 — 스크린샷은 일관된 둥근 모서리(4-12px) 사용을 보여줍니다.
피하기: 밀도 높고 이해하기 어려운 전문 용어.
피하기: 비인간적이고 기업적인 말투.
피하기: 지나치게 극적이거나 자극적인 언어.
피하기: 지루하고 교과서 같은 문체.

팩 안의 실제 스크린샷

Josh Comeau — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

이 사이트는 친근한 교육용 웹 개발자 포트폴리오 및 블로그입니다. 미학은 밝고 통통하며, 히어로 섹션에는 시그니처 스카이 블루(#B1DFF6)를, 강조에는 강렬한 마젠타 악센트(#E60067)를 사용합니다. 타이포그래피는 깔끔하고 기하학적이며, 가독성과 명확한 계층에 초점을 맞춥니다. 레이아웃은 넓은 여백을 사용하며, 미세한 테두리로 섹션을 구분합니다. 주요 지침으로는 다크 모드를 주요 테마로 사용하지 않기, 본문에 세리프 폰트를 사용하지 않기, 좁고 대비가 낮은 레이아웃을 만들지 않기 등이 있습니다. 전체적인 느낌은 환영하고 격려적이며, 복잡한 기술 주제를 쉽게 접근할 수 있게 만듭니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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