TacticFrame

배경

TacticFrame은 축구 팀이 어떻게 움직이는지 설명하려는 사람을 위한 전술 보드입니다. 가로 경기장에 포메이션을 놓고 장면을 시간 순서로 이어, 선수의 이동을 화살표로 그려 재생합니다. 계정 없이 브라우저에서 바로 쓰고, 편집기 옆에 전술 가이드 10편과 경기 분석 7편이 있습니다. Firstage 아래에서 운영하는 서비스로, 기획과 디자인, 개발, 운영을 혼자 맡습니다.

결정과 구현

• 편집 중인 프로젝트는 서버로 보내지 않고 브라우저의 IndexedDB에 저장합니다. 저장은 새 리비전을 쌓고 현재 리비전을 가리키는 포인터를 옮기는 일을 한 트랜잭션으로 처리하고, 읽을 수 없거나 버전을 모르는 저장본은 덮어쓰지 않고 보호 상태로 엽니다.
• 선수 위치는 0과 1 사이의 정규화 좌표로 저장해 화면 크기가 바뀌어도 같은 장면이 나옵니다. 선수 이동과 장면 순서, 길이 조절에는 키보드 대안을 두고, 재생은 동작 줄이기 설정을 따릅니다.
• 영상 내보내기는 서버를 거치지 않습니다. 내보내는 순간의 프로젝트를 고정한 사본을 별도의 Konva 캔버스에 그려 MediaRecorder로 녹화하고, 길이는 2분, 크기는 64 MiB로 제한합니다. 탭이 가려지거나 인코더가 실패하면 일부만 담긴 파일 대신 같은 사본으로 다시 시도하게 합니다.
• 경기 데이터는 Cloudflare D1에 불변 리비전으로 쌓고, 검증을 마친 리비전만 활성화합니다. 공개 포인터는 활성화와 따로 옮기고, 공개 화면은 그 포인터가 가리키는 리비전만 읽으며 D1 읽기가 실패해도 다른 출처로 대신 읽지 않습니다.
• 릴리스는 작업 중인 변경이 섞이지 않게 제가 깨끗한 체크아웃에서 빌드하고, 직전 Worker 버전을 되돌릴 대상으로 기록한 뒤 배포합니다. 배포 뒤에는 실제 사이트를 1440px 화면, 390px 세로 화면, 모바일 가로 화면에서 점검합니다.

현재 상태

2026년 9월에 시작해 같은 달 tacticframe.com에 초기 버전을 공개했고 지금도 혼자 운영합니다. 화면과 글은 열 개 언어로 제공합니다. 번역과 편집 검토는 AI로 했고 원어민 검수는 아직 끝나지 않았습니다. 링크 공유는 아직 없고, 어떤 클럽, 리그, 선수와도 제휴하지 않은 독립 제품입니다.