🎨Javascript로 움직이는 상자 구현

✨인트로

유튜브 영상을 보고 마우스 드래그로 움직이는 상자들을 만들어 봤다ㅎㅎ
인터랙티브 디자인은 정말 재밌고도 어려운 것 같다...
(클론 코딩 링크는 글 마지막에 첨부하였습니다.)

🤔내용

1. 백지에 네모 상자를 하나 만든다.
2. 마우스 드래그를 구현해 움직이는 상자를 만든다.
3. 마우스 누를때와 뗄 때를 표현한다.
4. 누를 때의 위치와 뗄 때의 위치를 선으로 이어준다.
5. 상자가 움직일 때 기울기를 줘서 재미를 준다.
6. 마음껏 디자인한다.

1단계. 상자 만들기

2단계. 드래그로 움직이는 상자를 만든다.

3단계. 마우스의 누를 때 뗄 때 이벤트를 빨간 점으로 표현한다.

4단계. 마우스 누를 때와 뗄 때의 위치를 선으로 이어준다.

5단계. 상자가 움직일 때 기울기를 줘서 재미를 준다.

6단계. 마음껏 디자인 해본다.

😎후기

👍유튜브로 구독하고 있는 인터랙티브 디자이너 개발자 님의 강좌? 영상을 클론 코딩 하는 것이 재밌다. 내가 자바스크립트를 능숙하게 다루지 못해서 아직 완벽하게 코드 분석을 하고 이해하지는 못하지만, 이렇게 클론코딩이라도 하면서 재미도 느끼고, 자바스크립트 코딩 스타일을 조금이나마 이해하는 것도 의미가 있다고 생각한다.

🤩인터랙티브 디자인은 정말 무궁무진하고도 어려운 분야인 것 같다...
이번 인터랙티브 디자인 코딩은 많이 유용할 것 같다. 사진들을 조각내 퍼즐 맞추기를 구현한다던가, 포스트잇처럼 활용해 투두리스트에 활용한다던가, 어떤 객체나 디자인 소품을 움직이게 할 때 재밌는 효과를 준다던가, 활용도가 꽤 높을 것 같다.

😥하지만, 이것만해도 js파일 3개와 총 라인 수가 대략 250줄은 되다보니까 아직 자바스크립트 초보인 나에겐 어려운 것 같다... 잘하고 싶다...

🎥실제로 모니터 화면에서 시연할 때는 정말 부드럽고 빠릿한데 gif로 녹화하고 파일을 보면 프레임이 떨어져 아쉽다...

😀지친 CS와 Java, 알고리즘 공부에 좋은 쉬는 시간이다.. ㅎ

📎링크

• HTML5 Canvas Tutorial : 자바스크립트로 줄에 매달려 흔들리는 상자 만들기
• 오늘 작업물 Git Source Code