어쩌다 알게 되었나?
최근에 학교에 프로젝트X라는 과목명으로 서비스 개발하는 과목이 개설되면서 프로젝트 팀이 동아리 중심으로 운좋게 편성되어서 참여하게 되었다.
나는 프론트엔드쪽으로 참여하게 되었는데 개발에 경험이 많은 팀원분이 반응형웹에 대한 필요성과 공부요청을 해주셔서 찾아보게 되었다.
왜 필요?
하나의 서비스를 만든다면 다양한 기기에서 쓴다. 근데 화면이 다 다르다
데스크탑 버전용으로 만든걸 모바일로 볼 경우 렌더링이 데스크탑 기준으로 돼서 콩알만한 글씨로 보인다.
이를 위해 ‘반응형 웹’으로 제작하여야 한다.
(사진 출처 : https://jongmin92.github.io/2017/02/09/HTML/viewport/)
viewport
이를 위해 필요한게 meta태그의 viewport이다. viewport의 width를 980px로 설정하게되면
모바일 기기의 경우 이 설정이 적용돼서 데스크탑 기준이 아닌 모바일 기준으로 렌더링 할 수 있게된다.
(데스크탑의 경우 이 속성을 무시한다고 한다.)
모바일 기준이라 이에 맞춰 글자크기나 이미지 크기 역시 같이 커진다.
개발시에는 이미지의 경우 width = 100%를 설정해주는등 모바일을 고려한 설정들로 코드를 짜면 될 것 같다.
(사진 출처 : https://jongmin92.github.io/2017/02/09/HTML/viewport/)
추가로 저해상도 폰(옛날 폰들)의 경우 980px보다 낮은 해상도를 줘야하는 것 같다.
media query
viewport로 이미지의 크기라던가 폰트 사이즈를 모바일용으로 알아서 바꿔준다는 점은 이해할 수 있다.
하지만 데스크탑 버전까지 만든다면 다른 문제가 생긴다.
(사진 출처 : https://www.samsungsds.com/kr/insights/Responsive-Web-2.html)
그래서 위의 사진과 같은 레이아웃의 변화를 신경써야하는 문제가 생긴다.
여기서 그렇다고 html파일을 따로따로 작성할 필요가 없는 이유는 위의 사진이 아주 적절한 예시인데
맨위의 헤더 부터 시작해서 네비게이션, 그리고 메인콘텐츠등 쓰이는 콘텐츠들은 어쨌든 모바일이던 데스크탑이던 똑같음을 알 수 있다.
왼쪽화면(데스크탑 버전)의 오른쪽 작은 콘텐츠 같은 경우엔 아마 모바일에선 밑으로 간다던지, 모바일에서 까지 필수적인 정보가 아니기 때문에 가렸다는 뜻같다.
어쨌든 화면 구성만 바꾸면 되는 문제이기 때문에 이를 미디어쿼리로 몇 픽셀 이하의 경우 해당 콘텐츠의 배율을 몇 퍼센트로 늘린다던지, display:none으로 가린다던지의 설정을 주는것 같다.
