광고



Today : 346
Yesterday : 476
Total : 376823

Adobe Edge, Dreamweaver, Eclipse 및 기타 프레임워크에 대한 종속적인 IDE에 대한 각종 정보입니다.

메튜장 2012-09-28 19:31 조회 수 6854 댓글 수 0

Adobe Dreamweaver는 필자가 가장 좋아하는 툴 중 하나입니다. 만약 개발을 주로 하셨던 분들이라면 드림위버로 어떠한 프로그래밍을 한다는 것은 국내에서는 매우 생소하실 것입니다. 왜냐하면 아직까지는 드림위버가 국내에서 주로 웹 퍼블리셔의 툴이라고 여겨지는 경향이 많기 때문입니다.

하지만 드림위버는 CS 5 부터 꾸준히 HTML5 jQuery를 지원하기 시작하여 현재는 필자의 생각에는 웹 앱 개발에는 가장 많은 기능을 지원하지 않나 싶습니다. 최근 출시된 CS6을 기준으로 몇 가지 특징을 살펴보자면 아래와 같습니다.

  • PhoneGap지원 : Adobe PhoneGap을 통해 Android™ iOS용 기본 앱을 제작 및 패키지화할 수 있습니다. PhoneGap 프레임워크를 사용하면 Dreamweaver에서 기존 HTML을 휴대폰 앱으로 변환할 수 있습니다. 함께 제공되는 에뮬레이터로 레이아웃을 테스트할 수 있습니다.
  • CSS3 전환 : CSS 속성을 변경하여 전환 효과로 애니메이션을 적용하면 웹 디자인을 생동감 있게 표현할 수 있습니다. 페이지 요소를 세밀하게 지정하거나 시선을 사로잡는 효과를 만들 때 웹 디자인에 대한 탁월한 제어력을 그대로 유지할 수 있습니다.
1_47.png
(그림 : Adobe Dreamweaver CS 6 의 라이브 뷰 에서의 WebKit 랜더링 장치에 따른 속성 제공)
  • 라이브 뷰 : HTML5 컨텐츠 표시를 지원하는 WebKit 렌더링 엔진을 사용하여 게시하기 전에 페이지를 확인할 수 있습니다. 브라우저 간의 호환성과 레이아웃의 일관된 표시를 보장할 수 있습니다.
  • 멀티스크린 미리보기패널 : 멀티스크린 미리 보기 패널을 사용하여 스마트폰, 태블릿 및 데스크탑에 배포할 컨텐츠를 디자인할 수 있습니다. 미디어 쿼리 지원을 활용하여 광범위한 디바이스에 맞는 스타일을 지정하고 디자인 렌더링을 시각적으로 확인할 수 있습니다.

1_48.png

(그림 : Adobe Dreamweaver CS 6 에서 Drag-and-Drop방식으로 지원되는 jQuery Mobile)

  • jQuery Mobile 지원 : jQuery 코드 힌트를 사용하여 인터랙티브한 고급 기능을 추가할 수 있습니다. jQuery를 통해 웹 페이지에 인터랙티브한 기능을 간편하게 추가할 수 있고 휴대폰용 템플릿을 사용하면 바로 작업을 시작할 수 있습니다.

이 정도만 살펴보아도 가히 HTML5 영역을 커버하는데는 획기적인 툴이라 할 수 있습니다. 아직까지 어떤 브라우저도 WebKit을 자체적으로 내장하고 미리보기 브라우저로 사용한 툴은 없었습니다.

또한 UserAgent 같은 브라우저 속성에 따라 접속한 장비라던가 혹은 장치의 기울기 등을 툴 내에서 테스트하고, 무엇보다 장치마다 사이즈를 다르게 하여 여러 사이즈의 장비마다 컨텐츠의 미리보기를 가능하게 합니다. 최근 우후죽순으로 출시되는 안드로이드 폰의 경우 그 크기가 너무나도 다양하여 이러한 기능은 필수라고 생각됩니다.


1_49.png

(그림 : Adobe Dreamweaver CS6에서의 HTML5 표준 탬플렛 제공)


1_50.png

(그림 : Adobe Dreamweaver CS6에서의 HTML5 의 크기에 맞는 탬플릿 자동생성)


위 그림처럼 드림위버는 특히 탬플릿에도 HTML5의 자동 생성이 포함되어 있는데 html5의 표준 문서양식을 선언해 주는 것은 물론, 위와 같이ㅣ Fluid Grid Layout을 생성하면 마치 CSS3 Media Queries를 만들어 준 것처럼 모바일 장비의 화면의 사이즈마다 각기 다른 CSS구성요소가 생기게 됩니다.


또한 템플릿을 사용하면 드림위버는 BoilerPlate CSS를 자동으로 로드하게 되어있습니다. BoilderPlate HTML / CSS / JS 템플릿을 크로스 브라우징과 최적화된 퍼포먼스 및 Ajax 와 플래시의 Cross Domain같은 여러가지 HTML5의 문제로 제기되었던 사례들을 묶어서 제공하는 CSS 입니다.

1_51.jpg

(그림 : boilderplate 의 특징)

BoilderPlate의 기능은 다음과 같습니다.

-       HTML5 지원

-       IE6을 포함한 크로스 브라우저 호환성

-       캐싱, 압축 룰, 최적화된 설정

-       모바일 브라우저 최적화

-       유닛 테스트 도구

-       자바스크립트 프로파일링

-       iOS와 안드로이드 모바일 브라우저를 위한 CSS 룰 스펙 제공

1_52.png

(그림 : Adobe Dreamweaver CS 6 에 포함된 PhoneGap)


또한 무엇보다 필자를 놀라게 했던 것은 PhoneGap과의 통합입니다. 기존에도 물론 드림위버는 하이브리드 앱을 위해 iOS와 안드로이드의 SDK만 툴에서 연결해 주면 자동으로 HTML에서 네이티브 앱으로 바꿔주는 서비스를 CS 5.5에서 선보인 적 있습니다. 하지만 CS 6 부터는 아에 PhoneGap이 내장해서 들어왔습니다. 이에 빌드를 원하는 SDK의 경로만 지정해 준다면 PhoneGap이 지원하는 네이티브 앱으로 Build 및 배포가 가능합니다.

1_53.png

(그림 : PhoneGap의 자체 빌드 서비스)


또한 최근 새롭게 선보이는 PhoneGap Build 서비스까지 통합되었습니다. 이 서비스는 PhoneGap에 우리가 만든 HTML / CSS / JS 파일만 업로드 하면 자동으로 해당 네이티브 버전의 컴파일된 파일을 제공해주는 서비스입니다. 물론 개념적으로는 드림위버에서 제작한 걸 업로드 한다 고 생각할 수 있지만 그래도 폰갭과의 통합으로 하이브리드 앱 개발이 무척이나 쉬워졌습니다.

물론 드림위버의 이러한 PhoneGap 지원은 웹 앱을 개발하는 데에는 크게 영향을 끼치지는 않습니다. 다만, PhoneGap지원으로 생기는 여러가지 모바일 브라우저를 테스트 할 수 있는 부분은 우리가 드림위버를 사용해야 하는 하나의 이유가 될 수도 있겠습니다.

또한 드림위버가 이렇게 훌륭한 툴임에도 불구하고 퍼블리셔나 코더용 툴이다라는 편견으로 대다수의 국내 개발자들은 단순히 이클립스나 Visual Studio를 사용하는 경향이 있습니다. 하지만 필자의 생각으로는 이미 플래시가 HTML5의 그늘에 가려진 시점에서 Adobe는 발빠르게 자신들이 나아갈 위치를 잡고 이에 수 많은 시행착오를 겪으며 만들어낸 툴인 만큼, 드림위버는 웹 앱 개발을 꿈꾸는 여러분들에게 큰 힘이 되는 툴이 될 것입니다.

profile

Matthew, Chang. www.matthew.kr

아이젝트랩 대표/감성적 웹 개발자/HTML5Korea운영자/cloie♥

[관심분야]HTML5/Mobile Web/Web App/JAVA/Spring/jQuery/PhoneGap

고독한 피아니스트/현실과이상의낭만을추구하다.


모두가 행복할 수 있는 웹 세상을 만듭니다.

List of Articles
번호 제목 글쓴이 날짜 조회 수
» Dreamweaver CS 6으로 웹 앱 개발하기 file 메튜장 2012-09-28 6854
4 Tiggzi 모바일 앱 빌더와 함께 HTML5 웹앱 개발하기 아이지 2012-04-13 7264
3 HTML5 게임을 빠르게 만들 수 있는 제작툴 추천 3가지 file 아이지 2011-12-08 12935
2 HTML5 Audio - 웹기반 HTML5 크로스 플렛폼 <audio>테그 메이커 툴 아이지 2011-12-07 5314
1 HTML 5 저작 가능한 툴 6개.(번역) 메튜장 2011-05-30 10589
  • IZECT LAB
오픈아이디