반응형

 

블루웨이브 홈페이지 개편 배경(http://www.bluewaves.co.kr)

N스크린은 디바이스 간 연동으로 컨텐츠를 다양하게 볼 수 있는 개념으로 스마트폰 대중화화 더불어 각광을 받기 시작했고, 태블릿PC 사용자들이 늘어남에 따라 더욱 주목을 받기 시작했습니다. 전문가들은 N스크린 시대의 도래는 진정한 콘텐츠의 시대의 도래를 의미한다고 말하며 콘텐츠 시대의 도래는 콘텐츠가 시스템에 종속되는 것이 아니라 콘텐츠를 위해 나머지 시스템이 존재하는 콘텐츠 중심의 생태계 재편으로 연결될 것이라고 말하고 있습니다.
그렇다면 지금 업체들의 가장 큰 고민은 N-screen에 대응하는 것입니다. 즉 컨텐츠를 하나를 만들어서 다양한 형태의 화면사이즈, 모바일폰, 태블릿, TV 에 대응이 되어야 한다는 것입니다. 웹기술의 엄청난 강점인 Cross platfom 이나 Cross device 대응은 이제 기본입니다.
이제는 한번 만든 컨텐츠를 다양한 크기의 화면에 어떻게 대응 될것이냐가 정말 중요한 토픽입니다. 그런데 이런 문제를 해결해 주는 거의 유일한 기술이 바로 웹기술(MediaQuery)이라는 점이 우리 웹퍼블리셔의 전망을 밝게 해주어 필자는 퍼블리셔로서 자긍심을 더욱더 가지게 합니다.
현재 아이패드, 갤럽시 탭과 같은 태블릿이 나오면서 기존의 앱개발자들은 화면 해상도 대응하는 것에 지금 비상이 걸렸습니다.
그런데 우리 웹기술(html5 Media Query)에는 이미 이런 내용들이 모두 준비되어 있습니다.
그리하여 우리나라에는 아직 많이 사용되지 않은 Media Query를 사용하여 N-Screen을 보여 드리고자 이렇게 개편하게 되었습니다.

Media Query를 이용한 Responsive Web Design 구현

웹서비스 사업자들의 고민은 스마트폰만이 아닙니다. Connected Device들이 다양해지면서 대응해야 할 전략과 개발 리소스는 급증있고 이에 대표적인 Device가 Smart Pad입니다. Blaze의 최근 보고서에 의하면 iPad의 경우 97%의 사이트가 PC Web으로 대응을 하고 있지만, Honey Comb이 탑재되어 있는 XOOM은 32%의 사이트가 Mobile Web으로 대응을 하고 있는 것으로 알려져 있습니다. 앞으로 이런 단편화 현상은 더욱 심화될 것입니다.
이런 고민을 해결하고자 최근 많이 도입되고 있는 것이 바로 'Responsive Web Design(반응형 웹)' 입니다. Responsive Web Design은 Screen Size, Orientation 등 divice 환경에 반응하여 최적화된 웹페이지를 제공하는 것을 말합니다.
그리하여 새로운 기술을 보여드리고자 탄생하게 된것이 블루웨이브 반응형 웹사이트입니다.

블루웨이브 Responsive Web(반응형웹) Media Query 표현기법

그렇다면 간단하게 블루웨이브 반응형웹 사이트의 표현기법에 대해 알아보겠습니다.
HTML5는 차세대 웹표준스펙적용을 선행적으로 수행하였고 CSS3는 Media Query를 사용하여 유연한 레이아웃을 적용할 수 있도록 구성하였습니다.
그렇다면 미디어쿼리 문법에 대하여 보겠습니다.

@media all and (max-width:480px) {
	해상도 480px이하 Size 의 css 적용 적용
}
@media all and (min-width:481px) and (max-width:1024px) {
	해상도 481px이상 1024px이하 Size의 css 적용
}
@media all and (min-width:1025px){
	해상도 1025px 이상 Size의 css 적용
}

블루웨이브 반응형 웹사이트는 크게 Mibile Device 해상도를 고려한 위 첫번째 미디어쿼리를 적용하였고, Tablet Device 해상도를 고려한 위 두번째 미디어쿼리를 적용, DeskTop 해상도를 고려한 위 세번째 미디어쿼리를 적용하여 작업하였습니다.

앞으로 Media Query의 미래

현재 시점에서 Responsive Web(반응형웹)의 효용성에 대해 논란도 존재합니다.
하지만 Responsive Web(반응형웹)은 특정 Framework을 지칭하는 것이 아니고 방법론입니다.
Responsive Web은 단편화가 심화되고 있는 Web 환경을 대응할 수 있는 좋은 해결책이라고 생각합니다. 그리고 앞으로 2년후에는 많은 사이트들이 Responsive Web(반응형웹)으로 만들어진 사이트들이 트렌드가 될 것같은 생각도 듭니다. 마지막으로 효용성을 고려한 최근에 나온 Responsive Web으로 만들어진 해외 사이트 두개를 아래와 같이 보여드리며 글을 마치겠습니다.

반응형

+ Recent posts