언제나 공사중!

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

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

  워낙 사이드바가 길어서 자르긴 했습니다만, 일단 전체적인 본문 구성은 조금 변화를 준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. 그러니까 이 포스팅에는 상당히 많은 개선요소가 필요합니다라는 내용을 담고 있는거에요. (응?)

 일단 당첨이 되었습니다. 그리고 집에서 뭔가 공지가 떴겠지라는 생각으로 보는데, 미션이 하나 올라왔군요. 미션은 ”티스토리 첫 화면을 마음껏 리뷰해주세요!”이라는 비교적 자유로운 주제입니다. 하지만 뭐라고 해도 자유로운 주제가 가장 힘들다는... 보통 이런 미션이 떨어지면 가장 먼저 쓸 수 있는 건 간단한 느낌이나 사용법이 되겠죠. 사용법을 구지 쓰지 않은 이유는 기본적으로 제공되는 도움말이 있기 때문입니다. (물론 도움말인지 모르고 눌렀지만...)

  첫화면 꾸미기의 첫느낌은 태터데스크와 거의 흡사합니다. 태터데스크 ver 1.98 라고 생각하시면 편하게 이해 하실 수 있습니다. 이 말은 태터데스크보다 쉽고 꾸미기 잘 되어 있다는 뜻입니다. 아무리 이렇게 말로 해도 이런건 그림 한두방이면 설명이 끝나는 법.

위 화면은 아직 꾸미기를 마치지 않은 상태의 화면인데, 딱 보면 대충 감이 오셨으리라 생각됩니다. 포스팅한 그림과 글을 적당히 배치할 수 있고 이를 비교적 쉽게 배열할 수 있습니다.

물론 최대한 어렵지 않고 편하게! 그것도 HTML 편집 같은 것 없이! 말이죠.

하지만, 이런 꾸미기에는 치명적인 약점이 있으니.... 그것은 바로 그림이 없는 글인 경우 흉물로 변할 수 있습니다. 예를 들면, 다음과 같이 보일 수 있습니다.

 일단 메뉴를 보니 글을 보여줄 조건이 다양해서 좋았습니다. 하지만 사진이 없는 경우 실망의 구렁텅이에 빠져갈 무렵 하단에 이미지가 없는 경우 포함시키지 않는 메뉴 발견. 그림이 없는 글은 뺄 수 있는 옵션이 별도로 있었습니다. 이 메뉴를 발견하자마자 느낀 점은 '세심하게 만들었구나'였습니다.

생각해보니 그림이 없는 포스팅만 제외할 수 있다면 적어도 흉물이 되지는 않을 것 같았습니다.

 그림이 없는 포스팅이 생각보다 많이 올라오는 블로그인데, 이런 그림 첨부까지 생각해서 포스팅을 해야한다면 제가 너무 피곤할 것 같습니다. 이런 흉물로 남는 글은 그다지 보여주고 싶지 않았으니까요. 아무리 언제나 공사중!이라고 하지만, 공사중인 것을 매일 티 내서는 방문자 분들께 조금 미안하기도 하고.... 설령 적용 했다고 해도 이 부분을 고칠 수 있는 근본적인 해결책은 제가 독립하고 소스를 뜯어고치는 것이니, 이는 답이 되지 않지요. (물론 저는 소스를 뜯어 고칠 능력이 되지 않습니다. ^^)

 실제로 이 그림이 없는 경우 흉물로 변하는 문제 때문에 태터데스크를 적용했다가 바로 풀었습니다. 그림이 없는 경우 제외하는 메뉴를 발견하자마자 감동을 조금 해줬습니다. 그래서 잽싸게 조건 변경 후 보기를 했습니다.

 

하지만, 이것도 잠시...

 

올려진 그림중 첫번째 사진만 불러오는데, 첫번째 사진의 기본 해상도가 낮은 경우에 도트가 보이는 현상이... ㄷㄷㄷ.

 태터데스크를 사용하지 않았던 이유를 어느 정도 극복하긴 했습니다만, 그림의 해상도가 낮은 경우에 이상하게 보이는 문제는 조금 고민해야 할 듯 싶군요. 즉, 이미지를 넣는다면 첫번째 이미지를 불러오므로, 첫번째 이미지는 불필요하게 고해상도;;를 넣어야하는 불편함이 들어가게 됩니다. 

 

그림을 필터링 할 때 그림 크기에 대한 조건도 넣어주시면 안될까요?

그리고 또 하나의 버그가 있습니다. 신규 글이 나오게끔 한 다음에 아무런 카테고리도 선택하지 않으면 주로 공지가 지정됩니다.(조금 더 몇번 노동을 하면 키워드로 등록한 글이 보이기도 함) 하지만 이를 저장하면 오류가 발생하죠. 이를 이용해서 펌질 금지 공지를 첫페이지에 보이게 할까 했는데... 잘 안되더군요. ^^

이 정도면 전체적으로 충분히 좋게 만들어졌다고 느껴집니다. 그리고 마무리 샷으로 적용시킨 블로그 풀샷. (편집됨)

PS. 참고로 밑에 스크롤바가 생기지 않을려면 1024 정도의 해상도를 가진 화면에서 보셔야 합니다. (저는 창도 작게 사용하는지라 이런거에 민감합니다)