(WEB_PORTAL) 다크모드 전면 적용과 Next.js 이미지 최적화 경고 잡기

개요

기본 기능 구현이 어느 정도 마무리된 시점에, 화면 전반의 사용성을 다듬는 작업을 진행했습니다. 전 페이지에 다크모드를 일관되게 적용하고, 개발 중 콘솔에 계속 떠 있던 이미지 관련 경고 두 가지를 함께 해결했습니다.

핵심 구현 포인트

1. 다크모드 일괄 적용

Tailwind CSS의 다크모드 클래스 문법을 활용해, 컴포넌트별로 라이트/다크 색상을 각각 지정하는 대신 "기본은 라이트, 다크 클래스만 추가로 명시"하는 방식으로 전 컴포넌트를 통일했습니다. 별도의 다크모드 토글 버튼을 만들지 않고, 사용자 OS/브라우저의 시스템 설정을 그대로 따르도록 한 것도 이 시점에 정한 방향이었습니다.

2. 라우팅 미들웨어의 정적 파일 예외 처리

로그인 페이지 등에 로고 이미지를 추가하면서, 인증 여부를 검사하는 라우팅 미들웨어가 이미지·아이콘 같은 정적 파일 요청까지 인증 검사 대상으로 잡아버리는 문제를 발견했습니다. 미들웨어의 대상 경로 패턴에 정적 파일 확장자를 제외하는 규칙을 추가해서 해결했습니다.

3. LCP(최대 콘텐츠풀 페인트) 경고 해결

화면에 가장 먼저, 가장 크게 그려지는 이미지(로고 등)에 대해 Next.js의 이미지 컴포넌트가 "우선순위 로딩 힌트가 없다"는 경고를 띄우고 있었습니다. 해당 이미지에 우선 로딩 옵션을 명시적으로 지정해서, 페이지가 열리자마자 이 이미지부터 우선적으로 불러오도록 처리했습니다.

4. 이미지 비율 경고 해결

너비/높이를 고정값으로 지정한 이미지에서 실제 원본 비율과 다르다는 경고가 발생했는데, 너비와 높이를 0으로 두고 CSS 스타일로 실제 크기를 지정하는 방식으로 바꿔서, 브라우저가 원본 비율을 그대로 참고하도록 했습니다.

회고

• 프레임워크가 콘솔에 띄우는 경고는 대부분 "나중에 실제 성능 문제로 이어질 신호"라는 걸 확인했습니다. 당장 화면이 깨지지 않는다고 넘어가지 않고, 초기에 하나씩 원인을 찾아 없애두는 편이 이후 유지보수 부담을 줄여줬습니다.
• 다크모드처럼 전체 화면에 걸친 스타일 작업은, 기능 구현 중간중간 조금씩 하기보다 한 번에 몰아서 처리하는 편이 색상 일관성을 지키기에 더 수월했습니다.