※ 1회차 (1~3 + 공유 및 피드백), 2회차(4~6 + 전시 및 피드백) 기준, 회당 최대 2시간
※ 회차, 1~6 진행 여부 및 순서는 유동적으로 조정 가능
※ Maximum 2 hours per class: class1(#1~3 + Share & Feedback), class2 (#4~6 + Mini-Exhibition & Feedback)
※ Number of classes, the logistics through 1~6 per class may vary
Class 1회차
1. 참여자 교보재 준비 (10분/min)
Getting Ready
▶ 개인 스마트폰 와이파이 설정
Connect personal smartphones to Wi-Fi
▶ PPT 및 코드 인쇄물, 문구류 배부
Distribute printed PPT and codes, color papers and markers
2. 동기 부여 및 기초 강의 (30분/min)
Motivation & Basics
▶ PPT & 토론: 코딩, 왜 배우는가?
PPT & Discussion: “why do I or should we learn coding?”
– p5.js 및 웹프로그램 소개
introduce p5.js, official and project website, web app
– 코딩 결과물 예제
examples of p5.js coding
– 기초 코딩 개념
basic programming concepts
3. 기초 실습: 분석 및 응용
Basic Practice : Analysis & Application
▶ 웹프로그램상 원하는 응용
Explore and select examples from p5 for 50+ web app
▶ 예제 선택 -예제 코드 출력물상 구조 분석 (색상펜 활용하여 함수, 변수 등 하이라이트)
Use printed codes of selected example and color markers to analyze to highlight codes
▶ 예제 변형하기 Customize Examples
웹프로그램 상의 p5 에디터를 통해 선택한 예제의 함수/메소드, 변수를 원하는 대로 바꿔보기
Change function/methods, variables of given examples codes on p5 editor to create different output of the participants’ own
Class 2회차
4. 1회차 수업 복습 및 작품 구상
Review Class 1 & Ideation for Arts
▶ 1회차 수업 내용 복습
Review the materials from class 1
▶ 코딩 스케치 창작을 위한 주제별 예제 공유 및 구상 시작
Share examples for each theme and start planning my own sketch
예 ex)
– 나의 일상 루틴
Visualize my daily routine
– 나의 초상화 (나의 과거, 현재 또는 미래 모습)
Self-portrait (of my past, present, and future)
– 내가 사랑하는 사람, 동물, 식물, 사물
My beloved living creatures, objects
– 우리 동네 풍경
My neighborhood landscape
– 우리집에서 내가 좋아하는 장소까지의 지도
Road to my favorite places
– 추상화 (규칙, 반복, 랜덤)
Abstraction (rule, iteration, random)
5. 심화 실습: 주제별 창작 (핸드 드로잉)
Advanced Practice: Thematic Creation (Hand Drawing)
▶마커펜으로 종이 위에 간단 그림그리기
Draw with color markers on paper the imagined outcome of p5 sketch
▶ 종이 드로잉의 구현을 위한 주요 코드를 예제와 레퍼런스(명령문 사전)에서 파악, 종이 위에 직접 코드 써보기
Identify main codes for implementing paper drawing, and write code directly on paper
6. 심화 실습: 주제별 창작 (코딩)
Advanced Practice: Thematic Creation (Coding)
▶ 도화지에 작성한 코드를 에디터에 고스란히 타이핑하기
Type the code written in the drawing paper into the p5 web editor
▶ 에디터에 코드 타이핑 완성 후 코드 실행, 인터랙션 작동 확인
Run the codes to see if they work as intended, and then save the final images to personal smartphones
결과물 공유 & 전시 & 피드백🌺
Share & Mini-Exhibition & Feedback
▶ 드로잉 결과물 원본을 주강사의 카카오톡 또는 이메일로 전송
Send p5 sketch to educators via an open group chat established on a Korean chat app
▶ 현장에서 A4에 출력하여 액자에 끼워 배포
Print the sketches on A4 and distribute it on frames
▶ 테이블에 액자 배치 후 미니 전시회 및 피드백 공유
Place the framed printed sketches on the table, do a mini exhibition
▶ 동기, 느낀점, 향후 공부 계획, 학습 정보 등 공유
Feedback Session: share feelings, insight, future study plans, in-depth info for learning or application, etc.
p5 for 50+ 