[개인 프로젝트] 착시 효과 박물관

현재 경북대학교에서 심리학의 이해라는 과목을 계절학기로 수강하고 있다. 

해당 과목의 과제로 자신의 전공과 심리학의 내용을 결합하여 작품을 제출해야 한다. 

나는 착시 효과를 전시하는 박물관을 컨셉으로 HTML, CSS, Vanilla JS로 프론트엔드 작업을 진행해보았다. 

 

우선 최종 결과물은 다음과 같다!

🎁 배포 URL: optical-illusion.netlify.app/

🎯 GitHub: github.com/PapimonLikelion/understanding-of-psychology

 

해당 프로젝트를 진행하면서 배운 점은 다음과 같다!

 

1. Canvas와 Context

이번 프로젝트에서 그림을 화면에 그리고 사용자와 인터랙션을 추가하는 부분의 구현은 모두 HTML Canvas의 context를 통해서 구현했다. Interative Developer 김종민 님(www.youtube.com/user/cmiscm)의 creative coding강의를 통해 해당 내용을 처음 접했는데, 머릿속에 있는 상상을 끊임없이 구현해내시는 모습이 아주 인상 깊었다. 

 

Canvas는 아주 활용도가 무궁무진한데, 아직 실력이 모자라 이번 프로젝트를 진행하는 것도 꽤 애를 먹었다. 우선 기존의 코딩과는 조금 느낌이 달랐다. Canvas의 활용은 좌표평면에 그림을 그리듯 간단한 수학적 계산이 필요했다.

 

가장 애를 먹었던 부분은 유저와의 인터랙션을 주는 부분이었다. Canvas에서 표현되는 (x, y)좌표와 사용자가 화면 상에서 보는 (x, y)좌표가 달라 이를 변환해 주는 과정이 필요했다. 이 현상은 내가 canvas를 전체 화면의 60% width, 60% height를 가진 div 컨테이너에 canvas를 담았고, canvas 자체의 width와 height는 화면의 크기로 설정해서 발생했다. 사실 아까까지도 정확히 이유를 몰랐는데 블로그 글을 쓰면서 깨달았다... ಠ_ಠ

 

어쨋든! 변환을 통해 구현을 마무리 지어서 다행이다 :)

 

2. 마우스 이벤트와 터치 이벤트

사용자가 직접 착시를 알아차릴 수 있도록 그림 내의 일부 도형들을 잡고 드래그해서 이동시킬 수 있도록 인터랙션을 주었다. 웹에서 이를 구현하고자 마우스 이벤트(mousedown, mousemove, mouseup)를 사용했고 잘 작동했다. 하지만 문제는 스마트폰에서 화면을 봤을 때 작동하지 않는 점이었다. 찾아보니 스마트폰 같은 경우엔 터치 이벤트(touchstart, touchmove, touchend)를 사용해야 한다고 했다. 다행히 터치로도 잘 작동이 되었다 :) 

 

3. 설계의 아쉬움

아쉬웠던 부분은 솔직히 코드의 가독성이 "좋지 않다"라는 점이다. 구현할 기능 목록을 작성해 하나둘씩 클리어하면서 구현했는데, 정확한 가이드라인 없이 개발하는 느낌이 들었다. 

 

전시해야 할 그림이 100개라면? 여러가지 벽면을 추가해 진짜 돌아다니는 느낌을 주는 인터랙션을 추가하려면? 이런 변화에 내 코드는 대응하기 굉장히 힘들다고 볼 수 있다. 우테코 프리코스를 거치면서 느낀 거지만 또 한 번 디자인 패턴을 공부해야겠다 생각이 들었다. 적합한 디자인 패턴을 선택함으로써 "정확한 가이드라인"을 인지한 채 개발하는 게 좋겠구나 생각했다.