deadlink@blog

관리자 | 글쓰기

deadlink@blog » Search » Results » Articles

위지윅 에디터와 관련된 글 1개

  1. 2006/04/29 태터툴즈의 스크랩 포스팅 요령 (4)

deadlink@blog » Computer/Blog

태터툴즈의 스크랩 포스팅 요령

deadlink | 2006/04/29 14:22

본문은 테터툴즈를 처음 작성하시는 분들에게 약간의 도움을 드리기 위해 작성되었습니다. 테터툴즈 1.04 버전을 기준으로 작성되었으며 태터툴즈 위지윅 에디터 사용에 대해 살짝 설명합니다.

위지윅 에디터(WYSIWYG Editor)란?
일반적으로 게시물을 작성할 때 대부분은 글자(text)들을 기준으로 작성하게 됩니다. 그러나 우리는 단순한 텍스트만으로 게시물을 작성하길 원하지 않습니다. 작성하는 게시물은 때로는 사진을 포함하여야 하고, 때로는 소리를, 혹은 잡지처럼 적절한 레이아웃을 갖추길 원합니다. 이런 것들을 위해 사용되는 것이 HTML입니다. 우리는 HTML을 몰라도 한글2004나 MS 워드처럼 편하게 글이 작성되기를 바라고 있으며 그 때문에 HTML 위지윅 에디터가 나왔습니다. what you see is what you get의 약칭인 위지윅은 현재 화면에서 보고 있는 것과 동일한 결과물을 얻을 수 있다는 것을 뜻합니다.

블로그를 처음 개설하셨습니까? 그럼 일단 계정의 문제와 블로그의 설치 문제, 그리고 스킨의 선택 등 무수한 난관을 헤쳐나오신 것에 대해 먼저 축하드립니다. 이제 절반을 오셨습니다. 자신의 글로 자신을 표현하는데 누구나 처음부터 익숙하진 않습니다. 이제 테스트 포스팅을 하면서 첫발을 내딛으십시요.

테터툴즈의 관리자 메뉴는 설치 후에 한번 들어가보셨을 겁니다. [글 관리] 메뉴에서 [새로 글을 씁니다] 항목을 선택하면 나타나는 위지윅 에디터는 다음처럼 생겼습니다. 이후의 나타나는 모든 그림은 클릭하면 크게 볼 수 있습니다.


미리보기를 통해서 글이 정상적으로 화면에 뿌려질 수 있음을 알 수 있습니다. 미리보기 버튼으로는 아직 글이 완전히 저장되지 않습니다. 저장하기 버튼을 눌러야 완전히 저장됩니다.

이 글은 아직 공개되지 않았습니다. 글 목록에서 열린 자물쇠를 클릭하면 글이 공개됩니다. 씽크를 시키면 이 글은 테터툴즈의 수집기에 노출되어 다른 방문자들이 찾아올 수 있습니다.

관리자 메뉴의 글 목록에서 저장된 글의 제목을 눌러서 다시 편집 상태로 들어와봅니다. 편집기 우측 상단을 보면 위지윅 모드와 HTML 모드를 변경할 수 있는 버튼이 있습니다. HTML 모드로 변경하면 우리가 입력했던 단순한 텍스트가 실제로는 p 태그라는 문장 태그로 둘러 쌓여져 있다는 걸 알 수 있습니다. 위지윅 모드에서 입력된 모든 것들은 HTML로 표현될 수 있게 변환되어 저장되는 것입니다.



간단히 테이블 태그를 입력해보기로 하죠.


일단 테이블이 하나 출력되었습니다. 모양은 그럴듯 하지 않지만요. 이상하게 상단에 여백도 생기고 테이블 모양도 커져 버리는군요. 다시 해당 글을 편집하러 돌아와볼까요? 메뉴 제일 우측의 위지윅->HTML 모드로 변환해서 다시 내용을 본 상태로 시작하세요. HTML이란 또다른 항목이 메뉴에 보입니다. 입력했던 HTML 문장을 드래그하여 선택상태로 만든 뒤 HTML 항목을 클릭해봅니다.


자. 어느 정도 의도했던 형태로 출력되었습니다. 이상한 여백도 없어지고 말이죠. 만약 우리가 Table 태그를 정상적으로 입력하지 않았으면 어떻게 될까요. Table 태그는 제가 입력했던 데로, TR 태그와 TD 태그로 구성됩니다. TR 태그는 행을 나타내고 TD 태그는 열을 나타내죠. 좀더 자세한 얘기를 하자면 길어지고 자세한 설명은 직접 찾아보실 수 있습니다.

다만 이 글에서 가장 주요하게 언급하고자 하는 것은 TR이나 TD 태그들이 정상적으로 종료되지 않는다면, 본문이 나중에 스킨과 결합되어 방문자에게 출력될 때 스킨을 구성하는 다른 테이블 태그들과 맞물려 엉망이 되고 맙니다. 종료 태그를 일부 제거해 버리고 저장을 하면 이렇게 됩니다.

잘못된 태그로 인한 깨짐 현상



여러분이 만약, 다른 게시물을 가져와서 그대로 넣고 싶으시다면 어떤 방법이 있을까요. 일단 HTML 소스를 보고 소스 일부를 가져오는 방법이 있을 수 있습니다.


이 소스는 디자인 정글의 특집기사 화면입니다. 레이아웃을 위해 무수한 테이블 태그가 잔뜩 들어있습니다. 우리가 복사해넣을 부분인 이 중의 일부분에 지나지 않습니다. 그럼 Table, TR, TD 태그들이 정상적으로 시작되고 쌍을 맞추어 종료되는지 눈으로 확인하고 편집한 뒤 집어 넣어야 한다는 얘기가 됩니다. 다른 방법을 좀 찾아보죠.



이 화면은 디자인정글의 매거진 정글(http://magazine.jungle.co.kr) 화면입니다. 이 화면은 무수한 HTML 소스로 작성되어져 화면에 출력되고 있습니다. 물론 우리에게 보이는 건 잡지처럼 잘 짜여진 화면과 사진들 뿐이지만요. 그럼, 여기서 일부분의 텍스트만 가져다 포스팅을 해보겠습니다.



텍스트만 조심스럽게 복사해서 붙어넣으면, 이렇게 의도된 화면을 얻을 수 있습니다. 이 과정에 복사 원본에 포함된 HTML 소스도 같이 복사되어 태터 에디터에 들어갑니다. 우리가 복사해온 부분에는 어떤 테이블 태그도 포함되어 있지 않기 때문에 큰 걱정을 할 필요가 없었습니다. 다만 위지윅->HTML 모드로 한번 바꾸어봐서 내용 중 태이블 테그가 있는지, 있다면 모든 쌍이 정상적으로 시작하고 종료되는지 확인을 해봐야합니다. 다음에는 의도적으로 테이블 태그를 엉망으로 포함해서 복사해보죠.



우리가 복사한 영역은 테이블이 있으리라고 예상된 부분부터 정상적으로 끝나지 않았을 법한 부분까지 복사했었으니까 당연한 결과입니다. 엉망으로 포스팅된 부분을 에디터의 HTML 모드로 보면 분명히 TABLE 태그들이 정상적으로 작성되지 않았을 겁니다. 그래서 위에서 설명한 길고 복잡한 HTML 소스를 한번 보여드렸습니다. 위지윅 에디터는 분명 편하고 좋은 점은 있지만, 제대로 원하는 바를 표현하기 위해서는 반드시 HTML 소스의 확인이 필요합니다.

이번에는 좀더 세밀하게 소스를 복사해오겠습니다. Table 태그는 일반적으로 박스의 형태를 취하고 있으므로, 눈치껏 요령껏 스크랩할 부분을 꼬집어 드래그를 시작하는 것이 중요합니다. 보통 기사의 첫번째 문장 부분부터 드래그를 시작하는 편이 좋습니다.



스크랩은 정상적으로 포스팅되었지만, 아직 완성된 것은 아닙니다. 스크랩은 타인의 저작물을 그대로 가져와 자신의 블로그에 싣는 행위이므로, 창조적인 포스팅에 해당되지 않으며 개인적인 생각으로는 1인 미디어에 걸맞지 않는 것입니다. 대부분의 인터넷 기사 및 뉴스에서는 원문의 전재 혹은 부분에 대하여 복사 및 배포를 금지하고 있습니다. 특별히 이용 허락을 하는 부분이 없는 한 모든 스크랩은 지적재산권을 침해하는 행위란 것을 명심하여야 합니다.

이 글은 HTML 복사 편집 및 스크랩에 대한 안내를 위한 것이며, 해당 사이트(디자인 정글)에서는 기사의 원문 링크를 같이 싣는 원칙 하에 블로그 및 개인 홈페이지로의 스크랩을 다음과 같이 허용하고 있습니다.

디자인 정글의 기사 이용 안내



그래서 다음 처럼 본문에 기사의 원문에 대한 내용을 분명히 밝히는 것이 법을 위반하지 않는 방법입니다. 혹은 가능한 기사에 대한 감상이나 비판, 혹은 그 밖의 다른 재생산된 포스팅을 올리고 트랙백이나 참조 링크를 싣는 것이 바람직한 블로그 포스팅이라고 생각하고 있습니다.

기사 원문 링크 첨부



이상으로 태터툴즈의 위지윅 에디터로 인터넷 페이지 복사 스크랩에 대해 주절거려보았습니다. 초보 블로거들에게 도움이 되셨길 바랍니다. 감사합니다.
이올린에 북마크하기(0) 이올린에 추천하기(0)
2006/04/29 14:22 2006/04/29 14:22


태그 ,

(go to top)