티스토리 스킨 비교, 교체 이유

블로거의 일상 5일 차 : 이제 구글 애드센스 및 애널리틱스 등도 연결했습니다. 하지만 선택한 스킨에 불 만족스러운 점이 있어 스킨을 새로 바꾸려 또다시 둘러봤습니다.

 

티스토리 반응형 스킨들

 

나의 첫 스킨 선택과 이유

제 블로그에 처음 스킨을 골라 적용시켜 볼 땐 모든 것이 빈 공간이라 각각 스킨의 기능을 알기 힘들었습니다. 제가 처음 골랐던 티스토리의 스킨은 Square 였습니다. 글씨체와 크기 및 한눈에 보이는 왼쪽 메뉴와 깔끔하게 보이는 글들의 배열이 마음에 들었습니다.

사용하면서 느낀 불편한 점

그런데 쓰다 보면서 글들이 하나둘씩 늘기 시작하자 페이지의 처음 시작 시 너무나 큰 용량의 페이지가 되어서 속도가 떨어집니다. 블로그에 쓰인 글들의 모든 사진과 내용이 오픈, 병렬 배치가 되어서 길이가 굉장히 긴, 한 장으로 오른쪽 스크린에 지나치게 치우친 언밸런스한 페이지로 나오기 때문입니다. 또한 이 점은 각 글들의 유입 경로 및 관심을 트래킹을 하기 힘든 요소가 됩니다.

 

카테고리를 클릭하면 해당 카테고리의 글들만이 한 페이지로 배열됩니다. 하지만 블로그 이름을 클릭하면 모든 글이 한 번에 배열되기 때문에 스크롤의 압박이 최고치가 됩니다. 이런 점은 사용자들에게 모든 글들을 클릭의 필요 없이 한눈에 보이기 때문에 때론 장점이 될 수도 있습니다.

 

하지만 우리가 긴 스크롤의 압박을 받는 것처럼, 인터넷도 자기가 받는 압박의 정도를 반응 속도로 표현해 줍니다. 그래서 사용자가 방대한 용량의 홈페이지를 처음 방문할 때 그 페이지가 로딩이 될 때까지 오랜 시간이 걸립니다. 이용자의 인터넷의 속도가 너무 느리거나, 사용 기기의 사양이 낮은 이유로 로딩시간의 지체가 있을 수 있습니다. 그리고 단순히 많은 이들은 그 기간을 기다릴수 있는 참을성이 없습니다 . 이는 웹페이지의 방문자들이 그냥 포기하고 발을 돌리게 만드는 많은 원인들 중의 하나입니다. 이 문제를 해결하기 위해서 랜딩 페이지를 만들기도 합니다.

 

또한 기존에는 글을 끝 마친 후 수정을 위해서는 블로그 관리를 거쳐 수정하고 싶은 글을 선택, 수정하는 과정을 거쳐야 하는 번거로움이 있었습니다. 이 글을 쓴 뒤에 알게 된 사실을 덧붙입니다. 로그인 상태에서는 각 글의 수정이 바로 가능합니다. 해당 글의 좋아요 하트 옆 점점점의 아이콘을 누르시면 수정의 선택 사항이 있었습니다.

블로그 스킨 선택 시 고려 사항

그래서 전 다른 선택할 수 있는 스킨들을 고르기 시작했습니다.

저의 개인적인 스킨 선택의 고려 사항들은 방문자들의 편의와 저 자신의 관리자로써의 편의까지 포함된 고려입니다. 제가 바라는 스킨은

디자인을 포함, 심플함과 사용 기능의 최적 조합

입니다. 티스토리에서 지원하는 기능적 요소들( 플러그인이나 광고 배너)은 아직 이용하지 않았기 때문에 나중에 그것들을 사용할 때 레이아웃이 어찌 될지 모릅니다. 그래서 광고가 없는 제 블로그에 적응시킬 현재, 스킨의 선택 고려 사항들은 다음과 같습니다.

 

[Must Have] 꼭 있어야 한다 사항 :

• 글과 사진의 동시 나열 ( 사진: 축소 썸네일, 글: 제목과 말머리 포함)
• 카테고리의 확인 용이 ( 숨겨진 폴딩 메뉴까지 오케이)
• 모바일과 피씨의 반응형*

[Nice to Have] 있으면 좋겠다 사항 :

• 새로운 댓글 말머리
• 관리자 링크 ( 관리자가 클릭하면 해당 페이지에서 바로 로그인 가능, 블로그 관리로 연결 가능)
• 블로그 주인의 타 소셜미디어 링크
• 방문자 표시

[Add-on] 있으면 좋고 없어도 괜찮은 사항:

• 시간별( 달, 년도) 글들의 개수와 목록
• 캘린더 사이드 뷰
• 패밀리 사이트 선택 이동 리스트 링크

*반응형 스킨에 관하여

사용자들의 기기가 각기 다르기 때문에 화면 크기에 따라 다른 반응을 한 가지 스킨으로도 가능하게 보여 줍니다. 액체는 담긴 용기의 모양과 크기에 따라 자신의 형태를 변화시킵니다. 그런 의미에서 플루이드(fluid) 디자인이라고도 하며 이 단어는 이 디자인의 의미를 잘 표현해 줍니다.

 

좀 더 구체적으로 설명을 한다면, 반응형과 플루이드형 모두 스크린의 크기에 따라 다른 레이아웃을 보여주는 것은 같지만 그 실행 방법은 약간 다릅니다. 반응형은 사용자들이 각기 이용 가능한 스크린들의 크기를 상정해 놓고, 그 스크린 크기의 단계에 따라 내용을 스크린 내에서 축소시켜 보여 줍니다. 플루이드형은 각개의 웹페이지의 요소들이 각각 전체 스크린의 퍼센트로 치환됩니다. 그래서 스크린의 크기에 따라 가장 유기적 변화를 가능하게 해 줍니다. 하지만 그만큼 디자인 시에 고려해야 할 사항이 많아지기 때문에 까다롭습니다.

 

따라서 블로그를 포함한 웹 페이지에서는 그 화면 크기에 알맞은 최적화된 메뉴들의 위치 재배열이 이루어 집니다.

로딩 속도가 빠른 장점이고 어떤 화면에라도 적응이 가능하기 때문에 점점 이 방향으로 웹페이지를 개발하는 추세입니다. 또한 구글의 검색 링크 또한 전통적인 고정 크기의 디자인으로 된 페이지들과 비교했을 때보다 높은 랭킹 점수를 줍니다.

 

반응형 스킨은 사용자의 스크린 크기에 따른 다른 배열을 보여주기 때문에 테스트할 시, 반드시 큰 화면으로 브라우저의 전체 크기를 조절할 수 있는 모바일이 아닌 데스크탑으로 확인하시길 추천드립니다.

 

아래와 같이 큰 화면일 때와 모바일 기기를 사용할 때, 다른 정렬 형태를 볼 수 있습니다.

 

두번째 선택순위였던 북클럽 스킨. 작은 스크린 이용 시 감추어진 폴딩 메뉴

북클럽 스킨, 일반 컴퓨터 모니터 화상

 

 

 

최종 선택한 반응형 스킨, #1, 일반 모니터 크기 화상 동일 스킨, 일반 모니터 스크린 화상 내 보여지는 페이지 하단 메뉴들

같은 #1 스킨, 작은 스크린 크기 화상. 큰 화상에서 하단에 보여졌던 메뉴들(댓글, 최신글, 태그, 방문자, 달력들) 은 사라짐

같은 스킨 #1, 소형 화상, 폴딩형 메뉴

반응형 스킨 #2, 데스크탑 및 소형 화상, 폴딩형 메뉴.

 

티스토리 스킨들을 고르시거나, 앞으로 새로운 웹 디자인의 고려시, 조금이나마 도움이 되었길 바랍니다.

 

 

현재 사용중인 스킨을 볼수 있다. 다운로드 버튼을 누르면 현재 사용중인 스킨을 압축폴더로 다운받을 수 있다.

 

추가:

티스토리의 스킨을 교체시, 만일 직접 고친 HTML, CSS가 있다면 스킨관리 관리자 페이지에서 보관과 다운로드 버튼을 누르자. 새로운 스킨으로 교체 후 교체한 스킨이 마음에 들지 않는 경우 원상태로 복구하기 쉽다.