Level Up Life (투두 앱) 만들기_____(2)

석원·2024년 1월 15일

LevelUpLife

목록 보기
2/4
post-thumbnail

와이어 프레임

현재 계획한 대로 화면을 그렸을 때는 7개의 화면이 필요하다는 생각이 들었고, 현재 7개 페이지에 대해서 작업한 결과물과 페이지별 상세 기능을 정리하려고 합니다.


홈 화면

로고와 앱 타이틀이 보여지고 2초 내외에 시간에 화면이 사라지면서 로그인 화면이 뜨도록 할 계획입니다.


로그인 화면

기본로그인은 이메일 방식으로 진행합니다.
가입을 원하지 않을경우 비회원 로그인으로 진행할 수 있습니다.
단, 비회원 로그인을 한 경우 일회성 로그인이기 때문에 데이터 저장이 안될 수 있다는 팝업 노출후 사용자의 확인을 받은경우만 비회원 로그인을 진행합니다.


회원가입 화면

최소한의 항목을 입력받고 회원 가입을 합니다. 이메일과 비밀번호는 정규식을 활용하여 유효성 검사를 진행합니다.

캘린더 화면

월별 할일 진행 현황을 캘린더에서 확인 할 수 있습니다.
날짜밑에 초록색,회색,빨간색 표시로 해당 날짜의 완료 여부를 확인 할 수 있습니다.


할 일 목록 화면

캘린더에서 선택된 날짜의 할 일 목록을 확인할 수 있습니다.
날짜 하단에 프로그래스 바를 통해서 해당 날짜의 할 일 달성률을 확인 할 수 있습니다.
체크 박스를 통해서 할 일 상태를 업데이트 합니다.
타이틀 옆 원의 색깔을 다르게 표시하여 할 일의 중요도를 확인 할 수 있습니다.
중요도 별로 달성시 경험치가 다르게 부여됩니다.


할 일 등록 화면

할 일 등록하면은 아래에서 위로 올라오는 팝업을 구현할 예정입니다.
할 일, 설명, 중요도를 입력받아 등록 할 수 있습니다.
입력갑 중 설명만 선택값 입니다.


랭킹 리스트 화면

레벨, 경험치 내림차순으로 리스트가 보여집니다.


마이 페이지 화면

프로필 이미지 변경, 닉네임 변경을 할 수 있습니다.
여태까지 작성했던 할 일의 성공률 및 실패율을 확인 할 수 있습니다.


생각하지 못한 부분이나 보완 해야할 부분은 추후 게시글 업데이트를 통해 기록을 남겨두려 합니다.


다음 게시글에서는 백엔드 설계 과정을 작성해보록 하겠습니다.

0개의 댓글