Grid Layout 쉽게 사용하기 egjs-grid.js

간헐적으로 필요한 레이아웃이다. 

간단하게 CSS + HTML + JS로 구현해도 된다. 

레이아웃 그대로 그려주는 상황이면 그래도 된다. 

보통은 이 기능 붙여주세요, 저 기능 붙여주세요, 부드럽게 효과를 주면 좋겠어요 .. 

커스텀의 세계로 깊숙이 들어간다. 

 

최신 JS를 지원하는 환경이라면 egjs-grid.js 를 사용하면 한결 편하다. 

ES6를 지원해야 한다. 

 

https://naver.github.io/egjs-grid/storybook/?path=/story/introduction--page

 

만약에 ES5 엔진이면 UI/UX 개발담당자 공수가 꽤 들어간다. 

게다가 경험이 없다면 대부분의 요청은 테스트 후 가능여부가 결정된다. 

Marsonry Layout으로 검색을 많이 하고, 여러 테스트 코드를 실행하고, 구현 방법을 결정한다. 

레이아웃 구성 div 포지션이 absolute 냐 static/relative 냐에 따라 난이도도 바뀐다. 

CSS + HTML + JS 조합으로 sortable 기능을 넣은 경험이 있는데, 구현을 하긴 했다. 

 

항상 하는 얘기지만, 요구사항이 구체적이고 시간만 있다면 nothing is impossible 이다.