Origin 프로젝트는 제가 정말 좋아하는 포트폴리오 프로젝트입니다.
컨셉, 디자인, 백엔드, 프론트엔드, 문서까지 직접 기획하는 첫 번째 프로젝트입니다.
배포도 하고 컨셉도 직접 기획했지만 내 모든 걸 쏟아부은 프로젝트는 아니었어요.
이제 MVP(최소 기능 달성)에 가깝게 만듭니다.
그래서 아직 아르바이트를 하고 계시거나, 혼자 공부하는 것과 하는 것의 경계가 너무 복잡하다고 느끼시는 분들은 계속 사이트를 많이 만들어서 밀어붙일까 말까 요즘 고민을 많이 하고 있습니다.
프로젝트를 새로운 기술과 UI로 꾸준히 마이그레이션, 업그레이드, 변경하는 것이 더 매력적일 것 같아서 처음부터 계획을 바탕으로 아이디어를 실현하기 위해 이번 프로젝트를 기반으로 실제 놀이터처럼 만들 계획입니다.
내 모든 생각은 내가 다시는 저지르지 않을 실수와 내가 신인이라면 해야 할 일에 대해 항상 처음부터 끝까지 노력하고 있습니다.
그래도
내 생각 정리 여러 측면에서 개선에 대해 생각해보고 글을 써보고 싶어서 이렇게 글을 씁니다.
1. 문서 진행
문서화를 위해 세 가지를 고려했고 실제로 적용했습니다.
오직
내가 아는 모든 것을 적용한 것은 아니지만 이제는 그 분야의 모든 것을 바꿀 것입니다.
1-1) 디자인 개요 및 컨셉
개념 브리핑은 Google 문서를 사용하여 간결하게 작성됩니다.
실제 사용자를 위해 해당 기능을 구현한 것이 아니라 평소처럼 생각했을 뿐입니다.
원하는 아이템으로 꿈을 그리게 도와주는 네트워크만들고자 하는 매우 추상적인 구현의 경우
일반적인 웹 전자상거래 사이트를 장바구니에 담아서 하고싶은게 많이 생각나서 디자인 아웃라인만 썼는데, 디자인과 컨셉트 아웃라인에서 쉽게 구현될 수 있을 것 같은 것들을 위주로 했습니다.
마음먹고 전달합니다.
이번 오버뷰 개선 작업에서는 이전에 한번 대략적으로 쓴 적이 있습니다.
사용 사례 다이어그램이 포함된 개발 기술 설계 문서를 추가할 생각입니다.
1-2) 피그마
figma 파일 자체가 훌륭한 디자인에 대한 설명이자 문서라고 생각합니다.
그를 위한 와이어프레임이자 무드 보드이기도 합니다.
첫 시도라 이 디자인을 선택한 이유가 아쉽고, 내가 하는 일에 대한 정의는 나름대로 성실하다.
구성 요소 시스템과 같은 것을 적극적으로 사용할 수 없습니다.
는 제가 만들면서 배우고 익힌 시스템이라 그 부분을 좀 더 유지하기 쉽게 바꿀 생각입니다.
사실 디자인은 2배정도 시간이 걸려서 홈페이지만 디자인하고 나머지 와이어프레임은 다 하는데 계속 배우면서 다양한 UI, UX를 추가로 적용할 생각입니다.
1-3) 테스트 코드
테스트 코드 자체는 잘 문서화되어 있고 완벽하게 작동합니다.
테스트 코드는 진행중인 작업이었을 텐데, 이 글부터 업그레이드 할 때 잠시 멈출 생각인데 잘 모르겠습니다.
조삼모사 인것 같아요
현 사업이라고 하면 테스팅하면서 pr을 뽑아서 이렇게 고급화하는 것이 맞는 것 같지만, 리액트 테스팅을 배우는 입장에서는 모든 것을 업그레이드하는 것이 편하고, 학습하고 테스팅하는 것이 맞는 코드인 것 같고 테스팅하는 것 같다.
react-testing-library 테스트는 사실 지금은 좀 녹슬었지만 익숙해지면 작년에 jest로 한 단위 테스트만큼 힘들게 끝날 것 같아서 서두르지 않을 것 같습니다.
.
1-4) 스토리북
실제로는 일종의 반반이고 어떻게 될지 모르겠습니다.
디자인 시스템을 구축해서 보여드리려고 생각중인데 지금의 순서가 원래대로라면 일단 머리에 동화책을 만들어서 만들어봐야지 하는 생각이 들긴 한데, 나중에 버티게 만드는게 아닐까 싶습니다.
동화책.
흠 마당에선 상관없을지 모르겠지만 그냥 테스트 코드를 포팅하는 건데 지금 같이 배우는 입장에서
2. 개발 및 디자인 추진
이탈률이 높은 것으로 판단되었습니다.
아니요, 이탈률이 높지 않고 100%입니다.
사실, 코드에는 볼 것이 있을 수 있지만 웹 사이트 자체에는 볼 것이 없습니다.
솔직히 빨리 포폴 만들어서 포폴 넣고 싶은 조바심 포함 에고가 있어서 누가 봐도 사이트 자체가 누군가에게 서비스로 보인다기 보다는 제대로 된 연습 포폴 사이트에 가깝습니다.
이러한 점을 모두 고려하여 개선하고 싶습니다.
다른 사람의 협업 프로젝트를 보면서 면접관에게 그러한 서비스가 어떻게 제공될까요?
지금 생각해보면 그 사이트가 지금 그다지 매력적이지 않은 것 같습니다.
결제를 수반하는 서비스는 아니지만, 그렇게 하는 것을 고려하고 있습니다.
그러나 솔직히 말해서 이것에 대한 나의 의견도 다소 불안정합니다.
취업에서 흔히 사용하는 것들을 고민해왔으니 핵심기술을 중심으로 연구하고 생각하고 구현해보겠습니다.
그냥 하고 싶은 기능을 구현해야겠다는 생각이 듭니다.
암튼 초보적인 얘기만 들어서 API를 쓰든 뭐든 상관없어요.
2-1) 디자인
2-1-1) 사용자 인터페이스 변경
홈페이지 디자인만 했고 만족스럽긴 한데 아직 세련되고 멋진 UI가 부족한 것 같아요.
물론 슬라이더와 같이 가장 작은 부분만 의도적으로 디자인하려고 했고, 그리드 디자인으로 UI를 디자인했습니다.
상품의 수가 너무 적고, 메인 페이지가 메인 페이지와 동일합니다.
슬라이더 외에는 아무것도
바닥글과 같은 부분을 추가할 수 없어서 제거하고 삭제하기로 하였으나, 잠깐 반성하고 기능이 없는 모의 바닥글을 추가하여 이를 알고 있음을 보여야 하나 하는 생각이 들었습니다.
2-2) 개발
2-2-1) Next.js로 마이그레이션 계획
프로젝트는 typeScript와 react를 기반으로 하고 있는데 현재 Next.js를 배우는 중이라 Next.js로 옮길까 생각중입니다.
Next.js 전에는 사실 node를 먼저 배우고 next 대신 Pokemon api를 사용하고 중간에 full-stack node react 앱을 만들었습니다.
React에서 TypeScript를 처음 사용하는 불편함을 기억하기 때문에 TypeScript를 Node에 적용하지 않으려고 합니다.
프런트엔드와 백엔드는 모두 js이지만 프런트엔드는 typescript이고 백엔드는 raw javascript입니다.
마이너스라고 생각하고 우테코와 여러모로 겹치는 부분이 있어서 흐릿하지만 이번에는 그때를 반성하고 새로운 걸 계속 파헤치기보다는 이 프로젝트 안에서 다 해보려고 합니다.
2-2-2) 자기실현을 배경으로
이제 백엔드는 firebase 기반으로 구현되지만 mongodb를 사용할 때보다 firebase에 훨씬 더 의존합니다.
nextJs로 마이그레이션하는 동안 Node 및 mongodb에 대한 이전 학습을 적극적으로 사용하여 등록 및 로그인을 통해 기능을 추가할 계획입니다.
2-2-3) 사용자 경험
기능적으로는 실제로 고칠 것이 많습니다.
프론트엔드 개발자로서 해당 영역의 UI를 업데이트하면서,
또한 사용자 편의성 향상을 위한 업데이트도 계획하고 있습니다.