디자인 정하기

디자인은 결정입니다

디자인 감각이 없어도 됩니다. 필요한 건 세 가지 결정이고, 결정만 하면 Claude Code가 적용합니다. 결정을 안 하면 Claude가 "무난한 평균"을 고르는데, 그게 바로 어디서 본 듯한 "AI 홈페이지" 느낌의 정체입니다.

결정 1: 색 세 가지

역할	개수	고르는 법
바탕	1	순백(#ffffff) 대신 아주 연한 크림·회색. 눈이 편합니다
글자	1	순검정 대신 짙은 회색·갈색
강조	1	버튼과 링크에만. 가게 간판, 로고, 대표 메뉴 색에서 따오세요

강조색은 화면의 5% 이하. 여기저기 쓰면 아무것도 강조되지 않습니다. 그라데이션은 쓰지 않습니다.

색을 고르기 어려우면 가게 사진 한 장을 Claude Code에 붙여넣고 물어보세요.

결정 2: 글꼴 하나

한국어 홈페이지라면 Pretendard 또는 Noto Sans KR 중 하나. 무료이고 어디서나 잘 보입니다. 굵기는 본문용(400)과 제목용(700) 두 개만.

손글씨체나 장식체를 제목에 쓰고 싶다면 제목 하나에만, 본문은 위 둘 중 하나로.

결정 3: 간격

초보 홈페이지의 90%는 여백이 부족합니다. 규칙 하나: 지금 여백의 1.5배. 그리고 여백 크기를 8의 배수(8, 16, 24, 32, 48, 64px)로만 씁니다. 이 규칙만으로 화면이 정돈됩니다.

따라하기 1: DESIGN.md

결정을 파일로 남깁니다. 이 파일이 있으면 앞으로 어떤 화면을 추가해도 같은 규칙이 적용됩니다.

미리보기에서 파일이 생겼는지 확인하세요. 이어서 글꼴과 간격 규칙을 덧붙입니다.

따라하기 2: 적용

새로고침. 한 번에 확 달라집니다. 이상한 부분이 있으면 하나씩:

따라하기 3: 폰 화면

홈페이지 방문자의 70% 이상이 폰입니다. PC에서 확인하는 법:

폰 화면에서 흔한 문제와 요청:

문제	요청
가로 스크롤이 생김	"폰에서 가로 스크롤이 생겨. 넘치는 요소를 찾아 고쳐줘"
글자가 너무 작음	"폰에서 본문 글자 최소 16px"
버튼이 작아 누르기 힘듦	"버튼 높이 최소 44px, 폰에서는 가로 꽉 차게"
상단 메뉴가 찌그러짐	"폰에서는 상단 메뉴를 햄버거(≡) 버튼으로 접어줘"

마무리 손질

• 파비콘(브라우저 탭의 작은 아이콘): "강조색 배경에 가게 이름 첫 글자로 파비콘 만들어서 넣어줘"
• 탭 제목: "브라우저 탭 제목을 '[가게 이름] | [한 줄]'로"
• 링크 hover: "링크와 버튼에 마우스를 올리면 살짝 진해지게"

git add .
git commit -m "디자인 규칙 적용, 폰 화면 정리"

오늘의 실습 체크

다음 강의

7강에서 한 장짜리를 여러 페이지로 나눕니다. 메뉴 페이지, 오시는 길 페이지, 문의 페이지.