프론트엔드 개발
기획과 디자인을 토대로 컴포넌트 별로 개발을 시작했다.
개발 기간은 3/13 ~ 3/21까지 총 9일동안 진행했고, 노션과 슬랙을 통해 진행상황을 매일 공유하며 프로젝트를 진행했다.
이번 프로젝트에서 팀장을 맡게되어 일정 관리와 팀원들의 역할 분배에 가장 많은 신경을 썼고, 공동으로 작업하는 노션으로 공지를 올리고 스케줄을 관리할 수 있도록 유도했다.
본격적으로 컴포넌트 개발을 하면서 메인 브랜드, 버튼, 이벤트 배너, 구매페이지, 헤더 컴포넌트 등을 개발했고, 애니메이션과 css 적용을 담당하여 프로젝트를 진행했다.
컴포넌트를 개발하는 과정에서도 팀원들이 어려움을 느끼거나 문제가 생기면 같이 고민하며 문제를 해결했고, 진행하지 못하는 부분은 대신 넘겨 받아서 수행하는 등 서로 도우면서 하나씩 구현해갔다.
맡았던 개발 과정에 대해 간단하게 소개하면,
1. 먼저 메인 브랜드 페이지를 만들 때 브랜딩 사이트인만큼 브랜드 명이 페이지를 처음 켰을 때 잘 보이도록 구조를 잡고, 배경을 어둡게 하는 등 애니메이션과 css를 적용하는 데 힘썼다.
처음에는 배경을 어둡게하기 위해 opacity 속성을 사용하려 했으나, 어두워지는게 아니라 흰색으로 흐려지는 기능이 적용되어서 리더님의 조언을 통해 filter:brightness() 속성을 사용할 수 있었다.
2. 버튼 컴포넌트는 코드를 간결히 하기 위해 부트스트랩의 css를 가져와 구성했고, 이벤트 배너는 투명 배너로 배경이 스크롤 될 때마다 같이 스크롤 되는 기능을 만들어보고 싶어서 구현하게 되었다. 배너를 투명하게 하는 과정에서 검색을 통해 background:transparent 속성을 새롭게 알게 되었고, 또 하나의 기능을 배우고 구현할 수 있게 되었다.
3. 헤더 컴포넌트는 개발에 어려움이 있었던 부분 중 하나였다.
가장 큰 문제였던 것은 모바일 화면에서의 메뉴 토글을 구성하는 부분이었다.
처음에는 collapsible을 활용하여 토글을 구현하려 했으나, 스크립트에 정의된 토글 기능이 적용되지 않는 등 문제가 발생하여 구현에 실패했다.
따라서 모바일 메뉴 토글을 새로운 div로 따로 생성해주었고, display:none 속성과 media 쿼리를 이용해 반응형 헤더를 완성해주었다.
이해를 위해 토글을 구현한 자바스크립트 코드와 모바일 메뉴 div 코드를 같이 올리도록 하겠다.
스크립트 코드를 작성하는 과정에서 jQuery에 대한 숙련도를 높이고 싶어서 최대한 jQuery를 사용하면서 구현하려고 노력했다.
또한, 헤더 컴포넌트에 있는 장바구니, 검색 버튼은 모바일 화면에서 깔끔하고 명확하게 볼 수 있도록 헤더에 위치시키지 않고 뱃지로 구현하여 헤더를 간소화했다.
추가로 디지털 약자가 주 타켓층인만큼 음성 검색 서비스도 기획하여 뱃지로 기능을 추가해봤다.
인터넷에서 검색이나 사이트 이용에 어려움을 느끼는 디지털 약자에게 편리함을 줄 수 있는 기능이라고 생각했기 때문이다.
다만, 기능을 구현하는 과정은 백엔드가 필요한 부분이어서 이번 프로젝트는 프론트엔드 프로젝트이기때문에 기능 구현까지는 하지 않았다.
4. 다음으로 구매페이지는 사용자가 주문 상품 정보와 사용자 입력정보를 한눈에 확인이 가능하도록 하기위해 레이아웃 구성에 많은 신경을 썼다.
모바일 화면은 작은 화면에서 최대한 상품 구성을 잘 볼 수 있도록 display:flex 속성을 이용해 수평으로 나열해주었고, 주문자 정보 또한 주문 상품 밑으로 레이아웃을 구성해 최대한 큰 화면으로 볼 수 있도록 했다.
큰 웹 화면에서는 한눈에 정보들이 확인 되도록 주문정보는 수직으로 배열, 주문자 정보는 상품 옆으로 배치하여 큰 이미지로 확인하고 스크롤을 하지 않고도 정보를 확인할 수 있도록 레이아웃을 구성했다.
5. 다음으로 고객지원 페이지를 통해 고객의 의견을 받을 수 있는 환경을 구현했다.
이 역시도 일반 사람들에게는 큰 문제가 없지만, 디지털 약자들은 인터넷에 글을 쓰는 과정이 익숙하지 않고 어려울 수 있기 때문에 먼저 회사 정보를 이메일과 전화번호로도 문의가 가능하게끔 명시해두었다.
6. 모든 이미지와 글자들은 마우스 hover시에 크게 확대되어 확인할 수 있도록 구성했으며, 누구나 이해하기 쉽도록 한글로 페이지를 구성했다. 모든 확대 css에는 transition과 transform 속성을 주로 사용했다.
따라서 위의 기능들을 통해 디지털 약자를 위한 브랜딩 사이트라는 목표를 달성할 수 있었고, node.js와 netlify를 활용해 페이지를 배포해 누구나 링크를 클릭하여 확인할 수 있도록 했다.
처음 프로젝트를 시작할 때는 기획한 모든 기능을 끝까지 완성해낼 수 있을지 의문도 들고 자신이 없었지만 팀원들과 서로 돕고 배우면서 기능을 하나씩 완성해갔다.
또한 풀리지 않는 오류를 만나면 리더님께 조언도 구하며 끝까지 오류를 해결해 하나의 완전한 결과물인 배포까지 완료할 수 있었다.
함께 고생하며 프로젝트를 끝까지 진행해준 팀원들 너무 고맙고 오류를 해결하는 과정에서 다양한 오류를 통해 더 성장할 수 있었던 프로젝트였다고 생각한다.
더 자세한 오류 해결 과정이나 개발 과정은 프로젝트 카테고리에 적어보겠다.
발표
프로젝트 발표를 처음하는 것은 아니어서 크게 긴장이 되거나 준비과정에 어려움이 있지는 않았다.
최대한 개발자로서 프로젝트를 구현한 과정에 대해 설명하고자 했으며, 기능 설명과 시연에 조금 더 중점을 두고 발표를 준비했었다.
발표를 할 때, 함께 교육을 듣는 다른 크루원들과 리더님만 있었기 때문에 조금은 편안한 분위기에서 발표할 수 있었다.
조금은 떨리기도 했지만 준비했던 대로 전달하고 싶은 내용을 모두 발표했던 것 같다.
물론 아쉬운 점이 없다면 거짓말이겠지만 첫번째 프로젝트를 목표한대로 마칠 수 있음에 감사했다.
이 프로젝트를 진행하며 막히는 부분이 생기면 오류에 대한 조언과 피드백을 주신 피비 리더님 감사합니다❤️
다른 크루원님들도 유쾌하게 발표를 진행해주셔서 듣고 이해하는 데 편했던 것 같다.
다들 너무 고생하셨습니다😊