안녕하세요. 가끔씩 사용기에 글 올리는 강걸우입니다.

요즘 Codex를 가지고 이것저것 만들어보는 중인데, 이번에는 조금 무거운 주제로 작은 인터렉티브 웹페이지를 하나 만들어봤습니다. 2024년 12월 3일 비상계엄 사태와 그 전후 과정을 공개된 기사, 영상, 공식 문서, 외신 기사 등을 바탕으로 시간순으로 재구성한 인터랙티브 타임라인입니다.

** 그냥 아무런 광고도 없고 무언가 홍보하는 내용도 전혀 안들어있습니다. 그냥 한국분이 insane-search라는 스킬을 만드셔서 한국 블로그 글에서도 정보를 수집하고 할수 있게 되었길래 그 스킬 가지고 데이터 수집해서 만들 수 있겠다 싶어서 만들어봣습니다.

처음에는 단순히 “그날 무슨 일이 어떤 순서로 벌어졌는지 한 페이지에서 보고 싶다”는 생각이었습니다. 기사나 영상은 많이 있는데, 각각 흩어져 있고, 시간대별로 연결해서 보기는 생각보다 쉽지 않더군요. 그래서 Codex로 자료를 모으고, 타임라인 데이터로 구조화하고, 웹페이지 형태로 만들어보았습니다.

1. 만들게 된 이유

12.3 사태는 워낙 많은 보도와 증언, 공식 절차, 후속 재판과 탄핵 과정이 얽혀 있어서 단순한 기사 한두 개로는 전체 흐름을 파악하기가 어려웠습니다. 특히 어떤 사건은 거의 같은 시간대에 병렬적으로 벌어졌고, 어떤 정보는 공식 문서나 외신으로 확인되는 반면, 어떤 정보는 영상 증언이나 추가 검수가 필요한 상태로 남아 있었습니다. 그래서 이번에는 단순히 “보기 좋은 페이지”를 만드는 것보다, 각 사건에 출처와 검수 상태를 함께 붙이는 방식으로 만들어보고 싶었습니다.

정치적인 목적이라기보다는, 공개된 자료를 가능한 한 시간순으로 정리해보는 실험에 가깝습니다.

2. Codex를 어떻게 썼는지

이번 작업은 거의 Codex와 저의 러프한 아이디어에 대해 대화하면서 진행했습니다. 처음에는 폴더 안에 있던 기존 작업물을 Codex에게 분석하게 했습니다. 이 프로젝트가 어떤 구조이면 좋을지 대강 제 의견을 설명해보고, 각 섹션의 자료는 어떻게 모으면 좋을지 먼저 제 의도를 파악하게 했습니다.

그렇게 뚝딱 나온 드래프트 웹페이지는 처참하기 그지 없었습니다만, 그 위에 기능을 하나씩 추가했습니다. 대략의 흐름을 요약하자면,

• 타임라인 카드 UI 정리
• 출처 더보기/줄이기 토글
• 배경 루프 영상 레이어
• 모바일 카드 넘침 수정
• 가로 스크롤용 pill 인디케이터
• 푸터 추가
• MP3 스트리밍 미니 플레이어 이식
• GitHub private repository 생성
• Railway 배포
• 커스텀 서브도메인 연결

이런 순서로 작업했습니다.

중간중간 Codex에 최근 추가된 멀티 에이전트식 작업 방식과 검색/검증용 스킬을 활용해서, 공개 자료를 찾아보고, 출처를 정리하고, 기존 다른 프로젝트에서 쓰던 UI 모듈을 그냥 재미로 가져와 이 프로젝트에 맞게 변형해서 붙이기도 했습니다.

예를 들어 MP3 플레이어는 제가 예전에 만들던 Warroom 프로젝트의 좌측 하단 디스크형 미니 플레이어를 가져와서 붙였습니다.
클릭하면 원격 카탈로그 JSON을 불러오고, 거기서 MP3 URL과 커버 이미지를 받아와 재생하는 방식입니다.

버튼을 누르면 디스크가 돌고, 앨범명과 곡명이 스크램블 애니메이션으로 나타나고, 재생/일시정지/다음 곡 버튼이 뜨도록 했습니다.

3. UI에서 신경 쓴 부분

페이지를 대강 완성하고 보니 심심해 보여서 12.3 사태 당시의 사진을 바탕으로 루프 영상을 구글 VEO3로 만들어서 움직이는 루프 배경으로 넣었습니다.

처음에는 4개의 영상이 모두 왼쪽에서 오른쪽으로 지나가게 했는데, 너무 규칙적으로 보여서 나중에는 방향과 크기를 랜덤화했습니다. 지금은 영상들이 서로 다른 크기로 나타나고, 좌우, 우좌, 대각선, 위아래 방향으로 천천히 지나가도록 되어 있습니다. 또한 본문 가독성이 깨지지 않도록 위에 어두운 블러 레이어와 아주 약한 질감도 살짝쿵 얹었습니다.

7. 배포 과정

작업이 어느 정도 마무리된 뒤에는 GitHub에 프라이빗 레포를 만들고 바로  Railway에 배포했습니다.

현재는 Railway에서 서비스가 성공적으로 올라간 상태이고, 심심풀이 프로젝트라 새로 도메인은 안사고 제가 가지고 있던 도메인의 서브도메인 "spring." 으로 연결했습니다.

8. 느낀 점

이번에 다시 느낀 것은, Codex가 단순히 코드를 짜주는 도구라기보다 “작업 과정을 같이 밀고 가는 파트너”에 가깝다는 점이었습니다. 제가 대략적인 방향을 말하면, Codex가 기존 코드 구조를 분석하고, 필요한 파일을 찾고, 다른 프로젝트에서 가져올 수 있는 모듈을 분석하고, 실제로 붙이고, 브라우저에서 검증까지 해줬습니다.

물론 한 번에 완벽하게 결과물이 나오지는 않았습니다.

모바일에서 카드가 넘치거나, 배경 영상이 너무 규칙적으로 움직이거나, 소셜 링크를 바꿔야 하거나, Railway 배포용 실행 스크립트가 필요하거나 하는 식으로 계속 손볼 부분이 있었습니다. 그런데 이런 세부 수정들을 대화로 계속 이어가면서 바로바로 반영할 수 있다는 점이 꽤 편했습니다. 특히 이번처럼 단일 HTML 기반의 작은 프로젝트는 Codex와 궁합이 상당히 좋았습니다.

HTML 디자인 스킬로는 한국분이 만드신 한국인이 가장 좋아하는 디자인을 뽑아준다는 SuperNova 스킬을 사용하였습니다.

일단은 “Codex로 공개 자료 기반 인터랙티브 타임라인을 어디까지 빠르게 만들 수 있는가”를 실험해본 작업이었습니다. 혹시 관심 있으신 분들은 와서 구경해보셔도 괜찮을 것 같습니다. 다시 한번 말씀드리지만 광고도 아무 홍보도 없는 그냥 웹페이지입니다.