중간고사 안내
| 항목 | 내용 |
|---|---|
| 시험명 | 중간고사 |
| 범위 | 1~7주차 전체 |
| 시험 일시 | 8주차 수업 시간 |
| 시험 시간 | 1시간 20분 (80분) |
| 시험 방식 | 재택 시험 (각자 집에서 응시) |
| 배점 | 전체 성적의 20% |
시험 방식
- 재택 시험입니다. 각자 편한 장소에서 시험 시간에 맞춰 응시합니다.
- 시험 시작 시간에 문제가 공개되며, 1시간 20분(80분) 이내에 제출해야 합니다.
- 모든 문제는 P5.js Web Editor에서 스케치를 작성하여 제출합니다.
제출 방법
다음 파일들을 하나의 zip 파일로 묶어 LMS에 제출합니다.
midterm_홍길동.zip
├── urls.txt ← 문제별 P5.js Public URL 목록
├── problem1.png ← 1번 코드 스크린샷
├── problem2.png ← 2번 코드 스크린샷
├── problem3.png ← 3번 코드 스크린샷
├── problem4.png ← 4번 코드 스크린샷
├── problem5.png ← 5번 코드 스크린샷
└── problem6.png ← 6번 코드 스크린샷
URL 또는 스크린샷이 누락된 문제는 채점하지 않습니다.
urls.txt 작성법
메모장이나 텍스트 편집기에서 아래 형식으로 작성합니다.
문제1: https://editor.p5js.org/student/sketches/xxxxx
문제2: https://editor.p5js.org/student/sketches/xxxxx
문제3: https://editor.p5js.org/student/sketches/xxxxx
문제4: https://editor.p5js.org/student/sketches/xxxxx
문제5: https://editor.p5js.org/student/sketches/xxxxx
문제6: https://editor.p5js.org/student/sketches/xxxxx
P5.js Public URL 만드는 법
- P5.js Web Editor에서 스케치 저장 (Ctrl+S / Cmd+S)
- 상단 메뉴 File → Share → 링크 복사
- 복사한 링크를
urls.txt에 붙여넣기
코드 스크린샷 촬영 방법
- P5.js Web Editor에서 코드 전체가 보이도록 화면 조정
- 스크린샷 촬영 (Windows: Win+Shift+S / Mac: Cmd+Shift+4)
- 코드가 길면 여러 장 캡처해도 됩니다 (problem5_1.png, problem5_2.png 등)
- 파일명에 문제 번호를 넣어주세요
zip 파일 만드는 법
- Windows: 파일들을 선택 → 우클릭 → “압축(zip) 폴더로 보내기”
- Mac: 파일들을 선택 → 우클릭 → “압축”
- 파일명:
midterm_본인이름.zip
시험 종료 후 URL의 코드를 수정하는 것을 방지하기 위해서입니다. 제출 시점의 코드를 스크린샷으로 기록합니다.
LLM 사용 허용
ChatGPT, Gemini, Claude 등 LLM 사용을 허용합니다.
단, 다음을 유의하세요: - LLM이 만들어준 코드가 조건을 전부 충족하는지 확인하는 건 여러분의 몫입니다 - 조건이 여러 개인 문제에서 LLM은 일부 조건을 빠뜨리거나 잘못 구현하는 경우가 많습니다 - 반드시 P5.js에서 직접 실행하고, 조건을 하나씩 체크한 후 제출하세요
수업 내용을 이해하고 있다면 LLM은 좋은 도우미가 됩니다. 이해하지 못하고 있다면 LLM의 답을 검증할 수 없습니다.
시험 범위 및 핵심 개념
1~2주차: 도형과 좌표
| 핵심 개념 | 확인 |
|---|---|
createCanvas(), 좌표계 (왼쪽 위가 0,0) |
[ ] |
도형 함수: ellipse(), rect(),
line(), triangle() |
[ ] |
색상: fill(), stroke(),
noStroke(), noFill(),
background() |
[ ] |
| RGB 색상 모델, 투명도 (4번째 인자) | [ ] |
setup()과 draw()의 역할과 차이 |
[ ] |
3주차: 반복문과 패턴
| 핵심 개념 | 확인 |
|---|---|
for문 구조:
for (let i = 0; i < n; i++) |
[ ] |
중첩 for문으로 격자 패턴 |
[ ] |
colorMode(HSB), HSB 색상 모델 |
[ ] |
map() 함수: 값의 범위 변환 |
[ ] |
4주차: 조건문과 인터랙션
| 핵심 개념 | 확인 |
|---|---|
if / else if / else 조건문 |
[ ] |
mouseX, mouseY,
mouseIsPressed |
[ ] |
mousePressed(), keyPressed() 이벤트
함수 |
[ ] |
비교 연산자: ===, !==, <,
>, <=, >= |
[ ] |
논리 연산자: &&, \|\|,
! |
[ ] |
5주차: 움직임과 애니메이션
| 핵심 개념 | 확인 |
|---|---|
변수 갱신으로 움직임: x += speed; |
[ ] |
바운싱: if (x > width) speed *= -1; |
[ ] |
random() 함수 |
[ ] |
frameCount 활용 |
[ ] |
좌표 변환: translate(), rotate(),
push()/pop() |
[ ] |
6주차: 함수와 배열
| 핵심 개념 | 확인 |
|---|---|
사용자 정의 함수: function 이름(매개변수) { } |
[ ] |
| 매개변수와 인자의 관계 | [ ] |
배열 선언: let arr = []; |
[ ] |
배열 접근: arr[0], arr.length,
arr.push() |
[ ] |
배열 + for문으로 다수의 오브젝트 관리 |
[ ] |
7주차: 클래스와 객체
| 핵심 개념 | 확인 |
|---|---|
class 선언, constructor() |
[ ] |
this의 의미: “이 객체 자신의” |
[ ] |
| 프로퍼티와 메서드 | [ ] |
new 키워드로 객체 생성 |
[ ] |
객체 배열:
let balls = []; balls.push(new Ball(...)); |
[ ] |
| 배열 방식(6주차) vs 클래스 방식(7주차)의 차이 | [ ] |
출제 유형
총 6문제, 만점 20점입니다.
모든 문제는 “다음 조건을 모두 만족하는 P5.js 스케치를 작성하시오” 형식입니다. 문제마다 4~10개의 구체적 조건이 주어지며, 조건별 부분 점수로 채점합니다.
| # | 난이도 | 조건 수 | 주요 범위 | 배점 |
|---|---|---|---|---|
| 1 | 쉬움 | 4~5개 | 1~3주차 (도형, 색상, 반복문) | 2점 |
| 2 | 쉬움 | 4~5개 | 3~4주차 (반복문, 조건문, 인터랙션) | 2점 |
| 3 | 보통 | 6~7개 | 4~5주차 (조건문, 움직임, 바운싱) | 3점 |
| 4 | 보통 | 6~7개 | 5~6주차 (함수, 배열, 다중 오브젝트) | 3점 |
| 5 | 어려움 | 8~10개 | 6~7주차 (배열 + 클래스 + 인터랙션) | 5점 |
| 6 | 어려움 | 8~10개 | 1~7주차 통합 | 5점 |
조건별 부분 점수입니다. 예를 들어 3점짜리 문제에 조건 6개이면, 조건 1개당 0.5점입니다. 4개를 충족하면 2점을 받습니다. 완벽하지 않아도 부분 점수를 받을 수 있으니, 먼저 제출하세요.
- 1~7주차 학생용 핸드아웃을 다시 읽어보세요
- 코드를 직접 P5.js 에디터에서 실행해보세요 — 조건을 하나씩 추가하며 확인하는 연습
- 각 주차의 핵심 코드 패턴을 이해하세요:
for문 + 배열 순회if문 + 바운싱/조건 분기class+constructor+ 메서드 + 객체 배열
- 7주차 Ball 클래스 코드를 완전히 이해하면 1~7주차가 정리됩니다
- LLM을 활용하더라도 조건을 하나씩 실행해서 확인하는 습관이 중요합니다
핵심 줄거리 — 이것만 기억하세요
도형을 그리고 (1~2주)
→ 반복해서 패턴을 만들고 (3주)
→ 클릭/키보드에 반응하고 (4주)
→ 변수를 바꿔서 움직이고 (5주)
→ 함수와 배열로 정리하고 (6주)
→ 클래스로 하나로 묶는다 (7주)
이 흐름을 이해하고 있으면 시험 준비의 큰 그림이 잡힙니다.
문의
시험 관련 질문은 수업 시간 또는 개별 연락을 통해 문의해주세요.