본문으로 이동
배민 모션시스템 二.O: ≪春의 호흡≫ 제 1형 Spring 주무르기 #우아콘2025 #우아한형제들
컨퍼런스

배민 모션시스템 二.O: ≪春의 호흡≫ 제 1형 Spring 주무르기 #우아콘2025 #우아한형제들

우아콘 2025 우아한형제들 · YouTube

원문 보기

AI 핵심 요약

리브랜딩에 맞춰 배민 모션 시스템 2.0을 구축하면서, 제스처와 연속적인 상호작용에 기존 이징만으로 대응할 때 생기는 부자연스러움을 해결하고자 물리 기반 스프링을 도입했습니다. 스프링은 질량·강성·감쇠로 움직임을 구성하고 초기 속도와 이전 애니메이션의 속도를 이어받아, 사용자의 입력이나 목표값 변화에 자연스럽게 반응합니다. 발표자는 SwiftUI 스프링을 바탕으로 TypeScript 엔진과 토큰 저작 도구를 만들고, 플랫폼별 규격으로 변환하는 기능을 구현했으며 iOS·Android 적용 과정에서 API 차이와 종료 기준 문제를 확인해 보완했습니다. 스프링을 실제 제품에 적용하려면 디자이너와 개발자가 함께 쓸 수 있는 도구와 디자인 시스템 차원의 공통 토큰이 필요하다는 점을 강조했습니다.

  • 정해진 시나리오대로 재생되는 모션에는 이징을, 제스처나 목표값이 바뀌는 인터랙션에는 초기 속도를 이어받는 스프링을 고려하세요.
  • 스프링의 질량·강성·감쇠는 움직임의 성격을 조절하는 매개 변수이며, 바운시한 효과만을 위한 설정은 아닙니다.
  • 플랫폼마다 스프링 API와 종료 판정 기준이 다를 수 있으므로, 같은 매개 변수 값을 전달하는 것만으로 동일한 움직임을 기대하지 마세요.
  • 디자이너와 개발자가 함께 테스트할 수 있는 저작 도구와 공통 토큰을 마련하면 플랫폼 간 규격 차이를 줄이는 데 도움이 됩니다.

소개

[세션 설명] 배민 모션 시스템 2.0을 구축하며. 물리 기반의 Spring을 채택하고 적용하는 과정에서 그간 활용이 어려웠던 이유는 무엇인지, 또 어떻게 해결할 수 있는지와 같은 구체적인 사례를 소개합니다. 그리고 더 쉽고 유용하게 사용될 수 있는 모션 토큰 시스템을 구현하는 과정을 함께 나누려 합니다. [발표자 소개] 허준(UX 엔지니어)

비슷한 학습 자료

컨퍼런스 우아콘 2025

[세션 설명] 우아한공방은 우아한형제들의 디자인시스템으로, 3년간의 안정화를 거쳐 모든 프로덕트에 잘 녹아들게 되었습니다. 이제는 디자인시스템 개발을 넘어 전 직군의 업무 효율에 도움 될 수 있는 방안을 고민하고 있습니다. 각 프로덕트에서 우아한공방의 적용 현황을 분석해 시각화하고, 우아한공방 MCP를 활용해 UX/DX를 향상한 경험을 공유합니다. [발표자 소개] 권현아(프런트엔드 개발자), 이상철(프런트엔드 개발자)

프론트엔드 AI에이전트 개발 UI/UX

컨퍼런스 우아콘 2025

[세션 설명] 배달의민족에는 고객의 선택을 돕는 수많은 큐레이션들이 있습니다. 여러 화면에 노출하기 위하여 지면별로 개발을 진행하면서 발생했던 문제들과 이를 하나의 통합 플랫폼으로 발전시킨 실제 경험을 공유합니다. 메인홈, 검색결과 등 주요 지면에 성공적으로 적용하여 개발 효율성을 크게 향상시킨 구체적인 사례와 함께, 기술과 조직 문화가 함께 변화한 생생한 이야기를 들려드립니다. [발표자 소개] 강미경(PM), 이화영(안드로이드 개발자)

백엔드

컨퍼런스 우아콘 2024

[WOOWACON2024 세션 다시보기] 👉 세션 설명 ㅤ 방대한 컴포넌트 라이브러리와 빼곡한 원칙들이 존재함에도 불구하고, 우리는 왜 끊임없이 새로운 시스템을 만들어야 할까요? 디자인 시스템을 단순 스타일 가이드를 넘어 진정한 '시스템'으로 작동하게 하려면 어떻게 해야 할까요? 1년 6개월간 “우아한형제들”의 디자인 시스템 여정을 통해 얻은 인사이트를 공유하며, Base Component와 Foundation API를 통해 코드를 효과적으로 연결하고, 이를 통해 디자이너와 엔지니어의 비효율적인 프로세스를 최소화하고, 보다 중요한 고민에 집중할 수 있는 방법들을 소개합니다. ㅤ 👉 발표자 소개ㅤ 허준, UX엔지니어

프론트엔드 UI/UX

컨퍼런스 우아콘 2023

[WOOWACON2023 세션 다시보기] 👉 세션 설명 우아한공방으로 새롭게 단장한 디자인 시스템의 계층 구조와 이를 컴포넌트로 빚어낸 과정을 소개합니다. 그리고 컴포넌트 구현에 집중하기 위해 어떤 개발 환경을 갖췄는지, 운영 과정에서 정답이 없는 문제들을 어떻게 다뤄왔는지 공유드릴게요. 앞으로 더 확장해 나갈 디자인 시스템의 미래도 엿볼 수 있어요. ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 마광휘 배민커머스웹프론트개발팀에서 23명의 엔지니어가 조화롭게 좋은 프로덕트를 만들 수 있도록 팀 문화 고민과 시스템 아키텍처링을 진행하고 있는 챙김이 입니다. 최근에는 배민 전사의 웹 프론트 미래를 그리고 있어요. 배민커머스웹프론트개발팀 이상현 지속 가능한 디자인 시스템을 만들어나가는 프론트엔드 개발자입니다. 👍 추천 대상 - 사내 디자인 시스템을 운영하는 개발자 - 확장 가능하고 유연한 React UI 컴포넌트 구현에 관심 있는 분 🙋🏻‍♀️ 세션에 대해 궁금한 점이 ...

프론트엔드 UI/UX

컨퍼런스 우아콘 2022

배달의민족 Android 프로젝트에 디자인시스템(aka 배시시, 배민시각시스템)을 도입한 경험과, 디자인시스템을 만들기 위해 Jetpack Compose를 사용해 보고 느낀 점을 공유합니다. [발표자 소개] 강경완 | 배민푸드Android개발팀 배달의민족 Android 앱을 개발합니다. 모든 사람이 편하게 사용할 수 있는 앱을 만들기 위해 노력합니다. 사람들과 만나 소통하는 걸 좋아하며, 개발자 커뮤니티를 운영하고 있습니다.

모바일 앱 개발 UI/UX

컨퍼런스 SpringCamp 2025

🎙️ 김수원 (Sionic AI) 🗓️ 스프링캠프 2025 Track 1 - 1 (2025년 06월 28일) 🧭 스페이스쉐어 삼성 📂 발표자료 : https://github.com/springcamp/presentations/tree/main/SpringCamp-2025-Presentations [🔗 스프링캠프 & KSUG] 스프링캠프 2025 웹 https://springcamp.ksug.org/2025/ 스프링캠프 페이스북 https://www.facebook.com/springcampkr/ 스프링캠프 유튜브 https://www.youtube.com/@springcampkr KSUG 웹 https://www.ksug.org/ KSUG 구글 그룹 https://groups.google.com/g/ksug KSUG 페이스북 https://www.facebook.com/groups/springkorea KSUG 유튜브 https://www.youtube.c...

백엔드 딥러닝 · 머신러닝