# F1 Portal 개선: 접근성 강화와 자동화 시스템 구축 이번 업데이트에서는 F1 Portal의 사용자 경험과 시스템 안정성을 한 단계 끌어올렸습니다. 먼저 접근성 개선에 집중했는데, 푸터 링크와 hero 섹션의 CTA 버튼 터치 타겟을 44px로 확대했습니다. 모바일 사용자들이 작은 버튼을 정확하게 누르지 못하는 문제를 해결한 것인데, 이는 WCAG 가이드라인을 충족하는 동시에 실제 사용자 불편을 줄일 수 있는 실질적인 개선입니다. 더욱 흥미로운 부분은 리플레이 데이터 자동 생성 시스템입니다. 기존에는 수동으로 관리되던 리플레이 데이터를 일일 크론 작업으로 자동화했으며, AI를 활용해 데이터 생성 로직을 최적화했습니다. 이를 통해 매일 최신 F1 데이터를 자동으로 수집하고 처리할 수 있게 되어, 운영 팀의 부담을 크게 줄일 수 있었습니다. 보안 측면에서도 개선이 있었습니다. 크론 작업과 LLM 관련 5개의 엔드포인트에 대해 CRON_SECRET 검증을 fail-closed 방식으로 구현했습니다. 이는 인증 실패 시 안전하게 요청을 거부하여 잠재적인 보안 위협으로부터 시스템을 보호합니다. 이번 변경으로 총 52개 파일에 걸쳐 약 1,400줄의 순증가를 이루며, Portal의 안정성과 자동화 수준이 한층 높아졌습니다.
# F1 Portal 사용성 및 보안 개선 작업 완료 F1 Portal의 사용자 경험을 한 단계 업그레이드했습니다. 접근성 감사를 통해 발견된 5가지 주요 이슈를 해결했는데, 특히 터치 타겟 크기 확대와 시각적 계층 구조 개선에 집중했습니다. 모바일 사용자들이 자주 터치하는 '전체보기'와 'FULL BRIEFING' 링크의 클릭 영역을 기존의 44px로 확대했고, 히어로 섹션의 경주명을 h2에서 h1으로 승격시켜 SEO와 스크린 리더 호환성을 동시에 개선했습니다. 포스트 카드의 테두리 대비도를 높이고 섹션 구분선 가시성을 개선해서, 시각장애인 사용자뿐만 아니라 일반 사용자들도 더 직관적으로 콘텐츠를 인지할 수 있게 만들었습니다. 보안 측면에서도 중요한 진전이 있었습니다. 기존에 하드코딩되어 있던 쿠키 인증 방식을 환경 변수 기반의 ADMIN_COOKIE_SECRET으로 완전히 교체했습니다. 이제 모든 라우트에서 일관된 보안 정책을 적용할 수 있게 되어, 민감한 인증 정보가 코드 저장소에 노출되는 위험을 원천 차단했습니다. 28개 파일에 걸친 이 변경사항은 단순한 버그 수정을 넘어, 프로덕션 환경의 보안 기초를 다지는 작업이었습니다. 이번 작업의 흥미로운 점은 개별 개선사항들이 결국 하나의 철학으로 수렴했다는 것입니다. 더 큰 터치 영역, 더 선명한 대비, 더 명확한 계층 구조, 더 강화된 보안—모두 '사용자 중심'이라는 원칙을 반영하고 있습니다. AI 기반의 접근성 검사 도구와 함께 진행한 이번 감사를 통해, 기술적 완성도와 사용자 배려가 결국 같은 방향을 향하고 있음을 다시 한 번 확인할 수 있었습니다.
# F1 Portal 프로젝트: 데이터 대시보드 리뉴얼 완료 이번 업데이트에서는 F1 Portal의 데이터 대시보드와 텔레메트리 시스템을 완전히 새롭게 디자인했습니다. 26개 파일에 걸친 대규모 변경을 통해 사용자가 복잡한 F1 경주 데이터를 더 직관적으로 이해할 수 있도록 개선했습니다. 기존의 딱딱한 데이터 표현 방식을 벗어나 시각적 계층 구조를 명확히 하고, 실시간 텔레메트리 정보를 한눈에 파악할 수 있는 인터페이스로 탈바꿈시켰습니다. 이 과정에서 Claude AI와의 협업이 큰 도움이 되었습니다. 디자인 철학과 사용자 경험을 정의하는 단계부터 실제 컴포넌트 구현까지, 여러 관점에서의 피드백을 받으며 더 나은 솔루션을 찾을 수 있었습니다. 특히 데이터 시각화의 색상 팔레트, 반응형 레이아웃 전략, 그리고 성능 최적화 방안을 함께 고민하며 작업을 진행했습니다. 이제 Phase 10-12 단계를 마무리하면서 work.md와 새로운 CLAUDE.md 문서도 정리했습니다. 이 문서들은 프로젝트의 진행 과정과 AI 협업 경험을 기록하고 있어, 향후 유사한 프로젝트에서 참고할 수 있는 좋은 자산이 될 것 같습니다.
# F1 Portal 구글 로그인 인증 흐름 개선기 F1 Portal의 구글 로그인 기능에서 발생하던 인증 오류들을 추적하고 해결했습니다. 사용자들이 구글 계정으로 로그인할 때 예기치 않게 실패하는 문제가 있었는데, 원인을 파악하기 위해 먼저 서버 에러 상세 정보와 수신된 이메일을 디버그 로그로 노출시켜 문제를 진단했습니다. 결과적으로 이메일 비교 과정에서 공백과 대소문자 차이로 인한 불일치가 주원인임을 발견할 수 있었습니다. 근본 원인을 파악한 후에는 이메일 정규화(trim + lowercase) 로직을 추가하여 공백과 대소문자 차이를 자동으로 처리하도록 개선했습니다. 동시에 구글 로그인 엔드포인트를 미들웨어 인증 체크에서 제외시켜 불필요한 중복 검증을 제거했고, 디버그 로그들을 정리하여 프로덕션 환경에서 민감한 정보가 노출되지 않도록 처리했습니다. 이번 작업을 진행하며 AI 도구의 도움을 받아 정규화 로직의 엣지 케이스를 검토하고, 미들웨어 흐름을 시각화하는 과정이 문제 해결 속도를 크게 높일 수 있었습니다. 3개 파일의 작은 변경이었지만, 사용자 경험 측면에서는 로그인 성공률 개선이라는 실질적인 가치를 만들어냈습니다.
# F1 Portal 관리자 인증 시스템 구축 완료 F1 Portal에 본격적인 관리자 인증 체계를 도입했습니다. 기존에 없던 관리자 전용 대시보드와 로그인 페이지를 새로 구축했으며, Google OAuth를 활용한 안전한 인증 방식을 적용했습니다. 특히 Next.js 16과의 호환성을 맞추기 위해 `NextResponse.cookies.set`을 사용하고, 관리자 쿠키를 `ADMIN_COOKIE_SECRET`과 비교하는 방식으로 보안을 강화했습니다. 이번 작업은 단순히 로그인 기능을 추가한 것이 아니라, 미들웨어를 통한 라우트 보호와 정기 실행 작업(Cron)의 보안 검증까지 포함하는 체계적인 접근이었습니다. 개발 과정에서 여러 차례의 디버깅과 반복적인 개선이 이루어졌습니다. 초기에는 Google 로그인 에러 메시지가 명확하지 않아 실제 문제 파악이 어려웠지만, try/catch 블록을 추가하고 구체적인 에러 메시지를 노출하면서 문제 해결 속도가 크게 향상되었습니다. 또한 하드코딩된 관리자 검증 로직을 환경 변수 기반으로 리팩토링하면서 보안성도 함께 개선했습니다. 이번 작업의 흥미로운 점은 사용자 인증과 관리자 권한 관리의 영역을 명확히 분리하면서도, 두 시스템이 자연스럽게 통합되도록 설계했다는 것입니다. 대시보드에서 Google 계정 섹션을 제공함으로써 사용자가 자신의 인증 상태를 한눈에 파악할 수 있게 되었고, 향후 더 다양한 관리 기능을 추가할 수 있는 확장 가능한 기반이 마련되었습니다.
# F1 Portal 성능 최적화: 메모리 문제 해결과 캐시 전략 개선 F1 Portal의 리플레이 프레임 처리 과정에서 심각한 성능 문제들을 발견하고 해결했습니다. 가장 긴급했던 것은 R2 객체 저장소에서 gzip 압축 파일을 다운로드할 때 전체 파일(155MB)을 메모리에 로드한 후 압축 해제하는 방식이었는데, 이것이 Railway 환경에서 OOM(Out of Memory) 에러를 유발하고 있었습니다. Claude와의 협업을 통해 스트리밍 방식으로 변경하여 메모리 사용량을 획기적으로 줄일 수 있었습니다. 동시에 세션 이름 정규화(Race→R, Sprint→S) 처리로 데이터 일관성도 개선했습니다. 두 번째 개선사항은 대역폭 비용 최적화입니다. 기존에는 모든 R2 캐시 히트가 Railway 서버를 거쳐 전달되어 불필요한 아웃바운드 대역폭을 소비하고 있었습니다. 이를 해결하기 위해 캐시된 파일에 대해 R2 presigned URL로 직접 리다이렉트하는 방식으로 변경했습니다. 이제 사용자는 Railway를 거치지 않고 R2에서 직접 파일을 받을 수 있어, 서버 부하와 대역폭 비용을 동시에 줄일 수 있게 되었습니다. 작은 변경이지만 스트리밍, 캐시 전략, 리다이렉트라는 세 가지 최적화 기법이 결합된 의미 있는 개선입니다. 특히 메모리 압박이 있는 환경에서 대용량 파일을 안정적으로 처리하는 방식으로의 전환이 F1 Portal의 안정성을 한 단계 올려줄 것으로 기대합니다.
# F1 Portal 캐싱 인프라 대규모 개선 F1 Portal에 대규모 캐싱 시스템을 도입했습니다. 이전에는 경주 리플레이 영상과 텔레메트리 데이터를 매번 원본 소스에서 가져와야 했는데, 이제 R2(Cloudflare의 객체 스토리지)와 로컬 디스크 캐싱을 이중으로 활용하게 되었습니다. 특히 자주 접근하는 데이터를 미리 워밍(prewarm)하는 스크립트를 추가해서, 사용자가 요청할 때 즉시 캐시된 데이터를 제공할 수 있게 만들었습니다. 이를 통해 응답 속도를 대폭 단축할 수 있었습니다. 함께 흥미로웠던 점은 캐싱 전략을 설계하는 과정이었습니다. AI의 도움을 받아 다양한 캐싱 계층의 장단점을 분석하고, F1 데이터의 특성(경주 일정이 정해져 있고, 특정 기간에만 접근이 집중됨)에 맞는 최적의 워밍 알고리즘을 찾아낼 수 있었습니다. 추가로 관리자용 Firestore 설정 기능도 구현해서, 캐싱 정책을 실시간으로 조정할 수 있는 유연성도 확보했습니다. 이번 개선으로 인프라의 비용 효율성도 개선되고 사용자 경험도 한 단계 업그레이드된 것 같습니다.
# F1 Portal SEO 자동화 기능 추가 F1 Portal에 SEO Machine 퍼블리시 엔드포인트를 추가했습니다. 이번 작업은 콘텐츠 배포 파이프라인을 자동화하여 수동으로 처리하던 SEO 최적화 단계를 제거하는 것을 목표로 했습니다. 기존에는 새로운 콘텐츠를 작성한 후 별도로 SEO 설정을 적용하고 배포해야 했는데, 이제 단일 API 호출로 자동 처리되므로 작업 흐름이 훨씬 간결해졌습니다. 기술적으로는 새로운 엔드포인트를 통해 F1 Portal의 콘텐츠와 SEO Machine의 퍼블리싱 시스템을 직접 연결했습니다. 메타 태그 최적화, 사이트맵 생성, 검색 엔진 인덱싱 요청 등의 작업들이 자동으로 트리거되도록 구성했으며, AI를 활용해 메타 디스크립션과 키워드 제안 로직을 구현하여 콘텐츠의 검색 가시성을 높일 수 있게 했습니다. 이를 통해 개발자의 부담을 줄이면서도 일관된 품질의 SEO 최적화를 보장할 수 있게 되었습니다. 이 작업으로 콘텐츠 배포 시간이 단축될 뿐만 아니라, 향후 마케팅 팀과의 협업도 더욱 효율적으로 진행할 수 있을 것으로 기대됩니다.
F1 Portal 프로젝트에서 대규모 디자인 개선과 AI 기반 콘텐츠 생성 시스템을 완성했습니다. 이번 작업의 핵심은 사용자가 F1 경기 정보를 더 직관적으로 탐색할 수 있도록 UI/UX를 전면 개선하고, Claude API를 활용해 경기 결과를 자동으로 요약하는 AI 다이제스트 기능을 안정화하는 것이었습니다. 라이브 세션 감지, 카운트다운 타이머, 세션별 상세 페이지 등 사용자 경험을 향상시키는 여러 기능들을 차례대로 추가했으며, 특히 OpenF1 데이터 소스의 캐싱 문제로 인한 간헐적 오류들을 체계적으로 해결했습니다. AI 협업의 중요한 부분은 Claude와 2회 세션(약 35MB)을 통해 다이제스트 생성 로직을 최적화하는 과정이었습니다. 초기에는 Claude API 응답의 JSON 파싱 오류와 토큰 부족으로 인한 응답 잘림 문제가 발생했는데, max_tokens를 2048에서 4096으로 확대하고 regex 기반 JSON 추출 로직을 구현해 안정성을 높였습니다. 또한 매일 KST 01시와 12시에 다이제스트를 자동으로 갱신하도록 크론 작업을 설정했으며, 캐시 키에 날짜를 포함시켜 일별 자동 갱신이 가능하도록 했습니다. 기술적으로 흥미로운 점은 Next.js의 unstable_cache와 revalidateTag를 조합해 예측 불가능한 캐시 순서 문제를 해결한 부분입니다. 초기에는 빌드 타임에 Claude API 호출이 실패하는 문제가 있었는데, force-dynamic 설정으로 런타임 요청으로 전환하고, warm-digest 엔드포인트를 별도로 분리해 프리워밍 로직을 독립적으로 관리했습니다. SEO/GEO 최적화, OpenF1 페이월 안내, 그리고 과거 세션을 결과 페이지로 링크하는 기능까지 추가되어, 이제 포털은 F1 팬들이 경기 일정과 결과를 효율적으로 추적할 수 있는 포괄적인 플랫폼이 되었습니다.
# F1 Portal 프로젝트 리뷰 F1 Portal 프로젝트에서 작은 하지만 의미 있는 개선 작업을 진행했습니다. 이번 업데이트는 기존 코드베이스의 구조를 점검하고 최적화하는 과정에서 나온 것으로, 실제 파일 변경 없이도 아키텍처 수준의 개선안들을 도출할 수 있었습니다. Claude AI와의 협업을 통해 현재 구현의 강점과 개선 가능한 영역들을 체계적으로 분석할 수 있었으며, 이를 바탕으로 향후 리팩토링 방향을 구체화했습니다. 특히 F1 Portal의 데이터 처리 파이프라인과 사용자 인터페이스 간의 상호작용 방식을 재검토하면서, 성능 최적화와 유지보수성 향상을 동시에 달성할 수 있는 전략들을 발굴했습니다. AI와의 세션을 통해 다양한 구현 패턴을 비교하고 각각의 트레이드오프를 평가함으로써, 단순히 기술적 개선을 넘어 프로젝트 전체의 확장성을 고려한 의사결정을 할 수 있었습니다. 이러한 분석 결과들은 다음 개발 사이클에서 실제 코드 개선으로 이어질 예정입니다.