내가 가장 먼저 만든 것은 역시 Header이다.
헤더 좌측에는 동아리 로고를 넣었고, 우측에는 회원 이름 (비 로그인시, 로그인하기 버튼)을 나오게 하였다.
동아리 로고를 클릭하면 메인 홈 화면으로 이동하도록 링크를 걸어 두었다. 우측 로그인 혹은 회원이름에 마우스를 hover하면 노란 박스 배경이 생긴다. 비 로그인시에 로그인 버튼을 클릭하면 로그인 화면으로 넘어간다. 회원 이름일때에 클릭하면 홈 화면으로 넘어간다. (홈 화면에 회원 정보가 있기 때문이다.)
해당 프로젝트는 교내 개발 동아리 InQ에서 진행한 프로젝트이다.
3월 17일에 첫 회의를 시작으로, 4월 30일에 프론트엔드 개발을 시작했다.
프로젝트 이름은 InQ Project Manager 이며, 동아리 활동을 통해 생기는 프로젝트를 관리해 주는 웹 페이지이다.
프로젝트 디자인부터 제작까지 모두 혼자 진행했다.
웹 구조, 디자인, 프론트엔드 등.. 우리 팀에서 웹 제작이 가능한 사람이 프론트엔드 한명(나), 백엔드 한명이여서 한달동안 둘이서 제작을 완료할 수 있을 까? 걱정이 많았지만 어찌저지 포기할건 포기하고 살릴건 살리면서 제작을 완료하였다.
일단 나는 미적인 감각은 정말 쥐똥만큼도 없기 때문에… 웹 디자인을 어떻게 할지 정말 걱정과 고민이 많았다. 그런 내가 선택한 최선의 방법은…! 이 프로젝트와 유사한 기존에 존재하던 서비스의 웹 디자인 참고와 내 취향인 웹의 디자인을 참고하여 제작했다.
해당 사이트에 들어가서 검사(F12) 계속 누르면서 html 구조를 어떻게 짰는지 확인하고, 참고하고, 내 방식대로 수정을 계속 거듭하면서 만들었다.
헤더를 제작을 시작하기에 앞서 굉장히 오랜 시간이 걸렸다. 생각했던 디자인들이 맘에 안들고.. 이미지를 svg로 적용하는 건 처음이라 신기해서(?) 내용들 찾아보다 보니, 만드는 시간은 3시간 (중간에 말도 안되는 실수로 인해 1시간을 버렸다) 서칭하는 시간은 2배이상 사용한 것 같다. 시간을 헛으로 날린 느낌도 나지만… 언젠가 도움이 될 것이라고 믿는다..ㅎ
More …이번 년도 1월에 처음으로 웹 개발이라는 것을 접하게 되면서 드디어 시작하게 나의 첫 프로젝트이다. 처음으로 내가 처음부터 끝까지 제작해보는 것이기에 설레이기도 하면서 걱정이 많이 되기도 하다.
More …