2013. 10. 21.

새로운 홈페이지 제작도구의 등장? Google Web Designer


‘나모 웹 에디터’‘드림위버’같은 이름을 들어본 적 있으신가요? 나름 한 시대를 풍미하던 그래픽 환경 기반의 웹 개발 툴이죠. 물론 지금도 많은 사람들이 사용하고 있겠지만, 블로그 이전에 개인 홈페이지가 유행하던 때와 비교해 지금은 대중적으로 많이 쓰이지는 않는 것 같습니다. 요즘에는 개인 홈페이지도 XE나 워드프레스같은 CMS(Content Managing System)를 이용해서 제작하거나 블로그 서비스를 이용하니까요. 아, 물론 트위터나 페이스북 같은 SNS를 더 많이 이용하긴 하겠지만 개인 홈페이지와는 성격이 다르니 논외로 치도록 할게요.


<한 시대를 풍미했던 웹 개발 툴. 왼쪽부터 나모 웹 에디터, 드림위버, 플래시.>


그리고 또 시대를 풍미했던 웹 개발 툴을 꼽자면 ‘플래시’가 있습니다. 웹 상에서 화려한 애니메이션과 액션 스크립트의 적용을 통해서 조금 더 화려한 웹 환경을 만들어낼 수 있는 툴이었습니다. 지금까지도 플래시로 만든 게임이 계속해서 발표되고 있고요.


하지만 별도의 프로그램을 깔아야 한다는 점과 컴퓨터의 자원을 너무 많이 사용한다는 단점으로 인해 현재는 거의 사용되지 않는 것을 볼 수 있습니다. 아이폰이나 모바일용 크롬의 경우에는 플래시 자체를 지원하지 않기까지 하죠. 그나마 광고 배너의 영역에서 많이 볼 수 있긴 하지만 요즘에는 그마저도 HTML5 기술로 인해 광고 배너의 자리에서도 슬슬 치워져 가는 추세입니다. 그런데 이런 와중에 구글에서 HTML5 개발을 손쉽게 할 수 있는 ‘구글 웹 디자이너(홈페이지 바로가기)라는 툴의 베타 버전을 내놓았다고 하네요! 과연 어떤 툴인지 알아볼까요?


‘구글 웹 디자이너’, 너는 누구냐!


‘구글 웹 디자이너’는 이름에서부터 알 수 있다시피 웹 디자인(혹은 개발)을 하는 툴인데요, 코딩과 같은 텍스트 환경이 아닌 그래픽 환경에서 할 수 있도록 하는 툴입니다. 언뜻 생각하기에 앞에서 언급했던 나모 웹 에디터나 드림위버와 같은 툴과 비슷하지 않을까 하는 생각이 들지 않나요? 웹 개발 툴이기에 당연한 일이겠지만, 한편으로는 플래시와 비슷한 느낌도 주고 있답니다. 몇 가지 특징을 통해 어떤 툴인지 보여드릴게요!


1. 광고 제작 모드와 웹 페이지 제작 모드


<구글 웹 디자이너의 새 파일 만들기 창>


구글 웹 디자이너를 실행시키고 새 파일 만들기를 하면 어떤 파일을 만들지 물어봅니다. 크게 두 가지 분류가 있는데요, 바로 ‘Google 광고’ 모드와 ‘빈 파일’ 모드입니다. ‘빈 파일’ 모드는 비어있는 HTML 파일과 CSS, 자바 스크립트 등의 파일을 만드는 말 그대로의 웹 개발 모드인데요, ‘Google 광고’ 모드는 순전히 HTML5를 이용해 플래시처럼 애니메이션이 들어간 웹용 광고 배너를 만들 수 있는 모드입니다. 플래시보다 더 좋은 점이라면 별도의 플러그인 없이 웹 브라우저에서 바로 볼 수 있다는 점이죠. 스마트폰에서도 잘 나올테고요.


2. HTML5 기반의 애니메이션 제작


<구글 웹 디자이너의 두 가지 애니메이션 모드 - 빠른 모드와 고급 모드>


방금 광고 모드에 관해 이야기하면서 언급했었는데, 구글 웹 디자이너에는 HTML5 기반의 애니메이션 제작 기능을 제공하고 있습니다. 고급 모드와 빠른 모드 두 가지를 제공하고 있는데, 빠른 모드는 단순한 애니메이션(텍스트를 움직이게 한다던지)을 만드는 데 편한 모드입니다. 반면에 고급 모드는 오브젝트별로 별도 레이어가 지정되고 프레임별 애니메이션 수정이 가능해 조금 더 복잡한 애니메이션을 만드는 기능을 제공하고 있죠. 웹 상에서 다이나믹한 효과를 내는데 큰 도움이 될 것 같아요.


3. 오브젝트의 3D 편집


구글 웹 디자이너는 평면의 웹 화면에 3D 효과를 주어서 편집할 수 있는 기능을 제공하고 있습니다. 총 세 가지 기능을 갖추고 있는데요, ‘3D 개체 회전 ’과 ‘3D 개체 변환 ’, ‘3D 보기 변경 ’입니다.


<구글 웹디자이너의 3D 편집 기능의 기준이 되는 3차원 직교 좌표계

출처: 위키피디아 ‘3차원’ 항목>


각각 기능은 X축과 Y축, Z축을 조정할 수 있는데, ‘3D 개체 회전’은 오브젝트를 축에 따라 회전하는 기능이고 ‘3D 개체 변환’은 축에 따라 오브젝트를 이동할 수 있는 기능, ‘3D 보기 변경’은 캔버스의 역할을 하는 배경을 축에 따라 움직여가며 볼 수 있는 기능입니다. 비록 각 오브젝트를 3D로 제작할 수는 없지만 움직일 수 있다는 점에서 재미있는 것이죠.


‘구글 웹 디자이너’, 쓸만한 툴인가?


구글 웹 디자이너는 확실히 괜찮은 기능을 제공하는 프로그램입니다. 하지만 조금씩 만져보다 보면 미묘하게 아쉬운 점이 드러나게 되는데요, 그중 가장 큰 것은 바로 폰트 사용의 제한입니다. 웹 페이지를 제작하는 것이기 때문에 프로그램 내부에서 제시하는 폰트만 사용할 수 있기 때문이죠. 물론 구글 웹폰트를 사용할 수 있기 때문에 영문 폰트 사용의 제한은 크게 느껴지지 않을 수 있지만, 한글 폰트는 전혀 사용할 수 없는 상황이기 때문이죠. 프로그램 자체는 한글화가 되어있음에도 불구하고 한글 폰트 선택이 전혀 되지 않는다니 뭔가 아이러니하네요.


하지만 구글 웹 디자이너는 아직 베타 버전에 불과한 프로그램입니다. 아마도 정식 버전은 애매하거나 어정쩡한 부분이 많이 고쳐져서 발표되지 않을까 예상하게 되네요. 여러분도 기대되지 않으시나요? ^_^