React | 튜토리얼 컴포넌트 만들기

실전 프로젝트의 MVP 개발이 끝나고 실제 배포를 해서 유저 피드백을 받는 기간이 있었다
생각보다 많은 피드백을 받게 되었고, 충격이었던 피드백 중 하나는 사용 방법이 어렵다는 것이었다..!

고민을 하다가 튜토리얼을 추가하기로 했다

어떤 식으로 추가할까 하다가

1. 튜토리얼 버튼을 누르면 메뉴에 대한 툴팁을 띄워줄까?
2. 튜토리얼 페이지를 따로 만들어서 설명을 해줄까?

를 생각했는데 유저는 생각보다 게으르다!라는 말을 들어서 정말 쉽고 간편하게 접근할 수 있는 방법을 생각했다

✅ 튜토리얼 버튼을 누르면 설명하고자 하는 기능만 밝게 밝혀 안내하자!!

1. 모달로 배경을 어둡게 만들고
2. 설명하고자 하는 부분을 밝히고
3. 안내 문구를 작성한다

그런데 구글을 아무리 찾아봐도 포토샵처럼 배경에 구멍을 뚫는 기능은 찾기 힘들었다

그래도 해내야지.. 디자이너님이 열심히 디자인 했는데? 난 못 한다고 하기 싫은데....?!!

역시 방법은 있었다

CSS의 mix-blend-mode 사용하기

<Portal>
      <main id="tutorial">
        {/* 첫번째 튜토리얼 */}
        {fir && (
          <div id="page">
            <div className="background"> // 어두운 배경
              <div className="rowBox">
                <div className="mainIcon" /> // 강조할 부분 (뚫릴 부분)
                <p>여기서 언제든지 다시 볼 수 있어요.</p>
              </div>
            </div>
            <div className="contentBg">
              <div className="welcomeBox">
                <div className="welcomeModal">
                  <section id="title">
                    <h2>만나서 반가워요</h2>
                    <p>
                      어푸어푸를 이용하시는데 필요한 <br />
                      사용법을 알려드릴게요!
                    </p>
                  </section>
                  <section id="bottomBox">
                    <button type="button" onClick={tutorialClose}>
                      그만 볼래요
                    </button>
                    <button
                      onClick={() => {
                        setFir(false);
                        setSec(true);
                      }}
                      type="button"
                      style={{ color: '#4194F1' }}
                    >
                      좋아요
                    </button>
                  </section>
                </div>
              </div>
            </div>
          </div>
        )}

예시로 첫 번째 페이지의 코드만 가져왔다

우선 모달을 만들때처럼 portal 루트를 이용해 모달 배경처럼 어둡게 만들어준다
portal 사용방법

#tutorial {
  & #page {
    width: 430px;
    // 뚫린 배경
    & .background {
      box-sizing: border-box;
      padding: 64px 23px 20px 20px;
      mix-blend-mode: hard-light;
      background-color: rgba(0, 0, 0, 0.7);
      width: 430px;
      height: 100vh;
      position: fixed;
      top: -0px;
      z-index: 5000;
      @media (max-width: 1366px) {
        width: 100%;
        padding: 64px calc((100% - 757px) / 2) 20px;
        left: -1px;
      }
      @media (max-width: 800px) {
        min-width: 375px;
        padding: 64px 23px 20px 20px;
        left: 0px;
      }

너무 간단하게도 부모 요소에 mix-blend-mode를 hard-light로 적용해주고

// 첫 번째 페이지
      & .rowBox {
        display: flex;
        align-items: center;
        & .mainIcon {
          background-color: rgb(128, 128, 128);
          margin-top: 5px;
          margin-right: 16px;
          width: 44px;
          height: 44px;
          border-radius: 12px;
        }
        & p {
          color: rgb(128, 128, 128);
          font-size: 16px;
        }
      }

강조하고 싶은 크기를 자식 요소에 지정하고, 색을 rgb(128, 128, 128)로 적용하면 뚫린 것 같은 효과가 된다
👉 배경과 강조할 컴포넌트의 색상 차이가 정말 중요하다

어릴 적 포토샵 할 때가 떠올랐다.. hard light를 적용하면 그 부분만 강조 됐었지
포토샵 레이어 혼합 모드

문제는 우리 프로젝트가 반응형 웹이라 뚫린 부분의 위치를 잘 조정해줘야 하는 것이었다

잘 조정하면 되지!
미디어 쿼리에 calc를 사용해서 이런 저런 디바이스 환경에 다 테스트하고 적용해서 튜토리얼 컴포넌트 완성!

참고자료

MDN 공식 문서
인스트럭션 모달