딸깍톤 (Ttalkkakthon)

개요

딸깍톤은 "Hackathon with AI" 콘셉트의 해커톤 운영 플랫폼입니다. 참가자 등록, 팀/프로젝트 관리, 갤러리 노출, 디스코드 봇을 통한 AI 자동 심사까지 해커톤 진행에 필요한 흐름을 한 곳에서 처리합니다.

백오피스/심사 흐름은 Next.js App Router + Prisma 7 + Neon Postgres로 가볍게 구축했습니다.

주요 기능

• 참가 신청 / 팀 등록: /register 흐름에서 팀과 프로젝트 정보를 수집하고 Prisma 스키마로 검증·저장
• 프로젝트 갤러리: /gallery에서 등록된 프로젝트와 데모/영상/GitHub 링크를 노출
• AI 자동 심사: 디스코드에서 호출 가능한 심사(기본 심사)·냥심사(고양이 심사) 명령이 /api/evaluate를 호출해 평가 프롬프트와 GitHub 코드를 검토하고 결과를 DB에 저장. 분석 명령은 gh CLI로 공개 레포 코드를 분석해 디스코드로 회신
• 참가자 투표 / 좋아요: /teams/vote에서 참가자가 프로젝트에 투표(자기 팀 제외, 이메일/전화 기반 자격 검증), 갤러리에서는 좋아요로 반응. 결과 보드의 최종 점수는 좋아요(50점) + AI 기본 심사(50점) 합산, 냥심사는 별도 표기
• 다중 프로젝트 처리: 한 팀이 여러 프로젝트를 등록한 경우 projectCount 기반으로 선택 흐름을 제공
• 인터랙티브 랜딩: motion + canvas-confetti로 비주얼/애니메이션 구성

기술 스택

프로젝트 구조

ttalkkakthon/
├── app/
│   ├── _components/      # 공용 UI 컴포넌트
│   ├── _hooks/           # 커스텀 훅
│   ├── actions/          # Server Actions
│   ├── admin/            # 운영자 페이지
│   ├── api/              # Route Handlers (evaluate 등)
│   ├── gallery/          # 프로젝트 갤러리
│   ├── register/         # 참가 신청 흐름
│   ├── sections/         # 랜딩 섹션
│   └── teams/            # 팀 페이지
├── lib/
│   ├── prisma.ts         # Neon 어댑터 + 싱글톤 클라이언트
│   ├── utils.ts          # cn() 등 헬퍼
│   └── validations/      # Zod 스키마
├── prisma/schema.prisma
└── docs/                 # 설계서/기획서 (design, event, feature, registration, voting)

주요 패턴

• Prisma Client 싱글톤: Neon 서버리스 어댑터 기반, dev hot-reload 환경에서도 단일 인스턴스 유지
• 환경 변수 자동 주입: Neon(Vercel Marketplace) 연동 시 POSTGRES_PRISMA_URL(런타임)과 POSTGRES_URL_NON_POOLING(마이그레이션) 사용
• Server Components 우선: 인터랙션이 필요한 곳만 "use client"
• 컴포넌트 명세 문서화: docs/feature/components/register/ 하위에 컴포넌트별 Props/스타일/동작 명세 관리

디스코드 AI 심사 흐름

디스코드에서 @ttalkkakthon 심사 {팀이름} 형태로 호출하면 다음 흐름이 동작합니다.

1. GET /api/evaluate?team={팀이름} 으로 프로젝트 데이터 조회
2. 응답의 evaluationPrompt를 기반으로 AI가 심사 수행
3. 등록된 GitHub/데모/영상 URL이 있으면 직접 접근하여 실제 결과물 확인
4. POST /api/evaluate 로 promptFeedback을 DB에 저장
5. 디스코드에 심사 결과 회신

기본 심사(promptFeedback)와 별개로, 고양이 캐릭터 "나비"의 예능 보너스 심사(catFeedback)를 독립적으로 운영하는 냥심사 명령도 함께 제공합니다.

실제 행사 심사 결과. 아이디어·AI 활용도·완성도를 항목별 점수와 근거 서술로 돌려줍니다.

운영 어드민의 투표 집계 화면. 최종 점수는 참가자 좋아요(50점)와 AI 기본 심사(50점)를 합산합니다.

담당 역할

해커톤 운영팀은 7명 규모였고, 그중 홈페이지 개발은 기획 1 · 디자인 1 · 프론트엔드 전담 개발자 1 · 풀스택 1(본인)로 진행했습니다. 풀스택으로 참여해 백엔드와 AI 파이프라인을 중심으로 프론트엔드까지 다뤘고, 개발 커밋의 약 85%를 작성했습니다.

• 심사 파이프라인 설계: 프로젝트 조회 → GitHub 코드·제출 정보 검토 → 평가 → 파싱 → DB 저장 → 디스코드 회신으로 이어지는 흐름 전체를 설계·구현
• 심사 규칙 분리: 평가 기준을 코드가 아닌 프롬프트로 분리해, 기준이 바뀌어도 서버 코드 수정 없이 대응할 수 있도록 구성
• 백엔드: Next.js API 라우트, Prisma 7 + Neon Postgres 스키마 설계, 참가 신청·투표 자격 검증
• 현장 연출: 심사 결과를 마크다운 타이핑 효과 + TTS로 행사장 스크린에 출력하는 몰입 요소 구현
• 실제 행사 운영: 판단은 AI가, 조회·저장·회신 흐름은 코드가 통제하는 구조로 행사 중 안정적으로 동작

회고

• Next.js 16 + Prisma 7 + Neon 조합을 짧은 기간 안에 안정적으로 묶어볼 수 있었던 좋은 실험장이었습니다.
• 디스코드 봇 + API + AI 심사 프롬프트의 분리 덕분에, 심사 규칙이 바뀌어도 서버 코드 변경 없이 프롬프트만 갱신하면 되는 구조가 됐습니다.
• 인터랙티브 랜딩은 임팩트는 컸지만 모바일 성능 최적화가 다음 과제로 남았습니다.