크롬 확장 프로그램 충돌로 인한 레이아웃 깨짐 문제 해결

Situation

로그인 페이지 아이디 입력란 레이아웃 깨짐 문제 발생

 

마켓 컬리 사이트 클론 코딩 프로젝트 중에 레이아웃이 깨지는 문제가 발생하였다.

아이디 입력란과 비밀번호 입력란은 동일한 클래스를 주고 같은 스타일을 적용하였는데 비밀번호는 원하는대로 스타일이 나와주었고 아이디 입력란만 먹통이였다.

 

회원가입 페이지 아이디 및 이름 입력란 레이아웃 깨짐 문제 발생

 

회원가입 페이지도 마찬가지로 아이디와 이름 입력란만  레이아웃이 깨지는 현상이 발생하였다.

Task

로그인 페이지와 회원가입 페이지의 레이아웃 깨짐 현상을 해결하여 원하는 스타일이 나오도록 해야했다.

Action

먼저 시도해 본 방법은 캐시 비우기 및 강력 새로고침이였다.

그대로다.

 

두 번째 시도해 본 방법은 작성한 코드와 로컬 서버 상태를 확인하는 것이였다.

코드를 아무리 보아도 클래스를 잘못 주었다거나, 스타일을 잘못 준 것도 아니였다. 로컬 서버의 문제도 아니였다.

 

세 번째 시도해 본 방법은 css의 우선순위를 높여 보는 것이였다.

역시 이것도 해결이 되지 않았다.

 

네 번째 시도해 본 방법은 크롬, 파이어폭스, 웨일, 엣지 총 4개의 각 브라우저에 접속해서 확인해 보는 것이였다.

크롬 제외하고 파이어폭스, 웨일, 엣지 모두 정상적으로 랜더링이 되어 있었다.

 

다섯 번째 시도해 본 방법은 맥OS에서 접속해 보는 것이였다.

맥OS에서 사파리로 접속 시 문제가 없으나, 크롬으로 접속하면 레이아웃이 깨졌다.

 

크롬이 문제인 것으로 좁혀졌고 마지막으로 시도해 본 방법은 시크릿창으로 확인해 보는 것이였다.

시크릿창으로 확인 시 레이아웃이 아무런 문제 없이 잘 보이는 것이였다.

원인을 도무지 알 수 없어 설치된 확장 프로그램을 하나씩 꺼보았다.

 

Grid Layout System

문제의 원인을 찾아내었다.

이녀석을 끄고 확인하면 레이아웃이 정상으로 돌아왔고 다시 키면 레이아웃이 깨지는 것이였다.

문제는 이녀석을 끄는 것만이 버그가 픽스되었다고 볼 수 없었고, 동일한 익스텐션을 설치한 유저가 페이지에 접속한다면 계속 깨져있는 레이아웃을 보았을 것이다.

 

다시 코드 창을 확인해 보았다.

 

아이디와 비밀번호 input 영역을 감싸고 있는 div의 클래스가 element 없이 단순하게 input-wrapper로 되어있는 부분이 거슬렸다.

클래스명을 login-input-wrapper로 수정하고 css 코드도 수정된 클래스명으로 고쳐보았다.

클래스명을 수정하니까 해결이 되었다.

 

회원가입 코드도 마찬가지로 input 영역을 감싸고 있는 div의 클래스를 확인해 보았다.

 

 

여기도 마찬가지로 form-input-wrapper, label-wrapper 등 단순하게 되어있는 것을 확인할 수 있었다.

register-input-wrapper, register-label-wrapper로 수정하였고 다시 회원가입 페이지를 확인해 보았다.

 

 

이것 역시 클래스명을 수정하니까 해결되었다.

Result

두 페이지 모두 이와 비슷하게 단순하게 지었던 클래스명들을 수정 보완하였고 추가적인 문제는 발생하지 않았다.

그동안 단순히 프로젝트 디렉토리 내 겹치지 않게끔만 신경을 써왔는데 예상치 못한 문제가 발생되어 해결하느라 애를 좀 먹었다.

 

이를 통해서 느낄 수 있었던 부분은 BEM 패턴 방식을 사용했더라면 이런 문제가 발생하지 않았을 거라는 생각이 들었고 클래스명을 대충 짓지 않도록 신경을 조금 더 써야겠다는 생각이 들었다.