이 글은 현업에서 개발을 하다 생긴 크로스 브라우징 이슈에 대해서 공유하고 어떻게 해결하는게 좋을지를 고민한 글입니다.
문제 상황
위에 화면은 모두 1920x1080 해상도의 모니터이고 모두 100% 상태입니다. 그리고 px로 정적으로 단위를 기입해서 크기를 지정했습니다. 하지만 실제로 화면상에는 두 화면이 다르게 보입니다.
왜 그런걸까요?
결론부터 얘기하면 디스플레이의 차이입니다. 위에 맥 OS의 경우 운영체제가 맥이라서가 아닌 레티나 디스플레이기 때문에 같은 크기의 px이라도 다르게 렌더링을 시켜줍니다.
디자이너분이 레티나 디스플레이에서 1080 환경을 기준으로 디자인을 주게 되면 일반 디스플레이에서는 상태표시줄 때문에 실제 1080 모니터라도 실제로는 900대 크기의 높이를 가진 디스플레이처럼 렌더링이 되어 처음에 사용자에게 보이는 화면이 잘려서 보이는 단점이 존재합니다.
그럼 어떻게 해결할 수 있는데?
결론부터 얘기하기 전에 내가 만드려는 서비스는 어떤 유형인지 파악해볼 필요가 있습니다.
위에처럼 정적인 정보의 전달이 우선인 사이트의 경우 높이를 사용자의 디스플레이마다 대응하도록 화면에 꽉차게 만들필요 없이 자식요소들에 높이에 의해서 자동으로 스크롤이 생기는 사이트 방식으로 만드는게 좋아보입니다.
위 두개의 서비스 소개 페이지의 경우 사용자의 디스플레이나 기기가 바뀔때마다 그 높이나 너비에 대응하여 화면에 꽉차도록 마치 앱처럼 만들었습니다.
이게 가능하려면 내부에 있는 요소들이 정보전달을 위해 방대한 내용이 들어가면 안되고 간결하게 핵심적인 내용만 들어간 경우 깔끔하게 렌더링 하는게 가능할꺼 같습니다.
그럼 앱처럼 모든 디스플레이에 대응하면서 많은양의 정보전달을 하고 싶은 경우라면?
이 경우가 저희 pm분이 원하던 부분이였습니다... ㅎㅎ
이를 가능하게 하려면 디자이너분과 미리 의견을 조율해서 디자인을 해야합니다.
앞의 레티나 디스플레이의 이슈에 대응하기 위해 처음 디자인부터 컨테이너를 피시에선 1920x940 기준으로 상태표시줄이 가린다는 전제하에 1080보다 조금 더 작게 디자인을 해줘야하고 내부 내용들의 부모 박스 높이에 100vh를 주고 수직 중앙정렬이 되도록 만들어주는게 필요할꺼 같습니다.
최종수종본 입니다.
'Frontend(Web) > 개발 일지' 카테고리의 다른 글
| 다국어 서비스 적용 회고 (1) | 2024.01.16 |
|---|
