@고타열

안녕하세요, 기술 교사 고태열입니다. 기술교과 디자인씽킹 8단계, 스크롤 웹페이지로 만들어봤습니다

수업 시간에 디자인씽킹 8단계(공감-문제정의-아이디어 창출-아이디어 선정-구체화-제작-실행-평가)를 설명할 때마다, PPT 한 장짜리 순서도로는 아이들에게 "이게 왜 한 방향이 아니라 순환 구조인지"가 잘 전달되지 않았습니다. 그래서 이번에는 학생들이 직접 스크롤하며 단계를 몸으로 따라가 볼 수 있는 웹페이지를 만들어봤습니다.

왜 굳이 웹페이지로? 종이 자료나 PPT는 8단계를 한 화면에 욱여넣거나, 여러 장으로 흩어놓아야 합니다. 웹페이지로 만들면 한 단계씩 화면 전체를 차지하며 등장시킬 수 있고, 마지막에 "평가가 다시 공감으로 이어진다"는 순환 구조를 스크롤의 흐름 자체로 보여줄 수 있다는 게 가장 큰 장점이었습니다. 컨셉: 설계 도면(Blueprint) 위에 수업 내용을 얹기 기술 교과라는 정체성을 살리기 위해 디자인 컨셉을 "제도 도면"으로 잡았습니다. 각 단계를 "SHEET 01/08" 식의 도면 번호로 표시 카드 모서리에 제도 도면의 등록 마크(십자선)를 넣어 설계 도면 느낌 강조 스크롤에 따라 카드가 3D로 살짝 기울어지는 효과로 입체감 부여 첫 화면에는 마우스를 따라 회전하는 와이어프레임 큐브 배치 처음에는 어두운 배경으로 만들었는데, 실제 수업 자료로 쓰기엔 눈이 피로할 수 있어 밝은 종이 톤 배경에 파란 잉크 라인 느낌으로 다시 바꿨습니다. 실제 만든 순서 8단계 각각에 들어갈 설명과, 기술 교과 수업에서 바로 쓸 수 있는 구체적 활동(인터뷰, POV/HMW 질문, 브레인스토밍, 다중투표법, CAD 스케치, 안전수칙, 동료평가 등)을 먼저 정리했습니다. AI 도구(Claude)를 이용해 전체 구조와 코드를 한 번에 만든 뒤, 결과물을 보면서 수정 요청을 반복했습니다. 이후 "줄바꿈이 단어 중간에서 끊긴다", "배경이 너무 어둡다", "클릭할 요소가 부족하다", "목차가 있으면 좋겠다" 같은 실사용 관점의 피드백을 하나씩 반영했습니다. 목차 카드를 눌러 원하는 단계로 바로 이동하는 기능과, 각 단계 하단의 이전·다음 단계 버튼을 추가해 수업 중에도 원하는 부분을 빠르게 찾아갈 수 있도록 했습니다. 느낀 점 디자인 컨셉을 먼저 정하고("이 교과라면 어떤 시각적 언어가 어울릴까") 세부 사항을 다듬어가는 방식이, 처음부터 완성형을 기대하는 것보다 훨씬 수월했습니다. 코드를 한 줄도 직접 치지 않았지만, "무엇을 가르치고 싶은가"와 "학생이 어떻게 이해하길 바라는가"를 계속 구체화하는 게 실제 작업의 대부분이었습니다.

수업 자료를 웹페이지 형태로 만들어보고 싶은 선생님들께 작은 참고가 되었으면 합니다. 읽어주셔서 감사합니다^^.

안녕하세요, 기술 교사 고태열입니다. 학교에 있다 보면 기술 교사가 가정 수업을 맡는 일이 종종 있습니다. 이번에 준비한 건 고등학생 대상 중년기·노년기 생활 단원에서 쓸 간단! 수업 자료입니다. 옛날엔 바이브코딩을 몰랐기 때문에, PPT로 자료를 구성하고 다같이 게임을 플레이하는 형식으로 만들었습니다.

작은 종이 카드를 나눠주고, PPT를 넘기며 해당하는 결과를 종이 카드에 적도록 지도했었습니다. 나름 제가 레크레이션 강사처럼 재밌는 상황을 유도하며 수업 도입을 열었던 기억이 있네요 ㅎㅎ ("여러분이 팀장 승진 제안을 받았다고 상상해보세요, 그런데 야근이 두 배로 늘어난다면?" 같은 식).. 나름대로 반응이 좋았었습니다. ㅋㅋ

하지만, 요즘은 바이브코딩으로 시뮬레이션 게임을 쉽게 만들 수 있었습니다. 해당 PPT를 자료로 넣어 시뮬레이션 게임을 만들어달라고 하니 1분이면 만들어주더라구요.

종이 카드와 계산 과정이 사라지니, 수업 시간은 오롯이 "왜 그 선택을 했는지" 이야기하는 데 쓸 수 있었습니다. 물론 시간을 더 들여서 움직이는 애니메이션이나 3D 컴포넌트를 넣을 수 있겠지만, 수업 현장에서 학생들과 소통하며 간단히 진행하기에 (그리고 제작 시간 줄이기에..) 이정도면 충분하더라구요 ㅎㅎ 돌아보면 수업의 힘은 화려한 이펙트가 아니라 딜레마 상황 자체의 몰입감에서 나왔던 것 같아요. 그건 종이 카드 시절부터 이미 갖고 있던 것이고, 바이브코딩은 그 콘텐츠를 교사에서 학생에게 넘겨준 것뿐이었습니다. 고등학교 수업 현장에서 가정 수업에 대한 고민이 많은데요, 이런식으로 수업 여는 사람도 있구나~ 하고 봐주시면 좋을 것 같습니다. 읽어주셔서 감사합니다.

안녕하세요, 기술 교사 고태열입니다. 수업을 다 하고 시간이 애매하게 남거나, 학생들에게 효과적인 복습 시간을 주고 싶었던 적 있으신가요? 저는 그럴 때마다 오늘 배운 내용을 함께 훑어보거나 학생들의 질문을 받으며 마무리하곤 했습니다. 그런데 처음에는 학생들이 적극적으로 참여하다가도 시간이 지나면 집중도가 떨어지고, 복습 활동 자체가 조금 지루하게 느껴지는 경우가 많았습니다. 그래서 ‘좀 더 재미있고, 효과적으로 복습할 수 있는 방법이 없을까?’ 고민하게 되었고, 제가 선택한 방법은 바로 [인터랙티브 학습지]였습니다. 저는 제미나이를 활용해 단원 복습용 웹페이지를 직접 만들고, 이를 QR코드로 학생들에게 공유했습니다.

학생들은 수업이 끝난 뒤에도 QR코드를 통해 웹페이지에 접속해 오늘 배운 내용을 다시 확인하고, 다양한 문제와 활동을 직접 수행하며 자연스럽게 복습할 수 있도록 구성했습니다.

단순히 내용을 다시 읽어보는 복습에서 벗어나, 학생들이 직접 클릭하고, 선택하고, 문제를 해결하는 과정 자체가 학습이 되도록 만든 것이죠.

올해 초에 만들었고, 그 땐 캔버스의 기능이 좋지 않았어서 수준이 높진 않네요.

나중에는 한 패들렛에 모아놓고, 모든 단원을 복습할 수 있게 준비했습니다. 학생들이 2차 정기고사 전에는 먼저 QR코드를 찾을 정도로 인기가 많았네요 ㅎㅎ

한번 살펴보시고, 자유롭게 의견 남겨주세요^^ 아래는 제가 그 시절에 만드는 과정을 남겨둔 제 블로그 입니다. 지금보니 기능도, UI도 많이 달라졌네요.

찾아주신 분들 감사합니다.