반응형
오늘 30일부로 티스토리 '첫화면 꾸미기'의 두번째 미션을 끝으로 클로즈베타테스트가 끝이나고 4월 중으로 정식으로 서비스예정입니다. 이번 테스터로 참여하면서 두번째 미션글 2부를 끝으로 베타테스트를 마칠까 합니다. 두번째 미션 1부(첫화면 꾸미기, 잡블로그의 화려한 변신 - 1부 -)에서는 직접 꾸며본 '잡블로그' 컨셉의 첫화면을 꾸며보고 각 아이템의 구성과 그 이유, 그리고 따라하거나 참고가 될 수 있도록 단계별로 설명을 첨부하였습니다.
이번 두번째 미션 2부에서는 이렇게 첫화면을 꾸미면서 참고가 될만한 TIP 몇가지와 개선되면 좋아보이는 부분(Bug포함)을 정리해 보면서 마무리 지을까 합니다.
현재 테스트를 통해서 발견되는 수정사항이나 버그들이 계속 업데이트되고 있으며, 현재까지의 버전으로 정식오픈이 된다고 해도 손색은 없어 보입니다. 하지만, 조금만더 사용자들이 바라는 점들이 반영이 된다면 아마도 완벽한 서비스가 되리라 생각됩니다.
지금의 첫화면의 UI나 방식들은 여러 테스터분들의 글들을 통해서나 제글을 통해서도 어느정도 느껴보실수 있습니다. 그렇다면 추후 더욱 보강되는 기능은 없느냐? 아닙니다. 있습니다. 지난 27일 티타임 간담회에서 첫화면의 개발을 담당하신 분께서 언지를 주셨는데요.
추후 [Grid CSS] 와 치환자의 공개로 더욱 세부적으로나 자유롭게 고급사용자를 위한 접근이 가능할 것이라는 점과 생소하고 약간의 지식이 필요하기에 메뉴얼이 제작중이란 이야기가 있었습니다. 현재 티스토리의 본문폭이 매우다양하여 일률적으로 버그없이 적용하기 위해서 디자인과 개발팀이 협의하여 Grid방식으로 화면을 분할하고 인식한다고 하는데 정확한 것은 추후에 오픈이 되면 알수 있을것이구요.
고급사용자분들은 실망하기엔 이르고 두번째 미션 1부에서 HTML편집을 통한 CSS 삽입겹쳐쓰는 방법으로 일단은 치환자공개가 있을 때가지 사용이 가능하리라 여겨집니다. 문제가 되는 중요부분의 버그는 일단 잡혔고 세세적인 부분에서 계속 업데이트가 되고 있고 현재로도 완성도가 높으며 이전의 테터데스크와 비교하지 못할 정도로 편하고 다양하게 첫화면을 구성할 수 있어 매우 만족스럽습니다.
1. 이미지의 보여지는 방식의 개선
이부분은 미션1에서 이미 말씀을 드린적이 있습니다. 계속해서 사용해보면서 시선이 가장 많이 가는 이미지의 보여지는 현재의 비율방식과 보여지는 부분을 선택할 수 없는 점에서 느껴지는 점은 각 이미지별로 그 이미지가 확대 되면서 흐려지는 문제와 정확하게 그 이미지를 표현하여 보여지지 않는 부분입니다.
우측의 모습이 그대로 보여지는 이미지를 캡쳐한 것인데요. 모두 잘보이는 비율을 선택하자니 여백이나 공백의 문제가 발생하고, 꽉찬 것을 선택하면 이렇게 이미지가 흐려지는 문제가 있습니다.
간담회에서 나온 이야기중에 첫화면을 가장 대표할 수 있는 것이 바로 이미지라고 들은것 같은데 보여지는 부분에서 좀더 선명하게 포스팅중의 이미지를 선명하게 그대로 획일적으로 보여줄 수 있는 방법의 개선이 있었으면 합니다. 해드라인 아이템의 이미지가 상황에 따라 어떤경우 이렇게 보여진다면 이미지를 보여줄 의미가 없어 보입니다.
2. 각 아이템의 정리 및 중복성 제거와 다양화, 그리고 이름표
한가지 예로 위의 목록형 아이템중에서 비슷한 형태로 보여주고 단락만 1단, 2단 3단인 목록형 아이템은 3단형은 첫페이지 첫번째에, 나머지 2단과 3단은 두번째 페이지 끝에서 찾을 수 있습니다. 사용자가 이것을 비슷한 것으로 변경하고자 할때 정리가 안된 느낌을 받을 수 있고 비슷한 것을 확인하려면 정신없이 왔다갔다 하게 되므로, 비슷한 아이템끼리 묶어서 보여주면 좋겠다라는 생각을 해봅니다.
그리고 아이템의 중복성을 제거하라는 말은 이전에 사용하면서 메모해 놓고서 지금 확인해보니 비슷한 것이 사라져 있는 상태입니다. 목록형의 글과 제목만 나타나는 경우 충분히 디자인탭에서 수정이 가능했기에 이러한 중복성을 제거하라고 메모해 두었는데 지금은 사라졌으니 미리 수정된 것에 즐거운 미소가 지어집니다.
그리고 각 아이템에서 조금더 다양한 모습들이 지원되었으면 합니다. 즉, 조합형에서는 3단분리가 지원된다든지 1/2로 나뉜 아이템이 지원되는 것을 검토부탁드립니다. 또한 수직적 분할뿐만아니라 수평적 분할도 되었으면 합니다. 상단에는 사용자 이미지를 넣고 하단에는 목록을 넣을수 있도록이요. 이러한 조합형이 있다면 더욱 다양한 연출이 가능해 지리라 생각됩니다.
그리고, 각아이템별로 이름이 주어졌으면 합니다. 즉, '글목록형1, 글목록형2, 이미지강조형1, 이미지강조형2, .....' 이런식으로요. 현재는 아이템을 사용하고 내가 무엇을 사용했는지 보려면 보여지는 썸네일로 추측하거나 아니면 썸네일에 마우스커서를 올려놓아 생기는 툴팁으로 숫자로된 이름을 확인해야하는 번거로움이 있습니다.
3. 스크립트 실행오류 메세지 제거
디자인편집의 HTML에 위젯등의 스크립트코드를 넣고 적용을 클릭하면 왼편의 이미지와 같이 [요청하신 작업을 수행하는데 실패하였습니다] 라는 메세지가 화면의 우측상단에 나오는데요.
그리고 화면에는 아무런 변화가 없습니다. 하지만, 적용하고 블로그 첫화면을 확인하면 정상적으로 적용한 것을 확인할 수 있습니다. 이 메세지도 적절히 나오거나 제거를 해주는 것이 사용자 편의에서 좋을것 같습니다.
또한 위젯을 첫화면에 HTML로 삽입한 후, 제대로 적용이 되는 상태에서 첫화면꾸미기 편집모드로 들어가면 미리보기에 보기좋게 잘 나오다가 다시 HTML코드를 수정하고 적용을 하면 미리보기에서 확인이 안되고 처음 보이던 것도 모두 사라지고 공백으로 나오게 됩니다. 하지만, 적용은 잘 됩니다.
이부분도 사용자 편의를 위해서 검토가 필요해 보입니다.
4. 헤드라인형 이미지썸네일 테두리 색변경
헤드라인형 아이템의 경우 현재의 아이템에서는 흰바탕의 아이템의 썸네일 이미지는 테두리가 검은색으로, 검은바탕의 아이템의 썸네일 테두리는 흰색으로 일률적으로 적용하게 되어 있습니다.
CSS를 수정하지 않고서 그대로 리모콘만으로 디자인을 적용할시 타이틀의 색깔이나 전체 디자인을 고려할시 큰 제약이 아닐 수 없습니다.
전 CSS를 덮어쓰는 방식으로 테두리를 해드라인의 타이틀인 녹색에 맞게 같은 계열로 썸네일의 색을 지정해 주었습니다. 통일감을 주면서 깔끔하게 강조가 되는데요.
리모콘의 클릭만으로 조작을 하여 첫화면을 꾸미는 사용자를 위해서 이 헤드라인의 경우 테두리가 두껍고 흑과 백색만 지원되므로, 그 색깔지정은 아무리 생각해봐도 필수로 보여집니다.
5. 뷰베스트 인기글을 차라리
현재 인기글방식에서는 'VIEW' 추천이 많은글 순으로 글이 정렬되어 보여지는 것을 지원하는데요. 여기에 제한조건이 바로 [최근에 작성된 100개의 공개된 게시글 기준] 입니다.
또한, 다음 VIEW에서는 뷰로 송고된 글들중에서 인기글과 최근글의 위젯을 공개하고 있습니다.
여기서의 인기글은 그동안 발행한 모든 글중에서 추천과 조회등을 따져서 순위가 메겨지고 갱신되는 것으로 생각되어집니다.
해서, 그 중복성을 피하고 방문자로 하여금 전체글중 추천이나 인기가 많은글인지의 착각을 피하고자 첫화면에서의 View 추천 많은 글을 최근의 100개의 글로 한정지어 보여줄 것이 아니라 뷰위젯과 같은 순위를 보여주거나 전체중 추천수 상위를 보여주거나 좀더 나아가 기간을 정하거나 했으면 좋겠다는 생각을 해봅니다. 이는 댓글이나 조회수, 트랙백이 많은 글에도 마찬가지로 접근해 볼 수 있습니다.
6. 다음 '요즘' 위젯의 색깔의 다양화
이부분은 여담인데요. 최근 새롭게 출시한 다음의 '요즘'위젯의 색좀 어떻게 조정이 되었으면 합니다.
현재 출시된 요즘의 위젯 두종류는 하나는 검은바탕 하나는 밝은계열바탕의 두가지입니다. 첫화면에 이 위젯을 추가했습니다. 상단의 핑크바 나름 강조되고 좋아보이기는 하는데, 각 여러블로그의 디자인적인 대표적인 색상과 조화로운 배치를 위해서 이 타이틀 색상을 입력하게 하거나 최소한 '빨주노초파남보'와 흐린 파스텔톤으로 몇가지 선택해서 할수 있게 하거나 했으면 좋겠다는 생각을 문득 했습니다.
이상으로 미션1에서 언급했던 부분들 이외에 조금더 생각난 제안이나 문제점들을 정리해보았습니다.
팁이라고 해서 아무도 모르는 노하우나 특별한 것은 아니고, 제가 직접 여러번 이리저리 '첫화면 꾸미기'를 테스터로 진행하면서 느꼈던 알고 있으면 조금더 도움이 될만한 것들로 조금더 디자인적으로 완성미를 보이거나 알아두면 편리한 것들을 위주로 정리를 해봅니다.
1. 타이틀바의 색상을 입힐 때는 그라데이션 효과를
위와 같이 타이틀바를 한가지 색상이나 상하좌우 테두리를 전부 다른색으로 입히는것보다는 한부분을 배경색과 비슷하거나 옅은 색으로 그라데이션을 주는 것이 디자인적으로 조금더 세련된 모습으로 다가옵니다. 전 강조하기 위해서 CSS를 통해서 하단의 라인의 두께를 두껍게 해주었는데요.(미션2 1부글 참고) 통상은 1픽셀 정도로 본바탕보다 조금더 옅은 색을 입혀주면 좋습니다.
2. 단락을 선으로 나눌시 넣고 빼고 조화롭게
첫화면 꾸미기는 각 아이템의 중간에 선을 지정해 줄수 있습니다. 이 때, 구분선은 가능한한 흐리고 얇은 것으로 해주는것이 조금더 세련된 느낌을 주며 각 아이템에서 보여지는 내용으로의 집중효과를 발휘하게 되는데요.
이 구분선을 각 아이템 중간에 무조건 넣기보다는 전체적으로 디자인적으로 생각을 해주면서 넣어주면 좋습니다.
우측의 이미지는 제 첫화면의 일부인데요. [사진으로 미리 보는 조회수 인기글] 의 하단 라인이 하늘색선으로 이미 가로줄이 있기에 위의 목록형 아이템과 구분선을 넣지 않고 없앴습니다. 중복되지 않아 깔끔하게 보이기 위해서 인데요. 반대로 더욱 강조하기 위해서 구분선을 진하게 넣어줄 수 있습니다. 아이템의 배치와 타이틀 및 기타 요소들을 잘 생각해서 조화롭게 넣고 빼고 하시면 됩니다. 이부분을 신경 잘 쓰셔도 전체적으로 깔끔한 구분이 됩니다.
3. 글요약 내용은 한단계 흐린색으로
위의 목록형에서 글요약부분의 글내용은 제목의 검정색보다 조금 흐린 회색톤으로 장식했습니다. 상대적으로 제목이 우선 두드러져야하고 강조되어야 하기 때문에, 본문의 요약내용을 한단계 흐린톤으로 꾸며줍니다. 이렇게 해주면 전체화면에서 입체감이 살아나며 제목도 돋보이고 시선의 흐름에 따라서 내용도 자연스레 부각이 됩니다. 디자인적으로도 이렇게 꾸며주는 것이 보기가 더 좋습니다.
4. 블로그의 본문폭을 모를경우
첫화면 꾸미긴느 블로그의 컨텐츠가 보여지는 본문의 폭을 기준으로 작성되고 보여집니다. 이 때 자신의 블로그의 본문폭을 모를 경우 사용자이미지를 하나로 꽉차게 만들거나 첫화면의 폭을 참고해야 할 경우에 이 폭을 알아야 하는데요.
간단하게 관리자센터 > 스킨 > HTML/CSS편집 탭에서의 소스코드에서 찾을 수 있습니다.
편집화면에서 [CTRL + F] 눌러 검색화면에서 'content' 혹은 'post-width'를 검색하면 위의 이미지와 같이 픽셀크기의 본문폭을 알 수 있습니다. 제 블로그의 본문폭인 포스트너비는 630px입니다.
5. 스킨이나 첫화면에서 반복사용되는 이미지의 저장방법
스킨이나 첫화면에서 사용자 이미지를 활용할 경우에 제작한 이미지를 저장하고 링크걸어 사용할 장소가 필요한데요. 보통의 분들은 포스팅을 하나 정해놓고서 추가해서 링크주소를 이용하는 분들이 간혹 자주 보이더군요. 하지만 우리 티스토리는 스킨수정이 자유로우며 이 스킨에 필요한 파일을 올릴수 있는 공간을 개방하고 있습니다.
즉, 관리자센터 > 스킨 > HTML/CSS 편집 화면에서 [파일업로드]탭을 클릭하면,
위의 이미지와 같이 이미 스킨 images폴더에 업로드 되어진 이미지들을 볼 수 있는데요. 여기서 우측의 [파일업로드]를 클릭하여 나타나는 화면에서 올리고자 하는 이미지를 찾아 선택해주면 위의 이미지에 보이는 목록에 이미지의 파일명이 추가가 됩니다.
이렇게 추가된 이미지는 본인의 스킨에서 사용한 이미지의 경로를 블로그화면에서 마우스오른쪽 클릭해서 나타나는 경로에 파일이름만 사용하고자 하는 이름으로 바꾸어주고 그대로 링크를 걸어 사용해 주면 간단합니ㅏㄷ.
6. 첫화면 컨텐츠별 속성 CSS로 수정하기
이부분은 미션2의 1부 글내용중에 2번에서 설명을 드렸습니다. 미션2의 1부글을 참고하세요.
7. 테이블코드 사용하기
HTML를 전혀 모르시는 분들을 위해서 테이블코드를 설명드립니다. 테이블을 강조하는 이유는 첫화면을 구성함은 물론이고 블로그의 하단이나 상단에 위젯이나 기타 이미지 등을 정렬하고 컨트롤 하는데 아주 유용하기 때문입니다.
첫화면에서는 미션2의 1부글에서 확인했다시피 '요즘'과 '믹시'의 위젯을 나란히 공백을 두고 배치를 시키는데 Table을 사용해 주었는데요. 제 블로그 사이드바의 각 사이트의 이미지를 같은 크기로 정렬한 것도 테이블을 이용해서 배치한 것이고, 포스팅의 하단부의 이미지들이나 위젯들도 보기좋게 테이블을 이용해서 폭과 너비 간격을 조정해서 보기좋게 배치한 것입니다. 모르시면 알아두면 좋습니다.
위와 같은 3x3 테이블을 만들기 위해서 아래와 같은 같은 소스를 사용합니다.
<>으로 시작한 코드는 </>으로 대칭해서 끝내줍니다.
<Table>은 테이블영역을, <tr>행을, <td>는 열을 나타냅니다. 위에서는 3x3, 즉 가로행 3칸, 세로열 3칸이라 각각 3개의 코드로 마무리 되는것이구요.
이를 하나씩 더하고 뺄때마다 바둑판모양의 칸들이 늘어났다 줄어든다고 보시면 됩니다. 길이의 속성은 width, 높이는 height, 정렬방식은 중앙이 center, 좌측이 left, 우측이 right 입니다. 이렇게 속성값으로 각 셀(cell)들의 높이와 길이를 조정해줄 수있습니다. border는 테두리 선인데 0이므로 없는것을, cellspacing과 cellpadding은 각 칸들의 상하좌우여백을 타나타는데 각각 0으로 여백을 주지 않은것입니다.
이렇게 두칸이던 세칸이던 테이블을 만들면 실제 익스플로어에서는 테이블이 보이지 않습니다.
그리고 본인이 넣고 싶은 이미지나 위젯의 소스는 각 칸들을 의미하는 위치에 넣어주기만 하면 되는데요. 위의 코드에서 [ ]는 HTML에서 공백 한칸을 의미합니다. 원하는 위치에 이 코드를 지우고 소스코드를 넣어주면 됩니다. 그 이외에 여러가지 속성들이 있으나, 이미지나 위젯을 정렬하는데는 위의 정도면 충분해 보입니다.
이상으로 알아두면 유익한 것들을 정리하면서 두번째 미션의 2부글을 마칩니다. 그동안 티스토리 '첫화면 꾸미기'를 기획하고 개발하고 베타테스트를 통해서 업데이트를 하느라 고생한 운영진에게 감사의 말을 전합니다. 분명히 말씀드리건데, 이번 '첫화면 꾸미기'는 다양한 확장성과 편리성 등의 면에서 기존의 테터데스크에 비해서 월등히 우수하다고 평가할 수 있습니다.
4월중으로 정식으로 서비스 된다고 하니 티스토리 블로거 여러분들도 두근두근 기다리셨다가 본인의 블로그 컨셉에 맞게 첫화면을 꾸며보시기 바랍니다. 감사합니다.
이번 두번째 미션 2부에서는 이렇게 첫화면을 꾸미면서 참고가 될만한 TIP 몇가지와 개선되면 좋아보이는 부분(Bug포함)을 정리해 보면서 마무리 지을까 합니다.
| 첫화면 꾸미기 앞으로 더 개선되는 부분들 |
현재 테스트를 통해서 발견되는 수정사항이나 버그들이 계속 업데이트되고 있으며, 현재까지의 버전으로 정식오픈이 된다고 해도 손색은 없어 보입니다. 하지만, 조금만더 사용자들이 바라는 점들이 반영이 된다면 아마도 완벽한 서비스가 되리라 생각됩니다.
지금의 첫화면의 UI나 방식들은 여러 테스터분들의 글들을 통해서나 제글을 통해서도 어느정도 느껴보실수 있습니다. 그렇다면 추후 더욱 보강되는 기능은 없느냐? 아닙니다. 있습니다. 지난 27일 티타임 간담회에서 첫화면의 개발을 담당하신 분께서 언지를 주셨는데요.
추후 [Grid CSS] 와 치환자의 공개로 더욱 세부적으로나 자유롭게 고급사용자를 위한 접근이 가능할 것이라는 점과 생소하고 약간의 지식이 필요하기에 메뉴얼이 제작중이란 이야기가 있었습니다. 현재 티스토리의 본문폭이 매우다양하여 일률적으로 버그없이 적용하기 위해서 디자인과 개발팀이 협의하여 Grid방식으로 화면을 분할하고 인식한다고 하는데 정확한 것은 추후에 오픈이 되면 알수 있을것이구요.
고급사용자분들은 실망하기엔 이르고 두번째 미션 1부에서 HTML편집을 통한 CSS 삽입겹쳐쓰는 방법으로 일단은 치환자공개가 있을 때가지 사용이 가능하리라 여겨집니다. 문제가 되는 중요부분의 버그는 일단 잡혔고 세세적인 부분에서 계속 업데이트가 되고 있고 현재로도 완성도가 높으며 이전의 테터데스크와 비교하지 못할 정도로 편하고 다양하게 첫화면을 구성할 수 있어 매우 만족스럽습니다.
| 현재 개선되면 좋은 부분과 문제점들 |
1. 이미지의 보여지는 방식의 개선
우측의 모습이 그대로 보여지는 이미지를 캡쳐한 것인데요. 모두 잘보이는 비율을 선택하자니 여백이나 공백의 문제가 발생하고, 꽉찬 것을 선택하면 이렇게 이미지가 흐려지는 문제가 있습니다.
간담회에서 나온 이야기중에 첫화면을 가장 대표할 수 있는 것이 바로 이미지라고 들은것 같은데 보여지는 부분에서 좀더 선명하게 포스팅중의 이미지를 선명하게 그대로 획일적으로 보여줄 수 있는 방법의 개선이 있었으면 합니다. 해드라인 아이템의 이미지가 상황에 따라 어떤경우 이렇게 보여진다면 이미지를 보여줄 의미가 없어 보입니다.
2. 각 아이템의 정리 및 중복성 제거와 다양화, 그리고 이름표
한가지 예로 위의 목록형 아이템중에서 비슷한 형태로 보여주고 단락만 1단, 2단 3단인 목록형 아이템은 3단형은 첫페이지 첫번째에, 나머지 2단과 3단은 두번째 페이지 끝에서 찾을 수 있습니다. 사용자가 이것을 비슷한 것으로 변경하고자 할때 정리가 안된 느낌을 받을 수 있고 비슷한 것을 확인하려면 정신없이 왔다갔다 하게 되므로, 비슷한 아이템끼리 묶어서 보여주면 좋겠다라는 생각을 해봅니다.
그리고 아이템의 중복성을 제거하라는 말은 이전에 사용하면서 메모해 놓고서 지금 확인해보니 비슷한 것이 사라져 있는 상태입니다. 목록형의 글과 제목만 나타나는 경우 충분히 디자인탭에서 수정이 가능했기에 이러한 중복성을 제거하라고 메모해 두었는데 지금은 사라졌으니 미리 수정된 것에 즐거운 미소가 지어집니다.
그리고 각 아이템에서 조금더 다양한 모습들이 지원되었으면 합니다. 즉, 조합형에서는 3단분리가 지원된다든지 1/2로 나뉜 아이템이 지원되는 것을 검토부탁드립니다. 또한 수직적 분할뿐만아니라 수평적 분할도 되었으면 합니다. 상단에는 사용자 이미지를 넣고 하단에는 목록을 넣을수 있도록이요. 이러한 조합형이 있다면 더욱 다양한 연출이 가능해 지리라 생각됩니다.
그리고, 각아이템별로 이름이 주어졌으면 합니다. 즉, '글목록형1, 글목록형2, 이미지강조형1, 이미지강조형2, .....' 이런식으로요. 현재는 아이템을 사용하고 내가 무엇을 사용했는지 보려면 보여지는 썸네일로 추측하거나 아니면 썸네일에 마우스커서를 올려놓아 생기는 툴팁으로 숫자로된 이름을 확인해야하는 번거로움이 있습니다.
3. 스크립트 실행오류 메세지 제거
그리고 화면에는 아무런 변화가 없습니다. 하지만, 적용하고 블로그 첫화면을 확인하면 정상적으로 적용한 것을 확인할 수 있습니다. 이 메세지도 적절히 나오거나 제거를 해주는 것이 사용자 편의에서 좋을것 같습니다.
또한 위젯을 첫화면에 HTML로 삽입한 후, 제대로 적용이 되는 상태에서 첫화면꾸미기 편집모드로 들어가면 미리보기에 보기좋게 잘 나오다가 다시 HTML코드를 수정하고 적용을 하면 미리보기에서 확인이 안되고 처음 보이던 것도 모두 사라지고 공백으로 나오게 됩니다. 하지만, 적용은 잘 됩니다.
이부분도 사용자 편의를 위해서 검토가 필요해 보입니다.
4. 헤드라인형 이미지썸네일 테두리 색변경
CSS를 수정하지 않고서 그대로 리모콘만으로 디자인을 적용할시 타이틀의 색깔이나 전체 디자인을 고려할시 큰 제약이 아닐 수 없습니다.
전 CSS를 덮어쓰는 방식으로 테두리를 해드라인의 타이틀인 녹색에 맞게 같은 계열로 썸네일의 색을 지정해 주었습니다. 통일감을 주면서 깔끔하게 강조가 되는데요.
리모콘의 클릭만으로 조작을 하여 첫화면을 꾸미는 사용자를 위해서 이 헤드라인의 경우 테두리가 두껍고 흑과 백색만 지원되므로, 그 색깔지정은 아무리 생각해봐도 필수로 보여집니다.
5. 뷰베스트 인기글을 차라리
또한, 다음 VIEW에서는 뷰로 송고된 글들중에서 인기글과 최근글의 위젯을 공개하고 있습니다.
여기서의 인기글은 그동안 발행한 모든 글중에서 추천과 조회등을 따져서 순위가 메겨지고 갱신되는 것으로 생각되어집니다.
해서, 그 중복성을 피하고 방문자로 하여금 전체글중 추천이나 인기가 많은글인지의 착각을 피하고자 첫화면에서의 View 추천 많은 글을 최근의 100개의 글로 한정지어 보여줄 것이 아니라 뷰위젯과 같은 순위를 보여주거나 전체중 추천수 상위를 보여주거나 좀더 나아가 기간을 정하거나 했으면 좋겠다는 생각을 해봅니다. 이는 댓글이나 조회수, 트랙백이 많은 글에도 마찬가지로 접근해 볼 수 있습니다.
6. 다음 '요즘' 위젯의 색깔의 다양화
이부분은 여담인데요. 최근 새롭게 출시한 다음의 '요즘'위젯의 색좀 어떻게 조정이 되었으면 합니다.
현재 출시된 요즘의 위젯 두종류는 하나는 검은바탕 하나는 밝은계열바탕의 두가지입니다. 첫화면에 이 위젯을 추가했습니다. 상단의 핑크바 나름 강조되고 좋아보이기는 하는데, 각 여러블로그의 디자인적인 대표적인 색상과 조화로운 배치를 위해서 이 타이틀 색상을 입력하게 하거나 최소한 '빨주노초파남보'와 흐린 파스텔톤으로 몇가지 선택해서 할수 있게 하거나 했으면 좋겠다는 생각을 문득 했습니다.
아, 그리고 다음 '요즘' 담당자분이나 개발자분 혹시 이 포스팅 보시면 '요즘'에서 친구관리를. 그룹별로 관리하고 저장할수 있도록 업데이트해주면 안될까요? 그룹으로 친구들을 정리하고, 그룹별로 새글을 보거나 전체를 볼수도 있도록이요. 현재의 일률적인 친구등록은 친구가 늘어날수록 관리를 어렵게 만들더군요. 꼭 고려해 주세요.^^
이상으로 미션1에서 언급했던 부분들 이외에 조금더 생각난 제안이나 문제점들을 정리해보았습니다.
| 첫화면 꾸미기를 이용하면서 참고할 간단한 팁(TIP) |
팁이라고 해서 아무도 모르는 노하우나 특별한 것은 아니고, 제가 직접 여러번 이리저리 '첫화면 꾸미기'를 테스터로 진행하면서 느꼈던 알고 있으면 조금더 도움이 될만한 것들로 조금더 디자인적으로 완성미를 보이거나 알아두면 편리한 것들을 위주로 정리를 해봅니다.
1. 타이틀바의 색상을 입힐 때는 그라데이션 효과를
위와 같이 타이틀바를 한가지 색상이나 상하좌우 테두리를 전부 다른색으로 입히는것보다는 한부분을 배경색과 비슷하거나 옅은 색으로 그라데이션을 주는 것이 디자인적으로 조금더 세련된 모습으로 다가옵니다. 전 강조하기 위해서 CSS를 통해서 하단의 라인의 두께를 두껍게 해주었는데요.(미션2 1부글 참고) 통상은 1픽셀 정도로 본바탕보다 조금더 옅은 색을 입혀주면 좋습니다.
2. 단락을 선으로 나눌시 넣고 빼고 조화롭게
이 구분선을 각 아이템 중간에 무조건 넣기보다는 전체적으로 디자인적으로 생각을 해주면서 넣어주면 좋습니다.
우측의 이미지는 제 첫화면의 일부인데요. [사진으로 미리 보는 조회수 인기글] 의 하단 라인이 하늘색선으로 이미 가로줄이 있기에 위의 목록형 아이템과 구분선을 넣지 않고 없앴습니다. 중복되지 않아 깔끔하게 보이기 위해서 인데요. 반대로 더욱 강조하기 위해서 구분선을 진하게 넣어줄 수 있습니다. 아이템의 배치와 타이틀 및 기타 요소들을 잘 생각해서 조화롭게 넣고 빼고 하시면 됩니다. 이부분을 신경 잘 쓰셔도 전체적으로 깔끔한 구분이 됩니다.
3. 글요약 내용은 한단계 흐린색으로
위의 목록형에서 글요약부분의 글내용은 제목의 검정색보다 조금 흐린 회색톤으로 장식했습니다. 상대적으로 제목이 우선 두드러져야하고 강조되어야 하기 때문에, 본문의 요약내용을 한단계 흐린톤으로 꾸며줍니다. 이렇게 해주면 전체화면에서 입체감이 살아나며 제목도 돋보이고 시선의 흐름에 따라서 내용도 자연스레 부각이 됩니다. 디자인적으로도 이렇게 꾸며주는 것이 보기가 더 좋습니다.
4. 블로그의 본문폭을 모를경우
첫화면 꾸미긴느 블로그의 컨텐츠가 보여지는 본문의 폭을 기준으로 작성되고 보여집니다. 이 때 자신의 블로그의 본문폭을 모를 경우 사용자이미지를 하나로 꽉차게 만들거나 첫화면의 폭을 참고해야 할 경우에 이 폭을 알아야 하는데요.
간단하게 관리자센터 > 스킨 > HTML/CSS편집 탭에서의 소스코드에서 찾을 수 있습니다.
편집화면에서 [CTRL + F] 눌러 검색화면에서 'content' 혹은 'post-width'를 검색하면 위의 이미지와 같이 픽셀크기의 본문폭을 알 수 있습니다. 제 블로그의 본문폭인 포스트너비는 630px입니다.
5. 스킨이나 첫화면에서 반복사용되는 이미지의 저장방법
스킨이나 첫화면에서 사용자 이미지를 활용할 경우에 제작한 이미지를 저장하고 링크걸어 사용할 장소가 필요한데요. 보통의 분들은 포스팅을 하나 정해놓고서 추가해서 링크주소를 이용하는 분들이 간혹 자주 보이더군요. 하지만 우리 티스토리는 스킨수정이 자유로우며 이 스킨에 필요한 파일을 올릴수 있는 공간을 개방하고 있습니다.
즉, 관리자센터 > 스킨 > HTML/CSS 편집 화면에서 [파일업로드]탭을 클릭하면,
위의 이미지와 같이 이미 스킨 images폴더에 업로드 되어진 이미지들을 볼 수 있는데요. 여기서 우측의 [파일업로드]를 클릭하여 나타나는 화면에서 올리고자 하는 이미지를 찾아 선택해주면 위의 이미지에 보이는 목록에 이미지의 파일명이 추가가 됩니다.
이렇게 추가된 이미지는 본인의 스킨에서 사용한 이미지의 경로를 블로그화면에서 마우스오른쪽 클릭해서 나타나는 경로에 파일이름만 사용하고자 하는 이름으로 바꾸어주고 그대로 링크를 걸어 사용해 주면 간단합니ㅏㄷ.
6. 첫화면 컨텐츠별 속성 CSS로 수정하기
이부분은 미션2의 1부 글내용중에 2번에서 설명을 드렸습니다. 미션2의 1부글을 참고하세요.
7. 테이블코드 사용하기
HTML를 전혀 모르시는 분들을 위해서 테이블코드를 설명드립니다. 테이블을 강조하는 이유는 첫화면을 구성함은 물론이고 블로그의 하단이나 상단에 위젯이나 기타 이미지 등을 정렬하고 컨트롤 하는데 아주 유용하기 때문입니다.
첫화면에서는 미션2의 1부글에서 확인했다시피 '요즘'과 '믹시'의 위젯을 나란히 공백을 두고 배치를 시키는데 Table을 사용해 주었는데요. 제 블로그 사이드바의 각 사이트의 이미지를 같은 크기로 정렬한 것도 테이블을 이용해서 배치한 것이고, 포스팅의 하단부의 이미지들이나 위젯들도 보기좋게 테이블을 이용해서 폭과 너비 간격을 조정해서 보기좋게 배치한 것입니다. 모르시면 알아두면 좋습니다.
위와 같은 3x3 테이블을 만들기 위해서 아래와 같은 같은 소스를 사용합니다.
<>으로 시작한 코드는 </>으로 대칭해서 끝내줍니다.
<Table>은 테이블영역을, <tr>행을, <td>는 열을 나타냅니다. 위에서는 3x3, 즉 가로행 3칸, 세로열 3칸이라 각각 3개의 코드로 마무리 되는것이구요.
이를 하나씩 더하고 뺄때마다 바둑판모양의 칸들이 늘어났다 줄어든다고 보시면 됩니다. 길이의 속성은 width, 높이는 height, 정렬방식은 중앙이 center, 좌측이 left, 우측이 right 입니다. 이렇게 속성값으로 각 셀(cell)들의 높이와 길이를 조정해줄 수있습니다. border는 테두리 선인데 0이므로 없는것을, cellspacing과 cellpadding은 각 칸들의 상하좌우여백을 타나타는데 각각 0으로 여백을 주지 않은것입니다.
이렇게 두칸이던 세칸이던 테이블을 만들면 실제 익스플로어에서는 테이블이 보이지 않습니다.
그리고 본인이 넣고 싶은 이미지나 위젯의 소스는 각 칸들을 의미하는 위치에 넣어주기만 하면 되는데요. 위의 코드에서 [ ]는 HTML에서 공백 한칸을 의미합니다. 원하는 위치에 이 코드를 지우고 소스코드를 넣어주면 됩니다. 그 이외에 여러가지 속성들이 있으나, 이미지나 위젯을 정렬하는데는 위의 정도면 충분해 보입니다.
이상으로 알아두면 유익한 것들을 정리하면서 두번째 미션의 2부글을 마칩니다. 그동안 티스토리 '첫화면 꾸미기'를 기획하고 개발하고 베타테스트를 통해서 업데이트를 하느라 고생한 운영진에게 감사의 말을 전합니다. 분명히 말씀드리건데, 이번 '첫화면 꾸미기'는 다양한 확장성과 편리성 등의 면에서 기존의 테터데스크에 비해서 월등히 우수하다고 평가할 수 있습니다.
4월중으로 정식으로 서비스 된다고 하니 티스토리 블로거 여러분들도 두근두근 기다리셨다가 본인의 블로그 컨셉에 맞게 첫화면을 꾸며보시기 바랍니다. 감사합니다.
티스토리 '첫화면 꾸미기' 1차 및 2차 미션 수행 포스팅
1차미션 주제 : [첫화면 꾸미기를 마음껏 리뷰해주세요]
2차미션 주제 : [다양한 주제에 맞는 첫화면을 꾸며보고, 컨셉이나 디자인 요소를 설명해주세요]
1차미션 주제 : [첫화면 꾸미기를 마음껏 리뷰해주세요]
2차미션 주제 : [다양한 주제에 맞는 첫화면을 꾸며보고, 컨셉이나 디자인 요소를 설명해주세요]
반응형
