태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

'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화일을 엽니다.

Nomal Html Site
(이 html 화일에 ICE 기능이 구현되어 있다면) 사용자가 알고 있는 핫키(예를 들자면 F7같은..)를 누르면 로그인 박스가 나타납니다.


login box
(올블로그에서 로그인 버튼을 눌렀을때 나타나는 로그인 박스와 거의 비슷했습니다)

로그인을 하고나면 html화일 상단에 툴바가 나타나는데 위지윅모드로 글쓰기할 때 이용하는 편집 아이콘들이 보이더군요. 그리고 html화일은 편집할 수 있는 부분은 밝게 표시되어 있고 편집할 수 없는 부분은 약간 어두웠습니다.
ICE
이제 사용자는 필요한 부분을 적절히 수정/저장하고 로그아웃하면 다시 평범한 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을 함께 이용해서 시연을 해보이더군요. 제가 위에서 제대로 설명했다면 두가지 기능의 컴비네이션에 대한 설명은 보시는 분의 상상에 맡기겠습니다. (저는 보면서 속으로 판타스틱~ 이라고 했습니다 ^^)

^^;; 어떠신가요? 글로는 설명하기 어려워서 고생해가며 이미지도 붙여 봤는데 이해가 잘 되셨나 모르겠네요. 혹시 이해가 안되는 부분이나 궁금한 부분이 있다면 댓글에 써 주세요.
그리고 다음 편에 이유를 말씀 드리겠지만 정황상 위의 두기능은 드림위버의 다음 버전에 바로 포함되어 있지는 않을 것 같더군요. (정찬명님이 가부를 얘기해 주시겠군요 ^^;)

그럼, 리서치가 어떻게 진행되었는지에 대해 다음 편에서 설명드리겠습니다.

Trackback Address :: http://design.funny4u.com/trackback/2
  • BlogIcon 찬비 | 2007/01/31 20:29 | PERMALINK | EDIT/DEL | REPLY

    드림위버는 테이블 부분이 맘에 안들던데.. 심지어 프론트페이지보다 안좋은..
    그게 나아졌을라나 모르겠네요. 어도비가 만들었다면.. 어떻게 변모했을지가....

    • BlogIcon funny4u | 2007/01/31 20:31 | PERMALINK | EDIT/DEL

      사실은 저도 테이블때문에 드림위버를 안씁니다. 그래서 위의 스크린샷도 나모로 만들었습니다 ^^;;

  • BlogIcon 찬비 | 2007/01/31 21:15 | PERMALINK | EDIT/DEL | REPLY

    나모... 나모..
    전 프페를 쓰는데.. 드림이로 바꿨죠.. 왜? 다 하니깐. ㅋㅋ
    그래도.. 꼭 테이블은 메모장이나 프페로 하죠.. 짱나는.. 못쌩긴 드림이 테이블. ㅡ.ㅡ

  • BlogIcon 정찬명 | 2007/01/31 21:42 | PERMALINK | EDIT/DEL | REPLY

    드디어 2편이 나왔군요 ^^; 실제로 차기버전에는 Ajax 를 지원하기 위한 기능이 포함되어 있습니다. 하지만 보여주신 예제 수준까지 쉽게 구현이 가능한지는 모르겠습니다. 저는 아직 Ajax 관련 기술을 실무에 적용하거나 스터디 할 기회가 없었고 또한 웹 표준과 접근성 문제와 충돌하기 때문에 해당 기능을 사용할 계획은 없습니다. 하지만 보여주신 두 가지 예제가 일반인들의 웹 사이트 유지보수에 포커스를 맞춰놓은 것 같고 그런 측면에서는 훌륭한 Demo 였다고 생각합니다. 참, 이 포스트를 계기로 기밀유지협약서에 대하여 문의해 보았습니다만 베타 프로그램에 참여하면서 얻어진 모든 정보를 유출할 수 없다는 것을 알게 되었습니다. 따라서 제가 더 자세히 말씀드릴 수 있는 부분이 없습니다. 사실 새롭게 알게된 사실도 거의 없답니다 ㅡㅜ;

  • BlogIcon 정찬명 | 2007/01/31 21:44 | PERMALINK | EDIT/DEL | REPLY

    테이블 때문에 드림위버 사용을 기피하신다는 말씀들은 어떤말씀인지 저는 잘 이해가 안가는데요. 좀 자세하게 설명해 주실 수 있나요?

    • BlogIcon funny4u | 2007/01/31 22:29 | PERMALINK | EDIT/DEL

      개인적인 습관때문입니다 ^^;
      제가 프론트페이지로 웹에디터를 시작했는데 나모는 거의 한글판 프론트페이지라서 쉽게 적응을 했거든요. 그런데 드림위버는 여기저기 틀린구석이 많고 알아야 할 것도 많더라구요. 저에게는 특히 테이블을 수정할 때 나모가 손에 익었서 편하더라구요(드림위버4때의 이야기입니다만..습관이라는 게 무서워요^^;;)

  • BlogIcon 마루 | 2007/02/01 00:37 | PERMALINK | EDIT/DEL | REPLY

    어디서 많이 보던 스킨이..^^ 반갑습니다. 좋은 글 따라 오다보니 제 스킨도 보내요^^
    좋은 정보 알려 주셔서 감사드리고, 앞으로 인기 블로그로 상승하시길 빕니다.
    기분 좋은 클릭! 한번 하고 갑니다. 아시죠? 무슨 의미인지..^^

    • BlogIcon funny4u | 2007/02/01 08:32 | PERMALINK | EDIT/DEL

      앗,인사 드리기전에 먼저 찾아 오셨네요.
      죄송하지만 '지금은 임시로'라는 마음으로 이 스킨을 쓰기 시작했기 때문에 인사를 못 갔습니다. '덕분에 잘 쓰고 있습니다'라고 글 남기고 금방 바꾸면 민망할 거 같더라구요.
      (착한 클릭 감사합니다. 그리고 마루님 글은 한rss로 정기구독 하고 있습니다)

  • BlogIcon in4lab | 2007/02/01 02:19 | PERMALINK | EDIT/DEL | REPLY

    드림위버는 여전히 테이블에 있어선 아아아악~~~입니다.
    하지만 프론트와는 비교 못할 정도의 막강한 부대 기능들을 가지고 있죠?
    뭐든 그렇지만 다 활용할 순 없을겁니다. 전체 기능을 두루 두루 쓸 수 있을 때... 참...
    뭐 저도 거의 바닥 수준으로.. 기본 기능에만 극도로 집착하지만 말이죠. 하..

    • BlogIcon funny4u | 2007/02/01 08:34 | PERMALINK | EDIT/DEL

      저랑 입장이 비슷하시군요 ^^
      (방문하고 글 까지 남겨주셔서 감사합니다.
      인포랩님 블로그에도 구경 가야겠네요 ^^)

  • BlogIcon 정찬명 | 2007/02/01 08:34 | PERMALINK | EDIT/DEL | REPLY

    하하하, in4lab님 마저 드림위버의 Table 삽입기능에 불만을 가지고 계신듯 하네요? funny4u님, 개인적인 습관이라고 이해하기에는 뭔가 설명이 부족합니다. 누구라도 드림위버의 Table 삽입에 관한 문제에 대하여 보다 더 구체적으로 말씀해 주시면 감사하겠습니다. 제가 알지 못하는 어떤 문제가 있다면 개선의견을 낼 수도 있기 때문입니다.

    • BlogIcon funny4u | 2007/02/01 08:41 | PERMALINK | EDIT/DEL

      이 시간까지 안 주무시는군요 ^^ (저는 아침입니다)
      정찬명님께 설명을 드리려고 드림위버2004까지 다시 깔아봤는데.. 막상 빈 페이지에 테이블 깔고 시작해 보니까 뭐가 (나모와 비교해서)그렇게 불편했는지 못 찾겠더라구요^^;; 실전 작업시에는 느꼈었던 게 있었는데... 그래서 좀 두리뭉실하게 답변을 드렸던 겁니다(역시 한 예리 하시는군요. 일종의 직업병? ^^;; )
      조만간 시간내서 제대로 구현해보고 답변 드리겠습니다.

  • BlogIcon 정찬명 | 2007/02/01 22:18 | PERMALINK | EDIT/DEL | REPLY

    넵, MX 2004 버전에서도 먹힐지 모르겠지만 Table 삽입하기 단축키는 'Ctrl+Alt+T' 입니다. 다른분들께서도 드림위버의 Table 삽입하기 기능이 어떤점에서 불편한지 코멘트 주시면 좋겠습니다. 그것이 적절하다면 Adobe 에 Feedback 해드리겠습니다.

  • BlogIcon 조수훈 | 2007/02/04 20:54 | PERMALINK | EDIT/DEL | REPLY

    저는 캐나다에 사는 고등학생인데, 어릴적부터 나모를 써서서 홈페이지 만들다가, CSS가 제대로 지원안되는것에 불만을 가지고 드림위버로 전환했죠. 웹표준쪽으로는 드림위버가 나은것 같습니다. 테이블은 디자인에 쓰는게 아니다! 라는게 웹표준 지향이라죠?

    • BlogIcon funny4u | 2007/02/04 21:32 | PERMALINK | EDIT/DEL

      전 대학을 졸업하고서야 처음 나모를 접한 거로 기억이 나는데.. 빠르시네요 ^^
      웹표준에 익숙하신 분들은 아예 위지윅 웹툴을 잘 안 쓰시는 것 같더라구요 ^^;;

  • BlogIcon 모꼬지 | 2007/02/18 20:21 | PERMALINK | EDIT/DEL | REPLY

    좋은 정보 감사 드립니다. 그런데 ICE는 'instant content editing' 정도가 아닐까 추측해 봅니다만...? ^^

    • BlogIcon funny4u | 2007/02/18 22:17 | PERMALINK | EDIT/DEL

      아주 적절한 예상 같습니다 ^^
      역시 남겨놓으면 읽어주시는 분이 있으시군요^^

Name
Password
Homepage
Secret