[미션2]에디터를 파헤치자.

from [특집]베타테스트/메인 미션 2008/07/11 14:48

힘들게 첫번째 미션을 마친 뒤 좀 쉬려고 했더니 그새 또 새 미션이 하사되었습니다. ㅠㅠ
이번 미션은 에디터를 Before&After 형식으로 비교하라는 임무네요.

그런데 이미 "새롭게 탄생한 티스토리. 그리고 버그"에서 새롭게 변모한 에디터에 대한 소개글과 소감까지
적었기 때문에 딱히 더 적을 것은 없고... 그래서 그냥 새로 추가된 기능을 좀 더 세부적으로 들여다보고,
수정되었으면 하는 기능에 대해 정리하도록 하겠습니다.

그리고 지난번처럼 새롭게 발견한 버그 리포팅을 같이 올리도록 하겠습니다. ^^

대충 정리해보면:

  1. 새로 추가된 기능 심층 리뷰
  2. 수정/추가되었으면 하는 기능 (새 기능과 옛 기능 모두)
  3. 새롭게 발견된 버그 리포팅

그럼 본격적으로 시작해볼까요?

1. 새로 추가된 기능 심층 리뷰
지난 포스트에서 다뤘듯이 이번 개편을 통해 정말 많은 기능이 추가되었습니다.
조금 과장을 덧붙여 말하자면, 워드프로세서 부럽지 않을 정도의 에디터가 되었다고 할 수 있겠네요.

먼저 구버전과 신버전의 에디터 화면을 비교해보도록 하겠습니다.

구형 에디터

구형 에디터

신형 에디터

신형 에디터


위의 이미지에서 좌측이 구버전이고 우측이 신버전입니다.
이미지를 클릭해보시면 제가 달아놓은 설명을 좀 더 자세히 읽으실 수 있습니다.
뭐, 굳이 말할 필요도 없겠지만, 정말 많은 점이 바뀌었습니다.
일단 인터페이스 자체가 훨씬 깔끔하고 세련되게 변했습니다. 또한 화면 구성을 효과적으로 해서 쓸데없이
스크롤을 할 필요가 없어졌습니다. 추가된 기능도 정말 많죠.

그럼, 지금부터 에디터가 어떻게 변모했는지, 또 새로운 기능들은 어떤 것들인지 차례차례 살펴보도록 합니다.

A. 툴바의 구성
새로운 기능 탐방에 나서기 전에, 먼저 툴바를 살펴봅시다. 툴바를 살펴보는 것 만으로도 어떤 기능들이 추가되었고 어떤 기능들이 사라졌는지 쉽게 파악할 수 있으니까요.

먼저 옛날 툴바를 살펴봅시다.

옛날 툴바 윗부분

옛날 툴바 아래부분

옛날 툴바의 문제점은, 모든 것이 세로로 배치되어있다는 점입니다.
따라서 포스트에 여러 기능을 설정하려면 계속해서 스크롤바를 위로 올렸다 아래로 내렸다하는 작업을 반복해야하죠. 게다가 툴바 버튼 중에는 중복되는 버튼(예: 박스스타일)도 있었고, 글 작성 도중에 에디터 화면이 깨지는 현상도 종종 일어났습니다.

하지만 이런 문제점은 새로운 에디터에서 해결되었습니다.

새로운 툴바

새롭게 단장된 툴바를 살펴보면, 일단 깔끔해진 버튼이 눈에 들어오실 겁니다.
모든 버튼들의 크기가 일관성있게 만들어졌고, 아이콘만 봐도 기능에대한 별도의 설명이 필요없을 정도로 직관적이게 변했습니다.


B. 새로 추가된 기능들
새로 추가된 버튼도 많이 보이는데요, 물론 이번에 새롭게 등장한 기능들입니다.
그 기능들은 다음과 같습니다:

  • 들여쓰기/내어쓰기 기능
  • 줄간격 기능
  • 리스트 기능
  • 구분선 기능
  • 각주 삽입 기능
  • 표 삽입 기능
  • 이모티콘/특수문자 삽입 기능
  • 지도 삽입 기능
  • 사전 바로가기 기능
  • 정보 첨부 기능 (신버전 에디터 전체화면 참조)
  • 기존에 작성한 글 바로가기 기능 (신버전 에디터 전체화면 참조)
  • 서식 기능 (신버전 에디터 전체화면 참조)

물론, 이 뿐만이 아닙니다. 기존에 있던 기능들도 상당 수가 업그레이드 됐습니다.
그러면 지금부터 새로 추가된 기능들을 하나하나 살펴보고, 어떻게 구현되는지 그 예제도 보여드리겠습니다.
심층 분석인만큼, 포스트가 다소 길어질 수 있는 점 유의해주셨으면 합니다.
(쓰다보니 너무 길어져서 줄임글을 이용했습니다. 클릭하시면 각 기능을 살펴보실 수 있습니다.)

[1]들여쓰기/내어쓰기 기능 (단축키: Tab / Shift+Tab) - 살펴보기

[2]줄간격 기능 - 살펴보기

[3]리스트 기능 - 살펴보기

[4]구분선 기능 - 살펴보기

[5]각주 삽입 기능 - 살펴보기

[6]표 삽입 기능 - 살펴보기

[8]지도 삽입 기능 - 살펴보기

[9]사전 바로가기 기능 - 살펴보기

[10]정보 첨부 기능 - 살펴보기

"기존에 작성한 글 바로가기"와 "서식" 기능은 어쩐지 추후 미션 과제로 나올듯한 생각이 들어 생략하겠습니다.
다른 베타 테스터님들께서도 잘 정리해 놓으셨으니,
정 궁금하시다면 티스토리 공식블로그의 트랙백을 따라다녀보세요. ^^


C. 업그레이드된 기능들
위에서 보신 것처럼 새로운 기능도 많이 추가됐지만, 업그레이드된 기능도 많습니다.
그래서 다음 항목으로 넘어가기 전에, 어떤 기능들이 업그레이드 됐는지 잠깐 살펴보도록 하겠습니다.

업그레이드 된 기능들 - 살펴보기


2. 수정/추가되었으면 하는 기능
이번 개편을 통해 많은 기능들이 추가되고 또 업데이트되었지만,
아직도 제 성에 차지 않는 부분이 몇 군데 있습니다.

  1. "이전 글 넣기" 플러그인
    아주 좋은 플러그인이라서 자주 애용하고 있습니다. 하지만 사용하기가 굉장히 불편합니다.
    이전에 작성한 글을 검색하는 부분까지는 매우 편합니다만, 본문에 삽입을 하고나서부터가 문제입니다. 일반적으로 "이전 글"을 삽입한 다음, 이어서 글을 쓰곤 합니다.
    그런데 삽입한 이전 글 제목에 적용된 링크가, 그 뒤로 이어서 쓰는 문자열에도 적용이 됩니다.
    게다가 이 링크는 해제할 방법도 마땅치않습니다.
    이 문제는 수정이 되야하지 않을까 싶습니다.
    (글로 표현하기 어려운 문제점입니다. 잘 이해가 안 되신다면 댓글을 남겨주세요.)

  2. "줄간격"등의 기능에 대해, 기본값이 무엇인지 표시 요망
    "줄간격"과 같은 기능을 사용하다보면, 다시 기본값으로 돌려놓고 싶을 때가 있습니다.
    하지만 티스토리 에디터에는 기본값이 무엇인지 명시되어있지 않습니다.
    따라서 최소한 (기본값)이라는 캡션 정도는 달아줘야하지 않을까요.

  3. "폰트 스타일 초기화" 기능 요망
    "폰트 스타일 초기화" 기능이 무엇인지 의아해 하시는 분들이 계실 겁니다.
    무리도 아닙니다. 제가 여지껏 블로깅을 해보면서 이 기능을 제대로 지원하는 블로그를 본 적이 없을
    정도니까요.
    "폰트 스타일 초기화" 기능은, 말 그래도 폰트에 적용했던 스타일(모양, 크기, 색상, 배경색상등...)을 모조리 '초기화,' 즉 없애버리는 기능을 말합니다.
    쉽게 설명하기 위해 예를 들어보면, 어떤 블로거가 본문의 폰트 색상을 회색으로 설정한 CSS를 사용한다고 합시다. 그러던 어느날 그 블로거가 글을 작성하면서 실수로 어떤 문자열을 빨간색으로 설정해버렸습니다. 그래서 다시 원상복구시키고 싶은데, 원상복구를 하려면 폰트 색상을 자신이 CSS에 지정했던 색상으로 바꿔야합니다. 따라서 매우 번거로워지죠.
    하지만 "폰트 스타일 초기화" 기능이 있다면, 버튼 클릭 한번으로 폰트 색상을 지정하는 스타일 태그가 사라지게 되는 겁니다. 따라서 훨씬 편리하죠.
    이 기능 역시 이해가 잘 안 가시면 댓글을 달아주세요;;

일단은 이 세가지만 언급하겠습니다. 앞으로 베타 테스팅을 하면서 추가할 게 있으면 하도록 하겠습니다.


3. 버그 리포팅
이번 미션에서 다시 돌아온 버그 리포팅 시간입니다.
제가 처음 이 버그들을 찾았을 때는 아직 다른 분들이 발견하시기 전이었는데...
바쁜 스케쥴로 인해 이틀이나 미뤘더니 벌써 많은 분들이 발견하신 내용이더라구요.
그래도 아직 저만의 버그(?)가 있으니 너무 대충 보지는 말아주세요.

[1]정보 첨부 기능 삽입 후 재배치/삭제 불가능 - 더보기

[2]파일 삽입 후 저장하면 "invalid file"이라고 표시됨 - 더보기

[3]Side-by-side로 그림 삽입 시 사이즈 조절에 문제가 있음 - 더보기

[4]지도 삽입 후 생기는 검은 그림자 문제 - 더보기

[5]레이어를 이용한 팝업/드롭다운 메뉴가 에디터에 가려지는 문제 - 더보기

[6]Mac에서 첨부된 파일을 다중선택할 수 없음 - 더보기

[7]IE에서 임시저장에 관한 프롬트가 깨짐 - 더보기

*표 삽입 기능 관련 버그는 "아직은 반쪽짜리인 표 삽입 기능"을 참조해주세요.


휴우, 이 포스트를 완전히 작성하는데 거의 3일 가까이 걸렸네요.
자꾸만 늦어져서 처음에는 저만 알던 버그들도 이미 많은 베타 테스터분들께서 찾아내셨더군요.
조금 아까운 느낌..ㅋㅋ

그런 의미(?)에서 보너스입니다:

기능