#2. 파워포인트로 티스토리 스킨을 만들어보자.

일단 블로그 스킨을 만든다고 하면, 보통은 html과 css에 대해 공부를 해야겠다고 생각하지만... 시작부터 어려운 코딩만 보다보면 당연히 눈 앞이 캄캄해지고 지루해지는 법. 

어쨌든 모든 디자인의 시작은 스케치가 아니겠는가? 그리고 스케치하면 가장 좋은 툴이 있다. 바로 직장인들의 친구, 파워포인트이다. 나는 기계공학을 전공했고, 3D 캐드프로그램도 다룰 줄 알지만 정작 회사에서는 피피티를 더 많이 사용한다.  블로그도 마찬가지로, 피피티부터 시작해보도록 하자.

파워포인트로 블로그 만들기

파워포인트로 블로그를 만든다함은, 레이아웃 구성을 짜는 것을 말한다. 즉, 어디에 제목이 있고 본문이 있고, 댓글을 어디에 쓸지 등 위치 선정을 해야하는 것이다. 네이버 블로그의 경우, 정해진 레이아웃을 선택하고 그 틀에 맞게 각각의 아이템들을 넣게 되어있다. 바로 아래처럼 말이다.

네이버 블로그 스타일▼

보다시피 큰 틀의 레이아웃을 먼저 정하고, 세부 아이템들을 원하는 위치에 드래그해서 넣는 방식이다.  때문에 아무래도 블로그 구성 자체가 제한적일 수밖에 없다. (물론 몇년 전부터 HTML 방식의 아이템을 만들어줘서 그나마 자유도가 올라가긴 했지만..)

반면 티스토리의 경우, 이런 레이아웃 구성에 제한이 상대적으로 없는 편이다. 우리가 생각할 수 있는 레이아웃은 대체로 다 가능하다고 보면 된다. 필자는 되도록이면 심플한 스타일을 좋아한다. 현재 적용중인 fastboot 보다 더 심플하고 간결하고, 본문이 눈에 띄고, 진행중인 프로젝트 중심의 페이지로 만들고 싶기 때문에 나는 아래와 같이 레이아웃을 선정해보았다.

두니월드 티스토리 스타일▼

먼저 본문에 대한 레이아웃을 그려보았다. 스킨 제작의 시작은 이렇게, 본인이 원하는 스타일을 미리 그려보는 것이다.  필자는 되도록이면 심플하고 깨끗한, 하얀 느낌을 주면서, 포인트 색상만 일부 추가하는 방식의 블로그로 꾸며보고자 한다.

물론 홈화면을 비롯한 여러 화면 레이아웃을 미리 구성해놓으면 좋겠지만, 하나하나 다 기획하고 있다가는 시작도 하기전에 지칠 것이 뻔하기 때문에.. 일단 이 화면부터 만드는 것을 목표로 해보도록 한다.  자, 이제 위와 같은 화면을 만들기 위해 우리가 신경써야할 부분들에 대해 알아보자.

복잡해보이지만, 각각의 구성요소에 대한 특성들을 아주 간결하게 나타내본 것이다. 

1. HTML과 CSS를 적당히 잘 조절하면 위와 같은 화면을 얼마든지 만들 수 있다는 확고한 믿음을 일단 가져야한다.  

2. 믿음아래, RGB 색상이나 아이콘 구성, 본문 너비, 텍스트 정렬 등의 구성을 기록해놓도록 하자.

이렇게 구성에 대해 텍스트로 지정해놓는 이유는, 컴퓨터는 아무것도 모르기 때문에 우리가 일일이 다 지정을 해줘야 하기 때문이다. 예를 들어 가운데 정렬의 경우, 

<center> </center> 라는 구문을 넣어줘야한다. 

이 외에도 색상, 글씨 크기 등 모든 것을 다 일일이 지정해줘야하므로, 이 페이지는 상세히 작성할수록 좋다. 어떤 것까지 작성해야할지 모르겠다면, 일단 되는만큼 다 작성하는 것이 좋다.

필자는 또, 좌측에 카테고리를 넣고 싶어서 대충 그려보았다. 

1. 일단 카테고리별로 버튼을 만들고 싶었다. 즉, 내 블로그의 메인이 되는 드론 제작기, 스킨 제작기, AI, 여행 등의 주요 카테고리를 버튼화 해서 만든다. 

2. 그 버튼을 누르면, 팝업창 같은게 떠서 해당 프로젝트에 대한 설명을 보여주고, 다시 거기서 링크를 타고 해당 카테고리로 넘어가게 되는 구조로 제작해보고자 한다. 

이미 얘기했듯이, 팝업창처럼 흔히 인터넷에서 볼 수 있는 기능들을 전부다! 구현할 수 있다고 믿음을 가지는 것이 중요하다. 어떻게 해야할지 모르겠어도 일단 구현가능하다는 전제하에 상상의 나래를 펼쳐보도록 한다.

3. 여기서 끝나지 않고, 만약 창이 작아지게 되면, 우측처럼 BAR 형태의 네비게이션이 나오게 할 예정이다. 즉, 모바일에서 페이지를 볼 경우, 좌측 버튼들이 크게 있으면 화면이 가리기 때문에... 창이 작을 경우에는, 버튼을 없애고 상단 bar로 표현하고자 한다.

자, 이렇게 일단 본문 구성에 대해 파워포인트로 구상을 해보았다. 위 그림들에는 일부 코딩 관련 용어들이 나오긴 하지만 일단 모른다고 치고, 파워포인트로 나만의 블로그를 그려보자.  다음에는 실제로 이를 구현하기 위해 연습용 페이지를 만드는 것을 알아보자.