앱을 만들다가 도형을 그려야할 때가 오면 나도 모르게 한숨을 내쉬고 있다.
디테일적인 부분까지 챙기려면 은근히 손이 많이 가는 작업이기 때문이다.

오늘은 오전 내내 모서리가 둥근 삼각형을 그려야했기에 나중을 위해서 기록해둔다.

설계도

삼각형을 그리기 위한 방법에는 여러가지가 있지만 우리가 익히 알고 있는 일반적인 삼각형을 그리는 일은 어렵지 않다. 구글 검색을 해도 쉽게 나올 것이다.

import React from 'react';
import { View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.triangle} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'lime',
  },
});

export default App;

위와 같은 코드로도 충분히 삼각형을 그릴 수 있다. 하지만 우리가 필요한 건 모서리가 “둥근” 삼각형이다. 그렇다면 다른 접근 방식이 필요하다. 아래 그림을 보자.

필자는 세 개의 평행사변형(마름모)의 모서리를 borderRadius로 둥글게 만든 뒤 이를 합치는 방법을 사용했다. 굳이 이 방법을 사용하지 않더라도 react-native-svg 라이브러리를 이용하면 훨씬 좋은 방법이 있을 수 있으니 원치 않는 방법이라면 다른 방법을 찾아보기를 강력히 권한다.

어쨌거나, 평행사변형 세 개를 잘 조작해야하는 것은 분명한데 그를 위해서는 transform을 잘 이용해야한다. transform으로도 할 수 있는 것은 여러가지 있지만 여기서는 rotate(돌리고), skewX(비틀고), scaleY(늘리기)를 사용할 것이다. 아래를 살펴보자.

const Triangle = ({color, size, children}) => {
  return (
    <View
      style={ {
        alignSelf: 'center',
        width: size,
        height: size,
      } }>
      {/* Upper Triangle */}
      <View
        style={ {
          position: 'absolute',
          width: '100%',
          height: '100%',
          borderTopRightRadius: 30,
          backgroundColor: color,
          transform: [{rotate: '-60deg'}, {skewX: '-30deg'}, {scaleY: 0.866}],
        } }
      />
      {/* Lower Triangle */}
      <View
        style={ {
          position: 'absolute',
          width: '100%',
          height: '100%',
          borderTopRightRadius: 30,
          backgroundColor: color,
          transform: [
            {rotate: '-180deg'},
            {skewX: '-30deg'},
            {scaleY: 0.866},
            {translateY: -0.5 * size},
          ],
        } }
      />
      {/* Bottom Right Triangle */}
      <View
        style={ {
          position: 'absolute',
          width: '100%',
          height: '100%',
          borderTopLeftRadius: 30,
          backgroundColor: color,
          transform: [
            {rotate: '180deg'},
            {skewX: '30deg'},
            {scaleY: 0.866},
            {translateY: -0.5 * size},
          ],
        } }
      />
      {children}
    </View>
  );
};

모든 사이즈에 맞추어 삼각형을 만들 수 있게 끔 transform의 변수 조정을 해주었다. 코드만 보아도 쉽게 이해할 수 있을 것이다.

보통 도형 그리기는 노하우나 경험이 많이 필요하기에 잘 모르겠다면 우선 css로 되어있는 코드를 찾아보기를 권한다. 그 후 React Native 코드로 변환하는 과정을 거칠텐데 css 코드를 보아도 잘 이해가 안된다면 chatGPT에게 바꾸어 달라고 하자.

복사 붙여넣기가 코딩 실력 상승에는 도움이 안 될 수 있으나 처음에 방향성을 잡을 때는 훌륭한 방법이다. 막막할 때 아까운 시간을 흘려보내기 보다는 무엇이라도 빠르게 방법을 찾아서 시도해 보는 것이 더 중요하다고 생각한다.