앱 아이콘이나 UI가 사용자 입력으로 버그를 일으킬 때

처음부터 정답을 맞히려고 하면 오히려 확인 시간이 길어진다. 아이콘이나 UI 버그는 작게 좁혀서 확인하는 게 훨씬 빠르다.

문제를 크게 잡으면 모든 파일이 의심스러워져서 손대기 어려워진다. 문제의 범위를 먼저 좁혀야 한다.

한 줄 요약으로 상황 정리하기

아이콘 주변 문제가 반복된다면 확인 순서를 고정해두는 편이 낫다. 매번 감으로 접근하면 같은 실수를 반복하게 된다.

• 증상: 아이콘이 안 보인다 vs 아이콘이 잘못 표시된다
• 환경: 모든 브라우저인가 특정 브라우저인가
• 원인: 스타일 문제인가 리소스 로드 문제인가

먼저 볼 파일은?

웹 개발 쪽 문제는 화면만 보고 판단하면 놓치는 값이 많다. 먼저 다음을 확인한다.

• HTML 마크업: 아이콘 요소가 정말 있는가
• CSS 스타일: 스타일이 정상으로 적용되는가
• 리소스: 이미지나 폰트 파일이 로드되는가

빌드 후 실제로 확인해보기

코드는 맞는데 화면이 안 될 수 있다. 먼저 빌드를 다시 한다.

npm run build

빌드 후 브라우저를 새로고침해서 최신 파일이 로드되는지 확인한다. 특히 CSS나 이미지 파일이 캐시되지 않았는지 주의한다.

설정이 로컬과 운영에서 다를 수 있다

문제 해결 작업은 로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 같이 적어두면 원인 추적이 쉬워진다.

• 로컬: 개발 모드, 캐시 없음
• 운영: 프로덕션 모드, CDN 캐시

서버에서 볼 값

사용자가 입력했을 때 뭐가 변하는지 서버 로그에서 본다. 서버에서 기대하는 요청과 실제 요청이 일치하는지 확인한다.

브라우저에서 확인할 값

아이콘 주변 문제가 반복된다면 확인 순서를 고정해두는 편이 낫다. 매번 감으로 접근하면 같은 실수를 반복하게 된다.

1. 개발자 도구 Elements에서 마크업 확인
2. 콘솔에서 자바스크립트 에러 확인
3. 네트워크 탭에서 리소스 로드 확인
4. 스타일이 정상으로 적용되는지 확인

사용자 영향을 생각하며 수정하기

문제 해결 작업은 로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 같이 적어두면 원인 추적이 쉬워진다.

• 모든 사용자가 영향받는가
• 특정 브라우저에서만 영향받는가
• 특정 조건에서만 영향받는가

작은 스타일 변경부터 시작하기

한 가지씩 수정한다.

1. 한 가지 CSS 속성이나 마크업 수정
2. npm run build
3. 브라우저에서 확인
4. 결과를 기록

최종 확인: 모든 환경에서 정상인가

결과가 바뀐 이유를 로그와 응답으로 설명할 수 있으면 충분히 정리된 것이다. 마지막으로 다음을 확인한다.

• 로컬에서 정상인가
• 운영 환경에서 정상인가
• 모든 브라우저에서 정상인가

관련 기록을 짧게라도 남겨두면 다음 확인이 훨씬 빨라진다.