데이터를 판단으로 바꾸는 화면을 설계
성과, 사용자 행동, 운영 지표 등을 읽어야 하는 숫자가 아니라, 바로 결정할 수 있는 화면으로 구조화했습니다.
광고 성과와 사용자 행동 데이터를 해석이 아닌 '선택'으로 이어지도록 시각화했습니다.
- Pass / Glance / Attention 등 행동 지표 시각화
- 차트가 늘어나는 대신, 의사결정에 필요한 최소 단위 정보만 노출
- 실시간 데이터에서도 시선 흐름이 무너지지 않도록 구조화
- 전시·리테일 환경처럼 목적이 명확한 상황에 맞춘 데이터 표현
사용자 중심으로 화면을 설계
사용자가 원하는 정보를 제공하고 서비스 성장에 도움이 되는 화면을 만들기 위해 노력했습니다.
심미적인 판단이 아닌, 사용자 행동을 근거로 선택하기 위해 A/B 테스트를 설계하고 운영 가능한 실험 구조를 만들었습니다.
- 사용자 행동 기반 가설 → 분기 → 결과로 이어지는 A/B 테스트 플로우 설계
- Server Driven UI로 배포 없이 실험 Variant 제어
- 반복 가능한 실험을 전제로 한 운영형 A/B 테스트 환경 구축
디자인/기능 개선 실험 설계
썸네일 도입 후 어디에 배치하지?
가설 검증 단계
썸네일 위치를 좌측을 A, 우측을 B 로 설정
Selected
Variant A 수치 상승
클릭율 12% → 25%
Variant B 수치 유지
클릭율 유지
서비스의 성장·의사결정·마케팅 목적에 맞춰 이벤트를 설계하고, 사용자 흐름 속에서 답을 찾을 수 있도록 데이터를 구조화했습니다.
- 성장·전환·마케팅 목적별 이벤트 택소노미 설계
- 서드파티 분석 서비스 비교·채택 및 연동 (GTM, AppsFlyer, Airbridge, Braze, Amplitude, Mixpanel 등)
- 단순 수집이 아닌, Sankey Chart 등 사용자 흐름 시각화를 통해 병목과 이탈 구간 분석
- 이벤트 기반 퍼널 분석으로 A/B 테스트 결과 검증 및 의사결정 근거 제공
- 마케팅팀과 협업 가능한 이벤트 명세서 운영
일관된 사용자 경험을 위해 디자인 시스템을 직접 설계하고, 공유 가능한 형태로 운영했습니다.
- Color Token, Typography, Spacing 등 기초 시스템 정의
- Button, Input, Toggle 등 공통 컴포넌트를 재사용 가능한 단위로 설계
- Storybook 기반 문서화 및 NPM 패키지화로 어떤 프로젝트에서든 즉시 사용 가능
- UI 변경 시 전체 서비스에 일괄 반영되는 단일 소스 구조 운영
- 공통된 디자인으로 일관된 사용자 경험을 제공
- 작업 생산성 향상
다양한 환경,
다양한 국가 지원
언어, 디바이스, 실행 환경이 달라도 사용자가 느끼는 맥락과 흐름이 유지되도록 개발해왔습니다.
사용자의 환경에 맞춘 제품을 만들고 장점을 최대화하여 설계했습니다.
- 영어 · 일본어 · 중국어 서비스 운영 경험
- 언어 변경에도 UI 구조가 유지되도록 컴포넌트 단위 설계
- PC / 모바일 브라우저, 네이티브 환경에서의 입력·탐색·소비 흐름 차이 고려
- 네이티브로 느껴지는 UI/UX, 인터페이스를 활용한 디바이스의 장점을 활용
문제를 구조로 해결하는 개발
단순한 기능 구현을 넘어, 운영 효율 · 보안 · 사용자 체감 성능을 함께 개선하는 방향으로 개발해왔습니다.
BFF 도입으로 플랫폼 분기 및 보안 중앙화
문제
대시보드, 오프라인 환경(전시장·리테일 매장) 등 서로 다른 플랫폼에서 동일한 API 서버를 공유해야 했습니다.
- 백엔드에서 플랫폼별 분기 코드가 지속적으로 증가
- 시각화 목적의 데이터에 민감 정보가 함께 포함되어 보안 이슈 발생
- 프론트에서도 불필요한 데이터 가공과 검증 로직이 반복
해결
플랫폼 특성과 보안 요구사항을 프론트 레이어에서 명확히 분리하기 위해 BFF(Backend For Frontend) 서버를 도입했습니다.
- 모든 요청은 BFF를 통해 검증을 중앙화
- API 서버는 외부에 노출하지 않고, Tailscale 네트워크에 포함된 Next.js BFF 서버에서만 접근 가능하도록 구성
- 각 플랫폼에 필요한 데이터만 선별하여 response를 구성
- 모든 엔드포인트를 개별 구현하는 비효율을 피하기 위해 catch-all proxy를 기본 전략으로 두고, 보안·검증이 중요한 엔드포인트만 별도로 처리
효과
- 백엔드와 프론트 양쪽의 플랫폼 분기 코드 감소
- 민감 데이터 접근 경로 통제 및 보안 강화
- 신규 API 추가 시 생산성 향상
Dashboard
AI PC / Exhibition
APP
Next.js BFF
Validation · Filter · VPN
Core API Server
Business Logic Only
Intersection Observer 기반 지연 로딩으로 초기 성능 개선
문제
차트와 시각화 요소가 많은 페이지에서 모든 API를 한 번에 호출하면서 초기 로딩 시간이 길어지는 문제가 있었습니다.
실제로 사용자가 보지 않는 영역의 데이터까지 초기에 불필요하게 로드되고 있었습니다.
해결
Intersection Observer를 활용해 뷰포트 진입 시점을 기준으로 데이터를 fetch하도록 구조를 개선했습니다.
- Intersection Observer 로직을 공통 Hook으로 추상화해 차트, 테이블 전반에 재사용
- threshold 기반으로 진입 비율을 조절해 불필요한 트리거 방지
효과
- 초기 로딩 시간 개선
- 불필요한 API 호출 감소
- 사용자 경험을 해치지 않으면서 성능 최적화 달성
Viewport 진입 시
데이터 요청
Viewport 밖
요청하지 않음
Windowing 기반 인피니티 스크롤로 대규모 리스트 성능 안정화
문제
이미지와 텍스트를 포함한 리스트가 길어질수록 DOM 노드 수가 지속적으로 증가하며, 모바일 브라우저 환경에서 스크롤 지연, 프레임 드랍이 발생하는 문제가 있었습니다.
일반적인 Infinite Scroll 구현은 데이터 로딩만 제어할 뿐, 이미 렌더링된 아이템은 제거하지 않아 장시간 사용 시 성능 저하가 누적되는 구조였습니다.
해결
Android RecyclerView와 유사한 개념의 Windowing 방식을 적용해, 화면에 보이는 영역 기준으로 필요한 아이템만 렌더링하도록 리스트 구조를 직접 구현했습니다.
- 스크롤 위치를 기준으로 렌더링 범위를 계산해 뷰포트 영역 아이템만 DOM 유지
- 상·하단에 가상 영역을 두어 전체 스크롤 높이를 유지
- Intersection Observer를 활용해 스크롤 경계 진입 시 데이터 로딩 트리거
- state 업데이트 범위를 최소화해 불필요한 re-render 방지
효과
- 리스트 길이와 무관하게 DOM 노드 수를 일정 수준으로 유지
- 모바일 환경에서도 스크롤 프레임 드랍 없이 안정적인 UX 제공
- 장시간 사용 시에도 메모리 사용량이 증가하지 않는 구조 확보
스크롤 위치 기준으로
가시 영역 아이템만
DOM에 유지
Optimistic Update로 운영 체감 속도 개선
문제
리포트 생성·수정과 같이 서버에서 시간이 소요되는 작업의 경우, 클라이언트는 응답이 올 때까지 아무런 피드백 없이 대기해야 했습니다.
- 사용자는 작업이 정상 처리되었는지 확신하기 어려움
- 결과 반영까지 장시간 대기하는 현상 발생
해결
Optimistic Update 전략을 적용해 작업 완료를 먼저 UI에 반영하고, 실제 데이터 처리는 백그라운드에서 진행되도록 설계했습니다.
- 즉시 완료 상태로 전환
- 상세 페이지 진입 시 "데이터를 가공 중입니다 (예상 소요 시간)" 안내 메시지 제공
효과
- 체감 응답 속도 개선
- 사용자 불안감 감소 및 중복 액션 방지
- 운영자가 다른 작업을 병행할 수 있는 UX 제공
리포트를 생성하면
서버 처리 과정이
표시됩니다