복잡한 흐름 앞에서, 우리가 선택한 건 Funnel / 이었다
if kakao 카카오 · YouTube
AI 핵심 요약
카카오톡 채널과 매장 관리 서비스의 생성·심사 절차가 통합되면서 사용자 유형에 따라 갈라지는 복잡한 웹뷰 동선을 기획자와 개발자가 함께 이해하고 관리해야 했다. 팀은 화면을 스텝, 목적이 같은 스텝의 묶음을 퍼널, 퍼널의 연결을 플로우로 모델링하고, 이를 코드에 반영하는 React 훅 useFlow를 직접 만들었다. 쿼리스트링에 플로우와 스텝 정보를 기록해 새로고침·뒤로 가기를 지원하고, TypeScript 타입과 런타임 검증으로 상태와 이동 경로를 보호했으며 중첩 플로우의 오래된 하위 상태도 정리했다. 퍼널 단위로 이탈 지점을 분석해 개선 대상을 찾을 수 있었고, 동선을 공통 언어로 삼아 협업과 데이터 기반 의사결정을 돕는 한편 기술 설계는 제품 목표와 연결해야 한다는 교훈을 얻었다.
- URL 라우팅과 상태 기반 이동의 장단점을 비교하고, 쿼리스트링에 플로우 ID와 현재 스텝을 담아 브라우저 히스토리와 화면 상태를 연결한다.
- 스텝별 입력 상태를 정의한 뒤 TypeScript 유틸리티 타입으로 이전 단계의 필수 값을 누적하면 중복 타입 선언을 줄일 수 있다.
- 이동 가능한 다음 스텝을 타입으로 제한하고, 런타임 URL은 별도 검증해 잘못된 경로를 이중으로 방어한다.
- 중첩 플로우를 전환할 때는 새 플로우에 불필요한 하위 스텝 정보를 정리하고, 뒤로 가기 제어와 데이터 초기화 정책도 함께 설계한다.
소개
if(kakao)25 복잡한 동선을 가진 웹뷰 서비스에서, 기획자와 개발자가 동일한 흐름을 바라볼 수 있도록 퍼널 중심의 구조화를 설계하고 useFlow로 구현한 경험을 소개합니다. #TECH #Frontend 카카오 비즈니스에서 FE를 담당있는 차재명(max.cha)입니다. 반복되는 불편을 줄이고, 개발자 경험과 팀이 몰입할 수 있는 환경을 만드는 데 관심이 많습니다. 발표자료 보기 📍https://if.kakao.com/2025/session?sessionId=39 if(kakao)25 홈페이지 : https://if.kakao.com/2025 #카카오 #kakao #이프카카오25
비슷한 학습 자료
컨퍼런스 if kakao
사용자 발화에서 응답까지: 그래프 기반 에이전트로 동작하는 AI 서비스
컨퍼런스 if kakao
if(kakao)25 사용자 발화에서 응답까지의 과정을 그래프 기반 에이전트 구조로 풀어낸 카카오의 AI 서비스 구현 방식을 공유합니다. #TECH #PRODUCT #LLM #Agent 카카오에서 LLM을 활용해 여러 도메인의 AI서비스를 개발하고 있는 홍보미(chloe.bm)입니다. AI 서비스의 홍수 속에서 빠지지 않도록 열심히 헤엄치고 있습니다. 카카오에서 LLM을 활용해 여러 도메인의 AI서비스를 개발하고 있는 길민호(ethan.mino)입니다. 스트리밍과 안정적인 LLM 서빙에 관심이 있습니다. 발표자료 보기 📍https://if.kakao.com/2025/session?sessionId=34 📍if.kakao.com if(kakao)25 홈페이지 : https://if.kakao.com/2025 #카카오 #kakao #이프카카오25
AI에이전트 개발
컨퍼런스 if kakao
소통과 연결, 그 가치를 넓히는 디자인
컨퍼런스 if kakao
코드로 해두면 편해요! 실수를 줄이는 개발 환경과 절차
컨퍼런스 if kakao
if(kakao)25 다양한 개발 환경과 절차에 대해 일일이 설명하거나 복잡한 문서를 작성하는 대신, 코드의 형태로 선언하고 관리할 수 있습니다. 이로써 업무를 효율화하고 보다 안정감 있게 신규 서비스를 만든 경험을 나누고자 합니다. #TECH #PRODUCT #General 카카오에서 숏폼 스튜디오를 만들고 있는 김우섭(wes.kim)입니다. 요즘은 Nix와 같은 선언형 관리에 관심이 많습니다. 발표자료 보기 📍 https://if.kakao.com/2025/session?sessionId=13 📍 if.kakao.com if(kakao)25 홈페이지 : https://if.kakao.com/2025 #카카오 #kakao #이프카카오25
데브옵스 · 인프라
컨퍼런스 if kakao
웹 카카오톡의 상태 관리: 바닐라 상태 관리 모듈과 리액트의 조화 / if(kakaoAI)2024
컨퍼런스 if kakao
웹카카오톡은 복잡한 비즈니스 로직은 vanilla JS 로, 화면을 구성하는 영역은 React 로 분리하여 개발하고 있습니다. 프론트엔드 프로젝트의 비즈니스 영역을 vanilla JS 로 개발하게 된 이유와 개발을 진행하면서 마주했던 경험 및 장단점에 대해 공유합니다. #front-end #vanillajs 카카오에서 프론트엔드 개발을 하고 있는 Felix입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-38 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
웹 개발 프론트엔드
컨퍼런스 if kakao
카카오페이 iOS 웹뷰 소개 및 리팩토링 이야기 / if(kakao)2022
컨퍼런스 if kakao
카카오페이는 네이티브와 웹뷰를 적절히 사용하여 높은 수준의 사용자 경험을 주고자 노력하고 있습니다. 네이티브와 웹뷰의 데이터 전달부터 풀스크린 웹뷰, 바텀시트형 웹뷰, 네비게이션 영역 핸들링이 가능한 웹뷰 등 다양한 방식의 웹뷰를 사용하고 있습니다. 본 세션에서는 다양한 시도를 통해 현재 사용중인 웹뷰로 발전하게 된 과정을 소개합니다. 여러 타입의 웹뷰를 핸들링하는 방법과 리팩토링 스토리를 포함하여 페이 서비스의 특성상 카카오페이앱 및 카카오톡앱 2개의 앱을 개발 해야하는 환경에서 어떻게 코드를 관리하는지에 대해 알아봅니다. #iOS #WebView #리팩토링 #WKWebView 카카오페이 사용자에게 더 나은 경험을 주고싶은 iOS 개발자 joey입니다. 카카오톡 내의 카카오페이 서비스와 카카오페이 앱을 개발하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-89 if(kakao)2022에 대한 자세한 정보는 👉 h...
웹 개발 모바일 앱 개발
컨퍼런스 if kakao
Preview Web+Mobile @if(kakao)2021
컨퍼런스 if kakao
if (kakao) 2021 컨퍼런스에서 Data 관련 기술 발표 세션을 소개합니다. 1. 이게 진짜 일 리 없어 : 초보 리더가 프로젝트에서 마주치는 어려운 상황들 @effie.seo 올해 6월에 카카오맵 매장관리 서비스를 오픈했습니다. 매장관리 프로젝트 진행 과정을 통해서 카카오맵 FrontEnd 개발자들은 어떻게 협업하는지, 프로젝트에서 마주쳤던 상황들을 대처 하기 위해서 초보 리더인 제가 동료들과 함께 고민하고 시도했던 과정에 대해서 공유해보고자 합니다 2. Next.js와 Typescript를 이용한 프론트엔드 개발기 @jaden.js @luffy.yeon Next.js를 사용한 서버사이드 랜더링, Next.js 환경 Typescript 포팅을 하며 겪은 경험 공유 3. 톡패스워드 크롬 익스텐션 개발기 @felix.lee 입사 후 처음으로 혼자 프로젝트를 설계하면서 고민했던 구조선택과 고민거리에 대한 공유 4. UI 테스트 경험기 @jay.choi 리팩토링에 대한...
프론트엔드 소프트웨어 테스트 애자일 · 협업