김솔미

배포가 필요했던 운영을 누구나 바로 바꿀 수 있는 시스템으로

앱의 콘텐츠를 바꿀 때마다 클라이언트를 배포해야 했습니다. 레이아웃과 콘텐츠를 서버가 스키마로 내려주는 SDUI(Server-Driven UI) 구조로 재설계하고, 비개발자가 직접 데이터를 관리하는 어드민을 프론트엔드부터 백엔드까지 구현했습니다.

기능 반영 시간을 하루에서 수 분으로 단축

이미지 합성부터 노출 실험까지 하나의 구독 퍼널로

워터마크가 구독을 유도할 수 있다고 판단했지만 단순히 강하게 노출하면 생성 경험을 해칠 수 있었습니다. BFF에서 Sharp.js로 원본 이미지와 로고를 합성하고 프론트엔드는 노출 UI와 시점 및 위치를 조합별로 실험할 수 있도록 분리했습니다.

워터마크 A/B 테스트를 주도해 구독 전환율 1%에서 10%로 개선

생성에서 끝나던 경험을 다시 탐색하고 구매하는 흐름으로

재진입 데이터를 보고 반복 노출을 셔플 방식으로 바꿨습니다. 생성된 공간 속 상품을 커머스 딥링크와 연결해 탐색이 실제 구매 행동으로 이어지게 만들었습니다.

사용자 1인당 평균 요청량 2배 이상 증가, 스크랩 전환율 11배 상승

연속해서 바뀌는 이미지 편집을 되돌릴 수 있는 구조로

사진 위에 브러시로 그리거나 이미지와 가구 객체를 추가하고 삭제하는 편집 캔버스를 구현했습니다. 전체 캔버스 스냅샷 대신 각 동작을 execute와 undo 클로저를 가진 Command 패턴으로 기록했습니다. Undo 이후 새로운 동작이 실행되면 남은 Redo 분기를 제거하고 최대 50개의 이력만 유지하는 히스토리 매니저를 설계했습니다.

AI의 답변을 상품 추천과 3D 배치까지 이어지는 대화로

Markdown과 커스텀 태그가 섞인 AI 응답을 파싱해 텍스트와 추천 상품 및 3D 배치 액션을 하나의 대화 흐름 안에서 렌더링했습니다. Polling 기반의 전송 계층과 세션 관리를 구현해 생성 중인 응답을 안정적으로 이어 보여주었습니다.

한 장의 응모권이 동시에 두 번 사용되지 않도록

첫 바이럴 이벤트의 프론트엔드와 백엔드를 단독으로 맡아 응모권 도메인과 MongoDB 스키마부터 추첨 및 당첨자 발표까지 구현했습니다. 멱등 처리와 낙관적 락, 원자적 상태 전환을 조합해 요청이 동시에 몰려도 응모권이 중복 사용되지 않도록 설계하고 추첨과 발표까지 운영했습니다.

플랫폼마다 다른 WebView 제약에도 저장 흐름이 끊기지 않도록

iOS와 Android WebView에서 서로 다른 다운로드 제약을 발견해 하나의 저장 방식으로 양쪽을 처리할 수 없었습니다. Android는 로컬 Blob, iOS는 Presigned URL 기반으로 저장 경로를 분리했습니다. 플랫폼 분기는 공통 인터페이스 안에 감춰 호출부는 실행 환경을 몰라도 되게 했습니다.

공개된 3D 에셋이 대량 수집 경로가 되지 않도록

3D 에셋 대량 수집 문제의 대응을 맡아 URL만으로 수집 가능한 경로를 재현했습니다. CDN과 오리진의 요청 흐름을 분석해 방어 지점을 특정한 뒤 인프라팀과 단계적인 보안 정책을 적용했습니다. 배포 후 차단 로그를 모니터링해 정상 요청의 오차단까지 발견하고 정책 범위를 다시 조정했습니다.

배포 이후 보이지 않던 에러를 관측 가능하게

배포 후 실제 환경에서 무엇이 깨지는지 추적할 수 없던 상황에서 Sentry로 에러 모니터링 체계를 세웠습니다. axios 응답 인터셉터에서 API 에러를 엔드포인트와 상태코드로 태깅하고, 토큰이나 비밀번호 같은 민감정보는 걸러 보냈습니다.

실시간 알림이 조용히 끊기거나 화면을 흔들지 않도록

SSE로 실시간 알림을 붙이며 두 가지 숨은 문제를 다뤘습니다. EventSource가 인터셉터를 타지 않아 토큰이 만료되면 연결이 조용히 끊기던 문제는 SSE 전용 토큰 갱신과 재연결을 분리해 해결했습니다. 새 알림이 스크롤 위치를 흔들지 않도록, 목록 맨 위에서는 즉시 반영하고 아래로 내려가 있으면 배지로만 알린 뒤 다시 올라오면 반영하도록 설계했습니다.