해야할 일
코드펜 회원 가입 및 메일 인증
나만의 웹사이트 제작하기
나만의 ai웹사이트 제작하기
작품 예시
•
다양한 웹사이트 예시
코드펜 웹 개발 환경
[ 1단계 ] 코드펜에서 작업공간 생성하기
•
코드펜 실습 페이지 코드 접속하기
◦
구글에서 코드펜 검색로그인 하고
◦
로그인 하고 작업 페이지 만들기
•
프로젝트 이름 바꾸고 저장하기
•
저장을 하면 작업공간의 주소가 생성이 된다. 작업공간 링크를 본인 노션에 기록해 두자.
•
화면 세팅 변경
•
아래 처럼 북마크로 저장하고 후에 url로 제출한다.
[ 2단계 ] 생성형AI(챗지피티, 클로드 AI, 제미나이 등)에게 html 코드 달라고 하기
•
~~ 하는 웹사이트 코드 html 코드 합쳐서 주세요.
•
게임, 퀴즈, 시뮬레이션 사이트를 자유롭게 제작해 주세요.
◦
제작 완료후 save 버튼 누르고 작업 url을 제출해 주세요.
[3단계] 미디어파이프 AI를 활용한 손 인식 혹은 얼굴인식 AI 서비스 제작
•
미디어파이프 AI를 추가하여 html 코드 생성
•
예시의 신호 송수신은 신경쓰지 마세요
◦
예시1 : 미디어파이프 손 인식을 활용해서 손가락 갯수 카운팅하여 갯수를 소리로 출력하는 html 코드 합쳐서 주세요
◦
예시2: 얼굴 인식 하는 미디어파이프 ai html코드 작성해 주세요
•
다른 제어 방식 또 추가
•
다른방식 제어 추가
제출 안내
•
과제 제출 데이터 베이스 에 이름과 학교를 적고 아래 내용 적으시오
•
제출 보고서 포함 내용
1.
자유로운 웹사이트 코드펜 작업링크
a.
화면 캡처, 코드, 간단한 설명
2.
ai를 활용한 인식관련된 웹사이트 코드펜 작업링크
a.
화면 캡처, 코드 , 간단한 설명