• date: 2016-03
• language: php, javascript, html, css
• tool: phpstorm, photoshop
• use url: https://note.redgoose.me

Plan

개인 홈페이지에 글을 작성하고 기록하는 용도로 사용하고 있는 note형식의 앱을 만들어서 사용하고 있었지만 그것을 공개하지 않았다.
그대로 소스를 공개하면 제대로 활용할수가 없어보여 새로 만들게 되었다. 한김에 디자인도 새로 만들었다.

단순한 형태지만 타이포나 요소의 간격에 의해 퀄리티가 달라지기 때문에 잡지같으며 글 내용에 집중할 수 있도록 모던한 모습으로 만들 계획을 가지고 있었다.

Design

대단히 여유가 있는 상태에서 가독성이 높은 형태로 만들고 싶었다. 그러기 위해서는 대단히 단순화한 모습을 가지고 있어야한다고 생각하여 정말로 필요가있는 요소들만 남겨두고 최대한 단순한 형태로 구성하려고 노력했다.
컨텐츠가 들어가는 영역을 최대한 크게잡고 나머지 요소들은 최대한 적게 집어넣는 형태로 구성했다.

우연히 라인 스타일의 웹폰트 아이콘을 찾게되어 심플한 형태의 웹폰트 아이콘을 사용하기로 하였다.
컬러 배색에서 키 컬러는 파란색으로 사용하기엔 지겨워서 녹색 계통으로 사용하고 옅은 그레이 컬러로 만들어봤다.

최대한 내용에 집중 할 수 있도록 간격이나 사이즈들을 조정했으며, 당연히 반응형에 맞춰 모바일모드에도 무리가 없도록 별도로 디자인을 만들었다.

처음에는 포토샵으로 디자인 작업을 시작했다.

이 시기에 Sketch 3 라는 프로그램을 사용하기 시작하는 무렵이라서 Sketch 3용으로 포팅작업을 하면서 다시 디자인을 다듬어서 마무리를 짓게 되었다.
Sketch 3 프로그램을 잠시 사용해보니 UI디자인에 정말 편리한 도구를 많이 준비되어있고, 무엇보다 포토샵에 비해서 퍼포먼스가 너무나도 좋고, 결과물이 대단히 깔끔하게 나온다는 것이다.

Develop

디자인작업을 끝내고 바로 코딩과 개발작업에 들어갔다.
그전에 진행했던 First Gallery 작업에 사용했던 API라이브러리들을 많이 이용하여 빠르고 수월하게 개발작업을 끝낼 수 있었다.

기본적인 페이지로 출력을 할 계획이다보니 스크립트로 페이지 컨트롤 하는것보다 일반 페이지를 출력시키는 방식으로 간단하게 처리했다.

End

이걸 작업하고나서 https://note.redgoose.me 에 적용시켜서 잘 사용하고 있다.
조금 사용해보니 개선하고싶어지는 부분들이 좀 보이곤 하는데 무엇보다 저번 버전보다 세련되 보이면서 내용도 잘 나타내다보니 마음에 든다.

First Gallery와 비슷한 성격의 프로젝트이기도 하고 더 단순하다보니 딱히 더 작성해볼 멘트는 없는것 같다.