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

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

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

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