정보과목 학생 과제 수행 데이터베이스

1. 자유로운 웹사이트 코드펜 작업링크

웹사이트 링크: https://codepen.io/ihiezdep-the-selector/pen/wBMVJXg

[나만의 웹사이트 제작하기][오금고][임하연]

1. 자유로운 웹사이트 코드펜 작업링크

•

웹사이트 링크: https://codepen.io/ihiezdep-the-selector/pen/wBMVJXg

•

웹사이트 구상: 고등학교때 배우는 수학2 의 미분 개념을 활용해서 그래프를 그렸을 때 그에 맞는 도함수를 그려주는 웹사이트를 제작했다.

•

문제점: 원함수를 그릴 때 손이 떨리는 미세한 값까지 모두 측정해서 도함수가 원하는대로 나오지 않았다. 그래서 스무딩 함수를 활용해서 좀 더 추상적으로 나타내고자 하였다.

•

보완후 작품:

•

간단한 설명: 
사용자가 마우스 드로잉을 통해 임의의 함수 그래프를 직접 그리면, 웹사이트가 이 함수의 도함수 그래프를 실시간으로 계산하여 옆에 그려준다. 마우스 드로잉과 수치 미분 및 스무딩을 할용하여 사용자가 직접 함수를 조작하며 그 함수의 도함수을 체험하고 미적분적인 탐구를 할 수 있도록 돕는다.

2. ai를 활용한 인식관련된 웹사이트 코드펜 작업링크

•

웹사이트 링크: https://codepen.io/ihiezdep-the-selector/pen/azdewXE

•

웹사이트 구상: 가위바위보 게임 , 미디어파이프를 활용해서 가위바위보를 측정하여 랜덤으로 컴퓨터와 가위바위보를 할 수 있는 게임을 만들었다.

[나만의 웹사이트 제작하기][성남고][한태성]

1. 자유로운 웹사이트 코드펜 작업

•

자유로운 웹사이트 코드펜 작업링크 : CodePen CodePen - Create a New Pen

•

웹사이트 구상 : 학습 플래너 쓸때 목표에다가 명언 하나씩 쓰는데 찾기 귀찮아서 스페이스바를 누르면 명언이 나오게 하는 사이트를 만들었다

•

만들기

이런 프롬포트를 적었더니

작동을 시켜보니 익명으로 뜨는 것이 아쉬워서 고쳐보기로 했다

익명인 자료들을 다 지워서 해결하였다

•

수정본 작동 영상

•

소감:이 랜덤 명언 생성기 만들면서, 간단하지만 사용자 경험을 신경 쓴 게 마음에 들었다. API에서 실시간으로 명언을 받아오고, 익명 대신 작가 이름 있는 명언만 보여주니까 더 신뢰감도 생기고 멋져 보이고. 복사나 공유 기능도 있어서 실제로 쓸 때 편리하고, 디자인도 세련돼서 사용하기 좋았다. 이렇게 작은 과제로도 재미있게 웹 개발 감각을 키울 수 있다는 걸 다시 느꼈다.

•

간단한 설명: 이 사이트는 랜덤 명언 생성기다. 버튼이나 스페이스바를 누르면 실제 인물들이 한 명언과 작가 이름이 새로 뜨는데, 작가 이름 없는 명언은 자동으로 걸러져서 ‘익명’으로 안 나온다. 명언은 공개 API에서 받아오고, 복사 버튼으로 클립보드에 저장할 수도 있고, 트위터로 바로 공유도 가능하다. 명언이 부드럽게 바뀌는 애니메이션도 있고, 디자인도 깔끔한 유리판 느낌이라 보기 좋다. 쉽게 명언을 보고 공유할 수 있는 간단한 웹사이트이다.

[나만의 웹사이트 제작하기][영동고][배현준]

1.작품개요

•

ai 활용계획: 입을 다물고 눈을 크게 뜨면 후진하고 입을 연채로 눈을 크게뜨면 전진하고 아닌상황에는 멈추는 로봇

•

하드웨어 설명: 저번에 쓰던것을 그대로 썼다

2. 작품사진

3. 작품 동작 동영상

[ai연동 마빗 제작과제][영동고][배현준]

자유로운 웹사이트 코드펜 작업링크

웹사이트 기초실습(경복여고 20628 최예진)

-클릭하면 아무 지식이나 용어 등을 랜덤으로 간단하게 한 두 줄 알려주는 웹사이트를 제작했다

-단점: 몇 개의 입력된 값들만 반복해서 나오는 것 같다

사용자가 버튼을 클릭할 때마다 랜덤으로 용어나 지식을 새로 검색해서 결과값을 보여주는 코딩을 짜면 될 거 같다.

ai를 활용한 인식관련된 웹사이트 제작

-미디어파이프 손 인식을 활용해서 손가락 갯수를 카운팅하여 손가락 갯수를 숫자로 출력하는 ( 예: 손가락 1개=1, 손가락 2개=2) 사이트 제작하기

손 인식 사이트(경복여고 최예진)

[나만의 웹사이트 제작하기][경복여고][최예진]

1. 자유로운 웹사이트

•

웹사이트 링크: https://codepen.io/2717-the-looper/pen/xbZoNxK

•

끝말잇기 웹사이트인데, 컴퓨터가 가지고 있는 단어 데이터셋이 작다는 한계가 있다.

2. 미디어파이프 AI를 활용한 손 인식 서비스

•

웹사이트 링크: https://codepen.io/2717-the-looper/pen/GgobLOo

•

수도 맞추기 퀴즈 웹사이트인데, 웹캠을 이용하여 손가락으로 표시하면 손가락 개수를 인식해서 정답 여부를 알려준다. 첫 번째 시도에 맞추면 +3점, 두 번째 시도에 맞추면 +2점, 2번 틀리면 다음 문제로 넘어간다.

[나만의 웹사이트 제작하기][정신여고][이영은]

3. 미디어파이프 얼굴인식 모델 마빗과 연동

•

마빗측코드: 입모양으로 모터제어

2. 마빗 티처블 머신 연동하기

•

마빗 모터 티처블머신과 연동 동작 완료

•

마빗측 코드

1. 티처블 머신 모델 만들기

•

티처블머신 모델 링크 https://teachablemachine.withgoogle.com/models/XgULUnunt/

•

포즈

•

[영동고][배현준][티처블 머신 프로젝트]

1. 작품 개요

•

ai 활용 계획: 얼굴을 인식하여 face_visible 변수를 0과 1로 저장한다.

•

하드웨어 설명: 모터 2개를 이용해서 각각의 문을 양쪽으로 움직이는 장치를 만들었고, 마이크로비트 M1, M2 모터에 각각 연결하였다. 문을 움직일 때는 톱니바퀴를 사용하였다.

2. 작품 사진

3. 작품 동작 동영상

[ai연동 마빗 제작 과제][정신여고][이영은]

1. 작품 개요

•

ai활용 계획 : ex_티처블 머신 or 미디어파이프 를 활용해서 모터를 어떻게 움직일지 적어주세요

•

하드웨어 설명 : ex_간단히 어떤 모양을 만들었습니다.

2. 작품 사진

사진 업로드

3. 작품 동작 동영상

영상 업로드

[ai연동 마빗 제작 과제][한삼고][엄은궁]

3. 미디어파이프 얼굴인식 모델 마빗과 연동

•

미디어 파이프 마빗 연동 완료

•

마빗측 코드: 입모양으로 모터 제어

2. 마빗 티처블 머신 연동하기

•

마빗 모터 티처블 머신과 연동 동작 완료

•

마빗측 코드

1. 티처블 머신 모델 만들기

•

티처블 머신 모델 링크: Teachable Machine

•

포즈

•

스마트폰 / 마이크로비트

[정신여고][이영은][티처블 머신 프로젝트

https://teachablemachine.withgoogle.com/models/YCrd5aZai/

동영상 1: cardborad(face app) 오류

[한삼고][엄은궁][티처블 머신 프로젝트

1. 작품 개요

•

ai활용 계획 : ex_티처블 머신 or 미디어파이프 를 활용해서 모터를 어떻게 움직일지 적어주세요

•

하드웨어 설명 : ex_간단히 어떤 모양을 만들었습니다.

2. 작품 사진

사진 업로드

3. 작품 동작 동영상

영상 업로드

[ai연동 마빗 제작 과제][덕성여고][정현선]

1. 작품 개요

•

ai 활용 계획: 티처블머신을 활용해 왼손을 들면 전진하고 오른손을 들면 후진하는 모터사이클을 만든다.

•

하드웨어 설명: 3. Case 01: The Motorcycle을 참고해 하드웨어를 제작했다.

2. 작품 사진

3. 작품 작동 동영상

[ai연동 마빗 제작 과제][한삼고][임우린]

작품 개요

-ai 활용 계획

티처블 머신을 이용해서 오른손을 들면 전진, 왼손을 들면 후진, 주먹을 쥐면 정지하는 자동차 만들기

-하드웨어 설명

wonder building kit 의 자동차 제작 모형을 참고함

(코딩까지 완료했으나 작동이 안 됨…

[ai연동 마빗 제작 과제][경복여고][최예진]

1.작품 개요

•

ai 활용계획: 미디어 파이프를 활용해서 모터에 바퀴를 달아 오른쪽 눈을 감았을 때 모터가 움직이는 자동차 만들기

•

하드웨어 설명: 간단히 자동차 모형을 만들었습니다.

2. 작품사진

3.작품 동작 동영상

[ai연동 마빗 제작 과제][성남고][한태성]

1. 작품 개요

•

ai 활용 계획: 미디어 파이프를 통해 두 눈을 크게 떴을 때 앞으로 전진하는 자동차 만들기

•

하드웨어 설명: Case 04: Obstacles-avoidance Cars를 참고해 간단한 하드웨어를 제작하였다.

2. 작품 사진

3. 작품 동작 동영상

[오금고][임하연][ai 연동 마빗 제작 과제]

1. 작품 개요

•

ai활용 계획 : ex_티처블 머신 or 미디어파이프 를 활용해서 모터를 어떻게 움직일지 적어주세요

•

하드웨어 설명 : ex_간단히 어떤 모양을 만들었습니다.

2. 작품 사진

사진 업로드

3. 작품 동작 동영상

영상 업로드

[ai연동 마빗 제작 과제][상암고][원킹]

미디어 파이프 얼굴 인식 모델 마빗과 연동

2. 마빗 티처블 머신 연동

1. 티처블 머신 모델 만들기

링크: https://teachablemachine.withgoogle.com/models/qhyXpxMUR/

[경복여고][최예진][티처블 머신 프로젝트]

•

링크: https://teachablemachine.withgoogle.com/models/nt6-idtP2/

[한삼고][임우린][티처블 머신 프로젝트]

3. 미디어파이프 얼굴인식 모델 마빗과 연동

•

미디어 파이프 마빗 연동 완료

•

마빗측 코드 : 입모양으로 모터 제어

2. 마빗 티처블 머신 연동하기

•

마빗 모터 티처블 머신 연동 완료

•

마빗 코드

1. 티처블 머신 프로젝트 만들기

•

티처블 머신 모델 링크:https://teachablemachine.withgoogle.com/models/SzaOoNZ8O/

•

포즈

[오금고][임하연][티처블머신 프로젝트]

3.미디어 파이프 얼굴인식모델 마빗과 연동

•

미디어파이프 마빗 연동완료

•

입모양으로 모터 제어

2. 마빗 티쳐블머신 연동하기

•

마빗모터 티쳐블머신과 연동완료

•

마빗측 코드

1. 티쳐블 머신 모델 만들기

•

티쳐블 머신 모델 링크: https://teachablemachine.withgoogle.com/models/2z7_KVMun/

•

포즈

[성남고][한태성][티쳐블머신 프로젝트]

3. 미디어파이프 얼굴인식 모델 마빗과 연동

•

미디어 파이프 마빗 연동 완료

•

마빗측 코드 : 입모양으로 모터 제어

2. 마빗 티처블 머신 연동하기

•

마빗 모터 티처블머신과 연동 동작 완료

•

마빗측 코드 

[상암고][성원경][티처블 머신 프로젝트]

작품 의도 - 이 RC카는 A를 누르면 빠르게 앞으로 움직이고 도 소리가 난다. B를 누르면 천천히 앞으로 움직이고 파# 소리가 난다. A+B를 누르면 뒤로 후진하고 라# 소리가 난다. 이 RC카가 움직이기만 하니까 다른 사람들에게 보여줬을 때 흥미가 떨어지는 느낌이 났다. 그래서 뭔가 소리로 그 부분을 충족시키면 어떨까 싶어서 소리를 넣게 되었다.

소프트웨어 제작 과정 - 각 버튼을 누를 때 음계 소리가 나게 했다. A, B, A+B 버튼을 각각 눌렀을 때 소리를 다르게 맞춰 코딩했다. 각 버튼을 누를 때 앞으로 빨리, 앞으로 천천히, 뒤로 후진 이렇게 만들었다.

문제해결 과정 - 우선 처음에 RC카를 다 조립했을 때는 A 버튼을 누를 때 앞으로 빠르게 전진하고 B 버튼을 누를 때 천천히 앞으로 전진하게 했다. 또 A+B를 누르면 뒤로 후진하게만 설정했었다. 이렇게 하다가 자꾸 이 몸체가 넘어져서 방향을 바꾸면서 설정했다. 그리고 다른 사람들께 보여주었는데 그냥 움직이는 것만 보여주니 조금 하다 흥미가 떨어지는 것 같은 느낌이 들었다. 그래서 각각 버튼을 눌렀을 때 소리를 넣어서 더 흥미롭게 즐길 수 있도록 만들었다. 이렇게 문제를 해결하니까 다른 사람들을 고려해서 더 흥미롭게 만들 수 있었고 나도 어떻게 할까 고민하면서 성장하는 느낌을 받았다. 뜻깊은 시간이었다는 생각이 든다.

[덕성여고][정현][나만의 RC카 만들기]

1. 의도: 블루투스 제어가 가능한 자동차 만들기(속도 조절)

2. 작품 제작 과정:

1) 하드웨어 제작→ Case 01: The Motorcycle

2) 코드 수정하기

기본 코드에서 1, 2, 3에 속도를 늦추도록 코드를 추가했다.

→ 속도 차이가 별로 느껴지지 않아 속도가 급격히 느려지도록 코드를 수정했다.

최종 코드: https://makecode.microbit.org/S42607-50581-33252-91918

3. 최종 영상

[오금고][임하연][나만의 RC카 만들기]