조용히 생긴 오류 4개 해결하기

닉네임 쪽에도 구멍이 있었다. zero-width나 bidi 같은 눈에 안 보이는 유니코드 문자를 섞으면 관리자 닉네임을 사칭할 수 있었는데, 코드포인트 범위를 체크해서 필터링했다. 방문 로그가 무한정 쌓이는 것도 이번에 60일 보존 정책으로 정리했다.

KOE205 로그인 장애

닉네임 표시 문제를 고치려고 카카오 인가 요청에 scope: profile_nickname 하나를 추가했다. 그런데 카카오 개발자 콘솔에 그 동의항목을 등록해두지 않아서, 인가 서버 단계에서 관리자를 포함한 전원의 로그인이 막혔다(KOE205). 앱 코드까지 오지도 못하고 차단된다는 게 포인트다.

직접 재로그인하다가 겪고 나서야 원인을 파악했다. scope를 제거해서 즉시 롤백하고, 재발 방지용 주석을 남겨뒀다. 장애는 새 기능이 아니라 사소한 설정 하나에서 온다는 걸 다시 느꼈다.

CORS는 통과, 이미지는 차단

보안 헤더용으로 helmet()을 붙였는데, 기본값인 Cross-Origin-Resource-Policy: same-origin이 프론트(jslog.xyz)에서 백엔드 도메인 이미지를 <img>로 불러오는 걸 조용히 차단하고 있었다. 업로드는 성공하고 서버 응답도 200인데 브라우저가 렌더링만 막아버려서, 처음엔 원인을 특정하는 데 오래 걸렸다.

CORS(요청 허용)와 CORP(리소스 사용처 제한)는 이름은 비슷해도 완전히 다른 메커니즘이다. /uploads 경로에만 Cross-Origin-Resource-Policy: cross-origin으로 다시 열어서 해결했다.

CSS가 파놓은 함정

드롭다운이 잘리던 문제

카테고리 내비게이션에 가로 스크롤용으로 overflow-x-auto를 걸었더니, CSS 스펙상 한쪽 축에 auto를 주면 반대 축(overflow-y)도 강제로 clip 대상이 돼버려서 absolute로 띄운 드롭다운이 통째로 잘렸다. 서브카테고리가 있는 카테고리가 하나뿐이라 한동안 안 들켰던 것도 포인트다. position: fixed로 바꾸고 트리거 좌표를 직접 계산해서 해결했다.

뷰포트가 크면 콘텐츠가 안 보이던 문제

스크롤 등장 애니메이션을 animation-timeline: view()로 순수 CSS로 구현했는데, 뷰포트가 이미 그 섹션을 다 담을 만큼 크면 스크롤이 발생할 필요가 없어서 타임라인 자체가 안 움직이고 opacity: 0으로 영구 고정돼버렸다. 실제로 2200px 세로 뷰포트에서 홈페이지 4개 섹션 중 3개가 완전히 빈 화면으로 떴다.

IntersectionObserver 기반 <Reveal> 컴포넌트로 교체해서, 마운트 시점에 이미 화면 안에 있으면 애니메이션 없이 바로 보이도록 처리했다.

정리

기능은 한 번 만들면 끝이지만, 배포된 사이트는 계속 살아있어서 생각지도 못한 데서 문제가 생긴다. 다음은 설계·워크플로우 쪽 이야기를 다뤄볼 생각이다.

카카오 로그인을 일반 사용자까지 확장하며 발견한 권한 상승 버그, 댓글·방명록 구현, 사이드바를 없앤 개편을 정리했다.