5월 앱 개발 기획서_OVEN 프로토타입(카카오) - PineNut-201927019/Origami GitHub Wiki

'OVEN'으로 제작한 종이접기 앱 개발 구상도입니다.

현재 총 14개의 페이지를 구성했습니다.

해당 구상도의 이동 원리는 아래 링크의 ppt자료를 참고하시길 바랍니다.

201927019 김정환_프로젝트기획(일반)_2020년 1학기 기획서.pptx

1. [메인 화면(Home)]* 페이지

메인화면(홈)

화면 상단 왼쪽의 '뒤로가기 버튼'의 검은 화살표 아이콘은 메인 화면으로 오면 붉은색으로 바뀌고, 이를 누르면 앱을 나갈 수 있습니다. 그리고 메인 화면에 있는 상태이니 '홈으로' 버튼은 회색이 되어 안눌리게 됩니다.

해당 페이지들로 넘어갈 수 있는 '작품 목록 버튼(노란색)'과 '사용법과 기초 버튼(초록색)'이 화면에 등장할 것입니다.


[작품 목록]

메인화면에서 '작품 목록 버튼(노란색)'을 누르면 이동할 수 있습니다.

2. [작품 목록(Catalog)] 페이지

작품 목록

나열된 '작품 카테고리 버튼' 중 하나를 누르면 [카테고리 페이지(Category)]로 넘어갑니다.

3. [작품 카테고리(Category)] 페이지

카테고리

해당 분류 기준에 속하는 각종 "다양한 작품들"이 기재되어 있습니다.

'작품 버튼' 중 하나를 누르면 [작품(unit)] 페이지로 넘어갑니다.

4. [작품(Unit)] 페이지

해당 작품 페이지

이 페이지에는 해당 작품의 기본 원리가 설명되어있고, 어떤 종이를 쓰면 만들기 수월할지 등에 대한 유용 정보도 알려줄 겁니다.

그 아래에는 '접기과정 버튼'과 '전개도 버튼'이 각각 있을 겁니다.

원리 설명 내용이 길어질 수도 있으니 이 두 버튼을 작품 썸내일 쪽에 잘 보이도록 위치를 옮겨야겠군요.

5. [전개도(Crease Pattern)] 페이지

전개도

[작품(unit)] 페이지의 '전개도 버튼'을 누르면 이 페이지로 이동, 작품을 펼친 전개도(Crease pattern)가 등장합니다.

6. [다이어그램 차트(Diagram_chart)] 페이지

다이어그램 차트

[작품(unit)] 페이지의 '접기과정 버튼'을 누르면 이 페이지로 이동, 해당 순서의 '접기과정 버튼'을 누르면 그 순서만 자세히 볼 수 있는 [다이어그램 화면(Diagram_single)] 페이지로 이동합니다.

7. [다이어그램 화면(Diagram_single)] 페이지

다이어그램 단독 화면

종이접기 기호로 표현된 과정을 더 자세히 볼 수 있으며, 아래의 양 화살표 버튼으로 다음 과정으로 넘어갈 수 있습니다.

모션그래픽 기능을 통해 기존 평면도로 이루어진 설계도와 책에서는 볼 수 없었던, 접기 과정이 움직이는 모습을 선사하여 종이를 접는 사용자가 보다 이해하기 쉽도록 만들어줄 것 입니다.

모든 작품과 과정마다 모션을 구현할 때 드는 개발 시간도 고려해야 겠습니다.

이를 구현하기 위해서는 "어도비 애프터 이펙트'를 사용할 줄 알아야 합니다.

마침 저희 친누나가 디자인 전공을 공부하셨기에 이 프로그램을 잘 다루는 누나의 도움을 받을 수 있겠습니다. 야호!


[사용법과 기초]

지난번엔 [메인 화면]의 작품목록 버튼을 들어갔었으니 이번엔 아래의 '사용법과 기초 버튼(초록)'을 눌러 [사용법과 기초] 화면으로 가보겠습니다.

8. [사용법과 기초] 페이지

사용법과 기초

이 화면엔 4개의 버튼이 있습니다. 각 버튼을 눌러 해당 페이지로 넘어갈 수 있습니다.

상단 왼쪽의 '뒤로가기' 버튼이나 '홈으로' 버튼을 눌러 [메인 화면]으로 돌아갈 수 있습니다.

9. [앱 사용법]

[https://github.com/PineNut-201927019/Origami-Development_Files/blob/master/%5BJong-ie_jopgi%5D%20App%20Tutorial.jpg](앱 사용법)

'앱 사용법 버튼(파랑)'을 눌러 들어갈 수 있는 페이지입니다.

화면 설명처럼 화면을 스와이프하여 앱 사용법을 비롯한 튜토리얼을 익힐 수 있는 페이지 입니다.

10. [종이접기개론] 페이지

종이접기개론

'종이접기개론 버튼(회색)'을 눌러 들어갈 수 있는 페이지입니다.

이 페이지에서 종이접기의 기원, 종이접기의 사회적 기능과 근본적 의의 등을 비롯하여 종이접기에 관한 사실과 효과를 배울 수 있습니다.

본래 종이접기에 관한 텍스트가 들어가야 하지만 구상도라는 점을 착안하여 일단 아무 텍스트나 넣어진 상태입니다. 양해 부탁드립니다.

11. [접기 기본형] 페이지

접기 기본형

'접기 기본형 버튼(빨간색)'을 눌러 들어갈 수 있는 페이지입니다.

이 페이지에는 [카탈로그] 페이지처럼 종이접기를 할 때 알고 있어야 하는 다양한 기본형 접기를 고를 수 있습니다.

나열된 버튼 중 하나를 눌러 해당 기본형을 배울 수 있는 페이지로 들어갈 수 있습니다.

12. [기본형 다이어그램 리스트] 페이지

기본형 다이어그램 리스트

[접기 기본형] 페이지에 있는 '삼각주머니접기 버튼'을 눌러보겠습니다.

이 버튼을 눌러 들어갈 수 있는 [삼각주머니접기 다이어그램 리스트] 페이지가 등장할 것입니다.

앞에서 설명드린 [작품 다이어그램 리스트] 페이지와 동일한 인터페이스로 제작될 것입니다.

해당 파트의 기본형 다이어그램을 골라 [삼각주머니접기 다이어그램-단일 모션] 페이지로 들어갈 수 있습니다.

13. [삼각주머니접기 다이어그램-단일모션] 페이지

기본형 다이어그램 단일 모션

이 단독 다이어그램 페이지에서는 자세한 접기 설명과 함께 모션 그래픽이 구현된 해당 파트의 다이어그램을 관람하실 수 있습니다.

하단의 '이전', '다음' 버튼을 통해 해당 페이지에 이웃한 다음 페이지로 넘어갈 수 있습니다.

앱의 모션그래픽은 추후 개발할 예정입니다. 이는 제 '깃허브'의 애자일 칸반 보드 이슈를 통해 확인하실 수 있습니다.

(익스플로러에서는 깃허브가 잘 작동하지 않더군요. 네이버 메일 보낼 때 알았습니다.)

14. [접기 기호] 페이지

접기 기호

다시 [사용법과 기초] 페이지로 돌아와, '접기 기호 버튼(주황색)'을 눌러 들어갈 수 있는 [접기 기호] 페이지 입니다.

해당 접기 기호들의 개념과 설명 예시를 볼 수 있는 페이지로 이동할 수 있습니다.

접기 기호와 규칙들은 '한국종이접기협회'에서 진행하는 '종이접기 마스터 자격증'을 취득하기 위한 공부에 사용되는 '국가공인 종이접기마스터 시험 대비 학습서 (이준서, 노영혜 / 종이나라 출판)' 라는 도서를 참고하였습니다.