[웹] BTS 가사 퀴즈 사이트 만들기

BTS 가사 퀴즈 실행 창

 

지난 KBO 선수 퀴즈에 이어서 BTS 가사 퀴즈를 제작해봤다.

아래 링크에서 실행해 볼 수 있다. 

 

http://semaseryu.pythonanywhere.com/

BTS 가사 퀴즈

 

참고로 지난 KBO 선수 퀴즈에 대한 정보는 아래에서 확인할 수 있다.

https://skyjwoo.tistory.com/entry/KBO-%EC%84%A0%EC%88%98-%ED%80%B4%EC%A6%88-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0

[웹] KBO 선수 퀴즈 사이트 만들기

 

 

 

플레이 방법

플레이 방법은 간단하다.

정답 곡으로부터 랜덤 추출한 가사 두 줄로부터 가사를 유추해서 정답 곡명을 입력하면 된다.

 

퀴즈 진행 예시

 

총 10문제가 주어지고, 문제 당 기회는 1번이다. 즉, 틀리면 다음 문제로 넘어간다. 

 

제작 과정

제작 과정은 KBO 퀴즈 때와 크게 다르지 않다.

• 데이터 수집
• 데이터 정제
• 백엔드(flask)
• 프론트엔드(html/css/javascript)
• 웹 디플로이(Pythonanywhere)

 

1. 데이터 수집/정제

 

먼저 데이터 수집은 전체 곡명 수집과 가사 수집 두 단계로 나누었다.

전체 곡 리스트는 멜론에서 BTS를 검색하여 나온 창에 있는 곡명 리스트를 참고하였다.

 

https://www.melon.com/artist/song.htm?artistId=672375 

방탄소년단

BTS 수록곡 창

 

 

가사 수집은 수집한 곡명을 바탕으로 가사 검색 API를 활용했다.

가사 검색은 "lyricsgenius"의 API를 활용했다.

API의 사용법은 아래 링크에서 잘 정리해 주고 있다. 

 

https://medium.com/analytics-vidhya/getting-lyrics-of-songs-via-python-lyricsgenius-23e5dd5992e3

Getting Lyrics of Songs via Python (LyricsGenius)

 

일부 잘못 입력된 가사들이 있어서 수작업으로 지우고 구글에서 검색해서 수정해주었다.

 

정제는 가사 힌트가 너무 쉬우면 안되기에 가사에 제목 키워드의 포함 여부를 DB에 따로 표시해주었다.

즉, Butter에서 Smooth like butter, like a criminal undercover 가사는 가사에 제목 키워드가 포함되기에 힌트로 제공되지 않는다. 

 

 

2. 백엔드/프론트엔드

 

큰 틀은 지난번 KBO 퀴즈와 다르지 않다. 

다른 점은 두 가지가 있다.

 

1. 힌트가 사용자의 행동(검색) 이전에 미리 제공될 것.

2. 틀리더라도 추가 힌트를 주지 않고, 다음 문제로 진행할 것.

 

핵심 기능은 역시 지난번과 마찬가지로 검색어 추천 기능과 검색 기능(문제 내기+채점)이다.

아래는 실제 프로그램의 작동 방식에 대한 간단한 개요이다.

 

1. DB로부터 랜덤하게 정답 데이터(곡명)와 해당 곡의 랜덤한 두 소절을 먼저 가져온다.

2. 곡명은 정답 데이터 변수에 저장하고, 두 소절은 페이지 상에서 보여준다.

3. 처음 시작 시, 정답 수와 문제 수 변수를 리셋한다.

 

<검색어 추천>

4. 사용자는 곡명를 검색한다.

5. 검색 시, 검색어로 시작하는 곡명들을 추천 검색어 리스트로 보여준다.

 

<곡명 검색>

6. 정답 제출 시, 정답 데이터와 현재 검색한 데이터를 비교한다.

7. 곡명이 일치할 경우, 정답 수+1, 문제 수+1 후, "정답입니다" 메세지를 표시하고, 다음 문제로 넘어간다.

8. 곡명이 불일치할 경우, 문제 수+1 후, "오답입니다" 메세지를 표시하고, 다음 문제로 넘어간다.

9. 재시작 버튼을 누를 시, 정답 수, 문제 수, 힌트 창을 초기화한다.

 

검색어 추천 개요

곡명 검색 개요

 

 

 

3. 웹 디플로이

 

웹 디플로이는 goorm에서는 1개 제한이 있어 지난번과 달리 Pythonanywhere라는 사이트에서 진행했다. 

 

https://www.pythonanywhere.com/

Host, run, and code Python in the cloud: PythonAnywhere