[HTML] 100x100 노노그램 만들기
2022년 첫날, 첫글을 이렇게 쓸 생각은 없었지만
TLDR: 2021년 마지막날 침착맨(aka 이말년)님의 유튜브 채널을 보다가
"침투부컨 2021"(https://youtu.be/-pnTDn5WYAI?t=329)에 깊은 감명을 받아(?)
오랜만에 코딩을 해봤습니다.
□ 영감의 원천
(출처: 침투부 캡처)"100x100 노노그램을 발견할 수 없으면 진행할 수 없겠습니다.
하지만
분명히 만드시는 분이 나올 거예요.
이거 만드는 거는 그렇게 어렵지 않거든요.
만드시는 분 나오면은
날 잡아가지고 한번
출발하도록 하겠습니다."
- 침착맨 (40, 스트리머/침투부 방장)
□ 코딩의 시작
앞선 링크의 영상은 작년 50x50 노노그램(nonogram)에 이어 올해에는 100x100에 도전한다는 내용이었는데, 얼핏 낱말퍼즐 비슷한 형태였고 찾아보니 룰도 복잡할 것이 없어서 한번 만들어봐야지 싶었습니다.
이왕 마음 먹은 김에 밤중에 노트북을 열었고
역시나 '만드는 거는 그렇게 어렵지 않'았습니다.
두어 시간 하드코딩을 해서 HTML로 테이블을 작성하고
한두 시간 CSS를 이리저리 맞춰가며 침투부 방송에 나온 노노그램 사이트와 기능적으로 유사하게 만들었네요.
하룻밤새 완성한 결과물을 가지고 처음으로 침투부에 댓글까지 남겼는데
댓글창에 에러가 몇번 표시되더니
댓글이 흔적도 없이 사라졌습니다.
다시 적어도 금세 또 사라지는 걸 봐선
아무래도 댓글에 링크를 남기는 게 안 되는 모양입니다.
그래서
브런치에나마 기록을 남겨둡니다.
100x100 노노그램을 만들었는데 아무도 풀러 오지 않네요.
침착맨님의 도전을 기다립니다.
□ 작업결과물 : https://pnll.github.io/nono.html
□ 작업과정(간단 소개)
어떤 그림일까요?1. 그림을 간단히 가공해서 원하는 사이즈(100x100)로 리사이즈 한 후
2. 일정 임계값(threshold)을 넘는 부분을 검은색으로, 나머지를 흰색으로 변환하고
3. 100x100 사이즈의 데이터프레임을 만들어서
4. 한줄씩 연속된 값들을 더해주는 방식으로 숫자를 구한 뒤에
5. X축, Y축 각각 100회 반복하면 상단과 왼쪽에 적어줘야하는 숫자 집합이 만들어집니다.
6. 이 값들을 적절한 위치에 HTML 태그 사이에 붙여 넣으면 문제지는 1차 완성
7. 문제를 사람이 풀어볼 수 있도록 표 칸칸마다 버튼 형태의 요소를 추가하고
8. 각 요소의 클릭 시에 색깔이 변환되는 방식으로 스크립트까지 작성해주면 진짜로 완성입니다.
hover 속성을 이용해서 상단/좌측 숫자를 쉽게 확인할 수 있도록 스타일도 일부 수정했는데,
사실 가장 중요하게 남은 작업은 채점 부분입니다.
버튼을 하나 추가하고 완성된 결과물의 현재 상태(clicked와 checked로 클라이언트단(브라우저)에서 값이 변동되는 중)를 읽어와서 정답 데이터와 비교하는 절차가 필요합니다.
프론트엔드에서 기본적인 동작이 모두 이뤄지므로 결과물 링크와 깃허브에서 코드를 확인하실 수 있습니다.
코딩 자체는 매우 간단하여 부연 설명을 할 부분이 많지 않지만
오밤중에 영상을 보고 뜬금없이 프로그램을 만들어보는 일련의 과정(=프로그래밍)을 강좌로 만들어봐야겠습니다.
-.null
(※ 2022-01-02 업데이트)
1편을 올렸습니다 :)
