2013.03.27

'요즘 트렌드' 반응형 웹 사이트를 구축하는 7가지 툴

Nathan Segal | CIO
소비자들이 다양한 기기를 통해 웹 사이트에 접속하면서 반응형 웹 디자인(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 파일 등이 있다.
 



2013.03.27

'요즘 트렌드' 반응형 웹 사이트를 구축하는 7가지 툴

Nathan Segal | CIO
소비자들이 다양한 기기를 통해 웹 사이트에 접속하면서 반응형 웹 디자인(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 파일 등이 있다.
 

X