처음 화면은 둥근 카드와 흐린 그림자가 많은 평범한 블로그였습니다. 읽는 데 문제는 없었지만, 제가 만든 공간이라는 느낌도 약했습니다. 내용은 그대로 두고 겉모습만 오래된 게임 화면처럼 바꿔보기로 했습니다.
각진 모서리와 짧은 움직임
카드와 버튼의 둥근 모서리를 걷어내고, 그림자도 흐리지 않게 바꿨습니다. 모서리를 조금 잘라내니 단순한 사각형보다 픽셀 화면에 가까운 인상이 났습니다.
움직임도 부드럽게 흘러가기보다 짧게 끊어지도록 맞췄습니다. 효과를 많이 넣으면 글보다 장식이 먼저 보여서, 마우스를 올리거나 화면이 바뀔 때만 살짝 드러나게 했습니다.
픽셀처럼 보이게 만든 규칙
이미지로 된 테마를 씌운 것이 아니라 기존 HTML과 CSS의 규칙을 바꿨습니다. 카드와 버튼에는 2px 실선 테두리와 흐리지 않은 오프셋 그림자를 공통으로 사용했습니다. 마우스로 누를 때 요소를 그림자 방향으로 2px 옮기면, 실제 버튼이 아래로 눌리는 것처럼 보입니다.
색상은 페이지마다 직접 쓰지 않고 배경·표면·테두리·강조색 변수로 나눴습니다.
그래서 밝은 테마와 어두운 테마가 같은 구조를 유지하고, 강조색 하나를 바꿔도
버튼·링크·진행 표시가 함께 바뀝니다. 장식용 아이콘과 캐릭터는 작은 격자의 SVG로
그리고 shape-rendering을 또렷한 모서리에 맞춰 확대할 때 경계가 흐려지지 않게
했습니다.
글 전체를 다시 그리지 않고도 분위기를 통일할 수 있었던 핵심은 몇 가지 규칙을 공통 클래스에 모은 것이었습니다. 실제 스타일을 단순화하면 다음과 같습니다.
.card {
border: 2px solid var(--border-strong);
clip-path: var(--notch);
filter: drop-shadow(4px 4px 0 var(--shadow));
}
.button:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--shadow);
}border-radius 대신 모서리를 계단처럼 자르는 clip-path를 쓰고, 흐림값이 없는
그림자를 조금 떨어뜨렸습니다. 눌렀을 때 요소를 그림자 쪽으로 옮기면 그림자가
짧아지면서 실제 키처럼 보입니다. 개별 페이지가 이 값을 직접 복사하지 않으므로
테마를 고칠 때도 공통 규칙 한곳만 확인하면 됩니다.
하단의 작은 마스코트
페이지 아래에는 작은 캐릭터가 천천히 돌아다닙니다. 특별한 기능은 없지만 화면의 빈 곳을 채워주고, 블로그 분위기를 가장 쉽게 설명해주는 요소가 됐습니다.
처음에는 동작을 많이 넣었는데 오래 보고 있으면 산만했습니다. 지금은 걷는 모습과 가끔 보이는 반응 정도만 남겨두었습니다.
캐릭터의 이동, 바라보는 방향, 위아래로 뛰는 동작은 서로 다른 요소에 나눠
적용했습니다. 한 요소의 transform에 모든 효과를 겹치면 방향을 바꾸는 순간
점프가 사라지기 쉬웠기 때문입니다. 반복 동작은 steps()로 끊어, 부드러운 벡터
애니메이션보다 몇 장의 도트 스프라이트가 바뀌는 느낌에 가깝게 만들었습니다.
읽는 데 방해되지 않게
픽셀 스타일은 조금만 과해도 글을 읽기 불편해집니다. 작은 화면에서도 글자가 먼저 보이는지 확인하면서 배경 효과를 줄였습니다. 움직임을 줄이는 환경 설정도 따르도록 해두었습니다.
크게 바꾼 것 같지만 색과 글 구조는 이전과 거의 같습니다. 표면의 질감만 바꿔도 사이트의 인상이 꽤 달라진다는 점이 재미있었습니다.
모바일에서는 그림이 큰 카드형 목록을 짧은 가로 카드로 바꿔 제목과 설명이 먼저 보이게 했습니다. 긴 표와 코드만 자기 컨테이너 안에서 가로로 움직이고 문서 전체는 옆으로 밀리지 않게 제한했습니다. 운영체제에서 동작 줄이기를 켠 경우에는 별, 마스코트와 타이핑 커서의 반복 애니메이션도 멈춥니다.
픽셀 폰트의 진짜 비용 — 그리고 18배 줄인 방법
도트 느낌을 내는 데 가장 큰 값을 치르는 건 색이나 모서리가 아니라 한글 폰트 파일입니다.
한글은 조합 가능한 글자가 1만 자를 넘습니다. 그래서 한글 폰트 하나가 수백 킬로바이트입니다. 이 사이트가 쓰는 갈무리 폰트도 그랬습니다.
| 원본 | 서브셋 후 | |
|---|---|---|
| Galmuri11 | 492.9 KB | 27.5 KB |
| Galmuri14 | 551.7 KB | 30.5 KB |
94% 넘게 줄었습니다. 18분의 1 수준입니다.
어떻게 이렇게 줄었나
방법은 단순합니다. 이 사이트에 실제로 나오는 글자만 남기고 나머지를 버리는 것입니다. 이걸 서브셋(subset)이라고 합니다.
사이트에 쓰인 글자를 모두 모아 목록으로 만들고, pyftsubset으로 그 글자에
해당하는 것만 잘라내 woff2로 다시 씁니다. 안 쓰는 1만 자를 방문자에게
내려보낼 이유가 없으니까요.
네 가지 굵기를 다 합쳐도 105.5 KB입니다. 원본 두 개만으로도 1MB가 넘던 걸 생각하면 큰 차이입니다.
대신 감수한 것
공짜는 아닙니다. 목록에 없던 글자는 픽셀 폰트로 안 나옵니다. 새 글을 쓰면서 처음 쓰는 글자가 등장하면, 그 글자만 시스템 기본 글꼴로 떨어집니다.
그래서 이 사이트는 글이 추가될 때마다 서브셋을 다시 만듭니다. 자동화해 두지 않으면 반드시 잊어버리는 종류의 일이라, 빌드 과정에 넣어 두는 편이 안전합니다.
도트 테마에서 "폰트를 픽셀 폰트로 바꿨다"는 한 줄이 실제로는 이만큼의 결정을 포함하고 있습니다. 화면에서 보이는 건 각진 글자 하나지만, 그 뒤에는 무엇을 버릴지 정하는 작업이 있습니다.
바꾼 뒤 확인한 기준
스타일 작업은 예쁜 화면 한 장으로 끝내지 않고 다음 조건을 함께 확인했습니다.
- 밝은 테마와 어두운 테마에서 본문·링크·버튼의 구분이 유지되는가
- 390px 화면에서 페이지 전체가 옆으로 밀리지 않는가
- 키보드 포커스가 장식에 묻히지 않고 보이는가
- 동작 줄이기 설정에서 반복 애니메이션이 멈추는가
- 카드 모양이 바뀌어도 제목·목차·링크의 HTML 의미는 그대로인가
픽셀 효과는 읽기 구조를 대신하지 않습니다. 장식을 모두 끈 상태에서도 글의 순서와 이동 경로가 남아 있어야 하고, 애니메이션은 내용을 이해하는 데 꼭 필요한 경우가 아니라면 멈출 수 있어야 합니다.
결국 목표는 “픽셀 효과를 많이 쓰기”가 아니었습니다. 본문 구조와 링크의 의미는 그대로 두고, 글을 읽는 데 쓰이지 않는 표면만 이 블로그의 성격에 맞게 바꾸는 것이었습니다.
픽셀 그림은 확대 방식이 절반입니다
작은 그림을 크게 보여줄 때 브라우저는 기본적으로 중간 색을 만들어 부드럽게 이어 줍니다. 사진에서는 그게 맞지만 픽셀 그림에서는 정반대입니다. 격자가 뭉개지면서 흐릿한 그림이 되어 버립니다.
그래서 이 사이트의 픽셀 요소는 확대할 때 색을 섞지 않도록 지정해 두었습니다. 같은 이미지라도 이 설정 하나로 결과가 완전히 달라집니다. 원본이 아무리 또렷해도 확대 방식이 틀리면 픽셀 그림처럼 보이지 않습니다.
배율도 그냥 늘리면 안 됩니다. 정수 배가 아닌 배율로 키우면 어떤 칸은 3 픽셀, 옆 칸은 4 픽셀이 되어 격자가 고르지 않게 보입니다. 화면 밀도가 다른 기기에서 같은 그림이 유독 지저분해 보이는 경우가 대개 이것 때문입니다.
정리하면 픽셀 그림을 화면에 제대로 올리는 데 필요한 것은 세 가지입니다. 색을 섞지 않는 확대, 정수 배율, 그리고 원본 격자 크기를 그대로 유지하는 것. 셋 중 하나만 어긋나도 공들여 그린 도트가 화면에서 무너집니다.