Case Studies

데우스 위에서 디자이너가 모션을 만들고 프리뷰로 확인한 뒤 웹/iOS/Android 핸드오프 코드까지 이어지도록, 편집 상태·데이터 구조·코드젠·회귀 테스트를 함께 잡은 모션 저작 플러그인 작업이에요.

• 데우스랠리 데이터 저장 구조 고민Rally Editor에서 잘 맞았던 flatTree를 데우스랠리에 적용해보고, 결국 트리 구조로 돌아간 판단 기록이에요.
• 데우스랠리 상태관리 아키텍처타임라인·패널·프리뷰·코드젠이 같은 편집 상태를 바라보게 만든 상태관리 라이브러리 MobX 선택과 store 설계과정을 정리했어요.
• 데우스랠리 코드젠 아키텍처노드별 편집 데이터를 루트 기준 타임라인 DST로 묶어, 웹/iOS/Android 코드젠 입력으로 바꾼 구조를 다룬 글이에요.
• 데우스랠리 코어 로직 테스트 작성직렬화 데이터·타임라인 계산·코드젠 흐름을 지키기 위해 어떤 회귀 테스트부터 묶었는지 정리한 글이에요.

ProgressiveBlur와 EdgeShadow처럼 CSS 기본 기능만으로는 디자인에서 요구한 질감을 맞추기 어려운 시각 표현을, WebGL·shader·masking까지 다뤄 재사용 가능한 TDS 컴포넌트로 만든 작업이에요.

• 이미지 기반 Shadow와 마스킹box-shadow로 표현하기 어려운 이미지 shadow를 중앙 mask와 edge/corner mask로 나눠 컴포넌트화한 구현 기록이에요.
• Box-Blur 부터 Gaussian을 거쳐 KawaseBlur 까지Figma에 가까운 ProgressiveBlur 질감을 찾기 위해 Box Blur, Gaussian Blur, Dual Kawase Blur를 비교한 선택 기록이에요.
• KawaseBlur 구현 상세Dual Kawase Blur를 texture·framebuffer·composite shader 파이프라인으로 옮긴 구현 정리예요.
• ProgressiveBlur에 대한 고찰ProgressiveBlur를 픽셀 위치마다 blur 값이 달라지는 효과로 정의하고, WebGL canvas 접근을 고른 이유를 다뤄요.

토스쇼핑 결제 CTA 모션이 실제 전환 흐름에서 끊기지 않도록, 구현 방식을 다시 잡고 저사양 기기 성능과 WebKit 레이어 문제를 함께 안정화한 작업이에요.

• 구현 방식 전환과 성능 개선저사양 기기에서 결제 CTA 전환이 멈추던 문제를 줄이려고, 모션 구조와 startTransition 적용 범위를 다시 잡은 성능 개선 기록이에요.
• WebKit Compositor z-index 불일치 대응Safari/WKWebView에서 어긋난 레이어 순서를 z-index 값이 아니라 WebKit layer promotion 관점에서 풀어낸 브라우저 이슈 대응이에요.

여러 토스 서비스가 함께 쓰는 interaction 패키지를 최신 React/RSC 환경에 맞게 정리하고, Vite 기반 빌드 전환과 Emotion 제거로 패키지 사용처의 styling 의존성을 단순화한 작업이에요.

• Emotion 의존성 제거와 inline style 전환Emotion peer dependency를 걷어내고 inline style로 전환한, 공용 패키지의 styling runtime 의존성 정리 기록이에요.

인터랙션 디자이너가 수기로 작성하던 개발 가이드 흐름을 GUI 타임라인 편집과 pseudo code 핸드오프로 바꾸고, 여러 타임라인과 Rally motion을 하나의 편집 상태로 다루는 구조를 잡은 작업이에요.

• 랠리에디터 flatTree 상태 모델여러 타임라인과 Rally motion을 하나의 편집 상태로 다루기 위해 Zustand id map과 parent/children 관계를 설계한 기록이에요.