• date: 2016-04
• language: html, css
• tool: webstorm
• URL: https://projects.redgoose.me/2016/dq-contents-markup/

회사에서 자주 사용되는 컴포넌트와 마크업을 미리 만들어두는 작업을 하게 되었다.
이것을 만들게 되는 계기는 외부 사이트 작업을 빠르게 하면서 코드를 균일하게 유지하기 위하여 이 작업을 시작한 것이다.

기획자에게서 ppt 기획서를 보니 소개, 게시판, 약관, 로그인, 아이디/비밀번호 찾기 컨텐츠들이 들어가는 것이다. 그리고 피시 버전과 모바일 버전으로 따로 만들어달라는 요구가 있었다.
이게 큰 일이었던것이 디자인이 없어서 코딩으로 디자인을 해야하는 일을 해야했다.

PC Version

어차피 디자인은 실 작업에 들어가면 다 바뀌기 때문에 아주 무난한 형태이며 변형이 쉬워야하기 때문에 디자인이 들어가지않고 밋밋한 모습으로 나올 수 밖에 없다.

주요한 컴포넌트들을 별도로 만들고 가이드 페이지도 만들다보니 생각보다 해야할 일이 많았다. 수치와 색상은 그저 직감대로 조절해가면서 코딩했다.

Mobile Version

간단한 형태로 모바일 버전도 코딩 마무리했다.

데스크탑과 모바일 가이드 페이지를 작업하고, 작업한 페이지에 쉽게 접근하기 위하여 링크 를 통해서 페이지를 직접 확인할 수 있도록 링크목록 페이지도 따로 마련했다.
마무리짓고 프로젝트를 작업할때 이걸 베이스로 수월하게 작업을 진행할 수 있었다.