데이터를 판단으로 바꾸는 화면을 설계
광고 성과, 사용자 행동, 운영 지표를 읽어야 하는 숫자가 아니라, 바로 결정할 수 있는 화면으로 구조화했습니다.
광고 성과와 사용자 행동 데이터를 해석이 아닌 ‘선택’으로 이어지도록 시각화했습니다.
- Pass / Glance / Attention 등 행동 지표 시각화
- 차트가 늘어나는 대신, 의사결정에 필요한 최소 단위 정보만 노출
- 실시간 데이터에서도 시선 흐름이 무너지지 않도록 구조화
- 전시·리테일 환경처럼 목적이 명확한 상황에 맞춘 데이터 표현
오래 머무는 화면을 설계
PC와 모바일 환경 어디서든 읽는 흐름이 끊기지 않도록, 콘텐츠 소비의 리듬을 먼저 설계했습니다.
텍스트 기반 콘텐츠를 다루며 “얼마나 오래 읽히는가”를 UI의 가장 중요한 기준으로 삼아왔습니다.
- 대화 흐름을 방해하지 않는 레이아웃과 정보 밀도 설계
- 스크롤 · 터치 · 입력이 자연스럽게 이어지는 인터랙션 리듬 구성
- 긴 텍스트도 부담 없이 읽히도록 간격·행간·시선 이동 최적화
- 사용자 연령대·소비 패턴 분석을 바탕으로 한 UI 구조 설계
심미적인 판단이 아닌, 사용자 행동을 근거로 선택하기 위해 A/B 테스트를 설계하고 운영 가능한 실험 구조를 만들었습니다.
- 사용자 행동 기반 가설 → 분기 → 결과로 이어지는 A/B 테스트 플로우 설계
- Server Driven UI로 배포 없이 실험 Variant 제어
- 반복 가능한 실험을 전제로 한 운영형 A/B 테스트 환경 구축
디자인/기능 개선 실험 설계
썸네일 도입 후 어디에 배치하지?
가설 검증 단계
썸네일 위치를 좌측을 A, 우측을 B 로 설정
Selected
Option A 수치 상승
클릭율 12% → 25%
Option B 수치 유지
클릭율 유지
다양한 환경,
다양한 국가 지원
언어, 디바이스, 실행 환경이 달라도 사용자가 느끼는 맥락과 흐름이 유지되도록 개발해왔습니다.
사용자의 환경에 맞춘 제품을 만들고 장점을 최대화하여 설계했습니다.
- 영어 · 일본어 · 중국어 서비스 운영 경험
- 번역 변경에도 UI 구조가 유지되도록 컴포넌트 단위 설계
- PC / 모바일 브라우저, 네이티브 환경에서의 입력·탐색·소비 흐름 차이 고려
- 네이티브로 느껴지는 UI/UX, 인터페이스를 활용한 디바이스의 장점을 활용
문제를 구조로 해결하는 개발
단순한 기능 구현을 넘어, 운영 효율 · 보안 · 사용자 체감 성능을 함께 개선하는 방향으로 개발해왔습니다.
BFF 도입으로 플랫폼 분기 및 보안 중앙화
문제
대시보드, 오프라인 환경(전시장·리테일 매장) 등 서로 다른 플랫폼에서 동일한 API 서버를 공유해야 했습니다.
- 백엔드에서 플랫폼별 분기 코드가 지속적으로 증가
- 시각화 목적의 데이터에 민감 정보가 함께 포함되어 보안 이슈 발생
- 프론트에서도 불필요한 데이터 가공과 검증 로직이 반복
해결
플랫폼 특성과 보안 요구사항을 프론트 레이어에서 명확히 분리하기 위해 BFF(Backend For Frontend) 서버를 도입했습니다.
- 모든 요청은 BFF를 통해 검증을 중앙화
- API 서버는 외부에 노출하지 않고, Tailscale 네트워크에 포함된 Next.js BFF 서버에서만 접근 가능하도록 구성
- 각 플랫폼에 필요한 데이터만 선별하여 response를 구성
- 모든 엔드포인트를 개별 구현하는 비효율을 피하기 위해 catch-all proxy를 기본 전략으로 두고, 보안·검증이 중요한 엔드포인트만 별도로 처리
효과
- 백엔드와 프론트 양쪽의 플랫폼 분기 코드 감소
- 민감 데이터 접근 경로 통제 및 보안 강화
- 신규 API 추가 시 생산성 향상
- 프론트엔드에서도 데이터 계약이 명확해짐
시각 자료 업데이트 예정
Optimistic Update로 운영 체감 속도 개선
문제
리포트 생성·수정과 같이 서버에서 시간이 소요되는 작업의 경우, 클라이언트는 응답이 올 때까지 아무런 피드백 없이 대기해야 했습니다.
- 사용자는 작업이 정상 처리되었는지 확신하기 어려움
- 결과 반영까지 인디케이트를 보면 대기하는 현상 발생
해결
Optimistic Update 전략을 적용해 작업 완료를 먼저 UI에 반영하고, 실제 데이터 처리는 백그라운드에서 진행되도록 설계했습니다.
- 즉시 완료 상태로 전환
- 상세 페이지 진입 시 "데이터를 가공 중입니다 (예상 소요 시간)" 안내 메시지 제공
- 실패 시 롤백 처리로 데이터 일관성 유지
효과
- 체감 응답 속도 개선
- 사용자 불안감 감소 및 중복 액션 방지
- 운영자가 다른 작업을 병행할 수 있는 UX 제공
Intersection Observer 기반 지연 로딩으로 초기 성능 개선
문제
차트와 시각화 요소가 많은 페이지에서 모든 API를 한 번에 호출하면서 초기 로딩 시간이 길어지는 문제가 있었습니다.
실제로 사용자가 보지 않는 영역의 데이터까지 초기에 불필요하게 로드되고 있었습니다.
해결
Intersection Observer를 활용해 뷰포트 진입 시점을 기준으로 데이터를 fetch하도록 구조를 개선했습니다.
- 공통 Hook으로 추상화하여 재사용 가능하게 구성
- 실제로 화면에 노출되는 컴포넌트만 데이터 요청
- 끝까지 스크롤하지 않는 경우 API 호출 자체를 생략
효과
- 초기 로딩 시간 개선
- 불필요한 API 호출 감소
- 사용자 경험을 해치지 않으면서 성능 최적화 달성