jpg의 끄적끄적

0부터 11까지 랜덤 수가 나오도록 하고, 랜덤한 숫자가 홀수인 경우에 홀수 버튼, 짝수인 경우에 짝수 버튼을 클릭했을 때 성공 문구를 띄우도록하자. 반대로 틀리게 버튼을 클릭하면 실패 문구가 나오도록 설정해보자. 랜덤하게 숫자 출력하기 버튼의 이벤트를 설정하기 위해서는 UI를 만들었을 때 자동으로 생성되었던 EventSystem을 이용하면 된다. EventSystem을 클릭하고 인스펙터에서 AddComponent > script검색 > New Script클릭 > EventManager로 이름 설정 > Create and Add클릭하면 스크립트가 생성된다. 그리고 Assets 폴더에 생성된 스크립트를 Scripts폴더에 옮긴다. 그리고 스크립트를 열어준다. 랜덤한 수를 만들기 위해서는 Random.Ran..

이번엔 게임이 배경 음악을 설정하고, 소리를 조절하는 방법에 대해 알아보자. 1. Silder UI 디자인 적용 방법 오디오 조절 바를 만들기 위해 하어이라키 sound_popup에 마우스 우클릭 > UI > Slider를 클릭하고, 이름은 BGMSlider로 바꿔주면 아래와 같이 음원을 조절하는 스크롤바가 생성된다. slider를 원하는 위치에 놓고 크기를 조절한다. 그 다음 BGMSlider를 클릭하면 세 개의 폴더가 나온다. 이제 조절하는 버튼만 보이도록 Background를 클릭해 색을 투명하게 만든다. 그리고 Fill Area > Fill 도 투명하게 만든다. 여기서 Fill은 조절 버튼을 오른쪽으로 옮겼을 때 채워지는 부분이다. 그리고 Handle Slide Area > Handle을 클릭해 ..

https://studybook.tistory.com/58 [UNITY] 버튼 UI 생성하기 https://studybook.tistory.com/57 [UNITY] 게임 배경 설정하기 1. 게임 설명 게임 개발 동아리에서 게임 개발을 시작했다. 유니티를 처음 사용하게 되었는데 게임을 개발하면서 배우게 되는 유니티 사용 방 studybook.tistory.com (이어서 작성됩니다!) 버튼을 생성했으니 버튼을 클릭하면 팝업창이 뜨도록 팝업창을 생성해보자. 먼저 소리 버튼을 클릭했을 때, 소리를 조절하는 팝업창을 생성할 것이다. Canvas에 마우스 우클릭 > Create Empty 를 클릭해 GameObject 생성 후 이름을 알맞게 변경해주었다. 그리고 크기를 화면에 딱맞게 조절하였다. sound_po..

수업 전 수업 전 날에 2일차 수업에 필요한 프로그램 설치나 준비 등을 거의 다 해놔서 많이 일찍 도착하지 않아도 될 것 같아 수업 시작 20분 전에 도착하였다. 2일차 수업에는 네오씽카 수업을 보조해주시는 보조 선생님이 오신다. 보조 선생님과 같이 학생들이 사용할 노트북을 준비하고, PPT를 확인하였다. 그리고 현수막을 설치하였다. 그리고 네오씽카 교구를 교실에 옮겨놓았다. 5-6차시 수업 5차시와 6차시는 수업을 이어서 진행하였다. 먼저 학생들에게 필요한 네오씽카 교구를 나누어 주었다. 한 줄을 세워 질서를 지켜 교구를 가져갈 수 있도록 하였다. 그리고 어떤 로봇을 만들 건지 소개를 해주었다. 로봇의 종류는 급식차 안내 로봇, 도서관 로봇, 길안내 로봇이 있다. 우리 팀은 피지컬 교육에서 배운 급식차..

수업 전 선생님께 미리 연락을 드려 학교에 1시간 정도 일찍 도착하여 수업 준비를 하고 있어도 되는지를 여쭤보았다. 선생님들 출근시간이 8시 20분부터라고 하여 우리는 8시 30분에 도착하여 수업 준비를 하기로 하였다. 초등학교가 아직 지어지고 있는 생긴 지 얼마 되지 않은 초등학교였다. 도착하고 학생들을 만날 생각에 너무 기대됐다. 학생들이 수업 때 사용할 웹캠과 마이크 설치, 컴퓨터 전원과 노트북 충전기 연결을 다 해놓았다. 원래라면 1784스쿨혁명 포스터와 현수막도 교실에 설치해야 하는데 우리는 다음날에 올 예정이라서 설치를 못하였다. 수업 때 사용할 PPT와 수업 영상까지 테스트를 완료하고 학생들을 기다렸다. 1차시 수업 1차시 수업은 학생들을 처음 만나기도 한 자리이기도 하고, 간단하게 오리엔테..

1. 1784 스쿨혁명이란?? 네이버 커넥트재단과 코드클럽한국위원회가 같이 주최하는 1784스쿨혁명이란 전국에 있는 초등학생들에게 SW와 AI 시대에 필요한 지식과 경험을 나누는 방학 중 캠프이다. 주활동은 인공지능의 정확성, 편향성, 악용가능성과 같은 개념에 대해 학생들에게 가르쳐주고, 엔트리를 이용해 네오씽카라는 자동자 로봇을 움직여보는 활동을 한다. 아래 홈페이지에서 지원자격, 활동내용, 활동혜택 등을 자세하게 알 수 있다. - 1784스쿨혁명 지원 홈페이지 https://m.post.naver.com/viewer/postView.naver?volumeNo=34920991&memberNo=9434103 네이버 커넥트재단과 함께하는 「1784 스쿨혁명」 대학생 멘토를 모집합니다!(마감) [BY 소프트..

https://studybook.tistory.com/57 [UNITY] 게임 배경 설정하기 1. 게임 설명 게임 개발 동아리에서 게임 개발을 시작했다. 유니티를 처음 사용하게 되었는데 게임을 개발하면서 배우게 되는 유니티 사용 방법에 대해 정리할 예정이다. 내가 만들게 된 게임은 studybook.tistory.com (이어서 작성됩니다!) 설정한 배경에 설정, 소리, 힌트, 홀짝버튼을 생성해보자. 버튼 생성 전에 필요한 버튼이미지를 Assets파일의 image파일에 저장한다. 1. 네모 버튼 GameObject에서 마우스 우클릭 > UI > Button-TextMeshPro 를 클릭한다. 그럼 Canvas안에 버튼이 생성되고, EventSystem이 자동으로 생성된다. 이때, EventSystem은 ..

1. 게임 설명 게임 개발 동아리에서 게임 개발을 시작했다. 유니티를 처음 사용하게 되었는데 게임을 개발하면서 배우게 되는 유니티 사용 방법에 대해 정리할 예정이다. 내가 만들게 된 게임은 여러 미니 게임을 골라할 수 있는 게임이다. 그 중 내가 맡은 미니 게임은 "당근 홀짝 게임" 이다. 게임은 총 세 번 진행되며 가려진 당근의 개수가 홀수인지 짝수인지 맞추는 게임이다. 2. 배경 설정 먼저 Assets파일에 image 파일을 만들고 배경이미지로 사용할 이미지를 저장한다. Main Camara에 마우스 우클릭 > Create Empty 를 하면 GameObject가 생성된다. GameObject를 클릭하면 오른쪽에 Inspector가 보이게 된다. Inspector에서 Add Componenet > 검..

1. 수업 전 지금까지 수업을 너무 진도를 나가는 것에만 급급하게 한 것 같아 학생들이 자신이 만든 게임을 즐길 시간을 많이 못 줬던 것 같다는 의견이 나와서 마지막 수업은 학생들이 지금까지 만들었던 게임을 즐겨보는 시간을 가지기로 하였다. 4주차 때 프로젝트를 끝까지 진도를 못 나간 반은 이어서 진도를 다 나가기로 했고, 그다음 자유롭게 게임을 하는 시간을 가지기로 하였다. 코드클럽에서 학생들을 대상으로 필수적으로 해야 하는 설문조사가 있어서 설문조사를 실시하고 우리가 별도로 만든 마지막 소감문을 작성하는 시간도 가졌다. 마지막 수업인 만큼 학생들에게 조그만한 선물도 준비했다. 그리고 마지막 수업 PPT와 시나리오를 준비했다. 2. 수업 진행 -- 수업 시작 전 -- 길다고 생각했던 5주가 벌써 지나 ..

1. 수업 전 이번 프로젝트는 태블릿 PC로 스크래치를 해야 하는 솔반에 맞춰서 코드가 복잡하지 않은 커리큘럼으로 골랐다. 태블릿 PC는 컴퓨터로 스크래치를 할 때보다 숫자 입력 등 제한적이 부분이 좀 있어서 실제로 태블릿 PC로 몇 개의 프로젝트를 만들어 본 다음 비교적 많이 어렵지 않고, 간단한 챗봇으로 선정했다. 하지만 코드클럽 챗봇 커리큘럼은 그냥 질문에 대한 답에 반응해주는 너무 단순한 프로그램이라고 느껴졌다. 우리가 직접 학생들을 수업해본 결과 너무 단순한 게임은 별로 재미를 못 느낄 것 같아 코드클럽 강의안과 우리의 아이디어를 합쳐 새로운 게임인 '나를 맞춰봐!' 프로젝트를 새롭게 만들어 가르쳐 주기로 하였다. '나를 맞춰봐!'는 챗봇 프로그램으로 자신에 대한 퀴즈를 내고 답을 입력하면 답의..

1. 수업 전 2주차 수업을 준비하면서 3주차 수업 때 나갈 강의안을 Deep sea sushi로 정했기 때문에 수업 때 필요한 시나리오와 PPT를 바로 만들었다. 3주차 때 주요 피드백은 뒤에서 봤을 때 PPT글씨가 잘 안보인다는 것이었다. 학생들이 코드를 보면서 짤 수 있도록 코드블럭을 PPT사진에 넣었는데 뒤에서 봤을 때 컴퓨터에 가려져 안 보인다는 것이었다. 그래서 학생들이 코드를 짤 때는 하나하나 반복적으로 불러주면서 코드를 작성할 때까지 기다려주기로 하였다. 그리고 난수, 음수, 변수와 같이 코드를 짜면서 필요한 수학적인 개념들은 앞으로도 자주 쓰일 예정이라서 학생들의 기억에 남도록 나중에 퀴즈로 활용하기로 하였다. 오래 설명 해봤자 학생들이 집중을 잘 못하는 것 같아 말로 간단하게 설명해주고..

1. 수업 전 첫 수업을 마치고 2주차 수업 준비를 위해 팀 회의를 하였다. 회의를 통해 수업 진도를 공유하였고, 수업에서 보충해야 할 것들, 담임 선생님의 조언 등 다음 수업을 위해 피드백할 것들을 공유하였다. 주요한 피드백 사항은 수업 속도와 로그인 양식 통일 실패였다. 처음에 수업을 구성할 때 학생들이 따라오기 힘들어 할까봐 수업 속도를 최대한 느슨하게 계획했다. 그래서 최대 2주에 한 프로젝트를 끝내는 걸 목표로 잡았었다. 그런데 생각보다 학생들의 이해 속도가 빠르고, 따라오는 걸 잘해서 한 주에 한 프로젝트를 끝내는 걸로 수업 속도를 빠르게 해도 될 것 같다는 의견으로 결정되었다. 그리고 학생들이 아이디, 비밀번호 양식을 우리가 미리 정해준 것으로 하지 않고, 자신들이 원하는 것으로 회원가입을 ..

1. 수업 전 코드클럽 SW 교육기부단은 우리가 초등학생들에게 가르쳐 줄 수업을 직접 짠다. 하지만 반드시 코드클럽에서 주어진 강의안을 토대로 수업 커리큘럼을 짜야한다. 위 사진 외에도 더 있지만 난이도가 좀 있는 편이라서 위 사진에서 주어진 7개의 커리큘럼을 1주차씩 완성하는 것으로 수업을 진행하기로 하였다. 위 강의안은 보트레이스, 챗봇 등 학생들이 스크래치를 이용하여 게임을 만드는 방법을 알려준다. 강의안을 보면서 우리가 스크래치로 직접 만들어본 다음, 난이도가 쉬운 순서대로 수업 진도를 나가는 것으로 구성하였다. 우리 팀은 세 개의 조로 나눴었는데(솔, 샘, 풀) 첫 번째 수업 조인 솔반 조가 첫 수업이 9월 30일이라서 그 전까지 줌으로 회의도 하고, 직접 만나서 회의도 하였다. 회의를 할 때는..

1. 코드클럽 SW 교육기부단이란?? 초등학생들을 대상으로 소프트웨어 교육 프로그램을 직접 기획하고, 수업하는 봉사활동이다. 처한 환경에 상관없이 많은 아이들에게 교육의 기회가 돌아갈 수 있도록 많은 아이들이 경험의 기회를 받을 수 있게 하는 것이 코드클럽 SW 교육기부단의 목표이다. - 코드클럽 홈페이지 https://codeclubkorea.org/ 코드클럽한국위원회 104 Clubs 서울, 경기, 인천, 강원, 대구, 부산 등 전국 34개 지역에서 코드클럽 교육이 운영되고 있습니다. codeclubkorea.org 2. 팀소개 우리 팀은 sw교육기부단에서 팀원을 모집하는 글에서 모두 처음 만났다. 컴퓨터학과도 있지만 컴퓨터와 관련 없는 다양한 과인 사람들이 모였고, 총 6명으로 구성되었다. 팀 이름..

1. create 기능(글 추가 기능) create버튼을 클릭했을 때 글을 작성하는 화면이 나오도록 구현해보자. main.html 결과화면 CSS를 클릭하교 delete 버튼을 눌렀을 때 잘 삭제되는 것을 확인할 수 있다. 강의영상 - https://youtu.be/2s6s4IHzGSs

1. store 생성 우리가 redux를 사용하기 위해서 제일 첫 번째를 store를 만들어야 하는 동시에 reducer를 생성해야 했다. 그리고 결과화면 HTML을 클릭했을 때와 CSS를 클릭했을 때 본문의 내용이 잘 바뀌는 것을 볼 수 있다. 그렇다면 배웠던 것을 복습삼아 왜 바뀌는지 생각해보자. 우리는 action을 통해 dispatch에 값을 전달하고 reducer가 state값을 갱신해 dispatch가 subscribe하고 있는 함수들을 호출해주기 때문에 그에 따라 render가 동작해 새로운 state값을 참조하여 UI를 새로 그리기 때문이다. 강의영상 - https://youtu.be/zMTqWoe25aU

이제 웹페이지를 직접 만들어 보자. 1. 정적인 웹페이지 만들기(main화면) 먼저 start칸 웹페이지부터 만들자. main.html WEB Hello, WEB! HTML CSS create HTML HTML is ... 결과화면 2. 부품화 이제 각각의 주요한 덩어리들을 일종의 부품으로 만들어보자. WEB Hello, WEB! 만약 이 부분이 1억줄이라고 생각해보자. 우리의 웹페이지는 너무 복잡해서 한 눈에 들어오지 않을 것이다. 따라서 우리는 저렇게 부분부분에 이름을 붙이기만 하면 나중에 웹브라우저를 전달될 때 훨씬 정돈된 코드를 만들 수 있을 것이다. main.html 결과화면은 위에서 보여준 것과 같지만 코드는 훨씬 정돈되어 보기 편하고 나중에 코드를 재활용하기 쉬워졌다. 강의 영상 - http..

redux 대부 툴 설치 방법 https://github.com/zalmoxisus/redux-devtools-extension 위에 있는 깃허브로 들어가 내리다보면 크롬버전으로 설치할 수 있는 것이 나온다. Chrome Web Store를 클릭하여 들어가 확장기능을 설치한다. 설치하고 내리다보면 Basic store가 있다. 연두색 부분에서 +기호를 빼고 복사하여 red함수 위에 createStore한 함수 안에 붙여넣기 해준다. 홈페이지로 가 개발자도구를 클릭하면 redux가 생성된 것을 볼 수 있다. redux 대부 툴 기능 fire버튼을 각각 클릭해보자. 버튼을 누를 때마다 바뀌는 state값을 보여준다. 따라서 redux 대부 툴이라는 것은 redux에서 store에게 전달된 action들을 버..