1. 디자인 구상

스킨의 기본적인 컨셉과 레이아웃을 잡아준 뒤 크기, 위치, 색상 등을 정해 컨텐츠를 배치해준다.

전체 레이아웃 및 컨셉

전체 레이아웃을 잡는다.

스킨 전체적으로 공유하는 헤더(Header), 메뉴(Menu), 사이드 바(Sidebar), 바디(Body), 푸터(Footer) 등의 존재 여부와 위치, 대락적인 부피를 정해주면 좋다.

색상을 포함한 전체적인 컨셉을 잡아주면 이후에 세부적인 디자인을 하는데 큰 도움이된다. 스킨 구현 자체에 크게 중요하지는 않다.

각 페이지와 필요한 요소들을 배치한다.

티스토리 스킨가이드를 참고하여 디자인 해야하는 페이지를 나누고 필요한 요소(치환자)를 각 페이지에 맞춰 나눈다.

계획한 레이아웃에 따라 기본 레이아웃 구성을 먼저 한 뒤 필요한 페이지에 적용해준다.

elements를 HTML과 CSS로 구현할 때 보다 편하게 할 수 있도록 다음의 사항을 고려하면서 작업했다.

프로그램상에 이런 요소들을 바로 파악할 수 있도록 되어있는 경우가 많으므로 제공하는 기능과 직접 표기를 적절히 섞어서 하면 좋을 것 같다.

XD에서는 elements의 위치, 크기, 색상 등은 확인이 쉽기 때문에 group된 element의 간격이나 정렬, elements 이름 정도만 꼼꼼히 지정해줬다.

예를 들어 카테고리 이름 등을 적을 상단 부분의 요소(Heading)를 보면

전체 부피를 보여줄 수 있는 layer를 만들어 BG라고 이름 붙였다. 크기와 위치는 프로그램에서 바로 표시해준다.
카테고리 이름 등이 될 Title은 cracker 일러스트와 텍스트로 구성되어 있기 때문에 두 element를 title로 group 해주었다 (위치 지정에 용이).
두 element 사이의 간격도 편집할 때 일정하게 유지하기 용이하도록 별도의 박스를 만들어두었다.

티스토리 스킨가이드의 각 요소 치환자를 참고하여 페이지를 구성했다.

기본적인 요소 (메뉴 아이콘, 본문 구성요소 등)은 스킨 가이드에 없는 경우가 많았다. 다른 블로그를 참고해서 목록화 한 뒤 작성했다.
'글' 페이지의 공감, 공유버튼 등의 치환자가 존재하지 않았는데 아마 글 치환자에 포함되어 있는 것 같다. 역시나 요소를 목록화해서 작성했다.
티스토리 리뉴얼 이전 요소의 치환자가 현재 스킨가이드에 없는 것들도 있었는데 실제로 치환자 자체를 없앤건지 사용 빈도가 적어서 스킨가이드에만 표기하지 않은 것인지는 확인하지 못했다. 이후에 코딩하면서 확인해 볼 예정.
스킨가이드 목록에 있는데 사용하지 않을 요소들은 가장 왼쪽에 몰아서 표기했다.

일차적으로 마무리한 데스크톱 스킨 최종디자인

대부분이 글 위주의 공부 정보글이라 지금 나한테 가장 팔요한 요소 위주로 간략히 만들었다.
티스토리에서 제공하는 요소는 6-70% 정도 이용하고 있는 것 같다.
- 특히 최근 댓글, 방문자수, 구독 버튼 등 방문자와의 교류를 보여주는 항목을 대부분 생략했다.
우선 이 정도를 먼저 제작하고 앞으로 사용하면서 업데이트 할 예정이다.
- 본문의 TOP 버튼, TOC, 첨자 표기
- '홈' 페이지의 Cover 다양화: Gallery list, Slider 등
- 남은 티스토리 제공 요소