'Html text set'에 해당되는 글 1건
드림위버의 새기능에 대한 리서치 2 (Research of Dreamweaver's New Feature at Adobe II) :: 2007/01/31 20:05
이전 글에 이어서 과연 드림위버의 어떤 새기능에 대한 리서치였는지에 대해 알아 보겠습니다.
그 전에 짧게 사족을 달자면 보통 Adobe 같이 큰 회사에서 외부 사람을 불러서 회의를 하거나 구인 인터뷰를 하게 되면 그 전에 NDA(Non Disclosure Agreement)라는 기밀 유지 협약서에 서명을 하게 합니다. - 이 안에서 보고 들은 것을 외부에 유출하지 않겠다는 간단한 내용이지요. 그런데 이번 리서치에서는 그 비슷한 얘기도 전혀 언급하지 않더군요. 그래서 저도 '오늘 있었던 일을 블로그에 올려도 되겠구나'라는 생각에 아예 물어 보지도 않았습니다. 괜히 물어봤다가 어쩌니 저쩌니하면서 제약만 가하지 않을까 하는 생각이 들었거든요 (필요하면 자기네가 먼저 얘기했겠죠 ^^) 그래서 이 정도는 괜찮겠구나 라는 생각에 이 글을 적습니다 ^^
두 가지 기능은 ICE 와 Html Data Set 이라는 가칭으로 불렀는데
ICE가 뭐의 약자인지 잊어 버렸고 마지막의 E가 Editable이라는 것만 기억납니다. (이게 핵심어랍니다 ^^) 두 기능 모두 AJAX(전 아작스로 발음하는 줄 알고 있었는데 에이-잭(스)으로 발음하더군요)를 이용한 기능이었습니다.
첫번째로 ICE는 ...인터넷 브라우저에서 html화일을 바로 수정할 수 있는 기능입니다. (별도의 에디터없이 말이죠) - 글/이미지를 이용해서 간단하게 구현해보면서 설명을 드리죠.
인터넷 익스플로러에서 (아무런 차이도 없어 보이는 평범한) html화일을 엽니다.
(올블로그에서 로그인 버튼을 눌렀을때 나타나는 로그인 박스와 거의 비슷했습니다)
로그인을 하고나면 html화일 상단에 툴바가 나타나는데 위지윅모드로 글쓰기할 때 이용하는 편집 아이콘들이 보이더군요. 그리고 html화일은 편집할 수 있는 부분은 밝게 표시되어 있고 편집할 수 없는 부분은 약간 어두웠습니다.이제 사용자는 필요한 부분을 적절히 수정/저장하고 로그아웃하면 다시 평범한 html로 돌아 갑니다. (완성되어서 서버에서 돌아가고 있는) 홈페이지의 내용 일부를 수정하기 위해서 웹에디터나 FTP를 사용할 필요가 없는거죠.
이것을 드림위버 사용자(홈페이지 제작자)의 입장에서 보자면 html의 텍스트중에서 원하는 부분을 마우스로 드래그해서 블럭화하고 css적용하듯이 ICE를 적용하면 됩니다. ICE적용시 옵션창이 뜨는데 글을 편집할 수 있는 툴바의 아이콘들을 일일이 제어할 수 있습니다.
(글크기를 바꾸는 버튼을 보이게/안보이게 하거나, 정렬 버튼의 유무 등등)
웹디자이너의 입장에서 보자면 컨텐츠에 해당하는 글 부분은 대충 (보기좋게만) 꾸며서 고객에게 보여주고 오케이가 떨어지면 그대로 웹사이트에 올리고 추후 고객이 직접 온라인상에서 수정을 할 수 있는거지요. 웹디자이너에게는 쌍수 들어 환영할 기능이 아닐까요?
자, 그럼 두번째로 Html Data Set에 대해서 알아보겠습니다. Html Data Set은 서버의 DB를 이용하지 않고 html화일을 간단하게 DB처럼 연결해서 보여주는 기능이라고 할 수 있습니다. 말이 좀 어렵죠?
그럼 이번에는 홈페이지 제작자의 입장에서 먼저 구현을 통해 설명을 해 보죠.
컨텐츠에 해당하는 텍스트 내용들을 따로 묶어서 html화일을 만들고 각각의 내용은 편의상 테이블의 셀을 이용해 구분을 해 놓습니다. 그리고 각각의 셀을 선택해서 data set에 등록을 합니다.
이제 텍스트가 잔뜩 담겨있는 html화일은 접어두고, 내용을 집어 넣을 디자인이 담긴 html 화일을 불러옵니다. 그럼 내용이 필요한 부분에 테이블을 만들고 원하는 셀에 아까 등록했던 tata set중에 원하는 것을 드래그-앤-드롭으로 연결합니다.
이제 프리뷰 모드로 확인해보면 비어있던 테이블 안은 아까 만들었던 텍스트가 잔뜩 담겨있는 html의 내용으로 채워져 있게 됩니다.
이때 테이블의 크기가 작고 보여주려는 내용이 많으면 테이블 사이즈에 맞게 일부의 내용만 표시가 되고 마지막 부분에 " more... " 식으로 표현을 하고, 사용자가 해당 링크를 클릭하면 페이지 안의 다른 공간에 이어진 내용을 보여주더군요. (팝업 윈도우가 아닌 박스 처럼요)
이쯤에서 이해가 빠른 분은 한가지 아이디어가 떠오를지도 모르겠는데요, 아니나 다를까 곧이어 ICE와 Html Data Set을 함께 이용해서 시연을 해보이더군요. 제가 위에서 제대로 설명했다면 두가지 기능의 컴비네이션에 대한 설명은 보시는 분의 상상에 맡기겠습니다. (저는 보면서 속으로 판타스틱~ 이라고 했습니다 ^^)
^^;; 어떠신가요? 글로는 설명하기 어려워서 고생해가며 이미지도 붙여 봤는데 이해가 잘 되셨나 모르겠네요. 혹시 이해가 안되는 부분이나 궁금한 부분이 있다면 댓글에 써 주세요.
그리고 다음 편에 이유를 말씀 드리겠지만 정황상 위의 두기능은 드림위버의 다음 버전에 바로 포함되어 있지는 않을 것 같더군요. (정찬명님이 가부를 얘기해 주시겠군요 ^^;)
그럼, 리서치가 어떻게 진행되었는지에 대해 다음 편에서 설명드리겠습니다.


