티스토리 첫화면 꾸미기 베타테스트의 2차 미션이 공개 되었습니다. 그건 바로~~!! 내 맘대로 첫 화면을 제시하라 인데요. 제가 티스토리에 도전할때 첫 페이지 화면을 제시한다고 했었습니다.(제가 내 뱉은 말에 책임을 질때가 온 것 같군요.)

우선적으로 다양한 페이지를 만드는 데는 현재의 기능면으로 제약이 많이 있네요. 우선 현재 제공되는 기능으로 레이아웃을 잡아 봤습니다.

먼저 첫 페이지를 제작하기 전에 디자인에서 유념해야 될 사항이 있어서 몇 가지 짚고 넘어 가겠습니다. 대부분 스킨의 배경과 본문을 흰색으로 하는 기본 스킨을 사용하고 있습니다.

첫 페이지를 제작할때 가장 고려 할 점은 바로 방문자의 시선처리 부분입니다.

배경과 본문이 흰색인 경우는 큰 차이가 없겠지만, 예를 들어 "예스비 디자인 닷컴"처럼 타이틀과 사이드바 그리고 메뉴에서 특정 색상이나 무늬로 시선을 잡는 스킨이라면, 첫페이지를 제작할때 색상부분을 고려해야 됩니다.

배경이 짙은 색상이거나, 진한 무늬가 있는 스킨에 알록달록 화려한 칼라가 들어간 칼라바를 덫 씌우면 방문자의 눈의 피로를 느끼게하고 그로 인해 불쾌감을 주게 되기 때문입니다. 이럴 경우는 회색계역의 색으로 통일하여 깔끔하게 처리해 주는 것이 좋습니다.

또는 스킨에 따라 주색(주로 쓰이는 색)이 있다면 통일감있게 같은 계열의 색상으로 처리를 해주 는 것이 통일감 있고 안정되어 보입니다.

"예스비 디자인닷컴"에서 사용된 첫 페이지의 경우도 메뉴바의 색상과 동일한 칼라바를 이용해 전체적으로 통일감을 유지하면서 화려한 느낌을 강조 했었습니다.

포스트 레이아웃에서는 글마다의 길이가 각각 다르므로 사이드바와의 길이 부분을 신경쓰지 못했었습니다. 첫페이지의 경우는 본문영역을 어떻게 채우느냐에 따라 사이드바와 길이가 맞도록 조절이 가능하다는 장점입니다.

첫 페이지를 디자인 할때는 사이드바의 아래 길이를 맞추어 제작해 주어야 합니다. 사이드바가 더 길거나, 첫페이지의 본문 부분이 더 길거나 할 경우 전체 흐름을 깨기때문에 굿 디자인이라 할 수 없습니다.

이 두가지 사항을 유념해서 제작한다면 멋진 첫 페이지 화면을 만드 실 수 있을 거예요^^&

1. 스킨의 색상과 맞추어 전체 흐름을 통일시킨다.

2. 사이드바와 길이를 맞추어 전체 레이아웃을 깨지 않는다.

지금부터 예스비™가 제안하는 첫 페이지 스타일을 보시고 참고 해 보세요^^&

현재 예스비 디자인닷컴의 첫페이지 화면은 각 카테고리별로 보여지는 목록형 스타일 화면을 제공하고 있습니다. 메뉴바와 동일한 색상으로 카테고리의 제목을 강조해서 방문자가 글마다의 카테고리 선별을 쉽게 함과 동시에, 전체적 칼라풀한 흐름을 깨지 않도록 하는 것이 디자인의 주 컨셉이었습니다.

자신의 블로그 스킨 스타일이 특정 색상으로 만들어진 스킨이라면 이와 비슷한 느낌으로 살려 보시면 산뜻하면서도 화려한 첫페이지를 꾸밀 수 있지 않을까 생각합니다.

첫페이지는 웹진형태를 취하기 때문에 깔끔한 것이 장점이지만, 조금 딱딱해 보일 수도 있는 단점이 있습니다.

자신의 로고색상이나, 타이틀의 색상등과 매치한 "카테고리 목록형 스타일"을 사용하면 어떨까요?

어떤 스킨에나 잘 어울리는 디자인이 아닐까 싶습니다. 시선이 가장 많이 머무르는 상단부분은 갤러리형태로 썸네일의 크기를 크게하여 시선을 집중 시켜주고, 아래 하단에는 원하는 카테고리나 글목록을 불러와 두번째 시선처리를 해줍니다.

아래는 목록형(제목)만 나열해서 각 카테고리별로 보여주게 하고, 하단에는 상단에 맞추어 썸네일 목록형으로 상하를 맞추어 제작했습니다. 사진블로그나 이미지가 많은 블로그에 아주 적절한 목록형 모듈입니다.

예스비 디자인 닷컴처럼 포트폴리오부분을 넣어도 좋고, 사진만 나열해도 깔끔하고 심플한 디자인이 되지 않을까 생각합니다.

1번과 2번의 복합형 구조로 상단에는 칼라바를 이용해 시선이 머물도록 강조를 해주고, 아래 부분은 심플한 웹진 스타일을 그대로 가져온 형태입니다. 자신의 블로그 색상을 매치시켜 칼라바의 색상을 통일해주는 것이 제일 중요합니다.

2번의 웹진 스타일은 전체적으로 깔끔한 디자인이지만 자칫 본문처럼 지루해 보일 수도 있는 디자인입니다.

이런 점을 고려해서 시선이 자주 머무르는 상단에 칼라바로 포인트를 주고, 흐름이 아래로 갈 수록 깨끗한 화면을 제공하는 것이 이 디자인의 포인트 입니다.

첫화면 꾸미기가 오픈이 되면 더 다양한 디자인이 나오지 않을까 생각됩니다. 아직은 html과 css를 사용할 수 없어서 조금 답답한 면이 없지 않았습니다.

첫화면이 빨리 완성이 되어서 티스토리유저들의 개성을 한껏 살려주는 좋은 서비스가 되었으면 하는 바램입니다.

제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.