🧩 소개
디지털 격차 해소를 위해 중장년층이 스스로 디지털 용어를 점검하고 익힐 수 있도록 OX 퀴즈 형태의 웹 콘텐츠를 제작
이번 프로젝트에서는 ChatGPT를 통해 코딩 프롬프트를 설계하고, Canva의 AI 코드 기능을 통해 웹 형태의 퀴즈를 구현하는 과정을 진행
🛠 진행 방법
문제 기획
대상 : 디지털 입문 단계의 50~60대
문제 형식 : OX 퀴즈, 매번 5문제를 무작위 출제
결과 : 점수에 따라 4단계 등급 제공 (입문자~마스터)
프롬프트 설계 – ChatGPT 활용
ChatGPT에게 필요한 기능과 UI 조건을 입력해 Canva AI 코드 프롬프트 생성 요구
주요 조건 예시:
문제 풀에서 무작위 5문제 추출
선택된 정답 채점
점수에 따른 결과 메시지 출력
“다시 도전” 버튼으로 문제 재구성 가능
코드 구현 – Canva AI 코드 기능 사용
ChatGPT에서 받은 코드를 Canva AI 의 Code App 기능에 그대로 붙여넣어 자동 웹 구현
Canva는 코드 실행 결과를 시각적으로 보여주며, 수정과 테스트가 간편함
웹페이지 디자인은 톤다운 민트 색상과 시니어 친화적 큰 글씨체(Nanum Gothic) 사용
결과물 제작 및 공유
완성된 퀴즈는 웹 링크로 발행하여 스마트폰이나 PC 어디서든 접근 가능
웹 링크 발행 방법 : 우측 상단 디자인에 사용 -> 웹 사이트 -> 웹사이트 게시
https://2023-1globaljapanese.my.canva.site/1-2
Canva를 통해 만든 페이지는 디자인과 기능이 모두 통합된 일체형 콘텐츠로 활용 가능
✅ 결과와 배운 점
ChatGPT와 Canva의 AI 기능을 함께 활용하면 개발 지식 없이도 웹 인터랙션 콘텐츠 제작이 가능함을 체험
단순 정보 전달이 아닌, 참여형 콘텐츠로 학습 효과 및 흥미 유발에 효과적
중장년층 사용자 반응이 긍정적이며, 스스로 반복 학습을 유도하는 데 유용함
💡 배운 점과 나만의 꿀팁
ChatGPT는 프롬프트 설계용 ‘설계자 도구’, Canva AI는 구현과 배포를 위한 ‘제작 도구’로 분리해서 활용하면 시너지가 큼
Canva 코드 기능은 반응형 웹 디자인이 기본으로 적용되므로, 모바일 사용자 대상 콘텐츠 제작에 매우 유리함
반복 출제 문제를 해결하기 위해 문제은행 + 랜덤 함수 조합이 핵심
⚠️ 과정 중에 겪은 시행착오
Canva에서 실행되는 코드가 때로는 외부 브라우저에서 다르게 동작함 → 크롬·사파리 등에서 교차 테스트 필요
코드 내 한글 깨짐 현상 → 반드시
utf-8-sig로 인코딩 후 업로드디자인과 코드가 분리되어 작업될 경우, 시니어 친화적 UI 조정에 시간이 소요됨
🆘 도움이 필요한 부분
퀴즈 결과를 저장하거나 학습 통계를 기록하려면 외부 데이터베이스 연동이 필요하지만, Canva 단독으로는 어려움
중급·고급 퀴즈까지 확장 시 UI 구분/문제 관리 자동화 방식이 필요함 (예: 레벨별 문제 선택 로직)
🚀 앞으로의 계획
난이도별 퀴즈 콘텐츠 확장 (초급·중급·고급)
Canva에서 만든 퀴즈를 다른 교육 플랫폼(LMS 등)과 연동하여 강의 중 활용
릴스형 카드 뉴스 연동을 통해 SNS에서도 퀴즈 참여 유도
시니어 대상 디지털 강사 교육 시 Canva 기반 인터랙티브 콘텐츠 제작법 교육에 활용