매년 듣는 학폭 예방교육이 지겨워서 직접 만들어봤다. (댓글로 의견 좀)
웹 링크
https://chominjun-127.github.io/information-communication-ethics/
깃허브 링크
https://github.com/CHOMINJUN-127
X 링크
웹 사진
학교에서 하는 학폭 관련 교육이 정말 좋은 것일까?
처음에는 세특에 작성할 결과물을 하나 만들어 보려고 시작했다.
그러다가 학교에서 학교폭력이나 정보통신 윤리와 관련된 교육을 받으면서 그냥 영상을 보고 설명을 듣는 것만으로 실제로 학생들의 생각이나 행동이 바뀔 수 있을까 하는 생각이 들었다.
특히 학교폭력이나 사이버 폭력은 실제로 피해를 당하면 어떤 일이 발생하는지 직접 경험해 보지 않는 이상 단순히 "하면 안 된다"라는 설명만으로는 그 심각성을 제대로 느끼기 어려울 것 같았다.
그래서 아예 교육 내용을 웹으로 만들어 보면 어떨까 생각했다.
단순히 글을 많이 넣은 교육용 홈페이지를 만드는 것이 아니라 실제 데이터를 보여주고 직접 선택하고 시뮬레이션을 해보고 자신의 행동을 분석할 수 있도록 만드는 방향으로 만들었다.
전체적인 개발에는 HTML, CSS, JavaScript를 사용했다.
HTML로 각 페이지의 구조를 만들고 CSS로 디자인과 반응형 화면을 구성했으며 JavaScript를 이용해서 버튼을 누르면 화면이 바뀌거나 데이터를 계산하고 시뮬레이션이 실행되도록 만들었다.
여기에 Chart.js, D3.js, Leaflet 같은 JavaScript 라이브러리를 추가로 사용했다.
Chart.js는 그래프와 데이터 분석에 사용했고 D3.js는 네트워크 형태의 시각화와 확산 과정을 표현하는 데 사용했다. Leaflet은 지도 위에 데이터를 표시하기 위해 사용했다.
페이지마다 같은 디자인을 반복하기보다는 주제에 맞게 조금씩 다른 UI를 만들었다.
상단에는 여러 페이지를 이동할 수 있는 네비게이션을 만들었고 내부에서도 세부 기능을 선택할 수 있도록 구성했다. 카드 형태의 정보 화면과 검색 및 필터 기능, 애니메이션, 그래프, 시뮬레이션 화면 등을 각각 JavaScript로 연결했다.
가장 먼저 생각했던 것은 사이버 폭력에 관한 부분이었다.
사이버 폭력은 실제 피해가 발생했을 때 단순히 한 사람에게서 끝나는 것이 아니라 온라인에서 다른 사람에게 계속 전달될 수 있다는 점에 집중했다.
그래서 관련 데이터를 그래프로 보여주고 D3.js를 이용해서 사람과 사람 사이의 연결 관계를 네트워크 형태로 표현했다.
하나의 행동이나 정보가 다른 사람들에게 전달되는 과정을 시각적으로 볼 수 있도록 만들었고 여러 가지 데이터를 대시보드 형태로 확인할 수 있도록 했다.
처음에는 여기에서 더 발전시켜서 실제 사용자의 개인정보와 지역을 입력받고 상황에 따라 휴대폰으로 알림을 보내거나 피해자와 가해자의 입장을 직접 경험하게 만드는 기능까지 생각했었다.
하지만 실제로 구현하려고 하니 개인정보를 다루는 문제와 알림 시스템을 구축하는 문제뿐만 아니라 실제 상황을 표현하기 위해 욕설이나 자극적인 표현이 들어갈 수 있다는 문제도 있었다.
그래서 그런 기능은 제외하고 데이터를 이용한 시각화와 시뮬레이션 중심으로 방향을 바꾸었다.
그리고 사이버 폭력만 넣으면 너무 한 가지 문제만 다루는 것 같아서 정보통신 윤리와 관련된 내용도 별도의 페이지로 만들었다.
정보통신 윤리 페이지에서는 단순히 정보를 읽는 것에서 끝나는 것이 아니라 사용자가 직접 여러 질문에 답하면서 자신의 디지털 행동을 확인할 수 있도록 자가진단 기능을 만들었다.
여러 문항에 답하면 응답 결과를 계산해서 자신의 정보통신 윤리와 관련된 성향을 확인할 수 있도록 구성했고 결과를 단순한 숫자 하나로 보여주는 것이 아니라 유형과 설명을 함께 보여주도록 만들었다.
이 과정에서 JavaScript로 사용자의 선택값을 저장하고 점수를 계산한 다음 결과 화면에 다시 출력하는 구조를 직접 구현했다.
또 정보통신 윤리와 관련된 데이터를 그래프로 보여주기 위해 Chart.js를 사용했고 Leaflet을 이용해서 국가나 지역과 관련된 정보를 지도 형태로 확인할 수 있도록 만들었다.
이렇게 만들면서 정보통신 윤리는 단순히 개인정보를 조심하거나 인터넷에서 예의를 지키는 문제만이 아니라 정보의 신뢰성을 판단하는 것, 온라인에서 다른 사람과 의사소통하는 방식, 디지털 환경에서 자신의 행동에 책임을 가지는 것까지 상당히 넓은 분야라는 것을 알게 되었다.
성인지 감수성과 양성평등에 관한 부분도 따로 만들었다.
이 부분은 단순히 성인지 감수성이 무엇인지 설명하는 페이지로 만들지 않고 실제 사례와 관련 자료를 찾아볼 수 있도록 구성했다.
검색 기능과 필터 기능을 만들어서 원하는 내용을 찾아볼 수 있도록 했고 각각의 사례를 카드 형태로 보여준 다음 자세한 내용을 확인할 수 있는 구조로 만들었다.
관련된 뉴스나 사례뿐만 아니라 법률과 판례 등도 함께 확인할 수 있도록 구성했다.
특히 이 부분을 만들면서 성인지 감수성이라는 것이 단순히 남성과 여성의 차이를 설명하는 개념이 아니라 실제 사회에서 발생하는 여러 상황을 어떻게 바라보고 판단하는지와 연결되어 있다는 생각이 들었다.
그래서 관련 사례를 단순히 나열하기보다는 검색하고 비교하면서 직접 내용을 확인할 수 있도록 만드는 데 집중했다.
또 다른 나라에서는 관련 문제가 어느 정도 발생하고 있는지 비교할 수 있는 데이터도 넣었다.
이 부분은 단순히 우리나라의 상황만 보고 판단하는 것보다 다른 국가와 비교했을 때 어떤 차이가 있는지 확인해 보는 것이 더 의미가 있다고 생각해서 넣었다.
국가별 데이터를 그래프나 시각화 형태로 보여주면 숫자만 적어놓는 것보다 차이를 훨씬 쉽게 확인할 수 있기 때문이다.
이렇게 데이터를 직접 넣어보고 비교하면서 같은 사회 문제라도 국가와 사회적 환경에 따라 발생 양상이나 대응 방식이 다를 수 있다는 것도 알게 되었다.
법률과 판례를 함께 넣은 것도 비슷한 이유였다.
교육에서는 흔히 "이런 행동은 하면 안 된다"라고 설명하지만 실제 사회에서는 문제가 발생했을 때 어떤 법률이 적용되고 어떤 판례가 있는지까지 연결되어 있다.
그래서 관련 법률과 판례를 확인할 수 있도록 만들어 단순한 교육 내용을 실제 사회의 법과 연결해서 볼 수 있도록 했다.
그리고 이번 프로젝트에서 가장 많이 직접 만들어 보고 싶었던 부분은 온라인 도박 시뮬레이션이었다.
도박 예방 교육도 결국 하지 말라는 설명만 하는 경우가 많은데 실제로 사람들이 왜 계속 도박을 하게 되는지 직접 경험해 보면 조금 다르게 생각할 수 있을 것 같았다.
그래서 실제로 많이 접할 수 있는 사다리 게임과 홀짝 게임을 만들었고 여기에 세 개의 그림이 맞아야 하는 형태의 게임까지 추가했다.
JavaScript를 이용해서 게임 결과에 따라 보유 금액이 증가하거나 감소하도록 만들었고 사용자가 직접 돈을 추가할 수 있도록 했다.
배팅 금액도 직접 조절할 수 있도록 만들었다.
확률도 무조건 사용자가 지도록 만들지는 않았다.
이기기도 하고 돈을 따기도 하도록 만들어서 실제로 게임을 계속하게 되는 상황을 어느 정도 경험할 수 있도록 했다.
다만 장기적으로는 돈을 잃는 쪽으로 조금 더 기울도록 확률을 설정했다.
여기서 중요한 것은 게임 자체보다 그 이후였다.
게임을 하면서 발생하는 행동 데이터를 계속 기록하도록 만들었다.
게임 횟수, 승률, 총 수익, 총 손실, 순수익, 최대 배팅 금액 등 여러 가지 데이터를 계산하고 이를 화면에서 확인할 수 있도록 만들었다.
Chart.js를 이용해서 데이터를 그래프로도 보여주기 때문에 게임을 끝낸 뒤 내가 어떤 식으로 게임을 했는지 확인할 수 있다.
예를 들어 처음에는 적은 돈으로 시작했는데 점점 배팅 금액이 커졌는지, 얼마나 많이 이겼는지, 결국 전체적으로 돈을 벌었는지 잃었는지 등을 확인할 수 있다.
이 기능을 만들면서 내가 관심을 가지고 있는 데이터 분석과도 연결할 수 있었다.
그냥 게임을 하나 만드는 것이 아니라 사용자의 행동을 데이터로 만들고 그 데이터를 다시 분석하는 구조를 직접 구현해 볼 수 있었기 때문이다.
그리고 이 시뮬레이션은 직접 여러 번 해보면서 나도 생각이 조금 달라졌다.
처음에는 도박을 하면 돈을 잃기 때문에 하지 않는 것이라고 생각했다.
그런데 직접 해보니까 돈을 잃는 것만 문제가 아니었다.
중간에 돈을 따게 되면 한 번 더 하면 더 딸 수 있을 것 같다는 생각이 생기고 돈을 잃으면 방금 잃은 돈을 다시 메꾸고 싶다는 생각이 생긴다.
그러다 보면 배팅 금액을 더 크게 하게 되고 다시 돈을 잃으면 또 만회하려고 하는 상황이 만들어질 수 있다.
그래서 도박으로 큰돈을 잃는 사람들이 단순히 돈을 못 따서 그런 것이 아니라 반복적인 승리와 손실, 그리고 잃은 돈을 되찾으려는 행동 때문에 점점 더 큰 위험에 들어갈 수 있다는 것을 어느 정도 이해하게 되었다.
개인적으로는 이 부분이 이번 프로젝트에서 가장 교육적인 부분이라고 생각한다.
글로 "도박은 위험하다"라고 설명하는 것보다 직접 돈을 넣고 배팅하고 잃고 다시 배팅해 보는 과정에서 자신의 행동을 데이터로 확인하는 것이 훨씬 직접적으로 느껴졌기 때문이다.
이번 프로젝트를 만들면서 단순히 웹페이지를 만드는 것과 하나의 문제를 프로그램으로 표현하는 것은 상당히 다르다는 것도 느꼈다.
처음에는 HTML과 CSS로 화면만 만들면 될 것이라고 생각했지만 실제로 구현하다 보니 사용자의 입력을 어떻게 처리할지, 데이터를 어떻게 저장하고 계산할지, 계산된 결과를 어떻게 화면에 보여줄지까지 생각해야 했다.
특히 Chart.js를 이용해서 데이터를 그래프로 만들고 D3.js를 이용해서 네트워크를 표현하고 Leaflet을 이용해서 지도까지 연결하면서 같은 데이터도 어떤 방식으로 보여주느냐에 따라 전달되는 정보가 달라진다는 것을 알게 되었다.
또 처음 생각했던 기능을 실제로 구현하는 과정에서 개인정보 보호나 자극적인 콘텐츠 사용과 같은 문제가 생기면서 프로그램은 기능만 많이 넣는다고 좋은 프로그램이 되는 것이 아니라는 것도 알게 되었다.
결국 이번 프로젝트는 학교폭력만을 다룬 웹이 아니다.
사이버 폭력과 온라인 위험 행동을 시각화하고 정보통신 윤리를 자가진단할 수 있도록 만들었으며 성인지 감수성과 양성평등에 관한 실제 사례와 자료를 검색할 수 있도록 만들었다.
또 관련 법률과 판례를 연결하고 다른 나라의 발생률이나 데이터를 비교할 수 있도록 했으며 온라인 도박은 직접 게임을 해보고 자신의 행동 데이터를 분석할 수 있도록 만들었다.
각각의 주제에 같은 기능을 억지로 넣은 것이 아니라 주제마다 어떤 방식으로 보여주는 것이 더 효과적일지 생각해서 서로 다른 형태로 구현했다.
전체적으로 HTML, CSS, JavaScript를 기반으로 만들었지만 Chart.js를 이용한 데이터 시각화, D3.js를 이용한 네트워크 시각화, Leaflet을 이용한 지도 시각화, JavaScript를 이용한 사용자 입력 처리와 시뮬레이션 및 행동 데이터 분석까지 하나의 프로젝트 안에서 직접 구현해 볼 수 있었다.
처음에는 세특에 사용할 결과물을 만들기 위해 시작했지만 개발을 계속하면서 단순히 결과물 하나를 만드는 것보다 내가 실제로 의문을 가지고 있던 문제를 하나씩 프로그램으로 바꿔보는 과정 자체가 더 재미있었다.
앞으로는 여기에서 더 발전시켜서 실제 공개 데이터를 자동으로 수집하고 Python과 연결해서 데이터를 분석하는 기능을 추가해 보고 싶다.
특히 지금 만든 온라인 도박 시뮬레이션의 행동 데이터를 더 많이 수집할 수 있다면 사용자의 배팅 패턴이나 손실 이후 행동 변화 등을 분석하고 머신러닝이나 딥러닝까지 연결해서 위험 행동을 분석하는 것도 해보고 싶다.
이번 프로젝트를 만들면서 가장 크게 느낀 것은 교육도 기술을 어떻게 사용하느냐에 따라 상당히 다른 형태가 될 수 있다는 것이다.
그냥 설명하고 끝나는 교육이 아니라 직접 선택하고 데이터를 보고 시뮬레이션을 해보고 자신의 행동까지 분석할 수 있다면 같은 내용이라도 훨씬 다르게 받아들일 수 있다고 생각한다.
그래서 앞으로도 단순히 기술을 사용했다는 것을 보여주는 프로젝트보다는 실제로 내가 궁금했던 문제를 하나 정하고 그 문제를 데이터, 시뮬레이션, 웹 기술, 인공지능 등을 이용해서 직접 해결해 보는 프로젝트를 계속 만들어 보고 싶다.
