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