프론트엔드와 빌드
React 컴포넌트로 카드 탐색·설정·업로드·프로필 UI를 구성하고 TypeScript로 데이터 구조를 관리합니다. Next.js 호환 라우트를 Vinext/Vite로 실행·빌드합니다.
SELECTED WORK / 플랫폼
PRISM CARD
포인터에 반응하는 홀로그램과 입체 효과, 계정별 업로드를 구현한 인터랙티브 카드 컬렉션.
외부 서비스는 별도 사이트에서 열리며, 일부 화면은 로그인 권한이 필요합니다.
인터페이스 구성 예시 · 실제 운영 화면 캡처 아님
PROJECT OVERVIEW
업무를 연결하는 핵심 기능
카드 탐색에 빛과 움직임을 더합니다. 포인터에 반응하는 홀로그램부터 계정별 카드 업로드, 브라우저 배경 분리까지 구현했습니다.
홀로그램·기울기 효과
카탈로그·다국어 상세정보
카드 업로드·브라우저 배경 분리
HOW IT WORKS
어떤 기술로 구현했나요?
사용한 프로그램과 각 기술이 맡은 역할을 함께 소개합니다.
인터랙션과 시각 효과
마우스와 터치 좌표를 카드 기울기·광택·홀로그램 패턴에 연결합니다. 애니메이션 프레임과 CSS 변수를 함께 갱신해 빛의 반사와 움직임을 맞추고, 효과 세기를 사용자가 조절할 수 있게 했습니다.
브라우저 이미지 처리
오리지널 및 사용자 카드에서 캐릭터 배경을 분리합니다. 브라우저 추론으로 마스크를 생성하고 Canvas에서 투명 WebP로 합성해 입체 회전 보기에 활용합니다.
서버와 영속 저장
Workers에서 서버 라우트를 실행하고 D1에 프로필·카드 메타데이터, R2에 이미지를 저장합니다. 계정 소유권을 확인해 자신의 카드만 조회·삭제하며, SQL 바인딩과 Drizzle 스키마를 함께 사용합니다.
카탈로그와 UI 도구
Node.js/Python 스크립트로 카드 카탈로그와 다국어 상세정보 인덱스를 준비·검증합니다. 페이지 단위 로딩과 캐시로 탐색 부하를 줄이고, Radix UI의 대화상자·설정 패널과 Lucide 아이콘으로 조작 화면을 구성합니다.
PHP 회원 기능 전환본
별도 PHP 전환본에 이메일/비밀번호 회원가입·로그인·로그아웃·프로필 저장을 구현했습니다. 카드 탐색·효과·업로드 전체 기능은 React/Cloudflare 앱에 있으며 PHP 전환 범위와 구분합니다.
기술 설명은 확인한 로컬 프로젝트 소스를 기준으로 작성했습니다. 운영 서버의 설정·버전과 공개 서비스의 배포 범위는 다를 수 있습니다.
우리 업무에도 이런 시스템이 필요하다면.
필요한 기능을 정리하는 단계부터 함께합니다.