작성일자
카테고리 모바일/드림위버


어도비 드림위버는 현존하는 최고의 웹 개발툴입니다. 드림위버는 원래 플래시와 파이어웍스와 함께 매크로미디어라는 회사제품이었는데 어도비가 인수를 하면서 어도비 드림위버로 변경되었습니다. 이제품들의 단축키를 보면 환경설정 단축키가 Ctrl+U로 되어있죠. 다른 어도비 CS 제품들은 Ctrl+K입니다. 이것은 매크로미디어시절부터 사용자들이 익숙해진 단축키를 그대로 유지한 것인데 그만큼 사용자를 위한 배려라고 생각됩니다.

어도비 드림위버는 텍스트 에디터만 사용했던 사람들에게는 사용하기가 아주 복잡합니다. 텍스트 에디터를 사용해서 얼마든지 웹디자인이 가능하고 또한 초보자들은 코딩연습이나 코드에 익숙해지기위해서 텍스트 에디터를 사용하는 것이 기본이죠. 어떤분들은 코드힌트 기능도 사용 못하게 합니다. 점 하나라도 직접 찍어서 모든 코드를 완성하라고 하고 다른 코드를 복사해서 사용하는 것도 금지하죠. 맞는 이야기입니다. 코드 하나라도 직접 입력해 보고 실수해서 틀리고, 틀린 것 찾는 것이 웹디자인 배우는데 지름길이거든요. 


하지만 어느정도 실력이 갖추어지면 웹 개발툴을 사용하는 것이 아주 효율적입니다. CSS 하나 수정하려고 해도 텍스트 에디터를 사용하면 검색해서 찾아야 하지만 긴 내용에서 원하는 부분 찾기란 참 어렵습니다. 내가 코딩해 놓고도 찾기가 어려운 것이죠. 하지만 드림위버는 금방 찾을 수 있습니다. 그것도 클릭 몇번만 하면 되죠. 그래서 웹디자인 전문가들은 드림위버를 선호합니다.

드림위버 사용에 있어서 장점은 아주 많지만 특히 중요한 것은 모바일 웹디자인에서 좋은 도구라는 것입니다. 제이쿼리에서 제이쿼리 모바일을 개발할때 어도비에서는 전문 기술자 두명(Kin Blas, Jorge Taylor)을 파견하여 적극 지원했습니다. 드림위버로 모바일 웹디자인을 하면 제이쿼리 모바일 코드를 자동으로 생성할 수가 있습니다. 몇번의 클릭만으로 기본적인 모바일 웹페이지가 완성됩니다.


미국 NYSE 상장회사인 IT 리서치 전문 기업 가트너(Gartner)는 2010년에 나온 보고서 에서 2013년에 인터넷 접속도구로서 모바일 디바이스가 데스크탑을 뛰어 넘는다고 예측했습니다. 이러한 예측은 우리나라 현실을 보면 굳이 전문 리서치가 필요하지 않습니다. 스마트폰이 대세인 요즘 모바일 웹디자인에 대해서도 관심을 가져야할때인 것으로 생각되어 올해는 모바일에 대해서 주로 포스팅하기로 방향을 전환했습니다. 

그동안 국민 웹브라우저인 인터넷 익스플로러가 CSS3를 잘 지원하지 않았기에 미루고 있었던 CSS3와 HTML5에 대해서도 포스팅을 진행합니다. 왜냐하면 모바일용 웹브라우저는 IE를 사용하지 않고 다양한 웹브라우저를 사용하기 때문이죠. 이러한 웹브라우저들은 HTML5와 CSS3를 적극 지원합니다. 모바일용 웹페이지 제작은 기존의 웹페이지를 그대로 사용하여 레이아웃만 변경하면 됩니다. 또한 코드도 HTML5로 바꿔주면 됩니다. 하나의 웹페이지로 여러가지 모바일 디바이스에 최적화된 웹페이지가 가능한 것이죠.

모바일 웹디자인에 관한 포스팅에 대해서는 텍스트 에디터를 사용해도 되지만 위에서 언급한 것처럼 드림위버가 아주 편리하기 때문에 드림위버로도 글을 올릴 예정입니다. 코드 생성이 얼마나 쉬운지 실험해보기로 합니다.

 
드림위버 CS5.5를 열고 Ctrl+N키를 누르면 새문서 만들기 창이 나옵니다. 1의 Page from Samples를 선택하고 Mobile Starters를 선택하면 세가지 옵션이 나옵니다. CDN은 Content Download Network의 약자로 제이쿼리 모바일 사이트에 연결되어 제이쿼리 모바일 웹디자인에 사용될 파일인 jquery.mobile.css파일과 jquery.mobile.js파일, jquery.js파일이 제이쿼리 사이트와 링크되도록 <head>태그안에 <link>코드가 만들어집니다. 이것의 장점은 파일을 별도로 업로드하지 않아도 되죠. 그리고 방문자가 이미 제이쿼리 모바일을 사용한 웹페이지에 방문한 적이 있다면 제이쿼리 사이트에서 별도로 다운로드 되지 않기 때문에 속도도 빨라집니다. 하지만 그럴리는 없지만 제이쿼리 사이트가 연결이 안될 수도 있기 때문에 Local을 사용합니다. Local은 위 세가지 파일을 드림위버에 내장된 파일로 폴더를 만들어 링크를 만들어줍니다. 그래서 모바일 웹사이트를 만든 다음에는 이 폴더의 파일들도 업로드해야합니다. PhoneGap은 웹 애플리케이션을 네이티브 애플리케이션으로 변환할 수 있는 오픈소스 프로그램입니다. 어도비 드림위버는 모바일 애플리케이션 개발을 위해서도 이와같은 프로그램을 사용할 수 있도록 추가해 놓았습니다. PhoneGap애 대해서도 별도로 포스팅할 예정입니다.

4에서 Doctype을 선택해야하는데 제이쿼리 모바일은 항상 HTML5로 만들어져야합니다. 이곳에 HTML5가 기본으로 되어있지 않은 경우 위 창을 나가서 Ctrl+U키를 누르면 환경설정창이 나옵니다. 좌측에서 새문서항목을 선택하고 6에서 기본 문서 타입을 HTML5로 선택하면 됩니다.


몇번의 클릭만으로 수많은 코드가 자동생성이 되고 링크가 만들어졌습니다. 좌측 상단의 Split 버튼을 클릭하고 2의 Live View버튼을 클릭하면 우측에 웹에서 실제로 보이는 화면이 나옵니다. 하단의 3을 클릭하여 스마트폰 사이즈를 선택합니다. 버튼을 클릭하면 애니메이션 되면서 화면이 바뀝니다. 드림위버는 내장된 브라우저를 사용하기 때문에 좀 버벅거리는 단점이 있습니다.

위 코드 내용을 보면 사용되는 js파일과 css파일을 제이쿼리 홈페이지에서 링크되어 사용되기 때문에 디자인 변경을 하려면 CSS를 수정해야하는데 상단의 파일 이름을 클릭하면 링크된 파일이니 수정할 수 없다고 나옵니다. 그래서 Local 을 사용하는 것입니다.


Local로 선택해서 새문서를 만들었더니 내컴퓨터 안의 어도비 폴더에 코드가 링크되어있습니다. 이대로 사용할 수 없기 때문에 Ctrl+Shift+S키를 눌러 파일이름을 index.html로 문서를 저장합니다. 저장하고 나면 연결된 파일 목록이 나옵니다. CSS, js, 이미지파일등 위 웹페이지와 관련된 모든 파일이 나열되고 3에 저장할 폴더가 나옵니다. Copy를 클릭하면 폴더가 자동생성되고 모든 파일들이 저장됩니다.


저장을 하고 나면 링크 부분이 간단하게 정리됩니다. 저장한 폴더에서 보면 이미지폴더가 생성되어있고 제이쿼리 파일과 CSS파일이 저장되어있습니다. 이미지폴더에 들어가보면 여러가지 버튼과 아이콘에 사용될 이미지들이 들어있습니다. 참 편리하죠.

 
index.html을 클릭하여 구글 크롬, 또는 쿨노보나 애플 사파리 웹브라우저에 엽니다. 모바일용 웹브라우저가 아닌 일반 웹 브라우저는 애니메이션을 지원하지 않습니다. 버튼을 클릭하면 애니메이션 되면서 화면전환이 됩니다. 위처럼 기본적인 레이아웃에 컨텐트만 입력하고 웹호스팅 서버에 업로드하면 모바일용 웹사이트가 만들어지는 것입니다. 간단하죠. 

저작자 표시 비영리 변경 금지
신고

티스토리 툴바