🔗 여정 기록 서비스 ONDe 회고 1/2
프로젝트 소개, 기술 스택, 요구사항 명세, 참여 부분, 와이어프레임🖋 UI 디자인
와이어프레임 제작과 마찬가지로 UI 디자인 또한 난생 처음이었는데 UX를 고려하는 게 정말이지 쉽지 않았다. 그리고 시간이 촉박했던 관계로 디자인 작업을 끝낸 후 개발에 들어간 것이 아니라, 개발하면서 필요한 게 생기면 그때그때 작업하는 식으로 해서 재사용 가능성을 많이 고려하지 못한 게 아쉽다. 다음번엔 아쉬운 부분들을 개선하여 반응형으로 구현해볼 계획이다.
와이어 프레임부터 디자인까지 피그마를 이용하여 직접 제작하고, 다른 팀원들의 의견을 반영해 수정도 하며 디자이너의 입장에서 생각하고 고민한 부분이 많았다. 추후에 디자이너와 커뮤니케이션할 때 이번 경험이 도움이 많이 될 것 같다.
🔗 Link to Figma
⚙️ 구현 기능
1. 구글 로그인
구글 로그인을 통해 회원가입 및 로그인이 가능하다.
최초 로그인 시 이메일과 이름을 받아온 후 추가정보를 입력받기 위해 회원가입 페이지로 리다이렉션 되도록 구현하였다.
2. 사진의 메타데이터를 활용한 촬영 시간, 장소 추천
exifr이라는 라이브러리로 사진의 메타데이터를 추출하여 시간과 위치(위도, 경도) 정보를 바탕으로 촬영한 시간과 해당 위치 주변의 장소들을 추천해준다.
3. 소셜 기능
댓글과 좋아요 기능을 이용하여 다른 유저와 소통할 수 있다.
4. 키워드, 카테고리 검색
두 가지 종류의 카테고리 필터링과 키워드 검색을 이용하여 원하는 성격의 여정만 찾아볼 수 있다.
헤더에 서치바를 두어 어떤 페이지에서든 검색이 가능하도록 구현하였다.
5. 나의 여정 목록, 다른 유저의 여정 목록
내가 작성한 글 뿐만 아니라, 다른 유저가 작성한 글도 모아볼 수 있다.
나의 여정 목록은 마이페이지 팝오버를 통해, 다른 유저의 여정 목록은 해당하는 유저의 닉네임을 클릭하여 볼 수 있다.
6. 북마크 기능
메인 페이지, 상세 조회 페이지, 북마크 목록 페이지에서 북마크 추가 및 제거가 가능하며, 저장한 여정 목록 페이지에서 북마크한 여정들만 모아볼 수 있다.
7. 편리한 이미지 업로더
클릭과 드래그앤드롭 두 가지 방식으로 이미지를 추가할 수 있으며, 추가 및 삭제가 간편하다.
8. 무한 스크롤
스크롤을 빠르게 내리니 무한 스크롤이라는 게 잘 안 느껴져서 아주 천천히 내리며 찍어보았다!
page size를 15로 하려고 했는데, 무한스크롤 테스트 하려면 45개 이상은 올려야 제대로 보일 것 같아서 과감하게 6개로 줄여버렸다.
9. 동선 확인 및 장소 카테고리 필터링
왼쪽의 지도에서 날짜별 동선을 확인할 수 있어서 여행 코스를 한 눈에 볼 수 있다. 다른 유저들은 여행 계획을 세울 때 이 동선을 참고할 수 있다. 또한 카테고리 필터링이 가능하여 음식점, 숙박 등 원하는 성격의 장소만 찾아볼 수 있으며, 마커를 클릭하면 해당 장소 글로 이동할 수 있다.
✏️ 느낀 점
좋았던 점
1. 팀워크
팀원 모두 열정이 넘치는 모습에 동기부여가 많이 됐고, 커뮤니케이션 스킬도 훌륭해서 그 흔한 트러블 한 번 없이 여기까지 올 수 있었다고 생각한다. 좋은 팀원들을 만난 것이 가장 큰 복이었다!
2. 디자인 경험
우리에겐 기획자도 디자이너도 없었으므로 모든 것을 스스로 해내야 했다. 웹 디자인은 한 번도 해본 적 없었지만, 다른 분야 디자인 경험이 있는 내가 디자인을 전담하게 되었다. 피그마를 이용하여 와이어 프레임 제작부터 디자인 작업까지 직접 경험해본 것이 추후에 디자이너와 커뮤니케이션 할 때 큰 도움이 될 것 같다.
3. 여러 라이브러리 사용 경험
무한 스크롤을 위한 react-intersection-observer, 드래그 앤 드롭으로 파일을 받을 수 있게 해주는 react-dropzone 등 여러가지 외부 라이브러리를 사용해볼 수 있어 좋았다. 여기서 그치지 않고, 라이브러리의 도움을 받았던 기능들을 라이브러리 없이 구현해보며 로직에 대한 이해도를 높이고 싶다.
4. Axios 커스터마이징
프로젝트 초반에는 axios를 사용할 때마다 baseURL을 작성하고, 로그인 여부를 확인하여 헤더에 토큰 값을 넣는 등 같은 코드를 계속 작성해서 보기에도 쓰기에도 불편함을 느끼고 있던 중, Axios 인스턴스를 생성해서 커스터마이징할 수 있다는 사실을 알게 되었다. 새로운 인스턴스를 생성하여 baseURL을 작성해주고, interceptor에서 토큰을 관리하도록 해주니까 작성해야 할 코드가 줄고 에러의 원인과 위치도 명확해져 한결 편했다.
아쉬운 점
1. 알림 기능
좋아요나 댓글이 추가되어도 바로바로 알 수가 없어 아쉽다.
관심 키워드 등록 기능이 추가되어도 좋을 것 같다.
2. 모듈화
반복되는 코드를 조금 더 적극적으로 모듈화하여 재사용하지 못한 것이 가장 아쉽다.
다음 프로젝트에서 가장 신경쓰고 싶은 부분! 커스텀 훅도 만들어봐야지!
3. 사용자 경험 측면
로딩 스피너가 없어 로딩이 되는 동안 사용자는 빈 화면만 보고 있어야 하는 등, UX적으로 부족한 부분이 많이 보인다. 사용자 경험 향상은 개발자도 함께 고민하고 노력해야 하는 부분이라 생각한다. 어떻게 하면 사용자에게 조금 더 나은 경험을 제공할 수 있을지 고민하고 공부해봐야겠다.
4. 반응형인 듯 반응형 아닌 반응형 같은 너..
반응형을 염두에 두고 있었기 때문에 px 단위 사용을 최소화하고 em이나 vw/vh, % 같은 단위를 많이 사용했는데 시간상 반응형까지 구현하기는 어려웠다. 모바일까지 작업이 되었다면 좋았을텐데 하는 아쉬움이 남는다. min-width로 최소 값을 주는 등 여러가지 방법으로 해결해보려고 노력했지만 아직 불편한 부분들이 눈에 보인다. 다음 프로젝트는 기획을 탄탄하게 잡고 시작해서 모바일까지 제대로 구현해보고 싶다.
5. 테스팅
유닛 테스트를 위한 jest, UI 테스트를 위한 storybook 등 여러가지 테스팅을 해보고 싶었는데, 아쉽게도 이번 프로젝트에서는 경험해보지 못했다. 다음 프로젝트에서는 꼭 테스트 해보고, 성능 테스트까지 해볼 계획이다.
6. 에러 핸들링
이번 프로젝트는 사실상 에러 처리가 거의 되어 있지 않다고 볼 수 있을 것 같다. 다음 프로젝트 시작 전까지 react-query 등 에러 핸들링을 위한 여러가지 방법을 찾아보고 공부하는 것이 가장 큰 목표다.
마무리
좋았던 점도 많았는데 역시 아쉬운 점이 뇌리에 깊게 박혔는지 줄줄이 써내려가도 끝이 없다. 서술한 것 외에도 전역 상태 관리, 디자인 패턴 등 부족하고 아쉬운 부분들이 많은데, 이번 경험을 계기로 확실히 어떤 것들이 부족한지 알게 됐으니 그것만으로도 중요한 걸 얻은 것 같아 기분이 좋다. 공부하고 싶은 것들이 너무너무 많다!
