본문으로 이동
토스ㅣSLASH 23 - Server-driven UI로 토스의 마지막 어드민 만들기
컨퍼런스

토스ㅣSLASH 23 - Server-driven UI로 토스의 마지막 어드민 만들기

SLASH 토스 · YouTube

원문 보기

AI 핵심 요약

토스는 어드민이 여러 조직에 흩어져 사용성이 제각각이고, 금융 정보 보호 규정을 각 팀이 반복 구현해야 하는 문제를 겪었습니다. 이를 해결하기 위해 어드민 플랫폼을 만들고, 서비스 개발자가 UI DSL과 API 메타데이터를 등록하면 React 화면으로 렌더링되는 서버 드리븐 UI를 도입했습니다. 플랫폼이 권한과 보안 정책, 공통 UI·UX를 맡고 각 조직은 필요한 화면을 DSL로 구성하도록 역할을 나눴습니다. 초기 구축에는 비용이 들었지만, 발표에 따르면 신규 기능 개발 기간이 5~10일에서 하루 이틀로 줄었고 플랫폼 기반 화면의 99%를 추가 프론트엔드 개발 없이 구현했습니다.

  • 반복되는 화면 유형과 권한·보안 요구사항을 먼저 파악한 뒤, 공통 플랫폼으로 묶을 범위를 정하세요.
  • UI DSL은 JSON 같은 익숙한 형식으로 시작할 수 있으며, 화면 구성과 데이터 표시 규칙을 명확히 표현해야 합니다.
  • DSL 렌더러는 개별 컴포넌트와 엔진의 핵심 로직을 분리하고, 의존성 주입으로 확장성을 확보할 수 있습니다.
  • 서버 드리븐 UI는 초기 플랫폼 구축 비용이 크므로, 장기적으로 반복될 화면 변경과 개발 비용을 함께 따져 도입해야 합니다.

소개

고객의 소중한 정보를 다루는 ‘어드민 서비스’는 어떻게 만들어져야 할까요? 토스의 혁신적인 개발 문화를 뒷받침해주는 안전하고 편리한 어드민 개발 과정을 소개합니다. 조유성 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3J1HPGs 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #serverdrivenui #어드민 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및...

비슷한 학습 자료

컨퍼런스 SLASH

토스팀의 미친 업무 생산성, 그 비결은 무엇일까요? No-Code Tool로 400개 이상의 사내 프로세스를 하나의 제품으로 대체한 과정을 소개합니다. 문상헌 / Python Developer 박미소 / Python Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #nocodetools #nocode #python 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. ...

개발 도구

컨퍼런스 SLASH

토스의 사용자와 개발자 경험을 모두 개선해준 ‘React Native’, 도입 과정은 어땠을까요? React Native를 도입하는 과정에서 토스가 마주한 기술적인 도전과 그 해결 과정을 소개합니다. 박서진 / 토스 Frontend Chapter Lead 발표 자료 👉🏻 https://bit.ly/3CePOfI 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #reactnative #사용자경험 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에...

모바일 앱 개발

컨퍼런스 SLASH

평균 경력 10년의 TPO와 서버 개발자들은 토스에서 어떤 성취를 이뤘고, 또 어떤 고민을 하고 있을까요? 토스 제품의 기반이 되는 Product Foundation을 만드는 이들의 이야기, SLASH23 특별 세션에서 만나 보세요. 김보람, 임희진/ 토스 Technical Product Owner 김현준, 박재현 / 토스 Server Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #slash *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 ...

컨퍼런스 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

토스의 얼굴, 홈 화면에서의 매끄러운 사용자 경험은 어디에서 비롯되는 것일까요? 다양한 서비스 운영 효율화를 위한 토스 홈팀의 무기, ‘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

매끄럽고 우아한 사용자 경험을 위한 개발자의 경험도 우아할 수 있을까요? 수많은 화면과 쏟아지는 분기를 효과적으로 관리하는 ‘퍼널’ 설계에 대해 소개합니다. 진유림 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3WZip27 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #퍼널 #라이브러리 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....

프론트엔드