jtwjs Dev Wiki
  • DEV_ROAD
    • 💪🏻 생존하기
    • Week 1
      • 개발 환경 세팅
      • 타입스크립트
      • 리엑트
      • Testing Library
      • Parcel & ESLint
    • Week 2
      • JSX
      • Virtual DOM
    • Week 3
      • React Component
      • React State
    • Week 4
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
    • Week 5
      • TDD
      • React Testing Library
      • MSW
      • Playwrite
      • Snapshot
    • Week 6
      • Separtion of Concerns
      • Principle
      • DI, (Dependency Injection)
      • Reflect-metadata
      • TSyringe
      • External Store
      • Follow Redux
      • usestore-ts
      • useSyncExternalStore
    • Week 7
      • Routing
      • Routes
      • Router
      • Navigation
    • Week 8
      • Design System
      • Style Basics
      • CSS-in-JS
      • Styled-Components
      • Global Style & Theme
    • Week 9
      • 개발하기 전 준비
      • 상품 목록 페이지
      • 상품 상세 페이지
      • 장바구니 페이지
    • Week 10
      • 로그인
      • 로그아웃
      • 회원가입
      • 주문 목록 & 주문 상세
    • Week 11
      • 배송 정보 입력
      • 포트원 결제 요청
      • 배송 및 결제 정보 전달
    • Week 12
      • 관리자 웹사이트개발시작
  • DEV_NOTE
    • TypeScript
      • 기본적 문법
        • Enum
        • 다형성
          • Untitled
        • 구조적 타이핑
        • 제너릭 타입
        • 컨디셔널 타입
        • 함수 메서드 타이핑
        • infer로 타입스크립트의 추론 직접 활용
        • 재귀 타입
        • 템플릿 리터럴 타입
        • 추가적인 타입 검사 satisfies 연산자
        • 타입스크립트 건망증
        • 원시 자료형에도 브랜딩 기법 사용 가능
        • 타입 좁히기
        • 유용한 타입 만들기
        • 데코레이터 함수
        • 앰비언트 선언도 선언 병합이 된다.
        • 앰비언트 선언도 선언병합이 된다.
    • Testing
      • Unit Testing
      • 단위 테스트의 두 분파
      • 좋은 단위 테스트를 구성하는 4대 요소
      • 테스트 대역과 식별할 수 있는 동작
      • 단위 테스트 스타일
      • 가치 있는 단위 테스트를 위한 리팩토링
      • 통합 테스트
      • Cross Browsing Testing
      • 기능 테스트 종류
      • React Testing Pattern
      • 프론트엔드 테스트 입문
        • 테스트 범위
        • 단위 테스트 검증
        • Mock
        • UI 컴포넌트 테스트
        • 테스트 커버리지
        • 웹 통합 테스트
        • MSW
        • 스토리북
        • 시각적 회귀 테스트
        • E2E 테스트
        • Github Actions 설정
        • 깃허브 액션에서 E2E
      • 시프트 레프트
        • 테스트 기본중의 기본
        • 단위 테스트
        • 코드 복잡도
        • 리팩터링
        • 코드 리뷰
        • 통합 테스트 패턴
        • 시스템 테스트의 자동화
        • 탐색적 테스트
      • Test Tip
      • vitest
      • playwright
      • Test Data Generator
      • MSW
    • Algorithm
      • coding test
      • Data Structure
    • Next.js
      • Data Fetching
      • Hydration
      • Next 13
      • Optimization
      • Next 15
        • ETC.
    • Tailwind
      • Tailwind CSS
      • Theme
      • Directives
      • Tool
      • Design System
      • Shadcn UI
    • Storybook
      • Storybook
      • CSF3
      • CDD
      • Headless Component
    • Funtional Programming
      • 함수형 프로그래밍
      • 참조 투명성
      • 부수효과
      • 함수 합성
      • 제너릭 타입 활용하기
      • 암묵적 입출력
      • 액션과 계산, 데이터
      • 계층형 설계
      • 호출 그래프
      • 함수형 설계
      • 불변성
      • 일급 함수
      • 함수형 도구
    • Git
      • Github Actions
      • Conflict
      • Branch 전략
    • Contents Format
      • Audio
    • 3D Graphic
      • 3D keyword
      • Three.js
      • Geometry
      • Material
      • Light
      • Camera
      • Decal
      • Rotation
      • Text
      • Shadow
      • Fog
      • Post Processing
      • Animation
      • Math
        • Vector Space
        • 벡터의 연산
        • 회전 계산
      • 3D 컨텐츠가 만들어지는 과정
      • R3F
      • Env
      • Scene
      • Transform
      • R3F
      • Interaction & Raycast
      • Rendering Algorithnm
      • Blender
    • Accessibility
      • 접근성이란
    • Interactive Web
      • Parallax
      • Canvas
      • requestAnimationFrame
      • Effect
      • HSL
      • React.js + Canvas
      • Matter.js
    • AWS
      • DevOps
      • Amplify
      • S3
      • 클라우드 컴퓨팅
        • 온프레미스와 클라우드
        • 클라우드 도입효과
        • 클라우드 컴퓨팅의 범위
        • 컴퓨팅 옵션
          • EC2 - Virtual Machin
          • ECS, EKS - Container
          • Lambda - Serverless
        • 네트워크 가상화
        • 스토리지
        • 데이터베이스
        • 데이터 수집
        • 머신 러닝 영역
        • IoT 영역
        • 블록체인 영역
      • 클라우드 아키텍처 설계
    • Network
      • Web Server & WAS
    • System Design
      • System Design
      • Component
      • 의존성을 배제한 개발
      • Error Handling
      • Architecture
        • 모노로틱 아키텍처
        • Clean Architecture
        • Layered Architecture
        • 이벤트 기반 아키텍처
      • 상황을 파악하는 메타인지
      • 중복 문제 해결하기
      • Monorepo Arhitecture
        • 모노레포 운영과 트러블슈팅
        • Module Federation
      • 코드 병목지점
      • API 대응
      • 공통 코드
      • Infra 구축
      • 모듈 기반의 개발 방식
      • Design System
        • 최소 수준의 아키텍처 설정
        • 더 효율적인 디자인시스템 만들기
        • 디자인 시스템과 UI 라이브러리 목적
        • 디자인 토큰
      • 효율적인 업무
        • 업무 프로세스 병목 파악
      • Clean Code
      • Design Pattern
        • CQRS Pattern
        • Strangler Fig Pattern
        • 데코레이터 패턴
        • 커맨드 패턴
        • 전략 패턴
        • 옵저버 패턴
      • A/B 테스팅
      • 대규모 리엑트 웹앱 개발
        • 복잡성 관리
        • 모듈성
        • 성능
        • 디자인 시스템
        • 데이터 패칭
        • 상태 관리
        • 국제화
        • 코드 조직화하기
        • 개인화 A/B 테스팅
        • 확장 가능한 웹 아키텍처
        • 테스팅
        • 툴링
        • 기술적 마이그레이션
        • 타입스크립트
        • 라우팅
        • 사용자 중심 API 디자인
        • 리액트 미래
    • Performance
      • React DevTools
      • Component 최적화
      • Page Load
      • API
    • MFA
      • MSA
      • MFA 도입하기
      • Monorepo
        • Monorepo Tool
        • Yarn Berry Workspace
        • Turborepo
      • MFA Composition
      • SPA 통합
      • Design System
      • Package Manager
        • Yarn
        • pnpm
      • Transpiler & Bundler
        • Babel
        • Rollup
        • esbuild
        • swc
        • Webpack
        • Vite
      • 분해와 통합을 위한 여러 기술 비교
    • State Management
      • Zustand
    • React v18
      • Automatic batching
      • Suspense
      • Transition
    • SEO
      • Search Engine Optimization
      • Open Graph Element
      • Metadata
    • FE Develop
      • User Scenario
      • Optimization
      • Browser API
        • Scrubbing
        • Clipboard
      • Folder Structure
      • API First Design
      • 통합 테스트
      • 테크 스펙
      • 이슈 관리 with Jira
    • Refactoring
      • 리팩토링 깊게 들여다보기
      • 긴 코드 조각내기
      • 타입 코드 처리하기
      • 유사한 코드 융합하기
      • 데이터 보호
      • 코드 추가 및 제거
    • OAuth 2.0
    • Analytics
      • Mixpanel
    • ETC
      • VSCode
    • React Hook In Action
      • useContext & Provider
      • 커스텀 훅
      • 코드 분할하기 with Suspense, lazy
      • Suspense와 이미지 적재하기
      • useTransition, uesDeferredValue
      • SuspenseList
    • AI
      • Cursor
    • UI library
      • vanila-extract
      • Headless
      • 테스트 코드
      • 문서화
Powered by GitBook
On this page
  • 개인화와 A/B 테스팅
  • 개인화
  • A/B 테스트
  • 기능 플래그
  1. DEV_NOTE
  2. System Design
  3. 대규모 리엑트 웹앱 개발

개인화 A/B 테스팅

개인화와 A/B 테스팅

사용자들로부터 최대한의 참여를 이끌어내기 위해 앱 사용자 경험을 어떻게 최적화할 수 있는가?

  • 개인화: 사용자의 선호도, 행동 및 다른 데이터를 기반으로 사용자 경험을 맞추는 작업 포함함

  • A/B 테스팅: (대조 실험), 어떤 기능 혹은 인터페이스 두 가지 버전 이상을 테스트해서 보다 효과적인 버전이 무엇인지 결정

  • A/B 테스팅을 개인화와 결합하면 사용자에게 맞춤 경험을 제공하는 동시에 그 효과를 측정 가능

개인화

개인 사용자 혹은 그룹을 대상으로 선호도, 행동 혹은 다른 식별 가능 속성에 기반해 맞춤 경험을 만드는 프랙티스

  • 사용자 프로파일링, 사용자 행동 추적, 사용자 피드백 수집 기법

  • 이 사용자 데이터는 DB에 저장되고, 리액트 앱은 이 정보에 질의함으로써 앱 사용자에 기반해 컨텐츠와 경험을 개인화하는데 활용할 수 있음

A/B 테스트

2개 버전 이상의 웹 페이지, 기능 혹은 제품을 서로 비교해 보다 성능 좋은 쪽으로 결정하는 방법

  • 성능이란 테스트 목적에 따라 의미가 다양함

  • 클릭률, 판매 향상, 사용자 참여 개선, 반동률 감소, 또는 팀의 중요한 핵심 성과 지표 달성 등을 의미할 수 있음

  • A/B 테스트 구현 핵심 단계

    • 사용자 나누기: 앱 사용자를 구분된 그룹으로 나누고, 각 사용자가 테스트 대상 기능 여러 버전 중 한 버전만 보도록 해야함

    • 다른 버전 제공하기: 검증이 필요한 기능 혹은 컴포넌트의 다른 버전을 만듦, 조건 렌더링으로 각 사용자 세그먼트에 적절한 변형을 제공할 수 있음

    • 데이터 수집: 각 변형에 관한 사용자 상호작용, 전환 및 다른 관련 지표를 수집하고 분석을 위해 이 정보를 저장

    • 실험 결과 분석: 충분한 데이터를 수집하거나 실험을 종료한 뒤, 각 변형의 성능 지표들을 비교하고 결정

Optimizely, Statsig, Launchdarkly 서드 파티 도구 활용

기능 플래그

새로운 기능을 사용자에게 출시할 준비가 되었을 때, 모든 사용자에게 해당 기능을 출시하고 싶지는 않은 여러 경우가 존재 가능

기능 플래그(기능 게이트, 베타 플래그)는 앱의 새로운 기능 출시 및 통제를 관리하는 강력한 방법을 제공

  • 위험 완화하기: 기능을 점진적으로 배포하면 전체 사용자 베이스에 영향을 주기 전에 일부 제한된 사용자를 통해 잠재적인 버그 이슈들을 식별하는데 도움됨

    • 새로운 기능들의 도입과 관련된 위험 최소화

  • 인프라스트럭쳐 부하 테스트하기: 일부 새로운 기능들이 데이터에 집중된 동작을 포함하는 경우 백엔드 인프라스트럭처에 상당한 영향을 줄 수 있음

    • 일부 사용자들에게만 기능을 출시하여, 서버 부하 모니터링하고 최적화 한 뒤 전체 사용자에게 출시

  • 사용자 피드백 수집하기: 적은 규모의 사용자에게 먼저 출시해 피드백 수집한뒤 전체 사용자에게 공개

    • 해당 기능이 사용자 니즈를 만족하는지, 보다 개선이 필요한지 이해하는데 매우 중요

  • 시장 테스트하기: 새로운 기능이 사용자들이 이미 익숙하게 사용하는 기능과 크게 다르다면, 해당 기능을 시장에서 받아들일지 테스트하는 것은 가치 있음

    • 특정 지역, 특정 인구통계를 대상으로 기능을 출시함으로써 서로 다른 사용자 세그먼트가 변경을 인지하는 방법에 관한 통찰을 얻을 수 있음

  • 롤백 계획 보장하기: 단계적인 공개 과정에서 무언가 잘못되더라도 소규모 일부 사용자들만 영향을 받으므로 광범위 혼란 야기하지 않고 쉽게 해당 기능을 롤백 또는 수정할 수 있음

Optimizely, Statsig, Growhbook 서드 파티 도구 활용

  • 기술적 이익을 제공하는 동시에 비즈니스 이점도 제안함

    • 제품 관리자, 마케팅 팀, 고객 지원 담당은 기능 출시를 조정

    • 타깃을 지정한 프로모션을 실행

    • 고객 피드백을 보다 효과적으로 관리

Previous코드 조직화하기Next확장 가능한 웹 아키텍처

Last updated 3 months ago