티스토리 뷰
📖 목차
로컬 개발환경 및 배포환경에서 서비스를 사용할 때 발생하는 오류나 개선사항을 찾아보자.
찾는대로 계속 추가할 예정이다.
😮 오류
□
Flask 서버 연결 문제
- 로컬에서 도커로 flask 서버 돌릴 때는 정상 작동하는 걸로 보아 flask 배포에서 문제가 발생한 듯함.
- 배포한 사이트에서 기록하기는 전혀 안되고, 키워드 추출은 될 때 있고 안될 때 있음.
- 이거 해결 안되면 배포한 서비스에서 기록하기, 키워드 추출, 진료과목 추천 기능 안됨.
□
DB 변경 및 세팅
- 현재 DB연결이 백엔드 담당했던 팀원의 계정으로 되어있는데 앞으로 계속 리팩토링하며 사용할 거니까 내 계정으로 변경하고 병원, 진료과목 데이터 등 초기 데이터들 세팅하기
□
카카오톡 회원가입 / 네이버
- 현재 백엔드 담당했던 팀원의 계정으로 등록되어 있어서 서비스 이용 불가. 내 계정으로 변경하기
□
'병원 검색(추가) - 리스트로 병원 찾기'에서 인피니티 스크롤 제대로 작동하지 않음
- intersectionObserver API를 사용해 인피니티 스크롤을 구현한 것으로 알고 있는데 현재 제대로 작동하지 않고 브라우저 화면을 80%로 축소하면 정상적으로 작동함.
- 검색 목록의 감싸는 컨테이너가 브라우저 화면의 아래부분보다 살짝 밑으로 내려가 있어서 발생하는 문제인 것 같다.
□
서비스 소개에서 스크롤 다시 올라갈 때 종종 컴포넌트 사라지는 오류
- 서비스 소개 페이지를 쭉쭉 스크롤해서 내리다가 다시 스크롤을 올리면 종종 컴포넌트가 사라졌다가 나타나는 현상이 발생
- 서비스 내 다른 페이지는 페이지 자체의 스크롤을 없애도 컨텐츠들만 스크롤 되도록 wrapper로 감싸서 height: 100vh로 고정시켰는데 서비스 소개 페이지만 className을 통해 스크롤을 만들어주는 과정에서 뭔가 오류가 발생하나?
- 아니면 ScrollTrigger로 애니메이션을 적용하는 과정에서 발생하는 오류일 수도
□
소셜 회원가입 시 제공 항목 동의 화면에서 취소 버튼 클릭하면 오류 발생
💪 개선사항
□
[현재] 소셜 회원가입 선택 후 또 이메일 인증 과정을 하도록 되어있음
[개선] 소셜 회원가입 시 이메일 인증 과정 제외 (아래 이슈와 함께 작업하면 소셜 회원가입 과정은 아예 변경하기)
□
[현재] 현재 이메일이 중복되어도 회원가입 유형(일반/네이버/카카오)이 다르다면 가입이 가능
[개선] 회원가입 시 이미 계정이 있는지 확인하는 절차 추가 및 통합 로그인 관련 기획적인 부분 고려 필요
□
[현재] 현재 내 브라우저에서 네이버/카카오에 로그인 되어있을 경우 바디토리 내 "유저 정보 조회 중.." 이후 서비스 동의 화면만 나오는 동작이 애매함. 수집된 이름, 생년월일 등이 회원가입 제일 마지막 단계에 나오는 것이 명확하지 않은 동작인 것 같음. (아래 더보기에 있는 동작영상 참고)
[개선] 일반 회원가입 시 회원가입 과정은 현재를 유지하고, 소셜 회원가입 과정은 아예 변경하기
□
[현재] '병원 검색(추가) - 리스트로 병원 찾기'에서 검색어 입력 후 검색 시 검색바가 바로 초기화
[개선] 검색버튼 클릭 후에도 검색어 유지하기
이 부분 담당했던 팀원이 의도적으로 이렇게 구현한 것일 수도 있지만 검색 후 내가 어떤 키워드로 검색했는지 검색바에 키워드가 그대로 있는 것이 좋을 것 같아서 검색 시 키워드를 초기화 하지 않는 것으로 수정할 예정이다.
□
[현재] '병원 검색(추가) - 리스트로 병원 찾기'에서 검색할 때 해당 검색조건에 만족하는 병원들 중 이미 내 병원으로 추가해놓은 병원들이 상단에 노출
[개선] 이미 내 병원으로 등록된 병원은 검색목록에서 제외하기 + 병원 관리하기 페이지에 내 병원 목록 내 검색 기능 추가하기
이 부분은 프로젝트 진행 당시에도 의견차이가 있었던 부분이다.
원래 기획에서는 내 병원으로 추가된 병원은 검색목록에서 조회되지 않게 하고, 병원 관리 페이지에서만 내 병원을 조회/삭제할 수 있도록 기획하였다.
하지만 개발 진행 중 다른 의견으로 검색페이지에서도 내 병원을 상단에 노출해서 내 병원 관리(조회/삭제/추가)를 검색 페이지에서도 진행할 수 있도록 하는 것이 사용자에게 더 편의성을 줄 수 있지 않겠냐는 의견이 있었고 다수결로 인해 이 방식으로 결정하고 개발을 진행하였다.
하지만 검색 목록 상단에 내 병원을 노출할 경우, 아래 상황처럼 내가 '서울'이라는 키워드로 검색을 했을 때 이미 서울이라는 키워드가 포함된 내 병원들이 다수 존재한다면 새로운 병원을 추가하려고 검색을 했음에도 스크롤을 한참 내려야 내 병원이 아닌 병원에 대한 검색목록을 볼 수 있다.
현재 병원관리p, 병원추가p 모두에서 병원에 대한 조회/추가/삭제할 수 있게 한 것처럼 사용자가 같은 기능을 여러 페이지에서 조작할 수 있도록 제공하여 페이지의 이동을 줄이는 것도 사용자 경험을 좋게 하는 방법 중 하나일 것이다.
하지만 나는 여러 페이지에 동일한 기능을 중복으로 넣어서 화면이 복잡해지고 위의 상황처럼 불필요한 스크롤이 발생하는 것보다 페이지 이동이 필요하더라도 페이지에 목적에 맞는 기능만 제공하고, 필요한 컴포넌트만 보여주는 것이 사용자가 서비스의 흐름을 이해하고 사용하는데 더 도움을 줄 것이라고 생각한다.
그래서 리팩토링을 통해 병원 추가p에서 이미 내 병원으로 등록된 병원은 검색에서 제외, 검색 시에는 새로운 병원 목록만 검색되고 추가할 수 있도록 변경하고, 내 병원에 대한 관리는 병원 관리p에서만 가능하도록 수정하려고 한다. 그리고 내 병원 관리p 내에서 내 병원 목록이 많아지면 사용자가 원하는 병원 찾는데 어려움이 있을 수도 있으니 검색 기능을 추가할 예정이다.
□
[현재] 프로젝트 막판에 급하게 반응형을 진행하느라 미흡한 부분 상당함
[개선] PC, 태블릿, 모바일, 와이드 모니터까지 다양한 뷰포트에서 원활하게 서비스를 사용할 수 있도록 수정할 예정
□
[현재] 기록확인하기 페이지에서 대시보드는 최근 3개월간의 통계만 보여주기 때문에 최근 3개월간 기록이 없다면 아예 기록이 없는 것과 동일한 컴포넌트를 노출
[개선] 새로 가입하여 기록이 아예 없어서 통계가 없는 사용자와 기록 자체는 있지만 최근 3개월간의 새로운 기록이 없어서 통계가 없는 사용자에게 보여지는 컴포넌트 구분하기 (최근 3개월간 새로운 기록이 없는 사용자의 경우, 다시 매일매일 기록을 시작해보자고 권장하는 뉘앙스의 컴포넌트 구성하여 보여주기)
□
[현재] 기록 확인하기p 차트기록들은 페이지네이션 없이 모든 기록을 한번에 불러옴
[개선] 기록이 많아졌을 때를 생각해서 페이지네이션 or 인피니티 스크롤 적용하기. 어떤 것이 더 적합할 지는 생각해보기
□
[현재] 병원 관리하기p도 마찬가지로 페이지네이션 적용 안되어 있음
[개선] 페이지네이션 or 인피니티 스크롤 적용하기. 어떤 것이 더 적합할 지는 생각해보기
□
[현재] 컴포넌트 렌더링이 느릴 때가 종종 존재
[개선] 렌더링 최적화 시도해보기
□
[개선] 컴포넌트 구조 개선하기 (아토믹 패턴 등 고려해보기)
'사이드 프로젝트 > 🩺 바디토리 : 건강기록 및 병원추천 웹서비스' 카테고리의 다른 글
| 개발환경에서 소셜로그인 과정 오류 수정하기 (0) | 2023.04.24 |
|---|---|
| Next.js 프로젝트 배포하기 (0) | 2023.04.15 |
| 프로젝트 후기 및 리팩토링 계획 (1) | 2023.04.14 |
| 바디토리 서비스 기획 과정이 궁금하다면? (0) | 2023.03.31 |
| 토리놈... (0) | 2022.12.14 |
프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그