디버깅과 개선

오류를 고칠 때는 “안 돼”보다 화면, 동작, 에러 메시지, 재현 방법을 함께 알려 주세요.

보기 화면 런타임 오류

보기 화면에서 런타임 오류가 발생했어.
오류 메시지는 아래와 같아.

[오류 메시지 붙여넣기]

원인을 찾아서 고쳐줘.
겉으로 오류를 숨기기만 하지 말고, 실제로 잘못된 import, 상태, 데이터 접근, 렌더링 조건을 확인해줘.
수정 후에는 같은 오류가 다시 나지 않게 방어 코드도 필요한 만큼 넣어줘.

모바일에서 깨질 때

모바일 화면에서 레이아웃이 깨져.
375px, 390px, 430px 기준으로 가로 스크롤, 겹침, 잘린 버튼, 사라진 메뉴를 점검해줘.
데스크톱 디자인을 그대로 줄이지 말고, 모바일에서는 우선순위가 낮은 정보는 접거나 아래로 내려줘.
수정 후에도 데스크톱 화면은 과하게 커지거나 비지 않게 유지해줘.

느린 생성 또는 멈춘 것처럼 보일 때

작업이 오래 걸릴 때 멈춘 것처럼 보이지 않게 UX를 개선해줘.
현재 단계, 경과 시간, 최근 완료된 작업, 다음 단계가 보여야 해.
실제로 실패한 경우에는 "다시 시도", "오류 보기", "처음으로 돌아가기" 같은 복구 경로를 제공해줘.

배포 후 화면이 다를 때

보기 화면에서는 괜찮았는데 공개 사이트에서 화면이 다르게 보여.
정적 자산 경로, 환경 변수, 라우팅, 캐시, API 호출 경로를 순서대로 점검해줘.
사용자 데이터 문제로 단정하지 말고, 먼저 실제로 어떤 경로에서 다른 응답이 나오는지 확인해줘.

이미지가 깨질 때

이미지가 일부 깨지거나 흐릿하게 보여.
이미지 URL이 실제 image 응답을 주는지, 권한 문제나 리다이렉트 문제가 없는지 확인해줘.
깨진 이미지는 레이아웃이 무너지지 않도록 fallback을 넣고, 큰 히어로에는 저화질 이미지를 쓰지 않게 바꿔줘.

보안 점검

배포 전에 보안 위험을 점검해줘.
비밀 키가 코드나 화면에 노출되지 않았는지, 관리자 기능이 공개 사용자에게 보이지 않는지 확인해줘.
결제, 삭제, 외부 공개, 멤버 초대처럼 위험한 작업은 확인 단계와 권한 체크를 넣어줘.
오류 메시지는 개발자에게는 유용하되 일반 사용자에게 민감한 정보를 보여주지 않게 해줘.

나쁜 변경 되돌리기

방금 수정 이후 결과가 더 나빠졌어.
전체를 처음부터 다시 만들지 말고, 어떤 변경이 문제였는지 확인한 다음 그 부분만 되돌려줘.
되돌린 뒤에는 원래 고치려던 문제를 더 작은 범위로 다시 해결해줘.

성능 개선

첫 로딩과 화면 전환이 느린 것 같아.
큰 이미지, 불필요한 애니메이션, 한 번에 너무 많이 렌더링하는 목록, 무거운 라이브러리를 점검해줘.
사용자 경험을 해치지 않는 선에서 lazy loading, 코드 분리, 이미지 크기 최적화를 적용해줘.