$(window).resize(function() { 

   if($(window).width() >768) {

        /* do something */ 

        $( '.gnb' ).addClass( 'hidden' );

    } 

});

출처: https://injeblog.tistory.com/82 [INJE BLOG]

'웹 퍼블리싱 > 반응형' 카테고리의 다른 글

“요즘 트렌드” 반응형 웹 사이트를 구축하는 7가지 툴  (1) 2015.07.14
소비자들이 다양한 기기를 통해 웹 사이트에 접속하면서 반응형 웹 디자인(responsive web design)이 점차 중요해지고 있다. 반응형 웹 디자인은 데스크톱, 태블릿, 모바일 기기에서 확장 및 기능하는 웹 프레즌스(Presence)를 구축하는 것과 관련되어 있다. 각 기기의 디스플레이 크기는 그 설계뿐만이 아니라 하나의 기기에서 다른 기기로 확장되면서 웹 사이트의 구성요소를 관리해야 하는 필요성 때문에 서로 다르며, 이 때문에 웹 디자이너들은 고민해야 한다.
 
한 예로 이미지를 표시하는 방식이 있다. 데스크톱에서는 괜찮아 보이는 이미지가 모바일 기기에서는 그렇지 않을 수 있기 때문에 웹 개발자들은 반드시 비율, 텍스트, 이미지 크기, 압축 등의 문제를 고려해야 한다. 또 다른 요소는 어느 정도 다양한 웹 페이지 구성요소를 서로 규격이 다른 작은 화면에 정리할 수 있는가 이다.
 
이런 반응형 웹 디자인의 문제를 해결하는데 도움이 되고자 몇 가지 툴과 온라인 서비스를 소개하고자 한다.
 
어도비 드림위버(Adobe Dreamweaver)
어도비 드림위버 CS6은 유동적인 레이아웃을 구축할 수 있는 기능을 제공한다. 이것을 통해 웹, 태블릿, 모바일 기기를 위한 3개의 레이아웃을 동시에 개발할 수 있다. 이 유동적인 레이아웃에 미디어 쿼리(Media Query)를 추가하면 페이지의 외양을 손쉽게 제어할 수 있다. 미디어 쿼리를 통해 디자이너들은 다양한 기기에 다양한 스타일을 적용할 수 있다. 그 예로, 화면 크기가 800px 이상일 때만 표시되는 스타일 집단을 들 수 있다.
 
드림위버를 사용하여 모바일 앱과 웹 사이트를 구축할 수 있다. 주된 차이점은 일부 모바일 사이트는 모든 모바일 기기에서 표시되도록 디자인할 수 있다는 것이다. 반면에, 모바일 앱은 더 많은 기능을 제공할 수 있지만 각 기기에 맞추어 따로 개발해야 한다. 이 때문에 순식간에 많은 비용이 발생할 수 있다. 각 접근방식과 관련된 차이점 및 비용은 뉴 미디어 캠페인(New Media Campaigns) 블로그를 참조하기 바란다. 
 
드림위버의 최신 업데이트에는 유동적 그리드(Fluid Grid) 레이아웃과 웹 폰트 통합에 대한 개선사항이 포함되어 있다.
 
모든 유동적 그리드 요소는 삽입(Insert) 메뉴 아래의 구조(Structure) 분류 내에 위치하고 있다. 새로운 옵션으로는 지시(Ordered), 미지시(Unordered), 목록(List) 등이 있다. 복제, 잠금, 교환 등 DIV 요소를 위한 옵션은 요소를 선택할 때 표시된다. 사용자는 유동적인 요소를 통합할 수도 있다. 유동적 그리드 요소는 웹 앱뿐만이 아니라 모바일 사이트와도 호환된다.
 
또한, 어도비 엣지 웹 폰트(Adobe Edge Web Fonts)의 라이브러리에서 자신의 레이아웃으로 추가하는 것도 가능하다. 이 때, 스크립트 태그(script Tag)가 추가된다. 이 태그는 크리에이티브 클라우드(Creative Cloud) 서버로부터 폰트를 다운로드 하여 브라우저의 캐시(Cache)에 저장하는 자바스크립트(Javascript) 파일을 참조한다. 엣지 웹 폰트는 어도비의 타이프키트(Typekit)로 구동하기 때문에 어도비 엣지 툴과 통합할 수 있다.
 
어도비는 자사의 크리에이티브 클라우드 패키지를 기반으로 다양한 가격 모델을 제공하고 있다. 이를 통해 월 19.95달러의 가격부터 시작하는 일련의 소프트웨어 구성요소를 제공하고 있다.
 
엣지 리플로우는 어도비가 현재 개발 중이며 디자인에 따라 확장되는 그리드 (또는 박스) 시스템을 사용한다.
 
레이아웃의 크기를 줄이면 해당 인터페이스(Interface)가 사이트 요소의 위치를 조정할 수 있고, 레이아웃이 변경되면서 하나의 디자인 박스가 다른 박스 아래로 이동할 수 있다.


 
엣지 리플로우는 데스크톱 또는 모바일 사이트를 우선적으로 구축할 수 있다. 또한 토글(Toggle)이 있어서 필요에 따라 레이아웃을 손쉽게 전환할 수 있다. 픽셀 기반 또는 백분율 기반의 박스를 생성하느냐에 따라 이런 요소는 레이아웃에 따라 확장되거나 고정된 크기로 유지된다.
 
각각 고정된 크기를 가진 다수의 수평 박스가 화면에 표시되어 있다고 하자. 작업 공간의 폭을 줄이면 우측의 박스가 레이아웃의 모서리로 이동하기 시작한다. 폭을 계속해서 줄이면 박스는 결국 좌측 박스의 아래로 떨어지게 된다. 이것은 디자인을 확장할 때 시간을 아낄 수 있는 기능이다.
 
디자이너들은 엣지 리플로우를 통해 자신의 아이디어를 시작적으로 시험할 수 있다. 엣지 리플로우 인터페이스는 모바일과 데스크톱 레이아웃 사이에서의 전환을 용이하게 하기 때문에 디자이너가 무슨 일이 일어나고 있는지 쉽게 확인할 수 있다. 디자이너는 원하는 레이아웃을 완성한 후에 추가 개발을 위해 CSS를 추출할 수 있다.
 
엣지 리플로우는 무료로 제공되는 어도비 클라우드(Adobe Cloud) 멤버십에 포함되어 있다.
 
톱스타일 5 프로는 기울기 및 텍스트 그림자 생성 툴과 애플 기기를 위한 웹 사이트 및 앱을 구축하기 위한 프레임워크 등 다수의 유용한 기능을 포함하고 있는 윈도우용 HTML5 및 CSS3 편집기이다.
 
CSS3 사양은 아직 최종 확정되지 않았으므로 브라우저 사이의 충돌을 방지하기 위해서는 CSS 벤더 프리픽스를 사용해야 한다. 어떤 설정을 사용했는지 기억하는 것이 쉽지는 않겠지만 프리픽서(Prefixr)가 코드에 벤더 프리픽스를 추가하여 이 부분을 관리한다.
 
또한 CSS3는 기울기를 생성할 수 있는 기능을 제공한다. 하지만 코드로 작업할 때는 상당한 시간이 소요되는 기능이다. 톱스타일은 사용자가 신속하게 레이아웃에 대하여 기울기를 지정하고 이런 설정을 추후에 편집할 수 있도록 하는 툴을 개발했다.
 
한편, 텍스트 그림자 생성기(Text Shadow Generator)를 이용하면 코드를 편집하는데 많은 시간을 소요하지 않고도 텍스트 그림자 효과를 손쉽게 생성할 수 있다.


 
마지막으로 톱스타일 5에는 아이폰, 아이팟 터치, 아이패드와 호환되는 웹 사이트 또는 웹 애플리케이션을 개발하는데 도움이 되는 프레임워크인 아이웹키트 5(iWebKit 5)가 포함되어 있다.
 
톱스타일 5는 1인 사용자용으로 79.95달러에 다운로드 할 수 있다. 기존의 톱스타일 4 사용자는 29.95 달러에 업그레이드 할 수 있다.
 
윙크사이트는 무료 모바일 서비스로서 구글 애드센스(Google AdSense)를 통해 사이트를 수익화하고 광고를 배치하기에 최적의 장소를 결정하는데 도움이 된다. 또한 스폰서를 위한 자체 광고를 제작할 수도 있다. 윙크사이트는 최대 5개의 사이트까지 무료로 사용할 수 있다.
 
윙크사이트 사용자들은 커뮤니티를 개설하고 다른 사람들을 초대할 수 있다. 또한 인터넷 잡지 또는 방명록을 생성하고 설문조사를 게시할 수도 있다. 그리고 다양한 스폰서의 맞춤형 광고를 생성하고 거기에 표시되는 페이지를 선택하며 디스플레이의 주파수 및 배치를 결정할 수 있는 기능을 제공한다. 지원되는 파일 유형으로는 유튜브(YouTube), 데일리모션(DailyMotion), 메타카페(MetaCafe), 블립(Blip), TV 비디오, FLV 파일 등이 있다.


볼루젼은 일체형 전자상거래 툴로써 쇼핑 카트를 구축하고 이것을 웹 사이트에 추가하는데 사용할 수 있다. 이것은 사이트의 데스크톱, 태블릿, 모바일 버전에 표시된다.
 
볼루젼은 일체형 쇼핑카트 시스템으로 웹 사이트가 레이아웃에 통합되어 있다. 다른 방식을 사용할 경우에는 우선 웹 사이트를 구축하고 나서 사이트에 쇼핑카트를 획득, 수정, 추가할 수 있다. 또한 사이트의 데스크톱 및 모바일 버전 모두에 수천 개의 제품을 나열할 수도 있다.


 
볼루젼은 체험판을 제공하고 있지만 한계점은 분명하다. 해당 서비스의 모바일 측면을 시험하고 싶다면 비용을 지불해야 한다. 계정에 가입할 때 스스로 사이트를 구축할지 아니면 디자인 과정에서 판매 대리인과 협력할지를 선택할 수 있다. 또한 해당 서비스는 상표권이 등록되어 있어 볼루젼의 서버에서만 구동하고 자체 호스팅(Hosting)으로 사용하는 것은 불가능하다.
 
볼루젼의 가격 모델은 월 15달러부터 195달러까지 이며, 기업용 가격 모델을 따로 제공하고 있다. 가격을 결정하는 요소로는 데이터 전송, 사용된 제품의 수, 대역폭, 소셜 미디어 통합, 등급 평가 서비스 등이 있다.
 
고모비 콘텐츠 관리 시스템을 사용하면 6,000개 이상의 모바일 기기에서 볼 수 있는 모바일 웹 사이트를 구축할 수 있다. 또한 사이트의 데스크톱 버전에 코드를 추가하여 모바일 기기로 데스크톱 사이트를 방문하는 사용자가 모바일 인터페이스로 원활하게 전환하도록 할 수 있다.
 
고모비는 보이지 않는 곳에서 이루어지는 복잡한 프로그래밍을 통해 사용하기 쉬운 인터페이스를 제공한다. 예를 들어, GPS 좌표를 추가하기 위해서는 주소를 입력하고 해당 구간을 모바일 사이트에 추가한 수, 변경사항을 저장하면 된다. GPS 기능은 모바일 인터페이스에 자동으로 나타난다. 더 많은 옵션을 원하는 디자이너들은 템플릿을 사용해 해당 인터페이스를 수정할 수 있다. 또한, 해당 페이지를 고모비 인터페이스에 연결하여 맞춤형 CSS, HTML, 자바스크립트 프로그래밍을 추가할 수 있다. 또한 자신만의 아이콘을 업로드 할 수 있다.
 
고모비가 다양한 디스플레이 옵션을 제공하기는 하지만 표 또는 자바스크립트를 제공하지는 않는다. 이를 우회하는 방법 중 하나가 드림위버를 사용해 고모비의 인터페이스에 연결되는 맞춤형 모바일 페이지를 생성하는 것이다. 이를 통해 모바일 웹 사이트에서 자바스크립트, 표, 맞춤형 CSS를 사용할 수 있다. 또한 이런 맞춤형 페이지를 원하는 곳에서 호스팅 처리할 수 있다. 그리고 볼루젼과 마찬가지로 고모비 또한 상표권이 등록되어 있어 고모비의 서버에서만 구동한다는 점을 유의하기 바란다.
 
고모비에 가입하기 위해서는 호스트파파(HostPapa)같은 재판매업자를 반드시 거쳐야 한다. 호스트파파의 경우 월 5.95로 비용은 저렴한 편이지만 해당 인터페이스에 완전히 접근할 수 없는 단점이 있다. 도메인(Domain), 등록, 고모비 사이트를 완전히 제어하고 싶다면 스스로 재판매업자가 되어야 한다. 비용은 호스팅 제공업체에 따라 다를 수 있지만, 고모비 사이트 빌더(Gomobi Site Builder)를 십분 활용하고 해당 인터페이스에서 사용자를 관리할 수 있는 옵션과 고객에게 호스팅 비용을 청구할 수 있는 권리를 얻게 된다.
 
모퓨즈를 사용하면 웹 사이트의 모바일 버전을 스스로 구축하거나 모퓨즈에 이를 일임하거나 해당 서비스의 재판매업자가 될 수 있다. 모퓨즈의 모습과 느낌은 고모비와 유사하기 때문에 모바일 사이트를 쉽게 구축할 수 있다. 기업의 필요에 따라서 20분 만에 작업을 끝낼 수도 있다. 기본적인 정보를 입력하고 기본 템플릿을 실행시킨 후, 구축을 시작하면 된다.
 
모퓨즈 인터페이스를 통해 CMS에 정보를 신속하게 입력하고 추후에 이를 해당 인터페이스에 추가할 수 있어 디자이너가 모바일 사이트를 쉽고 빠르게 구축하는데 도움이 된다.
 
다음 단계는 모퓨즈 사이트 메뉴(Mofuse Site Menu)이다. 여기에서는 사이트에 요소를 추가하고 외양, 모습과 느낌, CSS 속성, 색상, 수익화, 분석, 소셜 미디어 통합 등의 순서로 편집할 수 있다.


 
다른 모바일 프로그램과 마찬가지로 추후에 코드를 생성하여 데스크톱 사이트에 삽입할 수 있다. 누군가 모바일 기기로 데스크톱 사이트를 방문하면 코드가 이를 감지하고 사용자에게 모바일 인터페이스를 원활하게 제공한다.
 
모퓨즈는 14일 간의 무료 체험판을 제공한다. 기준 가격은 월간 조회수 및 필요한 구축 블록의 수에 따라 달라진다. (그 범위는 RSS 피드부터 날씨 위젯까지이다). 예를 들어, 점프스타트(JumpStart) 패키지는 10개의 요소를 제공하고 월간 1,500회 조회를 제공하며 비용은 7.95달러이다. 반면에, 얼티메이트(Ultimate) 패키지는 무제한 요소와 1,500,000회 조회를 제공하며 비용은 월 199.00 달러이다. 하지만 얼티메이트 패키지와 월 89달러짜리 중소기업(Small Business) 패키지로는 CSS를 편집할 수 있다.
 
또한 모퓨즈 서비스의 재판매업자가 될 수도 있다. 하지만 고모비와는 달리 설치 비용이나 약정이 없다. 


'웹 퍼블리싱 > 반응형' 카테고리의 다른 글

브라우저 가로너비에 따라 제이쿼리 함수 적용  (0) 2021.05.21

+ Recent posts

티스토리툴바