1교시 — 진행 점검과 공통 가이드라인

오늘은 작품을 완성하는 날이 아니라 방향을 확정하고 막힘을 푸는 날입니다. 완성은 다음 주말까지, 제출은 다음 주 화요일까지입니다.

오늘의 수업 흐름

1. 1교시 — 공통 가이드라인 + 자주 막히는 6가지 해결 패턴
2. 2·3교시 — 1:1 면담 (한 명당 5~6분)
3. 비면담 시간 — 자기 자리에서 작품 작업

면담은 평가 자리가 아니라 막힌 것을 푸는 시간입니다. 부담 없이 솔직하게 가져오면 됩니다.

자기 점검 체크리스트

지금 노트북에서 P5.js Web Editor를 열고, 다음 항목을 자기 점검합니다.

• P5.js 스케치 링크 (Share → Edit Link)
• 컨셉 한 줄 요약 (예: “마우스에 따라 색이 변하는 파티클 분수”)
• 활용 기술 2가지 이상 (클래스 / 벡터-물리 / 데이터 / 노이즈 / 파티클 / 사운드 / 이미지·웹캠)
• 현재 진행도 (없음 / 시작 / 골조 / 디테일 / 거의 완성)
• 막힌 부분 1~3개 — 구체적 질문 형태
• 참고 작품 1~2개 (선택)

16주차 제출 요건

제출물 2가지

시연영상 촬영 가이드

화면 녹화 도구

1. macOS: Shift + Cmd + 5 → 화면 일부 녹화 선택 → 녹화 시작
2. Windows: Win + G (Xbox Game Bar) → 녹화 버튼
3. OBS Studio (양 OS): 더 정밀한 녹화가 필요할 때 무료 사용

사운드 작품 주의사항

해결책 3가지입니다.

1. BlackHole (무료) 또는 Loopback (유료) 설치 — 시스템 사운드를 녹화에 라우팅
2. OBS Studio + 오디오 설정 — 시스템 사운드 캡처
3. 외부 녹음 — 스피커로 재생 + 스마트폰으로 영상 따로 녹화 후 합치기

Windows는 Game Bar가 시스템 사운드를 기본으로 잡습니다. macOS만 이 추가 단계가 필요합니다. 주말 전에 한 번 테스트해봅니다.

인터랙션 작품 주의사항

마우스나 키보드로 인터랙션하는 작품은 커서가 보이도록 설정합니다. 시스템 환경설정에서 커서 강조 옵션을 켤 수 있습니다.

시연영상 구성 권장

1. 0~5초: 시작 화면 + 작품 제목 (텍스트로라도)
2. 5~50초: 다양한 인터랙션 시연 3~5가지 상황
3. 50초~끝: 인상적인 한 컷 또는 페이드아웃

제출 마감

공통 트러블슈팅 6가지

면담 전에 자주 막히는 6가지를 미리 짚습니다. 여기서 해결되는 것은 면담에서 다시 묻지 않고, 자기만의 문제에 면담 시간을 씁니다.

1. “소리가 안 나와요”

브라우저 보안 정책 때문에 사용자 인터랙션 없이는 오디오가 차단됩니다.

let song;

function preload() {
  song = loadSound('assets/music.mp3');
}

function setup() {
  createCanvas(400, 400);
}

function mousePressed() {
  userStartAudio();      // 첫 클릭에서 오디오 컨텍스트 활성화
  song.loop();
}

2. “파티클이 점점 느려져요”

죽은 파티클이 배열에 남아 계속 그려지기 때문입니다.

function draw() {
  background(0, 25);  // 잔상 효과 — 검정 위에 알파 25

  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].display();
    if (particles[i].isDead()) {
      particles.splice(i, 1);  // 죽은 파티클 제거
    }
  }
}

핵심 두 가지입니다.

1. 뒤에서부터 순회 (i--) — splice()로 배열을 줄여도 인덱스가 꼬이지 않음
2. 잔상 효과 — background() 대신 background(0, 25)로 반투명 덮기

3. “색이 다 똑같아 보여요”

RGB로 한두 가지 색만 쓰면 단조로워집니다. HSB 색상환을 활용합니다.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100);
}

function draw() {
  let hue = (frameCount * 0.5) % 360;
  fill(hue, 80, 90);
  ellipse(mouseX, mouseY, 30);
}

4. “인터랙션이 단조로워요”

마우스 위치 하나만 쓰는 경우가 대부분입니다. 조합 패턴을 권장합니다.

1. 마우스 위치 → 파티클 생성 위치
2. 마우스 속도 → 파티클 속도 (이전 프레임과의 차이)
3. 마우스 거리 → 색상/크기 (dist(mouseX, mouseY, width/2, height/2))
4. 키보드 모드 전환 → if (key === '1') 같은 식으로 모드 변경
5. 시간 (frameCount) → 자동 변화 효과

5. “화면이 휑해 보여요”

단색 배경 + 도형 한 종류만이 원인입니다. 4가지 해결 패턴이 있습니다.

1. 배경 그라데이션 — for (let y = 0; y < height; y++) { stroke(...); line(0, y, width, y); }
2. 잔상 효과 — background(0, 25)로 움직임의 궤적 남기기
3. 다중 레이어 — 큰 도형 뒤에 작은 도형, 또는 흐릿한 큰 원 위에 선명한 작은 점
4. 텍스트 한 줄 — 작품 제목이나 상태 텍스트를 모서리에 작게

6. “코드가 너무 길어지고 헷갈려요”

길이 자체는 문제가 아닙니다. 다음 신호를 봅니다.

• 같은 코드 블록이 3번 이상 반복되면 → 함수로 분리 (6주차)
• 비슷한 객체가 모두 개별 변수로 있으면 → 클래스로 묶기 (7주차)
• draw() 함수가 100줄 넘으면 → 섹션별 함수 분리 (drawBackground(), updateParticles(), drawUI())

면담 안내

면담 순서

학번 순으로 진행됩니다 (또는 미리 공지한 시간표대로). 면담 자리에 올 때는 노트북에 스케치 링크를 열어둔 상태로 옵니다.

면담 구조 (한 명당 5~6분)

비면담 시간 활용

면담을 안 하는 동안에는 자기 자리에서 작업합니다.

1. 면담 전 — 자기 점검 체크리스트에서 비어있는 항목 채우기
2. 면담 후 — 강사와 합의한 다음 단계 바로 착수

1교시 핵심 요약

1. 자기 점검 체크리스트 6항목을 채우고 면담에 옵니다
2. 제출물은 스케치 링크(Edit) + 시연영상(30~60초) 두 가지
3. macOS 사용자는 시스템 사운드 녹음 도구를 주말 전에 테스트합니다
4. 트러블슈팅 6가지는 면담에서 다시 묻지 않습니다 — 여기서 해결합니다
5. 면담은 5~6분, 자기 보고 1분을 미리 머릿속으로 정리해 옵니다

다음 교시: 1:1 면담 라운드 1이 시작됩니다.