IMWEB WITH DO #01 – 스크롤 인터랙션 갤러리
안녕하세요, 코딩하는 공룡 디보입니다.
아임웹에서 “이런 것까지 가능해?” 싶은 기능들을 코드를 활용해 직접 구현해드리고 있는데요, 이번 글에서는 실제 의뢰받아 제작했던 기능을 디보(DIBO)에 연동하는 과정까지 함께 소개해보려고 합니다.
기능 자체는 이미 완성된 프로젝트지만, 디보에 연동하면 운영자가 직접 이미지·텍스트를 쉽게 교체할 수 있는 형태로 재탄생합니다.
아임웹 코드 위젯을 사용하는 분들에게 좋은 참고가 될 거예요.
의뢰 내용
“스크롤에 반응하는 갤러리 인터랙션을 만들고 싶은데,
3행 × 3열 그리드에서, 스크롤할 때 양쪽 1열·3열 이미지가 위/아래로 천천히 이동하고 가운데 이미지가 자연스럽게 확대되는 패럴랙스 스타일의 인터랙션을 구현해달라.”
아임웹 코드 위젯을 사용해 기능 자체는 구현되었지만, 문제점이 하나 있었어요.
❗ 이미지 변경 시 매번 코드를 수정해야 한다는 점
개발에 익숙하지 않은 운영자 입장에서는 이미지 한 장 바꾸려고 HTML 코드를 직접 편집해야 하는 불편함이 있었죠.
그래서 이번 콘텐츠에서는 같은 기능을 디보(DIBO)로 연동하여, 운영자가 관리페이지에서 이미지만 교체하면 자동 반영되는 방식으로 개선해보려고 합니다.
사용할 디보 익스텐션
이번 연동에 사용할 디보 익스텐션은 이미지 블록(image-block)입니다.
이미지를 리스트 형태로 관리하고, 프론트 코드에서는 API를 통해 데이터를 받아 사용할 수 있는 기본 확장 기능이에요.
스크롤 효과 익스텐션 확인하기
사전 준비 사항
이 단계가 익숙하지 않다면, 이전에 작성한 디보 연동 기초 가이드를 먼저 참고하시길 권장드립니다.
연동 과정
아래 과정을 따르면 디보와 아임웹 프론트 코드가 매끄럽게 연동됩니다:
- 디보로 메인페이지 이동해하셔서 하단 왼쪽에 보이는 DIBO EXTENSIONS SCROLL EFFECT를 클릭하세요
- 익스텐션 추가(image-block)
- 익스텐션 활성화 및 목록 제목 메인 배너(선택사항) 변경
- 메인배너 목록 클릭 후 익스텐션 데이터 목록 페이지에서 항목 추가(우측 검은버튼)
- 익스텐션 설정 → “무료 코드” 복사
- 아임웹 디자인 모드 코드 위젯에 붙여넣기
- 저장 후 화면에서 정상 동작 확인
마무리
이 과정을 거치면 앞서 만들었던 스크롤 인터랙션 갤러리가 이제 디보에서 등록한 이미지들을 자동으로 불러와 표시하는 형태로 바뀝니다.
운영자는 아임웹 코드를 건드릴 필요 없이 디보 관리페이지에서 이미지만 교체하면 끝! 이것이 바로 디보를 쓰는 가장 큰 이유이자 장점입니다.
디보 익스텐션은 기본적으로 “API 키 – 밸류 구조만 이해하면 어떤 프론트 코드에도 쉽게 붙일 수 있는 구조”로 설계되어 있습니다.
아임웹, React, Vue 등 어떤 프레임워크에서도 동일하게 활용할 수 있으며, 한 번 익숙해지면 기존에 직접 개발해서 쓰던 기능도 손쉽게 ‘운영 가능한 형태’로 전환할 수 있습니다.
다음 포스팅에서는 또 다른 실제 개발 건을 가져와, 아임웹과 디보를 함께 활용해 어떻게 더 효율적이고 빠르게 운영할 수 있는지 소개할 예정입니다.
궁금한 기능이나 연동하고 싶은 위젯이 있다면 댓글로 알려주세요!
CONTACT
IMWEB WITH DO #01 – 스크롤 인터랙션 갤러리
안녕하세요, 코딩하는 공룡 디보입니다.
아임웹에서 “이런 것까지 가능해?” 싶은 기능들을 코드를 활용해 직접 구현해드리고 있는데요, 이번 글에서는 실제 의뢰받아 제작했던 기능을 디보(DIBO)에 연동하는 과정까지 함께 소개해보려고 합니다.
기능 자체는 이미 완성된 프로젝트지만, 디보에 연동하면 운영자가 직접 이미지·텍스트를 쉽게 교체할 수 있는 형태로 재탄생합니다.
아임웹 코드 위젯을 사용하는 분들에게 좋은 참고가 될 거예요.
의뢰 내용
“스크롤에 반응하는 갤러리 인터랙션을 만들고 싶은데,
3행 × 3열 그리드에서, 스크롤할 때 양쪽 1열·3열 이미지가 위/아래로 천천히 이동하고 가운데 이미지가 자연스럽게 확대되는 패럴랙스 스타일의 인터랙션을 구현해달라.”
아임웹 코드 위젯을 사용해 기능 자체는 구현되었지만, 문제점이 하나 있었어요.
개발에 익숙하지 않은 운영자 입장에서는 이미지 한 장 바꾸려고 HTML 코드를 직접 편집해야 하는 불편함이 있었죠.
그래서 이번 콘텐츠에서는 같은 기능을 디보(DIBO)로 연동하여, 운영자가 관리페이지에서 이미지만 교체하면 자동 반영되는 방식으로 개선해보려고 합니다.
사용할 디보 익스텐션
이번 연동에 사용할 디보 익스텐션은 이미지 블록(image-block)입니다.
이미지를 리스트 형태로 관리하고, 프론트 코드에서는 API를 통해 데이터를 받아 사용할 수 있는 기본 확장 기능이에요.
스크롤 효과 익스텐션 확인하기
사전 준비 사항
이 단계가 익숙하지 않다면, 이전에 작성한 디보 연동 기초 가이드를 먼저 참고하시길 권장드립니다.
연동 과정
아래 과정을 따르면 디보와 아임웹 프론트 코드가 매끄럽게 연동됩니다:
마무리
이 과정을 거치면 앞서 만들었던 스크롤 인터랙션 갤러리가 이제 디보에서 등록한 이미지들을 자동으로 불러와 표시하는 형태로 바뀝니다.
운영자는 아임웹 코드를 건드릴 필요 없이 디보 관리페이지에서 이미지만 교체하면 끝! 이것이 바로 디보를 쓰는 가장 큰 이유이자 장점입니다.
디보 익스텐션은 기본적으로 “API 키 – 밸류 구조만 이해하면 어떤 프론트 코드에도 쉽게 붙일 수 있는 구조”로 설계되어 있습니다.
아임웹, React, Vue 등 어떤 프레임워크에서도 동일하게 활용할 수 있으며, 한 번 익숙해지면 기존에 직접 개발해서 쓰던 기능도 손쉽게 ‘운영 가능한 형태’로 전환할 수 있습니다.
다음 포스팅에서는 또 다른 실제 개발 건을 가져와, 아임웹과 디보를 함께 활용해 어떻게 더 효율적이고 빠르게 운영할 수 있는지 소개할 예정입니다.
궁금한 기능이나 연동하고 싶은 위젯이 있다면 댓글로 알려주세요!