오늘의 블로그 읽기

주제: 퍼널 관리

링크.

• https://velog.io/@tosspayments/엔지니어링-노트-1-웹에서-복잡한-퍼널-쉽게-관리하기

토스 제품 디자인 원칙으로 인해 히스토리 관리가 필수적. 이를 퍼널 단위로 해결하기 위한 방법을 제시한 글.

• https://jnj1.tistory.com/87

퍼널을 이탈한 경우 useEffect보다 이벤트 핸들러를 사용하는 이유.

• https://github.com/toss/slash/blob/main/packages/react/use-funnel/src/useFunnel.tsx

useFunnel에 대한 코드

요약

토스 제품 디자인 원칙

- One thing for One Page : 화면 하나에는 명확한 목표 하나만 있어야 한다.

-> 깊은 퍼널 단계 == 히스토리 관리가 필수적

퍼널의 6단계에서 뒤로가기를 하든, 2, 3 단계에서 뒤로가기를 하든 1단계에서 뒤로가기를 한 결과와 같아야 한다.

Q. 코드의 주석에 다음과 같이 써있는 이유가 뭘까?

> 훅을 호출하는 곳마다 flow를 새로 만들지 않고 flow를 유지하려 싱글턴으로 관리합니다.

이전 퍼널이 어디였는지 알 수 있다?

+퍼널 내부에서 또 다른 퍼널을 시작한다면, 어떻게 될까?

Q. 폼에 submit 이벤트가 발생할 때마다 퍼널에 대한 분기 처리가 된다. 그래서 해당 글에서도 깜빡임 현상의 문제점이 나오는데, 이를 어떻게 해결하면 좋을까?

결론 || 느낀점

이번 프로젝트를 진행할 때 히스토리 관리를 해야하는 부분이 있었는데, 퍼널에 대한 정의가 되지 않아서 관리가 힘들었던 경험이 있습니다. 이를 해결하기 위해 블로그 글들을 찾아보았는데, 해당 기능을 직접적으로 사용해보지도, 프로젝트를 할 때 고민했던 부분도 아니었기에 여러 질문들만 남았습니다. 프로젝트 기획을 재정비하고 있는 지금 다이어그램을 그리면서 고민해봐야겠습니다.