키키하이 (KiKiHi)
커스텀 키보드 조립 웹앱 — 3D 뷰어 & 호환성 검사
Role: Frontend 단독 개발 (프론트 커밋 44건)
Overview
하우징·키캡·스위치를 골라 나만의 키보드를 조립하고, 3D 뷰어로 확인한 뒤 그대로 구매까지 이어지는 웹앱입니다. 프론트엔드를 맡아 조립 로직, 3D 뷰어, 쇼핑 흐름을 구현했습니다. 회사 일과 병행한 사이드 프로젝트라 6개월에 걸쳐 천천히 붙였고, 3D를 실무(관제)가 아닌 커머스 맥락에서 다뤄 본 경험이 됐습니다.
이 프로젝트의 핵심
프론트엔드 구현
프론트 레포 커밋 44건
부품 간 호환성 자동 검사
하우징·키캡·스위치 조합이 성립하는지 고르는 즉시 판정
3D 커스터마이징 뷰어
확대·축소·회전, 부품을 고르면 그 자리에서 다시 렌더링
합계 금액 실시간 계산과 완성본 다운로드·공유·장바구니 담기
나머지 2개 더 보기접기
쇼핑 흐름
카테고리·인기순 정렬, 북마크 찜, 토스페이 결제, 배송지·메시지 입력
PWA 적용으로 모바일에서도 앱처럼 동작
자세히
조립과 호환성3
하우징·키캡·스위치 등 부품을 고르면 조립 결과가 즉시 반영되는 구성 화면
부품 간 호환성을 자동으로 검사해, 성립하지 않는 조합을 고르는 순간 막음
선택이 바뀔 때마다 합계 금액을 다시 계산해 함께 표시
3D 뷰어3
확대·축소·회전이 가능한 3D 뷰어로 조립 중인 키보드를 실시간 확인
부품을 클릭하면 뷰어에 바로 적용되어 다시 렌더링
완성된 키보드를 이미지로 내려받거나 공유하고, 그대로 장바구니에 담는 흐름 연결
쇼핑 · 배포4
카테고리·인기순 필터와 정렬, 북마크 기반 관심 목록
토스페이 결제 연동, 배송지 지정과 요청 메시지 입력
React + TypeScript + Redux + styled-components 구성, Netlify 배포
백엔드는 Spring Boot·MariaDB, EC2에 Docker·Nginx로 배포하는 팀 구성