웹 디자인 테마를 안전하게 바꾸기

블로그나 웹사이트의 테마를 변경할 때 혼자 개발하다 보면 빠뜨리는 부분이 많다. 특히 CSS 변수, 다크모드 지원, 타사 컴포넌트의 색상 오버라이드 같은 곳에서 예상 밖의 버그가 생기곤 한다.

변경 전 현재 상태 기록하기

테마 변경을 시작하기 전에, 현재 상태를 스크린샷이나 로그로 남겨둔다. 문제가 생겼을 때 무엇이 달라졌는지 빠르게 비교할 수 있다.

npm run build

빌드 후 경고가 없는지 확인한다. 특히 CSS-in-JS 라이브러리를 쓸 때는 미사용 색상이나 잘못된 변수 참조 같은 경고가 나올 수 있다.

한 요소씩 변경 확인하기

전체 테마를 한 번에 바꾸기보다는 헤더, 사이드바, 본문 같이 영역별로 나눠서 변경한다. 각 단계마다 브라우저에서 확인한다.

# 한 파일만 수정 후 빌드
npm run build
# 브라우저에서 확인
open http://localhost:3000

CSS 변수와 다크모드 확인

CSS 변수를 사용하는 프로젝트라면 모든 색상이 변수로 정의되었는지, 다크모드에서도 제대로 보이는지 확인해야 한다.

:root {
  --color-primary: #333;
  --color-background: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #fff;
    --color-background: #1a1a1a;
  }
}

브라우저 개발자 도구의 색상 선택기로 실제 적용된 색을 확인한다.

타사 라이브러리 색상 오버라이드

UI 라이브러리(Material-UI, Chakra 등)를 쓴다면 테마 설정이 제대로 전달되는지 확인해야 한다. 라이브러리의 기본 색상이 여전히 나타난다면 테마 제공자 설정을 점검하자.

// 예: Material-UI
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

반응형 디자인 확인

테마 변경 후 모바일, 태블릿, 데스크톱 화면에서 모두 확인한다. 색상 대비가 너무 낮아서 읽기 어려워질 수도 있다.

변경 사항 정리하기

테마 변경이 완료되면 어떤 파일을 수정했는지, 왜 수정했는지 간단히 정리한다. 나중에 다시 돌려야 할 때나 다른 사람이 유지보수할 때 필요하다.

• 수정한 파일: styles/theme.css, components/Header.tsx
• 변경 이유: 새 브랜드 색상 적용
• 테스트한 브라우저: Chrome, Safari, Firefox

체크리스트

1. 변경 전 현재 상태를 기록한다.
2. 한 영역씩 작게 변경하며 빌드와 확인을 반복한다.
3. CSS 변수와 다크모드를 따로 테스트한다.
4. 타사 라이브러리의 테마 설정을 확인한다.
5. 모바일에서도 확인한다.
6. 변경 사항을 정리한다.

작은 부분부터 차근차근 확인하면 테마 변경으로 인한 버그를 큰 폭으로 줄일 수 있다.