Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. :
(1) gitHub - README 및 전체 코드 보러 가기
(2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅)
프로젝트를 마무리하며..
이렇게 5일 간의 솔로 프로젝트의 대장정은 일단락되었다. (하지만 회고 포스팅을 한 달 뒤에 작성하는 것은 비밀이다.) 요구사항 명세서와 피그마 디자인 목업만 달랑 들고, 5일 동안 정말 처음부터 끝까지 프로젝트를 구축해본 것은 정말 밀도있고 귀한 경험들이었다.
아쉬웠던 점 (PROBLEM)
아쉬웠던 점은 UI/UX적 요소(반응형 디자인)에 집중하느라 로직에 대한 고민을 깊이 하지 못했다는 것이다.
- 예를 들면 이번 프로젝트에서는 무한 스크롤에 맞춰 창의 너비에 따라 추가되는 아이템의 개수를 깔끔하게 조절되도록 하는 UI/UX나, 북마크 아이콘을 클릭했을 때의 애니메이션이나, 모달창이 뜬 상태에서 북마크 아이콘을 클릭했을 때 모달이 닫히지 않도록 하는 디테일적 UI/UX에 신경을 많이 썼다.
- 따라서, 컴포넌트를 어떻게 렌더링할 것인지 등에 대한 고민을 많이 하지는 못했던 것 같다.
하지만 여전히 나에게는 우수한 사용자 경험은 코드를 짜는 데에 있어서 중요한 목표이고, 이런 경험이 쌓이면서 UI/UX 디테일적 요소를 빠르게 처리하면서 동시에 로직에 대한 고민을 할 수 있다는 생각도 든다.
잘했던 점 (KEEP)
잘했던 점은 어찌 됐든 기한 내에 내가 구현하고자 했던 기능들을 다 구현했다는 것이다.
- UI/UX에 집착하기는 했지만 명세서에 요구되어 있던 북마크된 아이템을 localStorage에 저장하고 redux/toolkit으로 데이터를 관리하는 로직 등 필요한 로직은 다 구현했다.
사용자 경험에 있어서는 내가 이 앱을 사용한다고 생각했을 때 아마추어 느낌이 들지 않게끔 어느 정도 구현을 했다는 생각이 든다.
- 메인 화면이 딱 viewport 화면에 100% 맞춰지게 했다.
- 마우스를 갖다댔을 때 필요한 요소에는 다 스타일링을 해주었고, 모달창이 열렸을 때와 드롭다운이 열렸을 때도 바깥 부분을 클릭했을 때 닫히도록 디테일한 부분에서 많이 신경을 썼다.
- 마우스 휠만 내려도 무한 스크롤이 가능하도록 구현했고, 스크롤 UI는 보이지 않게 조정했다.
반응형 구현에 대해서 어렵고 막연한 개념으로만 알고 있었는데, 이번에 접해보면서 어? 별거 아니었네? 생각을 들게 되었다.
- 메인 프로젝트 전 꼭 필요했던 시간이 아니었나 하는 생각이 든다.
전반적인 사용자 경험
반응형에 따른 무한 스크롤 아이템 추가
개선할 점 (TRY)
메인 로직을 잘 짜는 것이 우선이다!
- 사실 이번 프로젝트에서는 CSS나 UI/UX 부분을 만지는 것이 재밌어서 더 시간을 들인 것이기도 하다.
- 앞으로 프로젝트에 들어가기 전에 수도 코드와 깊은 고찰을 통해 어느 정도 어떻게 로직을 구현할까에 대한 큰 그림을 우선 순위로 먼저 해결하고, 나머지 디테일한 부분에 집중해야 겠다는 결론을 얻었다.
우리 기수부터 처음 시작된 프로젝트여서 레퍼런스는 어디에도 찾아볼 수 없었다.
필요한 기능과 로직에 대해서 구글링해보고, 오로지 나의 판단으로 코드를 작성하여 기능을 하나 하나 추가해가며
완성한 솔로 프로젝트의 가치는 무엇과도 견줄 수 없다.
"Connecting the dots"
4개월 동안 배웠던 것들, 들어만 본 스택과 개념들 등
뿔뿔히 흩어져있었던 점들을 이어 붙이며, 그리고 그걸 기반으로 해서 새로운 점들을 또 연결하고 연결하면서
정말 단기간에 비약적으로 성장할 수 있었던 정말 귀중한 경험이었다.
'📌 TOY-PROJECT > 2305 쇼핑몰 웹앱 (북마크 기능)' 카테고리의 다른 글
README 작성하기 (0) | 2023.06.07 |
---|---|
redux/toolkit(RTK) / 토스트 애니메이션 자연스럽게 구현하기 (0) | 2023.05.16 |
RTK Query (0) | 2023.05.15 |
헤더 컴포넌트의 DropDown 메뉴 만들기 (0) | 2023.05.14 |
Next.js 13 - StackoverFlow에 질문글을 올리다. (1) | 2023.05.12 |