질문카드 — 천천히 깊어지는 대화 카드
마주 앉은 두 사람을 위한 대화 카드 웹 앱입니다. 워밍업 → 연결 → 진심, 3단계로 천천히 깊어지는 질문으로 편하게 대화를 이어가 보세요.
함께하는 방식과 카드 묶음
상황별 묶음: 조금 더 가까이
서로 조금 궁금해진 사이를 위한 질문·활동 12장입니다. /closer 링크나 홈·시작 메뉴에서 바로 열 수 있습니다. 달라진 인상 → 마음이 가는 순간 → 작은 표현 → 다음의 여지로 이어지며, 어느 묶음이든 처음부터 선택할 수 있습니다. 한 기기로 번갈아 이야기하고, 데이트 장면이나 호감의 표현을 함께 고릅니다. 후속 질문은 선택적으로 펼치며 이전 카드·다음 카드·조기 종료를 지원합니다. 답변과 진행 상황은 저장하지 않습니다.
한 기기로 함께
폰 하나를 같이 보면서 번갈아 가며 답하는 기본 모드입니다. 진행 상황은 브라우저에 자동 저장되어 다음에 이어서 할 수 있습니다.
혼자 미리보기
만나기 전에 어떤 질문이 나올지 레벨별로 미리 훑어볼 수 있는 모드입니다. 상단 단계 링크로 원하는 묶음으로 이동하고, "모든 질문 펼치기" 토글로 카드를 한 번에 펼쳐볼 수 있습니다. 모바일에서는 제목·단계 이동만 고정하고 안내와 토글은 콘텐츠와 함께 스크롤됩니다.
질문 구성
질문은 3개 단계로 나뉘며, 처음부터 원하는 단계를 자유롭게 선택할 수 있습니다. ‘다음 카드’ 하나로 이동하며 답변 여부는 집계하지 않습니다. 열어 본 카드를 ‘살펴본 카드 수’로 표시합니다.
| 레벨 | 이름 | 설명 |
|---|
| 1 | 🌱 워밍업 | 부담 없이 답할 수 있는 열린 질문. 대화 초반 어색함을 풀기 위한 단계 |
| 2 | 💕 연결 | 서로를 조금 더 알아가는 질문 |
| 3 | 🔥 진심 | 마음을 나누는 깊은 질문 |
질문 구성은 src/data/questionCards.ts에 정의되어 있습니다.
데모
Live Demo: https://cards.slowletters.app/
기술 스택
- Frontend: React 19 + TypeScript
- Styling: Tailwind CSS 4
- Build Tool: Vite
- Routing: React Router
- Package Manager: pnpm
- Deployment: Cloudflare Pages (Git 연동)
- Test: Vitest + Testing Library
빠른 시작
사전 요구사항
- Node.js 20 이상
- pnpm (권장) 또는 npm
설치 및 실행
# 저장소 클론
git clone https://github.com/disj11/qna-card.git
cd qna-card
# 의존성 설치
pnpm install
# 개발 서버 시작
pnpm dev
# 브라우저에서 http://localhost:5173/ 접속
빌드
# 프로덕션 빌드
pnpm build
# 빌드 결과 미리보기
pnpm preview
코드 품질
# ESLint 검사
pnpm lint
# 타입 검사
tsc -b
# 테스트
pnpm test
# 포맷 검사/적용
pnpm format:check
pnpm format
배포
이 프로젝트는 Cloudflare Pages의 Git 연동으로 배포됩니다. main 브랜치에 push하면 Cloudflare가 저장소를 직접 빌드/배포하며, 그 외 브랜치/PR은 자동으로 프리뷰 URL이 생성됩니다. 별도의 GitHub Actions 워크플로우는 없습니다.
프로젝트를 새로 연결할 때 Cloudflare 대시보드(Workers & Pages → Create → Connect to Git)에서 다음 값을 입력하면 됩니다.
| 설정 | 값 |
|---|
| Build command | pnpm run build |
| Build output directory | dist |
| Root directory | / |
프로덕션 도메인: cards.slowletters.app (Cloudflare 대시보드에서 커스텀 도메인으로 연결).
클라이언트 사이드 라우팅을 위한 SPA 폴백은 wrangler.jsonc의 assets.not_found_handling: "single-page-application"으로 처리됩니다. (이 프로젝트는 Cloudflare의 신형 Workers 정적 에셋 백엔드로 배포되며, 이 경우 public/_redirects의 캐치올 리다이렉트는 오탐 무한 루프 에러를 유발하므로 사용하지 않습니다.)
프로젝트 구조
qna-card/
├── public/
│ └── manifest.json # PWA 매니페스트
├── src/
│ ├── pages/
│ │ ├── Menu.tsx # 모드 선택 (/start)
│ │ └── NotFound.tsx
│ ├── features/
│ │ ├── landing/ # 서비스 소개 페이지 (/)
│ │ ├── together/ # 한 기기로 함께 모드
│ │ ├── solo-preview/ # 혼자 미리보기 모드
│ │ ├── multiplayer/ # 이전 원거리 모드 코드 (현재 서비스 진입 없음)
│ │ │ ├── lib/ # P2P 연결, PeerJS 설정
│ │ │ └── hooks/ # 방/턴/채팅 상태 훅
│ │ └── question-deck/ # 질문 큐 셔플/레벨 게이트 로직
│ ├── components/ # 공통 UI 컴포넌트 (Button, GlassPanel 등)
│ ├── design-system/ # 디자인 토큰 및 규칙
│ ├── data/
│ │ └── questionCards.ts # 레벨별 질문 데이터
│ ├── types/ # 공통 타입 정의
│ ├── App.tsx # 라우팅
│ └── main.tsx # 엔트리 포인트
├── peer-server.js # 로컬 개발용 PeerJS 시그널링 서버
├── wrangler.jsonc # Cloudflare 정적 에셋(SPA) 배포 설정
├── vite.config.ts
└── tailwind.config.js
디자인 시스템
- Glass Morphism: 반투명 배경 + 블러 효과
- 3D 카드 플립: CSS transform 3D 애니메이션
- 모바일 최적화: 터치 최적화 및 반응형 디자인
- 레벨별 포인트 컬러: 워밍업(그린) → 연결(로즈) → 진심(골드)
컴포넌트 사용 규칙과 토큰 정의는 src/design-system/README.md를 참고하세요.
개발 가이드라인
- 컴포넌트: 함수형 컴포넌트 + React Hooks 사용
- 폴더 구조: 화면/도메인 단위 feature-folder 구조 (
src/features/*)
- 스타일링: Tailwind CSS utility-first 접근법
- 타입 안정성: TypeScript strict 모드 활성화
질문 데이터 수정
레벨별 질문은 src/data/questionCards.ts의 level1Questions / level2Questions / level3Questions 배열에 정의되어 있습니다. 레벨을 넘어가기 위한 최소 질문 수는 같은 파일의 levelGateThreshold에서 조정합니다.
사용 사례
- 처음 만난 사이: 어색함을 깨고 서로를 알아가는 대화 주제
- 원거리 연애: 멀티플레이어로 떨어져 있어도 함께 대화
라이선스
MIT License - 자세한 내용은 LICENSE 파일을 참고하세요.
개발자
disj11
기여하기
버그 리포트, 기능 제안, Pull Request 모두 환영합니다!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature)
- Commit your Changes (
git commit -m 'Add some AmazingFeature')
- Push to the Branch (
git push origin feature/AmazingFeature)
- Open a Pull Request
더 나은 대화와 즐거운 시간을 위해 만들어진 프로젝트입니다.
대면 중심 구성
원거리 모드는 메뉴·홈·실행 경로에서 제외했습니다. 기존 /remote 링크는 /start로 이동합니다. 이전 멀티플레이어 소스와 설정은 보관하되 앱에서 불러오지 않으므로 프로덕션 번들에는 포함되지 않습니다.
