Project Shall-We-Health #2 프로토타입 및 목업페이지 제작

시작하며

이번 프로젝트에서는 SR기획 단계에서 와이어프레임 대신 프로토타입을 제작하였다. 이전 와이어 프레임도 어느정도 실제 웹페이지와 비슷한 형태로 제작하였는데 이번에는 디자인까지 적용한 완성된 형태의 프로토타입을 제작하였다. 목업페이지를 만드는 단계에서 웹디자인이 같이 이루어지기 때문에 시간을 단축할 수 있다고 판단했다.

프로토타입

두번의 프로젝트를 통해 피그마의 사용법에 익숙해져서 만드는 시간이 목업페이지를 만들 때와 크게 차이가 나지 않아서 빠르게 SR 기획을 마칠 수 있었다. Home의 경우 중요한 기능이 있지는 않지만 어떤 서비스를 제공하는지 한눈에 알아볼 수 있도록 만들어야 하는데 어떤 애니메이션을 적용할지 어떤 내용을 담아야하는지 고민할 시간이 필요해서 프로젝트를 진행하면서 구현하기로 하였다.

목업페이지

목업페이지를 만드는 단계가 처음에 비해서 속도가 가장 많이 빨라졌다. 처음에는 어디에 어떤 태그를 써야하고 그 태그가 가지고 있는 기본 속성이 뭔지 몰라서 한참 헤맸고 적절하지 않은 CSS 속성을 사용해서 반응형 웹페이지를 구현할 때 수정이 필요했었는데 지금은 거의 1/3 정도로 시간이 줄어들었다.

NavigationBar

로그인/관리자 여부에 따라서 보여지는 버튼이 달라지기 때문에 우선 state를 사용하여 설정해주었다. (추후 redux의 loginReducer에 연결 예정)

Board

Board 페이지에서 날짜 선택하는 부분은 현재 날짜 기준으로 14일까지 선택 가능하도록 구현하였고 매칭 리스트는 우선 더미데이터를 생성해서 map으로 표시되게하였다. 상단의 배너는 react-slick이란 라이브러리를 사용하여 슬라이드로 구현하였는데 추후 다른 이미지로 대체할 예정이다.

AdminPage

관리자페이지를 만들면서 로딩페이지도 만들어서 state에 따라서 보여지도록 설정해주었다.

Mylog

Footer

Withdraw, Issue

탈퇴와 신고하기 페이지는 react-new-window를 사용하여 새창에서 띄워지도록 구현하였다.

Modal, Confirm

마치며

SR 기획을 마치고 개발을 시작하면서 디자인을 확정하고 목업 페이지를 만드는 훨씬 효율적이라는 생각이 들었다. 목업페이지를 만들는 과정에서 확인해가면서 디자인 수정해갔는데 피그마에서 정한 디자인대로 페이지를 구현해서 시간을 절약할 수 있었다. 프로젝트를 진행할 때마다 느끼지만 나중에는 웹디자이너가 포함된 팀에서 토이 프로젝트를 하고 싶다는 생각이 들었다. 전문적인 디자인을 적용해서 퀄리티 높은 서비스를 개발해보고 싶다.