PR 을 보내면서, 데모 홈페이지를 같이 첨부하는 편인데,
내 화면에선 깨지지 않던 레이아웃이 리뷰어 분의 화면에선 깨져있었다.
근데 내 화면에선 아무리봐도 레이아웃이 깨져있지도 않았고, 크롬의 글꼴 크기를 조정해보아도 깨지지 않았다.
일단 레이아웃은
- width: 700px
- height: 500px
로 잡혀있는 상황이었는데, 크롬환경이 아닌 사파리 환경으로 테스트해보았다.
뭐지? 왜 사파리에서는 또 깨지지? 브라우저 별로 기본 폰트크기가 다른건가?
일단은 width, height가 px 단위로 사용되고있어서 그런가? 라는 의심으로 rem 단위로 변경해보았다.
브라우저의 폰트 크기를 따르는 rem 단위로 변경하니 레이아웃이 깨지지않았다.
일단 rem 단위로 변경하여 해결이 되었으니, 브라우저 별로 폰트크기가 다르게 설정되어있음을 의심해볼 수 있었는데,
가만 생각해보니, 32인치 모니터를 사용하면서 글꼴 크기를 기본 80% 로 사용하고 있던게 생각이 났다.
근데 그건 100% 로 올려도 깨지지 않던데? 뭐가 문제인지? 생각해보았는데,
단순 + 버튼 으로 크기를 변경하는게 아니라 크롬의 기본 글꼴 크기 설정을 바꾸어 줘야 깨지는 것을 볼 수 있었다.
이와 같은 경험을 하고서
레이아웃을 px 단위로 설정하는 것이 왜 위험한지 에 대해서 다시 한번 생각해볼 수 있었고,
사용자마다 브라우저 환경이 다양할 수도 있겠다 (일단 내가 다양한 사람 1) 라는 생각이 들었다.
