모바일 기술의 광범위한 채택으로 인해 스와이프 가능한 인터페이스가 앱과의 인터페이스를 위한 필수 수단으로 확산되었으며, 이는 이러한 기기에서 최적의 사용자 경험을 제공하는 데 매우 중요합니다.
스와이퍼를 활용하면 React 기반 애플리케이션 내에서 동적이고 인터랙티브한 사용자 인터페이스 요소를 생성할 수 있으며, 플랫폼 전체에서 스와이프 제스처를 기본 탐색 모드로 통합하는 효율적인 수단을 제공합니다.
Swiper 설치하기
Swiper를 React 애플리케이션에 통합하려면 먼저 프로젝트의 루트 폴더에서 다음 명령을 실행하여 설치를 확인해야 합니다:
npm install swiper
Swiper가 설치되면 애플리케이션 내에서 사용할 수 있습니다.
스와이프 가능한 인터페이스 만들기
Swiper를 React 애플리케이션에 통합할 때 Swiper 라이브러리에서 Swiper와 SwiperSlide 모듈을 모두 임포트하여 스와이프 가능한 인터페이스를 개발할 수 있습니다.
Swiper 컴포넌트는 스와이프 가능한 컴포넌트의 전체 아키텍처, 기능 및 구성을 포괄하는 Swiper 라이브러리의 기본 요소 역할을 합니다. 스와이퍼 컴포넌트의 하위 요소로 작동하는 스와이퍼 슬라이드 컴포넌트는 스와이퍼 엔티티를 구성하는 특정 슬라이드를 묘사합니다.
스와이프 가능한 인터페이스를 만들기 위해 스와이퍼 및 스와이퍼슬라이드 컴포넌트를 활용하는 데모가 아래에 나와 있습니다:
import React from 'react';
import { Swiper, SwiperSlide} from "swiper/react";
import 'swiper/css';
function App() {
return (
<div>
<Swiper>
<SwiperSlide><div className='element'>Element 1</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 2</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 3</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 4</div></SwiperSlide>
</Swiper>
</div>
)
}
export default App
앞서 언급한 코드 블록에는 스와이퍼 및 스와이퍼슬라이드 컴포넌트 외에도 스와이퍼/css 모듈을 활용한 스와이퍼용 표준 CSS 파일 가져오기도 포함되어 있습니다.
코드 스니펫에는 Swiper 컴포넌트가 포함되며, 이 컴포넌트는 4개의 SwiperSlide 하위 컴포넌트로 둘러싸여 있습니다. 모든 SwiperSlide 컴포넌트에는 className 속성이 할당된 div 요소가 있습니다. 이 속성은 스타일 지정 목적으로 활용될 수 있습니다.
.element {
inline-size: 100px;
border-radius: 12px;
padding: 1rem;
color: #333333;
background-color: #e2e2e2;
font-family: cursive;
}
스와이프 가능한 인터페이스 사용자 지정하기
스와이프 제스처를 통해 쉽게 탐색할 수 있는 사용자 친화적인 인터페이스를 만든 후에는 특정 요구 사항이나 선호도에 따라 시각적 매력과 기능을 더욱 세분화할 수 있습니다.
스와이퍼 라이브러리를 사용하면 React 애플리케이션 내에서 스와이퍼 컴포넌트에 속성으로 전달할 수 있는 사용 가능한 매개변수 배열을 통해 기능과 미학을 모두 개인화하여 수정할 수 있습니다.
import React from 'react';
import { Swiper, SwiperSlide} from "swiper/react";
import 'swiper/css';
function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
loop={ true }
>
<SwiperSlide><div className='element'>Element 1</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 2</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 3</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 4</div></SwiperSlide>
</Swiper>
</div>
)
}
export default App
spaceBetween, slidesPerView, loop. spaceBetween 속성은 슬라이드 간 거리를 지정하며, 이 예제에서는 30픽셀로 설정되어 있습니다.
slidesPerView 속성을 활용하면 동시에 표시되는 슬라이드의 수를 조정할 수 있습니다. 여기서는 앞서 언급한 속성에 2라는 값을 할당하여 스위퍼 컴포넌트가 동시에 두 개의 슬라이드를 표시하도록 했습니다.
슬라이드 루핑은 값이 true인 Loop 속성에 지정된 대로 무기한 계속됩니다.
모듈로 스와이프 가능한 인터페이스 구성하기
스와이퍼 라이브러리에서는 기본 기능 외에 스와이프 가능한 인터페이스를 추가로 사용자 정의할 수 있는 다양한 JavaScript 모듈을 제공합니다. 이러한 모듈에는 탐색, 자동 재생, 페이지 매김 및 스크롤바 등이 포함됩니다.
애플리케이션 내에서 앞서 언급한 모듈을 활용하려면 스와이퍼 라이브러리에서 해당 모듈을 가져와야 합니다. 또한 각 모듈에 해당하는 CSS 스타일을 가져와서 모듈 프로퍼티를 통해 스와이퍼 컴포넌트에 전달해야 합니다.
주어진 콘텐츠를 좀 더 이해하기 쉬운 언어로 바꾸도록 도와드릴까요?
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
modules={[Navigation]}
loop={true}
navigation={true}
>
<SwiperSlide><div className="element">Element 1</div></SwiperSlide>
<SwiperSlide><div className="element">Element 2</div></SwiperSlide>
<SwiperSlide><div className="element">Element 3</div></SwiperSlide>
<SwiperSlide><div className="element">Element 4</div></SwiperSlide>
</Swiper>
</div>
);
}
export default App;
앞서 언급한 코드 세그먼트는 관련 CSS 스타일과 함께 내비게이션 모듈을 가져온 다음, 스와이퍼 구성 요소의 ‘모듈’ 속성을 활용하여 스와이퍼 라이브러리의 해당 모듈에서 제공하는 기능을 활성화하고 구성합니다.
탐색 모듈은 이전 및 다음 화살표 버튼을 통합하여 스와이퍼 구성 요소에 탐색 기능을 제공하며, 클릭 또는 탭을 통해 상호 작용하여 이전 또는 후속 슬라이드로 전환 할 수 있습니다.
탐색 속성의 값이 참이면 인터페이스에 이전 및 다음 버튼이 나타납니다.
자동 재생으로 스와이프 가능한 인터페이스 구성
자동 재생 기능을 사용하면 사용자가 수동으로 개입할 필요 없이 캐러셀이 한 슬라이드에서 다른 슬라이드로 원활하게 전환할 수 있습니다.
자동 재생 모듈을 활용하여 스와이프 가능한 인터페이스를 설정하는 절차를 설명하는 데모가 제공됩니다:
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/autoplay";
function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
modules={[Autoplay]}
loop={true}
autoplay={{ delay: 3000 }}
>
<SwiperSlide><div className="element">Element 1</div></SwiperSlide>
<SwiperSlide><div className="element">Element 2</div></SwiperSlide>
<SwiperSlide><div className="element">Element 3</div></SwiperSlide>
<SwiperSlide><div className="element">Element 4</div></SwiperSlide>
</Swiper>
</div>
);
}
export default App;
지연 시간(이하 3000밀리초)을 지정하여 자동 재생 속성을 활용할 수 있습니다.
페이지 매김으로 스와이프 가능한 인터페이스 구성
페이지 매김 모듈은 스와이퍼의 중요한 구성 요소로, 캐러셀의 진행 상황을 표시하는 데 글머리 기호 또는 진행률 표시줄 표시기라는 두 가지 옵션을 제공합니다. 이를 통해 사용자는 캐러셀의 슬라이드 수와 캐러셀 내 현재 위치를 명확하게 파악할 수 있습니다.
페이지 매김 모듈을 사용하려면 스위퍼 구성 요소의 ‘모듈’ 속성으로 가져와 통합해야 하며, 이를 통해 단일 뷰포트 내에서 여러 페이지를 스와이프하여 탐색할 수 있는 페이지 매김 기능이 활성화됩니다.
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper";
import "swiper/css";
import "swiper/css/pagination";
function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
modules={[Pagination]}
loop={true}
pagination={{ clickable: true }}
>
<SwiperSlide><div className="element">Element 1</div></SwiperSlide>
<SwiperSlide><div className="element">Element 2</div></SwiperSlide>
<SwiperSlide><div className="element">Element 3</div></SwiperSlide>
<SwiperSlide><div className="element">Element 4</div></SwiperSlide>
</Swiper>
</div>
);
}
export default App;
제공된 코드 블록은 페이지 매김 모듈에 페이지 매김 기능을 내장하고 사용자가 페이지 매김 글머리 기호를 클릭하여 페이지를 탐색할 수 있도록 합니다. 이는 ‘페이지 매김’ 구성 요소의 ‘클릭 가능’ 속성을 ‘true’로 설정하면 이루어집니다.
페이지 매김을 React 애플리케이션에 통합하기 위해 높이 평가되는 또 다른 솔루션은 Swiper 라이브러리의 페이지 매김 모듈과 더불어 react-paginate 라이브러리입니다.
React로 접근 가능한 애플리케이션 구축하기
스와이프 가능한 인터페이스의 활용은 직관적인 상호작용 수단을 제공하기 때문에 터치 기반 기기용으로 설계된 애플리케이션의 전반적인 사용자 경험에 긍정적인 영향을 미칩니다. 스와이퍼 라이브러리는 적응성이 뛰어나 개발자가 특정 애플리케이션 요구 사항에 맞게 기능을 조정할 수 있습니다.
다양한 UI 라이브러리를 통해 React 애플리케이션의 접근성을 높일 수 있습니다. 이러한 라이브러리는 애플리케이션의 전반적인 사용자 경험을 향상시키는 다양한 기능을 제공합니다.