[우테코 8기 BE] 4 & 5 주차 오픈미션

워드탐정 프로젝트 회고: 낯선 도구와 AI로 만든 한국어 유사도 게임

 

우아한테크코스 웹 백엔드 8기 프리코스 오픈 미션으로 워드탐정이라는 웹 게임을 개발했습니다. 2주라는 짧은 시간 동안 처음 사용해보는 기술 스택과 AI를 결합하여 의미 있는 결과물을 만들어낸 과정을 공유하고자 합니다.

 

프로젝트 개요

미션 선택: 낯선 도구 해커톤 + AI 기술 융합

우테코 프리코스 오픈 미션은 세 가지 옵션 중 하나를 선택할 수 있었습니다:

• 낯선 도구 해커톤
• 고난도 문제 해커톤
• 제한 협업 미션

워드탐정이란?

매일 새로운 정답 단어가 주어지고, 플레이어가 입력한 단어와 정답 단어의 의미적 유사도(0~100%)를 AI가 계산해주는 게임입니다. 유사도가 높은 단어를 찾아가며 정답을 추리하는 방식으로, 비슷하게는 꼬맨틀 사이트가 있습니다.

https://semantle-ko.newsjel.ly/

 

꼬맨틀 - 단어 유사도 추측 게임

 

핵심 기술 요소로는

• 텍스트 임베딩을 통한 의미 벡터화
• 코사인 유사도 계산
• 상위 200위권 순위 표시
• 실시간 유사도 비교 및 시각화

입니다.

---

팀 구성 및 역할 분담

역할	담당	기술 스택
백엔드 개발	팀원	Go, AWS Bedrock API, Docker
인프라 구축	팀원	EC2, CI/CD 파이프라인, Nginx
프론트엔드 개발	본인	Vue.js 3, Vite, Axios
프론트 배포	본인	Vercel, SPA 라우팅
AI 모델 선정	공동	AWS Bedrock, 임베딩 모델 비교 테스트

 

우연히 학교에서 같이 우테코를 지원하는 팀원을 만나 2인 팀을 구성했습니다. 짧은 개발 기간이었지만, 각자의 강점을 살려 효율적으로 역할을 분담했습니다.

협업 제약 조건

프리코스 정신을 이어받아 다음과 같은 제약 조건을 설정했습니다.

1. 커밋 컨벤션 준수: feat:, fix:, refactor: 등 Conventional Commits 규칙 적용
2. 주석 활용: 코드 가독성을 위한 적극적인 주석 작성
3. 주기적 소통
   • 주 2회 대면 미팅 (진행상황 공유 및 회의)
   • 급한 사항은 카카오톡으로 실시간 소통
   • GitHub Issues/PR을 통한 비동기 커뮤니케이션

---

 

기술적 도전과 의사결정

1. 프론트엔드: Vue.js 3 + Vite 선택 이유

처음 사용해보는 Vue.js를 선택한 이유는 명확했습니다.

• 낯선 도구 학습: React 경험은 있었지만 Vue는 처음이라 미션 취지에 부합
• 빠른 개발 속도: Options API의 직관적인 구조로 러닝 커브 최소화
• Vite의 강력한 개발 경험: HMR, 빠른 빌드 속도로 생산성 향상

2. 백엔드: Go 언어로의 도전

팀원이 Go를 선택한 이유는

• 고성능 동시성 처리 (Goroutine)
• 간결한 의존성 관리
• Docker 컨테이너와의 뛰어난 호환성

Go는 팀원에게도 처음이었지만, 간결한 문법과 강력한 표준 라이브러리 덕분에 빠르게 API 서버를 구축할 수 있었습니다.

 

3. AI 모델 선정: Cohere Embed v4의 선택 과정

가장 중요한 기술적 의사결정은 어떤 텍스트 임베딩 모델을 사용할 것인가였습니다.

테스트한 모델들

모델	장점	단점	한국어 성능
Amazon Titan Embeddings	빠른 응답속도	한국어 의미 구분 약함	⭐⭐⭐☆☆
Cohere Embed v3	다국어 지원 양호	유사도 분포가 좁음	⭐⭐⭐☆☆
Cohere Embed v4	한국어 의미 구분 탁월	약간 느린 응답	⭐⭐⭐⭐⭐

 

결과적으로 Cohere Embed v4 모델을 채택하기로 결정했는데, 단어 간의 점수를 가장 잘 이해하고, 유사도 점수의 분포가 넓어서 게임 플레이에 가장 적합한 모델로 판단했습니다.

 

---

 

개발 과정의 주요 이슈와 해결

이슈 1: CORS 문제

문제: 프론트엔드(Vercel)와 백엔드(EC2) 간 도메인이 달라 CORS 에러 발생

해결

// Go 백엔드에서 CORS 미들웨어 설정
router.Use(cors.New(cors.Config{
    AllowOrigins:     []string{"https://wordtamjeong-frontend.vercel.app"},
    AllowMethods:     []string{"GET", "POST"},
    AllowHeaders:     []string{"Content-Type"},
    AllowCredentials: true,
}))

이슈 2: localStorage 상태 관리

문제: 새로고침 시 게임 진행 상황이 사라짐

해결

// 게임 상태를 quizId별로 localStorage에 저장
saveGuesses() {
  const key = `kkomantl_guesses_${this.quizId}`
  localStorage.setItem(key, JSON.stringify(this.guesses))
}

// 컴포넌트 마운트 시 자동 로드
mounted() {
  this.loadGuesses()
}

---

배포 및 인프라

프론트엔드: Vercel

// vercel.json
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

선택 이유

• Vite와의 완벽한 통합
• 자동 HTTPS 및 CDN
• Git 기반 자동 배포 (main 브랜치 push 시 자동 빌드)

백엔드: AWS EC2 + Docker

팀원이 구축한 인프라

• Docker Compose로 Go 서버 컨테이너화
• Nginx 리버스 프록시로 HTTPS 설정
• GitHub Actions CI/CD 파이프라인 구축

---

아쉬운 점과 마무리

현재 한계점

1. 테스트 부재: 시간 부족으로 E2E/Unit 테스트 미작성
2. 성능 최적화: 임베딩 API 호출 최적화 여지 존재
3. 모델 성능 개선 여지: 한국어 최적화 텍스트 임베딩 모델로 개선 여지 존재

기술적 성장

2주간의 집중 개발로 다음을 체득했습니다.

1. 낯선 기술 빠르게 습득하기: Vue.js, Go 모두 처음이었지만 공식 문서와 실습, AI 학습으로 극복
2. AI를 실용적으로 활용하기: 임베딩 모델을 게임에 적용하는 창의적 사고
3. 풀스택 협업 경험: 프론트-백엔드-인프라의 유기적 연결

감사의 말

프리코스에서 배운 커밋 컨벤션, 코드 리뷰, 페어 프로그래밍 등 프리코스에서 익힌 습관들이 짧은 기간에 완성도 높은 결과물을 만드는 데 큰 도움이 되었습니다. 그리고 함께 고민하고 밤늦게까지 코딩한 팀원에게 감사드립니다. 서로 다른 영역을 담당하면서도 하나의 목표를 향해 달려간 경험은 잊지 못할 추억이 될 것 같습니다.

---

워드탐정 플레이하기: https://wordtamjeong-frontend.vercel.app/

깃허브 주소: https://github.com/wootech-wordtamjeong