01
컬러 팔레트 — Primary · Secondary · Accent
⏱ 12분
3개 색만 정하면 디자인의 80% 끝. Primary는 메인 색, Secondary는 보조 배경, Accent는 버튼·강조. coolors.co 추천.
Primary
주요 · 60%
색 칠하기 또는 색종이
Secondary
보조 · 30%
색 칠하기 또는 색종이
Accent
강조 · 10%
색 칠하기 또는 색종이
💡 팁: 60-30-10 법칙 — 화면의 60%는 Primary, 30%는 Secondary, 10%만 Accent. 너무 균등하면 산만해 보임.
02
타이포그래피 — 3단계 위계
⏱ 10분
폰트는 2종 이하로. 헤드라인용 1개 + 본문용 1개면 충분. Google Fonts 추천: Pretendard / Noto Serif KR / Gothic A1.
| 단계 |
폰트 이름 |
크기 (px) |
두께 (weight) |
사용처 |
H1
헤드라인 |
|
예) 48px |
예) 900 |
히어로 제목 |
H2
섹션 제목 |
|
예) 32px |
예) 700 |
About, Works... |
Body
본문 |
|
예) 16px |
예) 400 |
설명·문장 |
03
컴포넌트 인벤토리 — 5종
⏱ 12분
디자인 시스템 = 한번 만들고 계속 재사용. 5개만 다듬어도 사이트 전체가 통일된다.
04
스크롤 애니메이션 아이디어
⏱ 8분
어떤 요소에 어떤 효과? 너무 많으면 어지러움. 사이트당 2-3개면 충분.
💡 효과 예시:
fade-in / slide-up
zoom-in / parallax
sticky / sticky-reveal
counter / typewriter
05
호버 효과 매트릭스 — 요소 × 효과
⏱ 8분
| 요소 |
호버 시 변화 (색·움직임·그림자 등) |
지속 시간 |
| 버튼 (Button) |
|
|
| 카드 (Card) |
|
|
| 이미지 (Gallery) |
|
|
| 메뉴 (Nav) |
|
|
| 링크 (Text) |
|
|
※ 지속 시간 표준: 150~300ms. 너무 느리면(500ms+) 답답함, 너무 빠르면(100ms-) 안 느껴짐.
이번 주에 나오는 용어들. 처음 듣는 게 정상입니다. 막힐 때 사전처럼 펴서 보세요.
디자인 시스템Design System
색·폰트·컴포넌트의 표준 규칙집. 일관성 ↑.예: 애플의 Human Interface Guidelines.
CSS 변수CSS Variables
색을 한 번 정의하고 어디서나 재사용. var(--primary).예: 색 바꿀 때 1곳만 수정하면 끝.
루트 셀렉터:root
CSS에서 전체 사이트 변수를 박는 최상위 영역.예: :root { --primary: #3D5A80; }
디자인 토큰Design Token
색·폰트 크기·여백을 변수로 박은 단위.예: --space-md: 16px; --font-lg: 24px;
컴포넌트Component
재사용 가능한 UI 조각. 버튼·카드·입력창.예: 레고 블록처럼 조립해 화면 구성.
컬러 팔레트Color Palette
사이트의 색 모음. Primary·Secondary·Accent로 분류.예: 메인 1색 + 보조 2색 + 강조 1색.
타이포그래피Typography
글꼴·크기·자간 시스템. 가독성과 분위기 결정.예: 제목 32px / 본문 16px / 캡션 12px.
폰트 페어링Font Pairing
어울리는 글꼴 2-3개 조합. 보통 제목+본문 2개.예: Noto Serif KR(제목) + Gothic A1(본문).
인터섹션 옵저버Intersection Observer
요소가 화면에 보이면 알려주는 JS API.예: 스크롤 시 등장 애니메이션 발동.
페이드인fade-in
요소가 천천히 나타나는 효과. opacity 0 → 1.예: 스크롤하면 텍스트가 슥 등장.
뷰 트랜지션View Transitions
페이지 전환 시 부드러운 애니메이션 만드는 신기술 API.예: 페이지 이동이 슬라이드처럼.
다크 모드Dark Mode
검정 배경 + 흰 글자. 야간 친화·OLED 절전.예: 유튜브·인스타의 다크 테마.