티스토리 2008 베타 오픈 리뷰 (4) - 센터

이번 포스팅은 리뷰라기 보다는 미션을 위한 포스팅입니다. ^^;;;

저의 센터설정입니다.

 개선(또는 추가)했으면 좋은 점들

1. 센터 설정 버튼의 이동. 센터 설정이 프로필 우측 영역(div#tmpCenterPanel)의 하단에 포함되어 있는데요. 센터 패널을 여럿 설정하는 경우 최하단에 위치하여서 설정을 변경하는게 불편한 점이 있는데요. 프로필 영역으로 옮기는게 어떨까 싶습니다. (자주 변경되는 속성이 아니기 때문에 특별히 문제가 될 것 같지는 않네요.)

2. 유입경로의 경우 실시간 로그를 보여주는 패널이 있습니다. 실시간로그가 과연 사용자에게 유용할 지는 모르겠는데요. 대신에 하루 단위로 유입경로가 가장 많은 곳을 보여주는 게 더 의미가 있을 것으로 생각됩니다.

가령 자신이 올린 글이 어떤 검색엔진이나 유명블로거(?)의 링크가 걸려서 갑자기 트랙백이 올라갔다면, 어디에서 왔을까 하는 궁금한 점을 한 눈에 볼 수 있기 때문에 더 좋지 않을까요?

3. 티스토리 이벤트와 공지사항에 중복된 글이 있는데 방향을 잡아서 공지사항과 이벤트를 분리하는 것은 어떨까요? 티스토리 이벤트를 삭제하고 공지사항으로 합쳐도 문제는 없을 것 같습니다만... ^^;;

서울한강체와 서울남산체

미남이님의 블로그에서 서울서체인, 서울한강체와 서울남산체를 소개하는 포스트를 보았습니다.

음.. 좋군요 ^^. 서울색이라는 항목도 있습니다.

http://design.seoul.go.kr/policy/data_view.php

출처

• 서울시에서 서울서체 무료 배포 -  미남이의 이러쿵저러쿵
  
• 서울서체, 서울색 - 서울특별시 디자인총괄본부
  

Lively

구글의 Lively를 붙여보았습니다. 우리 돼지 어디있을꼬~?

느리기는 하지만 나름 중독있군요. 물건 다루기가 힘드네요 ㅠㅠ

※ room name과 description이 입력이 안되면 저장이 안됩니다. 이것 때문에 삽질 좀 했네요 ;;

티스토리 2008 베타 오픈 리뷰 (3) - 사이드바와 하단 설정창

사이드바와 하단 설정창에 대해서 가장 큰 불만은 작다는 불만이 가장 큽니다.

일단 각 기능의 배치는 기능상으로 적절히 분류되었습니다.

  파일첨부

기존의 파일첨부 기능의 경우 파일첨부 영역에서 파일 업로드 버튼을 클릭한 다음① 삽입된 결과가 나오는 리스트에서 파일을 선택한 다음② 삽입될 위치를 선택한 후③ 삽입버튼을 눌러서 삽입④합니다.

개편된 기능의 경우 사진을 입력하는 위치에 커서가 있는 상태에서 툴바 위의 사진을 클릭①한 다음에 이미지를 업로드한 다음②에 바로 삽입③되기 때문에 동작을 한 단계 줄이는 기능을 하게 됩니다.

레이아웃이 조금 깨졌습니다.

삽입된 이미지는 리스트에서 x자 버튼을 눌러서 쉽게 삭제되며 해당 리스트는 에디터의 이미자와 연동되게 됩니다. 미흡한 기능 중 하나가 삭제 시 스타일(text-align: center가 적용된 p 태그)이 남는 문제가 있네요.

이미지 삽입 시 흥미로운 기능 중 하나는 전체 원본 사이즈로 저장 기능입니다. 큰 사진을 임의로 축소시키지 않고 저장하기 때문에 이미지의 원본 느낌을 잘 살려서 넣을 수 있다는 것도 눈에 띄는군요.

(걱정되는 점은 안그래도 가끔씩 느린 티스토리가 더 느려질까 걱정은 됩니다;;;)

베이징 천단에서의 사진입니다.

  태그

태그의 경우에는 기존 사용성 고려가 안되어 있는 부분이 아쉽습니다. ','를 사용하여 이 때까지는 쉽게 넣었는데 ','를 빼시는 것은 이해가 좀 가지 않는군요.

 공개설정

공개설정 부분의 경우 저장 전에 항상 사용하던 기능이었는데요. 저장하기 전에 태그, 트랙백, 공개설정 등을 항상 누른 후 저장하기를 눌러야하는 불편함이 있습니다. 저장하기 전에 한 번에 설정할 수 있으면 어땠을까 하는 생각이 듭니다.

  사이드바

사이드 바의 경우 폭을 좀 더 줄여서 이단으로 만들면 어땠을까 하는 생각도 드네요. 작성중인 글을 제외하고서는 대부분의 내용이 조금 더 줄일 수 있을 것 같다는 생각입니다. 아직 사이드 바를 활용해보지는 못해서 크게 어려움을 느껴보지는 못했습니다.

책이나 인물 등을 검색할 때 DB에서 검색 후 리턴되는 결과가 매우 빠르다는 느낌이 들었구요. 책의 경우는 아직 많은 책이 등록되지는 않은 것 같습니다.

책 검색 결과로 나오는 리스트가 팝업 창의 크기를 넘어서는 경우 닫기 버튼이 밀려서 보이지를 않는 버그가 있군요.

  버그

파이어폭스에서 다음과 같은 경우에서 스크롤 바가 이동합니다.

Enter 키가 입력될 때마다 <br>부분을 <p>태그로 감싸주면서 focus를 잃어버렸다 다시 주면서 발생한게 아닌가 생각됩니다만... (코드를 분석해보지는 못했기 때문에 -_-;;;;)

그리고, 커서가 첫 번재 위치에 있는 경우 스페이스를 누를 때 가끔씩 스페이스 동작이 사라지는군요. 명확한 케이스를 잡지는 못했습니다.

좌측정렬 되어있는 문장의 마지막에 커서를 위치하고 delete키를 눌렀을 때 아래 줄이 중앙정렬(p태그가 center로 align)인 경우 좌측 정렬이 중앙 정렬로 변경이 됩니다.

티스토리 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

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

티스토리 2008 베타가 드디어 오픈되었습니다. 먼저, 바뀐 점을 살펴보면,

 TISTORY 센터
바뀐 페이지에서 눈에 띄는 점이 크게 두 가지가 있더군요.
하나는 사용자(또는 사용자의 정보)를 강조하였다는 점입니다. 이전 페이지에서는 사용자 정보 수정 부분이 네비게이션 윗부분에 위치함으로서 찾기 어려웠으나 눈에 가장 잘띄는 좌상단(네비게이션 위치의 아래)에 위치시킴으로서 사용자 정보를 찾기(또는 수정)가 쉬워졌고, 사용자를 강조하는 효과도 주고 있습니다.

두 번째로 눈에 띄는 점은 티스토리의 네트워크를 강조했다는 점입니다.

1. 초대장 보내기와 개수를 직접 보여줌으로서 티스토리 외부 사용자와의 네트워크 생성
2. 주제별 새 글(트랙백 베스트, 댓글 베스트, 베스트 블로그 인터뷰)은 티스토리 사용자들간의 새로운 네트워크 생성
   
3. 최근 댓글 알리미()는 이미 생성되어 있는 네트워크의 활동성을 좀 더 강조하기 위해서

라고 볼 수도 있을 것 같습니다.

이 외에도 공지사항이 센터 중앙 부분에 배치한 것이 눈에 띄더군요.

공지 사항의 경우 이전에는 공지사항 게시판으로 전달하였으나, 게시판을 잘 클릭하지 않는 사용자들을 위해서 꼭 전달하여야 하는 공지사항을 센터 중앙에 노출시켜주는 세심한 배치가 마음에 드네요.

그리고, 센터 설정을 통하여 센터의 내용을 좀 더 쉽게 수정, 배치할 수 있게 되어있는데요. 네트워크를 형성하기 위한 부분 외에도 자신이 쓴 글에 대한 정보와 통계를 쉽게 볼 수 있게 되었다는 점도 환영할 만합니다.

기존의 tistory의 경우 dojo를 사용하였는데 개편과정에서는 extJS를 관리자 화면 전체에서 사용하고 있는 점도 주목해야 할 것 같습니다.

 글쓰기 페이지
이번 개편에서 가장 많은 변화를 가졌던 부분이 글쓰기 페이지였던 것 같습니다. 사용자의 모니터 크기 안에 모든 기능을 배치함으로서 글쓰기 페이지 내에서의 마우스 움직임을 최소화 시켰습니다.

영역을 확보하기 위해 다음의 작업이 수행되었는데요 .

1. 제목을 페이지 영역에서 에디터 내부로 삽입
   
2. 파일첨부, 태그, 공개설정, 트랙백, CCL과 같은 영역을 탭으로 묶었구요.
   
3. 플러그인과 첨부 영역을 사이드 바로 포함시켰습니다.
   

아래쪽 탭영역과 사이드 바의 경우 감출 수 있기 때문에 좀 더 넓은 화면으로 사용이 가능합니다.

게다가, 윈도우 사용자에게 F11을 눌렀을 때 좀 더 넓은 화면을 제공해 줄 수도 있습니다.

그러나,

1. 글쓰기와 함께 발생할 수 있는 동작인 파일첨부를 사이드 바로 위치하고
   
2. 보통, 글쓰기 시적 전에 발생하는 제목을 위쪽으로 배치하고
   
3. 글을 다 쓴 다음에 설정하게 되는 기능인 공개설정, 태그, 트랙백, CCL을

구분하였다면 좀 더 넓은 화면 구성을 갖출 수 있지 않을까하는 아쉬움이 있네요.

참고로, 제 노트북은 Lenovo X60, 12인치구요. 첫 화면에서는 8줄까지, 두 번째 화면에서는 12줄, 세 번째 화면에서는 17줄까지 스크롤 없이 쓸 수 있는 것을 확인하실 수 있습니다.


제목 입력하는 부분을 에디터 내부로 가져갔다는 점은 다른 서비스와 차별화를 보여주는데요.
지금은 제목만 입력하게 되어 있으나, 이후 공개될 가이드에 맞는 스킨을 작성하게 되는 경우 제목의 스타일과 함께 글을 볼 수 있는 효과를 보게 되지 않을까 싶습니다.

즉, 제목과 본문을 포함한 웹페이지의 형태(스타일)를 보면서 글을 작성할 수 있게 될 것 같습니다.

툴바의 모든 버튼에 단축 키를 포함시킴으로서 사용자들에게 어떤 키를 누르면 툴바 버튼을 누를 필요없이 바로 적용하다는 것을 보여주었다는 점도 눈에 띕니다. (단축 키 적용도 달라진 점이구요. 다음의 파워에디트와 동일한 것 같습니다.)

폰트설정과 폰트크기 설정 시 설정하는 결과물을 직접 보여줌으로써 사용자들이 폰트를 선택하거나 크기를 설정할 때 어떠한 스타일이 적용되었는 지를 쉽게 선택할 수 있게 해줍니다.

색상/배경색상 설정하는 부분에서 좀 더 세밀한 색생을 설정할 수 있게한 점은 사용자에게 편리성을 제공해주고 있습니다. 한 번 설정한 색상에 대해서 재설정 없이 툴바의 버튼만 클릭함으로서 다시 설정해주는 부분도 편리성을 많이 고려하였다고 생각됩니다.

그러나, 줄간격 설정, 리스트 설정에서 동일한 형태의 버튼을 사용하나 클릭시 디폴트 값이 적용이 되지 않는 점은 사용자에게 혼란스러움을 가져올 것 같다는 생각이 드네요.

이 외에도 많은 변경이 있지만. 미션2 참가를 위해서 다음 리뷰에 써야겠네요. ^^

첫 느낌은 깔끔하게 정돈된 센터에서 나를 강조해주는 티스토리가 너무 좋았구요. 사용자를 위해서 많은 고민을 통하여 글쓰기 페이지가 나왔다는 점이 너무 즐거웠습니다. 이런 리뷰를 할 수 있는 기회를 준 티스토리에 감사를~ ^^

아직 리뷰를 해보고 정리할 내용이 많지만 일단은 2,3 미션을 위해서 내일도 달려야 될 것 같습니다.

슬랜더톤?

오늘 아침 다음, 경향신문에서 눈에 띄는 기사가 있었습니다. "時테크 제품"~
그 중에도 눈에 쏙 들어오는게 복근 강화기라는 '슬랜더톤'~

제조(유통인 것 같습니다)회사 홈페이지에서 해당 제품에 대한 내용을 찾아보니

물리적인 별도의 움직임 없이도 저주파의 진동을 넘치는 뱃살 아래의 근육이 맞장구 치면서 복부 근육을 훈련시켜주는 원리이기 때문에 무리해서 운동할 필요가 없다는 것이 슬랜더톤의 가장 큰 덕목이다.

마케팅 담당자가 누군지 몰라도 상당히 자극적인 말을 공들여서 다듬은 듯한 이 느낌은, 구매자의 지름 욕구를 활성화시키는 아주 좋은 예제라 할 수 있다? (-_-;;;)

하지만 이 정도 도구까지 이용해서 이용해서 건강과 미용을 동시에 잡으려는 사람이라면, 가벼운 운동은 필수 기본사항 이라는 것을 모르는 체 하지는 않을 터.

게다가 문구 아래쪽에는 슬며시 빠져나갈 수 있는 구멍을 넣는 센스까지 보여줬다. 흐흐흐

그나저나, 한 대 사고 싶어지는군여.. 뱃살이 안빠져서 고민이였는데;;;

이미지 출처: (주)넥솔브의 슬랜더톤