폰갭 어플 스토리 보드 (to-do list)

폰갭 어플 강좌 TODO LIST 어플 만들기 1회 스토리 보드 제작

오늘 부터 어플 만들기 들어가자
그동안 했던 이야기 또하고 지루한 면이 있었다. 이제 어플을 하나씩 만들어서 공부하면 더 이해가 쉽지 않을까 생각한다.
오늘은 문제 스토리 보드 부터 만들기로 했다.

TODO LIST를 하나 만들어 보기로 하자
 스토리 보다는 다음 그림과 같다.

화면과 같이 할일은 스크롤이 되고 한일과 해야 될일을 나누어서 볼수 있도록 구성한다.
그리고 추가 버튼은 원형 아이콘으로 삽입하도록 했다.

할일 추가 할때는 모달에서 추가하는 방식으로 했다. 물론 조그만 창하나 열면되지만 화면이 작은 스마트폰에서는 상당히 불편하다. 그래서 모달을 이용하지만 전화면을 다 차지하게 했다. 
물론 뒤로가기 버튼과 저장 버튼을 상단에 두었다. 저장 버튼을 하단에 두면 화면이 작은 스마트폰에서는 불편하다.

마친일만 따로 볼수 있도록 아이콘을 추가하여 마친일만 볼수 있도록 했다. 물론 저 완료 버튼을 클릭하면 다시 할일로 바뀌도록 한다.

추가 버튼은 메인페이지와 같다. 뒤로 가기 버튼도 두었다. 네이버 메모장 보면 비슷하지 않나 생각된다.

할일만 보도록 구성한다. 완료 체크박스에 채크하면 한일로 전환된다.

간단하고 한페이지에 구현이 가능하다. 2회정도 해서 TODO LIST를 하나 만들어 보고자 한다.

스토리 보드는 이렇게 제작해 봤다. 

이전 강의 내용에 여기 사용될 기법들은 모두 나와 있다. 이런기법 하나 하나를 넣어서 구형하고자 한다.

이번부터는 폰갭을 직접 만들어 보는 방법으로 진행한다. 다음은 JS와 INDEX.HTML CSS를 구성하면서 진행하겠다.