Show HN: 마법사를 위한 미니멀리스트 CSS, 'magick.css'

 (css.winterveil.net)
7P by GN⁺ | ★ favorite | 댓글 1개
  • magick.css는 단일 파일로 제공되는 거의 classless CSS 프레임워크로, 읽기 쉽고 정보 전달이 잘 되는 “마법사의 노트” 같은 웹 문서 스타일을 지향함
  • 모든 화면 크기에서 동작하며 JavaScript 없이 사용할 수 있어, 정적 문서나 가벼운 HTML 페이지에 바로 적용하기 쉬움
  • CDN, 직접 파일 포함, npm import 방식으로 설치할 수 있고, normalize.css와 함께 쓰는 구성을 안내함
  • 기본 구조는 <main>과 <section> 중심의 읽기 좋은 컬럼이며, <aside>와 sidenote로 본문 옆 보충 설명을 붙일 수 있음
  • HTML 기본 요소 대부분을 스타일링하되, sidenote와 코드 줄 번호처럼 구조가 필요한 기능은 별도 클래스로 제공함

magick.css의 목표와 성격

  • magick.css는 미니멀하고 대부분 classless인 CSS 프레임워크임
  • 단일 파일에 담겨 있으며, CSS 안의 주석으로 선택의 이유를 따라갈 수 있음
  • 시각적으로는 우아하면서도 장난스러운 마법적 분위기를 만들고, 읽기 쉬움과 정보 전달력을 우선함
  • 모든 기기와 화면 크기에서 모양과 기능을 유지하며 JavaScript 없이 동작함
  • LaTeX, 오래된 TTRPG 룰북, concrete.css, Tufte CSS, 브루탈리즘의 “usability as design” 윤리에서 영감을 받음

설치와 사용 방식

  • 가장 빠르게 확인하려면 HTML <head>에 CDN 스타일시트 2개를 추가함
<link rel="stylesheet" href="https://unpkg.com/normalize.css">;
<link rel="stylesheet" href="https://unpkg.com/magick.css">;
  • 저장소에서 magick.css 파일을 내려받아 일반 CSS처럼 포함할 수도 있음
<link rel="stylesheet" href="path/to/magick.css">
  • JavaScript 프로젝트에서는 npm으로 설치한 뒤 import함
npm install normalize.css magick.css

import 'normalize.css'
import 'magick.css'
  • 99% classless 구성이어서 기존 HTML5 문서에도 적용하기 쉽게 만들어짐

읽기 중심 레이아웃

  • 반응형 컬럼을 만들려면 전체 콘텐츠를 <main>으로 감싸고, 긴 글은 <section>으로 나누는 구성을 권장함
  • 일반적인 문서 구조는 <main> 안에 <header>, 여러 <section>, <footer>를 두는 방식임
  • 이 구조를 따르지 않아도 magick.css를 타이포그래피와 스타일된 컴포넌트 용도로만 사용할 수 있음
  • 부가 정보는 <aside> 태그로 표현함
  • 본문 중간에 추가 맥락을 붙이고 싶을 때는 sidenote를 쓰며, 번호는 자동으로 매겨짐

기본 HTML 요소 스타일

  • 타이포그래피는 제목, 문단, 링크, 강조, 밑줄, 작은 글자, 인라인 코드 등을 다룸
  • <h4>보다 낮은 heading은 magick.css가 스타일링하지 않음
    • 낮은 단계의 heading은 계층 구조보다 특수한 용도에 쓰이는 경우가 많다고 봄
    • 필요한 경우 사용자가 직접 스타일링할 수 있음
  • 목록은 콘텐츠를 방해하지 않도록 단순하게 유지함
    • 순서 없는 목록
    • 순서 있는 목록
    • 설명 목록
  • 표는 데이터에 집중할 수 있도록 명확하고 간결한 스타일을 사용함
  • 폼과 입력 요소는 단독으로 쓰거나 form 안에서 사용할 수 있음
    • 텍스트 입력은 용도가 다양하므로 크기나 배치에 강한 의견을 두지 않음
    • 체크박스와 라디오 버튼의 label은 input 뒤에 오는 것을 기대함
    • form은 손글씨 종이 노트 같은 느낌으로 사용자의 주의를 끌도록 스타일링됨

미디어, 코드, 인용문

  • 이미지와 비디오는 단독으로 배치하거나 <figure> 안에 넣어 캡션과 함께 표현할 수 있음
  • 단독 <img>는 공간이 충분할 때 자연 크기로 표시되며, 늘어나거나 왜곡되지 않음
  • <figure>와 <figcaption>을 사용하면 미디어를 더 두드러지게 표시하고 맥락을 추가할 수 있음
  • 코드는 인라인일 때 <code>를 사용하고, 큰 코드 블록은 <pre>가 <code>를 감싸는 구조를 사용함
  • 코드 조각도 figure로 표시할 수 있음
  • 인용문은 <blockquote>를 사용함
    • 출처 표기는 blockquote 안의 <footer>로 추가함
    • 시처럼 서식이 중요한 텍스트는 <pre>로 감쌀 수 있음

별도 클래스로 쓰는 기능

  • 일부 기능은 특별한 class가 필요해 magick.css의 핵심 classless 동작과 분리됨
  • sidenote를 본문에 넣으려면 참조 위치와 sidenote 본문을 함께 추가함
<span class="sidenote-anchor"></span>
<span class="sidenote">Sidenote Content.</span>
  • 모바일 기기에서는 sidenote가 메인 컬럼 안으로 이동함
  • 코드나 pre 블록에 줄 번호를 표시하려면 각 줄 번호를 담은 <span>을 삽입해야 함
  • 줄 번호 삽입은 수작업, JavaScript, 서버 사이드 처리 중 원하는 방식으로 할 수 있음

프로젝트 링크

  • 마음에 들면 GitHub에서 star를 줄 수 있음
  • 다른 작업에 관심이 있으면 Discord에 참여할 수 있음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들
  • 정말 아름다운 디자인 시스템이고, 이를 보여주는 방식도 멋짐
    입력 영역의 손글씨체와 유기적인 세리프가 어우러지는 방식, 균형 잡힌 줄 높이와 굵기까지 세심하게 챙긴 점이 좋음
    관심 있는 사람을 위한 코드: https://github.com/wintermute-cell/magick.css/blob/master/ma...
    커스텀 체크박스와 라디오 버튼도 있었으면 좋겠음. 지금은 그 둘만 몰입을 깨고, 나머지는 정말 훌륭함. 예전부터 생각하던 블로그를 드디어 만들게 해줄지도 모르겠음
  • 원하는 스타일에 글꼴이 얼마나 잘 맞아떨어질 수 있는지 보여주는 좋은 예시임
    너무 잘 어울려서 거의 의식되지 않을 정도임
    • 이 글꼴이 그렇게 좋아 보이진 않음. 정확한 이유는 모르겠지만 읽기 아주 어렵진 않아도, 흔한 다른 글꼴들만큼 편하게 읽히지는 않음
    • 스타일은 맞지만, 읽기가 너무 어렵다고 느낌
  • 간단한 예제에 작은 오타가 있음
    닫는 태그가 main이 아니라 header인 점을 봐야 함
    • 덧붙이자면, CSS를 시연하는 사이트라면 축소되지 않은 CSS를 함께 넣어주면 좋겠음
      빠르게 어떻게 생겼는지 보고 싶었는데, 원본을 보려면 몇 단계를 더 거쳐야 했음. 적어도 처리되지 않은 형태로 바로 가는 클릭 가능한 링크라도 있으면 좋겠음
    • 페이지의 주요 콘텐츠에는 main 태그를 쓰고, 댓글 섹션이나 태그처럼 관련은 있지만 부가적인 콘텐츠에는 별도 태그를 씀
    • 의미론적으로는 HEADER와 FOOTER가 각각 MAIN 태그의 앞과 뒤에 와야 함
  • 이 스타일에 LaTeX 문서 같은 느낌을 섞으면 개인 사이트에서 원하던 분위기와 정확히 맞음
    이상하게도 그런 느낌이 정말 끌림
    거기에 예전 대학 교수들 웹사이트처럼 거의 HTML만 있는 극도로 미니멀한 모습도 멋져 보임
    개인 블로그가 더 인기 있었으면 좋겠음
  • 이런 스타일을 좋아한다면 Tufte CSS도 마음에 들 수 있음: https://edwardtufte.github.io/tufte-css/
    • Tufte가 이미지와 텍스트의 긴밀한 통합을 강조해서 좋음. 일부 TeX 순수주의자들이 인정하지 않으려는 합리적인 스타일 선택이라고 봄
      적어도 내 글에서는 기술 글이든 아니든 이미지와 텍스트가 하나의 연속된 서사를 이룸. 이미지를 재배열하고 다른 곳으로 옮기는 건 문단을 그렇게 하는 것만큼이나 말이 안 됨
  • 스크립트 글꼴을 대문자로 쓰지 않았으면 함. 가독성에는 치명적임
    사실 어떤 것이든 전부 대문자로 쓰지 않는 편이 좋음. 밑줄처럼 타자기 시대에서 온 강조 방식이고, 당시에는 하나의 글꼴만 쓸 수 있었기 때문임
    대문자 글자꼴은 서로 너무 비슷함. 글자 높이의 변화가 없어서 눈이 읽기 더 어려워짐. 대소문자를 섞으면 y, p, j처럼 아래로 내려가는 글자와 b, d, t처럼 위로 올라가는 글자가 있어 변화가 생기고 더 쉽게 파악됨
    강조에는 크기, 굵기, 이탤릭을 쓰는 편이 좋음
    • 맞음, 이건 가독성 규칙을 깨는 셈이라 가능한 것보다 읽기 어려움
      하지만 그 덕분에 독특한 스타일도 생김
      그래도 나는 마음에 드는 것 같음
  • 개성 있는 스타일을 가진 미니멀 CSS 프레임워크가 더 많았으면 좋겠음
    아주 괜찮은 범용 프레임워크는 쉽게 찾을 수 있지만, 뚜렷한 맛이 있는 걸 원하면 훨씬 어려움
  • 원격 글꼴이 차단되면 텍스트가 Comic Sans로 렌더링됨. 보기 좋지 않음
    • Comic Sans 혐오는 이제 좀 한물간 느낌임
      https://www.mcsweeneys.net/articles/im-comic-sans-asshole
    • 웹페이지의 글꼴 선택 자체를 막아두면 내가 선호하는 글꼴로 렌더링되지만, 글꼴 굵기는 줄고 글자 크기와 줄 높이는 약간 커짐
      특히 낮은 굵기가 다크 테마와 맞물리면 텍스트를 읽기가 꽤 불편해짐
    • 지금 설정이 Google Fonts를 막고 있지 않다는 걸 깨닫고 조금 짜증남. 보통 이런 건 /etc/hosts 수준에서 차단함
  • 왜 모든 CSS 프레임워크와 디자인 시스템은 텍스트 입력창을 이렇게 싫어하는 걸까?
    상식적으로 처리하는 대신 Google은 결국 800명을 대상으로 사용자 조사를 해서 “텍스트 입력창은 텍스트 입력창처럼 보여야 한다”는 결론에 도달했음: https://medium.com/google-design/the-evolution-of-material-d...
  • 대부분 클래스가 필요 없는 CSS 프레임워크라는 아이디어가 좋음
    예전에 하나 만들어봤는데 아마 이만큼 좋지는 않을 듯: https://elementcss.neocities.org
    • 고백하자면 Element는 내가 늘 쓰는 클래스 없는 프레임워크임. 만들어줘서 고마움
답변달기