노션 페이지를 갤러리로 만드는 9가지 방법 — 비주얼 보드 위젯 전부 살펴보기

WidgetStation · 2026-04-29 · 6분

WidgetStation의 비주얼 보드 위젯은 노션 페이지를

한순간에 갤러리·무드보드·포트폴리오로 바꿔주는 위젯 모음이에요.

이미지 한 장이면 충분한데, 그 이미지를 어떤 흐름으로 보여주느냐에 따라

페이지 전체 분위기가 완전히 달라집니다.

이번 글에선 비주얼 보드 위젯 9가지를 하나하나 직접 보여드려요.

읽기 전 팁: 아래 위젯들은 모두 실제로 동작하는 라이브 임베드예요.

직접 만져보면서 어떤 인터랙션인지 비교해보세요.

노션에서 실제로 어떻게 보이는지 궁금하다면

WidgetStation 비주얼 보드 노션 페이지에서

9개 위젯이 한 페이지에 임베드된 모습을 확인할 수 있습니다.

1단계 — 시선이 자연스럽게 흐르는 갤러리

가만히 있어도 이미지가 알아서 움직이는 위젯들이에요.

배너 자리·페이지 헤더에 두면 노션 페이지에 리듬이 생깁니다.

오토 슬라이더 (`auto_slider_gallery`)

좌우로 자동 무한 스크롤되는 슬라이더예요.

속도는 느리게 / 보통 / 빠르게 3단계로 조절할 수 있고,

가로형(16:9)이라 노션 페이지 헤더 배너처럼 활용하기 좋습니다.

↑ 멈추지 않고 흐르는 슬라이더 — 헤더 자리에 어울려요.

드래그 & 스크롤 (`drag_scroll_gallery`)

마우스로 잡아끌면 부드럽게 따라오는 갤러리.

관성이 자연스러워서 손맛이 살아있고,

보는 사람이 "내가 직접 넘긴다" 는 감각을 주고 싶을 때 좋아요.

↑ 좌우로 끌어보세요. 부드럽게 미끄러집니다.

스크롤 카드 (`scroll_card_gallery`)

세로로 카드가 차곡차곡 쌓이며 넘어가는 형태예요.

세로형(3:4)이라 사이드 컬럼에 끼워 넣어도 어울리고,

이미지 한 장 한 장에 충분한 시선이 머무릅니다.

↑ 카드를 위아래로 스크롤해서 넘겨보세요.

2단계 — 카드 스택으로 한 장씩 보여주기

여러 장의 사진을 포커스 있게 한 장씩 보여주고 싶을 때 쓰는 위젯들이에요.

작품집·여행 사진·제품 컷 정렬에 잘 맞습니다.

카드 스택 (`card_stack_gallery`)

카드가 포커스에 한 장, 뒤에 살짝 비치는 클래식 스택 형태.

카운터(1/#) 와 도트 인디케이터 표시 여부를 선택할 수 있어요.

한 장씩 넘기는 무드가 가장 깔끔하고 정석적입니다.

↑ 가장 정석적인 카드 스택 무드.

팬 스택 (`fan_stack_gallery`)

카드 여러 장이 부채꼴로 펼쳐진 채 한 장씩 넘어가는 위젯이에요.

정적이지 않고 장식적인 느낌을 주고 싶을 때 잘 어울립니다.

↑ 부채꼴로 펼쳐진 카드 묶음 — 무드보드 느낌.

버티컬 스택 (`vertical_stack_gallery`)

카드가 위에서 아래로 한 장씩 떨어지는 세로형 스택.

스크롤 힌트(아래 화살표)를 표시하면 처음 본 사람도

바로 인터랙션 방법을 이해할 수 있어요.

↑ 위에서 아래로 한 장씩 — 모바일에서 특히 자연스러워요.

3단계 — 인터랙션이 살아있는 갤러리

마우스를 올리거나 누르는 순간 반응하는 위젯들이에요.

같은 이미지여도 "한 번 만져보고 싶은" 위젯으로 바뀝니다.

플립 갤러리 (`flip_gallery`)

카드가 앞뒷면으로 휙 뒤집히며 다음 이미지로 전환되는 위젯.

플립 속도(느리게/보통/빠르게)와 프레임 색상을 커스텀할 수 있어

폴라로이드·필름 무드를 내기 좋습니다.

↑ 카드 앞뒷면이 휙 — 폴라로이드 같은 감각.

익스팬드 호버 (`expand_hover_gallery`)

카드 위에 마우스를 올리면 그 카드만 쫙 넓어지는 갤러리.

가로형(16:9)이라 포트폴리오 그리드·제품 라인업 정렬에 잘 맞고,

한눈에 여러 장을 보여주면서 포커스도 줄 수 있어요.

↑ 카드에 마우스를 올려보세요. 해당 카드만 펼쳐집니다.

썸네일 캐러셀 (`thumbnail_carousel_gallery`)

위쪽엔 메인 이미지, 아래쪽엔 작은 썸네일 줄 이 있는 정통 갤러리 형태.

원하는 썸네일을 누르면 메인이 바뀝니다.

제품 상세·포트폴리오 케이스 스터디에 가장 익숙한 패턴이에요.

↑ 아래 썸네일을 눌러서 메인 이미지를 바꿔보세요.

왜 비주얼 보드 위젯일까요?

9가지 인터랙션 = 9가지 무드

같은 사진 9장이어도 어떤 위젯에 담느냐에 따라

가벼운 무드보드가 되기도 하고, 진중한 작품집이 되기도 해요.

페이지 톤에 맞춰 고르세요.

카드 모서리·속도까지 세부 조정

모서리 둥글기(0~40px), 자동 스크롤 속도, 도트 표시 여부 등

위젯마다 어울리는 옵션이 따로 준비되어 있습니다.

어드민에서 슬라이더 한 번이면 끝.

한 번 업로드하면 9개 위젯 어디서든

갤러리 데이터는 한 곳에서 관리돼요.

이미지를 한 번 올려두면, 9개 위젯 어디에 임베드해도 같은 컬렉션을 그대로 보여줍니다.

노션 임베드 한 줄로 끝

위젯 URL을 노션에 붙여넣고 "임베드" 만 누르면 끝.

별도 코드 작성·이미지 호스팅·CSS 손댈 필요 없어요.

데스크톱·모바일 모두 자연스럽게

모든 비주얼 보드 위젯은 컨테이너 쿼리 기반으로 만들어져

노션 페이지 폭이 달라져도 글자·간격이 알아서 맞춰집니다.

비주얼 보드 위젯 한눈에 보기

| 위젯 | 비율 | 인터랙션 | 어울리는 자리 |

|---|---|---|---|

| 팬 스택 | 3:4 | 부채꼴 펼침 | 장식적 무드보드 |

전체 위젯이 궁금하다면 위젯 카탈로그(/widgets)에서

130여 개를 카테고리별로 둘러볼 수 있어요.

노션에 직접 임베드한 모습이 궁금하다면

WidgetStation 비주얼 보드 노션 페이지 보러 가기

9개 위젯이 한 페이지에 임베드된 실제 노션 페이지입니다.

복사해서 본인 노션에 붙여넣어도 좋아요.

마치며

같은 이미지도 어떤 위젯에 담느냐에 따라 페이지 분위기가 완전히 달라져요.

오늘 9개 중 마음에 드는 한 가지부터 골라서, 노션 페이지에 살짝 얹어보세요.

도움이 필요하면 헬프 센터나 고객 지원으로 언제든 알려주세요.

새로운 비주얼 보드 위젯 아이디어가 있다면 제안도 환영합니다