반응형 홈페이지를 작업을 할 경우에는 편리할 경우도 대부분 있지만 가끔씩은 문제가 발생하는 경우도 있다.
특히 슬라이드 풀사이즈 이미지일 경우 pc에서는 가로가 긴 와이드형태의 이미지를 쓰지만 모바일로 되면 줄어들고 와이드의 이미지도 비율적으로 줄어들기 때문에 현저히 작은 배너가 되어 버린다.
그렇기 때문에 모바일인지 피씨인지 디바이스 구별을 하여 모바일이라면 모바일에 맞는 배너를 작업을 하는게 보통의 경우다.
메인 슬라이드나 대형 배너인 경우 그렇게 되고 그게 아닌 이미지나 디비전이라면 가로 크기에 맞게 엘리먼트가 개행이 되거나 줄어들어야 한다.
고정 width, height를 가지고 제작을 해서 pc 타켓이 되었다면 모바일일 경우에는
대부분 width:100%로 해당 엘리먼트를 고쳐주면 대부분이 해결이 된다.
그렇게 하기 위해서는 이전에 몇몇 했던 프로젝트에서는 에이전트가 모바일이냐에 따라서 별도로 로드하는 css 파일을 첨부하기도 했었는데 이제는 그렇게 하는 경우는 거의 없다.
대신 미디어 쿼리를 활용해서 사용을 하기 때문에 구간별 스마트폰 사이즈나 태블릿 사이즈 혹은 좀 더 크지만 pc보다는 작은 사이즈에 대한 부분도 대응이 가능하다.
media query와 반응형으로 줄여졌을 때 많이 이상하다면 그부분은 그부분만에 맞는 이미지를 리디자인을 해서 첨부를 하거나 레이아웃 변경을 해야 한다.
기본 레이아웃은 부트스트랩등을 활용을 화면 어렵지가 않다.
보통 브라우저별 기본값이 조금씩 다르기 때문에 clear css를 구하거나 만들어진것으로 초기화를 모두 시킨 후에 알맞는 속성을 부여하게 된다.
앞서 말한 슬라이드 같은 경우도 가로 2천짜리 이미지 세로 500짜리가 모바일이라고 그 비율대로 줄어져 버리면 사진 안에 있는 글이 보일까.
늘 작업을 하면서도 균형의 조화가 딜레마이긴 하다.
차라리 아예 모바일 pc분리를 해서 애초부터 제작을 한다면 일의 양은 더 많아 지지만 전용이기 때문에 그만의 편리함을 주는 부분이 있기는 하다.
한 디바이스만 전념하면 되므로..
하지만 속도나 효율도 실무에선 크게 작용을 하는 부분이기 때문에 반응형으로 입혀놓고 심하게 틀어지거나 안맞는 부분만 수정을 하는 경우가 많이 있다.
나역시도 그렇고.