'첨부'에 해당되는 글 1건
- 2008/08/07 텍스트큐브닷컴 에디터 첨부 위자드, 옷 갈아입다 (24) _ 텍스트큐브닷컴
이번 텍스트큐브 업데이트의 가장 큰 변화중 하나는 에디터 첨부 위자드의 인터페이스
(UI) 변경입니다. 우리가 블로그를 쓰면서 가장 많이 보는 화면은 어디일까요? 네
맞습니다, 바로 글쓰기 (에디터) 화면이죠. 실제로 통계를 뽑아봐도, "글쓰기 화면"으로의 트래픽
비중은 과장 좀 섞자면 햄버거를 주문하는 분들이 음료수로 콜라를 선택하는 비중만큼이나
높답니다. 그래서 저희는 유저들께서 매일 접하시는 에디터, 그중에서도 첨부 위자드의 UI를
개선하기로 했습니다.
흠.. 비교샷만 보면 별로 크게 달라진 것 같지 않아 보이신다구요? 그럼 달라진 면을 하나하나 설명드려보도록 하겠습니다. 먼저, 좀더 "단계" 구분을 명확히 함으로써, 좀더 직관적으로 플로우를 인지할 수 있도록 했습니다. 아마 보통의 유저라면 이미지를 올리기 위해 이러한 과정을 거치시지 않을까 생각했습니다.
1단계. 글에 첨부할 이미지 재료들을 올립니다.
2단계. 그러한 이미지 재료들을 어떻게 배치할 것인지 결정하고 (단일 배치, 묶음 배치, 슬라이드쇼 등), 필요한 경우 이미지들이 나타나는 순서를 변경합니다.
3단계. 미리보기를 통해 "마음의 평화"를 얻고, 글에 삽입합니다.
물론 가장 흔한 경우는 글쓰기 중간에 사진 한두장을 가운데 정렬로 글에 삽입하는 것일 테고, 굳이 단계 구분에 신경쓰지 않더라도 이러한 과정이 쉽고 빨리 진행될 수 있도록 기본(디폴트) 옵션은 "한장씩 배치, 가운데 정렬" 등으로 지정되어야 할 것입니다.
아무튼 첫번째 단계는 글에 첨부할 이미지 재료를 올리는 단계입니다. 새 파일을 올리는 과정은 보통의 UI를 따르고 있습니다.
그런데 기존과는 달리 새 파일을 올리는 것 외에 이미 글에 첨부했던 이미지를 재사용하기 위해 불러올 수도 있게 하였습니다. 기존 태터툴즈의 "파일 관리자 기능"을 되살린 셈이죠. 파일 관리자 기능은 블로그 단위가 아닌 글 단위로 동작합니다. 즉 해당 글에 이미 첨부되었던 파일들만 불러오게 됩니다.
이렇게 해서 올려진 이미지 재료들은, 아래에서 보시듯 "이미지 슬롯"에 하나씩 차곡차곡 채워집니다. 이렇게 슬롯에 채워진 이미지들에 대해서, 이제 배치 설정을 변경할 수 있습니다. 이를테면 사진들을 한장씩 연속으로 배치할 것인지, 아니면 묶어서 플래시 슬라이드쇼를 만들 것인지 등을 선택할 수 있습니다. (두장, 세장씩 나란히 배치하기 옵션을 선택하면 좌측에서부터 2장, 3장이 선택되었음을 알려주는 테두리가 나타납니다.) 배치 옵션을 변경함에 따라서 아래 보이는 미리보기 창의 내용 역시 변하게 됩니다.
이미지의 배치 옵션 외에도, 각 이미지들이 나타나는 순서 또한 드래그 앤 드롭으로 쉽게 변경할 수 있습니다. 아울러 특정한 사진을 제외하고 싶을 때는 이미지 우하단에 있는 조그만 X버튼을 누르면 이미지 슬롯에서 해당 이미지가 빠지게 됩니다. (실제 이미지 파일 자체가 삭제되지는 않습니다.)
마지막으로 "미리보기"를 통해 이미지 선택과 배치가 올바르게 되었음을 확인하고 나서, "확인" 버튼을 누르면 이미지가 글에 삽입됩니다.
참고로 이미지의 크기, 자막 내용 등 각종 설정값들의 경우, 첨부위자드 화면에 넣으면 너무 복잡하게 보일 수 있으므로, 글에 이미지를 삽입한 다음 해당 이미지를 클릭하면 오른쪽에 뜨는 "프로퍼티 창"을 통해서 설정할 수 있도록 사용성을 통일하였습니다.
글에 이미지가 삽입된 후, 해당 이미지를 글에서 지우면, 당연히 블로그에서 보이지 않습니다. 그러나 만일 블로그에 보여지지 않는것 뿐 아니라 이미지 파일 자체를 완전히 삭제하고 싶은 경우, 에디터 화면 하단의 "파일 추가/제거"버튼을 눌러서 특정 파일을 삭제할 수 있습니다. 파일의 추가 역시 가능하며, 추가된 파일은 "기존 파일 불러오기" 버튼을 누를 때 보여지게 됩니다.
블로그에 이미지를 첨부할 때 보통은 자신의 PC에 있는 이미지 파일을 올릴 때가 가장 많지만, 간편하게 인터넷에서 이미지를 검색해서 올리는 방법도 있답니다. (개인적으로 차이가 있겠지만, 써보시면 꽤 편하고 재미있습니다.) 이번 업데이트에서는 플리커와 구글 이미지 검색이 적용됨으로써, 기존의 "유튜브 비디오 검색 및 첨부" 처럼 이미지 역시 간단히 검색해서 붙여넣으실 수 있게 되었습니다. 얼마전 저희 회사를 저희 회사 옆의 빠리바게트를 방문해서 CF를 찍었던 김태희씨의 이미지를 검색해서 넣어 볼까요?
지금까지 이미지 첨부 위자드를 위주로 자세한 설명을 드렸습니다. 이미지 첨부 위자드의 변경과 맞추어, 오디오 및 일반 파일 첨부 위자드의 UI 역시 변경되었습니다.
이상입니다. 아직도 유저들께서 보시기에 여러가지로 부족한 면들이 있겠지만, 이번 에디터 첨부위자드 변경은 실력있는 외부의 웹 UI 전문 컨설턴트와 저희 회사가 나름 머리를 맞대고 작업한 결과랍니다. 텍스트큐브닷컴은 가장 쉽고 직관적인 블로그 UI를 위해서 계속 노력하겠습니다. 지켜봐 주시고, 계속 피드백 주시면 감사하겠습니다.
흠.. 비교샷만 보면 별로 크게 달라진 것 같지 않아 보이신다구요? 그럼 달라진 면을 하나하나 설명드려보도록 하겠습니다. 먼저, 좀더 "단계" 구분을 명확히 함으로써, 좀더 직관적으로 플로우를 인지할 수 있도록 했습니다. 아마 보통의 유저라면 이미지를 올리기 위해 이러한 과정을 거치시지 않을까 생각했습니다.
1단계. 글에 첨부할 이미지 재료들을 올립니다.
2단계. 그러한 이미지 재료들을 어떻게 배치할 것인지 결정하고 (단일 배치, 묶음 배치, 슬라이드쇼 등), 필요한 경우 이미지들이 나타나는 순서를 변경합니다.
3단계. 미리보기를 통해 "마음의 평화"를 얻고, 글에 삽입합니다.
물론 가장 흔한 경우는 글쓰기 중간에 사진 한두장을 가운데 정렬로 글에 삽입하는 것일 테고, 굳이 단계 구분에 신경쓰지 않더라도 이러한 과정이 쉽고 빨리 진행될 수 있도록 기본(디폴트) 옵션은 "한장씩 배치, 가운데 정렬" 등으로 지정되어야 할 것입니다.
아무튼 첫번째 단계는 글에 첨부할 이미지 재료를 올리는 단계입니다. 새 파일을 올리는 과정은 보통의 UI를 따르고 있습니다.
그런데 기존과는 달리 새 파일을 올리는 것 외에 이미 글에 첨부했던 이미지를 재사용하기 위해 불러올 수도 있게 하였습니다. 기존 태터툴즈의 "파일 관리자 기능"을 되살린 셈이죠. 파일 관리자 기능은 블로그 단위가 아닌 글 단위로 동작합니다. 즉 해당 글에 이미 첨부되었던 파일들만 불러오게 됩니다.
이렇게 해서 올려진 이미지 재료들은, 아래에서 보시듯 "이미지 슬롯"에 하나씩 차곡차곡 채워집니다. 이렇게 슬롯에 채워진 이미지들에 대해서, 이제 배치 설정을 변경할 수 있습니다. 이를테면 사진들을 한장씩 연속으로 배치할 것인지, 아니면 묶어서 플래시 슬라이드쇼를 만들 것인지 등을 선택할 수 있습니다. (두장, 세장씩 나란히 배치하기 옵션을 선택하면 좌측에서부터 2장, 3장이 선택되었음을 알려주는 테두리가 나타납니다.) 배치 옵션을 변경함에 따라서 아래 보이는 미리보기 창의 내용 역시 변하게 됩니다.
이미지의 배치 옵션 외에도, 각 이미지들이 나타나는 순서 또한 드래그 앤 드롭으로 쉽게 변경할 수 있습니다. 아울러 특정한 사진을 제외하고 싶을 때는 이미지 우하단에 있는 조그만 X버튼을 누르면 이미지 슬롯에서 해당 이미지가 빠지게 됩니다. (실제 이미지 파일 자체가 삭제되지는 않습니다.)
마지막으로 "미리보기"를 통해 이미지 선택과 배치가 올바르게 되었음을 확인하고 나서, "확인" 버튼을 누르면 이미지가 글에 삽입됩니다.
참고로 이미지의 크기, 자막 내용 등 각종 설정값들의 경우, 첨부위자드 화면에 넣으면 너무 복잡하게 보일 수 있으므로, 글에 이미지를 삽입한 다음 해당 이미지를 클릭하면 오른쪽에 뜨는 "프로퍼티 창"을 통해서 설정할 수 있도록 사용성을 통일하였습니다.
글에 이미지가 삽입된 후, 해당 이미지를 글에서 지우면, 당연히 블로그에서 보이지 않습니다. 그러나 만일 블로그에 보여지지 않는것 뿐 아니라 이미지 파일 자체를 완전히 삭제하고 싶은 경우, 에디터 화면 하단의 "파일 추가/제거"버튼을 눌러서 특정 파일을 삭제할 수 있습니다. 파일의 추가 역시 가능하며, 추가된 파일은 "기존 파일 불러오기" 버튼을 누를 때 보여지게 됩니다.
블로그에 이미지를 첨부할 때 보통은 자신의 PC에 있는 이미지 파일을 올릴 때가 가장 많지만, 간편하게 인터넷에서 이미지를 검색해서 올리는 방법도 있답니다. (개인적으로 차이가 있겠지만, 써보시면 꽤 편하고 재미있습니다.) 이번 업데이트에서는 플리커와 구글 이미지 검색이 적용됨으로써, 기존의 "유튜브 비디오 검색 및 첨부" 처럼 이미지 역시 간단히 검색해서 붙여넣으실 수 있게 되었습니다. 얼마전 저희 회사를 저희 회사 옆의 빠리바게트를 방문해서 CF를 찍었던 김태희씨의 이미지를 검색해서 넣어 볼까요?
지금까지 이미지 첨부 위자드를 위주로 자세한 설명을 드렸습니다. 이미지 첨부 위자드의 변경과 맞추어, 오디오 및 일반 파일 첨부 위자드의 UI 역시 변경되었습니다.
이상입니다. 아직도 유저들께서 보시기에 여러가지로 부족한 면들이 있겠지만, 이번 에디터 첨부위자드 변경은 실력있는 외부의 웹 UI 전문 컨설턴트와 저희 회사가 나름 머리를 맞대고 작업한 결과랍니다. 텍스트큐브닷컴은 가장 쉽고 직관적인 블로그 UI를 위해서 계속 노력하겠습니다. 지켜봐 주시고, 계속 피드백 주시면 감사하겠습니다.


























