▲

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

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

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

과도한 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;
}

마무리 및 확장성

  • 위 예시는 가벼운 시작점이나 작은 페이지에 즉시 활용 가능함
  • 대부분의 경우, 이 기반 위에 추가적인 스타일을 더해 확장해 사용하는 것이 바람직함
▲
GN⁺ 6일전  [-]
Hacker News 의견
  • 오래된 기사이지만, 일부 지역에서는 여전히 유효한 system ui font family 비추천 이유를 정리한 글임
    https://infinnie.github.io/blog/2017/systemui.html
    • 글 내용은 흥미로웠지만, 폰트의 st ligature가 너무 보기 싫어서 그 웹사이트에서 폰트 조언을 받고 싶지 않음
  • 솔직히 잘 이해가 안 됨. 읽기 쉬운 미니멀 웹페이지를 만들고 싶은 건 알겠음. 그럴 때 필요한 방법들은 이미 꽤 잘 알려져 있는 것 아닌지. 이런 걸로 고생하는 타깃 유저가 누군지 궁금함. 왜 이 내용이 HN에서 인기 있는지도 의문임
    • 나임. 나는 주로 백엔드 개발자이고, 사이드 프로젝트로 가끔 프런트엔드도 만드는데 CSS는 거의 모름. 나한테는 이런 방법들이 '잘 알려진' 게 아님. CSS를 몰라서 매번 어려움
    • max-width 하나로 힘들어하는 사람들? 개인 홈페이지 만드는 모든 사람들이 타깃임
font-family: System UI;

이건 잘못임. 정확한 문법은

font-family: system-ui;

글 저자가 일부 예시에는 올바르게 썼지만, 첫 예시에는 틀리게 써서 혼란을 줄 수 있음

  • 폰트 이름이 두 단어라면 쌍따옴표로 감싸야 하는지 궁금함. 예를 들어
font-family: Times New Roman;

이런 식으로. 'times'나 'Times New Roman' 모두 따옴표 없이 잘 동작하는 걸 보면, 오래된 폰트라서 예외 처리된 건지, 아니면 CSS가 이름 매칭을 넉넉하게 하는 건지 의문임

  • https://meyerweb.com/eric/tools/css/reset/
    이거, 그냥 캐쉬 머니라고 부르고 싶음
    • Eric Meyer는 CSS계의 전설임. 2002년에 박스 모델 이해 못했을 때 그의 설명 덕분에 이해함
      https://meyerweb.com/eric/books/
    • 이건 자주 봤는데, 뭔가 내 눈에는 잘 안 맞는 묘한 느낌임. 충분히 심플하지도 않고, 현대적/미니멀하지도 않음. 글씨 자체도 잘 안 읽히는 듯함. 그냥 내 취향일 수도 있음
    • CSS reset 스타일시트는 스타일 오염의 시작점임. Kevin Powell식 접근법(기본 브라우저 스타일 존중)이 더 나음. 크로스 브라우저 테스트는 필요하지만 거의 20년 동안 CSS reset이 기본처럼 따라다니고 그 위에 프레임워크까지 얹으면서 복잡도만 높아짐. 이제는 최신 CSS Grid, 변수 등으로 기존 방식을 벗어나 훨씬 창의적으로 접근할 수 있음. 예전엔 이것저것 꼼수에 치여서 CSS를 싫어했지만, 요즘은 꼭 맞는 레고 조립을 하는 느낌임. CSS reset은, 이제는 반드시 필요한 게 아니라 두려움을 벗어던질 수 있는 보조 도구임. CSS pre-processor도 이제 별로 필요 없음
  • 심플한 학술용 미니멀 웹사이트를 위한 SSG(static site generator) 추천 질문임. Astro나 Hugo가 옵션인데 Astro는 너무 복잡하게 느껴졌고, 직접 html/css를 작성하자니 레이아웃과 커스터마이징에 불편함이 있음. Astro 테마는 개인 블로그용도 별로 없고 대부분 기업용 혹은 화려함. 이런 고민을 하면서 웹사이트 설계가 왜 이렇게 어려워졌는지 새삼 놀라게 됨. 프레임워크, 컴포넌트, 수많은 의존성 덕분에 웹 개발자들은 어떻게 이 흐름을 따라가는지 궁금함
    • Eleventy(https://11ty.dev/) 또는 Zola(https://getzola.org/)를 추천함. 둘 다 비교적 최근에 나온 툴이고, 실력 있는 사용자들이 많음
    • 웹 시스템의 자연스러운 복잡성임. 단순함이 유지될 수 없음. 그래도 라이선스 없이 사용할 수 있는 오픈 표준, 프레임워크에 감사함. 옵션이 너무 많아 선택 장애가 생김
    • 이런 논의 자체가 현대 웹 상황의 창피함을 가림. Facebook 같은 대형 웹서비스 외에 가치 있는 게 거의 없어서 부끄러움
    • 선택지가 더 필요하지 않을 수 있지만, franklin.jl이 수학, 코드 인라인 처리와 깔끔함 면에서 딱 좋았음
  • 이 웹사이트 자체가 글에서 제안하는 것보다 훨씬 많은 CSS를 사용 중임. 대략 300줄 이상임. 그럼에도 기본선 잡기에는 괜찮음
    • 모바일에서 이 사실을 체크해 줘서 고마움. 이 사실로 해당 매체의 신뢰도가 줄어듦. 나중에 직접 확인할 예정임. 그래도 소개한 기법을 잘 적용했길 바람
  • "가독성을 위해 콘텐츠 폭을 제한하자" 라는 제안을 보며, 이건 하지 않았으면 좋겠음. 사용성 연구가 뭐라 하더라도 나는 넓은 폭이 좋음. 브라우저 크기 조절만으로도 콘텐츠 폭을 컨트롤할 수 있음
    • 브라우저 크기를 조절하면 윈도우 전체가 줄어들기 때문에, 오히려 불편함만 커짐. 예를 들어, 왼쪽 끝에 붙어 있는 80컬럼 텍스트를 중앙으로 옮기려면 브라우저 크기를 계속 바꿔야 해서 굉장히 번거로움. 너무 불편해서 가끔 직접 사이트 스타일시트를 덮어씌우는 경우도 있음. 그냥 평문 텍스트 보는 게 나을 것 같을 때도 있음. 또는 reader mode로 전환해서 읽음
    • 거의 모든 지인(테크든 아니든)이 항상 수많은 탭을 열어두고 씀. 각 탭이 모두 텍스트 한 줄로만 이루어질 확률은 0%임. 창 크기 매번 조정하는 것보다 도트 매트릭스 프린터로 뽑아 읽는 게 더 나을 듯한 기분임. 약간 과장해서 말함
    • 산문형 콘텐츠는 폭 제한된 쪽이 선호됨. 넓은 화면에서 끝까지 눈을 움직여서 읽는 게 힘듦
    • 이 코멘트가 가장 추천을 많이 받은 걸 보면, HN에서의 조언을 너무 심각하게 받아들일 필요는 없음을 보여줌
    • 콘텐츠 폭 제한 자체는 괜찮음. 하지만 content-width, 큰 폰트, 라인 하이트를 남용하는 건 불만임. 요즘 많은 사이트들이 너무 큰 폰트, 넓은 줄 간격을 사용해서 스크롤이 너무 많아짐. 브라우저의 기본 폰트 사이즈가 시스템에 딱 맞으니 폰트 사이즈는 그대로 두고, 배율 조정에 맡기는 게 좋음
  • 글을 읽지 않아도 답은 명확함. 그 정답은 '0'임
    • 디폴트 스타일은 특히 이미지 대응이 모바일에서 너무 불편함. 글에서 말하듯이 '제법 보기 좋은' 걸 원한다면 기본값으로는 딱히 어렵다고 생각함
    • 브라우저의 기본값은 세리프임
  • CSS reset으로 여전히 어느 정도는 기본 정렬이 필요함. 최근 5년 이내의 브라우저만 타깃이면 간결하게 다듬어진 인기 reset을 써도 충분함
    • 핵심은 스타일 통일이 아니라 읽기 쉬운 기준선임. 여러 플랫폼/브라우저마다 다르게 보여도 읽기 쉽게만 하면 됨. 미적 완벽함이 아니라 기본적인 사용성에 초점을 맞추는 게 더 실용적임
    • reset은 과대평가되고 있음. 개인 블로그처럼 미니멀한 경우라면 플랫폼마다 스타일이 조금 달라도 큰 문제가 아님. 디자이너 본능이 이것을 강박적으로 맞추려는 심리에서 나오는 것임

img { max-width: 100%; }
이 설정은 반드시 height: auto랑 같이 써야 함. 아니면 이미지의 비율이 깨짐
img, svg, video { max-width: 100%; }
Chrome 141에서는 중첩된 SVG 요소의 width/height 문제로 auto 계산이 틀려짐. 임시로
svg:where(:not(svg svg))로 처리해야 함
system-ui 폰트는 단순 sans-serif 대체용이 아님. 시스템 UI 폰트를 콘텐츠 본문에 쓰면 일부 OS/언어 조합에서 거의 읽을 수 없을 정도로 불편할 수 있음. sans-serif가 필요하면 sans-serif를 쓰는 게 맞음
기본 폰트 사이즈는 살짝 작아서 18~20px(1.25rem) 정도가 적당함. 그런데 작은 화면에서는 1rem 이상 안 가는 게 좋음
기본 line-height를 1.5~1.7 추천하지만, 1.7은 작은 화면에서 너무 넓음. 1.4~1.5가 적당하고, 화면 크기에 따라 1.4~1.6까지 조정 가능함
font-family: System UI;
이건 명백한 문법 오류임. 스타일시트 검토하면 금방 알 수 있음
다크/라이트 시스템 테마와 웹 테마를 분리하는 건 좋은 아이디어임. Firefox는 콘텐츠가 시스템 테마를 따르도록 기본 설정되어 있고, 따로 조정도 가능함
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
이건 최소 2rem 정도의 여백을 뜻함(기본 body margin까지 합치면 2rem+8px). 여백이 너무 많고, 적용 위치도 어색함. main에 적용하려면

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

처럼 패딩을 쓰는 게 더 논리적임. 하지만 실제로는 header나 footer에도 같은 쪽 여백이 필요하니, body margin 조정이 더 나음

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

여백을 ~40px에서 16px 수준으로 줄일 수 있음

  • 현실적으로 레이아웃 조정과 미세한 튜닝 대부분은 미디어 쿼리로 해결할 수 있음. 이 경우, 결국 평범하게 잘 작성된 CSS와 비교해도 코드가 별로 늘어나지 않음
답변달기