- 웹페이지
- 투두 리스트를 보여주는 간단한 웹페이지 제작
- 투두 항목 추가 기능 구현
- 투두 항목 삭제 기능 구현
- 안드로이드 앱
- 웹뷰를 이용하여 웹페이지 로드
- 브릿지 통신을 통해 웹페이지에 데이터 제공
- 안드로이드의 스토리지에 데이터를 보존
- 투두 항목 편집 기능 추가
- 투두 항목에 마감일 설정 기능 추가
- 투두 항목에 완료 여부 체크박스 추가
- 브릿지를 대기하지 않고 화면을 그릴 수 있도록 브라우저 로컬스토리지와 데이터 동기화
- 안드로이드 앱에서도 투두 항목 추가 및 삭제를 할 수 있는 별도 네이티브 Add-on UI 구현
- 사용자 친화적인 UI 디자인
- 당근마켓의 UI 를 적극 참고해봄
- Why?
- 19~69세까지 다양한 연령층의 소비자들이 이용하며, 여성(51.7%)과 남성(48.3%)의 이용률이 비슷하다는 점을 미루어 보아, "남녀노소 모두에게" 사용자 친화적인 UI 디자인이라고 생각했기 때문이다.
- Why?
- 당근마켓의 UI 를 적극 참고해봄
- 반응형 웹페이지 구현으로 디바이스에 최적화된 보기 제공
- 웹페이지
- 로컬 환경에서 빌드하여 안드로이드 앱과 통신하도록 구현
- 투두 항목을 추가하는 입력필드 & 추가 버튼 구현
- 투두 리스트 항목을 표시하는 목록 구현
- 각 투두 항목 옆에 삭제 버튼 구현
- 브릿지를 통하여 투두 항목 저장 및 불러오기 구현
- 안드로이드 앱
- 웹뷰를 통해 투두리스트 항목을 확인 가능하도록 설계
- 웹뷰의 JavaScript Interface를 사용하여 안드로이드 앱과 웹 통신 구현
- 투두 항목의 추가
- 투두 항목의 삭제
- 투두 항목의 편집
- 투두 항목의 마감일 설정
- 투두 항목의 완료 여부 체크
-
투두 항목의 추가
- 투두 리스트 가장 끝에 투두 항목을 추가할 수 있습니다.
- 화면 상단의 입력란을 통해 추가할 경우, 투두 리스트 가장 끝까지 스크롤할 필요 없이 바로 투두 항목을 추가할 수 있습니다.
- Floating Action Button 으로 구현하려다, 그러면 투두 리스트의 내용 일부가 가려질 것을 사용자가 불편해할 것 같아 위와 같이 수정함
-
투두 항목의 삭제
- 삭제하고 싶은 투두 항목에 대해 왼쪽으로 스와이프 하여 해당 투두 항목의 삭제를 선택할 수 있습니다.
- 잘못 누르는 바람에 삭제하고 싶지 않은 투두를 삭제하게 되는 사용자의 실수를 줄여주고자 삭제 버튼을 밖으로 노출시키지 않음
- 모든 투두 항목들을 한꺼번에 삭제하고 싶을 경우, 툴바의 옵션 메뉴에서 '모든 투두 삭제하기' 옵션을 선택하면 됩니다.
- 이 역시 사용자의 실수를 줄여주고자 사용자의 추가적인 동작을 요구함
- 삭제하고 싶은 투두 항목에 대해 왼쪽으로 스와이프 하여 해당 투두 항목의 삭제를 선택할 수 있습니다.
-
투두 항목의 완료 여부 체크
- 체크 박스를 체크할 시, 해당 투두 항목의 글씨색이 옅어지고 취소선이 그어집니다.
- 체크 박스를 해제할 시, 다시 해당 투두 항목의 글씨색이 선명해지고 취소선이 사라집니다.
-
투두 항목의 편집 / 마감일 설정
- 편집 또는 마감일 설정을 하고 싶은 투두 항목에 대해 클릭하면 작업을 선택할 수 있는 Bottom Sheet 가 등장합니다.
- 투두 항목의 편집
- Bottom Sheet 에서 편집 작업을 선택한 경우, 해당 투두 항목의 내용을 즉시 편집할 수 있습니다.
- 투두 항목의 마감일 설정
- Bottom Sheet 에서 마감일 설정 작업을 선택한 경우, 해당 투두 항목에 대한 마감일을 설정 및 수정할 수 있습니다.
- 마감일을 설정한 경우, 투두 항목 아래쪽에 마감일이 표시됩니다.
- 투두 항목의 추가 by 안드로이드 UI
- 투두 항목의 추가 by 웹 UI
- 투두 항목의 전체 삭제 by 안드로이드 UI
- 투두 항목의 삭제 by 웹 UI
- 투두 항목의 편집
- 투두 항목의 마감일 설정
- 투두 항목의 완료 여부 체크
- 오늘의 날짜 표시
