아래 가이드대로 노션을 작성하면 우피에서 이미지 슬라이드가 뿅!
홈페이지를 제작할 때 이미지 슬라이드가 필요한 경우가 자주 있죠?
우피는 여러분들이 쉽게 이미지 슬라이드를 사용할 수 있도록 준비해 두었습니다.
아래 가이드를 따라서 노션을 작성하고 이미지 슬라이드를 손쉽게 제작해 보세요!
1. 노션에 콜아웃 블럭을 만들고 아래와 같이 oopy:slide를 입력해 주세요.
oopy:slide (앞뒤로 띄어쓰기가 있으면 안 돼요!)
2. 콜아웃 블럭 아래에 이미지들을 붙여주세요.
(이미지 권장 사이즈는 1416*512 입니다!)
oopy:slide ㅤ
3. 이제 우피 홈페이지로 가보세요!
아래처럼 슬라이드가 보일거에요.
고급) 슬라이드에 다양한 값을 조절해 보세요!
콜아웃 가장 상단에 YAML 코드 블럭을 추가해서 슬라이드에서 사용하는 다양한 값들을 조절할 수 있어요.
oopy:slide ㅤ
type: "crossfade" # Pro 플랜 전용) 애니메이션 효과가 크로스페이드로 적용됩니다.
speed: 1000 # 슬라이드가 넘어가는데 걸리는 시간입니다. 기본값: 1000 (ms, 밀리세컨드)
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개까지 사용할 수 있습니다).
•
이미지가 넘어갈 때 효과를 슬라이딩에서 크로스페이드로 변경할 수 있습니다.
•
이미지 외에 비디오를 추가할 수 있습니다.
잠깐, 이미지에 링크를 넣고 싶으세요?
우피를 이용하면 노션 이미지 블럭에 링크를 추가할 수 있습니다.
아래 가이드를 확인해 보세요.