외모 → index-0 → 디자인 스타일에서 하나 고르시면 됩니다. 색·글자 크기·간격·모서리가 한 벌로 같이 움직이고, 배치와 기능은 그대로입니다. 고르신 색이 있으면 그 색이 이깁니다.
테마를 켜고 나면 대개 색부터 만집니다. 저도 그랬습니다. 링크 색을 바꾸고, 제목이 작아 보여 크기를 올리고, 카드가 각져 보여 모서리를 둥글게 했습니다. 그렇게 여섯 군데를 고치고 나서 화면을 보니 카드만 둥글고 버튼은 각진 채였습니다. 빠뜨린 자리를 찾느라 다시 삼십 분을 썼습니다.
값을 하나씩 고치는 방식의 문제는 실력이 아닙니다. 고칠 자리가 몇 개인지 아무도 모른다는 것이 문제입니다. 그래서 index-0는 그 열몇 가지를 한 줄로 묶어 두었습니다.
고르는 자리는 넷입니다
설정 화면의 드롭다운에는 넷이 들어 있습니다. 기본 하나와 스타일 셋입니다. 셋은 각각 성격이 다른 화면을 겨냥합니다.
| 고르는 것 | 어떤 화면이 되나 | 어울리는 글 |
|---|---|---|
| 기본 | 지금 보시는 화면 | 무엇이든 |
| 매거진 | 카드가 크고 숨이 넓다 | 사진이 있는 글 |
| 문서 | 각지고 조밀하다 | 찾아 읽는 글 |
| 제품 | 단추가 알약이고 그림자가 있다 | 소개하는 글 |
고르시고 [스타일 적용]을 누르면 그 즉시 앞 화면이 바뀝니다. 되돌리시려면 다시 [기본]을 고르시면 됩니다. 글도 페이지도 건드리지 않으니 몇 번을 바꾸셔도 잃는 것이 없습니다.
바뀌는 것과 안 바뀌는 것이 갈려 있습니다
이 자리가 무섭지 않으려면 무엇을 안 건드리는지가 먼저 분명해야 합니다.
| 항목 | 바뀌나 |
|---|---|
| 색 · 글자 크기 · 간격 · 행간 · 모서리 · 그림자 | 바뀝니다 |
| 어떤 블록이 어디에 오는가 | 그대로 |
| 메뉴 · 페이지 · 글 · 분류 | 그대로 |
| 광고 자리 · 연재 · 목차 같은 기능 | 그대로 |
| 설정 화면에서 직접 고르신 색 | 그대로 |
마지막 줄이 중요합니다. 직접 고르신 색이 스타일보다 나중에 실립니다. 메인 색을 자기 브랜드 색으로 정해 두셨다면, 어떤 스타일을 고르셔도 그 색은 그대로 있고 나머지만 바뀝니다. 스타일의 색을 그대로 쓰고 싶으시면 색 칸을 비우시면 됩니다.
한 벌이 몇 줄로 끝나는 이유
스타일 한 벌은 CSS 한 장입니다. 그 안에는 화면의 값이 아니라 배수가 들어 있습니다. 컴포넌트는 자기 값을 그대로 갖고, 배수가 그 위에서 전체를 밉니다.
:root {
--index-0-type-k: 1.04; /* 크기 사다리를 4% 민다 */
--index-0-space-k: 1.25; /* 간격 사다리를 25% 넓힌다 */
--index-0-radius-k: 2; /* 모서리를 두 배로 */
}크기와 간격은 각각 여덟 칸짜리 사다리입니다. 여덟 칸에 같은 수를 곱하니 칸 사이의 비율은 그대로입니다. 그래서 배수를 아무리 바꾸셔도 제목이 본문보다 작아지거나, 큰 여백과 작은 여백이 뒤집히는 일이 없습니다. 값을 하나씩 고칠 때 생기던 사고가 구조적으로 안 나는 자리입니다.
배수의 기본값은 1입니다. 1을 곱하면 아무 일도 안 일어나므로, 스타일을 안 고르신 사이트의 화면은 이 장치가 생기기 전과 픽셀 단위로 같습니다.
내 스타일을 만들려면
테마 폴더의 assets/presets/ 를 여시면 _template.css 가 있습니다. 이 파일을 복사해 이름을 바꾸고, 맨 위 Preset Name: 에 화면에 나올 이름을 적으시면 드롭다운에 그 이름이 나옵니다. 목록은 폴더를 그대로 읽으므로 어디에도 따로 등록하실 필요가 없습니다.
_template.css를 복사하고 이름을 바꿉니다. 예)mybrand.css- 맨 위
Preset Name:에 화면에 나올 이름을 적습니다. - 바꾸고 싶은 값만 남기고 나머지는 지웁니다.
- 설정 화면을 새로 고치면 목록에 나옵니다.
주의하실 곳은 한 군데입니다. 색 하나를 바꾸시면 그 색의 종류도 같이 적어 주세요. 테마는 색마다 종류를 넷까지 갖습니다 — 면에 쓰는 원색, 큰 글자용, 작은 글자용, 옅은 판. 원색만 덮으면 나머지 셋이 기본값으로 남아 한 화면에 색이 둘로 갈립니다. 저도 처음 만든 세 벌이 정확히 그 상태였고, 화면이 탁해 보이는 원인을 한참 못 찾았습니다.
스타일을 바꿔도 성능 점수는 그대로입니다
스타일 한 장은 CSS 파일 하나입니다. 글꼴 파일을 더 받지 않습니다. index-0가 설치 직후 만점을 받는 이유가 글꼴을 한 벌도 안 내려받는 데 있어서, 그 자리를 건드리지 않는 한 점수는 움직이지 않습니다.
반대로 말하면 스타일 파일에 @font-face 를 넣으시는 순간 점수가 내려갑니다. 한글 글꼴은 한 벌만 받아도 200KB 를 넘습니다. 서식 파일에 그 경고를 적어 둔 이유입니다.
이 글에 대하여
index-0 테마의 예시 글입니다. 지우셔도 되고, 고쳐서 쓰셔도 됩니다.
