URL:https://rominasch.github.io/enigma/

<<스크린샷>>

(1) 자기소개

기계과 졸업 후 애 둘 키우며 의도치 않게 주부의 길을 걷고 있는 28세 코린이입니다.

3년 넘게 집에서 애만 보다보니 우울증이 심하게 왔어요.

TMI : 둘째 임신 도중 코로나가 터져서 어디 나가지도 못하고 신생아+미취학 아동을 집에서 거의 혼자 돌봤습니다. 최근 누군가 저를 비난하는 환청, 건강 악화에 매사에 짜증과 화를 달고다니고 매일 나쁜 생각만 하며 버텨가는 삶을 살던 도중 니코쌤의 수업을 보게 됐습니다. 나도 학교다닐때는 프로그램 다루는 걸 참 좋아했지 싶어서 바로 시작했습니다.

스스로의 모습을 변화시키고자 여러 가지를 해왔지만, 코딩이 그 중 가장 재미있네요.

니코쌤 수업을 들으며 HTML, CSS, Javascript, Python을 공부했습니다.

(2) 서비스 소개

아주 간단한 암호문 생성/해독기 입니다. 한글은 각 모음 자음을 떼어내서 배열로 만들어내거나 한글 하나하나를 배열로 만들면 가능은 하겠지만, 이 암호문 사이트는 영어만 지원합니다. 알파벳과 공백, 특수문자(! ?, . )만 암호문으로 바꿀 수 있습니다. 숫자는 추후 추가하려 합니다.

암호문을 만들 문장을 적고 아래에 원하는 숫자로 키를 적은 뒤 암호문을 생성하면 숫자로 된 암호문이 생성됩니다.

그리고 복사버튼으로 암호문을 복사해서 상대방에게 암호문과 키를 주고,

상대방은 암호문과 키를 가지고 번역하면 원하는 메세지를 얻어낼 수 있습니다.

하지만 키가 없는 사람이 암호문을 보면 단지 숫자의 나열일 뿐입니다.

encrypt(decrypt) 와 encrypt-R(decrypt-R) 버튼은 서로 (배열이) 다른 생성/해독 버튼이고 encrypt-R로 암호문을 만들었다면 decrypt-R 로 해독해야 원하는 메세지가 나옵니다.

(3) 시작하게 된 계기

어릴 때 제 일기를 누가 본다는 것이 참 불만이었습니다. 내 생각을 나만 볼 수 있었으면 했어요. 고등학생 때 엄마가 제 외장하드를 털어서 정리하셨던 일이 있었습니다. 정말 부끄럽고 화가 났어요. 그 이후로 비밀 일기를 위해 제 2외국어를 공부했지만 그 언어도 누군가에게는 모국어더라구요. 그래서 암호에 대해 공부를 했었습니다. 그러나 금새 고3이 되고 몇년간은 바빠서 생각할 겨를이 없었어요.

며칠 전 친구와 얘기를 하다 보니 고등학생때 모스부호로 연락을 하던 일이 떠올랐습니다. 문자로 모스부호를 찍어서 서로 얘기했었는데 그게 참 재밌었어요. 누군가 알아보지 못하는 문장을 만들어 내고 원하는 사람들만 해독할 수 있는 것 자체가 너무 흥미로웠어요. 고등학생때 읽었던 책 중에 에니그마가 떠올랐고, 진짜 에니그마와 방식은 다를 수 있겠지만 제 방식대로 바꿔서 암호문 생성/해독기를 만들어 봤습니다.

(4) 개발

백엔드.. 그게 뭐죠?ㅎㅎ 코린이는 웁니다..

html, css, javascript만 사용했구요, 모바일에서도 보기 좋게 화면을 구성했습니다.

초벌은 파이썬으로 했는데, 아무래도 친구들이랑 같이 보는게 목적이라 자바스크립트로 만들었습니다.

만드는 데는 4일이 걸렸습니다. 기본 기능은 2일 정도 걸렸는데 친구가 기능추가를 원해서 R 버튼도 넣고 문제의 복사기능도 바꾸고.. 아직도 수정할 점이 보입니다. 코코아톡 챌린지 하고 남는 시간에 만들었습니다.

성가셨던 점은 object에서 key값만 빼와서 array로 빼내는 작업 도중 Object.keys() 를 써서 key를 받아왔을 때 순차적으로 배열이 나오는 줄 알았더니 keys를 자동으로 오름차순으로 정리하더라구요. 이 부분을 해결 못해서 삽질 좀 했습니다.

그래도 copy기능 만들면서 뿌듯했어요. 구글링 해봐도 input창에 있는 내용을 복사하는 글만 나와서 한참 해메다가 겨우 만들었는데, 원하는 기능을 구현했을 때의 쾌감... 이렇게 쉬워 보이는 기능이 이렇게 어려울 줄은 몰랐습니다ㅋㅋ

처음에는 복사버튼을 누르면 alert를 띄웠는데, 아무래도 못생긴데다 몰입에 방해돼서 alert창을 대체할 기능을 찾고 있었어요. youtube에 니코쌤이 올려주신 자바스크립트 모달창 만드는 수업이 추천영상에 떴길래 보는데, 마침 제가 찾던 내용이라 바로 적용했습니다.

(5) 바라는 것은?

작은 프로젝트지만 댓글은 암호문+키+(R) 로 남겨주시면 행복할거에요ㅋㅋ