![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/6a4e7f16-0a1c-46d4-a0bb-2f27e6927079/image.png>)

[<https://www.ssafy11s.com>](<https://www.ssafy11s.com>) 사이트에 접속합니다.

start 버튼을 눌려 메인화면으로 이동합니다.

이때, 로그인은 미리 한 상태로 시연에 들어갔기에, 로그인을 한 메인화면으로 이동하게 됩니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/e94712a5-8748-46bb-8baa-719832a91b22/image.png>)

저희 메인화면 페이지입니다. 

해당 페이지에서 ‘스토리모드’로 먼저 접속합니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/6443da99-5c5a-4e8d-94e6-c9eae0a67b7a/image.png>)

스토리 모드에 접속하면 보이는 모습입니다.

해당 화면은 ‘변수’ 내용은 이미 학습한 화면이며, ‘자료형’ 내용을 학습할 차례임을 나타냅니다.

그래서 저희는 ‘자료형’ 버튼을 눌려 해당 컨텐츠에 접속합니다.

1. 
    
    ![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/327b9062-56a0-4732-8b0f-c5247ff24cfc/image.png>)
    
    해당 컨텐츠에 접속하면 보이는 화면입니다.
    
    시연자는 마우스 좌측 연속 클릭을 발표자는 컨텐츠를 설명하며 학습 완료 버튼이 나올때까지 누릅니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/9bdc363f-1b1b-4113-9423-dc332b8aca6b/image.png>)

해당화면에서 학습 완료를 클릭합니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/ea028521-81a1-4f3f-a197-ba9307b2a88c/image.png>)

학습완료를 하게되면 나오는 화면이며, 뒤로가기 버튼을 눌려 메인화면으로 갑니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/e94712a5-8748-46bb-8baa-719832a91b22/image.png>)

메인화면으로 이동하여 멀티모드 버튼을 눌려 접속합니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/6fc42b06-2266-4bda-83ca-1b4599b2393f/image.png>)

멀티 모드에 접속하면 나타나는 화면이고, 방 만들기 버튼을 눌려 방을 생성합니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/7559905f-1397-4d52-91c0-91de219269f8/image.png>)

해당 정보를 바탕으로 방을 생성합니다. 생성버튼을 눌려줍니다.

인원은 최대 100명까지 설정할 수 있으며, 라운드는 최소 5라운드부터 가능합니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/11bba219-2981-4587-abfb-abe33159c476/image.png>)

생성 버튼을 누른 뒤, 참가자들이 방에 입장하게되면 게임 시작버튼을 눌려줍니다. 해당 화면은 시작버튼을 누른 후 게임이 진행되는 화면입니다.

문제 형식에는 객관식, 단답식, 빈칸채우기 총 3개의 종류가 있습니다.

시연에서는 총 5라운드를 진행합니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/e94712a5-8748-46bb-8baa-719832a91b22/image.png>)

게임이 종료된 후, 멀티방을 떠나 메인화면으로 돌아갑니다. 배틀 모드 버튼을 클릭하여 배틀 모드에 접속합니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/1dc6db9b-c880-4221-8f2f-8ee7fef662d3/image.png>)

배틀모드 첫 화면입니다. 이전과 동일하게 방 만들기 버튼을 눌려 방을 생성합니다. 라운드는 최소 2라운드부터 설정할 수 있으며, 시연에서는 4라운드로 설정했습니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/001cfb45-04a8-4ea4-b884-88ab83ad8cb3/image.png>)

생성하고자하는 방 정보를 입력하고 결정 버튼을 누릅니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/fb392611-d345-4b1c-8d79-8798848af0a9/image.png>)

상대방이 방에 입장하게되면, 게임 시작버튼을 누릅니다.

해당 화면은 게임을 진행하는 화면입니다. 멀티와 마찬가지로 객관식, 주관식, 빈칸채우기 총 3 종류의 문제가 출제되며, 게임적 요소를 강조하기 위해 캐릭터 공격, 회복 이펙트가 있고, 먼저 상대방의 체력을 0으로 만들거나 게임 종료시 체력이 높은 사람이 승리하게 됩니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/d4e3e1cb-a9ee-49a4-9a7d-1df404bac222/image.png>)

프로필 페이지입니다.

우측에 보이는 버튼 3개가 보입니다. 먼저 record 버튼을 눌려 게임 기록을 확인합니다.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/0519b77d-6f8a-495c-81c7-de3f0d059ebe/1c9db167-a144-4110-bb02-29b8927962a4/image.png>)

게임기록이 잘 담겨있는 것을 확인하고, 뒤로가기 버튼을 눌려 프로필 페이지로 이동합니다. 한 페이지당 4개씫 표시되며, 최신순, 모드순 등 정렬 기능이 있습니다.