지면

지면은 레트로 만화 신문이다. 제호와 날짜줄, 단 구성, 상자 콜아웃, 풀쿼트, 판권까지 브로드시트의 문법을 쓰고, 그걸 손으로 그린 만화 선으로 긋고 팀 색으로 인쇄한다. 테두리는 전부 조금씩 비뚤고 돌아간 선이다. 깔끔한 1px는 한 군데도 없다.

리뷰 쪽은 작품마다 지면을 따로 디자인하는데 선수는 안 그런다. 판형은 하나고 팀 색만 바뀐다.

그래서 라이트·다크 토글 자리를 팀 에디션으로 바꿔 썼다. 버튼을 누르면 프레스 바탕과 종이, 상자 표면, 잉크가 한꺼번에 그 팀 색으로 간다. 밝아지고 어두워지는 토글은 없다. 밤낮이 없는 신문이라 그 자리가 비어 있었고, 비는 자리를 하나 더 만드는 대신 거기에 다른 일을 줬다.

기능적인 섹션 제목도 안 뒀다. 신문에는 커리어나 은퇴 후 같은 제목이 안 붙어 있다. 구조는 제호와 날짜줄, 해마다 붙는 작은 라벨, 그리고 상자가 진다.

팀 색은 네 단계로 고른다

팀 색을 고르는 함수는 절대 undefined를 안 낸다. 네 단계를 거친다. 리서치해 둔 팔레트, 그해의 시대 변형, 프랜차이즈 코드 상속, 그리고 시대 중립.

색이 문서화되지 않은 프랜차이즈에게 색을 만들어 주지 않는 게 핵심이었다. 전시대의 빈 선반과 같은 태도다. 모르는 건 모르는 채로 두고 그 자리에 그 시대의 톤을 넣는다.

중립은 세 밴드고 연도가 고른다. 1885년 이전은 빛바랜 갈색, 1885년부터 1919년까지는 데드볼 세피아, 1920년 이후는 로토그라비어의 회청이다.

/**
 * 1920년 이후 — 로토그라비어의 회청. 니그로리그가 통째로 이 밴드에 온다(리서치가 MLB 프랜차이즈
 * 범위라 62개 구단 전부 색이 없다). 데드볼 갈색을 그대로 쓰면 1908년 지면과 1943년 지면이 같은
 * 색으로 서고, 니그로리그 선수가 늘수록 그 어긋남이 쌓인다.
 */

세 번째 밴드는 나중에 붙였다. 색 리서치가 MLB 프랜차이즈 범위라 니그로리그 62개 구단이 전부 폴백으로 온다. 중립이 데드볼 갈색 하나였을 때는 1908년의 와그너 지면과 1943년의 깁슨 지면이 같은 색으로 섰다. 밴드를 가르는 해는 니그로 내셔널리그가 출범해 레코드에 첫 시즌이 생긴 1920년으로 잡았다.

잉크는 검정으로 가지 않는다

신문 잉크는 팀의 주색을 눌러 만든다. 검정으로 안 간다. 빨간 팀은 어두운 빨강으로 인쇄되고 남색 팀은 어두운 남색으로 인쇄된다.

대비는 가장 짙은 종이 톤을 기준으로 맞춘다. 상자와 아게이트 헤더가 그 위에 찍히니, 거기서 AA를 통과하면 지면 어디서든 통과한다. 색 근거가 불확실한 팀은 AA를 만족할 때까지 더 어둡게 누른다.

팀 색은 로고와 유니폼에서 리서치했지만 로고 이미지는 안 쓴다. 지면에 서는 건 팀 이름을 적은 텍스트 배지뿐이고, ∅ 마크가 팀 마크 옆에 서는 일은 없다.

주색 둘에서 여덟 톤이 나온다

리서치가 손으로 적는 건 주색과 보조색, 둘뿐이다. 종이 세 톤과 프레스 바탕, 잉크와 부드러운 잉크, 칩 위 글자색은 거기서 계산한다. 아래가 실제로 배포돼 있는 세 팀이다.

양키스는 주색이 이미 남색이라 잉크가 그대로 선다. 자이언츠는 다르다. 주색 #FD5A1E를 크림 종이에 그대로 얹으면 안 읽혀서, AA를 만족할 때까지 눌러 #8b3110이 됐다. 같은 색을 어둡게 한 값이고 검정으로 간 게 아니다. 그래서 지면이 여전히 주황으로 읽힌다.

홈스테드 그레이스는 세 번째 갈래다. 리서치에 색이 없으니 1920년 이후 시대 톤을 받는다. 종이는 팀색을 머금지 않고 크림 그대로 남고, 잉크만 회청으로 간다. 모르는 색을 지어내지 않은 결과가 지면에서 이렇게 보인다.

토글에 올릴 팀을 고르는 기준

두 가지를 정했다.

하나는 토글이 무언가를 바꿔야 한다는 것이다. 같은 팔레트로 해석되는 두 팀을 올리면 아무 일도 안 하는 버튼이 생긴다. 깁슨의 토글에서 크로퍼드가 빠진 게 그래서다. 니그로리그 62개 구단이 전부 중립 폴백으로 오니 홈스테드 그레이스와 크로퍼드가 한 잉크로 인쇄된다. 출장 비중으로는 올라갈 자격이 있는데 올려도 바뀌는 게 없다.

다른 하나는 비중만으로 나머지를 정할 수 없다는 것이다. 와그너의 루이빌은 비중 0.13으로 토글에서 빠졌고 루스의 보스턴은 0.15로 올라갔다. 숫자는 보스턴이 더 작다. 그런데 보스턴은 루스가 아예 다른 선수였던 시절이다. 우승 세 번을 한 에이스였다. 루이빌은 어린 와그너가 피츠버그에서 하게 될 일을 하고 있는 시절이다. 한 팀이 에디션을 얻는 건 그 팀에서의 커리어가 따로 한 장이 될 때다.

연도 노드는 토글과 무관하게 그 해 실제 소속팀 색을 쓴다. 토글을 뉴욕으로 돌려도 1999년 애리조나 줄은 애리조나 색이다.

자리가 있으면 나란히, 없으면 넘긴다

사진이 서는 자리는 넷이고, 자리마다 컷 하나가 받는 너비가 정해져 있다. 이 너비가 사진 수요의 전제다. 하나를 바꾸면 지면이 요구하는 사진 수가 달라진다.

레이아웃 규칙은 어디서나 하나다. 자리가 있으면 나란히 서고 없으면 옆으로 넘기는 띠가 된다. 브레이크포인트를 새로 추가하지 않고 그리드 자신의 계산으로 정한다. 지금 묶음의 너비를 컷 하나의 최소 너비로 나누면 몇 개가 들어가는지 나오고, 들어갈 수보다 컷이 많으면 넘기는 띠로 바뀐다.

화면 폭을 묻지 않고 들어가는가를 묻는 게 핵심이었다. 같은 768px에서도 사이드바가 있는 묶음과 전폭 묶음은 들어가는 수가 다르다.

자동 재생은 없다. 신문은 자기 페이지를 스스로 안 넘긴다. 자바스크립트 없이도 그리드는 그대로 선다.

장은 소속팀이 바뀌는 해에 연다

발자취는 한 해에 한 칸이지만 장으로 묶여 읽힌다. 유니폼이 바뀌는 해, 또는 선수가 리그 밖에 있는 해에서 새 장이 열린다. 거기서 위 괘선이 두꺼워지고 잉크 눈금이 하나 붙는다.

장은 필드로 안 두고 그 해 소속팀에서 뽑는다. 처음에는 해마다 붙는 라벨로 장을 가르려 했는데 그게 안 됐다. 라벨은 해마다 움직이게 만든 것이다. 한 커리어에서 평균 8.8번 바뀐다. 그걸로 장을 가르면 두꺼운 괘선이 한 해 걸러 한 줄씩 내려온다.

한 팀에서만 뛴 커리어는 장이 하나다. 리베라의 지면이 그렇다. 그게 그 커리어의 정직한 모양이고, 평평한 구간의 리듬은 밀도가 진다.

터진 해에 사진이 없을 때

밀도가 높은 해는 글자가 크게 서고 사진을 네 장까지 걸 수 있다. 그런데 사진이 없는 해도 있다.

그때 큰 글씨만 남고 아무것도 없으면 깨진 것처럼 보인다. 일부러 그런 게 아니고 사고로 읽힌다. 그래서 그 해의 가장 또렷한 수 하나를 큰 숫자로 뽑아 세우고, 터진 해에 긋는 것과 같은 비뚤한 밑줄을 긋는다. 그런 해가 연달아 있으면 뽑는 스탯을 바꾼다. 같은 스탯을 세 해 연달아 크게 세우면 그것도 형식이 된다.

물성은 사진의 종류가 정한다

프레임은 넷이다. 폴라로이드가 기본이고, 인쇄물은 카드, 연속 장면은 필름스트립, 영상은 뉴스릴이다. 와그너의 T206 담배 카드가 카드 프레임을 처음 쓴 자산이다.

Getty 임베드만 폴라로이드를 안 입는다. 그 픽셀은 다른 출처의 문서이고, 크레딧을 가리면 허가가 끝난다. 그래서 얇은 잉크 선과 살짝 기운 각도, 모서리 그림자만 주는 스크랩 물성을 쓴다. 자기 비율 그대로 선다.

아직 아무 컷도 안 입은 프레임이 죽은 코드는 아니다. 카드 프레임은 와그너의 T206이 들어올 때까지 0이었다. 필름스트립은 아직 맞는 자산을 기다린다.

선반 여덟 개의 순서

전시대는 선반 여덟 개다. 읽는 순서로 레거시, 주요 상, 우승, 위업, 수훈, 타이틀, 시즌 클럽, 시대의 상. 마지막에 통산 마일스톤 스탬프가 온다.

순서에 이유가 있다. 우승 선반에는 우승 자체만 올린다. 월드시리즈와 페넌트다. 시리즈 MVP는 주요 상으로 보냈다. 반지는 팀이 따고 MVP는 사람이 따는데, 한 선반에 섞으면 우승 셋이 반지 하나와 MVP 둘을 뜻할 수 있다. 위업이 우승 다음인 건 둘 다 특정한 날에 일어난 일이라서다. 시즌 클럽이 타이틀 다음인 건 둘 다 시즌 단위의 수라 함께 읽히기 때문이다.

아무것도 없는 선반은 안 그린다. 데드볼 지면과 현대 지면이 서로 다른 수의 선반을 보여 주는 게 정상이다.

박스스코어를 전시대보다 먼저 그린다

의외의 의존이 하나 있었다. 박스스코어가 전시대보다 먼저 렌더돼야 한다.

전시대를 먼저 두면 그게 플로트 아래로 즉시 내려가면서 흐름에 아무것도 안 남긴다. 그러면 짧은 리드 옆에 긴 사이드바가 섰을 때 그 옆을 채울 게 없어지고 죽은 여백이 생긴다. 뒤에 오는 박스스코어가 그걸 못 되돌린다. 스타일 취향이 아니고 정확성이 걸린 의존이라 주석으로 적어 뒀다.

폭마다 실제로 재 본다

문서에 어느 폭에서도 가로로 안 샌다고 적어 두고 아무도 안 재면 그 줄은 약속이 아니고 희망이다. 컷 상한과 넘기는 띠와 긴 이름은 전부 폭에 따라 달라져서 눈으로는 못 지킨다.

재는 스크립트를 뒀다. 헤드리스 크롬으로 전 선수를 320·390·430·768·960·1280에서 열고, 지면 안에서 셋을 잰다. 문서가 뷰포트보다 넓지 않은가. 컷이 자기 묶음 밖으로 안 나가는가. 좁은 폭에서 별명과 에디션 토글이 한 줄에 남는가.

안 재는 것도 정해 뒀다. scrollWidth는 안 쓴다. 장식으로 붙인 테이프와 핀까지 세기 때문에 승인된 지면에서도 묶음마다 9에서 15px씩 잡힌다. 표제도 따로 안 잰다. 긴 이름은 어느 폭에서나 제 블록보다 조금 넓고, 그게 잘리는 게 설계다.

CLS는 0으로 뒀다. 자체 호스팅 사진은 velite가 빌드할 때 이미지 헤더에서 원본 치수를 읽어 싣는다. JPEG의 프레임 헤더와 PNG의 IHDR만 읽으면 되니 의존성 없이 직접 파싱한다. Getty 임베드는 oEmbed가 주는 비율로 자리를 예약한다. 사진이 뜨기 전에 상자가 먼저 서 있다.

비뚤한 선과 반점은 장식이다. 본문은 깨끗한 명조로 완전한 대비에 서고, 로딩과 호버 동작은 동작 줄이기 설정을 따른다.