프로젝트 주제 정하기
이번 프로젝트에서 나의 목표는 '실용성'이 있는 웹페이지를 개발하는 것이다. 한번 만들고 끝이 아닌 이 이후에도 계속 쓸 수 있는 나에게 제일 도움이 되는 페이지를 제작하고 싶다. 그래서 고안해낸게 habbit tracker 페이지를 만드는 것이다. 매번 하고자 마음만 먹고 실행에 옮기지 않는 나라도 이런 페이지를 통해 매일 체크하고 기록을 남겨서 내가 얼마나 성취해 왔는지 결과를 보여주는 페이지가 있다면 조금이라도 더 실천에 옮기지 않을까? 하는 생각에 이 주제로 선정하게 되었다.
이번 프로젝트에서 나에게만이 아닌 타인에게도 보급해서 사용이 가능한 페이지를 만들고자 했기 때문에 처음 개발 외적인 디자인 부분에도 신경을 쓰고자 하는것이 이번 또 다른 소 주제이다.
프로젝트 기획안
원래 Adobe XD를 이용해서 기획안을 짠다. 일단 사용하기가 매우 편리하며 프로토 타입으로 페이지상 연결 같은 것들을 바로바로 볼수 있어 내가 구상하는 웹페이지를 미리 재현해내는 효과가 있다. 이 점이 기획할때 문제점을 눈에 보이게 잘 파악해주고 바로 수정할 수 있어 좋다.
아래 내용은 대략적인 디자인이 함유된 XD의 페이지를 이미지와 글로 다시 정리한 것이다.
디자인은 추후에 실제로 html, css 작업을 통해 바꿔갈 예정이고 한 페이지를 기준으로 대략적인 이미지와 구현할 api의 내용을 정리했다.
1. 로그인 페이지
제일 먼저 보게될 화면이다. 로그인 페이지를 제대로 만들고 싶지만 일단은 기본적으로 이메일을 입력하면 접속이 되는 더 간단한 방법으로 시작해 보고자 했다.
< 프론트 >
- "로그인" 버튼
- 다음 메인페이지로 연결
- 서버와 연결
< 서버 >
- 로그인 화면 api
- loginpage.html과 연결
- 로그인 버튼 api
- 이메일을 입력하고 버튼을 누르면 해당하는 ajax를 통해 db를 불러온다. (해당하는 아이디에 접속하는 효과)
- 등록된 이메일이 없으면 새로 이메일을 ajax를 통해 db에 추가 한 후 불러온다.
2. 메인 페이지
중심이 되는 메인 페이지이다. 로그인을 하면 바로 다음에 보게 될 페이지이며 특별한 api는 필요하지 않지만 각 페이지로 이동하게되는 포트 페이지라고 생각하면 된다. 처음으로 사이트에 접속하는 "사람이라면 새도전 시작" 아이콘을 통해 도전을 추가할 수 있는 페이지로 넘어가면 되고 이미 도전이 등록 되어 있는 사람이라면 "오늘도 도전 시작!" 아이콘을 통해 매일의 실천내용을 체크하는 페이지로 넘어가거나 "도전 달력" 아이콘을 통해 나의 실천 현황을 확인 할 수 있는 페이지로 넘어 갈 수 있다.
< 프론트 >
- "새도전 시작" 버튼
- "/newchellenge"로 페이지 연결
- "오늘도 도전 시작!" 버튼
- "/checklist"로 페이지 연결
- "도전달력" 버튼
- "/chellengeweek"로 페이지 연결
< 서버 >
- 메인 화면 api
- mainpage.html과 연결
3. 새 도전 시작 페이지
새로운 습관을 등록하는 페이지이다. 입력하는 내용은 "도전내용" 과 셀렉트하는 형식인 "하루/일주일" 이다.
"추가" 버튼을 통해 등록 칸을 하나씩 더 추가해서 여러개를 동시에 등록 가능하게 만들고 "-" 버튼으로 추가한 칸을 제거한다. 또 습관 입력을 완료하면 "완료" 버튼을 통해 db에 등록 후 "메인 페이지" 로 이동한다.
< 프론트 >
- "input", "select"
- 도전내용을 입력
- 도전의 기간을 선택 (매일/ 일주일 단위)
- "추가", "-" 버튼
- "추가" 버튼 을 눌러 입력칸을 한 줄 씩 늘리기
- "-" 버튼을 눌러 입력칸을 한 줄 씩 줄이기
- 최초 한 줄은 입력하거나 줄일 수 없는 고정 줄
- "완료" 버튼
- 입력한 내용을 ajax를 통해 서버에 보내고 메인페이지로 이동
- 만약 입력이 없다면 " 도전을 입력해주세요" 메세지 띄우기
< 서버 >
- 새 도전 api
- newchellenge.htmlrhk 연결
- 데이터 저장 api
- 입력 받은 내용을 ajax를 통해 db에 저장하기
- 데이터의 저장 형식 :
초기 계획을 짜고 튜터님께 조언을 받아 변경한 계획이다.
후자가 데이터 검색면에서 더 용이하기 때문에 후자의 형식으로 저장하는것이 편하다.
4. 데일리 체크리스트
새로운 습관을 만들어 저장했다면 그 다음으로는 실천에 옮길 차례이다. 매일 매일 원하는 시간에 접속해 오늘 하루 나의 실천 결과를 체크할 수 있다. 체크 박스를 통해 체크를 하고 체크를 완료한 후 "완료!" 버튼을 통해 저장한 후 메인페이지로 이동할 수 있다.
< 프론트 >
- 도전 목록 리스트업
- 서버에서 받은 db 데이터를 통해 사용자의 도전 내용을 불러와 체크박스 리스트 html을 만들기
- 받은 데이터의 "type" 이 "daily"인지 "weekly"인지 분류 후 리스트 업
- 체크박스
- 사용자가 버튼 클릭으로 체크할 수 있도록 체크박스 형식으로 만들기
- "완료!" 버튼
- 체크된 데이터를 ajax를 통해 서버로 넘긴 뒤 메인페이지로 이동시키기
< 서버 >
- 데일리 체크리스트 화면 api
- dailychecklist.html과 연결
- 데이터 불러오기 api
- ajax의 "GET" 방식을 통해 db에 저장된 데이터를 클라이언트에 넘겨주기
- 데이터 저장 api
- ajax의 "POST" 방식을 통해 클라이언트에서 넘어온 데이터를 db에 저장하기
5. 도전 실천 현황 리스트
주 단위로 나누어 한주의 실천 현황페이지로 넘어가기 전 단계의 라이브러리 페이지이다. 도전을 등록하고 처음으로 체크리스트 등록한 그 날을 기준으로 7일 단위씩 잘라서 한 주를 구성하고 7일마다 버튼이 한개씩 추가되고 어느 한 날의 체크리스트가 등록되지 않더라도 날짜가 미뤄지지 않고 빈 데이터를 가진 날짜로 한주에 포함된다.
< 프론트 >
- 도전 날짜 리스트업
- 서버에서 받은 db 데이터를 통해 사용자의 도전 날짜을 불러와 버튼형식으로 리스트업
- 받은 데이터의 날짜를 7일단위로 나누어 버튼 만들기
- 리스트업된 버튼
- "week1" 형식으로 버튼마다의 id 부여
- 버튼마다의 해당하는 날짜의 한 주 도전 실천 현황페이지로 이동시키기
- 돌아가기 버튼
- 메인페이지로 이동시키기
< 서버 >
- 도전 실천 현황 리스트 화면 api
- chellengeweeklist.html과 연결
- 데이터 불러오기 api
- ajax의 "GET" 방식을 통해 db에 저장된 데이터를 클라이언트에 넘겨준다.
6. 한 주 도전 실천 현황 페이지
일주일 동안 사용자가 설정한 도전을 얼마나 실천했나 확인 해 볼 수 있는 페이지이다. 매일 실천하는 습관들은 7개의 칸으로 매일 매일 내가 얼마나 달성했는지 볼 수 있고 일주일 단위로 실천하는 습관들은 일주일에 몇번을 언제 실천했는지 상관없이 완료인지 아닌지만 확인 할 수 있다.
< 프론트 >
- 도전 날짜 기간 표시
- 서버에서 받은 db 데이터를 통해 사용자의 도전 날짜을 불러와 해당 주의 기간을 보여준다.
- 매일 습관 리스트와 결과 표시
- ajax를 통해 서버에서 받은 데이터에서 도전 내용과 해당 주 기간동안의 실천내용을 보여주기
- 매일의 실천 달성 내용은 7일 동안의 내용을 테이블 형식으로 표시
- 일주일 습관 리스트와 결과 표시
- ajax를 통해 서버에서 받은 데이터에서 도전 내용과 해당 주 기간동안의 실천내용을 보여주기
- 일주일의 실천 달성 내용은 "완료" 아이콘과 "미완료" 아이콘으로 표시
< 서버 >
- 한 주 도전 실천 현황 화면 api
- chellengeweek.html과 연결
- 데이터 불러오기 api
- ajax의 "GET" 방식을 통해 db에 저장된 데이터를 클라이언트에 넘겨준다.
유저 행동
1) 로그인 페이지로 접속
2) 이메일로 로그인해서 메인페이지로 이동
3-1) 처음 시작하거나 습관을 추가하고 싶으면 "새도전 시작" 버튼을 눌러서 페이지 이동
3-2) 추가하고 싶은 습관의 내용을 칸에 적고 날짜 단위를 선택하기 (매일/일주일 단위),
습관 여러개를 한번에 추가하고 싶으면 " 도전 추가하기" 버튼으로 칸을 늘리고, 칸을 지우고 싶으면 "-" 버튼으로 줄인다.
습관 적기를 마쳤다면 "완료!" 버튼으로 등록 완료.
4) 이미 습관이 등록되어 있다면 "오늘도 도전 시작" 버튼을 눌러 체크리스트 페이지로 이동
5) 오늘의 습관 체크완료 후 "완료" 버튼을 눌러 저장완료 후 메인페이지로 이동
6) 나의 도전 현황을 보고싶다면 "도전달력" 버튼을 눌러 페이지 이동
6-1) 도전현황 날짜별 리스트에서 확인을 원하는 주간 아이콘을 눌러 페이지 이동/ 원하지 않으면 "돌아가기" 버튼을 눌러 메인페이지로 이동
6-2) 나의 도전현황 확인 후 "돌아가기 버튼을 눌러 날짜별 리스트 페이지로 이동
-이미지 속 사진이미지는 핀터레스트에서 수집한 이미지를 바탕으로 재구성한 것입니다. 문제 될 시 연락 주시면 삭제하겠습니다.
'웹개발 > 프로젝트 - 66Days' 카테고리의 다른 글
| <프로젝트 1> habbit tracker 웹페이지 만들기 - 6. 마무리 (0) | 2020.07.02 |
|---|---|
| <프로젝트 1> habbit tracker 웹페이지 만들기 - 5. 거의 완성단계 까지 (0) | 2020.06.30 |
| <프로젝트 1> habbit tracker 웹페이지 만들기 - 4. 본격적인 코딩 시작 (0) | 2020.06.25 |
| <프로젝트 1> habbit tracker 웹페이지 만들기 - 3. html, css 완성 및 api 설계 (0) | 2020.06.17 |
| <프로젝트 1> habbit tracker 웹페이지 만들기 - 2. Todo List (0) | 2020.06.14 |
