YesGram 제작후기

"3분 55초라는 시간은 내가 25x25 노노그램 칸을 클릭하는데 소요되는 시간이었다." - 제작자 김모씨

작품 소개 

이 크롬 익스텐션은 노노그램 퍼즐을 풀어줍니다. 

전과정이 자동은 아니며, 칠하지 말아야 할 타일에만 표시를 해줍니다.

하지만 이렇게만 설명하면 너무 무미건조하죠. 

당신이 인지하는 만큼이 곧 당신이 사는 세상의 한계입니다. 

당신의 인지의 지평, 즉 당신의 세상을 보다 넓게, 보다 풍요롭게 변화시키기 위해 좀 더 구체적으로 이 익스텐션에 관하여 설명하겠습니다. 

강아지가 넓은 잔디밭을 뛰어다니며 노는 모습을 흔들의자에 편하게 앉아 지켜보는 것은 당신의 마음을 평온하고 따듯하게 해줍니다. 

물론 당신 스스로 뙤약볕 아래에서 땀흘리며 잔디밭을 달리는 것 또한 즐거운 경험이 될 수 있겠지만, 대부분의 경우 잔디를  뛰어다니는 쪽은 당신의 강아지고 당신은 그것을 지켜보는 쪽일 것입니다. 이 관계에서 당신도 만족스럽고 당신의 강아지도 만족스럽습니다. 

이 익스텐션은 그와 유사한 경험을 당신과 당신의 컴퓨터 사이의 관계에서 제공하는 것을 목적으로 합니다. 강아지가 잔디에서 뛰노는 것을 지켜보듯이, 당신은 컴퓨터가 노노그램을 푸는 모습을 편안한 의자에 등을 기대고 앉아 지켜보면 됩니다. 물론 침대에 누워 지켜볼 수도 있습니다.

풀기 버튼을 클릭하자마자 당신의 컴퓨터는 눈부신 속도로 퍼즐을 풀어낼 것입니다. 

컴퓨터는 25x25 크기의 노노그램도 눈 깜짝할 사이에 풀어냅니다.

어떤 이들은 컴퓨터가 인간보다 훨씬 빠르게 퍼즐을 푼다는 것에 대해 언짢게 여길 수도 있겠습니다만, 다시 생각해 보세요. 강아지가 인간보다 빨리 달린다고 해서 불쾌해 하는 사람은 없습니다. 

더 이상 머리 싸매고 고통스러워하지 마세요. 당신의 컴퓨터에게 양보하세요. 당신의 컴퓨터는 계산하기 위해 태어난 존재입니다. 잔디 위를 빠르게 달리며 즐거워 하는 강아지를 보고 힐링하는 것처럼, 계산을 순식간에 끝내버리는 컴퓨터를 지켜보며 힐링하세요.

아울러, 당신의 컴퓨터는 당신에게 충직합니다. 컴퓨터는 당신이 어려워 하는 계산을 막힘없이 순식간에 해치우지만, 승리의 영광에는 아무런 관심이 없습니다. 컴퓨터는 당신에게 승리를 양보할 것입니다. 당신이 컴퓨터가 막아 놓지 않은 타일을 칠하기만 하면, 승리의 영광은 당신의 것이 됩니다. 

이 모든 과정에서 평온과 기쁨, 치유되는 마음을 얻기 위해 필요한 것은 컴퓨터를 당신의 반려동물처럼 여길 수 있을 만큼의 감수성 뿐입니다. 

지금부터 당신의 감수성을 발휘해 보세요!

설치 방법

이 프로그램은 크롬 브라우저에 설치되는 크롬 익스텐션입니다. 설치해보기 편하게 크롬 스토어에 등록해볼까 했으나 그러려면 침하하에 게시글 하나 올리자고 너무 많은 공을 들여야 해서 그냥 화일로 공유하기로 했습니다.

우선 아래 링크에서 YesgramExtension.zip을 다운받은 후, 새 폴더를 생성하고 거기에 압축을 풀어줍니다. 압축이 해제된 폴더 경로를 기억합니다.

https://drive.google.com/drive/folders/1_qkdjpLlWiDrBjn8f9LhMarKO3oviiiY?usp=drive_link
 

크롭 브라우저 창 상단 우측, 점 세개가 세로로 찍힌 부분을 클릭하여 [확장 프로그램] - [확장프로그램 관리] 를 선택합니다.

페이지 우측 상단에 [개발자 모드] 스위치를 눌러서 ON 합니다. 

“압축해제된 확장 프로그램을 로드합니다” 를 누른 후, 좀 전에 압축을 해제한 폴더를 선택해줍니다.

이제 확장프로그램이 로드되었습니다. 크롬 주소창 오른쪽에 있는 퍼즐모양 확장 프로그램 아이콘을 눌러보시면 “Yesgram”이라는 익스텐션이 있는 것을 확인하실 수 있습니다. Yesgram 옆의 고정핀 모양 아이콘을 클릭하시면 Yesgram 익스텐션 아이콘이 주소창 오른쪽에 나타나서 편하게 쓰실 수 있습니다.

사용법

다른 페이지에서 Yesgram 익스텐션 아이콘을 누르면 “노노그램 사이트로 이동” 버튼이 팝업으로 뜹니다. 버튼을 누르면 노노그램 사이트로 이동합니다.

노노그램 사이트에서 새로운 노노그램 퍼즐이 표시된 상태에서 Yesgram 익스텐션 아이콘을 누르면 “노노그램 풀기” 버튼이 팝업으로 뜹니다. 버튼을 누르면 컴퓨터가 노노그램을 풀어서 보드에 X표시를 합니다. 

X표시가 되지 않은 빈칸에 마우스를 클릭해서 색칠하시면 됩니다.

추가) 좀 전에 테스트해보니 아직 월간 특제 노노그램을 제 시간에 풀어내지는 못하는 것 같습니다. 주간 특제 노노그램까지는 이 로직으로 되네요.

제작후기

처음 시작은 침하하에서 노노그램이라는 단어를 본 것이었습니다.

그 단어를 본 순간 저는 어째서인지 노노그램을 푸는 기능을 만들어보자는 생각에 사로잡혀 버렸습니다. 

그리하여 어떻게 일을 시켜야 컴퓨터가 노노그램을 풀 수 있을지를 고민하기 시작했습니다. 

처음 아이디어는 각 행에 대한 힌트를 참조하여 가능한 모든 보드판의 경우의 수를 만들고, 그 중 각 열에 대한 힌트에 부합하는 경우를 찾아내자는 것이었습니다.

언제나 그렇듯이 오만가지 버그와 에러의 시행착오를 겪은 후, 작동하는 기능을 작성할 수 있었습니다.

그러나 이 방식은 노노그램의 크기가 커지면 가능한 모든 경우의 수를 만드는데 엄청난 시간이 걸리게 된다는 단점이 있었습니다. 

초기단계에서 경우의 수를 어느정도 걸러내는 방식을 생각해내서 적용해보았지만 25x25는 커녕 15x15에서도 너무 오랜 시간이 걸렸습니다.

인간이 노노그램을 푸는 방식을 노노그램에 적용하는 것이 해결책이라고 생각했고, 

노노그램을 풀때 인간의 사고가 어떻게 작동하는지, 그것을 어떻게 코드로 구현할 지를 알아내야 했습니다.

며칠에 걸쳐 가끔씩 생각해 보다가, 마침내 번뜩이는 아이디어가 머리를 스치고 지나갔습니다.

각 행에 대한 힌트를 참조하여 각 행에 대해 가능한 모든 경우의 수를 만들고, 그 중 공통적으로 칠해지는 부분을 칠하는 것이 실상 인간이 문제를 푸는 방식의 일부와 크게 차이가 없다는 것을 깨달은 거죠. 

그리하여 각행에 대해 가능한 모든 경우의 수를 만들고 그 중 현재 보드판과 상충되는 경우를 제거한 후, 나머지 경우에서 공통적으로 칠해지는 부분과 막혀지는 부분을 칠하고 막았습니다. 그리고 각 열에 대해서도 동일한 과정을 시행했습니다. 열에 대해 시행하게 되면서 각 행에서 다시 보드판과 상충되는 경우가 걸러지고, 그에 따라 공통적으로 칠해지거나 막히는 경우가 추가로 발생하고, 마찬가지로 행에 대해 시행하게 되면 각 열에 대해 마찬가지로 추가적으로 칠해지고 막혀질 타일이 발생하는 것이었습니다.

더 이상 칠하거나 막히는 경우가 추가로 발생하지 않을때까지 이 과정을 반복하는 방식으로 문제를 풀도록 했습니다. 각 행의 경우를 조합하여 전체 보드의 모든 경우를 생성한 후 생성된 경우중 각 열 힌트와 일치하는 경우를 검색하는 초기 방식보다 훨씬 빠르게 퍼즐을 풀 수 있었습니다.

여기까지는 golang을 사용하여 작성했습니다. 제가 직접 노노그램의 힌트를 코딩으로 입력해서 문제를 풀어 콘솔에 보드판을 출력하여 결과를 확인하는 방식이었죠.

문제를 푸는 기능이 완성되고 나니 그럴 듯한 유저인터페이스를 만들고 싶다는 생각이 들었고, 기왕이면 노노그램 사이트에 직접 작용하도록 만들고 싶었습니다.

방법을 알아보다 보니 크롬익스텐션을 사용하는 방법이 가장 쉬워보였는데, 문제는 크롬익스텐션은 자바스크립트를 지원하지만 제가 제작한 코드는 golang 코드였다는 점입니다. 저는 자바스크립트도 잘 모르고 웹페이지 혹은 브라우저와 자바스크립트간의 상호작용방식에 대해서도 잘 알지 못하구요. 

문제를 해결하기 위해 요즘 유명한 챗 지피티의 힘을 빌려보기로 했습니다. 챗지피티4에게 제가 작성한 golang 함수와 구조체들을 던져주자, 순식간에 자바스크립트 함수와 클래스로 바꾸어 주었습니다. 거기에 추가로 노노그램 사이트와 상호작용하는 팝업 기능을 작성해야 했는데, 여기에서도 챗지피티에게 기초부터 배우다시피하며 문제를 해결할 수 있었습니다. 다만 노노그램 사이트에 클릭을 발생시켜서 직접 칸을 칠하게 하는 방식은 끝내 성공시키지 못해서 우회전략으로, 칸의 className을 변경하여 막힌 타일에 x표시를 하고 칠해야할 타일을 유저가 클릭하도록 했습니다. 이렇게 하면 노노그램 사이트의 자바스크립트가 x표시 된 것은 인지 못하지만 유저의 클릭은 인지해서 유저가 칠한 타일을 정답으로 인정받을 수 있었습니다.

노노그램 푸는 기능을 제작한 후 가장 큰 소감은 챗지피티가 코딩에 있어서 정말 좋다는 것이네요. 내가 아무것도 몰라도 말만 하면 다 해결됩니다. 읽고 쓸 수만 있으면 되요.