⌨️ KEYTAP: 커뮤니티 기반 타건 콘텐츠 플랫폼
"구매자는 가격이 아닌 '소리'와 '느낌'으로 제품을 결정합니다."
KEYTAP은 타건음과 타건감 데이터를 중심으로 유저의 취향을 분석하고, 브랜드 공식몰로 연결하는 '경험 중심'의 키보드 발견 플랫폼입니다.
👥 팀원 소개
🧑💻 수곤 (Frontend Developer)
🧑💻 윤희 (Frontend Developer)
🎨 원지 (UI·UX Designer)
👥 팀원 소개
🚀 사업 모델 및 전략적 가치 (BM)
단순한 판매 중개를 넘어 브랜드사가 광고비 리스크 없이 실제 유저 유입 데이터를 확보하고, 구매 전환 성과를 검증할 수 있는 환경을 구축합니다.
- 자사몰 유입 극대화: 고품질 타건 사운드 콘텐츠로 구매 의사를 높인 유저를 추적 코드가 포함된 링크를 통해 브랜드 공식몰로 직접 연결합니다.
- 리스크 없는 파트너십: 초기 입점비나 광고비 부담을 없애고, 실제 유입 성과를 바탕으로 협업하는 상생 모델을 지향합니다.
- 데이터 기반 라인업 확장: 유저의 '찜' 목록과 모델별 '비교 횟수'를 분석하여 시장성이 검증된 카테고리를 중심으로 위탁 커머스 영역을 넓혀갑니다.
📅 핵심 개발 여정 (2026.02.27 ~ 현재)
단순한 기능 구현을 넘어 기획부터 서비스 안정화까지 팀이 함께 고민해온 여정입니다.
📝 기반 구축 및 서비스 설계 (2월 27일 ~ 3월 13일)
- 프로젝트 킥오프: 서비스 방향성 확정 및 역할 분담 (기획/디자인/개발)
- 데이터 구조 설계: 키보드 및 스위치 데이터베이스 체계 수립, 사용자 인증(Supabase) 환경 구축
- 운영 가이드 수립: 협업을 위한 코드 규칙(Git 컨벤션) 및 마케팅 전략 초안 마련
🧪 기능 구현 및 사용자 경험 고도화 (3월 20일 ~ 4월 17일)
- 화면 구현 및 리뷰: 메인/로그인/찜 목록 등 주요 화면 1차 구현 및 팀 내 상호 피드백 진행
- UI/UX 정밀 수정: 반응형 디자인 버그 수정, '제품 비교하기' 페이지 레이아웃 최적화
- 콘텐츠 빌드업: 타건 체험용 사운드 데이터 수집, 취향 분석 결과 로직 및 일러스트 작업
- 데이터 연동: 프론트엔드와 실시간 데이터베이스(Supabase) 간의 데이터 처리 확인
📊 관리 시스템 구축 및 최종 안정화 (4월 24일 ~ 현재)
- 어드민 대시보드: 실시간 접속자, 가입자, 인기 모델을 한눈에 보는 관리자 화면 설계 및 구현
- 서비스 최적화: 불필요한 코드 정리(리팩토링) 및 로딩 속도 개선을 통한 시스템 안정성 확보
- 최종 런칭 준비: 인터랙션 디자인 최종 검토 및 브랜드 협업을 위한 서비스 소개서 보완
2026.02.16 | 아이디어 빌드업 및 타겟 설정
- 서비스 디자인 메인 컬러 선정 (#112F78) 및 와이어프레임 프로토타입 제작
- 서비스 비즈니스 모델(BM) 초안 생성
- 핵심 타겟 설정 및 서비스 네이밍 'KEYTAP' 확정
2026.02.19 | 디자인 디테일 및 사업 구체화
- 서비스 푸터(Footer) 디자인 추가 완료
- 수익 구조, 정산 방식 등 비즈니스 모델(BM) 상세 내용 보완 논의
- 팀 로고 제작 진행 및 웹 페이지 퍼블리싱/Supabase 구조 설계 준비
2026.02.27 | 팀 브랜딩 및 시스템 설계
- 팀 로고 생성 완료
- 웹 페이지 퍼블리싱 작업 진행 (일부 완료)
- Supabase 구조 설계 및 비즈니스 모델(BM) 최종 수정안 내부 검토
2026.03.04 | 개발 컨벤션 및 인증 테스트
- 구글 소셜 로그인 연동 테스트 완료
- 마케팅 시나리오 초안 구상 및 논의
- 효율적인 협업을 위한 깃(Github) 컨벤션 논의 (커밋 규칙, 푸시 방법 등)
2026.03.14 | 데이터 설계 및 퍼블리싱 리뷰
- ERD(데이터베이스 설계도) 1차 초안 공유 및 검토
- 1차 웹 퍼블리싱 결과물 리뷰 및 수정 사항 도출
- 서비스 고도화를 위한 추가 콘텐츠 디자인 미팅 진행
2026.03.21 | 피드백 반영 및 DB 구축
- 윤희: 1차 퍼블리싱 피드백 적용 및 비교하기 페이지 반응형 작업
- 원지: 서비스 고도화를 위한 추가 콘텐츠 디자인 진행
- 수곤: ERD 수정안 확정 및 실제 데이터베이스(DB) 생성
2026.03.27 | 상세 기능 최적화 및 시스템 연동
- 윤희: 2차 퍼블리싱 피드백 반영, 구글 로그인/로그아웃 테스트 및 키보드 인터랙션 디테일 수정
- 원지: 인터랙션 배경 리소스 추출 및 대시보드/결과 페이지 디자인 보완
- 수곤: ERD 최종 수정 및 Next.js와 Supabase 환경 연동 완료
2026.04.03 | 서비스 안정화 및 콘텐츠 검토
- 윤희: 랜딩 페이지 구현 완료 및 코드 리팩토링 진행
- 원지: 대시보드 디자인 초안 및 KTPI 결과 페이지 일러스트/문구 수정
- 수곤: API 테스트 및 KTPI 질문 리스트 검토, 프로젝트 마감 일정 조율
2026.04.11 | 기능 검토 및 리소스 생성
- 윤희: 인터랙션 반응형 디자인 수정 및 담당 페이지 구현 기능 검토
- 원지: 대시보드 디자인 초안 완성 및 추가 콘텐츠(8강 월드컵) 디자인 기획
- 수곤: Supabase API 명세 확인 및 담당 페이지 기능 검토, 타건 사운드 파일 생성
2026.04.16 | 시스템 고도화 및 관리자 환경 구축
- 윤희: ERD 문서 최종본 수정 및 Supabase DB 최신화 완료
- 원지: 관리자 페이지 디자인 최종본 완성
- 수곤: Supabase API 에러 핸들링 방안 수립 및 사운드 파일 업로드 완료
2026.04.23 | 핵심 기능 완성 및 검수
- 윤희: 로그인 및 회원가입 페이지 기능 구현 완료
- 원지: 프로젝트 README 문서 작성 완료
- 수곤: 관리자 페이지 퍼블리싱 및 주요 기능 연동 작업 진행
- 서비스 런칭 전 최종 안정화 테스트 및 세부 인터랙션 수정
✨ 주요 서비스 기능
1. 웹 진입 인터랙션 페이지
- 도입 목적
- 유저가 사이트에 진입하는 순간부터 시각적인 재미를 제공하여, 서비스 고유의 정체성을 효과적으로 각인시키고 자연스러운 탐색을 유도합니다.
- 구현 방식 및 주요 기능
- 동적인 객체 흐름: 배경 위로 헤드셋, 마우스 등 다양한 전자기기 라인 일러스트가 왼쪽에서 오른쪽으로 부드럽게 흘러가는 무브먼트 구현
- 마우스 제스처 반응: 흘러가는 전자기기들 사이에서 '키보드' 오브젝트에 마우스를 올리면(Hover), 마우스 포인터를 따라 해당 키보드의 모델명 툴팁이 활성화
- 끊김 없는 내비게이션: 인터랙션 중인 키보드를 클릭하는 즉시 '가상 타건 사운드 체험 페이지'로 직관적으로 전환되는 인터페이스 설계
2. 타건 사운드 체험 페이지
- 도입 목적
- 텍스트나 사양표만으로는 체감하기 어려운 키보드 고유의 '소리'와 '무드'를 화면 너머로 즉각 전달하고, 탐색부터 구매 전환까지의 유기적인 사용자 경험을 제공합니다.
- 구현 방식 및 주요 기능
- 인터랙티브 타건 구현: 페이지 내에서 영문키를 입력하면, 유저가 실제 사용 중인 키보드나 마우스 입력에 반응하여 해당 모델 고유의 타건 오디오가 실시간으로 출력됩니다.
- 미리 녹음된 오디오 재생: 키보드 하단의 '재생 아이콘'을 클릭하면, 별도의 타이핑 동작 없이도 미리 오디오 세팅이 완료된 고품질 타건음을 편하게 감상할 수 있습니다.
- 하단 키보드 카드 슬라이드: 맨 밑의 화살표 박스를 클릭하면 하단 영역이 확장되며, 다양한 키보드의 이미지, 축 종류, 주요 특징이 요약된 '키보드 카드' 라인업이 활성화됩니다.
- 유기적인 페이지 내비게이션: 개별 키보드 카드를 클릭하는 즉시 해당 모델의 전용 타건 체험 환경으로 화면이 전환되며 끊김 없는 탐색 환경을 지원합니다.
- 취향 아카이빙: 카드 내 하트 이모티콘 클릭 시, 비로그인 상태일 경우 로그인 페이지로 안전하게 리다이렉트되며, 로그인 후에는 개인 '찜 목록' 보관함에 해당 제품이 즉시 저장됩니다.
- 공식 사이트 구매 연동: 카드 레이아웃 하단에 위치한 '구매하러 가기' 버튼을 통해 해당 키보드를 공식적으로 판매하는 외부 브랜드 사이트로 바로 연결됩니다.
3. 제품 비교 및 보관함 페이지
- 도입 목적
- 유저가 탐색 과정에서 수집한 선호 제품들을 한눈에 아카이빙하고, 복잡한 사양과 타건음을 입체적으로 대조해 보며 최종 구매 의사결정을 내릴 수 있도록 돕습니다.
- 구현 방식 및 주요 기능
- 찜 목록 보관함: 타건 체험 중 하트(관심 제품)를 누른 모든 키보드 라인업이 그리드 형태로 누적되어 시각적으로 노출됩니다.
- 다중 선택 및 비교: 각 키보드 카드 좌측 상단에 위치한 '체크박스'를 통해 비교하고 싶은 모델들을 여러 개 선택한 뒤, 우측 상단의 '한눈에 비교하기' 버튼을 눌러 비교 모달 창을 활성화합니다.
- 사이드 바이 사이드(Side-by-Side) 스펙 대조: 선택한 제품들이 가로로 나란히 배열되며, 키보드 이미지, 색상 라인업, 가격, 주요 특징(프로파일 종류, 연결 방식, 배터리 용량 등)을 한눈에 대조할 수 있습니다.
- 비교 화면 내 사운드 플레이: 제품별 상세 레이아웃 하단에 '타건음 듣기' 오디오 버튼이 각각 배치되어 있어, 서로 다른 키보드의 실제 녹음된 타건음을 제자리에서 바로 재생하고 비교해 볼 수 있습니다.
- 상단 드롭다운을 통한 실시간 제품 교체: 비교 창 상단의 '키보드 이름 박스'를 클릭하면 찜 목록에서 선택했던 다른 키보드 리스트가 슬라이드 형태로 노출되며, 이를 선택해 현재 비교 중인 제품을 원하는 모델로 즉시 변경하여 대조해 볼 수 있습니다.
🛠 개발 환경 및 협업 도구
개발 기술 (Tech Stack)
- 프레임워크:
Next.js (최신 웹 기술 스택)
- 인프라/DB:
Supabase (사용자 인증 및 데이터 저장소)
- 라이브러리:
Zod (데이터 유효성 검사), MUI (사용자 인터페이스 구성 요소)
- 개발 언어:
TypeScript (안정적인 코드 작성을 위한 언어)
기획 및 협업 도구
- 디자인:
Figma (화면 설계 및 프로토타입)
- 문서화:
Notion (기획 및 일정 관리)
- 소통:
Discord, Github (실시간 소통 및 코드 관리)
📂 프로젝트 폴더 구조
src
├── app
│ ├── (auth)
│ │ ├── LoginPage
│ │ │ ├── _component
│ │ │ │ └── LoginForm.tsx
│ │ │ └── page.tsx
│ │ ├── SignUpPage
│ │ │ ├── _component
│ │ │ │ └── SignUpForm.tsx
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── (main)
│ │ ├── (protected)
│ │ │ ├── MyPage
│ │ │ │ ├── _component
│ │ │ │ │ └── ProfileForm.tsx
│ │ │ │ └── page.tsx
│ │ │ └── WishListPage
│ │ │ ├── _component
│ │ │ │ ├── CompareModal.tsx
│ │ │ │ └── FavoriteList.tsx
│ │ │ └── page.tsx
│ │ ├── MainPage
│ │ │ ├── _component
│ │ │ │ └── MainComponents.tsx
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ ├── not-found.tsx
│ ├── page.tsx
│ └── provider.tsx
├── common
│ ├── components
│ │ ├── LandingPage
│ │ │ ├── LandingPage.tsx
│ │ │ └── BottomSheetCard.tsx
│ │ ├── ProductCard.tsx
│ │ └── ProductCarousel.tsx
│ ├── icons
│ │ ├── googleIcon.tsx
│ │ └── icons.ts
│ └── layout
│ ├── BottomSheet.tsx
│ ├── Footer.tsx
│ ├── Header.tsx
│ ├── MainLayout.tsx
│ ├── Nav.tsx
│ └── AuthTest.tsx
├── lib
│ └── supabaseClient.ts
├── theme
│ └── theme.ts
├── types
│ └── keyboard.type.ts
└── utils
└── keyRow.ts
