🎞️

이미지 슬라이드 만들기

아래 가이드대로 노션을 작성하면 우피에서 이미지 슬라이드가 뿅!

홈페이지를 제작할 때 이미지 슬라이드가 필요한 경우가 자주 있죠?
우피는 여러분들이 쉽게 이미지 슬라이드를 사용할 수 있도록 준비해 두었습니다.
아래 가이드를 따라서 노션을 작성하고 이미지 슬라이드를 손쉽게 제작해 보세요!

1. 노션에 콜아웃 블럭을 만들고 아래와 같이 oopy:slide를 입력해 주세요.

oopy:slide (앞뒤로 띄어쓰기가 있으면 안 돼요!)

2. 콜아웃 블럭 아래에 이미지들을 붙여주세요.

(이미지 권장 사이즈는 1416*512 입니다!)
oopy:slide ㅤ

3. 이제 우피 홈페이지로 가보세요! 아래처럼 슬라이드가 보일거에요.

고급) 슬라이드에 다양한 값을 조절해 보세요!

콜아웃 가장 상단에 YAML 코드 블럭을 추가해서 슬라이드에서 사용하는 다양한 값들을 조절할 수 있어요.
YAML 코드 블럭이란, 언어를 YAML로 설정한 노션 코드 블럭을 말합니다. 페이지별 YAML 코드 블럭 에서 YAML 코드 블럭을 넣는 방법에 대해서 확인해 보세요!
oopy:slide ㅤ
type: "crossfade" # Pro 플랜 전용) 애니메이션 효과가 크로스페이드로 적용됩니다. ratio: 2.76 # 슬라이드 너비 : 슬라이드 높이 비율을 지정합니다. 기본값: 2.76 (708px : 256px) full: false # 슬라이드를 화면에 꽉 차도록 합니다. full 옵션이 true 일때도 ratio는 유지됩니다. 슬라이드가 컬럼이나 토글에 들어가는 경우 해당 옵션은 동작하지 않습니다. 기본값: false autoplay: period: 6000 # 슬라이드가 자동으로 넘어가기까지 걸리는 시간입니다. 자동 재생을 원하지 않는다면 값을 0으로 주세요! indicator: # 슬라이드 아래에 나타나는 이동을 위한 점들을 의미합니다. show: true # 점들을 숨기려면 값을 false로 변경하세요 color: "#6196FF" # 현재 보이는 슬라이드에 대응되는 점의 색깔입니다. 기본값: #6196FF borderRadius: 16 # 슬라이드의 모서리를 둥글게 하는 값입니다. 기본값: 16 backgroundColor: "#6196FF" # 슬라이드의 배경화면 색상을 지정합니다. *) 배경을 투명색으로 사용하려면 "transparent" 를 입력하세요.
YAML
복사

Pro 플랜 전용 옵션

이미지 개수에 제한이 없습니다. (Basic 플랜은 이미지를 2개까지 사용할 수 있습니다).
이미지가 넘어갈 때 효과를 슬라이딩에서 크로스페이드로 변경할 수 있습니다.
이미지 외에 비디오를 추가할 수 있습니다.

잠깐, 이미지에 링크를 넣고 싶으세요?

우피를 이용하면 노션 이미지 블럭에 링크를 추가할 수 있습니다.
아래 가이드를 확인해 보세요.

다음