개발자
해당 UI 명칭을 알 수 있을까요? 좋은 레퍼런스도 있다면 도움 부탁드려요!
해당 UI를 개발하려고 합니다. 라이브러리 없이 개발하려고 했으나 사이즈 조절 계산식이 없다보니 넓이에 꽉차게 이미지들이 안들어가더라구요. 혹시 사용해보신 라이브러리나 검색 키워드가 있을까요? 찾아봤는데 mosonry layout만 나오더라구요.. 이미지가 안올라가네요! 구글 이미지 탭 접속하면 나오는 이미지 갤러리 입니다! 도움부탁드립니다!
답변 1
인기 답변
말씀해주신 것처럼여러 이미지를 벽돌처럼 쌓아올리는 UI를 통상적으로 Masonry Layout 이라고 부르곤 합니다. 저도 이것을 직접 구현해본 경험은 없는데, 네이버의 egjs 라이브러리를 활용해 기능 구현을 해본 경험은 있습니다. 사용 경험이 나름(?) 나쁘지 않았어요. - https://naver.github.io/egjs-grid/storybook/?path=/story/introduction--page 이 외에도 구글에 검색하니 직접 구현하는 과정을 소개한 글도 있네요. - https://velog.io/@bbumjun/masonry-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9C%BC%EB%A1%9C-%EA%B0%A4%EB%9F%AC%EB%A6%AC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 - https://wit.nts-corp.com/2022/10/26/6595
조성원
경기대학교 컴퓨터공학부 • 2023년 09월 20일
저도 관련해서 많이 찾아봤었는데요. 제 경험상 가장 좋았던건 Magicgrid였습니다. 반응형으로 너비에 따른 레이아웃 변환이나 애니메이션 적용 등이 인상적이었네요. https://github.com/e-oj/Magic-Grid
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 09월 19일
묘사해주신 UI는 Masonry layout 혹은 Pinterest-style grid라고 불리는 레이아웃에 가까운 것 같습니다. 이러한 형태의 UI를 구현하기 위해서는 CSS의 column-count, column-gap 같은 속성들을 활용하거나 JavaScript를 이용하여 각 항목의 위치를 직접 계산하고 배치하는 방법 등이 있습니다. React와 Next.js 환경에서는 여러가지 라이브러리가 제공되고 있습니다. 그 중 널리 사용되는 것으로 "react-masonry-component", "react-masonry-css", "macy.js" 등이 있습니다. "masonry layout react" 혹은 "pinterest style grid react" 와 같은 키워드로 검색해보시면, 해당 주제에 대한 많은 자료들을 찾으실 수 있을 것입니다. 각 라이브러리별 특징과 사용방법에 대해 알아보시고, 프로젝트에 가장 적합한 것을 선택하시면 될 것 같습니다. 추가로 아래 링크들은 React에서 masonry layout 구현에 도움이 될만한 레퍼런스 입니다: 1. [react-masonry-css GitHub](https://github.com/paulcollett/react-masonry-css) 2. [A Complete Guide to Grid | CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) 3. [Building a masonry (cascading grid) layout](https://daily-dev-tips.com/posts/building-a-masonry-cascading-grid-layout)
지금 가입하면 모든 질문의 답변을 볼 수 있어요!