카드가 넷이 되니 어느 게임이 어느 갈래인지 안 보였다 — 허브를 시리즈로 쌓고 노트를 게임별로 나눈 이야기
넷째 게임을 올리던 주에 카드 넷이 한 그리드에 늘어서니, 연산용사 둘과 우주 둘이 그냥 섞여 보였습니다. 게임 목록을 시리즈별로 쌓고 카드를 466px에서 359px로 줄인 과정, 그러다 찾은 조용한 여백 하나, 그리고 노트 열여덟 편을 게임별 탭으로 나누면서 「전체」 탭을 일부러 뺀 이유를 적었습니다.
이 사이트는 게임 하나로 시작했습니다. 지금은 넷입니다. 그런데 넷째 카드를 놓을 자리를 보다가, 늘어나는 것이 카드만이 아니라는 것을 알았습니다. 같은 그리드에 카드가 넷이 서면 그 넷이 서로 무슨 사이인지는 아무 데도 안 적혀 있습니다. 연산용사 X 가 둘(던전 킹덤 · 디펜스 킹덤)이고 우주 게임이 둘인데, 화면에서는 그냥 네 장이었습니다.
아홉 장을 한 그리드에 놓을 수는 없다
계획은 연산용사 · 난중일기 · 우주 세 갈래에 각각 셋입니다. 다 채우면 카드가 아홉 장입니다. 아홉 장을 한 줄씩 늘어놓고 위에 「게임」이라고 한 번 적어 두면, 그 이름표는 아무것도 설명하지 않습니다.
그래서 목록을 시리즈 구역으로 쌓았습니다. 순서와 이름과 한 줄 소개는 파일 하나에 모여 있고, 게임은 자기가 설 칸의 이름만 한 줄 적습니다. 카드를 옮기는 일이 아니라 이름을 적는 일이 됩니다.
빈 구역은 그리지 않는다
난중일기 시리즈는 이미 그 파일에 적혀 있습니다. 그런데 화면에는 없습니다. 게임이 하나도 없는 구역은 그리지 않기 때문입니다. 빈 칸은 「공사 중」으로 읽히고, 공사 중인 사이트는 돌아올 이유가 되지 않습니다. 그 시리즈의 첫 게임이 들어오는 날, 구역은 저절로 생깁니다.
덜 찬 구역 끝에는 처음에 「다음 게임 준비 중」 칸을 한 장 세웠습니다. 숫자는 안 적었습니다 — 「셋 중 둘」이라고 써 두면 계획을 줄이거나 늘리는 날 그 줄만 옛말이 됩니다. 그런데 그 칸도 눌러서 들어갈 곳이 없기는 빈 구역과 마찬가지였습니다. 10월 16일에 뺐습니다. 지금은 덜 찬 구역에도 올라온 게임만 섭니다.
반대 방향으로는 더 세게 막아 뒀습니다. 갈래를 안 적은 게임이 하나라도 있으면 나누기가 통째로 꺼집니다(예전처럼 한 그리드). 그 카드만 이름 없는 칸에 떨어뜨리거나 조용히 빼는 쪽이 훨씬 나쁜 사고라서입니다 — 화면에서 안 보이는 고장은 알려 줄 사람이 없습니다. 대신 배포 전 검사가 실패합니다. 게임을 하나 더 올리면 갈래를 적을 때까지 실패하는 것이 맞는 상태입니다.
카드마다 40px씩 붙어 있던 여백
나누면서 제목 층이 한 칸씩 내려갔습니다. 게임 → 시리즈 → 카드로 세 층이 되니 카드 제목이 넷째 층이 된 것입니다. 그런데 브라우저 기본 여백을 지우는 줄이 셋째 층까지만 덮고 있었습니다. 그래서 카드마다 1.33em, 40px짜리 여백이 조용히 붙었습니다.
같은 자리에서 하나 더 나왔습니다. 연산용사 X 카드만 단추가 두 줄로 꺾여서, 그 줄에 선 카드 전체가 같이 늘어나 있었습니다.
| 카드 높이 | |
|---|---|
| 고치기 전 | 466px (단추가 꺾인 줄은 527px) |
| 고친 뒤 | 359px |
⚠ 이것도 조용한 고장이었습니다. 화면으로는 「좀 긴 카드」라서 아무도 이상하다고 느끼지 못합니다. 재 보기 전까지는 디자인이 그런 줄 압니다. 그림을 조금 줄이고 여백을 지우고 단추를 한 줄에 넣으니, 네 장이 한눈에 들어오게 됐습니다. 카드에는 「연산용사 X」가 아니라 전체 제목이 들어갑니다 — 시리즈 안에서는 「던전 킹덤」과 「디펜스 킹덤」을 가르는 뒷말이 제목의 본문입니다.
로딩 화면에서만 스치던 안내
같은 주에 게임 쪽에서도 같은 모양의 일이 있었습니다. 게임 셋은 켜지는 동안 안내 한 장을 띄워 두고 있었습니다. 전투가 어떻게 돌아가고 무엇부터 올리면 되는지를 적은 글인데, 읽을 수 있는 시간은 불러오는 몇 초뿐이고 다시 보려면 게임을 다시 켜야 했습니다. 공들여 쓴 글을 아무도 끝까지 못 읽는 자리에 둔 셈입니다.
그래서 그 글을 노트로 옮겼습니다. 이날 올린 한 장 안내 셋이 그것이었습니다. 주소가 생기니 언제든 다시 열 수 있고, 줄마다 더 자세한 노트로 가는 길이 붙습니다. 로딩 화면은 그만큼 가벼워졌습니다.
10월 16일 덧붙임 — 같은 안내가 게임 소개 페이지의 탭에도 들어 있어서, 세 노트는 소개와 겹치지 않는 공략으로 다시 썼습니다. 주소는 그대로입니다: 어빌리티 99포인트를 어디에 · 스테이지마다 한 판의 값 · 크레딧은 별에서 나온다.
노트 열여덟 편을 게임별로
노트도 카드와 같은 곳에 와 있었습니다. 공개한 글이 열여덟 편이 되니, 한 줄로 늘어선 목록에서는 새로 올린 글이 어느 게임 것인지 제목을 읽어야 알 수 있습니다.
목록을 게임별 탭으로 나눴습니다. 차례는 게임 목록과 같고, 게임을 안 단 글은 맨 끝 「공통」으로 갑니다.
- 연산용사 X 6편 · 스트라이커 2125 6편 · 플래닛 대시 4편 · 디펜스 킹덤 1편 · 공통 1편(이 글이 들어가 둘이 됩니다)
- 껍데기는 게임 상세의 소개 탭과 같은 것을 씁니다. 탭이 두 군데에서 다르게 움직이면 그게 또 갈라집니다.
- 게임 상세에는 그 게임의 최근 다섯 편만 걸고, 「노트 전체 보기」가 그 게임의 탭을 열어 줍니다.
⚠ 「전체」 탭은 일부러 안 뒀습니다. 이 사이트의 탭은 스크립트가 덤으로 하는 일입니다. 스크립트가 막힌 브라우저에서는 탭이 안 생기고 문단이 전부 펼쳐진 채 보입니다 — 접힌 글은 안 읽히는 글이니 그게 맞습니다. 그런데 그때 「전체」 탭이 있으면 같은 글이 두 번 찍힙니다. 탭 하나로 전부 덮을 수 있는 목록도 그냥 목록으로 둡니다. 탭 한 장은 탭이 아니라 이름표입니다.
한 줄로 적으면
이번 주에 고친 셋이 모양이 같았습니다. 나눌 이유가 생기기 전에 나누지 말 것, 나눴으면 빈 칸을 그리지 말 것, 그리고 층을 한 칸 내릴 때는 그 층의 기본값을 누가 지우고 있었는지 볼 것. 셋 다 화면으로는 멀쩡해 보이는 자리라, 못 보고 지나가면 몇 주를 그대로 섭니다.
이 글의 숫자는 모두 이 사이트의 코드와 빌드 결과에서 뽑았습니다. 세 가지는 2026-09-29부터 2026-10-02 사이에 배포됐습니다.
네 게임 소개는 연산용사 X : 던전 킹덤 · 연산용사 X : 디펜스 킹덤 · 스트라이커 2125 · 플래닛 대시 에 있고, 글 전체는 노트 목록에 있습니다.