헐... 미디어쿼리에 함정이 있었네요 ㄷㄷ > 자유게시판

자유게시판

헐... 미디어쿼리에 함정이 있었네요 ㄷㄷ 정보

헐... 미디어쿼리에 함정이 있었네요 ㄷㄷ

본문

반응형 제작시 미디어쿼리를 사용한다면 브라우저 자체 확대,축소기능에도 반응한다는 불편한 진실을 알려드립니다...

실험방법
브라우저 크기를 작게 해두시고 화면 축소를 해보시면 고해상도 미디어 쿼리가 반응합니다.
브라우저 크기를 크게 해두시고 화면 확대를 하시면 저해상도 미디어 쿼리가 반응합니다.

저만 모르고 있었던 내용이라면 죄송합니다 (_ _)

추신) 지인분의 실험정신에 감사드리며...
추천
0

댓글 21개

미디어쿼리는 디스플레이 크기에 반응하게 설계 됐다면,
브라우저의 크기를 조절하는것은 디스플레이의 크기를 조정하는것이지만 확대, 축소 기능은 부가 기능으로 돋보기와 같은 역할을 한다면 브라우저 벤더의 설계상의 문제인듯합니다..
레티나 디스플레이와 같이 디바이스단에서 처리된다면 미디어쿼리가 반응하는것도 이해되는부분이지만,
비슷한 기능의 모바일의 initial-scale 같이 렌더링 되는게 맞다고 생각합니다.
뭔가 전문적인 향기가 물씬 풍기지만 대부분 가정에 근거하신 거 같고, 저도 사실 잘 모르는 얘기라 선뜻 뭐라 말씀드리기는 어렵습니다만, 동상이몽님 말씀대로 브라우저 설계 상의 문제이고, 제작자들이 알아차리더라도 이 부분은 지금처럼 처리되는게 맞다는 생각이 개인적으로 듭니다.
그냥 단순하게 생각해서요. 화면 너비에 반응하게 만들어놨는데, 화면이 확대되거나 축소됐다고 가로스크롤링을 하는 상황이 온다는 건... 글쎄요. 브라우저 제작자들 의도는 둘째 치고, 웹사이트 제작자 입장에서는 환영할 만한 일은 아닐 것 같네요. ^^;;

전진님이 오셔서 의견 좀 주시면 좋을 것 같다는 생각도 들고요.

+ 지금 모바일에서 확인해보니 모바일은 동상이몽님 말씀대로 처리가 되고 있는 것 같네요.
브라우저의 확대 / 축소 기능을 저시력자용 접근성측면에서 안내해둔 몇몇사이트(국내 관공서포함) 예로 들자면,
확대/축소 기능이 화면너비(디스플레이)를 기준으로 삼는다면,
반응형으로 동일한 컨텐츠를 제공할수있게 구현 할수도 있지만, 화면 크기가 작아지면 일부 컨텐츠는 안보이게 하는 부분도 있습니다. 이럴경우 웹제작자 입장에서도 상당한 이슈가 생길것 같습니다.
저도 지금까지 확대 / 축소 기능이 모바일의 줌 인, 아웃처럼 렌더링 될것으로 예상하고 있었지만, 이번에 새롭게 안 사실이라서 반응형 웹 제작시 상당한 이슈가 될것 같습니다.
화면 크기가 작아지면 일부 컨텐츠가 안 보이는 현상(이라기보다는 처리 방법)은 지금 본문에서 언급하신 현상과는 별개로 반응형 웹 자체가 가지고 있는 웹 접근성 문제입니다. 저도 예전에 이런 부분을 지적하는 글을 쓰려고 준비하다가 접었는데 그 이유는, 장애인들이 실제로 반응형 웹이 구현된 웹 사이트에 접속하더라도 브라우저 크기를 늘렸다 줄였다 하면서 사용하는 경우가 드물고, 모바일 기기를 사용할 때도 회전해가며 사용하는 경우 역시 극히 드물 것이라는 판단 때문입니다. 사실은 드물다기보다 아예 없는 편이라고 생각하고 있습니다.
컨텐츠가 나타났다 사라졌다했을 때 가장 문제가 되는 건, 웹 사이트를 외워서 사용하는 분들의 경우인데 이에 해당하는 분들이 위에 말씀드린 형태로 사용하는 경우는 거의 없을 것이라는 거죠.

그래서 반응형 웹이 가진 웹 접근성의 최대 난점이면서 동시에 별거 아닌 문제이기도 합니다.

그리고 화면 확대가 되었을 때 분명히 작은 해상도의 스타일이 적용되고 있기는 하지만 글자 크기도 이미 확대된 상태로 표현되고 있기 때문에 현재 처리되고 있는 방식이 정상적이라고 느끼는 것입니다.
http://getbootstrap.com/ 이곳을 예로 들겠습니다.
일단 디스플레이크기가 1024x768 브라우저로 접속했고
별도의 돋보기 프로그램을 사용하시는분도 계시겠지만, 브라우저의 자체에서 지원하는 확대기능을 사용하시는분도 계십니다(주변에서 실사용자 목격)
이분이 200% 확대를 했을경우 미디어쿼리가 작동하는게 정상인가?(부트스트랩은 200% 확대시 반응함)
아니면 미디어쿼리는 작동하지 않고 화면 확대만 해야되는게 정상인가?
여기에 전 포커스를 마추고 주장을 이어가고 있습니다.
말씀하신것처럼 디스플레이 크기에 반응형 웹에서의 컨텐츠 접근성은 별게의 문제입니다.
글쎄요. 저는 동상이몽님 주장도 충분히 이해가 가고 동감도 됩니다만 바로 윗 부분에서 그에 진배없는 이야기를 하시고 내가 말하는 초점은 그게 아니라시니 좀 어리둥절 하긴 합니다.
암튼 근본적인 부분에 대해서 고민하시는 모습에서 무언가 배우게 된것 같습니다. 계속 성실히 응해주셔서 고맙습니다.^^
미디어쿼리는 디스플레이 크기에 반응하게 설계됐다면 확대, 축소기능은 모바일의 줌 인, 아웃같이 렌더링 되어야하지 않나 생각되어집니다....
확대를 150%하면 브라우저크기는 -150%가 되는거라서 브라우저를 줄이는거와 같은 거로 볼 수 있지 않나요?

모바일의 줌 아웃 기능은 돋보기 기능으로 볼 수 있구요.
모노폴리님께서 말씀하신거처럼 해석 할수도 있지만, 위에서도 말했지만, 확대, 축소 기능이 디스플레이 크기를 조절하기위한 보조기능이 아니고, 렌더링 화면의 크기를 조절하기위해(저시력자의 접근성향상을 위해) 도입됐다면, 모바일의 줌 인, 아웃기능처럼 작동해야되는게 맞다고 생각되어집니다..
이부분은 약간의 생각의 차이인것 같습니다.
컨텐츠의 크기를 확대시키는 JS를 추가하는 방법도 있겠지만,
근래의 브라우저는 대부분 확대 기능이 구현돼 있어니 이를 적극적으로 활용하고 안내하는게 맞다고 생각하고 있습니다.
브라우저 확대 축소를 지양하자는 것이 아니라, 사용성을 높이니 접근성도 향상된다는 관점입니다.
사실 이 문제는 JS 등 언급하신 것 보면 동상이몽님이나 저나 같은 관점인데 글만 다를 뿐인 것 같네요. ^^
전에 다른 곳에서 비슷한 논쟁을 본것 같은데요..
px 대신 em을 사용해서 피할 수 있다고 들은것 같습니다.

그리고, 미디어쿼리는 표준이지 구현이 아니기에, 예상하신 것과 다른 결과를 보셨다면
브라우져 구현에 문제가 있거나, 잘못 예상하고 계신것이겠죠.
em 얘기는 그렇네요. ^^; ('em을 사용해서 해결했다'는 검색결과 제목만 보고 성급히 댓글을 달았습니다. ^^')

width 대신 device-width를 사용하면 어떨까요?
크롬에서 화면확대/축소를 하면, 화면폭 px 자체가 변하므로
width 기준으로 만들어진 미디어쿼리가 반응하는 것은 맞지 않나 합니다.
------------------------------------------------------------
추가적인 의견은
http://sir.co.kr/bbs/board.php?bo_table=pb_talk&wr_id=1296
이곳으로 남겨주세요 ^^;
전체 79 |RSS
자유게시판 내용 검색

회원로그인

진행중 포인트경매

  1. 참여0 회 시작24.03.28 11:15 종료24.04.04 11:15
(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT