기획
부트캠프 교육을 시작하고 첫 프로젝트를 진행하게 되었다.
프론트엔드 프로젝트인 만큼 시각적인 부분에서 어떤 것을 어필할 수 있을지 고민이 많이 됐다.
소재도 특별한 걸 하고 싶었지만 배운 것을 잘 활용해보자는 의도에서 소재는 간단히 쇼핑몰을 만들어보자고 팀원들과 의견을 나눴다.
소재는 흔하게 볼 수 있는 내용이지만 기능을 추가해서 조금이나마 프로젝트의 특별함을 어필해보기로 했다.
최근 디지털 약자를 대상으로 디지털 격차가 증가하고 있는 추세라는 점을 고려해
1. 큰 글자로 확인할 수 있는 기능
2. 설명서를 이용하는 것과 유사하게 단계별로 주문을 완료할 수 있도록 페이지 간소화 및 단계화
라는 2가지 기능에 point를 잡고 쇼핑몰 페이지를 만들어보자고 제안했다.
그러나,
팀원들이 열흘이라는 프로젝트 기간 안에 모든 기능을 만들기 어려울 것 같다고 의견을 제시해줘서 다시 아이디어에 대해 함께 고민했다.
이에 팀원들이 쇼핑몰이지만, 판매의 목적보다 브랜드 마켓팅을 목적으로 한 브랜딩 사이트를 만들자는 아이디어를 제시해 '큰 글자 기반의 브랜딩 사이트'를 주제로 확정했다.
프로젝트의 주제를 정한 후 실제 개발을 진행할 세부 기능에 대해 팀원들과 회의하고, 결과물 형태를 '반응형 웹'으로 결정할 수 있었다.
기획은 노션을 통해 팀원들과 함께 진행했으며, 이를 바탕으로 피그마에서 디자인을 구성해 나갈 수 있었다.
디자인
반응형 웹을 만들기로 결정한 후 브라우저 크기 768px를 기준으로 웹 화면과 모바일 화면 2가지로 디자인을 구성했다.
가장 큰 차이점은 헤더와 메인 브랜드 이미지, 아이템 배치 구도이다. 이를 중심으로 반응형 웹을 구성하기 시작했다.
먼저, 아이템들이 배치될 구도를 대략적으로 잡아준 후 본격적으로 디자인을 구성했고, 개발을 진행할 컴포넌트를 나누기 위해 아이템 별 기능을 정리했다.
아이디어 주제를 정한 후에는 팀원들과 소통도 잘하고 사진, 브랜딩에 대한 회의도 원활히 진행되어 디자인 구성은 어렵지 않게 마무리할 수 있었다.
본격적으로 프론트엔드 개발을 진행하고 있는데 컴포넌트 제작은 거의 마무리되고 있다.
다음 글에서는 1차 프로젝트 개발에 관한 내용을 적어보도록 하겠다.