웹 프로젝트 기초집LESSON 07

색상·타이포그래피: 읽기 쉬운 게임 포트폴리오 디자인 만들기

난이도입문

예상 시간35분

선수지식6강 반응형 웹

7강. 색상·타이포그래피: 읽기 쉬운 게임 포트폴리오 디자인 만들기

1. 이번 강의에서 해결할 문제

게임 느낌을 내기 위해 색과 글꼴을 많이 쓰면 정보 계층이 흐려지고 로딩도 무거워집니다. 제한된 디자인 토큰으로 제목, 본문, 강조와 배경 역할을 정합니다.

2. 학습 목표

3. 핵심 개념

색상 이름을 화면별로 직접 쓰기보다 --color-text, --color-accent처럼 역할로 이름 붙입니다. 시스템 글꼴은 외부 요청이 없고 다양한 기기에서 빠르게 표시됩니다. 색상만으로 상태를 전달하지 않고 텍스트나 아이콘을 함께 씁니다.

4. 단계별 실습

CSS · 파일 경로: css/style.css 상단

game-dev-portfolio/css/style.css
:root {
  --color-bg: #f7f4ed;
  --color-surface: #fffdf8;
  --color-text: #182235;
  --color-muted: #586174;
  --color-accent: #087f73;
  --color-border: #d8d4ca;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
p { max-width: 68ch; color: var(--color-muted); }
h1, h2, h3 { margin-block: 0 0.6em; letter-spacing: -0.025em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.project-card { background: var(--color-surface); border-color: var(--color-border); }

개발자 도구 확인: 색상 값을 클릭해 Contrast ratio를 확인하고 텍스트와 배경 조합에 경고가 없는지 봅니다. Rendering에서 강제 색상 모드가 지원되면 콘텐츠가 사라지지 않는지 확인합니다.

5. 코드가 동작하는 이유

변수 하나를 바꾸면 같은 역할의 모든 요소가 갱신됩니다. ch는 글자 폭을 기준으로 본문 줄 길이를 제한하고 focus-visible은 키보드 사용자가 현재 위치를 찾게 합니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ