# 개발 블로그 엔트리 Google 로그인 기능에 보안 이슈가 있었습니다. 기존에는 Google 계정이면 누구나 관리자 페이지에 접근할 수 있었는데, 이는 명백한 보안 위험이었죠. 이번 업데이트에서는 **사전에 등록된 이메일 주소만 Google 로그인을 통해 접근할 수 있도록 제한**했습니다. 8줄의 코드 추가로 간단하지만 효과적인 보안 검증 로직을 구현했으며, AI 코드 리뷰 도구의 도움을 받아 엣지 케이스를 놓치지 않았습니다. 이 변경사항은 다양한 외부 협력자들이 Google 계정으로 로그인할 수 있는 환경에서 특히 중요합니다. 화이트리스트 방식의 접근 제어를 통해 의도하지 않은 접근을 원천적으로 차단할 수 있게 되었고, 추후 권한 관리 확대가 필요할 때도 쉽게 확장할 수 있는 구조를 만들었습니다. 작은 변경이지만 보안 관점에서는 큰 의미 있는 개선라고 생각합니다.
# 개발 블로그 엔트리 최근 Documents 프로젝트에서 이메일 설정 개선과 캐싱 전략 재구성, 그리고 새로운 Knowledge Graph 기능 통합을 완료했습니다. 먼저 이메일 APP_URL 폴백값을 `doc.324.ing`에서 `d.324.ing`으로 업데이트하여 도메인 일관성을 맞추었습니다. 동시에 루트 페이지의 캐싱 문제를 해결하기 위해 Vercel CDN의 no-cache 헤더를 적용하고, ISR(Incremental Static Regeneration) 캐싱을 임시로 비활성화한 후 force-dynamic 렌더링을 도입했습니다. 이 변경들은 사용자가 항상 최신 콘텐츠를 받을 수 있도록 보장합니다. 가장 주목할 만한 변화는 Knowledge Graph를 `/knowledge` 라우트로 통합한 것입니다. 기존의 정적 캐싱 방식으로는 동적인 지식 그래프 데이터를 효과적으로 제공할 수 없었는데, 이번 ISR 캐싱 전략 변경으로 이를 해결할 수 있게 되었습니다. 약 10,600줄의 코드 추가와 함께 이 기능이 추가되었으며, AI의 도움을 받아 캐싱 정책과 렌더링 전략의 트레이드오프를 분석하고 최적의 구성을 찾을 수 있었습니다. 이번 업데이트는 단순한 버그 수정을 넘어 아키텍처 수준의 개선이었습니다. 동적 콘텐츠 제공의 필요성과 성능 최적화 사이의 균형을 맞추는 과정에서, 때로는 캐싱을 과감히 비활성화하고 렌더링 방식을 전환하는 것이 더 나은 사용자 경험을 만들 수 있다는 점을 배웠습니다.
# 개발 블로그 엔트리 지식 그래프(Knowledge Graph)를 탐색할 수 있는 링크를 문서 페이지의 푸터에 추가했습니다. 기존에는 사용자들이 문서의 관계도나 전체 지식 구조를 한눈에 파악하기 어려웠는데, 이번 변경으로 푸터의 눈에 띄는 위치에 Knowledge Graph 링크를 배치하여 사용자 경험을 개선했습니다. 작은 변경처럼 보이지만, 정보 아키텍처 관점에서 사용자가 문서를 읽은 후 자연스럽게 전체 구조로 이동할 수 있도록 유도하는 중요한 개선점입니다. 이번 작업에서는 AI 어시스턴트와 협력하여 사용자 경험 측면에서 가장 효과적인 위치와 메뉴 구조를 검토했습니다. 여러 레이아웃 옵션을 비교 분석한 결과, 푸터는 페이지의 마지막에 위치하면서도 모든 문서 페이지에서 일관되게 노출되는 위치라는 점에서 최적의 선택이었습니다. 이를 통해 사용자는 한 문서에서 관련된 다른 문서들로 쉽게 네비게이션할 수 있게 되었습니다. 다만 푸터가 과도하게 많은 링크로 채워지지 않도록 주의했습니다. Knowledge Graph 링크는 명확한 가치를 제공하면서도 페이지 구조를 복잡하게 하지 않도록 신중하게 배치되었으니, 이제 사용자들이 문서 시스템을 더 효과적으로 활용할 수 있을 것으로 기대합니다.
# 개발 블로그 엔트리 문서 아카이브 시스템에 페이지네이션 기능과 요약 필드를 추가했습니다. 기존에는 모든 아카이브 항목이 한 페이지에 표시되어 있어 문서 수가 많아질수록 로딩 시간이 증가하고 사용자 경험이 저하되는 문제가 있었습니다. 이번 업데이트를 통해 대량의 문서도 효율적으로 관리할 수 있게 되었으며, 각 항목에 추가된 요약 필드를 통해 사용자가 빠르게 내용을 파악할 수 있도록 개선했습니다. 기술적으로는 11개 파일을 수정하면서 531줄의 새로운 코드를 추가하고 163줄을 정리했습니다. 페이지네이션 로직을 구현할 때는 AI의 도움을 받아 효율적인 쿼리 방식과 페이지 표시 전략을 검토했는데, 이를 통해 초기 구상보다 더 깔끔하고 유지보수하기 좋은 구조를 만들 수 있었습니다. 특히 요약 필드의 동적 생성 부분에서는 AI와 협업하여 자동화 로직을 다듬을 수 있었습니다. 이제 사용자들은 아카이브를 더욱 쉽게 탐색할 수 있고, 개발팀 입장에서도 향후 문서 증가에 대비한 확장성 있는 기반을 구축했습니다. 다음 단계로는 검색 기능 및 필터링을 추가하여 아카이브의 활용도를 더욱 높일 계획입니다.
# 개발 블로그 엔트리 Document 프로젝트에서 사용자 경험을 크게 개선하는 작업을 진행했습니다. 접근성(a11y) 개선부터 시작해 이전/다음 네비게이션 기능, 로딩 상태 표시, 검색 기능 강화 등을 구현했습니다. 특히 `robots.txt`를 추가하여 검색 엔진 최적화(SEO)도 함께 챙겼는데, 이런 메타데이터는 쉽게 간과되기 쉬운 부분이라 챙기길 잘했다고 생각합니다. 71개 파일에서 약 2.5만 줄의 코드를 추가하는 꽤 큰 규모의 업데이트였습니다. 디자인 측면에서도 여러 개선사항이 적용되었습니다. FINDING-001, 002, 003 이슈들을 통해 터치 타겟 영역을 더 크게 확대하고, 필터 UI의 높이를 조정하며, 음소거된 색상의 명도 대비를 개선했습니다. 모바일 사용자 경험을 고려한 터치 타겟 크기 조정은 특히 중요한데, WCAG 지침에 맞춘 최소 48×48px 기준을 충족시키려 신경 썼습니다. 흥미로운 점은 이 모든 작업이 개발과 디자인이 긴밀하게 협업하면서 진행되었다는 것입니다. AI 도구를 활용해 코드 리뷰와 접근성 체크리스트를 검증함으로써 누락된 항목이 없는지 확인했고, 덕분에 더욱 완성도 높은 결과물을 만들 수 있었습니다. 다음 단계에서는 실제 사용자 테스트를 통해 이 개선사항들이 어떻게 작동하는지 검증할 계획입니다.
# 개발 블로그 엔트리 Google 로그인 기능을 Documents 프로젝트에 통합했습니다. 사용자들이 기존 Google 계정으로 간편하게 가입하고 로그인할 수 있도록 구현했으며, 동시에 기존 계정과의 연동도 지원합니다. OAuth 2.0 기반의 Google 인증 흐름을 적용했고, 사용자 정보 매핑과 데이터베이스 연동 로직을 함께 구성했습니다. 총 5개 파일을 수정하며 약 214줄의 코드를 추가하고 155줄을 정리했습니다. 구현 과정에서 마주친 로그인 에러들을 추적하기 위해 에러 메시지를 더욱 상세하게 개선했습니다. 사용자가 마주칠 수 있는 여러 실패 시나리오(토큰 만료, 권한 부족, 네트워크 오류 등)를 구분하여 각각에 맞는 메시지를 제공하도록 했습니다. 이를 통해 프로덕션 환경에서 발생하는 문제들을 더 빠르게 진단할 수 있게 되었고, 사용자 경험도 함께 개선되었습니다. 이 과정에서 AI의 도움을 받아 OAuth 흐름 설계와 에러 케이스 분류를 더욱 체계적으로 진행할 수 있었습니다. 단순 구현을 넘어 안정성 높은 인증 시스템을 만드는 데 집중했고, 향후 다른 소셜 로그인 제공자 추가도 이러한 아키텍처 위에서 수월하게 진행할 수 있을 것 같습니다.
# 개발 블로그 엔트리 이번 업데이트에서는 문서 사이트의 레이아웃과 성능을 함께 개선했습니다. 가장 눈에 띄는 변화는 colophon 페이지를 매거진 에디토리얼 스타일로 재설계한 것입니다. 중앙 정렬된 레이아웃으로 편집 콘텐츠의 위계를 명확히 하면서도 세련된 느낌을 전달하려고 했습니다. 동시에 콘텐츠 영역을 792px에서 1000px로 확대해 더 많은 정보를 효율적으로 표시할 수 있게 했습니다. 기술적으로는 몇 가지 중요한 이슈를 해결했습니다. 콘텐츠 캐시 무효화 로직을 개선하고 불필요한 ISR(Incremental Static Regeneration) 타이머를 제거해 빌드 성능을 최적화했습니다. TOC iframe 리로드 문제, 콘텐츠 재검증, 카테고리 ID 이름 변경 등 3가지 버그도 동시에 처리했는데, 이 과정에서 캐시 레이어와 동적 콘텐츠 처리 사이의 복잡한 상호작용을 디버깅할 수 있었습니다. 이번 변경사항들은 함께 작업하면서 개선 사항을 정의하는 데 AI의 도움을 받았습니다. 특히 레이아웃 재설계와 성능 최적화 전략을 검토할 때 다양한 관점에서 피드백을 얻을 수 있었고, 이를 통해 더욱 사려 깊은 결정을 내릴 수 있었습니다. 총 7개 파일에서 289줄을 추가하고 130줄을 정리해 사이트의 기초를 더욱 견고하게 만들었습니다.
# 개발 블로그 엔트리 Documents 프로젝트에 큰 규모의 기능 개선과 안정성 개선 작업을 진행했습니다. 목차(TOC) 네비게이션 시스템을 완전히 재설계하여 iframe 리로드 문제를 해결하고 `scrollIntoView`를 활용한 부드러운 스크롤 경험을 제공했습니다. 특히 앵커 인터셉션 로직을 강화하여 resolved href의 프래그먼트도 확인하도록 개선해, 복잡한 라우팅 환경에서도 안정적으로 작동하도록 만들었습니다. 더불어 관리자 카테고리 매니저의 UX를 폭넓게 개선했고, 에디터 저장 기능과 카테고리 커스텀 ID 설정 등 여러 주요 버그들을 수정했습니다. TypeScript 타입 안정성 강화, 데이터베이스 쿼리 최적화(복합 인덱스 제거 및 JS 측 정렬로 변경)도 함께 진행하여 코드베이스의 견고성을 높였습니다. AI 어시스턴트의 도움을 받아 타입 캐스팅 이슈들을 효율적으로 식별하고 해결할 수 있었습니다. 16개 파일에 걸쳐 1800여 줄의 코드 추가와 함께 불필요한 부분들을 정리하면서, 사용자 경험과 개발자 경험 모두를 개선하는 균형잡힌 업데이트가 되었습니다. 특히 이번 작업을 통해 작은 버그 수정이 전체 사용성에 얼마나 큰 영향을 미치는지 다시 한 번 깨달을 수 있었습니다.
Documents 프로젝트를 GitHub Pages에서 Next.js와 Firebase 기반의 현대적인 스택으로 완전히 마이그레이션했습니다. 이번 작업의 핵심은 단순한 정적 사이트 호스팅을 넘어 동적 콘텐츠 관리와 성능 최적화를 동시에 달성하는 것이었습니다. 72개 파일의 변경을 통해 아카이브 페이지들을 Next.js의 ISR(Incremental Static Regeneration)로 전환했고, Firebase를 활용한 캐시 무효화 메커니즘을 구현해 콘텐츠 업데이트 시 자동으로 캐시를 갱신하도록 설정했습니다. 이를 통해 빌드 시간은 단축하면서도 항상 최신 콘텐츠를 사용자에게 제공할 수 있게 되었습니다. 기술적으로는 몇 가지 흥미로운 개선 사항들이 있습니다. 기존의 브라우저 기본 `confirm()` 대신 React 기반의 인라인 컨펌 UI로 교체해 사용자 경험을 개선했고, 관리자 CRUD 작업을 클라이언트 SDK에서 Server Actions로 마이그레이션해 보안을 강화했습니다. 또한 환경 변수의 뉘앙스로 인한 Firestore 경로 오류를 해결했고, 아카이브 콘텐츠 페이지를 풀스크린으로 렌더링하도록 수정했습니다. AI 어시스턴트의 도움을 받아 마이그레이션 중 여러 엣지 케이스를 식별하고 해결 방안을 검토했으며, 원본 사이트 레이아웃과의 일관성 유지도 함께 진행했습니다. 이제 Documents는 확장 가능하고 유지보수하기 쉬운 구조로 재편성되었습니다. ISR을 통한 캐싱 전략과 Server Actions 기반의 관리 시스템은 향후 더 많은 문서 추가와 실시간 업데이트 요구사항에도 쉽게 대응할 수 있는 토대를 마련했습니다.
# 개발 블로그 엔트리 이번 업데이트에서는 Documents 프로젝트에 FIA F1 2026 시즌 규정 문서의 한국어 번역본을 추가했습니다. 구체적으로 2026년 포뮬러 1 시리즈의 Section A(일반규정)을 한국어로 번역하여 데이터베이스에 통합했는데, 이는 국내 F1 팬들과 개발자들이 공식 규정에 더 쉽게 접근할 수 있도록 하는 것이 목표였습니다. 4개의 파일을 수정하며 705줄을 추가하고 52줄을 정리하는 과정을 거쳤으며, 문서 구조를 최적화하고 아카이브 목록을 재정렬했습니다. 작업 과정에서 주목할 점은 단순한 번역 추가를 넘어 전체 문서 체계의 일관성을 유지하는 데 집중했다는 것입니다. 새로운 F1 카테고리를 생성하고, 여러 차례에 걸쳐 아카이브 목록을 재정렬하며 문서의 메타데이터를 정확하게 관리했습니다. AI 도구를 활용하여 번역 검수 및 문서 포맷 정규화 과정을 효율화했으며, 이를 통해 데이터 일관성을 보장하면서도 작업 시간을 단축할 수 있었습니다. 이러한 작업은 단순해 보이지만 문서 관리 시스템에서 매우 중요한 부분입니다. 카테고리 추가, 순서 정렬, 메타데이터 업데이트 등 세부 사항들이 축적되면 사용자 경험을 크게 개선할 수 있기 때문입니다. 향후에는 이 패턴을 다른 국제 스포츠 규정 문서에도 적용하여 더욱 다양한 자료를 제공할 계획입니다.