URL: https://public.work

우연히 상당히 재미있는 UI 이고 한번 만들어보고싶은 기능이다.

패닝 동작으로 무한대로 이미지가 보여지는데 끝없이 영역을 옮기는데 이미지가 계속 출력된다.
아마도 계속 움직여도 끝이없을거 같다.

지금까지 생각나는 동작 원리는 다음과 같다.

• 카드 그리드는 masonry 스타일로 구현되어 있다.
• 영역이 움직일때 카드끼리 일정한 간격을 유지하면서 새로운 카드가 배치된다.
• 이미지는 화면에 보이지 않는 영역에서 새로운 카드가 만들어지고 이미지가 불러지고 있다.
• 상하좌우 방향으로 스크롤 가능하다.
  드래그 앤 드롭으로 패닝 할 수 있고 스크롤로 영역을 이동할 수 있다.
• 캔버스가 아닌 엘리먼트로 만들어져 있다.
• 자바스크립트 Intersection Observer API를 이용하여 요소가 화면에 보일 가능성이 발생할때 이벤트를 발생시켜 카드를 조립할 수 있을것이다.
  참고 URL: https://grok.com/share/bGVnYWN5_08cbaa8b-8756-411c-acaf-05e283aa8b8f
• 새로운 위치로 이동할때 이동한 좌표 기준에서 새로운 영역을 셋업하고 공간이 남는 부분은 카드로 채우고 영역을 벗어난 카드는 삭제할 것이다.
• 새로운 카드가 만들어질때 새로운 이미지 데이터를 불러와서 카드에 집어넣는다.
• 좀더 디테일하게 구현한다면 이미 이미지가 만들어진 카드에서 가까운 순서대로 만들어지고 이미지가 들어가야 한다. 그래야 화면에서 본 가까운 순서대로 이미지가 표시될 것이다.
• 데이터는 완전히 무한대일 순 없다. 언젠가는 반복되기 때문에 모든 데이터를 다 불러들이면 처음부터 새로 데이터 목록을 가져온다. (데이터 루핑)
• 카드가 만들어지거나 삭제될때 hit test 같은 개념이 들어갈 것이다.
• 카드가 하나씩 만들어질때마다 영역을 넘어서는지 검사한다. 영역 속이라면 만들어지고 완전히 벗어나면 끝난다.
• 패닝되는 방향으로 새로운 영역이 만들어지기 만들어지기 때문에 카드가 만들어지기 시작하는 좌표를 추정하는데 도움이 될것이다.

여러가지로 연구가 더 필요하고 확신이 필요한 데모 프로그램 제작이 꼭 필요할 것이다.