#02 ttip(띱) 웹 서비스에 미니게임을 추가해봤다 -대구 사투리 퀴즈-

맛집, 관광지, 문화행사 정보를 한데 모아두는 작업은 어느 정도 마무리가 됐는데,

막상 완성하고 보니 뭔가 재미 요소가 부족하다는 생각이 들었다.

그러던 중 문득 "대구 사투리 퀴즈를 만들어보면 어떨까?" 하는 아이디어가 떠올랐고, 곧바로 기획에 돌입했다.

1. 기술 스택 및 설계

사용 기술: Laravel11 + Intertia.js + Vue 3

DB 설계는 단순하게 잡았다

quiz_questions
- id
- dialect    -- 사투리 문장
- answer     -- 정답
- wrong1     -- 오답 1
- wrong2     -- 오답 2
- explanation -- 해설
- is_active  -- 활성화 여부

문제 출제 로직도 간단하다. 활성화된 문제 중 랜덤으로 10개를 뽑고, 보기 3개를 섞어서 내려준다.

$questions = QuizQuestion::where('is_active', true)
    ->inRandomOrder()
    ->limit(10)
    ->get()
    ->map(function ($q) {
        $choices = [$q->answer, $q->wrong1, $q->wrong2];
        shuffle($choices);
        return [...];
    });

Vue 에서는 intro -> quiz -> result 3단계 페이즈로 상태를 관리했다

 

2. UI 디자인 고민

처음엔 수능 성적표 컨셉으로 만들었는데, 막상 완성하고 보니 너무 밋밋한 느낌이 들었다. 그래서 여행 스탬프 북 컨셉으로 방향을 바꿨다.

맞힌 문제 수만큼 대구 관련 이모지 스탬프가 채워지고, 최종 점수에 따라 총 6단계 레벨로 나뉘는 방식이다.

• 🏆 대구 사투리 마스터 (10개)
• 😎 대구 토박이 (8~9개)
• 🙂 대구 반토박이 (6~7개)
• 😅 경상도 이주민 (4~5개)
• 😮 경상도 방문자 (2~3개)
• 😵 서울사람 (0~1개)

레벨별 일러스트는 AI(ChatGPT DALL-E)로 직접 제작했다. 대구를 배경으로 캐릭터가 등장하는 일러스트인데, 생각보다 퀄리티가 꽤 잘 나와서 만족스러웠다.

3. 카카오 공유 연동 삽질기

결과 화면에 카카오톡 공유 버튼을 넣고 싶었다.

SDK 연동 자체는 어렵지 않았는데 삽질을 좀 했다.

겪었던 문제들:

1. 카카오 개발자 콘솔에서 JavaScript SDK 도메인을 별도로 등록해야 한다는걸 몰랐다
2. env()로 키를 직접 읽으면 config:cache 적용 후 값이 비어버린다 -> config()로 경유해야 함
3. 로컬 호스트에서는 카카오 서버가 이미지를 못 가져와서 공유 카드에 이미지가 안 뜬다

결국 공유 버튼 흐름은 이렇게 처리했다

// 1순위: 카카오 SDK
if (window.Kakao?.Share) {
    window.Kakao.Share.sendDefault({ ... });
// 2순위: 브라우저 기본 공유
} else if (navigator.share) {
    navigator.share({ ... });
// 3순위: 링크 복사
} else {
    copyLink();
}

---

마치며

기능 하나 추가하는 데 생각보다 신경 쓸게 많았지만 완성하고 나니 꽤 뿌듯하다.

혼자 이것저것 만들다 보니 재미있는 것들이 많이 나오는거 같다.

앞으로도 대구를 알릴 수 있는 재미있는 기능들을 계속 추가해볼 예정이다.

 

관심 있으신 분들은 한번 방문해서 사투리 퀴즈 도전해 보세요.

 

ttip - 대구를 더 잘 알고 싶다면