밥약 프로젝트4 시간 선택 UI 디자인 변경과정(UI UX) [문제점 제기]모바일 화면에서 time slot 방식은 작은 화면에서 불편함을 발생변경 디자인에서 날짜 부분에서는 캘린더가 없어져 날짜를 선택하기 힘들다. → 선택할려면 날짜 이동버튼을 계속 클릭해서 이동후 선택해야한다.궁극적으로 사용자가 시간을 한눈에 파악하기 힘들고 선택하기 힘들다는 문제점을 제기했을때 time slot select하는 방식은 날짜와 시간 정보가 시간 박스에 담아져있는것이 아니라서 보기가 불편할 것 같다는 생각이 들었다.최상단 행 왼쪽 열을 확인하면서 선택해야함 ⇒ 그래서 시각적인 불편함을 없애고 시간을 한눈에 알아볼 수 있고 직관적으로 선택할 수 있는 시간 선택 UI를 조사해봄. 타 사이트 시간 선택 화면을 알아본 결과 시간 박스를 드래그하는 time slot select 형식보다는.. 2024. 7. 5. 시간 선택 라이브러리 react-schedule-selector 분석 사용할 라이브러리 react-schedule-selectorGitHub - bibekg/react-schedule-selector: A mobile-friendly when2meet-style grid-based schedule selector GitHub - bibekg/react-schedule-selector: A mobile-friendly when2meet-style grid-based schedule selectorA mobile-friendly when2meet-style grid-based schedule selector - bibekg/react-schedule-selectorgithub.com 기본 사용법기본 사용법은 selection과 onChange props를 제공하는 것입니다. .. 2024. 6. 19. 시간 선택 UI 변경 - 라이브러리 조사(react-schedule-selector) [이슈 발생]사용자 피드백으로 약속을 설정하기 위해 달력에서 날짜를 클릭하여 시간을 선택하는 과정이 필요한데 이때 시간 선택 UI가 불편하다는 피드백을 받음.그래서 시간 선택 UI를 변경하기 위한 라이브러리 조사를 시작함 [고려 요소]무료로 사용할 수 있는 라이브러리 : 무료 라이브러리를 우선으로 선택했습니다.이해하기 쉬운 코드 및 변경 용이 : 코드가 직관적이며, 사용자가 쉽게 수정하고 커스터마이징할 수 있는지 확인했습니다.약속 요청 UI로의 적합성 : 시간 선택 UI로 사용하기에 적합한지 평가했습니다. 1. react-schedule-selectorGitHub - bibekg/react-schedule-selector: A mobile-friendly when2meet-style grid-based .. 2024. 6. 17. 배포시 console.log 지우기(vite 플러그인,JS) [ 이슈 설명 ]로컬 환경에서는 디버깅하기 위해서 콘솔 로그가 필요하고 사용자가 보는 입장에서는 console이 뜨지 않아야함.=> 실제 배포할 때엔 민감한 정보가 포함되어있을 수 있으므로보안을 위해서 콘솔창을 비워두는 것이 좋음, 시각적으로 좋을 것 같음. [ 해결 방법 ] 1️⃣ 설치할 패키지 vite-plugin-remove-console yarn add vite-plugin-remove-console -D 2️⃣ Vite 설정 파일 수정 그 다음, vite.config.js 파일을 수정하여 vite-plugin-remove-console을 추가// 위의 설정은 배포 환경에만 적용하고, 개발 환경에서는 그대로 console.log를 사용// 조건부로 플러그인을 적용.import { defin.. 2024. 6. 16. 이전 1 다음
