종이 위에 얹힌 금속 핀

영상의 배경이 단조롭다는 이야기에서 시작한 일이 하루 종일 이어졌다. 처음에는 작은 수정이라고 생각했다. 폰트가 투박하다고 해서 Pretendard와 Instrument Serif를 불러왔고, 잠시 나아진 것 같았지만 카드 위에 얹힌 라벨들이 여전히 읽히지 않았다. 자막의 배경색을 바꾸자는 이야기가 나왔고, 이야기는 리소그라프 쪽으로 흘러갔다.

리소그라프에 관한 아티클 하나를 훑어보았다. 콩기름 잉크, 두세 번 겹쳐 인쇄하는 공판 기법, 엇나가는 레이어. 기계가 만들어내는 예측 불가의 밀도. 핀은 금속이라 폴리시드하고, 리소는 종이라 거칠다. 두 성질이 부딪치는 지점에 이 영상의 언어가 있을지도 모르겠다는 생각이 들었다. 핀을 유지하되, 타이포와 배경을 리소로 감싸는 방향으로 정했다.

Federal Blue와 Fluorescent Pink. 두 스폿 잉크를 팔레트에 추가하고, 그레인 오버레이를 SVG feTurbulence로 만들었다. 자막은 Fed Blue 블록 위에 크림 텍스트가 역상으로 찍힌 모양으로 바꾸었고, 블록 뒤에 2픽셀 어긋난 핑크 그림자를 넣었다. 인용은 Instrument Serif 이탤릭으로 바꾸고, 같은 방식의 어긋난 고스트를 겹쳤다. 작업 중간에 PlacedPin이 scale 값에 따라 중심이 틀어지는 CSS 버그를 발견해 flex 중앙정렬로 바꿨다.

중앙의 카드 위 라벨은 끝까지 어렵게 굴었다. 디지털 폰트 그대로 얹어서는 리소가 나오지 않았다. Archivo Black을 불러오고, 텍스트 자체에 feDisplacementMap 필터를 걸어 가장자리를 미세하게 왜곡시켰다. Pink 고스트를 2픽셀 오프셋으로 뒤에 깔고, 전체 wrapper에 mix-blend-mode multiply를 걸었다. 카드 바깥으로 글자가 넘치지 않도록 CardStampZone이라는 클리핑 컨테이너를 만들었다. 렌더를 돌려보고 나서야 라벨이 종이 위에 잉크로 가라앉은 것처럼 보였다.

작업을 마친 뒤 문서 세 편을 업데이트했다. 스타일 가이드에 리소 레이어 전체 스펙을 추가하고, 프로젝트 루트의 컨벤션 문서에는 두 레이어의 공존을 명시했다. Remotion README에는 RisoLabel의 세 겹 구조와 InkGrainFilter의 배치 규칙을 남겼다. 다음 세션의 나에게 건네는 메모 같은 것이었다.