웹사이트 개발 규칙
성능
- 이미지는 느린 사이트의 주요 원인 — WebP/AVIF 사용, 스크롤 아래 이미지 지연 로딩, 레이아웃 시프트 방지를 위해 명시적 width/height 설정
- 렌더링 차단 CSS는 첫 번째 페인트를 지연시킴 —
<head>에 중요 CSS 인라인, 나머지는 지연 로딩 - 서드파티 스크립트(분석, 채팅 위젯)는 종종 500ms 이상 추가 —
async또는defer로 로드, 정기적으로 감사 - 폰트는 투명 텍스트 깜빡임(FOIT) 유발 —
font-display: swap사용 및 중요 폰트 사전 로드 - 시크릿 모드로 Lighthouse 측정 — 확장 프로그램이 결과를 왜곡함
모바일 우선
- CSS는 모바일 스타일로 시작하고
min-width미디어 쿼리로 복잡성 추가 — 확장하는 것이 축소보다 쉬움 - 터치 대상은 최소 44x44px 필요 — 손가락은 부정확하며 작은 버튼은 사용자를 불편하게 함
- 브라우저 DevTools 뿐만 아니라 실제 기기에서 테스트 — 시뮬레이션은 실제 지연을 놓침
- 가로 스크롤은 심각한 버그 — 모든 페이지를 최소 320px 너비에서 테스트
viewport메타 태그 필수:<meta name="viewport" content="width=device-width, initial-scale=1">
접근성
- 모든
<img>에는alt텍스트 필요 — 장식용 이미지는 빈alt="", 의미 있는 이미지는 설명 텍스트 - 본문 텍스트의 색상 대비 비율 최소 4.5:1 — WebAIM 대비 검사기 사용
- 폼 입력에는 연결된
<label>요소가 있어야 함 — 플레이스홀더만으로는 접근 불가 - 키보드 내비게이션이 작동해야 함 — Tab 키로 모든 대화형 요소 테스트
- 스크린 리더는 제목 계층을 알려줌 — H1-H6을 논리적 순서로 사용, 수준 건너뛰지 말 것
HTML 구조
- 페이지당
<h1>은 하나만 — 페이지 제목이며 스타일링 도구가 아님 - 시맨틱 요소 사용:
<nav>,<main>,<article>,<aside>,<footer>— 브라우저와 보조 기술에 구조 전달 <button>은 액션,<a>는 내비게이션 — 클릭 핸들러가 있는 div 사용 금지- 외부 링크에는
rel="noopener"—target="_blank"로 인한 보안 취약점 방지 - HTML 유효성 검사 — 깨진 마크업은 브라우저 간 예측 불가능한 렌더링 유발
CSS 패턴
!important사용 금지 — 캐스케이드를 깨고 디버깅을 어렵게 만듦. 대신 명시도 수정- 텍스트에는 고정
px대신 상대 단위(rem,em,%) 사용 — 사용자 글꼴 크기 기본 설정 존중 - CSS 사용자 정의 속성(변수)은 반복을 줄임 — 색상과 간격을 한 번 정의, 모든 곳에서 사용
- 1D 레이아웃은 Flexbox, 2D는 Grid — 하나가 다른 일을 하도록 강요하지 말 것
- CSS 로딩 없이 테스트 — 콘텐츠가 일반 HTML로도 읽을 수 있어야 함
흔한 실수
- 파비콘 누락 시 서버 로그에 404 스팸 발생 — 항상 포함, 간단한 PNG라도
<html lang="en">설정 안 하면 스크린 리더 발음 깨짐- 하드코딩된
http://링크는 HTTPS 사이트에서 깨짐 — 프로토콜 상대//또는 항상https://사용 - JavaScript가 사용 가능하다고 가정하지 말 것 — 핵심 콘텐츠는 JS 없이도 작동해야 함(점진적 향상)
- 인쇄 스타일 잊지 말기 — 사용자가 인쇄할 수 있는 페이지(영수증, 기사)에는
@media print추가
출시 전
- 모든 폼이 실제로 제출되는지 테스트 — 깨진 문의 폼은 조용히 잠재 고객을 잃게 함
- 404 페이지가 존재하고 유용한지 확인 — 기본 서버 404는 전문적이지 않아 보임
- Open Graph 태그로 소셜 공유 미리보기 확인 — Facebook/Twitter 디버거에서 테스트
- Google Search Console에 사이트맵 제출 — 인덱싱 속도 향상
- 가동 시간 모니터링 설정 — 사용자가 알리기 전에 사이트 다운을 알아차림