2008년 7월 14일 월요일

티스토리 2008 베타 오픈 리뷰 (2)

이번 리뷰는 미션2에 맞춰서 에디터 세부사항을 더 살펴보도록 하겠습니다.
사용자 삽입 이미지

Trex를 wikipedia로


 Trex
2008 베타로 공개된 티스토리의 에디터는 Trex라는 프로젝트 명을 달고 나왔습니다. PowerEditor를 기반으로 하여 prototype v1.5.1.1을 사용하고 있구요. HTML을 javascript에서 쉽게 쓸수있게하는 hyperscript와 swf파일을 쉽고, valid하게 삽입하게 해주는 SWFObject 라이브러리를 함께 사용하고 있습니다.

사용자 삽입 이미지

 <br> to <p>
에디터에서 변화된 가장 큰 특징 중 하나는 줄 바꿈이 p 태그로 통일되었다는 점입니다. 워드나 한글과 같은 프로그램들 처럼 한 줄에 대한 해석을 p태그로 통일을 시켰는데요. 워드가 <p> 태그를 한 줄의 개념으로 잡고 paragraph으로 처리를 하는 것은 맞습니다만 웹에서 한 줄의 개념을 모두 p 태그로 처리하는게 맞는 지는 잘 모르겠네요.
사용자 삽입 이미지

기존의 스킨과의 호환성이나 Firefox에서 한 줄의 개념이 br인 것 등을 생각한다면, p태그로 생성될 것인지 br태그로 한 줄을 만들 것인지는 선택할 수 있으면 좋을 것 같습니다.

그 다음으로 툴바에 추가 된 기능을 살펴보겠습니다.
사용자 삽입 이미지
  줄간격
가장 먼저 살펴볼 기능은 줄간격 입니다. 줄간격은 말 그대로 삽입된 줄의 높이를 style 속성의 line-height 값을 조절하여 설정하게 됩니다. Firefox에서는 줄간격을 변경하게 되면 Selection에 의해서 선택되어진 p태그를 찾아서 line-height 값을 조절해주게 됩니다.

사용자 삽입 이미지
어떻게 보면 <p> 태그 없이는 사용할 수 없는 기능이므로 Firefox에서 <br> 태그를 <p>태그로 변환하게한 요인 중 하나로 볼 수도 있겠습니다.

 각주
각주 기능은 처음 사용해보았는데요. 글을 쓰다보면 이미지 또는 글 부분의 출처에 대한 표기를 하는 경우가 많이 있습니다. (사실 제 글의 많은 부분이 외국기사 소개가 많아서 -_-;;) 이러한 경우에 유용하게 쓸 수 있는 기능인 것 같습니다.
사용자 삽입 이미지

각주에 달 수 있는 기능이 text만 가능한데요. html코드가 삽입될 수 있다면 더 좋을 것 같습니다.

 구분선
구분선은 에디터에 hr태그를 삽입해주는 기능입니다. 그러나, 실제 코드 안을 들여다보면 <hr> 태그의 border를 0pt로 설정하고 top, left 위치를 -999px, -999px로 설정함으로서 hr을 감추고 div를 hr의 위치에 놓음으로써 구분선 이미지를 보이게 하였는데요. (6번째 스타일을 적용하는 경우에)
사용자 삽입 이미지

사용자 삽입 이미지

사용자에게 다양한 스타일의 구분선을 제공해주는 의미에서는 좋은 일이나, hr의 기본 태그를 살리지 못하고 div로 이미지를 처리하는게 바람직한 지는 모르겠네요.

 삽입기능
테이블, 이모티콘, 기호삽입 기능은 다음의 파워에디터와 동일한 기능이므로 설명이 달리 필요 없을 것 같네요. 사전 기능의 경우 검색을 할 수 있다는 면이 긍정적이기는 하지만, 실제 에디터로 직접 삽입할 수 있는 기능은 없는 부분이 아쉽습니다. (Firefox의 경우 플러그인으로 다양한 사전을 검색할 수 있으므로 어찌보면 불필요한 기능으로 생각되네요.)
사용자 삽입 이미지

이 외에도 글상자를 다양하게 삽입할 수 있도록 팝업창을 바꾼점과 양쪽정렬의 추가도 변화의 한 부분입니다.
그러나, 글상자의 경우 <p> 태그 밖에 <div>로 스타일을 주고 있다는 점, 리스트에서 <ol> 아래의 <li></li> 태그 아래에는 줄 구분을 위해서 <p>태그가 아닌 <br>태그를 사용하고 있다는 점은 왜 <p>태그를 사용해야 하는 지 답답하네요.

 기타

undo/redo의 경우에는 다른 에디터들과 마찬가지로 에디터에 저장되는 모든 html 을 저장한 후 복원하는 방법을 취하고 있구요. 최대 20번(__UNDO_COUNT)까지 복원할 수 있습니다.
사용자 삽입 이미지

툴바의 폰트와 폰트크기 설정은 에디터 내에서 커서 또는 마우스 이동에 따라 설정된 스타일을 반영해주고 있는데요. 사용자에게 어떠한 스타일이 적용되어 있는 지 보여주는 좋은 기능인 것 같습니다.

툴바 외의 부분에서도 변화가 있었는데요.

 탭 컨테이너 (Tab Container)
트랙백을 보내는 기능을 에디터 안에 포함시킴으로서 사용자들이 에디터 밖에서 넣는 번거로움을 없앴다는 것도 이번 개편의 장점으로 볼 수 있습니다.

그리고, 글을 비공개,보호,공개할 지 여부를 radio로 변경하고 발행을 checkbox로 변경함으로서 의미를 좀 더 명확하게 분리한 것 같구요. 아쉬운 점은 기존 티스토리에서 태그를 입력할 때 ,를 사용하여 입력하는 기능을 제거하고 Return(또는 Enter)키만으로 입력하게 하였다는 점은 아쉽네요. 기존의 사용성을 무시하였다는 생각이 듭니다.

 우측 사이드바
오른편의 사이드바의 '작성중인 글'을 다시 노출시켜 주는 기능은
  • 사용자에게는 작성하다 멈춘 글을 다시 노출시켜 줌으로서 알려주는 기능을하고
  • 서비스에게는 노출되지 않은 글을 사용자가 작성하여 노출시켜주는 기능을 하기 때문에
사용자와 서비스 모두 윈윈하는 기능이지 않을까 싶습니다.
사용자 삽입 이미지

서식 기능이 추가되어서 특정 포멧의 글(10문10답이나 릴레이성 글)들을 쉽게 작성할 수 있는 기능도 장점이구요. 네이버 스마트 에디터의 템플릿과 비슷한 기능이지만, 특정 양식을 사용자가 쉽게 작성할 수 있고 이를 저장하여서 사용할 수 있는 점에서 더 나은 기능이라고 할 수 있겠습니다. (사용자끼리 공유까지 한다면 만점이 될 것 같군요.)
사용자 삽입 이미지

플러그인은 이전 글넣기 기능(이전 글을 자신의 글에 다시 삽입하는 기능으로 글을 나누어서 올리는 경우 매우 유용할 것 같습니다. )만 제공되고 있는데요. 추후 공개될 기능을 봐야 판단할 수 있을 것 같습니다만... 블로거에게 자신이 작성한 플러그인은 자신의 블로그에 올릴 수 있으면 좋겠다는 생각이 드네요.

 단축 키 미션
  • 왼쪽정렬: Ctrl+,
  • 가운데정렬: Ctrl+.
  • 오른쪽정렬: Ctrl+/
  • 저장하기: Ctrl +S
  • 밑줄 넣기: Ctrl +U
  • 기울임 넣기: Ctrl +I
  • 실행취소 선 넣기: Ctrl +D     
  • 순서 없는 리스트: Ctrl +Alt +U
  • 순서있는 리스트: Ctrl +Alt +O
  • 들여쓰기: Tab
  • 내어쓰기: Shift +Tab
  • 링크 삽입창 띄우기: Ctrl +K
  • quote 태그 삽입하기: Ctrl +Q
  • 다시 실행: Ctrl +Y
  • 실행 취소: Ctrl +Z
  • 구분선 넣기: Alt -
 변화에 대한 느낌
변화를 준다는 것은 언제나 즐거운 흐름입니다. 그리고 그 변화를 빨리 볼 수 있는 기회를 갖는 다는 것도 소중하죠 ^^ 다만, 아쉬운 점이 몇 가지 있습니다. 추가된 기능이 많기는 한데 사용자의 사용성을 고려하기 보다는 기획이 우선되어 추가되었다는 느낌이 좀 강한 것 같습니다. (-_-;; 제가 개발자라서;;;)

정리하자면..
  1. 이전의 에디터와는 상당히 강력해진 느낌
  2. 그러나, 사용자가 과연 필요할만한 기능일까 생각해보면 조금 걱정이 됩니다.
  3. 태그에 대해서 명확한 정책이 있었으면 좋겠습니다. p태그가 한 줄로서 가장 밖에 위치한다면 몇 개 동작은 수정되어야 겠지만, 반대로 문제가 발생하는 태그들에 대한 버그가 수정될 수도 있을 것 같네요 ^^
이미지 출처 : Tyrannosaurus rex from Wikipedia

댓글 없음:

댓글 쓰기