서비스 주소: diykitten.com(시연 영상)
프로젝트 소개
모루 인형 캔버스는 사용자가 다양한 파츠와 도안을 활용하여 자신만의 모루 인형을 디자인할 수 있는 웹 애플리케이션입니다. 이 프로젝트는 반응형 UI, 캔버스 기반 파츠 조합, 미러링 및 반대면 렌더링, 커스터마이징 저장 및 다운로드 기능을 제공합니다.
<주요 기능>
1. 반응형 캔버스 구현
화면 너비에 따라 캔버스 및 파츠의 크기와 비율이 자동으로 조정됩니다.
2. 캔버스에서 파츠 추가 및 조정
파츠는 캔버스에 추가되며 크기, 위치, 회전을 직관적으로 조정할 수 있습니다.
드래그, 회전, 크기 조정,삭제, 레이어 순서 조정을 지원합니다.
3. 미러링 및 반대면 렌더링
현재 면의 파츠를 반대면에 미러링하여 렌더링할 수 있습니다.
x좌표 반전 및 회전값 반전을 통해 정확한 반대면 표현을 구현했습니다.
4. 커스터마이징 저장 및 다운로드
완성된 디자인을 PNG 형식으로 저장 및 다운로드할 수 있습니다.
서버와의 통신을 통해 프론트엔드에서 생성된 데이터가 이미지로 변환됩니다.
5. 관리자 페이지를 통한 파츠 관리
관리자 페이지에서 파츠를 추가, 삭제, 수정할 수 있습니다.
파츠는 키, 색상, 크기 정보를 포함하며 데이터베이스와 AWS S3에 저장됩니다.