React Native에서 배경 비디오 구현하는 방법

이 글에서는 React Native 앱에 배경 비디오(backgroundVideo)를 구현하는 방법을 알아보겠습니다. React Native를 이제 막 시작했다면, 먼저 'React Native로 모바일 앱 개발을 시작하기 위해 알아야 할 것들' 관련 자료를 참고하시는 것을 추천합니다.

데모: Peleton 홈 화면

배경 비디오는 앱 UI에 세련된 효과를 더할 수 있는 훌륭한 요소입니다. 광고를 표시하거나 사용자에게 메시지를 전달하고 싶을 때도 유용하게 활용할 수 있습니다. 지금부터 그 방법을 하나씩 살펴보겠습니다.

사전 준비 사항

시작하기 전에 몇 가지 기본적인 준비가 필요합니다. 우선 React Native 개발 환경이 설정되어 있어야 하며, 다음 항목들이 포함됩니다:

react-native-cli 설치
Android SDK (Mac 사용자라면 Xcode만 있으면 되므로 불필요)

프로젝트 시작하기

가장 먼저 새로운 React Native 앱을 생성합니다. 여기서는 react-native-cli를 사용하겠습니다. 터미널에서 아래 명령어를 실행하세요:

react-native init myapp

이 명령은 React Native 앱을 실행하는 데 필요한 모든 의존성과 패키지를 설치해 줍니다.

다음으로 시뮬레이터에서 앱을 실행해 보겠습니다.

iOS의 경우:

react-native run-ios

이 명령을 실행하면 iOS 시뮬레이터가 열립니다.

Android의 경우:

react-native run-android

Android 환경에서 문제가 발생할 수 있습니다. 이 경우 Genymotion이나 Android 에뮬레이터를 사용하거나, 환경 설정 관련 가이드를 참고하는 것을 추천합니다.

필요한 라이브러리 설치

이번 예제에서는 Peleton 앱의 홈 화면을 클론해 보겠습니다. 비디오 스트리밍에는 react-native-video, 스타일링에는 styled-components를 사용합니다. 두 라이브러리를 설치하세요:

Yarn 사용 시:

yarn add react-native-video styled-components

NPM 사용 시:

npm i react-native-video styled-components --save

react-native-video는 네이티브 코드를 포함하고 있으므로 반드시 링크 작업이 필요합니다. 반면 styled-components는 링크가 필요하지 않습니다. 아래 명령어를 실행하세요:

react-native link

나머지 설정은 신경 쓸 필요 없이 Video 컴포넌트에만 집중하면 됩니다. 먼저 react-native-video에서 Video를 임포트한 후 사용해 보겠습니다.

import import Video from "react-native-video";
  <Video
source={require("./../assets/video1.mp4")}
style={styles.backgroundVideo}
muted={true}
repeat={true}
resizeMode={"cover"}
rate={1.0}
ignoreSilentSwitch={"obey"}
/>

주요 props 살펴보기

source: 비디오 소스의 경로입니다. URL도 사용할 수 있습니다:

source={{uri:"https://youronlineVideo.mp4"}}

style: 비디오에 적용할 커스텀 스타일로, 배경 비디오를 만드는 핵심 요소입니다
resizeMode: 여기서는 cover를 사용합니다. contain이나 stretch도 시도해 볼 수 있지만, 원하는 결과를 얻기 어렵습니다

그 외 나머지 props는 선택 사항입니다.

비디오를 배경으로 배치하기

이제 가장 중요한 부분인, 비디오를 배경 위치에 배치하는 작업을 해보겠습니다. 스타일을 정의해 보겠습니다.

// react-native의 StyleSheet를 사용하므로 임포트를 잊지 마세요
//import {StyleSheet} from "react-native";
const { height } = Dimensions.get("window");
const styles = StyleSheet.create({
backgroundVideo: {
height: height,
position: "absolute",
top: 0,
left: 0,
alignItems: "stretch",
bottom: 0,
right: 0
}
});

코드 분석

여기서 무엇을 했는지 살펴보겠습니다. 비디오에 position: absolute를 적용하고, 디바이스 창의 height를 지정했습니다. React Native의 Dimensions를 활용해 비디오가 화면 전체 높이를 차지하도록 했으며, top:0, left:0, bottom:0, right:0 설정으로 비디오가 모든 공간을 채우게 됩니다!

전체 코드

import React, { Component, Fragment } from "react";
import {
  Text,
  View,
  StyleSheet,
  Dimensions,
  TouchableHighlight
} from "react-native";
import styled from "styled-components/native";
import Video from "react-native-video";
const { width, height } = Dimensions.get("window");
export default class BackgroundVideo extends Component {
  render() {
    return (
      <View>
        <Video
          source={require("./../assets/video1.mp4")}
          style={styles.backgroundVideo}
          muted={true}
          repeat={true}
          resizeMode={"cover"}
          rate={1.0}
          ignoreSilentSwitch={"obey"}
        />

        <Wrapper>
          <Logo
            source={require("./../assets/cadence-logo.png")}
            width={50}
            height={50}
            resizeMode="contain"
          />
          <Title>Join Live And on-demand classes</Title>
          <TextDescription>
            With world-class instructions right here, right now
          </TextDescription>
          <ButtonWrapper>
            <Fragment>
              <Button title="Create Account" />
              <Button transparent title="Login" />
            </Fragment>
          </ButtonWrapper>
        </Wrapper>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backgroundVideo: {
    height: height,
    position: "absolute",
    top: 0,
    left: 0,
    alignItems: "stretch",
    bottom: 0,
    right: 0
  }
});

// styled-component

export const Wrapper = styled.View`
  justify-content: space-between;
  padding: 20px;
  align-items: center;
  flex-direction: column;
`;
export const Logo = styled.Image`
  max-width: 100px;
  width: 100px;
  height: 100px;
`;
export const TextDescription = styled.Text`
  letter-spacing: 3;
  color: #f4f4f4;
  text-align: center;
  text-transform: uppercase;
`;
export const ButtonWrapper = styled.View`
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
`;
export const Title = styled.Text`
  color: #f4f4f4;
  margin: 50% 0px 20px;
  font-size: 30;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3;
`;
const StyledButton = styled.TouchableHighlight`
 width:250px;
 background-color:${props => (props.transparent ? "transparent" : "#f3f8ff")};
 padding:15px;
border:${props => (props.transparent ? "1px solid #f3f8ff " : 0)}
 justify-content:center;
 margin-bottom:20px;
 border-radius:24px
`;
StyledTitle = styled.Text`
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  letter-spacing: 3;
  color: ${props => (props.transparent ? "#f3f8ff " : "#666")};
`;

export const Button = ({ onPress, color, ...props }) => {
  return (
    <StyledButton {...props}>
      <StyledTitle {...props}>{props.title}</StyledTitle>
    </StyledButton>
  );
};

재사용 가능한 컴포넌트로 만들기

아래와 같이 작성하면 이 컴포넌트를 재사용 가능한 형태로 만들 수 있습니다:

<View>
<Video
source={require("./../assets/video1.mp4")}
style={styles.backgroundVideo}
muted={true}
repeat={true}
resizeMode={"cover"}
rate={1.0}
ignoreSilentSwitch={"obey"}
/>
{this.props.children}
</View>

이렇게 하면 다른 컴포넌트와 함께 활용할 수 있어 코드의 유연성이 크게 향상됩니다.

지금까지 React Native에서 배경 비디오를 구현하는 전 과정을 살펴봤습니다. 읽어주셔서 감사합니다!

Photo by David Boca on Unsplash

React Native 더 알아보기

React Native로 모바일 앱 개발을 시작하기 위해 알아야 할 것들
React Native에서의 스타일링

다른 글도 확인해 보세요

JavaScript ES6, 더 적게 쓰고 더 많이 하기
Vue.js 라우팅으로 더 나은 사용자 경험 만들기
JavaScript에서 HTTP 요청을 보내는 가장 인기 있는 방법들

Twitter에서 저를 만나보실 수 있습니다?

새 글 소식을 받아보세요

앞으로 발행될 글들의 소식을 받아보려면 메일링 리스트를 구독해 주세요.

React Native에서 배경 비디오 구현하는 방법 — 단계별 완전 가이드