완벽한 masonry 인터페이스를 구현하는 방법

masonry를 완벽히 구현하기란 쉬운일이 아니다.

지금까지는 masonry.js 라이브러리를 써서 masonry 인터페이스를 구현하였는데,

페이지 반응형에 따라 박스들이 시간을 가지고 애니메이션이 적용되어 움직이는 것이 너무 보기싫었다. (개인적으로 불필요한 애니메이션을 싫어합니다.)

그래서 나름 방법을 찾았다.

윈도우 크기 반응에따라 그때그때 masonry 없애고 다시 적용시켜주는 방식을 채택한 것이다.

하지만 해당 박스가 글이 길어져서 넘치는 경우 등에는 제대로 masonry 함수가 반응하지 않아서 박스가 겹치는 문제가 발생했으며,

그 이외에도 반응형에 따라 masonry 함수가 민감하게 반응하지 못해 디자인이 깨지는 경우도 많았다.

결론적으로 서비스에 있어서는 해당 라이브러리를 쓸 수 없다는 결론을 내렸고,

다른 라이브러리를 찾아보기 시작했다.

크게 두가지를 찾았는데, bricks.js와  salvattore.js 이다.

이중에 bricks.js는 MIT 라이브러리인데 실질적으로 masonry.js와 구현방식에 큰 차이가 없어서 똑같은 문제가 발생했기에 제꼈고,

salvattore.js로 내가 원하는것을 100% 완벽하게 구현할 수 있음을 깨달았다.

최종적으로 이 라이브러리를 이용하여 반응형에도 절때 깨지지 않는 디자인의 masonry를 구현할 수 있었다.

아래는 라이브러리의 메인 홈페이지 주소이다.

https://salvattore.js.org/

프론트엔드 개발자라면 해당 라이브러리를 다운받아서 사용해보면,

이것으로 반응형에도 완벽한 masonry를 구현할 수 있음을 알게될 것이다.

방식은 조금 특이하지만 조금만 학습하면 최고의 masonry 디자인을 구현할 수 있다 :D