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