Thursday, August 7, 2008

텍스트큐브닷컴 에디터 첨부 위자드, 옷 갈아입다

이번 텍스트큐브 업데이트의 가장 큰 변화중 하나는 에디터 첨부 위자드의 인터페이스 (UI) 변경입니다. 우리가 블로그를 쓰면서 가장 많이 보는 화면은 어디일까요? 네 맞습니다, 바로 글쓰기 (에디터) 화면이죠. 실제로 통계를 뽑아봐도, "글쓰기 화면"으로의 트래픽 비중은 과장 좀 섞자면 햄버거를 주문하는 분들이 음료수로 콜라를 선택하는 비중만큼이나 높답니다. 그래서 저희는 유저들께서 매일 접하시는 에디터, 그중에서도 첨부 위자드의 UI를 개선하기로 했습니다.


흠.. 비교샷만 보면 별로 크게 달라진 것 같지 않아 보이신다구요? 그럼 달라진 면을 하나하나 설명드려보도록 하겠습니다. 먼저, 좀더 "단계" 구분을 명확히 함으로써, 좀더 직관적으로 플로우를 인지할 수 있도록 했습니다. 아마 보통의 유저라면 이미지를 올리기 위해 이러한 과정을 거치시지 않을까 생각했습니다.

1단계. 글에 첨부할 이미지 재료들을 올립니다.
2단계. 그러한 이미지 재료들을 어떻게 배치할 것인지 결정하고 (단일 배치, 묶음 배치, 슬라이드쇼 등), 필요한 경우 이미지들이 나타나는 순서를 변경합니다.
3단계. 미리보기를 통해 "마음의 평화"를 얻고, 글에 삽입합니다.

물론 가장 흔한 경우는 글쓰기 중간에 사진 한두장을 가운데 정렬로 글에 삽입하는 것일 테고, 굳이 단계 구분에 신경쓰지 않더라도 이러한 과정이 쉽고 빨리 진행될 수 있도록 기본(디폴트) 옵션은 "한장씩 배치, 가운데 정렬" 등으로 지정되어야 할 것입니다.

아무튼 첫번째 단계는 글에 첨부할 이미지 재료를 올리는 단계입니다. 새 파일을 올리는 과정은 보통의 UI를 따르고 있습니다.


그런데 기존과는 달리 새 파일을 올리는 것 외에 이미 글에 첨부했던 이미지를 재사용하기 위해 불러올 수도 있게 하였습니다. 기존 태터툴즈의 "파일 관리자 기능"을 되살린 셈이죠. 파일 관리자 기능은 블로그 단위가 아닌 글 단위로 동작합니다. 즉 해당 글에 이미 첨부되었던 파일들만 불러오게 됩니다.


이렇게 해서 올려진 이미지 재료들은, 아래에서 보시듯 "이미지 슬롯"에 하나씩 차곡차곡 채워집니다. 이렇게 슬롯에 채워진 이미지들에 대해서, 이제 배치 설정을 변경할 수 있습니다. 이를테면 사진들을 한장씩 연속으로 배치할 것인지, 아니면 묶어서 플래시 슬라이드쇼를 만들 것인지 등을 선택할 수 있습니다. (두장, 세장씩 나란히 배치하기 옵션을 선택하면 좌측에서부터 2장, 3장이 선택되었음을 알려주는 테두리가 나타납니다.) 배치 옵션을 변경함에 따라서 아래 보이는 미리보기 창의 내용 역시 변하게 됩니다.


이미지의 배치 옵션 외에도, 각 이미지들이 나타나는 순서 또한 드래그 앤 드롭으로 쉽게 변경할 수 있습니다. 아울러 특정한 사진을 제외하고 싶을 때는 이미지 우하단에 있는 조그만 X버튼을 누르면 이미지 슬롯에서 해당 이미지가 빠지게 됩니다. (실제 이미지 파일 자체가 삭제되지는 않습니다.)


마지막으로 "미리보기"를 통해 이미지 선택과 배치가 올바르게 되었음을 확인하고 나서, "확인" 버튼을 누르면 이미지가 글에 삽입됩니다.

참고로 이미지의 크기, 자막 내용 등 각종 설정값들의 경우, 첨부위자드 화면에 넣으면 너무 복잡하게 보일 수 있으므로, 글에 이미지를 삽입한 다음 해당 이미지를 클릭하면 오른쪽에 뜨는 "프로퍼티 창"을 통해서 설정할 수 있도록 사용성을 통일하였습니다.

글에 이미지가 삽입된 후, 해당 이미지를 글에서 지우면, 당연히 블로그에서 보이지 않습니다. 그러나 만일 블로그에 보여지지 않는것 뿐 아니라 이미지 파일 자체를 완전히 삭제하고 싶은 경우, 에디터 화면 하단의 "파일 추가/제거"버튼을 눌러서 특정 파일을 삭제할 수 있습니다. 파일의 추가 역시 가능하며, 추가된 파일은 "기존 파일 불러오기" 버튼을 누를 때 보여지게 됩니다. 



블로그에 이미지를 첨부할 때 보통은 자신의 PC에 있는 이미지 파일을 올릴 때가 가장 많지만, 간편하게 인터넷에서 이미지를 검색해서 올리는 방법도 있답니다. (개인적으로 차이가 있겠지만, 써보시면 꽤 편하고 재미있습니다.) 이번 업데이트에서는 플리커와 구글 이미지 검색이 적용됨으로써, 기존의 "유튜브 비디오 검색 및 첨부" 처럼 이미지 역시 간단히 검색해서 붙여넣으실 수 있게 되었습니다. 얼마전 저희 회사를 저희 회사 옆의 빠리바게트를 방문해서 CF를 찍었던 김태희씨의 이미지를 검색해서 넣어 볼까요?

플리커, 구글 이미지 검색


지금까지 이미지 첨부 위자드를 위주로 자세한 설명을 드렸습니다. 이미지 첨부 위자드의 변경과 맞추어, 오디오 및 일반 파일 첨부 위자드의 UI 역시 변경되었습니다.


이상입니다. 아직도 유저들께서 보시기에 여러가지로 부족한 면들이 있겠지만, 이번 에디터 첨부위자드 변경은 실력있는 외부의 웹 UI 전문 컨설턴트와 저희 회사가 나름 머리를 맞대고 작업한 결과랍니다. 텍스트큐브닷컴은 가장 쉽고 직관적인 블로그 UI를 위해서 계속 노력하겠습니다. 지켜봐 주시고, 계속 피드백 주시면 감사하겠습니다.

28 comments:

  1. 대박이다!!!!!!!!!!!!!!!!! 아싸 ㅠㅠㅠ

    감격이에요. 너무 편리해진 것 같은데요? 실제로 포스팅 하면서 해봐야 감이 올 것 같네요 ^^

    수고하셨습니다~ 텍스트큐브닷컴 직원분들~~~

    ReplyDelete
  2. 음...에디터...가장 관심거리이고....

    티스토리와 텍스트큐브 발전을 지켜 보고 싶어요..

    이제 1단 기어를 넣은 텍스트큐브....

    2단기어를 넣으려고 하는 티스토리....

    텍스트 큐브도..티스토리 베타도 관심이 가네요....

    지켜 보면서 화이팅 할께요!!!!

    텍스트 큐브 화이팅.....

    ReplyDelete
  3. 와우~~ 점점 텍스트큐브닷컴으로 옮겨가고 싶은 욕망이 생기네요.--;

    무더운 여름 고생하셨습니다. ^^;

    ReplyDelete
  4. 흠...저는 이상하게 이미지 올릴때 에러가 발생하네요....

    vista+IE7인데 이미지파일이 아닙니다 라는 메시지가 나오네요....

    첨부파일로 올린 후에, 나중에 회사에서 윈XP에서 다운받아서 이미지로 올리는 작업을 해야 합니다.



    제 노트북만 에러인지 모르겠네요....

    ReplyDelete
  5. trackback from: 블로그 업데이트 및 건의
    사이드바에 블로그씰과 뮤직 플레이어를 달았습니다. 블로그씰은 그렇다치더라도, 뮤직 플레이어는 정말로 제 맘에 쏙 듭니다. 그래픽 적으로도 그렇고, 자동 재생이 아닌, 자신이 선택할 수 있다는 점에서도 그렇고요. 텍큐에서도 좀 다양한 오디오 플레이어가 나왔으면 좋겠어요. 이건 좀 진심입니다. 좀 더 시각적으로 멋있는 것이 나왔으면 해요. (그렇다고 블로그씰이 의미없다는 것은 아닙니다. 의미가 없다면, 달지 않았겠지요?? 씰을 통해 블로거들끼리 서로 연..

    ReplyDelete
  6. 저 다 좋은데 에디터 가로 크기 좀 늘려주세요;; 아니면 이미지를 에디터 툴에 맞춰지는 기능이라도;; 640px로 올리니까 계속 그림 옆이 짤려서 제대로 사용하기가 힘듭니다 ㅠㅠ

    ReplyDelete
  7. 자유정렬이 새로 생겼길래 일전에 건의드렸던 자동정렬일까 기대했는데... 아쉽네요. ㅠㅠ

    ReplyDelete
  8. @bizbook - 2008/08/07 22:36
    저희 쪽에서 동일한 환경에서 확인해봤습니다만 bizbook님의 문제는 재현할 수가 없었습니다. 번거롭게해드려 죄송합니다만 가능하시다면, 문제가 되는 이미지 파일을 textcube 골뱅이 textcube.com 으로 보내주시면 확인해보도록 하겠습니다.

    ReplyDelete
  9. @무한의가락 - 2008/08/07 23:03
    예 그 부분에 대해서 좀 더 고민을 하여 보완할 수 있도록 하겠습니다. 무한의가락님 말씀해주셔 감사합니다 :)

    ReplyDelete
  10. @ginu - 2008/08/08 03:01
    http://blog.textcube.com/guestbook/88678#comment88678 이 부분 말씀하시는 것이지요? 스킨 가로폭에 따른 리샘플링은 여러 고려요소가 있어서 아직 지원하지 않고 있습니다. 이점 이해해주시길 부탁드립니다. 향후 다른 방향으로도 개선할 수 있도록 고민해보겠습니다.

    ReplyDelete
  11. trackback from: 이미지 첨부하기 엄청난 업그레이드..
    이번 업그레이드는 글쓰기에 많은 부분이 있었다 이미지 첨부하기이다 플리거나 구글의 이미지를 추가할 수 있다 그리고 이미지를 추가할때 어떻케 정렬할것인지도 미리보기를 통해서 정렬하고 순서도 정렬 가능하다 이미 올려진 이미지도 다시 같은 본문의 다른곳에 첨부를 쉽게 할 수 있다 아쉽운건 다른 글에서는 재사용이 불가능하다는 것이다 한가지 의견을 추가하면 이미지 검색이 어떤씩인지 모르겠지만.. 단순 파일명 검색이 아니라 이미지 파일 붙은 태그나 또는 자신이..

    ReplyDelete
  12. 플리그나 구글 이미지 검색할때요

    자신요 올린 이미지도 검색 할 수 있었음 좋했습니다^^

    유튜브 동영상도 마찬가지이구요~~

    ReplyDelete
  13. 사실 그동안 불편했던 부분인데, 가려운 부분을 잘 긁어 주셨네요. 너무 편해졌습니다. 감사합니다. ^^

    ReplyDelete
  14. @텍스트큐브닷컴 - 2008/08/08 10:41
    나중에라도 꼭 지원되었으면 합니다. ㅅㅅ

    덧붙여 무한의가락님 의견처럼 에디터 가로 크기도 넓으면 이미지를 첨부하며 글을 작성하는 데 훨씬 쉬울 거에요.

    ReplyDelete
  15. trackback from: 이미지 버튼이 말을 안 듣습니다.
    '텍스트큐브닷컴 에디터 첨부 위자드, 옷 갈아입다'를 읽고 좋아졌구나 생각했습니다..... 하지만, 어제부터 에디터에서 이미지 단추를 클릭하면 아무런 반응을 하지 않는답니다. 저는 파이어 폭스 3.0.1에서 주로 포스팅을 하는데, 어제만 그런 줄 알았는데, 오늘도 그러네요. 내일이면 내 에디터의 이미지 버튼이 제정신으로 돌아올련지요... ㅡ.ㅡa;;;;

    ReplyDelete
  16. trackback from: 이미지 자유배치 좋아요~
    '텍스트큐브닷컴 에디터 첨부 위자드, 옷 갈아입다'에서 이미지 자유배치가 맘에 든다. 설정하고 에디터에서 왼쪽정렬 버튼을 누르면 된다. 바로 내가 원하던 것이야~ 이미지 크기를 줄였는데, ie7보다 파이어폭스에서 훨 깔끔하게 보여준다.

    ReplyDelete
  17. 갑자기 한가지 궁금증이 생깁니다.

    플리거나 구글 이미지 첨부하기

    만약에 플리거나 구글에서 이미지가 삭제되면

    내가 올린 블로그의 이미지는 어떻케 될까요??

    ReplyDelete
  18. @JinKPark - 2008/08/08 12:49
    이건 플리거나 구글에 요청을 해야할듯합니다.

    ReplyDelete
  19. 이미지 올리는 부분에 살짜쿵 불만이 있었는데 이번 업데이트로 많이 편해졌네요. 덕분에 이미지 올리며 마음의 평화를 얻습니다^^

    ReplyDelete
  20. @JinKPark - 2008/08/08 18:55
    Flickr, Google 이미지 검색으로 검색해서 삽입한 이미지의 경우, 해당 이미지 자체가 삭제되면 블로그의 삽입된 이미지도 나오지 않게됩니다. 해당 이미지 주소를 직접 삽입하는 방식이기 때문입니다. 직접 해당 이미지를 저장해서 업로드 하시면 이러한 문제는 해결 될 수 있습니다.

    ReplyDelete
  21. @ginu - 2008/08/08 03:01
    예 ginu님 많은 분들이 원하시는 기능의 경우 우선 순위를 먼저 고려하도록 하겠습니다^^;

    ReplyDelete
  22. @JinKPark - 2008/08/08 12:49
    예 말씀하신 부분도 고려를 했었습니다만, 인증 처리 등의 문제가 있어서 일단은 전체 검색을 대상으로 지원을 하게되었습니다. :)

    ReplyDelete
  23. 설정을 통해 textcube에 사진을 올리더라도 flickr에 동시에 올라가거나, 또는 flickr에 올라가게끔..하는 기능이 있으면 참 편할 것 같습니다.

    ReplyDelete
  24. @beckgom - 2008/08/11 19:59
    flickr 로의 업로드, 동시 업로드 부분의 경우 별도의 계정 연동 승인, 업로드 API 활용등이 필요한 부분으로 이번 개선에서는 제외되었습니다. 추후 고려해보도록 하겠습니다. 의견 주셔서 감사합니다.

    ReplyDelete
  25. trackback from: SOMEBODY HELP ME!!!!!!!!!!!!!!(2)
    펼쳐서 보세요- 펼쳐두기.. 전에 참고글// http://cressiah.textcube.com/193 다시 시도해 보았지만,,,, 역시나, 접속이 되질 않아서, 우회 IP로 접속중 입니다.... 자세한 내용은 동영상을 참고 부탁드립니다... 그런데,,,, 이 현상을 텍큐에다가 어떻게 전달해야 할까요....ㄷㄷ http://tvpot.daum.net/clip/ClipView.do?clipid=16297331 아 놔.... 추신// 절대, 소리는 켜지..

    ReplyDelete
  26. 관심블로그로 등록했는데 이곳은 방명록같은게 없네요 ㅡㅡ!

    아무튼 이곳에서 대신 질문좀 하려고합니다.물론 텍스큐브를 쓰고있는 유저중 한명이구요..



    1텍스큐브엔 비공개와 공개옵션뿐인데 혹시 성인공개나 이웃공개와같은 옵션좀 만들어주실순없나요?



    2텍스큐브는 한사람당(한아이디당)몇개까지 재차 만들수있는지도 궁금합니다.



    3텍스큐브엔 티스토리와같은 사진이나 동영상만을 따로 저장하는 그런곳은 없나요??없으면 좀 만들어주신다면 좋을듯한데..^^

    ReplyDelete
  27. 왜 동영상은 안올라가나요????????????????

    ReplyDelete
  28. 아직도 동영상 올리기 유튜브로밖에 안되나요?



    바로 올릴수는없나요?

    ReplyDelete