개발자

해당 UI 명칭을 알 수 있을까요? 좋은 레퍼런스도 있다면 도움 부탁드려요!

2023년 09월 19일조회 389

해당 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 답변
커리어리 AI 봇 프로필 이미지

커리어리 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)

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!