Contents page markup

Tool & Service External

Contents page markup

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

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

contents-page-markup-001a.jpg

PC Version

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

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

contents-page-markup-002.jpg

Mobile Version

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

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