프로젝트명 : EZ- 쉽게 배우는 자료구조 제출일 : 2019-05-07
작성팀 : 2X3=6
목포해양대학교
해양컴퓨터공학과
목 차
1. 작품 소개 ... 4
2. 요구사항별 개발 진도표 ... 4
3. 시스템 설계도 ... 6
3.1. 초기 시스템 설계도...6
3.2. UI 설계도 ...6
3.3. 수정된 설계도 ...7
4. 프로토타입 ... 8
5. 개발 진행 화면 ... 8
5.1. 씬 전환 ...8
5.2. 스택 ...9
5.3. 큐 ... 13
5.4. VR ... 15
6. 보완사항... 19
6.1. 학습 설명 부족 보완 ... 19
6.2. 화면 디자인 보완 ... 19
6.3. VR과 연동 ... 19
6.4. 스택의 확장 ... 19
7. 추후 일정 ... 20
7.1. 학습하기 ... 22
7.2. 탑 쌓기 ... 23
목포해양대학교
해양컴퓨터공학과
7.3. 미로 찾기 ... 23목포해양대학교
해양컴퓨터공학과
1. 작품 소개
자료구조와 알고리즘을 이해하는 것은 컴퓨터를 배우는 학생들이 좋은 프로그래밍을 하 는데 있어서 중요하다. 하지만 자료구조를 단지 교재로만 이해하는 데에는 어려움이 있 고 재미도 없다. EZ를 통해 컴퓨터 알고리즘을 입체적으로 시각화 하고 직접 조작하여 학생들의 흥미를 높이고 이해하기 쉽도록 한다.
2. 요구사항별 개발 진도표
순번 요구사항 ID 요구사항 명칭 개발진도(O, ∆, X) 개발가능여부(O, X)
1 UC1-REQ-1 시선변환 ∆ O
2 UC1-REQ-2 조작하기 ∆ O
3 UC2-REQ-1 데이터생성 O O
4 UC2-REQ-2 PUSH한다 O O
5 UC2-REQ-3 POP한다 O O
6 UC2-REQ-4 설명한다 ∆ O
7 UC3-REQ-1 설명한다 X O
8 UC4-REQ-1 장애물 생성 X O
9 UC4-REQ-2 장애물 제거 X O
10 UC4-REQ-3 이동한다. X O
11 UC4-REQ-4 PUSH한다. X O
12 UC4-REQ-5 POP한다. X O
13 UC4-REQ-6 경로 표시 X O
목포해양대학교
해양컴퓨터공학과
새로 추가된 요구사항 UC-3 : 학습하기
- 스택에 대한 기본적인 내용을 알 수 있도록 학습할 수 있다.
UC3-REQ-1 : 설명한다.
- 스택을 설명해준다.
UC-4 : 스택을 이용한 미로찾기 UC4-REQ-1 : 장애물 생성
- 경로 중간에 장애물을 설치한다. 플레이어에게 문제를 제시한다.
UC4-REQ-2 : 장애물 제거
- 플레이어가 정답을 맞추면 장애물을 제거한다.
UC4-REQ-3 : 이동하기
- 플레이어가 경로를 이동한다.
UC4-REQ-4 : PUSH
- 미로를 이동할 때 스택에 PUSH 한다.
UC4-REQ-5 : POP
- 지난 경로를 되돌아갈 때 스택에서 POP 한다.
UC4-REQ-6 : 지나간 경로 표시하기 - 지나간 경로를 표시한다.
목포해양대학교
해양컴퓨터공학과
3. 시스템 설계도
3.1. 초기 시스템 설계도
3.2. UI 설계도
목포해양대학교
해양컴퓨터공학과
3.3. 수정된 설계도
1) Player는 VR 프로그램을 실행시킨다.
2) Player는 VR 기기를 착용하여 시작화면을 볼 수 있다.
3) 초기화면에는 스택 학습하기, 탑 쌓기, 미로 찾기로 입장할 수 있는 문이 나타난다.
4) Player는 컨트롤러를 조작하여 문을 열고 위치를 이동하여 선택한 문에 해당하는 학습을 할 수 있다.
5) Player가 게임을 끝내면, 다시 시작화면으로 돌아갈 수 있다.
목포해양대학교
해양컴퓨터공학과
4. 프로토타입
5. 개발 진행 화면
5.1. 씬 전환
목포해양대학교
해양컴퓨터공학과
1) 메뉴화면에서 스택 버튼을 누르면 스택 화면으로 씬이 전환된다.
2) 스택 화면 왼쪽 하단의 Return 버튼을 누르면 메뉴화면으로 돌아간다.
3) 메뉴화면의 큐 버튼을 누르면 큐 화면으로 씬이 전환된다.
4) 큐 화면에서 왼쪽 하단의 메뉴 버튼을 누르면 메뉴화면으로 돌아간다.
5.2. 스택
1) 스택 초기화면
[그림 1 – 스택 초기화면]
스택 화면에 입장했을 때의 초기 화면이다.
목포해양대학교
해양컴퓨터공학과
2) PUSH 화면[그림 2- PUSH 화면]
PUSH버튼을 눌렀을 때 테이블에 블록이 쌓인다.
3) OVERFLOW
[그림 3 - OVERFLOW]
블록이 5개 쌓이면 OVERFLOW 메시지를 보여주며, 더이상 PUSH가 되지 않는다.
목포해양대학교
해양컴퓨터공학과
4) POP[그림 4 – POP 화면]
POP 버튼을 누르고 블록을 클릭하면 쌓여 있는 블록을 밑으로 내려준다. POP은 맨 위에 있는 블록만 할 수 있고, 맨 위에 있는 블록이 아니라면 POP이 되지 않는다
5) UNDERFLOW
[그림 5- UNDERFLOW]
테이블 위에 블록이 없으면 POP을 할 수 없다. UNDERFLOW 메시지를 보여준다.
목포해양대학교
해양컴퓨터공학과
6) 메뉴화면으로 복귀[그림 6 – return]
Return 버튼을 누르면 메뉴화면으로 돌아간다.
목포해양대학교
해양컴퓨터공학과
5.3. 큐
1) 큐 초기화면
[그림 1 - 초기화면]
큐 화면에 입장했을 때의 초기화면이다.
2) 1개 생성하기
[그림 2 – 1개 생성하기]
목포해양대학교
해양컴퓨터공학과
1개 생성 버튼을 누르면 구체 한 개가 생성된다.
3) 1개 빼기
[그림 3 – 1개 빼기]
1개 빼기 버튼을 누르면, 맨 앞에 있는 구체 하나가 사라진다.
4) 메뉴
[그림 4- 메뉴]
목포해양대학교
해양컴퓨터공학과
5.4. VR
1) VR 장비
[그림 1- VR 장비]
구글 Daydream의 VR 기기와 컨트롤러이다.
VR 기기를 통해 구현한 화면을 볼 수 있다.
컨트롤러의 터치패드를 터치하여 블록을 이동시킬 수 있다.
컨트롤러의 터치패드를 클릭하여 블록을 이동시키고 문을 여는 등의 기능을 추가할 예정이다.
목포해양대학교
해양컴퓨터공학과
2) 블록 이동 전[그림 2 – 블록 이동 전]
컨트롤러를 통해 블록을 이동시키기 전 사진이다.
3) 블록 이동 후
[그림 3- 블록 이동 후]
컨트롤러의 터치패드를 터치하여 블록을 다른 위치로 이동시킨 사진이다.
목포해양대학교
해양컴퓨터공학과
4) 플레이어 위치 이동[그림 4 – 이동 경로]
플레이어의 경로를 설정한 화면이다.
[그림 5 – 실행 초기화면]
플레이어가 입장했을 때 초기화면이다.
목포해양대학교
해양컴퓨터공학과
[그림 6 - 이동화면]
플레이어가 경로를 따라 이동한 후의 화면이다.
목포해양대학교
해양컴퓨터공학과
6. 보완사항
6.1. 학습 설명 부족 보완
학습 내용에 대한 설명이 부족하기 때문에 자세한 설명을 추가한다.
버튼에 대한 설명과 생소한 용어에 대한 설명을 추가한다.
6.2. 화면 디자인 보완
화면 디자인을 개선한다.
6.3. VR과 연동
구현한 게임을 VR 기기에서 보고 조작할 수 있도록 한다.
6.4. 스택의 확장
기존에 구현한 기본적인 내용을 더 구체적으로 만든다.
스택을 응용한 게임과 문제 등을 다룬다. . 탑 쌓기에 기능을 추가한다.
스택을 이용한 미로 찾기 게임을 추가한다.
목포해양대학교
해양컴퓨터공학과
7. 추후 일정
기존에 구현하려 했던 여러가지 알고리즘에서 스택에 대한 내용으로 축소하고, 스택에 대한 응 용된 문제를 다룬다.
2D 환경에서 구현된 내용을 VR 환경에서 동작할 수 있도록 한다.
버튼을 눌렀을 때 씬이 전환되는 것을 플레이어가 이동할 때, 위치에 따라서 화면이 전환되도록 한다.
[그림 1 – 메뉴화면 1]
목포해양대학교
해양컴퓨터공학과
[그림 2 – 메뉴화면 2]
위의 그림들은 현재까지 구현한 메뉴화면의 일부분이다. [그림 1]은 전체적인 메뉴화면의 모습 이고 [그림 2]와 같이 문이 열리면, 플레이어는 각각의 문은 통해 7.1. 학습하기, 7.2. 탑 쌓기, 7.3.
미로 찾기 컨텐츠로 이동할 수 있다.
목포해양대학교
해양컴퓨터공학과
7.1. 학습하기
[그림 3– 학습하기]
- 스택에 대한 기본적인 내용을 학습하는 공간이다.
- 스택에 대하여 잘 모르는 사용자라면 이곳에서 스택의 개념을 익히고 다음 단계로
넘어갈 수 있다.
- 컨트롤러를 이용하여 전구를 클릭하면 전구에 빛이 들어오며 말풍선과 함께 텍스트
로 설명이 나온다.
- 음성을 넣을 수 있다면 음성을 통한 설명도 추가할 예정이다.
- 빛이 들어온 전구를 한번 더 클릭하면, 전구가 꺼지고 설명이 사라진다.
목포해양대학교
해양컴퓨터공학과
7.2. 탑 쌓기
[그림 4 – 탑 쌓기]
- 탑 쌓기 게임에 버튼에 대한 설명을 추가한다.
- 기능을 추가해서 사용자의 흥미를 높인다.
7.3. 미로 찾기
[그림 5 – 미로 찾기]
목포해양대학교
해양컴퓨터공학과
[그림 6 – 미로 화면1]
[그림 6 – 미로 화면2]
목포해양대학교
해양컴퓨터공학과
[그림 7– 문제 예시]
- 스택을 응용한 미로 찾기 게임을 만든다.
- 길을 찾으면서 스택이 동작하는 과정을 사용자가 볼 수 있도록 한다.
- [그림 - 4]는 미로 찾기의 전체적인 설계화면이다.
- [그림 - 5], [그림 – 6]은 플레이어가 직접 통과하게 될 미로의 모습이다.
- [그림 – 7]은 장애물에서 플레이어가 풀어야 하는 문제의 예시이다.
- 중간에 장애물을 설치하고, 문제를 제시한다. 사용자가 정답을 맞추면 장애물을 통과
할 수 있다.
