[직소퍼즐] 직소 퍼즐 만들기 - 프롤로그

목표: 유튜브 링크를 붙여 넣고 만들기를 누르면, 해당 장면의 썸네일을 기반으로 직소 퍼즐을 만들고, 직소 퍼즐이 맞춰지는 순간 영상 재생이 시작된다.

 

일단 확인해보니 밀리초단위로 시작시간 영상을 공유할수는 없는 것 같다. 일단 만들기 시작하자.

 

세부 작업으로 한번 나눠 보려 한다.

 

1. 환경 설정

- ts만 사용하고 따로 뭐 설치 안하려고 한다.

 

2. 직소 기능 구현

- canvas를 사용할거고, 거기서 drag n drop 기능을 이용해서 네모 조각을 움직이는 기능을 구현한다

- 특정한 조각의 배열이 순서를 이루면 정답으로 인정한다

- 네모 조각을 진짜 직소 퍼즐 조각처럼 만든다

 

3. 직소 사진 구현

- 사진을 기반으로 직소 퍼즐이 잘리는 것을 구현한다

 

일단 위 작업까지 하고, 영상관련해서 작업하는 거는 위 작업이 완료 된 다음 생각해보자. 

DND 기능은 그냥 라이브러리 사용해야 할듯. 저거까지 구현하기는 귀찮다.