[바이브코딩] 크로스워드 퍼즐 생성기 만들어보기

 

이번에는 바이브코딩으로 크로스워드 퍼즐 생성기를 만들어 봤습니다. 물론 다른 사례와 비슷하게 컨텐츠 만들 때 써먹기 위한 용도입니다. 기억을 되살려보면, 작년 11월에 수작업으로 십자말풀이 게임이라는 이름으로 만들어 보긴 했었습니다. 아래는 당시 글의 링크입니다.

 

2024.11.15 - [DIY 테스트] - 십자말풀이 게임 생성 테스트

2024.11.15 - [DIY 테스트] - 한글 십자말풀이 게임 도구 만들기

 

 

이때는 틀을 자동으로 만들려다가 어려울 것 같아서 단어를 틀에 직접 입력해서 레이아웃을 만들고 여기에 사용된 단어들을 AI가 문제로 만들어서 입력하는 방식으로 개발했었습니다. 실무에서 사용하기에는 이게 더 나을 수도 있겠다 싶었거든요.

 

이번에는 처음부터 끝까지 AI를 활용해서 자동화하도록 합니다. 그래서, 문제도 주제를 던져주면 AI가 생성해 주고, 그걸 그대로 입력으로 이용해서 십자말풀이 레이아웃을 만들도록 말이죠. 그렇게 된다면 컨텐츠 생성할 때 사용할 수 있는 '빵틀'이 나올 것 같습니다. ^ ^;

---

 

제가 크로스워드 퍼즐을 생성하기 위해 진행한 과정은 다음과 같습니다. 

 

1️⃣ 크로스워드 퍼즐 요구사항 🤔

• 입력 데이터
  • 퀴즈 문제들 (json 파일 형태)
  • 정답 (키워드)는 2글자~7글자로 길이 제한
  • 크로스되는 단어들이 많으려면 문항수가 많아야 함
• 출력 결과물 
  • 퍼즐판과 문제를 가진 한글 크로스워드 퍼즐
  • 직접 글자 입력해서 퀴즈 게임을 할 수 있음
  • 컨텐츠 제작용 이미지 추출 용도도 지원
  • 퍼즐 모양은 자동으로 생성되도록 함 
  • HTML + CSS + Javascript (tailwind css 이용)
• 생성 로직
  • json 파일에서 정답 단어들을 분석해서 자동으로 크로스워드 퍼즐을 생성
  • 교차하는 글자가 하나 이상은 있어야 하고, 단어 간에는 1개 이상의 교차는 불가, 교차 외의 단어들은 인접 불가 조건
  • 교차되는 단어가 최대한 많도록 알고리즘 적용 (근사적 Backtracking 방식 도입)
• 화면
  • 퍼즐판과 문제판으로 구분. 각각을 화면 저장할 수 있도록 함
  • 컨트롤 영역 (기능 버튼들, 데이터 입력 부분들)도 별도 있어야 함 
• 퍼즐판
  
  • 퍼즐판에서 좌->우, 위->아래의 순서로 번호 지정
• 문제판 
  • 문제판은 가로, 세로 문제를 각각 구분해서 자동 배치해야 함
  • 번호와 나머지 설명 부분은 색상으로 구분되어야 하고 줄바꿈은 자동
• 컨트롤 영역
  • 퍼즐문제 화면, 퍼즐 정답 화면, 가로/세로 설명 화면 개별 저장 기능
  • 퍼즐판은 canvas 좌우, 아래 위의 여백 조절 가능 

 

 

2️⃣ 개발 중 시행착오들 😭

• 단어 교차 부분 : 로직을 설명할 때 제가 설명을 잘못하는 바람에 시행 착오가 좀 있었음
• 문제 설명 부분 :  텍스트박스를 생각해서 길이가 넘어가면 자연스레 줄바꿈이 될거라 생각했음
  → Canvas에 그려지는 것이라 처리하는 방식도 달랐고 이에 대한 처리 고생함
• 정답 입력 부분 : 초기에 입력해도 결과가 보이지 않는 버그 때문에 고생함
  • 키보드 타이핑을 하려면 먼저 포커스를 가져와야 하는데 그러지 못하는 버그 발생
  • 우회 방법으로 hidden input을 생성해 두고 focus를 이쪽으로 오게 한 다음 입력되는 내용을 Canvas 상의 해당 셀에 들어가는 방식으로 처리함
  • 글자 입력 후 Tab 이면 가로 방향, Enter면 세로 방향으로 진행
  • 입력은 모든 셀에서 가능하도록 설정
• 채점 부분 : 입력된 전체 값을 비교해서 다 맞으면 축하 메시지를 보여주도록 함. 의외로 문제없이 넘어감
• 기타사항
  • 레이아웃을 고칠 수 있도록 seed 개념 도입해서 재생성 진행 (최종은 버그 때문에 보류)

 

3️⃣ 생성된 한글 크로스워드(가로/세로퀴즈)

 

최종적으로 생성된 결과물은 다음과 같습니다. 아주 디테일한 부분들을 손볼 곳이 남았습니다. 글자 간격이나 줄 간격 등등... 

 

 

그리고, 다양한 데이터로 테스트를 해 보지 않아서 사용 중에 예상치 못한 버그가 나올지 모르는 상황이긴 하지만 여기까지 나온 것만으로도 활용할 수 있는 영역은 많을 것 같습니다.