발표영상 바로가기
발표자료 바로가기
팀 노션 주소 바로가기
프론트엔드 GitHub : 바로가기
백엔드 GitHub : 바로가기
DESIGNER
- 윤수현
FRONTEND
- 박수봉 (팀장)
- 지송이
BACKEND
- 김민주 (부팀장)
- 백현명
- 서다빈
- 가끔 급하게 카카오톡이나 메모장에 링크 혹은 메모를 붙여넣고 나중에 가져다 쓰신 적이 있지 않으신가요?
- 모음(moum)은 그런 메모와 링크 혹은 그 이외의 간단한 정보들을 따로 모아서 빠르게 추가하고 보관할 수 있다면 어떨까? 라는 생각에서 나왔습니다
프론트엔드에서는 프론트엔드가 백엔드보다 인원이 적은 점을 고려하여 빠른 작업속도에 초점을 맞추어 기술을 선정하게 되었습니다. 각 프레임워크의 기술 선정 이유는 아래에서 확인할 수 있습니다.
React
- 프론트 프레임워크 중에서 가장 많이 사랑받고 있는 프레임워크이며, 인터넷에서 더 많은 레퍼런스를 참고할 수 있고, 타 프레임워크에 비해 javascript에 대한 더 많은 이해도를 요구하기 때문에 학습용으로 더 적합하다 판단하여 사용했습니다.
Axios
- React에서 가장 많이 사용되는 HTTP 비동기 통신 라이브러리로, fetch api와 다르게 라이브러리이기 때문에 더 많은 편의 기능을 제공해주어 사용했습니다.
React Query
- 기존에 리덕스 툴킷을 사용하여 서버 상태관리와 전역 상태관리를 하였는데, 프론트 인원이 더 적어 백엔드의 구현속도에 따라 가기 위해 더 빠르게 작업할 방법을 찾다 서버 상태관리를 대신 해주는 React Query를 알게 되었습니다. 알게 된 이후, 빠르게 서버 상태 관리 코드를 전부 리액트 쿼리로 교체하고 작업하게 되었습니다.
Recoil
- 더 빠른 작업 속도를 위해 리액트 쿼리를 도입하고 나서 전역 상태 관리에 대해서도 고민하게 되었습니다. 서버 상태 관리가 리액트 쿼리로 빠지면서 관리해야 할 전역 상태의 크기가 작아졌고, 그에 따라 전역 상태를 리덕스로 관리하는 것보다 더욱 쉽게 관리할 수 있는 전역 상태 관리 라이브러리를 사용해도 되겠다고 판단하였습니다. 그래서 useState와 같이 전역 상태를 관리할 수 있는 Recoil이라는 전역 상태 관리 라이브러리를 알게 되었고 적용하게 되었습니다.
Styled Components
- CSS-in-JS의 대표적인 라이브러리로 컴포넌트 자체에 바로 CSS를 작성할 수 있기 때문에 css, sass 파일을 작성하여 임포트하는 것보다 작업 속도와 유지 보수 측면에서의 이점을 가지고 있어 사용하게 되었습니다.
tailwind CSS
- styled-components로 작업을 진행하다가 tailwind CSS라는 것을 알게 되었습니다. tailwind CSS를 사용하면 css 작업 속도가 훨씬 빨라진다는 점을 알게 되었지만, styled-components를 이미 많이 작성한 상태였습니다. 여기서 twin.macro를 사용하면 두개를 병행하여 사용할 수 있고 서로의 장단점을 어느정도 상충할 수 있다는 것도 알게 되어 바로 적용하게 되었습니다.
- 2022년 6월 24일 ~ 2022년 08월 05일
펼치기
홈
로그인
나의 모음
전체 모음
다른 사용자 모음
발표영상 바로가기 (00:42 ~ 02:47)
- 일반 로그인
- 소셜 로그인 (구글)
- 회원가입
- 모음 CRUD
- 조각 CRUD
- 모음 및 조각 검색
- 유저 팔로우, 언팔로우
- 팔로우한 유저 목록
- 모음 스크랩, 스크랩한 모음 목록 보기
- 다른 유저의 조각을 내 조각으로 저장하기
- 빠른 조각 추가시 하단 플로팅 박스로 상세 작성하기 가능
- 액세스 토큰 만료시 리프레시 토큰을 사용한 토큰 재발급
- 사이트 설명이 너무 부족해요
- 원하는 모음으로 조각을 저장하는 기능을 못 찾았어요
- 어떻게 기능을 써야할지 감이 잘 안와요
- 스크랩을 어디서 해야할 지 모르겠어요
- 조각 생성을 어디서 하는지 잘 모르겠어요
- 메모, 링크 등록을 어디서 하는지 한참을 찾았어요
- 스크랩은 어떻게 하는 건지 말 모르겠어요
모음 페이지 사용법에 대한 설명 팝업 제작
- 링크 저장하기가 좀 더 직관적으로 잘 보였으면 좋겠어요
- 모음은 쉽게 만들었는데 조각이 접근이 조금 어렵다는 느낌이 들었어요
- 조각을 만들 때 모음을 만드는 것처럼 어떤 모음에 들어갔을 때 똑같이 + 버튼으로 조각을 생성할 수 있었으면 좋겠어요
조각 목록에 조각 추가 버튼 제작
- 회원가입을 먼저 본 이후에 소셜 로그인이 있는 걸 알았어요. 소셜 로그인이 좀 더 잘 보였으면 좋겠습니다.
소셜 로그인 버튼 컬러 수정
- 랜딩 페이지를 중간 이상 내렸을 때 최상단으로 갈 수 있으면 좋을 것 같아요
맨 위로 바로가기 버튼 추가
- 인증번호나 조각을 생성했을 때 현재는 dialog 형태로 (확인 팝업 형태) 완료되었다고 알려주는데 매번 확인 버튼을 눌러야 해서 조금 불편한 느낌을 받았습니다. toast 메세지 같은 형태로 간단하게 유저가 알 수 있도록 해주고 매끄럽게 이용해주도록 하면 더 좋을것 같아요
각 확인 팝업 장면에서 확인 팝업 대신 토스트 메세지 띄우기
- 로그인 이후 랜딩 페이지가 아닌 나의 모음이나 전체 모음으로 페이지 이동하는게 더 좋아보입니다.
로그인 이후 홈 화면으로 이동 -> 나의 모음으로 이동되게 변경
피드백 개선 전 설문조사 (3일간 73개의 응답중 52.3% 만족)
피드백 개선 후 설문조사 (1일간 20개의 응답중 90% 만족)
