토스ㅣSLASH 23 - 퍼널 : 쏟아지는 페이지 한 방에 관리하기 (TOSH | SLASH 23 - Funnel Pattern : Organizing an overflow of pages at once)

⚠️ 저작권 보호를 위해 자료 및 예시가 대체되었습니다. 예시 코드는 React⚛️로 작성되었습니다.
🫨 통신사 가입을 하기 위해서 아래와 같이 긴 폼과 약정이 포함된 페이지를 마주치게 될 때가 있다.

이렇게 많은 페이지들을 넘나드는 흐름을 효율적으로 관리하는 방법이 뭘까?
이번글에서는 토스 SLASH23에서 다룬 퍼널을 통한 분기와 상태 관리에 대해 살펴보자.

'플랫폼 디자이너가 효율을 만들어내는 법'에서 소개한 화면 흐름

서비스를 개발할 때 대표적인 프론트엔드 패턴들

1. 상점

상점 패턴

 

목록 페이지 -> 상세 페이지 구조로 이루어져 있고, 블로그나 뉴스, To-do 리스트도 이 유형에 해당된다.

 

2. 단일 페이지

단일 페이지 패턴

 

페이지 이동 없이 한 화면 내에서 상호작용할 수 있고, 지도나 메신저 앱이 이 유형에 해당된다.

 

3. 설문조사

설문 조사 패턴

 

여러 페이지들을 통해 상태를 수집 -> 결과 페이지로 이루어진 형태, 회원가입 mbti 검사, 결제 신청서 등이 이 유형에 해당된다. 오늘 핵심적으로 다룰 패턴은 "설문조사 패턴"이고, 토스에서는 이를 '퍼널(funnel)'패턴이라고 부른다.

 

funnel은 '깔대기'를 뜻한다. 깔때기에 모래를 부으면 고은 입자는 통과하고 굵은 입자는 필터 되듯이, 

다양한 유저들이 서비스에 처음 들어가면서부터 최종 목표에 도달하기까지 조금씩 필터 된다.

 

퍼널 패턴 구현 방식

 

📝  퍼널 구조로 페이지를 넘어가면서 정보를 수집하는 흐름은 유사하여 SKT USIM 온라인 개통페이지를 간략화한 예시로 대체했습니다.

 

전반적인 디자인 요구사항 흐름은 다음과 같다.

 

단계별로 살펴보자면, 

 

 

신규 가입을 선택하고 다음으로 진입하게 되면 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1 단계 : 통신 유형에 대한 정보를 stepSeq=1에서 수집하고,

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2 단계 : 요금제 선택에 대한 정보를 stepSeq2 단계에서 수집한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3 단계 : 선택한 요금제에 따라 지불해야 하는 요금 정보를 제공하고,

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4 단계 :  선택한 요금제에 따른 혜택 선택 정보를 stepSeq=4에서 수집한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5 단계: 유저의 개인 정보를 stepSeq=5에서 수집하고,

가입 API를 호출하여 1~5에서 수집한 데이터 (통신 유형/요금제 선택/ 혜택 선택/ 개인 정보)를

넘기면 가입 완료🥳

 

 

 

 

 

 

 

 

 

 

 

🤔 어떤 방식으로 해당 흐름을 구현할 수 있을까?

기본 구조로 설계

먼저 페이지 별로 파일을 구성해 보는 방법이 있다.

🗂️ USIM 신규 가입 (/buyproc) 
ㄴ 📄 통신유형.tsx (/net-typ?stepSeq=1)
ㄴ 📄 요금제.tsx (/charge?stepSeq=2)
ㄴ 📄 요금확인.tsx (/condition?stepSeq=3)
ㄴ 📄 혜택.tsx (/benf?stepSeq=4)
ㄴ 📄 개인정보.tsx (/self-auth?stepSeq=5)
ㄴ 📄 가입완료.tsx 

 

각 페이지에 해당되는 파일들을 만들고, router.push('/${다음페이지 주소}')로 다음 페이지로 이동시킨다.

각 페이지에 필요한 상태가 나눠져 있기 때문에 전역 상태  const [registerData, updateRegisterData] = useGlobalState(registerData)로 상태를 유지할 수 있다.

 

동작도 잘 되는 괜찮은 설계지만, 유지보수의 측면에서는 개선할 부분이 보인다.

 

( 1 ) 페이지 흐름이 직관적이지 않다.

       - 통신유형.tsx, 요금제.tsx, 요금확인.tsx, 혜택.tsx, 개인정보.tsx, 가입완료.tsx 이 페이지들의 흐름을 파악하기 위해서는  router.push('/${다음페이지 주소}')을 타고 가면서 5개의 페이지들을 들어가서 봐야 파악이 가능하다.

 

(2) 상태가 여기저기 흩어져 있어서 디버깅이 어려워지고 api에 기능을 추가하기가 까다롭다.

       - 가입을 위한 정보들을 전역 상태로 각 페이지에서 수집했지만, api 전송을 위해 전역상태의 사용되는 곳은 개인정보.tsx다.

       - 디버깅을 위해 개인정보.tsx 뿐만 아니라 전체를 대상으로 데이터 흐름을 추적해야 하는 문제가 생긴다.

 

이런 문제들은 어떻게 해결할 수 있을까?

---

퍼널 패턴 코드 개선 방법 3가지

퍼널 패턴 코드를 개선하기 위한 접근 방법으로는 기초적인 부분에서 먼저 살펴본다.
1. 응집도
2. 추상화
3. 시각화

👩🏻‍🔧 개선 방향 1: 연관된 코드는 가까운 곳에 배치하여 흩어져 있는 상태와 페이지들을 한 곳으로 모으기!  ➡️ 응집도 높이기

 

 const [registerData, updateRegisterData] =useGlobalState(registerData) 지역 상태 만들고, step 상태에 따라 UI 컴포넌트를 조건부 렌더링한다.

const [registerData, updateRegisterData] = useState();

const [step, setStep] = useState<

"통신유형" | "요금제" | "요금확인" | "혜택" | "개인정보" | "가입완료"

>("통신유형");

return (

<main>

{step === "통신유형" && <통신유형 onNext={(data) => setStep("요금제")} />}

{step === "요금제" && <요금제 onNext={(data) => setStep("요금확인")} />}

{step === "요금확인" && <요금확인 onNext={(data) => setStep("혜택")} />}

{step === "혜택" && <혜택 onNext={(data) => setStep("개인정보")} />}

{step === "개인정보" && <개인정보 onNext={(data) => setStep("가입완료")} />}

{step === "가입완료" && <가입완료 />}

</main>

);

 

각 단계에서   다음  버튼을 클릭하면 step 상태를 원하는 UI로 업데이트하여,

UI 세부 사항은 하위 컴포넌트에서 관리하고, step의 이동은 상위에서 관리하여 한 곳에서 상태를 관리할 수 있게 되었다.

 

api 호출에 필요한 상태도 상위에서 관리해주무므로 다음과 같이 추가해 줄 경우, 어떤 UI에서 정보가 수집되는지

페이지를 타고 갈 필요 없이 바로 알 수 있다.

{step === "개인정보" && (

    <개인정보

       onNext={async () => {

           await fetch("/api/register", { data });

          setStep("가입완료");

       }}

    />

)}

 

또는 다음과 같이 다른 api를 추가하더라도 손쉽게 도입이 가능하다.

const [registerData, updateRegisterData] = useState();

const [step, setStep] = useState<

  "통신유형"

| "요금제"

| "요금확인"

| "혜택"

| "개인정보"

| "혜택수신여부"

| "가입완료"

>("통신유형");

return (

     <main>

         {step === "통신유형" && <통신유형 onNext={(data) => setStep("요금제")} />}

         {step === "요금제" && <요금제 onNext={(data) => setStep("요금확인")} />}

         {step === "요금확인" && <요금확인 onNext={(data) => setStep("혜택")} />}

         {step === "혜택" && <혜택 onNext={(data) => setStep("개인정보")} />}

         {step === "개인정보" && <개인정보 onNext={() => setStep("혜택수신여부")} />}

         {step === "혜택수신여부" && (         

                  <혜택수신여부

                           onNext={async () => {

                                        await fetch("/api/register", { data });

                                        setStep("가입완료");

                           }}/>

           )}

         {step === "가입완료" && <가입완료 />}

      </main>

);

 

---

👩🏻‍🔧 개선 방향 2: 다른 퍼널에서도 이 코드를 재사용하고 싶다  ➡️ 라이브러리로 추상화하기

 

const [registerData, updateRegisterData] = useState();

const [step, setStep] = useState<
| "통신유형"
| "요금제"
| "요금확인"
| "혜택"
| "개인정보"
| "혜택수신여부"
| "가입완료"
>("통신유형"); // step 관련 로직

return (
     <main>
         // step 관련 로직들
         {step === "통신유형" && <통신유형 onNext={(data) => setStep("요금제")} />}
         {step === "요금제" && <요금제 onNext={(data) => setStep("요금확인")} />}
         {step === "요금확인" && <요금확인 onNext={(data) => setStep("혜택")} />}
         {step === "혜택" && <혜택 onNext={(data) => setStep("개인정보")} />}
         {step === "개인정보" && <개인정보 onNext={() => setStep("혜택수신여부")} />}
         {step === "혜택수신여부" && (         
                  <혜택수신여부
                           onNext={async () => {
                                        await fetch("/api/register", { data });
                                        setStep("가입완료");
                           }}/>
           )}
         {step === "가입완료" && <가입완료 />}
      </main>
);

 

위에서 작성했던 코드에서 step의 조건에 따라서 렌더링을 한다는 공통 로직을 추상화해 보면 다음과 같이 구현할 수 있다.

// 사용
<Step if={step === "통신유형"}>
	<통신유형 onNext={() => setStep("요금제")}/>
</Step>

// 구현
function Step({ if, children }){
    if(if === true){
        return children
    }
	return null
}

 

그럼 전체 코드는 아래와 같이 개선할 수 있다. 

const [registerData, updateRegisterData] = useState();

const [step, setStep] = useState<
  | "통신유형"
  | "요금제"
  | "요금확인"
  | "혜택"
  | "개인정보"
  | "혜택수신여부"
  | "가입완료"
>("통신유형");

return (
  <main>
  	<Step if={step === "통신유형"}>
    	<통신유형 onNext={(data) => setStep("요금제")} />
    </Step>
    <Step if={step === "요금제"}>
    	<요금제 onNext={(data) => setStep("요금확인")} />
    </Step>
    <Step if={step === "요금확인"}>
    	<요금확인 onNext={(data) => setStep("혜택")} />
    </Step>
    <Step if={step === "혜택"}>
    	<혜택 onNext={(data) => setStep("개인정보")} />
    </Step>
    <Step if={step === "개인정보"}>
    	<개인정보 onNext={() => setStep("혜택수신여부")} />
    </Step>
    <Step if={step === "혜택수신여부"}>
    	<혜택수신여부
        onNext={async () => {
          await fetch("/api/register", { data });
          setStep("가입완료");
        }}
      	/>
    </Step>
	<Step if={step === "가입완료"}>
    	<가입완료 />
    </Step>
  </main>
);

 

공통으로 나타나는 if = {step === ""} 조건문은 제거하고 step의 이름에 따라 하위 컴포넌트에서 로직을 처리하도록 name만 남겨두고,

<Step name="통신유형">
	<통신유형 onNext={() => setStep("요금제")}/>
</Step>

 

step의 상태를 담은 커스텀 훅을 만들어 준다.

 

// 커스텀 훅
function useFunnel(){
    const [step, setStep] = useState(); // step 상태를 내부로 옮김 
  
    const Step = (props) => {
    	return <>{props.children}</>
    }
    
    const Funnel = ({children}) => {
    	// name과 현재 step이 동일한 Step만 렌더링
    	const targetStep = children.find(childStep => childStep.props.name === step);
        return Object.assign(targetStep, {Step});
    }
    return [Funnel, setStep];
}

// 사용
const [Funnel, setStep] = useFunnel<"통신유형"
  | "요금제"
  | "요금확인"
  | "혜택"
  | "개인정보"
  | "혜택수신여부"
  | "가입완료"
>("통신유형");

return (
	<Funnel>
    	<Funnel.Step name="요금제">
        	<요금제 onNext={() => setStep("요금확인")}/>
        </Funnel.Step>
        <Funnel.Step name="요금확인">
        	<요금확인 onNext={() => setStep("혜택")}/>
        </Funnel.Step>
        // ...
    </Funnel>

)

 

useFunnel 라이브러리에 대해서는 https://www.slash.page/ko/libraries/react/use-funnel/README.i18n Slash 라이브러리 문서에 대해서 더 자세히 살펴볼 수 있다.

 

---

👩🏻‍🔧 개선 방향 3: 다른 퍼널에서도 이 코드를 재사용하고 싶다  ➡️ 시각화

 

관련 있는 코드를 한 곳으로 모아 응집도를 높이고, 반복된 코드를 추상화해서 재사용성을 높이는 방식으로 코드를 개선해 봤다.

마지막으로 살펴볼 것은 시각화를 통해 개발자의 경험(DX)을 개선해 보는 것이다.

 

페이지간에 옮겨 다니면서 흐름을 파악하지 않아도 되는 방향으로 코드를 개선했지만, 보자마자 곧바로 페이지 흐름을 파악하기는 어렵다. 결국 전체 흐름을 알고 싶다면 setStep을 추적해 가면서 봐야 한다는 점이 아직도 남아있기 때문이다.

 

아래와 같은 조건에 따라 분기가 또 발생하게 되면 추적하는데 더 눈을 크게 뜨고 봐야한다 👀 (피로누적은 덤)

<Funnel>
    <Funnel.Step name="요금제">
        <요금제 onNext={() => {
        if(clicked==='5G'){
            setStep("5G요금확인");
        }else {
            setStep("일반요금확인");
        }
        }}/>
    </Funnel.Step>
    <Funnel.Step name="일반요금확인">
        <일반요금확인 on={() => setStep("5G혜택")}/>
    </Funnel.Step>
    <Funnel.Step name="5G요금확인">
        <5G요금확인 on={() => setStep("일반혜택")}/>
    </Funnel.Step>
    // ...
</Funnel>

 

이전 SKT USIM 온라인 개통페이지 예시에 살펴봤듯이 URL 쿼리 파라미터도 같이 변경해줘야 하니 디버깅이 까다로워진다.

토스에서는 개발자들이 퍼널 흐름을 시각화하는 개발자 도구인 Funnel Debugger를 만들었다.

 

funnel debugger 사용 예시

 

useFunnel 라이브러리에서 개발자 도구 옵션을 넘기면 화면 우측 하단에 동그란 버튼이 있다.

이 버튼을 클릭하면 useFunnel을 시각화한 다이어그램을 볼 수 있다.

 

Funnel Debugger를 활용하면 개발/ 디버깅 속도를 높일 수 있고,

퍼널을 의도한 흐름대로 구현했는지 업데이트가 즉각적으로 반영돼서 체크가 편리하다.

또한 개발자와 비개발자 모두에게 직관적으로 페이지 흐름을 공유할 수 있다.

---

그럼 Funnel Debugger는 어떻게 만들어졌을까?

다이어그램 라이브러리 :  Mermaid 🧜‍♀️

 

mermaid라이브러리는 다이어그램을 만들어주는 라이브러리다.

mermaid의 문법으로 작성해 준 코드를 mermaid.render(id, text)를 통해 렌더 하면 아래와 같은 그래프로 만들어줄 수 있다.

첫번째에서 onBlur를 하면 세번째로, onClick을 하면 두번째로, 두번째에서 클릭하면 세번째로 가는 흐름을 한눈에 볼 수 있다

 

위에서 살펴봤었던 SKT USIM 온라인 신규가입의 예시를 mermaid 문법으로 바꾸고

 

  graph TD

       가입방식[가입방식] -->|on신규가입클릭| 통신유형[통신유형]

       통신유형[통신유형] -->|5G또는LTE선택| 5G또는LTE[5G또는LTE] -->|on다음 클릭| 요금제[요금제]

       요금제[요금제] -->|FLO앤데이터무료 또는 Wavve앤데이터프리미엄무료 또는 우주패스all무료 선택| FLO앤데이터무료_또는_Wavve앤데이터프리미엄무료_또는_우주패스all무료[FLO앤데이터무료_또는_Wavve앤데이터프리미엄무료_또는_우주패스all무료] -->|on다음 클릭| 요금확인[요금확인]

       요금확인[요금확인] --> |on다음 클릭| 혜택[혜택]

       혜택[혜택] --> |타다팩원스토어 또는 타다팩UT 또는 타다팩11번가 선택| 타다팩원스토어_또는_타다팩UT_또는_타다팩11번가_선택[타다팩원스토어_또는_타다팩UT_또는_타다팩11번가_선택]

타다팩원스토어_또는_타다팩UT_또는_타다팩11번가_선택[타다팩원스토어_또는_타다팩UT_또는_타다팩11번가_선택]--> |on다음 클릭| 개인정보[개인정보]

       개인정보[개인정보] --> |on본인인증 완료| 가입완료[가입완료]

 

 

mermaid로 플로우 그려보자면 다음과 같다.

mermaid로 그린 페이지 플로우

모아서 보면 다음과 같다.

한눈에 볼 수 있는 퍼널 플로우

 

즉, 각 단계를 가입방식[가입방식] -->|on신규가입클릭| 통신유형[통신유형] 형태로 파싱 해주면 되고, 다음과 같이 구현할 수 있다.

  function getGraph(step: string, children: ReactElement[]) {
    const result: string[] = ['graph TD'];
    children.map(stepElement => {
      const stepName = stepElement.props.name;
      const children = stepElement.props.children;
      const childrenProps = children?.props as [string, unknown];
      Object.entries(childrenProps).map(el => {
        const [functionName, value] = el;
        if (typeof value === 'function') {
          value.toString().match(/setStep\(.+\)/g)
            ?.map(matchedSetStep => {
              const matchedStepName = matchedSetStep.match(/setStep\((?:'|")(.+)(?:'|")\)/)?.[1];
              const graphNode =
                `${stepName}[${stepName}] -->|${functionName}| ${matchedStepName}[${matchedStepName}]`;
              result.push(graphNode);
            });
        }
      });
    });
    return result.join('\n');
  }

🤔 마치면서

funnel 패턴으로 하나의 거대한 페이지의 폼 형식을

코드적으로 응집도와 재사용성을 높이고 (use-funnel),  시각화 (Funnel Debugger)하는 방식에 대해 살펴봤다.

 

아쉬운 점은 useFunnel 라이브러리를 사용 (이 글 작성일 기준 2024.07.05)을 해보려고 했지만 어려움(?)이 좀 있었다.

일단 react(next X)에서 useFunnel을 사용해보려고 했는데 일단 next에서만 사용가능한 듯하다.

next에서 사용해보려고 했는데 next/router가 next14부터는 본격적으로 app 라우터를 사용하지만 패키지는 아직 

next12 기준이라서 그런지 버전을 낮춰서 사용해야 에러가 발생하지 않는 듯하다.

이 기회에 나만의 useFunnel을 시간이 나면 조금씩 구현해 보는 것도 재미있을 거 같다.

 

코드를 리팩터링 하는 방법, 코드뿐만 아니라 만드는 사람들의 경험을 개선하는 방법들에 대해 알게 되어서 좋았다. 🍀

---

📚 References

https://www.youtube.com/watch?v=NwLWX2RNVcw

토스 | SLASH 23 = 퍼널 : 쏟아지는 페이지 한 방에 관리하기

https://toss.tech/article/how-platform-designer-make-effectiveness

플랫폼 디자이너가 효율을 만들어내는 법

 

https://www.slash.page/libraries/react/use-funnel/readme.i18n/

https://mermaid.js.org/syntax/examples.html#basic-flowchart

Examples | Mermaid