시황 카드 74편을 읽는 사이트를 하루 만에 올렸다: 도메인 전환, 카드 캐러셀, 아이폰 사파리 수정

9월 8일부터 헤르메스는 하루 두 번 시황 카드뉴스를 만들고 있었다. 그런데 그걸 볼 수 있는 곳은 텔레그램 대화방과 봇 게시판뿐이었다. 사람이 날짜별로 찾아 읽을 수 있는 곳에 꾸준히 내놓고 싶었다. 손으로 옮기면 며칠 못 가서 끊긴다는 건 이미 알고 있었다. 이 연재는 AC리서치 시황 사이트를 만든 일주일의 기록이다. 근거는 사이트의 인수인계 기록이다.

멈춰 있던 빌더

9월 23일 밤에 다른 에이전트 앱이 프레임워크 없는 작은 정적 사이트 빌더를 만들었다. 시황 세트를 가져와 페이지로 만들고 사이트맵까지 뽑는 빌더였다. 그런데 배포 단계에서 Vercel 로그인을 기다리는 명령에 세 번 걸려 멈췄고, 결국 올라가지 못했다.

9월 24일 새벽 1시에 이어받아 배포했다. Vercel에 새 프로젝트를 만들고, ac-research.asia 도메인을 예전 사이트에서 떼어 새 프로젝트에 붙였다. 예전 프로젝트는 지우지 않았다. 되돌릴 순서도 기록에 같이 적었다.

카드를 넘기고, 뉴스를 골라 읽는다

새벽 3시에는 시황 글의 모양을 정했다. 글 한 편은 카드뉴스 세트 하나다. 맨 위에서 카드를 좌우로 넘기고, 누르면 크게 본다. 그 아래 뉴스별 기사가 이어지고, 옆 목록에서 한 건을 누르면 그 뉴스만 남는다. 뉴스마다 해당 카드가 대표 이미지로 붙고, 뉴스 하나만 따로 공유할 수 있게 주소도 나눴다. 글은 마크다운이 아니라 구조화된 데이터 파일로 넣는다. 카드 목록, 뉴스별 판정, 본문, 하이퍼사이클 코멘트, 관련 종목이 필드로 들어간다.

같은 시간대에 날짜별 보기를 붙였다. 시황이 있는 날마다 글 수가 붙는 달력이 있고, 날짜를 누르면 그날의 오전판과 오후판을 모은 페이지로 간다. 날짜는 모두 한국 시간의 판 날짜로 센다. 첫 칼럼도 이날 새벽에 올렸다. 레오폴드 아셴브레너의 「Situational Awareness」 해설이다.

코드로 그린 영상과 새 옷

새벽 4시에는 홈 첫 화면에 쓸 영상을 만들었다. 질문 하나가 토큰으로 쪼개지고, 전기와 빛을 타고 송전탑과 변전소를 지나 데이터센터의 연산 칩을 돈 뒤 답으로 돌아오는 40초 남짓한 모션그래픽이다. 촬영이나 생성 모델 없이 3D 장면을 코드로 짜서 프레임을 뽑아 만들었다. 단계 자막은 영상에 굽지 않고 페이지가 재생 시간에 맞춰 띄운다. 이어서 사이트 전체를 당시 acbourbaki.com의 디자인을 따라 검은 바탕에 분홍 강조색으로 다시 입혔다.

74편과 100MB

낮 12시에 새 디자인을 정식으로 올리면서 9월 8일부터 쌓인 헤르메스 시황 세트 74개를 한꺼번에 가져왔다. 여기서 첫 제약을 만났다. 카드 원본 이미지가 226MB였는데, Vercel 무료 요금제는 명령줄 배포 한 번에 올릴 수 있는 원본 파일을 100MB로 막는다. 카드를 960픽셀 WebP로 바꿔 72MB로 줄였다. 새 세트마다 1MB쯤 늘어나니 며칠 안에 다시 한도에 닿는다는 경고도 그날 기록에 적었다.

저녁에는 읽는 쪽을 다듬었다. 카드 표지에 “9.24 오후” 같은 판 날짜를 붙이고, 선반에서 날짜가 바뀌는 자리마다 큰 날짜 칸을 끼웠다. 산업 축으로 바꾸기 전의 지역별 세트 68편은 “이전 시황”으로 묶었다. 카드로 만들지 못한 뉴스 가운데 증거가 있는 것만 골라 한 줄 브리핑으로 남겼다.

아이폰에서만 보이는 버그

밤에는 “휴대폰에선 스와이프 안 돼?“라는 질문으로 시작했다. 크게 보기 화면에서 좌우로 밀어도 카드가 넘어가지 않았다. 브라우저가 가로 제스처를 먼저 가져가 버렸기 때문이다. 터치는 따로 처리하게 고쳤다.

그다음 아이폰 시뮬레이터의 사파리에서 직접 시험하자 두 가지가 더 나왔다. 카드 위에서 시작한 세로 스크롤이 손을 떼는 순간 ’누름’으로 처리돼 크게 보기가 열렸다. 크게 보기 중에 밀면 뒤 페이지가 같이 스크롤됐다. 8픽셀 넘게 움직이면 누름이 아니게 하고, 크게 보기 동안에는 뒤 페이지를 고정했다. 마지막으로 내가 실제 아이폰으로 찍어 보낸 화면을 보고, 시황 목록이 휴대폰에서 카드 한 장씩 세로로만 쌓이던 것을 날짜마다 옆으로 넘기는 줄로 바꿨다.

배운 것

하루 만에 올릴 수 있었던 건 내용이 이미 있었기 때문이다. 헤르메스가 2주 넘게 쌓아 둔 세트가 있었고, 사이트는 그걸 읽는 틀만 만들면 됐다. 대신 틀은 실제 기기에서 봐야 했다. 데스크톱과 에뮬레이터에서 멀쩡하던 캐러셀이 아이폰 사파리에서 두 번 틀렸다. 그리고 그날 적어 둔 100MB 경고는 사흘 뒤 현실이 된다.