언제나 공사중!

첫화면 꾸미기의 두번째 미션이 '왜 이런 구성을 하게 되었는가?'를 물어보는 미션이군요. 그렇지 않아도 이 부분은 처음부터 작성할 생각이었습니다. 아무 생각 없이 그냥 보여주는 것보다 '나는 이런 생각으로 이 부분을 활용했다'라고 언급해준다면, 개발하는 사람은 이를 참고하여 보다 편하게 구성하기 쉽도록 만들어 줄 것이고, 다른 분들은 이를 보고 따라서 만드는데 쉽게 참고할 수 있을 것이라 생각했기 때문입니다.

  첫화면을 계속 편집을 했는데, 제 블로그의 화면 구성은 처음 오시는 분들 위한 부분 반, 자주 오시는 분들 반으로 구성되어 있습니다. 이 부분을 설명하기 전에 일단 편집된 제 블로그 풀샷부터 보는게 설명이 빠를 것 같습니다.

  워낙 사이드바가 길어서 자르긴 했습니다만, 일단 전체적인 본문 구성은 조금 변화를 준2-3-2-3 구성입니다.

 글을 나란하게 4개까지 넣는 경우 지나치게 좁아져서 본문의 내용이 뭔지 알 수 없었습니다. 이러한 변경은 읽는 사람에게 불편함을 줄 수 있습니다. 또한 너무 많이 나열하면 메뉴만 보다가 질려서 나갈 수 있기 때문에 더더욱 많은 아이템의 나열은 피했고요. 여기에 제 블로그의 본문 폭이 좁은 편이라 더욱 불편합니다.

 따라서 한번에 본문을 어느 정도 쉽게 읽을 수 있는 수준인 2~3개로 제한했습니다. 본문 요약글을 충분히 읽을 수 있도록 기본 설정의 2배의 길이 요약을 보여주도록 설정을 변경하였습니다. 각 카테고리를 나눌 때에는 충분히 다른 글임을 인식시키기 위해 넓게 띄는 동시에 구분선도 추가 했고요. 더 많은

 통일감을 주기 위해 모든 이미지 폭은 4:3을 사용했습니다. 제가 올린 대부분의 사진이 4:3이기 때문이기도 하며, 이 비율인 경우 본문에 올릴 때 사진이 딱 맞는다는 느낌을 주기 때문입니다. 그리고 비율을 강제화하지 않으면 각기 다른 해상도+다른 비율의 사진이 나오는 경우, 그림이 공중부양을 하는 현상이 있어서 보기 안 좋더군요.

 이런 설정은 방문한 사람이 읽기 편하도록 변경한 것입니다. 다만, 고해상도에서도 글을 읽기 쉽도록 글짜 크기를 키워볼까 했습니다만 이 부분은 블로그 스킨이 먼저 수정되어야 할 것 같아서 보류 중입니다. ^^;

 각 카테고리 구성은 '최근 글->댓글이 많은 글->많은 분이 읽은 글->잘 썼다고 추천'을 받은 글 순서로 했는데, 최근 글을 가장 먼저 올린 이유는 제 블로그에 직접 주소를 치고 오시는 분들을 위한 배려입니다. 첫 페이지를 보게 되시는 분은 어찌됐든 최근 근황을 보고 싶어서 오시는 분들일 테니까요. 그 밑의 카테고리들은 이 만큼 많은 글이 있다는걸 보여주기 위해 제 블로그 자랑을 위해 올려둔 글입니다. -_-a

 특정 카테고리를 기준으로 분류하지 않는 이유는 제가 특정 분야에 대해서 자주 쓰는 블로거가 아니기 때문입니다. 어디까지나 생계형생활기록부 블로그를 운영하기 때문이죠.

헤드라인형의 1,2,4,5,8,9,10번째는 조건에 맞는 첫번째 글을 제외하고는 모두 사진으로만 표기되는데, 사진으로는 어떤 글을 썼는지 알 수 없었기 때문에 선택하지 않았습니다.

본문 요약이 조금이라도 있는 3번째를 선택해봤는데 이 역시 그다지 나아지지는 않더군요. 요약 본문의 길이를 수정할 수 있다면 모를까...

6,7번의 경우, 본문이 충분히 나와서 확실하게 글을 보여줄 수는 있으나 사진이 너무 크게 나와서 작은 사진이 올라가 있다면 조금 난감해지는 상황이 연출되더군요. 이 구성으로 연속으로 두는 것도 해봤는데, 이 경우는 각 카테고리에서 가장 높은 글만 보여주기 때문에 다양한 글을 보여주지 못하는 느낌을 받았고요. 6,7번을 반복해서 사용하면 페이지가 단조롭기 때문에 역시 좋은 디자인은 아니었습니다.

 헤드라인형의 경우 충분히 폭이 넓은 1단 구성인 경우, 한 눈에 보기 좋은 구성으로 보입니다. 바꿔 말하면, 저같이 날개가 있는 스타일이 쓰기는 조금 난감합니다. 특히 폭까지 좁다면 더더욱 무리고요.

녹색과 노란색은 한 화면에 있지만 다른 메뉴

 처음에 나온 글과 목록에 있는 글에 같은 글이 걸리는 상황이 발견되서 저같이 '최신/댓글/추천'과 같이 전체 카테고리에 연결되어 있는 경우는 그다지 효과적이지 않았습니다. 즉, 녹색에 있는 글이 노란색 영역에 한번 더 보여주기 때문에 효과적이지 않게 되는거죠.

 조합형을 쓰고자 한다면, 특정 카테고리끼리의 조합을 통해서 사용한다면 모를까... 쓰기 어렵겠더군요. 그래서 결국 목록형과 갤러리형에서 골라서 설정했습니다.

 목록형과 갤러리형은 그다지 크게 다른게 없는데요. 그냥 그림 크기의 차이/유무가 조금씩 다를뿐 거의 비슷한 구성입니다

따라서 저같이 한개의 카테고리에 2~4개씩 보여줘야 한다면, 조건을 달리하여 목록형과 갤러리형을 조합하여 보여주는 것이 가장 깔끔하게 보이는 결과를 얻게 됩니다. 그리고 무엇보다 목록형이 사용할 수 있는 아이템 수가 가장 많습니다. -_-a

  특정 주제나 카테고리를 주력으로 삼는 분이라면 저와는 다른 구성을 선택하시는게 좋을 듯 싶더군요. 특정 카테고리를 업데이트 하신다면 헤드라인형과 조합형을 응용하시면 충분히 만족할만한 성과가 있을 듯한 구성이더군요. 만약 조합형의 디자인으로 헤드라인형 요소를 갖춰서 나온다면 쓰기 좋을 것 같습니다.

 이것저것 테스트하면서 '그림이 없이 설정을 해볼까?'라는 생각도 꽤 많이 해봤는데, 사람이 인식하기 편하게 나누기가 너무 어려웠습니다. 배경 속성이나 글씨의 차이를 둬야지 사람이 인식하기 좋을 것 같은데, 이 부분 편집은 베타 기간에는 적어도 HTML 수정으로 해결을 봐야 할 것 같고, 이는 제 능력으로는 불가능합니다. orz

PS. 그러니까 이 포스팅에는 상당히 많은 개선요소가 필요합니다라는 내용을 담고 있는거에요. (응?)

흐흐흐... 이 이야기 나올것 같았습니다. 새로운 기능으로 생긴 것 중에 하나가 바로 "서식"기능이기 때문이지요. 일단 서식에 대해서 대.충. 알아봐야 겠습니다. 기본적으로 티스토리에는 3개의 서식이 존재합니다. 현재 제공되는 서식은 10Q/10A, 여행 후기, 티스토리 초대장입니다. 각각에 대해서 조금 더 알아보고 싶으신 분은 있겠지만, 불행하게도 이번에는 자세하게 소개하는 것이 아닌, 서식을 공유하는 것입니다. 따라서 대충~만 하겠습니다.

10Q/10A : 옆에 보이는 것이 바로 10Q/10A의 화면입니다. 전형적인 질답형식의 서식이며, 귀찮게 질문을 직접 작성하지 않아도 됩니다.

그래서 이런 질답서식을 이용하고 공유를 할 수 있다면, "I am.. & 테스트"와 같은 카테고리를 더더욱 자주, 그리고 많이 볼 수 있을 것 같습니다. 또한 표준화된 서식을 이용함으로써 최초의 질답을 시작한 이가 누구인지 드러나게 된다는 점이며 이는 보다 질높은 질답을 만드는데 도움이 될 것이라 생각됩니다.

다만 아쉬운 점은 글을 작성하는 이의 특유의 멋진 생각과 표현을 제한하는 것처럼 보일 수 있다는 점입니다.

여행 후기 : 옆에 보이는 Tokyo Story 1이라고 되어 있는 것이 바로 여행 후기입니다. 사진을 올리는 곳과 소제목을 작성하고 세부 여행 후기를 작성하는 형식으로 되어 있습니다. 사진에 따른 시간의 흐름을 보여준다고 해야하나요?

사용하는 방법에 따라서 장소 기준으로 하든지, 시간의 흐름을 기준으로 하는 방식으로 여행 서식은 이용하기 좋게 되어 있습니다. 아쉬운 점은 한 곳에서 사진을 여러 장 찍은 경우, 이 서식을 이용해서 작성하기에는 대단히 불편합니다.

글자 수와 사진의 수가 조금 제한적이라는 것이 마음에 안든다고 할까요? 실제 이 서식을 불러서 몇번 본 결과, 서식에 맞게 잘 쓸려면 꽤나 많이 고생하지 않을까 싶습니다.

티스토리 초대장 : 기본으로 제공되는 서식 중에서 사용률 BEST 1을 사용할 것이라 예측되는 서식입니다. 특별히 많이 고칠 것도 없고, 새 글을 열고 그냥 클릭하면 작성 내용 99% 완료.

'진작에 이런 서식 기능으로 제공되었으면 좋았을 것을...'

이란 생각을 가장 많이 하게 되는 서식입니다. 그만큼 효용성이 좋다는 것이지요.

대충 쓴다고 썼는데, 글이 옆으로 많이 흘렀군요. -_- 이 글의 목적이 미션인 만큼 제가 만든 서식을 공개하도록 하겠습니다. 제가 만든 서식은 "참고글 넣기 서식" 입니다. 저는 "카테고리 글 더보기" 플러그인을 사용하지 않습니다. "카테고리 글 더보기" 플러그인은 원하는 위치에 정확하게 넣을 수 없다는 단점도 있지만, 이 목록은 연관 글을 골라내는 기준이 동일한 카테고리로 제한이 되기 때문에, 저 같이 여러가지 이야기를 하는 사람에게는 카테고리 글만으로는 정확하게 연관된 자료를 제공할 수 없습니다.

 이에 따라 종종 수동으로 직접 "이전 글 넣기" 기능을 통해 글에 하드코딩(?)을 합니다. 이렇게 함으로써 제가 조금 귀찮지만, 보다 정확하게 연결되어 있는 글을 찾아 줄 수 있다는 장점이 있습니다. 이 서식은 다음과 같이 생겼습니다. 

 혹시 쓰실 분 있으실까봐 텍스트 문서로 된 소스를 넣어놨습니다.

참고글넣기서식_by_daegul.com.txt

이번건 그래도 간단해서 좋군요. 그림 3장이면 끝나니까 말이죠. ^^ 일단 제가 쓰는 관리화면은 다음과 같습니다. 꽤 길긴 합니다만, 대충 보시면 되겠습니다.

데굴대굴이 쓰는 센터 화면. 크게 보실려면 클릭하세요.

조금 언벨런스하게 보이지만, 잘 보면 나름 철학이 있는 인터페이스입니다. 제 센터 화면을 잘 보면 다음과 같이 3가지로 나눠집니다.

노란색은 제 블로그의 글쓰기 관련 메뉴, 초록색은 통계 데이터, 하늘색은 다른 블로그 이야기입니다. 제 블로그의 글쓰기 관련 메뉴에 빈 공간이 많이 남아 있는 이유는 현재의 세팅으로는 미리보기가 5개로 제한되어 있지만, 나중에 추가 설정을 통해 보이는 글의 수를 증가시킬 수 있을 것으로 예상되기 때문입니다. 이에 대한 근거는 "주제별 새글"에는 추가 설정 메뉴가 존재하기 때문입니다.

따라서, 갯수 조절이 생기면, 최근 방명록을 제외한 최근 글, 최근 댓글, 최근 트랙백, 최근 댓글알리미의 미리보기 갯수를 10개로 늘리면, 화면의 벨런스도 맞출 수 있을 것으로 예상됩니다.

근데, 만약 글의 갯수를 지정할 수 있는 기능 추가가 되지 않는다면......

티스토리가 밉습니다. 하루만에 또 글을 작성하라고 하다니요. 이런 미울 때가.... 자.. 오늘의 미션 주제는 에디터 입니다. 글 쓰기 공간!이라고도 하지요. 글을 쓰는데 에디터 환경이 바뀌었다는건 정말 피곤한 일입니다. 하지만, 이런 변화가 바뀌어야 할 만큼의 기준으로 바뀌었다면, 당연히 좋은 것입니다. 이번 글에서는 그런 면에 대해서 조금 이야기를 해볼까 합니다. 주로 바뀐 점보다는 이렇게 불편하다... 위주로 써볼려고 합니다. (저는 원래 사악하니까 말이죠. -_-)

 글쓰기 에디터 자체가 변신에 가깝게 변했습니다. 일단 에디터의 전체적인 모습부터 봅시다.

노란색은 툴바, 하늘색은 빈공간, 보라색은 글의 설정, 녹색은 작업 창의 영역을 나타냅니다.

일단 노란색으로 표시한 툴바의 바로 위쪽부터 봅시다. 서식이라는 것이 새로 생겼습니다. 이 서식이라는 것은 녹색 작업 창쪽에 쪽에 있는 서식을 만들 때 사용합니다. 개인적으로 특정 서식을 만들고 쓸 정도로 비슷한 글을 쓰지 않기 때문에 이걸 쓸 일이 자주 있을까 싶습니다만, 서식 공유가 가능하다면 제가 좋아하는 문답을 하는데 도움을 줄 수 있을꺼 같군요. :)

밑에 있는 메뉴는 꽤나 자주 봐왔던 메뉴죠? 사진, 슬라이드, 동영상 같은 컨텐츠를 올리는데 사용하는 메뉴입니다. 예전에 파일을 올릴 때 조금 화면이 이상하게 보였던 불편함이 사라졌군요. 

동영상까지는 그냥 알겠고... 오디오라는 것이 생겼는데, 불행하게도 이 메뉴는 신설메뉴인 만큼 버그가 심합니다. 파일이 안보인다던가 이상하게 인식된다던가 하는 식의 버.그.가 있습니다. 이 부분은 제가 잘 쓰지 않아서 버그가 있다는 것만 테스트하고 말았지요.

그리고, 지도라는 것이 신설되었습니다. 이 메뉴는 먹는언니님과 같이 맛집 기행을 보다 효과적으로 작성하는데 왕왕 기쁨이 될만한 메뉴입니다. 시험삼아서 다음을 검색해서 넣어 봤습니다.

뭔가 "워워워~~~"하고 계시겠지만, IE7에서는 잘 동작하는게 FF3.0환경에서 저장이 되지 않는군요. 그래서 안되는 이 화면을 그대로 캡처한겁니다. 뭐, 고쳐주시겠죠?

이제는 조금 익숙한 메뉴를 봅시다. 실제 글 쓰기를 할 때 쓰게 되는 툴바 메뉴들 입니다. 너무나 길어서 두 줄로 쪼갰습니다. 첫번째 보실 툴바 메뉴는 딱히 드릴 말이 없습니다. 예전에 있던 에디터의 기능 그대로 있습니다. 달라진거라면 아이콘이 예뻐졌다는 것과 함께 글씨의 크기가 구체적으로 보인다는 것 정도?

이제 진짜로 달라진 툴바를 보여드리겠습니다.

노란색은 이번 에디터에서 추가된 메뉴들, 보라색은 예전 에디터에서 플러그 인으로 지원되던 기능입니다.

노란색 메뉴를 순서대로 말씀 드리면, 줄간격, 구분선, 표, 이모티콘, 특수기호, 사전, 실행취소, 다시실행입니다. 이번 개편하면서 단축아이콘에 대한 단축키 안내가 추가되었는데, 이는 해당 버튼에 마우스를 올려두면 됩니다.

보라색 메뉴를 순서대로 말씀 드리면, 각주, 글상자 입니다. 이 두 개의 기능은 예전 버전의 플러그 인으로 제공 되었죠.

이제 보라색으로 해둔 하단 메뉴.

가장 먼저 들어오고 자주 쓰게 될 메뉴는 파일첨부 메뉴입니다. 과거와는 달리 뭔라 정돈된 느낌이 듭니다. 그러나, 하나 안좋은 점이 있지요. 바로 그림의 사이즈를 알 수 없다는 것! 혹시나 무슨 뜻인지 모를 분들을 위하여... 직접 보실까요?

사이즈를 모른다는건 상당히 불편한 일입니다. 편한 점은 위로 화살표 버튼을 누르면 바로 그림이 글에 삽입된다는 것. 물론 중앙정렬로 삽입되는겁니다.

그리고 그림을 한꺼번에 두개 넣는 버튼이 위아래로 움직이는 스크롤바 바로 위에 생겼습니다. 바로 옆에는 한꺼번에 세개 넣은 버튼이 있지요. 하지만, 이 버튼을 사용하면 그림이 언제나 원본 상태로만 올라갑니다. 설정하는 메뉴가 별도로 나오지 않습니다. 쓸려면 그림 편집해서 쓰라는 이야기인지.... 그리고 이 글을 쓰면서 정말 많이 보고 됐던 파일 삭제 후 같은 이름의 파일이 올라가지 않는 증상은 처리되었습니다. 하지만, 올라간 그림이 본문에서는 삭제가 되지 않고 경고창만 띄웁니다.

파일첨부에 대한 이야기는 이 정도로 넘어가고 태그에 대한 이야기를 할까 합니다.

딱 보면 조금 허전합니다. 그리고 예전에는 위치로그 플러그 인으로 제공됐던 지역을 나타내는 태그가 내장되었습니다. 추천태그는 자신이 여태 작성한 글에서 자주 사용했던 태그를 뽑아내주는 기능. 태그뽑기는 현재 작성한 글에서 자주 쓰는 단어를 뽑아주는 것 같더군요.

공개설정으로 가보도록 하죠. 예전보다 더 심플해졌지요? 하지만, 기능은 같습니다. 이건 딱 보시면 어떤 형식으로 써야 할지 감이 오실겁니다. (감이 안오시면 감나무에 올라가서 '나는 슈퍼맨이다'를 백만스물한번 소리지르고 오세요)

트랙백은 제가 가장 당황해하는 부분인데요. 많이 바뀌었습니다. 글을 공개하면서 함께 트랙백까지 걸 수 있도록 변경되었는데, 트랙백을 여러 곳에 걸어야 한다면 어떻게 해야하는지에 대한 안내도 없고, 여기서 걸면 분명 트랙백은 걸리거든요. 그러나, 글을 공개로 바꾼 다음에 와서 보면 트랙백 걸린 목록이 뜨지가 않아요. 이건 수정되기 전까지는 쓰면 안될 듯 싶습니다.

따라서 트랙백은 고쳐질 때까지 패스. 이젠 마지막 메뉴인 CCL을 봅시다.

예전에 CCL을 플러그인으로 제작해서 모든 글에 대해서 적용되었던 것이, 이렇게 별도로 빠져나오면서, 사이트 전체가 아닌 글 하나하나마다 CCL을 활성화 할 수 있도록 변경되었습니다. (하지만 이건 테스트 안해봤습니다. 왜? 제 글은 기본적으로 모두 다 퍼감 금지니까요. -_-)

 이 글 쓰면서 꽤 편하게 작성했는데, 제가 쓰는 단축키는 모두 다 지원하기 때문이었습니다. 일단 가장 중요한...

• Ctrl+S : 말이 필요 없는 저장 입니다. 지원 됩니다.

그리고 문서 작성할 때, 자주 쓰이는 키도 모두 지원하고요.

• Ctrl+K : 하이퍼링크 만들기
• Ctrl+B : 글자 굵게
• Ctrl+U : 밑줄긋기
• Ctrl+I : 글자 기울이기

그리고 무엇보다 가장 많이 쓰이는..

• Ctrl+Z......
• Ctrl+Y....

확실하게 예전보다 믿을만하고 길게 지원합니다.

그나저나, 제가 이 글을 작성하면서 가장 불편했던 사항이 한번 올라간 그림은 편집할 수 있는 방법이 없다는 겁니다. -_-a