안녕하세요! 두부쌤
입니다~
입니다~ 오늘은 정보 윤리 관련해서 아이들과 같이 실습했던 내용을 공유해 드리려고 합니다~
피싱 사이트를 직접 제작하고 사이트 링크를 QR코드로 변환해 보는 과정을 통해, ’큐싱(QR코드를 활용한 피싱)’의 위험성을 간접적으로 체험하고 이해하는 활동입니다.
공유 자전거, 공유 킥보드 등 QR 코드를 통해 이용하는 서비스에 악성 QR코드를 덧붙이면 개인정보가 쉽게 유출될 수 있다는 사실을 알려주며 실제 사례를 소개하면 더 좋습니다.◆ 주제
: 피싱 사이트 제작(firebase) → QR 코드 악용(큐싱) 등 정보 윤리 수업에 활용
◆ 실습 도구
: Firebase, 메모장(html 작성)
◆ 실습 과정 요약
: 피싱 사이트 제작(html) → Firebase 웹 호스팅을 통해 배포 → QR코드로 링크 만들어 위험성 일깨우기
들어가기에 앞서 Firebase가 무엇인지 살펴보겠습니다.
Firebase는 모바일 및 웹 애플리케이션 개발 플랫폼으로 제작한 사이트를 온라인으로 배포할 수 있는 웹 호스팅 기능을 지원합니다.
[참고]
Firebase는 Firestore(일정 용량 무료) 기능도 지원하는데요~
Firestore를 통해 실시간으로 데이터를 저장하여 관리할 수 있기에 실제로 로그인에 입력한 데이터를 저장할 수도 있으나, 악용의 여지가 있어 해당 부분은 진행하지 않았습니다.
피싱 사이트 실습 절차
1.
제작할 피싱 사이트 선정 및 피싱 사이트 기본 틀 제작(GPT 활용)
2.
Firesbase 웹 호스팅
3.
QR 코드로 변환
4.
실습 보고서 작성
1. 제작할 피싱 사이트 제작 (.html)
우선 학생들이 많이 사용하는 사이트를 조금 수정하여 NEVER로 진행하겠습니다.
chatGPT를 활용하여 코드를 작성하면 아래 예제와 같은 코드를 쉽게 작성할 수 있습니다~
[html 코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NEVER 로그인 (교육용)</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f5f6f7;
font-family: 'Nanum Gothic', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-wrapper {
width: 360px;
background: white;
padding: 40px 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
}
.logo-text {
font-size: 36px;
color: #03c75a;
font-weight: bold;
margin-bottom: 30px;
}
.login-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.login-form input {
padding: 12px;
border: 1px solid #dcdcdc;
border-radius: 4px;
font-size: 14px;
}
.login-form button {
background-color: #03c75a;
border: none;
color: white;
padding: 12px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.login-form button:hover {
background-color: #02b151;
}
.login-footer {
margin-top: 20px;
font-size: 13px;
color: #777;
}
.login-footer a {
color: #777;
text-decoration: none;
margin: 0 5px;
}
.login-footer a:hover {
text-decoration: underline;
}
.disclaimer {
margin-top: 30px;
font-size: 12px;
color: #ff4d4f;
}
</style>
</head>
<body>
<div class="login-wrapper">
<div class="logo-text">NEVER</div>
<form class="login-form" onsubmit="event.preventDefault(); alert('⚠️이 페이지는 피싱 방지 교육을 위한 가상 페이지입니다.⚠️\n아무런 의심 없이 개인정보를 입력하는 것은 매우 위험할 수 있습니다.');">
<input type="text" placeholder="아이디" required>
<input type="password" placeholder="비밀번호" required>
<button type="submit">로그인</button>
</form>
<div class="login-footer">
<a href="#">아이디 찾기</a> |
<a href="#">비밀번호 찾기</a> |
<a href="#">회원가입</a>
</div>
<p class="disclaimer">⚠️ 이 페이지는 교육용 시뮬레이션입니다. 실제 기업과 무관합니다.</p>
</div>
</body>
</html>
HTML
복사
이렇게 html 파일을 작성해서 실행하면
오른쪽과 같은 사이트가 만들어지고,
아이디와 비밀번호를 입력하여
로그인을 시도하면 경고 메세지를 출력합니다.
[index.html 실행 화면]
2. Firebase 웹 호스팅
이제 만든 html 파일을 다른 사람이 접속할 수 있도록 웹 호스팅을 해보도록 하겠습니다.
프로젝트 이름을 지정한 후 차례대로 다음을 눌러 프로젝트를 만듭니다.
저는 Phishing 프로젝트를 만들었습니다.
② Firebase 호스팅 설정
위 화면에서 시작하기를 누르면 아래와 같이 Hosting 설정 절차가 나오는데, 그대로 따라하시면 됩니다.
이제 명령 프롬프트를 켜서 다음 명령어를 입력합니다.
npm install -g firebase-tools
성공적으로 설치하였습니다!
다음으로 넘어가보겠습니다.
명령 프롬프트 창에 firebase login을 입력하시면 됩니다.
아래 문구가 등장하면 Y를 입력하면 됩니다.
? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?
그럼 구글 로그인 창이 뜹니다.
로그인 한 후, 권한을 허용해 주시면 됩니다.
이제 프로젝트를 실행하기 위해 다음 코드를 입력합니다.
firebase init
성공적으로 시작이 된 모습입니다.
Y 입력 후 방향키로 아래 메뉴를 선택하고 스페이스바를 누르고 엔터를 누르면 됩니다.
? Are you ready to proceed? (Y/n)
>() Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
? Please select an option: (Use arrow keys)
Use an existing project 메뉴를 선택하시면 됩니다. 아까 제작한 프로젝트 이름이 뜹니다.
한 번 더 엔터를 누르면 여러 메시지가 뜨는데, 아래와 같이 입력하시면 됩니다~
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
이제 성공적으로 초기화를 마쳤습니다!
아래 링크로 가시면 index.html 파일과 404.html파일이 생성되어있습니다. (초기 설정한 경로)
C:\Users\user\public
이제 index. html 파일을 이전에 작성한 파일로 교체합니다.
마지막으로 아래 명령어를 통해 Firebase 호스팅에 배포하면 끝입니다!
firebase deploy
Project Console: https://콘솔링크
Hosting URL: https://호스팅링크
해당 링크에서 성공적으로 배포되었는지 확인할 수 있습니다.
다음은 지금까지 절차대로 만든 교육용 피싱 사이트 예시입니다~^^
(해당 사이트는 추후 삭제할 예정입니다.)
3. QR 코드로 변환, 실습 보고서 작성
이렇게 만든 링크를 QR코드로 바꾸어 곳곳에 숨겨 놓는다면 아주 위험하겠죠?
이러한 피해를 예방하기 위해 항상 로그인 페이지 주소를 꼼꼼히 살피고,
의심스러운 링크나 QR코드는 절대 함부로 클릭하지 않도록 교육하는 것입니다. (실습 보고서 활용)
지금까지 Firebase를 활용해 피싱 사이트를 제작해 보는 실습 과정을 나누어보았습니다!
이러한 실습 내용을 다양한 정보 윤리 수업이나 행사에 활용하시면 좋을 것 같습니다~^^
끝으로…
이러한 실습형 수업을 설계하여 진행할 때는 항상 조심스러운 부분이 있습니다…
학생들이 피싱 사이트 제작을 통해 보안의 중요성과 위험성을 체감하고,
디지털 사회에서 자신의 행동에 대해 경각심을 갖게 되는 점은 분명 교육적으로 큰 의미가 있습니다.
하지만 동시에 이러한 지식이 악용되어 실제 범죄로 이어질 가능성도 있다는 점에서 신중함이 필요한 것 같습니다.
오늘 진행한 수업 역시 Firebase의 Firestore 기능을 이용한다면 로그인할 때 입력한 자료를 실제로 저장하여 확인할 수도 있습니다. 이는 실제 피해가 발생한다면 아주 위험한 불법 행위가 될 수도 있기에 각별한 주의가 필요합니다.
따라서 이 수업은 단순히 실제 피싱을 재현하는 것에 그치지 않고, 사이버 보안의 중요성을 스스로 체감하고 윤리적 사고력과 디지털 시민 의식을 함께 기를 수 있는 교육이 되도록 늘 방향성을 점검해야 합니다. (가장 어려운 부분인 것 같습니다...)
이러한 고민은 정보 선생님들이라면 누구나 한 번쯤 마주하게 되는 부분이 아닐까 생각합니다.
함께 책임 있는 디지털 교육의 방향을 고민하고 나눌 수 있으면 좋겠습니다.
감사합니다~^^ 다음에 또 뵙겠습니다!