[Web] 프로젝트 1 주차 - 메인 페이지 디자인 & 구현 기능 기획

프로젝트가 시작된지 어느덧 2주차다.

시간이 정말 빠른 것 같다고 새삼 느끼게 된다.

나는 이번 프로젝트에서 웹디자인&프론트엔드의 역할을 맡았다.

1주차 동안 기획은 이미 마쳤고 이제 디자인, 설계, 구현 등을 진행하면 된다.

 

학교 홈페이지에 공지되느 프로그램을 더 시각적이고 편리하게 알 수 있게 하여 학생들의 참여율을 높이는 것

우리의 목표이다.

 

근데 기획을 더 하다보니 이 목표만으로는 새로운 학생들의 가입, 사이트 접속율에 대한 걱정이 됐다.

그리고 이왕 프로젝트 하는 거 큰 목표를 잡자! 해서

공지사항을 카테고리를 세분화해서 나누는 기능뿐만 아니라

- 실시간 인기 프로그램 UI

- 추천 검색어

- 학사 일정(달력에 보이게)

- 달구지 시간표

- 프로그램 모집 기간 연장 시 알림 기능

를 추가하여 학생들이 원하는 정보가 담긴 학교 홈페이지를 만들기로 했다.

 

공식적인 학교 홈페이지는 사소하게 학생들이 원하는 정보까지는 부족했고, 시각적으로 눈에 띄게 디자인되어 있지 않아

이런 점을 보완하고자 했다.

 

오늘은 내가 1주차까지 디자인했던 메인 페이지를 프론트 역할이신 분과 상의했다.

드디어 디자인과 컨셉이 정해져서 뿌듯한 하루였다.

1주일동안 매일 2시간씩은 디자인을 살펴본 것 같은데 참 예술의 영역은,,,

언제나 하얀 도화지에서 시작하는 것이 쉽지 않았다.

 

 

우선 우리 팀에서 구현할 기능을 살펴보며 우선 순위를 따졌다.

카테고리와 프로그램이 잘 보이는 것이 우선이니 그 순서로 배치했다.

근데 카데고리를 사이드에 둘지 하단에 둘지 고민이 많았다.

 

 

 

 

사이드가 더 트렌디하고 간편해보여서 사이드로 결정했다.

하지만 임의로 넣은 Category라는 글자도 그렇고 뭔가 텅 빈 느낌이 들었다...

 

 

 

 

위와 같이 아예 사이드를 고정되게 하여서 메인 카테고리로 두었다.

추천 검색어는 검색창을 클릭했을 때만 보이게 하는 방향으로 바꾸었다.

사실 강남대학교 사진은 임의로 넣은 것이고 고화질 영상을 넣을 계획이라 저 곳엔 뭔가를 넣지 않을 것이다.

 

카테고리를 사이드에 넣기 전에는 밑의 사진처럼 디자인을 하려고 했었다.

색도 파스텔톤으로 바꿔서 부드러운 느낌을 주려고 했다.

 

 

 

 

흠 근데 나름 대학교 홈페이지인데 대학교 대표 색이 들어가야겠다고 생각이 바꼈고

눈에 띄게 채도를 높여야겠다고 생각했다.

 

 

 

위의 색이 우리 학교 대표색이다.

너무 쨍한 색이라 이 색보다는 좀 더 연하고 채도가 낮게 선택했다.

색 선택하는 것도 고민이 굉장히 많았다.

여러 사이트에서 색 조합을 찾아보니 좋은 색을 고를 수 있었다.

개인적으로 핀터레스트와 어도비 컬러 사이트가 도움이 됐다.

 

 

 

확실히 밝은 느낌이 나서 맘에 들었다.

카테고리를 왼쪽에 고정할 예정이라 비워두고 구성했다.

아직 학식 식단표랑 달구지 시간표는 디자인을 못해서 디자인되면 차차 넣을 것이다.

이제 디자인과 배치는 어느 정도 끝났으니 이 컨셉으로 다른 페이지도 다 만들고!

위의 디자인으로 그리드도 설정해서 다시 만들어야 한당..!

 

그래도 어느 정도 디자인이 되서 한시름 놓을 수 있다.

이제 리액트 강의 들으면서 열심히 공부하고 페이지 구현에 집중해야한다.

이번 2주차에 프론트엔드 UML을 제작해야한다!

UML 작성은 처음이라 잘 찾아봐야할 것 같당.

 

- 1주차 기록 끝.