텍스트큐브닷컴 공식블로그

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


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

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

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

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


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


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


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


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

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

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



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


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


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

텍스트큐브닷컴 글쓰기에서는 위지윅(WYSIWYG) 에디터를 통해서 블로그에서 보여지는 화면 그대로 보면서 글, 공지 글을 작성하고 수정할 수 있습니다. 각종 편집 도구와 첨부파일 업로드 기능을 통해 손쉽게 글을 작성하고 글을 꾸밀 수 있도록 도와줍니다. 글의 공개 여부와 댓글, 트랙백 허용 여부도 글쓰기 메뉴에서 설정이 가능합니다.

텍스트큐브닷컴의 에디터는 Internet Explorer, Mozilla Firefox, Safari, Opera 웹브라우저를 지원합니다.

1. 제목 입력

글의 제목을 입력합니다. 환경설정 > 블로그 설정 > 블로그 주소 설정 > 글 주소 에서 글 주소를 "문자를 사용합니다" 로 지정했을 경우 글의 제목이 해당 글의 주소로 설정됩니다. (예를들어 글 제목이 "텍스트큐브닷컴 클로즈드 베타를 시작합니다" 일 경우 글 주소는 http://blog.textcube.com/entry/텍스트큐브닷컴-클로즈드-베타를-시작합니다 가 됩니다.)

2. 분류 설정

글의 분류와 종류를 지정합니다. 일반적인 글의 경우 분류 관리에서 만든 1단 혹은 2단 분류를 설정할 수 있습니다.

공지를 선택하게 되면, 블로그의 공지사항 글을 작성합니다. 블로그 스킨의 공지사항 위젯에 해당 공지 글 제목이 표시되며, 블로그 상단메뉴의 공지사항 메뉴 (블로그주소/notice) 에서 볼 수 있습니다. 공지사항은 별도로 분류를 선택할 수 없으며, 댓글을 작성하거나, 트랙백을 받을 수 없습니다.

3. 첨부위자드

이미지, 오디오 등의 첨부파일과 외부 동영상 등의 미디어 파일을 손쉽게 글에 삽입할 수 있도록 도와주는 기능입니다. 각 첨부위자드 별로 살펴 보겠습니다.

이미지, 오디오, 동영상, 첨부파일, 외부 미디어 첨부에서 상용프로그램이나 기타 이용약관을 위반하는 첨부파일을 올릴 경우 텍스트큐브닷컴 서비스의 약관과 정책에 따라서 텍스트큐브닷컴 사용자 분의 서비스 이용을 제한하거나 해당 게시물을 삭제할 수 있으니, 이점 유의하여 주시기 바랍니다.

현재 텍스트큐브닷컴에서는 한 번 업로드할 때에 파일 1개당 최대 10MB 까지, 총 용량 최대 80MB 까지 업로드가 가능합니다. 파일 개수 제한은 없으나 웹브라우저의 파일 선택창에 의해서 제한이 될 수도 있습니다.

2008년 8월 7일 첨부위자드가 개편되었습니다. " 텍스트큐브닷컴 에디터 첨부 위자드, 옷 갈아입다" 글을 참고해주시기 바랍니다.

이미지

이미지를 삽입합니다. 파일업로드를 통해서 여러개의 이미지를 동시에 선택해서 올릴 수 있습니다. 10MB 이하의 JPG, GIF, PNG 파일만 업로드 하실 수 있습니다.

오른쪽 속성창에서 대체 텍스트와 자막을 설정할 수 있습니다. 대체 텍스트는 이미지를 보여줄 수 없는 경우 웹브라우저에서 텍스트로 해당 이미지를 설명하는 기능이며, 자막은 이미지 아래에 해당 이미지를 설명하는 문구를 추가해주는 기능입니다.

이미지 첨부 기능은 클로즈드베타 기간 내에 보완될 예정입니다.

개별 배치

개별 배치는 업로드한 파일을 한 개씩 본문에 삽입하는 기능입니다. 파일 업로드 완료후 파일을 선택해서 각 개별 이미지 별로 가로폭, 대체 텍스트와 자막를 입력할 수 있습니다. 업로드한 전체 이미지가 정렬 방식에서 왼쪽, 가운데, 오른쪽 중에서 선택한 방식으로 들어가게 됩니다.

이미지 갤러리

이미지 갤러리는 업로드한 파일을 여러장 씩, 슬라이드 형태로 본문에 삽입하는 기능입니다. 파일 업로드 완료후 파일을 선택해서 각 개별 이미지 별로 대체 텍스트와 자막을 입력할 수 있습니다.

각 개별 이미지에 대한 가로폭, 정렬 위치 설정은 지원하지 않으며 이미지 갤러리 전체에 대한 슬라이드 쇼 크기와 정렬 위치의 설정이 가능합니다.

플래시 갤러리

이미지 갤러리는 업로드한 파일을 여러장 씩, 플래시 슬라이드 형태로 본문에 삽입하는 기능입니다. 파일 업로드 완료후 플래시 갤러리의 전체 속성을 지정할 수 있습니다.

각 개별 이미지에 대한 가로폭, 대체 텍스트, 자막, 정렬 위치 설정은 지원하지 않으며, 플래시 갤러리 전체에 대한 슬라이드 쇼 크기와 자막, 정렬 위치의 설정이 가능합니다.

오디오

MP3 파일 형식으로된 오디오 파일을 업로드하여 본문에 플래시 플레이어 형태로 첨부합니다.

10MB 이하의 MP3 파일만 업로드가 가능하며, 여러개의 오디오 파일을 동시에 올릴 수 있습니다.

각 파일을 선택해서 오른쪽 미니 플레이어를 통해서 미리 듣기를 하실수 있으며, 왼쪽 파일 리스트에서 드래그앤드롭을 통해서 재생 순서를 조정할 수 있습니다.

자동 재생을 체크하시면, 블로그에 처음 접속하자마자 오디오가 재생이 됩니다. 플레이어 보이기를 체크하시면 블로그의 본문 상에서 아래와 같은 플래시 MP3 플레이어를 보여주며, 해제 할 시 플래시 MP3 플레이어를 보여주지 않습니다. 플레이어의 정렬 방식을 선택할 수 있습니다

동영상

동영상 첨부 위자드에서는 현재 YouTube 에 올라온 동영상을 검색하여 본문에 첨부할 수 있는 기능을 제공하고 있습니다.

검색어 검색을 통해서 YouTube 에 올라와 있는 동영상을 검색하고 선택해서 본문에 삽입 할 수 있습니다.

오른쪽 영역에서 선택한 동영상의 미리보기, 등록자, 등록일시, 영상 길이, 조회수의 확인이 가능하고, 확인시 본문에 삽입합니다.

동영상 첨부, 검색 삽입 기능은 클로즈드베타 기간 내에 보완될 예정입니다.

첨부 파일

문서 파일, 압축 파일등의 첨부파일을 업로드해서 본문에 삽입할 수 있습니다.

여러개의 파일을 동시에 업로드해서 첨부할 수 있으며, 하나의 파일당 최대 10MB 까지 업로드가 가능합니다.

각 파일에 해당하는 자막을 오른쪽 속성창에서 지정할 수 있으며, 선택된 정렬 방식에 따라서 왼쪽, 가운데, 오른쪽 정렬로 업로드한 모든 파일이 삽입됩니다.

외부 미디어

동영상이나 플래시 등의 외부 미디어를 삽입합니다. 코드 입력을 통해서 외부 서비스에서 제공하는 코드를 입력해서 미디어를 삽입할 수 있으며, 주소 입력을 통해서 해당 파일명을 직접 입력해서 삽입할 수 있습니다.

 

4. 글 검색후 본문에 넣기

검색어 검색을 통해서 현재 블로그에서 작성된 글을 찾아서 본문 내에 넣을 수 있도록 도와줍니다. 제목과 본문을 대상으로 검색하며, 검색된 결과에서 넣기를 통해서 제목과 요약문 형태로, 한줄 넣기를 통해서 제목만 삽입할 수 있습니다.

넣기 예제

한줄 넣기 예제
텍스트큐브닷컴 클로즈드 베타를 시작합니다.

20008년 12월 18일 업데이트로 Google 블로그, 뉴스, 웹 검색 삽입을 지원합니다.

5. HTML 편집

기본적인 위지윅 에디터에서 HTML 코드 편집 모드로 변경하는 기능입니다.

6. 편집 도구

• 글자체, 크기 : 글자의 글꼴 및 크기를 조정합니다.
• 굵게 : 글자를 굵은 글씨 (bold체) 로 바꾸어 줍니다.
• 기울임 : 글자를 기울임체 (이탤릭체) 로 바꾸어 줍니다.
• 밑줄 : 글자 하단에 밑줄을 그어 줍니다.
• 취소선 : 글 가운데 선을 그어줍니다. 수정된 글에서 원본과 수정본을 같이 보여줄때 많이 사용됩니다.
• 글자색 : 글자의 색상을 변경합니다. 기본적으로 70가지 색상이 제공하며, RGB 코드를 입력하여 색상을 변경할 수 있습니다.
• 배경색 : 글자 뒷부분에 배경색을 변경합니다. 기본적으로 70가지 색상이 제공되며, RGB 코드를 입력하여 색상을 변경할 수 있습니다.
• 효과제거 : 글자에 지정한 속성(굵기, 기울기, 글자색, 배경색)을 제거하여 초기화시킵니다
• 글정렬 : 글, 첨부한 이미지 등을 왼쪽, 가운데, 오른쪽으로 정렬시켜 줍니다.
• 리스트 : 숫자가 없는 리스트와 숫자가 붙은 리스트가 제공됩니다. 목차등을 작성할 때 유용하게 쓰일수 있습니다.
• 내어/들여쓰기 : 글을 들여쓰거나 내어쓰기해 줍니다.
• 인용구 : 인용구을 작성합니다. blockquote CSS 설정에 따라 따옴표 표시 등으로 인용구를 꾸며서 출력합니다.
• 텍스트 상자 : 배경색이 있는 텍스트 상자를 만들어 줍니다. 테이블 대용으로 많이 사용됩니다.
• 링크 : 외부주소와 연결되는 링크를 생성합니다. 블록으로 설정된 부분에 링크를 지정하거나, 바로 URL 을 입력하여 링크를 삽입할 수 있습니다.
• 펼쳐두기/접어두기 : 포스트 안에 클릭시 펼쳐 보여주는 숨김글을 생성합니다. 활성화 링크의 텍스트는은 우측 상단 속성창에서 변경하실수 있습니다.
• 특수문자 : 일반기호, 숫자,단위문자, 원,괄호문자, 그리스,러시아어, 일본어를 선택해서 입력할 수 있습니다.
  
• 표 : 가로 행과 세로 열을 지정하여 표를 만듭니다. 가로,세로 최대 30줄 씩 지정할 수 있으며, 테두리 색과 배경 색의 지정이 가능합니다.

7. 본문 편집

본문 입력
지정된 모드에 따라서 위지윅/HTML 모드로 본문 내용을 입력합니다. 위지윅 에디터에서는 블로그의 스킨 가로폭과 동일하게 맞춰진 편집 화면을 제공합니다. 편집창 하단의 편집창 세로 크기 조절 부분을 통해서 편집창 크기를 조절할 수 있습니다.

태그
글의 내용을 대표하는 주제어, 꼬리표인 태그를 입력합니다. 태그 입력을 통해 보다 쉽게 글을 분류할 수 있으며, 블로그의 태그 메뉴와 사이드바의 태그 목록을 통해 블로거의 관심사를 파악할 수 있는 태그 클라우드로의 활용이 가능합니다. 태그 입력시 해당 단어를 포함한 사용 빈도 수가 높은 태그와 이올린의 추천 태그를 출력하여 쉽게 태그를 선택 할 수 있습니다. 태그를 입력하지 않았을 시에는 현재 블로그에서 사용 빈도 수가 높은 10개의 태그를 출력합니다.

지역 태그

글과 관련된 지역을 표시하는 기능입니다. 지역태그를 지정하면 지역별로 지역로그에 체계적으로 정리할 수 있고 이올린 에서 지역별로 검색될 수 있도록 합니다. 강남역 3번출구와 관련된 글의 예를 들어보겠습니다. "강ㄴ"까지 입력하면 대한민국/서울/강남역가 추천(이올린에서 사용빈도가 많은 지역 태그)될 것입니다. 화살표를 이용해 선택한 후 엔터를 치면 '대한민국/서울/강남역'이 자동으로 입력됩니다. 추천 지역에 3번출구가 없다면 강남역 뒤의 입력상자에 3번출구라고 직접 입력하시면 지역태그 입력이 끝납니다. 찾는 지역이 없으면 직접 입력하시면 됩니다. 이올린 지역이야기를 통해 이올린에 발행된 지역태그별 글을 살펴볼 수 있습니다.

8. 첨부 파일 관리 및 글 설정

파일 미리보기 및 삭제
본문에 첨부할 파일을 관리합니다. 이미지의 경우 미리보기를 통해 업로드된 파일을 구별할 수 있으며, MP3 파일의 경우 미리듣기를 통해 업로드된 음악을 구별할 수 있습니다. 파일을 선택하면 화면 왼쪽에 미리보기를 통하여 어떤 파일인지 확인할 수 있으며, 불필요한 파일일 경우 삭제 할 수 있습니다. (파일 선택창에서 Ctrl + 마우스 클릭을 통해 다중 선택이 가능합니다.)

등록일자

글의 등록일자를 설정합니다.

• 유지 : 이전 등록일자를 유지합니다.
• 갱신 : 글 저장시 현재 시점으로 등록일자를 갱신합니다.
• 예약 : 미래의 시점으로 일시를 설정할 경우 글이 예약되며, 해당 일시에 글이 공개여부에 따라 공개/발행됩니다. 과거의 시점으로 일시를 설정할 경우 글의 등록일자를 수정할 수 있습니다.

공개여부

글의 공개 및 발행 여부를 지정합니다.

• 비공개 : 관리자로 로그인한 상태에서만 보이는 비공개 상태로 지정합니다.
• 공개 : 글을 공개하며 이올린으로 발행합니다. 블로그에 방문하는 모든 이들이 글을 볼 수 있습니다.
  
  • 이올린이란? : 이올린은 텍스트큐브닷컴과 텍스트큐브 기반의 블로그에서 "발행"을 통해 보내진 글들을 다양한 방법으로 만날 수 있는 텍스트큐브 블로거들의 열린 공간입니다.
  • 공개 방법 : 텍스트큐브닷컴 글목록에서 공개 버튼을 누르거나 글쓰기시 공개범위를 "공개"으로 체크하면 됩니다. 공개를 통해 이올린으로 보내진 게시물들의 저작권을 포함한 일체에 관한 권리는 별도의 의사표시가 없는 한 각 회원에게 있습니다. 이올린에서는 공개된 게시물을 블로거의 동의 없이 상업적으로 이용하지 않습니다. 다만 비영리적 목적인 경우는 이용이 가능하며, 또한 이올린 서비스 내의 게재권, 사용권을 갖습니다.

글권한 / 주소 설정

• 댓글 작성을 허용합니다. : 해당 글에 댓글을 작성을 허용합니다. 체크를 해제하면 댓글을 쓸 수 없습니다.
• 글을 걸 수 있게 합니다. : 해당 글에 글걸기(트랙백)를 허용합니다. 체크를 해제하면 글을 걸 수(트랙백을 남길 수) 없습니다.
• 글 주소 : 해당 글의 절대 주소를 설정 합니다. 입력하지 않으면 글의 제목이 자동으로 절대 주소로 지정됩니다. 일반적인 글에만 해당되며, 공지의 주소는 설정할 수 없습니다.
  

저장하기

• 미리보기 : 현재 작성된 글을 블로그 화면에서 미리봅니다.
• 임시저장 : 현재까지 작성한 글을 저장합니다. 마지막으로 입력된 후에 내용의 변화가 있을 경우 5초 후에는 자동적으로 저장을 하여, 글이 유실되는 것을 예방합니다. 자동으로 저장된 글은 글의 임시저장본으로 저장되며, 저장 완료 전까지는 외부로 공개되지 않습니다.
• 저장 완료 : 문서를 저장하고 글 목록으로 이동합니다.
• 목록보기 : 글 목록으로 이동합니다.