프론트엔드·
토스 SLASH·
토스 SLASH·토스는 어떻게 광고 속에 게임을 넣었을까
토스가 광고 시스템을 자체 구축하면서 서드파티 SDK 대신 국제 광고 표준 MRAID를 직접 구현해 플레이어블 광고(앱 설치 전 게임 체험)를 지원한 과정이다. mraid.js 브릿지, 5중 렌더링 완료 신호, 보안 중심 설계, 앱 심사 없는 즉시 배포를 동시에 달성했다.
요약 이어보기#javascript#webview#sdk+2
프론트엔드·
헤이딜러 (PRND)·
헤이딜러 (PRND)·스켈레톤 로딩, 언제 사용해야 할까? — 헤이딜러 UX 스터디
문제스켈레톤 로딩을 어디에 적용해야 좋은지 기준이 없었고, 화면마다 새 스켈레톤 UI를 만드는 비용이 누적돼 도입 효율이 떨어졌다.
접근드로이드나이츠 2023에서 발표한 UX 스터디로 중요도가 높고 레이아웃 변경이 잦지 않은 화면, 로딩이 짧게 느껴져야 하는 신규 화면을 사용 대상으로 정의하고, 텍스트·이미지 영역을 실제 콘텐츠와 비슷한 비율로 그리는 가이드를 세웠다.
결과명확한 기준이 생기면서 모든 화면에 스켈레톤을 다는 식의 낭비가 줄고, 실제 필요한 화면에만 적용해 제작 리소스를 효율적으로 쓸 수 있게 됐다.
읽음 (0)
이 글과 비슷한
- 프론트엔드·
채널톡·RxJS로 우아하게 사이드 이펙트 통제하기
채널톡 고객용 SDK에서 boot→shutdown→boot 연속 호출 시 사이드 이펙트가 중첩되는 타이밍 버그를 RxJS 기반 구조 개편으로 해결한 사례다. 비동기 흐름 직렬화에 RxJS, 동기적 상태 관리에 Zustand를 도입해 타이밍 비결정성을 구조 수준에서 제거했다.
요약 이어보기#sdk#redux#rxjs+2 - 프론트엔드·
여기어때 (GC컴퍼니)·항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다
여기어때 항공 서비스 프론트엔드가 웹과 앱 웹뷰 두 환경에서 동일한 함수 호출로 동작하는 앱 브릿지 추상화 레이어를 설계한 과정을 다룬다. iOS·안드로이드 규약 차이와 "웹에 존재하지 않는 브릿지를 어떻게 호출하나"라는 문제를 단일 추상화 층으로 해결한 구현 사례다.
요약 이어보기#react#typescript#webview+2