기획업무를 하다보면 사용자 환경에 맞춘 페이지를 기획하는 부분이 중요하다.
다른분들은 어떻게 지칭하는지 정확하게 알지는 못하지만, 나의 경우에는 반응형 그리고 적용형 이라고 부른다.
반응형은 말그대로 사용자 화면 너비에 맞춰서 특정 구간별 요소를 처리하여 하면 너비에 반응하는 형태
그리고 적응형은 사용자 브라우저의 agent를 구분하여 PC 환경인 경우, 모바일환경인 경우의 화면을 별도로 제공하는 형태이다.
반응형의 경우, 사용자 화면 너비에 맞추기 때문에 기술적?으로는 1벌로 구현되지만
적응형의 경우 사용자의 기기에 맞추어야 하기 때문에 최소 2벌, 많은 경우 3벌까지도 준비를 해야한다.
반응형으로 제작된 대표적인 예는 뭐가 있을까....? 고민하던 찰나에 webactually란 사이트를 찾았다.
 |
| 출처 : webactually.co.kr |
해당 페이지를 보면 HeroBanner의 We Make Actually란 문구 밑에 3개의 요소가 PC와 모바일 화면 너비에서 각각 다르게 표기되는 것을 볼 수 있다.
전체적인 UI가 너비에 따라서 변경되는 것을 확인 가능하다.
적응형 페이지의 대표적인 예는 네이버라고 할 수 있다.
PC냐 모바일이냐에 따라 UI가 어떻게 달라지는지는 이미 다들 익숙할것이기 때문에 별도로 첨부하지 않겠다.
다만, 네이버의 경우 PC 환경에서 접속하면 naver.com 으로 URL이 노출되고
모바일인경우 naver.com 을 입력하고 접속해도 URL은 m.naver.com으로 접속이 되는 것이 확인될 것이다.
이처럼 모바일환경에 맞춘 도메인을 별도로 구분하여 m.~ 형태로 사용하는경우와
naver.com/m/~ 등과 같이 별도로 구분하여 사용하는 경우가 많을것이다.
그리고 반응형의 경우 어떤 너비에서 UI를 변경할것인가를 결정해야하는데 이때 사용되는 용어가 brakepoint라고 한다. 모든 너비에서 변경되는 UI를 준비할 수는 없기 때문에
대체적으로 많이 사용되는 너비를 준비하고 해당 너비미만인경우에 대한 부분을 준비하면된다.
댓글
댓글 쓰기