토스ㅣSLASH 23 - Server-driven UI로 다이나믹한 서비스 효율화하기
SLASH 토스 · YouTube
AI 핵심 요약
토스 홈팀은 데이터 기반 UI에서 기능을 바꿀 때마다 앱 업데이트를 기다려야 하고, 여러 서버의 데이터를 클라이언트가 취합해 디버깅하기 어렵다는 문제를 겪었다. 이를 개선하기 위해 서버가 UI 구성과 동작을 JSON 명세로 전달하고 클라이언트가 렌더링하는 Server-driven UI인 홈 DST를 만들었다. UI 요소와 링크 등의 핸들러를 정의하고 클릭·노출 로그도 명세에 포함해, 간단한 화면은 앱 업데이트 없이 서버 배포로 변경하고 이벤트 계측을 관리할 수 있게 했다. 다만 새 UI에는 여전히 앱 업데이트가 필요할 수 있고 서버 개발 부담도 커지므로, 모든 화면에 적용하기보다 네이티브·웹과 함께 선택적으로 활용하는 방향을 택했다.
- 서버가 UI 구성과 데이터를 해석해 명세로 전달하고, 클라이언트는 이를 렌더링하는 구조로 역할을 나눌 수 있다.
- UI 요소와 동작을 이름 붙여 정의하고 조합하면 화면 구성과 링크·알림·새로고침 같은 상호작용을 일관되게 다룰 수 있다.
- 클릭 이벤트뿐 아니라 노출 로그도 명세에 포함하면 분석에 필요한 계측을 빠뜨릴 가능성을 줄일 수 있다.
- 모든 화면을 서버 주도로 전환하기보다 화면 특성과 서버 개발 리소스를 고려해 적용 범위를 정해야 한다.
소개
토스의 얼굴, 홈 화면에서의 매끄러운 사용자 경험은 어디에서 비롯되는 것일까요? 다양한 서비스 운영 효율화를 위한 토스 홈팀의 무기, ‘Server Driven UI’를 소개합니다. 윤중현 / 토스 Server Developer 발표 자료 👉🏻 https://bit.ly/3CglOzR 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #serverdrivenui #homedst #serverdeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가...
비슷한 학습 자료
컨퍼런스 SLASH
업무를 더 효율적으로, 최대의 성과를 낼 수 있는 법은 무엇일까요? 클러스터 운영부터 서비스 라이프사이클 관리까지, 데브옵스 업무 효율화 사례를 소개합니다. 양석준 / DevOps Engineer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #devops #cluster 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인정보는 고객에게 동의를 받은 후에 처리...
데브옵스 · 인프라
컨퍼런스 SLASH
토스ㅣSLASH 23 - 누구나 쓸 수 있는 접근성 높은 토스 만들기
컨퍼런스 SLASH
디지털화로 더 편리해진 금융, 과연 모두에게 편리해졌을까요? 모두가 평등하게, 쉽고 편리한 금융 경험을 할 수 있도록 ‘접근성’을 높인 토스의 노력을 소개합니다. 최동근 / 토스 Andriod Developer 발표 자료 👉🏻 https://bit.ly/42xGdvd 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #디자인시스템 #접근성 #androiddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩...
모바일 앱 개발 UI/UX
컨퍼런스 SLASH
토스ㅣSLASH 23 - 프로파일러로 시스템 성능 향상시키기
컨퍼런스 SLASH
서비스 운영 과정 속 여러 장애들, 어떻게 그 원인을 빠르고 정확하게 파악할 수 있을까요? 상황에 맞는 다양한 ‘프로파일러’로 문제 원인을 파악하고 또 해결한 과정을 소개합니다. 조유성 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/42ypWpE 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #profiler #서비스성능 #serverdeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작...
백엔드 데브옵스 · 인프라 로드맵 2개에 담김
컨퍼런스 SLASH
토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기
컨퍼런스 SLASH
매끄럽고 우아한 사용자 경험을 위한 개발자의 경험도 우아할 수 있을까요? 수많은 화면과 쏟아지는 분기를 효과적으로 관리하는 ‘퍼널’ 설계에 대해 소개합니다. 진유림 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3WZip27 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #퍼널 #라이브러리 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....
프론트엔드
컨퍼런스 SLASH
고객의 소중한 정보를 다루는 ‘어드민 서비스’는 어떻게 만들어져야 할까요? 토스의 혁신적인 개발 문화를 뒷받침해주는 안전하고 편리한 어드민 개발 과정을 소개합니다. 조유성 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3J1HPGs 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #serverdrivenui #어드민 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및...
프론트엔드 UI/UX
컨퍼런스 SLASH
토스ㅣSLASH 21 - 토스 서비스를 구성하는 서버 기술
컨퍼런스 SLASH
Active-Active 데이터센터 운영, Kubernetes와 Istio Service Mesh 운영, API-Gateway, Kafka, Redis, Monitoring Stack 등 토스에서 사용하는 전반적인 기술과 시스템 구성을 공유합니다. 이항령 / 토스 Server Platform Team Leader 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
백엔드 데이터베이스 데브옵스 · 인프라