인지 부하 이론과 행동 유도성(Affordance) 개념을 이해하고, 직관적인 과학교육 콘텐츠의 UI/UX 설계 원칙을 학습합니다.
code 실습 및 아이디에이션
1.심화 실습: 변수 통제 및 실시간 데이터 시각화(그래프) 추가
2.기획: 나만의 과학 탐구 콘텐츠 최종 프로젝트 구상
3.배포 및 리뷰: HTML 계획서 제작, 배포, 상호 동료 평가
image
이미지 파일명: images/week4_goals.png
Prompt: A modern illustration showing an educator and a student analyzing a web-based physics simulation interface, focusing on UI/UX elements and data charts. Flat vector design.
touch_app
과학교육 콘텐츠에서 UX/UI란?
aspect_ratio
UI (User Interface)
"화면에 보이는 디자인과 배치"
버튼의 색상, 폰트의 크기, 슬라이더의 위치 등 사용자가 시스템과 소통하기 위해 마주하는 시각적인 화면 그 자체를 의미합니다.
mood
UX (User Experience)
"사용하면서 느끼는 종합적 경험"
"조작이 직관적이다", "과학 원리가 한눈에 들어온다"와 같이 UI를 통해 학습자가 겪는 인지적, 감정적 만족도를 의미합니다.
아무리 뛰어난 물리 엔진을 코딩해도, UI가 복잡하면 학생의 UX는 엉망이 됩니다.
lightbulb
행동 유도성 (Affordance) 이론
“어포던스(Affordance)란 사물과 유기체 사이의 관계를 나타내며, 사물이 어떻게 사용될 수 있는지를 직관적으로 결정하는 속성이다.” 1)
- Don Norman -
우리가 의자(Chair)를 보면 누가 가르쳐주지 않아도 '앉는 것'임을 아는 것처럼,
디지털 환경에서도 설명서 없이 직관적으로 조작 방법을 깨닫게 하는 디자인이 필요합니다.
1) 노먼, D. A. (2016). 디자인과 인간 심리 (이창희 역). 학지사. Norman, D. A. (2013). The design of everyday things: Revised and expanded edition. Basic books.
door_sliding
나쁜 Affordance의 대표적 사례: Norman Door
형태와 기능의 불일치
잡고 당기기 좋게 생긴 손잡이를 달아 놓고, 그 위에 '미시오'라고 써붙인 문을 본 적이 있나요?
사람들은 글씨를 읽기 전에 시각적 형태(손잡이)가 주는 행동 유도성에 따라 무의식적으로 문을 당기게 됩니다.
사용자가 실수를 한다면, 사용자의 멍청함이 아니라 디자인(UI)의 잘못입니다!
design_services
디지털 환경에서의 Affordance 비교
웹 시뮬레이션을 제작할 때, 어떤 버튼이 더 '누르고 싶게' 생겼나요?
단순히 "버튼 만들어줘"라고 요구하기보다, "그림자와 둥근 모서리가 있는 입체적인 버튼으로 만들어줘"라고 프롬프트를 작성해야 합니다.
animation
조작에 반응하는 시각적 피드백
인터랙션(Interaction)의 완성
버튼을 눌렀거나, 마우스를 올렸을 때 아무런 변화가 없다면 사용자는 자신의 조작이 제대로 들어갔는지 확신할 수 없습니다.
Prompt: A diagram explaining Cognitive Load Theory with a brain and puzzle pieces. Top green part is Germane Load, middle orange part is Extraneous Load, bottom blue part is Intrinsic Load.
tips_and_updates 본원적 인지 부하 (Germane Load)
새로운 정보를 깊이 이해하고 스키마(지식 구조)를 형성하는 데 쓰이는 정신적 노력
개념 연결
문제 해결 연습
극대화해야 함: 심층 학습 촉진
warning_amber 외재적 인지 부하 (Extraneous Load)
정보 전달 방식이나 설계의 비효율성으로 인한 불필요한 부담
산만한 레이아웃
과도한 텍스트
비효율적인 예시
최소화해야 함: 학습 방해
menu_book 내재적 인지 부하 (Intrinsic Load)
학습 내용 자체의 고유한 난이도 및 복잡성
주제 복잡도
배경지식 부족
조절 불가: 학습 내용에 비례
emoji_objects
효율적인 학습 전략: 외재적 부하 최소화 + 본원적 부하 극대화 = 학습 성과 향상
Prompt: "진자의 길이(L)와 중력 가속도(g)를 조작 변수로 받고, 위 공식을 이용하여 주기(T)를 실시간 계산하는 함수를 만들어."
예시 2: 만유인력
$$ F = G \frac{m_1 m_2}{r^2} $$
실제 TeX 코드
F = G \frac{m_1 m_2}{r^2}
Prompt: "두 물체의 질량(m1, m2)과 거리(r)를 슬라이더로 조작하면, 만유인력(F)이 계산되어 두 물체가 끌어당기는 애니메이션을 구현해."
add_circle
[실습 2-1] 고급 통제 변수 패널 추가하기
settings 심화 실험 환경 설정
달 (1.6)목성 (24.7)
가상 실험실의 묘미: 중력을 꺼버린다면?
초등학생들에게 "달에 가면 몸무게가 가벼워진다"고 말로만 설명하는 대신, 시뮬레이션의 중력 값을 1.6으로 내렸을 때 진자의 움직임이나 수평 잡기가 어떻게 변하는지 직접 보게 합니다.
User: "기존 화면 우측 상단에 '고급 설정 ⚙️' 토글 버튼을 만들고, 누르면 중력 가속도(g)를 조절할 수 있는 슬라이더 패널이 뜨게 해 줘. 슬라이더를 달(1.6)이나 지구(9.8)로 조작하면, 시뮬레이션 내부의 물리 계산 수식에 즉각 반영되어 물체가 떨어지는 속도가 실시간으로 변해야 해."
insert_chart
데이터 시각화 (Data Visualization)의 필요성
숫자의 나열에서 직관적인 '흐름'으로
변수를 조작할 때 나타나는 결과를 단순히 텍스트(예: 속도 10m/s)로만 보여주면 학생들은 데이터의 추세(Trend)를 파악하기 어렵습니다.
시간의 흐름이나 변수에 따른 변화를 실시간 그래프(Graph)로 시각화하면, 비례/반비례 관계와 과학적 모델링을 직관적으로 이해할 수 있습니다.
프론트엔드 그래프 라이브러리 (CDN)
- Chart.js (가장 대중적, 예쁘고 가벼움)
- D3.js (매우 복잡하지만 커스텀 자유도 최상)
- Plotly (빅데이터 시각화 특화)
image
이미지 파일명: images/data_viz_science.png
Prompt: A clear UI showing a physics simulation on the left and a dynamic, real-time line chart generating data on the right side.
pie_chart
탐구 목적에 맞는 그래프 종류 선택
show_chart
꺾은선 그래프 (Line Chart)
사용 목적: 시간에 따른 데이터의 연속적인 변화 추세를 볼 때.
과학 적용: 진자의 속도 변화, 물을 끓일 때 시간에 따른 온도 변화 곡선.
bar_chart
막대 그래프 (Bar Chart)
사용 목적: 서로 다른 그룹 간의 크기(양)를 명확하게 비교할 때.
과학 적용: 마찰력(나무, 얼음, 유리)에 따른 물체의 이동 거리 비교.
scatter_plot
산점도 (Scatter Plot)
사용 목적: 두 변수 사이의 상관관계(비례, 반비례)를 찾을 때.
과학 적용: 질량과 가속도의 관계 분석, 용수철이 늘어난 길이와 무게의 관계(훅의 법칙).
ssid_chart
[실습 2-2] Chart.js로 실시간 그래프 연동
AI가 예쁘고 동적인 그래프 코드를 짜도록 만들기 위해 구체적인 라이브러리를 지정해 줍니다.
복사하기
화면 우측에 시뮬레이션 결과를 보여주는 실시간 그래프를 추가해 줘.
- 라이브러리: CDN을 통해 Chart.js를 불러와서 사용해.
- X축: 시간(초) / Y축: 물체의 속도(m/s)
- 작동 방식: 시뮬레이션이 시작되면 매 0.5초마다 현재 속도 데이터를 그래프에 새로운 포인트로 추가하고 부드러운 꺾은선 그래프(Line Chart)를 그려줘.
- 실험을 다시 시작하는 초기화 버튼을 누르면, 그래프의 기존 데이터도 모두 지워지고 0부터 시작하도록 연동해.
apps
[참고] Chart.js로 구현할 수 있는 차트의 종류
직접 프롬프트에 "Chart.js로 OOO 차트를 그려줘"라고 요청해 보세요!
1. Line Chart (꺾은선)
2. Bar Chart (막대)
3. Pie Chart (원형)
4. Doughnut (도넛)
5. Radar (방사형/스파이더)
6. Polar Area (극좌표)
insights
[참고] D3.js / Plotly 예시 (고급 시각화)
Chart.js 외에도 AI에게 D3.js 또는 Plotly 기반 시각화를 요청할 수 있습니다.
D3.js 예시: 막대 그래프 커스텀
SVG 직접 제어
장점: 축, 애니메이션, 상호작용을 세밀하게 커스터마이징 가능
Plotly 예시: 3D Surface
과학 시각화 특화
장점: 확대/회전/툴팁 등 내장 인터랙션이 강력함
emoji_objects
최종 프로젝트: 나만의 과학 탐구 콘텐츠 기획
"어떤 과학 콘텐츠를 만들 것인가?"
기말 프로젝트를 위해, 지금까지 배운 Vibe 코딩과 Gamification, UX/UI 지식을 바탕으로 여러분이 학교 현장에서 실제 수업에 활용할 수 있는 독창적인 탐구 시뮬레이션을 기획합니다.
check_circle 필수 포함 요소
✅ 교육과정 연계: 초등 과학 성취기준 (에너지 및 자유 탐구 영역)
✅ 상호작용(Interaction): 조작 변수와 통제 변수가 존재하는가?
✅ 데이터 시각화: 실험 결과를 표나 그래프로 즉각 확인할 수 있는가?
✅ 게임적 요소(Gamification): 목표, 점수, 피드백 등 재미 요소 부여
rocket_launch
기획이 탄탄해야 AI 프롬프트가 명확해집니다.
article
HTML 프로젝트 계획서 (Dogfooding)
기획안을 한글(hwp)이나 워드가 아닌, HTML 단일 파일 웹페이지 형식으로 작성합니다. 배운 기술을 기획 단계부터 직접 적용해 보는 과정입니다.
1. 프로젝트 개요
콘텐츠 제목: (가칭)
적용 학년/단원: (예: 초등 6학년 에너지와 생활)
학습 목표: 시뮬레이션을 통해 학생이 깨달아야 하는 원리
2. 핵심 상호작용 및 수식
조작 변수 & 종속 변수: 무엇을 조작하고 결과를 보는가?
적용 공식: 바탕이 되는 과학 원리 (수학적 모델링)
데이터 시각화 방법: 선 그래프? 막대 그래프?
3. 게이미피케이션 요소
미션/목표: 학생에게 어떤 과제가 주어지는가?
스캐폴딩/피드백: 성공/실패 시 어떤 피드백을 제공할 것인가?
4. 예상 UI/UX 설계
화면 레이아웃: 슬라이더, 캔버스, 그래프의 위치
행동 유도성(Affordance): 초등학생을 위해 어떻게 직관적으로 만들 것인가?
auto_awesome
[실습 3-1] AI와 대화하며 계획서 웹문서 만들기
머릿속 아이디어를 AI에게 설명하고, 예쁜 웹사이트 문서 형태로 만들어 달라고 요구합니다.
chat 프롬프트 템플릿
내가 구상하는 초등 과학교육 콘텐츠는 [행성별 중력에 따른 물체의 낙하 속도 비교] 게임이야.
이 아이디어를 바탕으로 앞서 배운 4가지 항목(1. 개요, 2. 변수와 수식, 3. 게임화 요소, 4. UI 설계)이 체계적으로 들어간 '프로젝트 기획서'를 작성해 줘.
조건:
- 이 기획서는 단일 HTML 파일로 만들어야 해.
- Tailwind CSS를 사용하여 깔끔하고 세련된 카드형 레이아웃의 보고서 양식으로 디자인해 줘.
- 수식이 들어갈 부분은 KaTeX를 사용해서 수식이 예쁘게 렌더링되게 해 줘.
