최소한의 CSS로 괜찮은 사이트 만들기 (2023)

1 day ago 3

많은 개발자가 CSS 설계의 과도함으로 인해 불필요한 문제를 겪음
최소한의 글로벌 스타일만으로도 충분히 깔끔하고 반응형인 페이지 제작 가능함
이미지, SVG, 비디오 요소의 크기 제한과 블록 표시만으로 기본 레이아웃 문제를 해결할 수 있음
system-ui 폰트와 적절한 줄 간격, 최대 문단 폭 제한 설정으로 가독성 향상 가능함
OS의 다크 모드와 같은 선호 환경 반영을 위해 색상 스킴 속성 적용 필요함

과도한 CSS 문제와 접근 방법

많은 사람들이 웹사이트를 만들 때 CSS 설계를 과하게 복잡하게 구성함
최소한의 CSS만으로도 충분히 세련되고 기본에 충실한 반응형 페이지 제작 가능함

기본적인 HTML과 이미지 대응

기본 HTML만 작성해도 사이트는 기본적인 반응형을 제공함
이미지 때문에 레이아웃에 오버플로우 문제가 발생할 수 있으므로 아래의 CSS를 적용함
img { max-width: 100%; display: block; }
SVG, video 요소에서 유사한 문제 발생 시, 아래와 같이 확장 적용 가능함
img, svg, video { max-width: 100%; display: block; }

타이포그래피 개선

브라우저 기본 폰트는 디자인 측면에서 심심함을 주기 쉬움
system-ui를 폰트 패밀리로 사용해 각 플랫폼에 맞는 기본 서체 적용 가능
기본 폰트 크기와 줄 간격이 조금 작은 경향이 있어 아래와 같이 개선 설정 권장함
body { font-family: system-ui; font-size: 1.25rem; line-height: 1.5; }
이 설정만으로도 브라우저 기본값 대비 큰 개선 효과를 볼 수 있음

다크 모드 지원

많은 사용자가 다크 모드를 선호하므로, OS 설정을 따라가는 color-scheme 속성 적용이 유용함
html { color-scheme: light dark; }
이 속성은 유저 에이전트 스타일이 시스템 선호 테마를 자동 반영하도록 설정함
HTML 태그 속성으로도 지정 가능함
<html lang="en" color-scheme="light dark"></html>
시스템 선호값 뿐 아니라 직접 색상 스킴을 선택할 수 있도록 하는 것도 좋은 베스트 프랙티스임

컨텐츠 폭 제한

컨텐츠 문단의 길이는 가독성에 큰 영향을 주는 중요한 요소임
일반적으로 본문은 45~90자 범위로 한 줄에 노출되도록 설정하는 것이 이상적임
아래와 같이 main 요소의 최대 폭을 제한해 문단의 가독성 개선이 가능함
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
min() 함수로 70ch과 100% - 4rem 중 더 작은 값을 선택함
margin-inline: auto로 가로 중앙 정렬이 이루어짐
필요에 따라 main 대신 .container 혹은 .wrapper 클래스를 적용해 사용 가능함

최종 최소 CSS 예시

위의 내용을 종합하면 아래와 같은 최소 CSS 세트로 안정적인 사이트 구축이 가능함
html { color-scheme: light dark; } body { font-family: system-ui; font-size: 1.25rem; line-height: 1.5; } img, svg, video { max-width: 100%; display: block; } main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }

마무리 및 확장성

위 예시는 가벼운 시작점이나 작은 페이지에 즉시 활용 가능함
대부분의 경우, 이 기반 위에 추가적인 스타일을 더해 확장해 사용하는 것이 바람직함

Read Entire Article