TEAMITAKA 타입 테스트

1분 만에 알아보는 나의 협업 스타일 — 재미있는 공유형 성향 테스트

🎯 프로젝트 개요

TEAMITAKA 타입 테스트는 MBTI식 가벼운 협업 성향 테스트로, 15개 질문을 통해 사용자의 팀워크 스타일을 분석하고 바이럴 가능한 결과 카드를 생성합니다.

주요 특징

⚡ 1분 완료: 15문항으로 빠른 테스트
🎨 결과 카드: 라이트/다크 테마 지원하는 공유 가능한 카드
📱 모바일 최적화: 반응형 디자인과 터치 친화적 UX
♿ 접근성 지원: 키보드 네비게이션, 스크린 리더 지원
🔒 개인정보 안전: 개인정보 수집 없는 로컬 처리

핵심 KPI

완료율: 퀴즈 시작 → 결과 페이지 도달
카드 저장률: 결과 카드 이미지 다운로드
공유 클릭률: 카드 공유/링크 복사

🛠 기술 스택

Framework: Next.js 15 (App Router)
Language: TypeScript
Styling: Tailwind CSS
Testing: Vitest (Unit), Playwright (E2E)
Image Capture: html2canvas
Deployment: Vercel (권장)

📁 프로젝트 구조

teamitaka-type/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # 글로벌 레이아웃
│   ├── page.tsx           # 인트로 페이지 (/)
│   ├── quiz/
│   │   └── page.tsx       # 퀴즈 진행 (/quiz)
│   └── result/[type]/
│       └── page.tsx       # 결과 페이지 (/result/[type])
├── components/            # React 컴포넌트
│   ├── ProgressBar.tsx
│   ├── QuestionCard.tsx
│   ├── ChoiceButton.tsx
│   ├── ResultCard.tsx     # 캡쳐용 결과 카드
│   └── ShareBar.tsx       # 공유/저장 액션바
├── lib/                   # 비즈니스 로직
│   ├── questions.ts       # 15문항 데이터
│   ├── scoring.ts         # MBTI 스코어링 로직
│   ├── types.ts          # 16개 타입 메타데이터
│   ├── theme.ts          # 디자인 토큰
│   └── og.ts             # OG 메타데이터
├── public/
│   └── og/               # OG 이미지
└── e2e/                  # E2E 테스트

🚀 개발 환경 설정

1. 저장소 클론 및 의존성 설치

git clone https://github.com/your-org/teamitaka-type.git
cd teamitaka-type

# 패키지 설치
npm install

# 또는 yarn
yarn install

2. 개발 서버 실행

npm run dev

브라우저에서 http://localhost:3000으로 접속

3. 테스트 실행

# 단위 테스트
npm run test

# 단위 테스트 (watch 모드)
npm run test:watch

# E2E 테스트
npm run test:e2e

# 타입 체크
npm run type-check

🏗 빌드 및 배포

로컬 빌드

# 프로덕션 빌드
npm run build

# 빌드 결과 실행
npm run start

Vercel 배포

Vercel 프로젝트 연결

npm install -g vercel
vercel login
vercel --prod

환경 변수 설정 (필요시)
- Vercel 대시보드에서 설정
- Analytics, SEO 도구 연동

커스텀 도메인 연결

# type.teamitaka.com CNAME 설정
vercel domains add type.teamitaka.com

기타 플랫폼 배포

Netlify

npm run build
# dist 폴더를 Netlify에 업로드

AWS S3 + CloudFront

npm run build
aws s3 sync out/ s3://your-bucket --delete

🔧 커스터마이징

질문 수정

lib/questions.ts에서 질문 텍스트와 가중치를 수정할 수 있습니다:

export const questions: Question[] = [
  {
    id: 1,
    text: "새로운 질문 내용",
    choices: ["예", "아니오"]
  },
  // ...
];

타입 메타데이터 수정

lib/types.ts에서 각 MBTI 타입의 설명, 강점, 팁을 수정:

export const TYPE_METADATA: Record<string, TypeMeta> = {
  ENFP: {
    nickname: '열정티미',
    oneLiner: '넘치는 에너지로 팀을 이끄는 아이디어 발전소',
    description: '창의적인 해결책을 제시하고...',
    strengths: ['창의적 아이디어 발굴', '팀 동기부여', '유연한 사고'],
    bestMatches: ['체계티미 (INTJ)', '실행티미 (ESTJ)'],
    tips: ['구체적인 실행 계획 수립하기', '...']
  }
};

스타일링 테마

lib/theme.ts와 tailwind.config.js에서 색상, 폰트, 간격 등을 조정:

export const theme = {
  colors: {
    primary: '#F76241',  // TEAMITAKA 오렌지
    // ...
  }
};

가중치 알고리즘

lib/scoring.ts의 SCORING_WEIGHTS에서 각 질문의 영향도 조정:

export const SCORING_WEIGHTS = {
  EI: {
    1: { axis: 'E', weight: 1.0 },  // 가중치 조정 가능
  }
};

📊 분석 및 모니터링

Plausible Analytics 연동

// app/layout.tsx에 추가
<script defer data-domain="type.teamitaka.com" src="https://plausible.io/js/script.js"></script>

주요 추적 이벤트

Test Started: 테스트 시작
Quiz Completed: 퀴즈 완료
Result Generated: 결과 생성 (타입별)
Result Viewed: 결과 페이지 조회
Card Saved: 카드 이미지 저장
Card Shared: 카드 공유
Retest Started: 재테스트

Google Analytics 4 연동

// gtag 설정 및 커스텀 이벤트 전송
gtag('event', 'quiz_completed', {
  custom_parameter: 'value'
});

♿ 접근성 체크리스트

✅ 완료된 접근성 기능

키보드 네비게이션: 모든 인터랙션 요소 Tab/Enter 지원
터치 대상: 최소 44px×44px 터치 영역
색상 대비: WCAG AA 기준 4.5:1 이상
포커스 표시: 명확한 포커스 링 표시
스크린 리더: semantic HTML과 ARIA 레이블
대체 텍스트: 의미있는 이미지 alt 속성
텍스트 크기: 브라우저 확대/축소 지원

🔄 개선 예정 사항

고대비 모드 지원
모션 감소 옵션 (prefers-reduced-motion)
다국어 지원 (영어, 일본어)
음성 안내 기능

📱 반응형 디자인

브레이크포인트

Mobile: 360px - 430px (기본 최적화)
Tablet: 431px - 768px (중앙 정렬 카드)
Desktop: 769px+ (최대 너비 제한)

주요 반응형 처리

퀴즈 카드: 모바일에서 전체 너비, 데스크톱에서 고정 너비
결과 카드: 화면 크기에 따른 패딩과 폰트 크기 조정
공유 바: 모바일에서 하단 고정, 데스크톱에서 인라인
터치 제스처: 스와이프와 탭 최적화

🚀 성능 최적화

Core Web Vitals 목표

LCP (Largest Contentful Paint): < 2.5s
FID (First Input Delay): < 100ms
CLS (Cumulative Layout Shift): < 0.1

적용된 최적화

폰트 최적화: font-display: swap으로 FOUT 방지
이미지 최적화: Next.js Image 컴포넌트 사용
코드 분할: 페이지별 자동 코드 분할
캐싱: 정적 assets CDN 캐싱
압축: Gzip/Brotli 압축

번들 사이즈 목표

Initial Bundle: < 150KB (gzipped)
Total Bundle: < 500KB (gzipped)
이미지 캡쳐: html2canvas 동적 로딩

🔒 보안 및 개인정보

개인정보 정책

데이터 수집 없음: 이름, 이메일 등 개인정보 미수집
로컬 처리: 모든 답변과 결과는 브라우저에서만 처리
세션 관리: 새로고침 시 데이터 초기화
쿠키 사용 안함: 분석 도구 제외 쿠키 미사용

보안 헤더

// next.config.js
headers: [
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
  {
    key: 'X-Frame-Options', 
    value: 'DENY',
  },
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block',
  }
]

🐛 트러블슈팅

자주 발생하는 문제

1. 이미지 캡쳐가 안되는 경우

# html2canvas 관련 이슈
npm install html2canvas@latest

# 폰트 로딩 완료 후 캡쳐되도록 수정됨
await document.fonts.ready;

2. 모바일에서 공유 버튼이 안되는 경우

// Web Share API 지원 여부 확인 후 폴백
if (navigator.share && navigator.canShare) {
  await navigator.share(shareData);
} else {
  // 클립보드 복사 폴백
  await navigator.clipboard.writeText(url);
}

3. 결과 페이지 직접 접근 시 404

// [type] 다이나믹 라우팅 확인
// 유효한 MBTI 타입(16가지)만 허용
if (!TYPE_METADATA[typeCode?.toUpperCase()]) {
  notFound();
}

개발자 도구 활용

# Next.js 번들 분석
npm run build
npx @next/bundle-analyzer

# 라이트하우스 성능 측정  
npm run build && npm run start
# Chrome DevTools > Lighthouse 실행

# 접근성 테스트
npm install -g @axe-core/cli
axe http://localhost:3000

🤝 기여 가이드

개발 워크플로우

이슈 생성: 새로운 기능이나 버그 리포트
브랜치 생성: feature/feature-name 또는 fix/bug-name
개발 진행: 코드 작성 및 테스트
테스트 실행: npm run test && npm run test:e2e
PR 생성: 명확한 설명과 함께 Pull Request
코드 리뷰: 팀 리뷰 후 머지

커밋 컨벤션

feat: 새로운 기능 추가
fix: 버그 수정  
docs: 문서 수정
style: 코드 스타일 변경
refactor: 코드 리팩토링
test: 테스트 추가/수정
chore: 빌드 프로세스 또는 보조 도구 변경

코딩 스타일

ESLint: Next.js 권장 설정 사용
Prettier: 코드 포맷팅 자동화
TypeScript: 엄격한 타입 체크 활성화
접근성: WCAG 2.1 AA 기준 준수

📄 라이선스

MIT License - 자세한 내용은 LICENSE 파일을 참조하세요.

📞 연락처

프로젝트 문의: [email protected]
버그 리포트: GitHub Issues
기능 요청: GitHub Discussions

📚 참고 자료

Made with ❤️ by TEAMITAKA | Website | Blog

Name		Name	Last commit message	Last commit date
Latest commit History 183 Commits
app		app
components		components
e2e		e2e
lib		lib
public		public
test		test
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
ADAPTIVE_DESIGN_GUIDELINES.md		ADAPTIVE_DESIGN_GUIDELINES.md
BROWSER_OPTIMIZATION_STYLES.css		BROWSER_OPTIMIZATION_STYLES.css
CHECKLIST.md		CHECKLIST.md
CROSS_PLATFORM_COMPATIBILITY_GUIDE.md		CROSS_PLATFORM_COMPATIBILITY_GUIDE.md
HTML2CANVAS_BACKGROUND_FIX_GUIDE.md		HTML2CANVAS_BACKGROUND_FIX_GUIDE.md
README.md		README.md
RESPONSIVE_FONT_GUIDELINE.md		RESPONSIVE_FONT_GUIDELINE.md
SAFARI_LAYOUT_GUIDE.md		SAFARI_LAYOUT_GUIDE.md
SAFARI_ORANGE_BACKGROUND_TROUBLESHOOTING.md		SAFARI_ORANGE_BACKGROUND_TROUBLESHOOTING.md
TROUBLESHOOTING_GUIDE.md		TROUBLESHOOTING_GUIDE.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts

TeamKoHong/teamitaka-type

Folders and files

Latest commit

History

Repository files navigation