[Frontend] React Native에서 자연스러운 scroll fade 구현하기 - MaskedView

📑 들어가며

동아리에서 React Native로 프로젝트를 진행하면서

연도와 월을 선택할 수 있는 컴포넌트를 구현해야 하는 상황이었다.

 

디자인 시안은 위와 같았다.

• 연도와 월 리스트는 각각 세로로 스크롤된다.
• 한 화면에서는 약 6개의 항목이 보인다.
• 가장 아래 항목은 은은하게 페이드아웃 되어야 한다.

 

그래서 처음엔 리스트 아래에 LinearGradient를 하나 깔고,

그라데이션으로 가리는 방법을 생각했었다.

 

상황을 좀 더 직관적으로 보여주기 위해 컬러값을 변경한 결과 ,,

 

하지만 실제로 구현해보니, 여러 문제들이 있었다 ..😭

• 글자만 자연스럽게 사라지는 게 아니라 배경까지 함께 흐려짐
• 스크롤이 끝났을 때, 더 내려갈 항목이 없어도 그라데이션이 계속 남아있음
  특히 1월의 경우 0월 같은 건 없으니까 이게 마지막 요소일텐데,
  그렇다보니 계속해서 그라데이션이 남아있게 돼서 글씨가 잘 안 보였다 .. 😓
• 선택된 항목의 스타일이 바뀌어도, 그라데이션이 계속 글자를 덮여버려서 잘 보이지가 않음
  얘도 마찬가지로 1월이 가장 문제였는데 ..
  해당 연도나 월이 선택되면 글자 색이 white로 바뀌고, bold체로 변경되는데,
  1월엔 계속해서 그라데이션이 남아있다 보니까 선택이 된건지 만건지 잘 보이지가 않았다 ㅠㅡㅠ

 

따라서 LinearGradient를 이용한 방법 보다는, 글자 자체에 페이드를 적용하는 게 좋다고 판단했다.

또한, 무조건 가장 아래 요소에 페이드를 적용하는 대신에

아래로 더 스크롤할 수 있다면 하단 페이드를 on하고,

위로 더 스크롤할 수 있다면 상단 페이드를 on하는 방식을 적용하기로 했다.

 

 

---

🟥 MaskedView 적용하기

MaskedView는 iOS와 Android에서 모두 사용 가능한 컴포넌트로,

말그대로 마스크를 기준으로 자식 요소가 보일지 사라질지를 결정한다.

 

여기서 핵심 개념은 아래와 같다.

마스크 색상	실제 콘텐츠
black (불투명)	100% 보임
transparent (투명)	0% 보임
mid-gray	일부만 보임 (= 페이드 효과)

 

즉, 검은색일수록 글자가 더 선명하게 보이고, 투명할수록 사라지는 것이다.

 

그리고 요걸 잘 조합하면, 스크롤되는 텍스트가 자연스럽게 사라지는 UI를 만들 수 있을 것 같았다 !! 🤩

 

 

---

🟧 Mask 구조 설계

나는 아래와 같이 마스크를 3개의 영역으로 나눠서 구성했다.

mask (listContainer와 동일 높이)
 ├── topMask (위 페이드 구간)
 ├── middleMask (정상적으로 보이는 구간)
 └── bottomMask (아래 페이드 구간)

 

이렇게 3단 구조로 나눈 이유는 간단하다.

• topMask
  • 더 위로 스크롤할 요소가 남아있을 때만 페이드를 적용해야 한다.
  • 즉, 리스트의 최상단에 닿으면 필요 없으므로 off 한다.
• middleMask
  • 가운데 4개 요소는 항상 fully visible한 영역이므로 선명하게 보이도록 해야 한다.
• bottomMask
  • 아래로 더 스크롤할 요소가 남아있을 때만 페이드를 적용해야 한다.
  • 즉, 리스트의 최하단에 닿으면 필요 없으므로 off 한다.

이처럼 마스크 자체를 동적으로 조절해서

연도와 월 리스트의 위아래에 자연스럽게 사라지는 효과가 생기도록 만들었다.

 

 

---

🟨 구현 과정

MaskedView 설치

npm install @react-native-masked-view/masked-view

 

 

상태값으로 fade 여부 제어

스크롤이 위아래로 더 가능한지에 따라 각 방향 페이드를 켜거나 끄도록 해주었다.

const [showMonthTopFade, setShowMonthTopFade] = useState(false);
const [showMonthBottomFade, setShowMonthBottomFade] = useState(true);

 

즉, 더 위로 스크롤이 가능하면 topFade = true가 되는 것이고,

더이상 위로 스크롤할 게 없으면 topFade = false가 되는 것이다.

 

 

스크롤 이벤트에서 페이드 표시 여부 판단

스크롤할 때마다 현재 위치를 측정해서 fade를 on / off 해주도록 하였다.

const handleMonthScroll = (e) => {
  const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
  const y = contentOffset.y;
  const maxScroll = contentSize.height - layoutMeasurement.height;

  setShowMonthTopFade(y > 0); // y가 0 보다 크면 위로 스크롤할 여유가 있는 거니까 fade on!
  setShowMonthBottomFade(y < maxScroll); // y가 maxScroll 보다 작으면 아직 스크롤할 여유가 있는 거니까 fade on!
};

 

이 로직 덕분에 스크롤 가능한 방향에만 fade가 적용돼서 UX가 매우 자연스러워졌다 👍🏻

 

 

MaskedView의 마스크 요소 만들기

{/* 월 칼럼 */}
<View style={styles.column}>
  <MaskedView
    style={styles.listContainer}
    maskElement={
      <View style={styles.mask}>
        {/* 위쪽 fade */}
        {showMonthTopFade && (
          <LinearGradient
            colors={["rgba(0,0,0,0)", "rgba(0,0,0,1)"]}
            style={styles.topMask}
          />
        )}

        {/* 스크롤 리스트가 또렷하게 보이는 영역 */}
        <View style={styles.middleMask} />

        {/* 아래쪽 fade */}
        {showMonthBottomFade && (
          <LinearGradient
            colors={["rgba(0,0,0,1)", "rgba(0,0,0,0)"]}
            style={styles.bottomMask}
          />
        )}
      </View>
    }
  >
    {/* 여기 안에 실제 month 리스트 ScrollView */}
  </MaskedView>
</View>

 

mask: {
  flex: 1, // 마스크 전체 높이를 리스트 영역 전체와 똑같이 맞춰줌
},
topMask: {
  height: ITEM_HEIGHT * 1.5, // 위쪽에서 서서히 나타나는 fade 구간
},
middleMask: {
  flex: 1,
  backgroundColor: "black", // 가운데 영역은 항상 완전히 보이도록 마스크를 black으로!
},
bottomMask: {
  height: ITEM_HEIGHT * 1.5, // 아래로 갈 수록 서서히 사라지는 fade
},

 

 

---

🟩 결과

 

가장 왼쪽은 더이상 위로 스크롤할 게 없는 경우 텍스트에 fade가 적용되지 않는 모습 (12월),

가운데는 위아래 모두 스크롤할 게 있는 경우 가장 위와 가장 아래 텍스트에 fade가 적용된 모습 (10월과 5월),

가장 오른쪽은 더이상 아래로 스크롤할 게 없는 경우 텍스트에 fade가 적용되지 않는 모습이다 (1월).