어렸을 적 문방구 스티커나 플래시 등으로 자주 하고 놀았던 옷 입히기 놀이를 자바스크립트로 구현했습니다. 기능 구현을 통해 무언가 쓸모 있는 것을 만들기 보다는 예쁘고 귀엽고 보기 좋은 걸 만들어보자가 목표였습니다. 스티커 판 하나 안에 모든 옷이 들어있던 문방구 스티커 옷 입히기처럼, 화면 구성은 어느 웹에서 보더라도 가급적이면 화면 하나 안에 모든 기능이 보이도록 구성하려 노력했습니다.
구현 전 당시 mvp는:
a. 이미지 드래그 앤 드롭 기능 구현 b. 슬라이드 기능 구현 c. 옷 입히기를 마친 이미지를 타 페이지로 출력 d. 해당 페이지를 캡쳐 후 다운로드 기능 만들기
위와 같으나 진행 도중 옷 입히기를 타 페이지로 출력하여 저장하는 것보다는 현재 페이지 안에서 캡쳐 후 다운로드 기능을 제공하는 것이 낫다는 판단을 하였습니다.
따라서 구현을 한 후에는:
a. 이미지 드래그 앤 드롭 기능 구현 b. 슬라이드 기능 구현 c. 해당 페이지를 캡쳐 후 다운로드 기능 만들기 d. 모달을 통해 각각의 기능이 무엇인지 설명하는 창 띄우기 위와 같은 기능이 구현되도록 목표를 수정하고 최종 완성을 했습니다. 각 기능은 전부 자바스크립트와 html, css만을 사용했으나 캡쳐 기능은 라이브러리의 도움을 받았습니다.
동영상 첫번째에 나오는 모달은 처음 사용해보는 분들을 위해 ‘사용설명서’ 버튼을 통해 옷 입히기의 기능을 설명했습니다.
이후 나오는 각 옷 리스트가 부드럽고 자연스럽게 넘어가도록 캐러셀과 애니메이션 효과의 기능을 이용하여 부드러운 슬라이드를 구현하였습니다.
옷 입히기의 가장 중심인 옷 바꿔 입기는 드래그 앤 드롭의 기능을 이용했습니다. 이미지를 끌어다 인형 박스 안에 내려두면 자동으로 옷이 입혀지는 구조입니다.
옷을 입혔다가 빈 칸에 하나하나 다시 내려 두고 새로운 옷을 입히는 작업을 피하기 위해 옷장의 새 옷과 기존에 인형이 착용하고 있던 옷이 바로바로 스왑 되어 바뀌도록 구현하는데 중점을 두었습니다.
캡쳐는 html2canvas와 filesaver라는 라이브러리의 도움을 받아 인형의 div만 지정 캡쳐하여 본인의 컴퓨터에 저장 가능하게 하였습니다.
Log in or sign up for Devpost to join the conversation.