카카오페이 iOS 웹뷰 소개 및 리팩토링 이야기 / if(kakao)2022
if kakao 카카오 · YouTube
AI 핵심 요약
카카오페이는 풀스크린·바텀시트 등 다양한 웹뷰를 운영하면서, 기존 앱 스킴과 스크립트 콜백 방식이 데이터 전달 한계와 동시 호출 디버깅 문제를 일으키는 것을 확인했습니다. 이를 개선하기 위해 복잡한 양방향 통신은 고유 ID를 사용하는 JSAPI로 전환하고, 화면 형태와 상태 표시줄 같은 네이티브 UI 설정은 configuration으로 전달했습니다. 카카오톡 앱과 카카오페이 앱에 나뉘어 있던 공통 코드는 Pay Service 공유 프레임워크로 통합하고, 앱별 정보와 동작은 바인더 프로토콜로 연결했으며 비동기 처리는 Swift의 async/await로 바꿨습니다. 코드 라인이 약 40% 줄고 유지보수성이 좋아졌지만, JSAPI 호출은 런타임 셀렉터 방식의 크래시 위험을 고려해 기존 switch 문을 유지하는 등 안전성을 우선했습니다.
- 앱 스킴은 URL 인코딩·길이 제한과 동시 호출 응답 식별에 취약하므로, 복잡한 양방향 통신에는 고유 ID를 포함한 JSAPI를 고려하세요.
- 웹뷰의 표시 방식과 네이티브 UI 설정을 파라미터로 분리하면 풀스크린·바텀시트 등 여러 형태를 일관되게 다룰 수 있습니다.
- 여러 앱이 공유하는 코드는 공통 프레임워크로 옮기고, 앱별 차이는 바인더 프로토콜로 주입하면 중복과 의존성을 줄일 수 있습니다.
- 문자열과 셀렉터를 이용한 런타임 함수 호출은 파라미터 불일치 시 크래시 위험이 있으므로, 간결함보다 검증된 안전성을 우선할 수 있습니다.
소개
카카오페이는 네이티브와 웹뷰를 적절히 사용하여 높은 수준의 사용자 경험을 주고자 노력하고 있습니다. 네이티브와 웹뷰의 데이터 전달부터 풀스크린 웹뷰, 바텀시트형 웹뷰, 네비게이션 영역 핸들링이 가능한 웹뷰 등 다양한 방식의 웹뷰를 사용하고 있습니다. 본 세션에서는 다양한 시도를 통해 현재 사용중인 웹뷰로 발전하게 된 과정을 소개합니다. 여러 타입의 웹뷰를 핸들링하는 방법과 리팩토링 스토리를 포함하여 페이 서비스의 특성상 카카오페이앱 및 카카오톡앱 2개의 앱을 개발 해야하는 환경에서 어떻게 코드를 관리하는지에 대해 알아봅니다. #iOS #WebView #리팩토링 #WKWebView 카카오페이 사용자에게 더 나은 경험을 주고싶은 iOS 개발자 joey입니다. 카카오톡 내의 카카오페이 서비스와 카카오페이 앱을 개발하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-89 if(kakao)2022에 대한 자세한 정보는 👉 h...
비슷한 학습 자료
컨퍼런스 if kakao
카카오페이 워크플랫폼 개발자로 일한다는 것 / if(kakao)2022
컨퍼런스 if kakao
카카오페이 워크플랫폼팀은 카카오페이 직원인 크루들이 사용하는 업무 시스템을 만드는 팀입니다. 카카오페이 밖이 아닌 안에 있는, 카카오페이 크루가 사용자인 업무 시스템을 만들기 위해 어떤 부분에 중점을 두고 만들어가는지 소개해 드리고자 합니다. #Backend #Frontend #업무시스템 #생산성 카카오페이 워크플랫폼팀에서 업무 지원 시스템을 개발하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-101 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com iif(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
프론트엔드 백엔드
컨퍼런스 if kakao
카카오페이 서버 개발자로 일한다는 것 / if(kakao)2022
컨퍼런스 if kakao
카카오페이 서버 개발자들이 참여하는 프로젝트와 사용하는 기술, 협업 방식과 기술 문화에 대해 이야기합니다. #Backend #기술문화 #서비스개발 카카오페이 오프라인결제서비스에서 서버 개발을 하고 있는 Happy입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-102 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
백엔드 애자일 · 협업
컨퍼런스 if kakao
카카오페이에서 만보기 서비스를 개발하면서 겪었던 이야기들을 소개해 드리려고 합니다. 본 세션에서는 만보기 서비스의 소개와 함께 주니어 개발자가 만보기 서비스를 개발하기 위해 어떤 과정을 거쳤는지를 공유하고자 합니다 #iOS #CoreMotion 항상 성장을 하고픈 iOS 개발자 cado입니다 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-90 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
모바일 앱 개발
컨퍼런스 if kakao
카카오페이의 프론트엔드 서비스가 제공되는 환경에 대해 이야기 하고, 프론트엔드 서비스가 제공되는 환경의 관점에서 개발자 경험과 사용자 경험을 개선하기 위한 카카오페이 프론트엔드 팀의 작업을 사례를 통해 이야기합니다. #UX 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-83 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
웹 개발 프론트엔드
컨퍼런스 if kakao
카카오페이 앱 리빌딩 스토리 / if(kakao)2022
컨퍼런스 if kakao
카카오페이앱을 리빌딩하면서 겪은 과정들을 소개해 드리려고 합니다. #Android 카카오페이 안드로이드 주식 서비스 업무를 맡고 있는 스카일러입니다. 카카오페이 안드로이드 계정 서비스 업무를 맡고 있는 에디입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-91 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
모바일 앱 개발
컨퍼런스 if kakao
Preview Mobile @if(kakao)2022
컨퍼런스 if kakao
if(kakao)2022 컨퍼런스에서 Mobile 관련 기술 발표 트랙을 소개합니다. 03:00 1. 다리는 걸을 뿐.. 만보기 서비스 개발기: 만보기 서비스를 개발하면서 겪은 이야기 by 이현재(cado.avo) 항상 성장을 하고픈 iOS 개발자 cado입니다 03:30 2. 카카오페이 iOS 웹뷰 소개 및 리팩토링 이야기 by 윤한울(joey.con) 카카오페이 사용자에게 더 나은 경험을 주고싶은 iOS 개발자 joey입니다. 카카오톡 내의 카카오페이 서비스와 카카오페이 앱을 개발하고 있습니다. 04:13 3. SwiftLayout을 소개합니다.: 선언형 문법으로 가독성 높은 UIKit 코드 작성하기 by 이희종(jay.choi), 최광훈(aiden.h) 저는 카카오톡을 개발하고 있는 iOS 개발자 aiden 입니다 저는 카카오톡을 개발하고 있는 iOS 개발자 jay 입니다 04:40 4. 카카오뱅크 iOS 프로젝트의 모듈화 여정: Tuist를 활용한 모듈 아키텍처 설계...
모바일 앱 개발