블로그 디자인 시스템 만들기 — 팔레트, 타이포그래피, 모션

방향을 정할 때 놓고 고민한 것

디자인 톤을 정할 때 세 가지를 놓고 고민했다.

1. 어두운 단색 — 검정에 가까운 배경, 고대비. Vercel이나 Linear 같은 느낌.
2. 밝은 단색 — 흰 배경에 경계선으로 구분. 읽기 전용 매체 쪽 문법.
3. 밝은 배경 + 강조색 하나 — 흰 배경에 파랑 포인트.

개발 블로그니까 1번이 어울릴 것 같았는데, 결국 3번으로 갔다. 이유는 하나였다. 이 사이트는 내가 들여다보는 작업 공간이 아니라 처음 온 사람이 몇 분 읽고 나가는 곳이다. 어두운 화면은 오래 보는 사람에게 편하고, 밝은 화면은 처음 보는 사람에게 읽힌다.

컬러 팔레트

최소한의 색상만 정의했다. 아홉 개다.

배경             #ffffff   — 페이지 배경
카드 배경        #ffffff   — 카드도 같은 흰색
보더             #e5e7eb   — 카드와 페이지를 가르는 유일한 수단
텍스트 primary   #23272f   — 본문, 제목. 순흑 대신 푸른 기가 도는 진회색
텍스트 secondary #4b5563   — 설명, 목록 본문
텍스트 muted     #9ca3af   — 날짜, 부가 정보
태그 배경        #f3f4f6   — 태그 칩
강조             #2563eb   — 링크, 버튼
강조 배경        #eff6ff   — 강조색의 옅은 면

밝은 테마에서 배운 게 하나 있다. 배경을 여러 단계로 나눌 수 없다. 흰색 위에 더 밝은 색이 없으니 카드를 띄우려면 회색을 깔아야 하는데, 그러면 화면이 탁해진다. 그래서 배경은 흰색 하나로 두고 경계선과 그림자로 층을 만들었다. 어두운 테마와 정확히 반대되는 지점이다.

순수한 #000000 대신 #23272f를 쓴 이유도 같은 맥락이다. 흰 배경에 순흑을 올리면 대비가 지나치게 강해서 딱딱해 보인다.

한 가지 실토하면, muted 색(#9ca3af)은 흰 배경에서 대비가 2.5:1밖에 안 나온다. 본문에는 안 쓰고 날짜 같은 데만 쓰지만 기준 미달인 건 맞다. 단일 테마 디자인 글에서 계산 과정을 적어뒀다.

타이포그래피

폰트를 두 벌 쓴다.

• 본문: Pretendard 400~500
• 제목: Outfit — 한글이 섞이면 Pretendard로 넘어간다
• 라벨: 11px, uppercase, letter-spacing 넓게

제목용 폰트를 따로 둔 게 생각보다 크게 바뀌었다. 한글 본문과 영문 제목의 인상이 갈리면서 화면에 리듬이 생긴다. 한 벌로 통일하면 깔끔하긴 한데 밋밋하다.

라벨에 uppercase와 넓은 자간을 쓴 건 «RECENT POSTS» 같은 섹션 머리를 본문과 확실히 구분하기 위해서다. 크기를 키우는 대신 성격을 다르게 하는 쪽이 조용하다.

제목에는 text-wrap: balance를 걸었다. 두 줄 제목의 아랫줄에 한 단어만 남는 걸 막아준다.

컴포넌트 규칙

일관성을 위해 정한 규칙들이다.

• 카드: border 1px, border-radius 16px, padding 20px, 넓게 퍼지는 그림자
• 태그 pill: 배경 #f3f4f6, font-size 10px, 완전한 둥근 모서리
• 호버: 그림자가 조금 더 퍼지고 카드가 1% 커진다
• 클릭: 2% 작아진다

모서리를 8px가 아니라 16px로 잡은 게 인상을 꽤 바꿨다. 각진 카드는 정보 밀도가 높아 보이고, 둥근 카드는 눌러도 되는 물건처럼 보인다. 글 목록은 후자가 맞았다.

모션

여기가 처음 계획과 제일 많이 달라진 부분이다.

원래는 모션을 넣지 않을 생각이었다. 색 전환만 있고 나머지는 정지. 미니멀의 핵심은 빼는 것이라고 적어뒀었다.

지금은 이렇게 돼 있다.

.spring-transition {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
 
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(1.5rem); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);      filter: blur(0); }
}

목록에 들어가는 항목들은 80ms씩 시차를 두고 하나씩 올라온다. 카드에는 넓게 퍼지는 그림자가 있고, 호버하면 조금 더 퍼진다. 화면 전체에는 아주 옅은 노이즈 텍스처가 깔려 있다.

빼기로 했던 걸 다 넣은 셈인데, 이유가 있었다. 밝은 배경에 흑백만 남기면 «미니멀»이 아니라 «미완성»으로 보인다. 어두운 배경은 그 자체로 인상이 강해서 아무것도 안 해도 되지만, 흰 배경은 비어 있으면 그냥 빈 것이다.

그래서 기준을 바꿨다. 없어도 되는 걸 빼는 게 아니라, 눈치채지 못할 만큼만 넣는다. 위의 이징 곡선도 튀지 않게 하려고 고른 것이고, 노이즈 텍스처의 불투명도는 0.025다. 있는지 모르고 보는 게 맞다.

레이아웃

max-width: 768px 단일 컬럼. 사이드바 없이 본문에 집중하는 구조다. 상단 네비게이션은 고정이고 왼쪽에 로고, 오른쪽에 페이지 링크가 붙는다.

글을 읽을 때 시선이 좌우로 오가지 않도록 좁은 폭을 유지했다. 읽기 전용 매체에서 검증된 폭이다.

예외가 하나 있다. 글 상세 페이지에서는 목차가 본문 왼쪽 바깥에 붙는다. 본문 폭을 건드리지 않으려고 음수 여백으로 밀어냈고, 화면이 좁으면 그냥 사라진다. 읽는 폭을 지키는 게 목차보다 우선이라고 정했기 때문이다.

정리

디자인 시스템을 만들면서 배운 걸 세 줄로 줄이면 이렇다.

밝은 배경은 어두운 배경의 규칙을 뒤집어야 한다. 층을 만드는 방법도, 회색을 고르는 감각도 반대다. 어두운 테마에서 쓰던 값을 그대로 밝게 뒤집으면 대비가 무너진다.

미니멀은 목표가 아니라 수단이다. 빼는 것 자체가 좋아 보여서 뺐다가, 비어 보여서 다시 넣었다. 처음부터 «무엇에 집중시킬 것인가»를 정하고 거기서 역산하는 편이 나았다.

색은 고른 뒤에 계산해 봐야 한다. 눈으로 보고 «잘 보인다»고 판단한 색이 기준 미달인 경우가 실제로 있었다.