📂 프로젝트
ringle

Ringle

#ReactNative, #Expo, #FastAPI, #MSA, #Next.js,2025-10-06

과거 근무하던 영어 교육 서비스 Ringle에서 진행한 프로젝트를 소개합니다.

근무 당시 풀스택 개발자로 근무했으며, 회사 내부 정책상 서비스 구조나 비즈니스 지표 등 자세한 내용은 공개하기 어렵습니다.
대신 제가 어떤 문제를 맡았고, 어떤 방식으로 기능을 구현했는지 공개 가능한 범위 안에서 간략하게 정리합니다.

목차

  • 1. 앱 광고 전환 추적 기능
  • 2. 학습 성과탭 기능

1. 앱 광고 전환 추적 기능

앱 9.3 버전에서 앱 광고 전환 추적 기능을 개발했습니다.

이 기능의 핵심은 사용자가 광고를 통해 앱에 진입했을 때, 어떤 경로로 유입되었는지 추적하고 이를 분석 이벤트와 연결하는 것이었습니다.
기존 앱은 웹뷰와 네이티브 기능이 함께 사용되는 구조였기 때문에, 단순히 웹에서 UTM 파라미터만 처리하는 방식으로는 충분하지 않았습니다.

또한 Firebase Dynamic Links 기능 종료에 대한 대응도 필요했습니다.
따라서 기존 딥링크 흐름을 점검하고, 앱과 웹 양쪽에서 안정적으로 링크 진입을 처리할 수 있도록 구조를 개선했습니다.

구현한 내용

주요 구현 범위는 다음과 같습니다.

  • Deep Link 및 Universal Link 설정
  • 웹 도메인에 Universal Link 검증용 파일 추가
  • 광고 랜딩 URL의 UTM 파라미터 처리
  • 앱 설치 이후 전환 추적을 위한 AppsFlyer 연동 흐름 구성
  • GA 이벤트 연결 및 광고 전환 이벤트 로깅

앱이 이미 웹뷰와 네이티브 기능을 함께 사용하는 구조였기 때문에, 유입 경로를 추적할 때 다음과 같은 케이스를 함께 고려해야 했습니다.

  • 앱이 이미 설치된 사용자가 광고 링크를 클릭한 경우
  • 앱이 설치되지 않은 사용자가 광고 링크를 클릭한 뒤 스토어로 이동하는 경우

  • 설치 이후 첫 실행 시 기존 광고 유입 정보를 이어받아야 하는 경우
  • 웹뷰 내부에서 발생한 이벤트와 네이티브 앱 이벤트를 함께 분석해야 하는 경우

이 과정에서 Deep Link, Universal Link, AppsFlyer, GA 이벤트를 함께 연결하면서
광고 유입 → 앱 진입 → 설치 또는 실행 → 이벤트 수집으로 이어지는 흐름을 구성했습니다.

배운 점

이 기능을 구현하면서 앱 광고 전환 추적은 단순히 SDK를 붙이는 작업이 아니라는 것을 배웠습니다.
웹, 앱, 스토어, 광고 플랫폼, 분석 도구가 모두 연결되어야 했고, 각 단계에서 유입 정보가 끊기지 않도록 설계하는 것이 중요했습니다.

특히 웹뷰 기반 앱에서는 웹과 네이티브의 경계가 있기 때문에, 이벤트를 어느 레이어에서 수집하고 어떤 기준으로 통합할지 고민해야 했습니다.
이 경험을 통해 모바일 앱의 마케팅 트래킹 구조와 분석 이벤트 설계에 대한 이해를 넓힐 수 있었습니다.


2. 학습 성과탭 기능

앱 9.4 버전에서는 사용자의 영어 학습 데이터를 시각화하는 성과탭 기능을 개발했습니다.

성과탭은 사용자가 수업이나 학습 과정에서 말한 단어를 분석하고, 이를 바탕으로 자신의 학습량과 어휘 사용 변화를 확인할 수 있도록 돕는 기능입니다.

기존 학습 서비스는 수업 완료 여부나 수강 횟수처럼 정량적인 학습 기록은 제공할 수 있었지만,
사용자가 실제로 어떤 단어를 말했고 얼마나 다양한 표현을 사용했는지까지 보여주는 데에는 한계가 있었습니다.

이 문제를 해결하기 위해 사용자의 발화 데이터를 분석하고, 단어 단위의 학습 데이터를 축적한 뒤,
이를 사용자가 이후에도 다시 확인할 수 있는 성과 데이터로 제공하는 기능을 구현했습니다.

구현한 내용

성과탭 기능은 기존 서비스와 분리된 FastAPI 기반 MSA 형태로 구현했습니다.

주요 구현 범위는 다음과 같습니다.

  • FastAPI 기반 단어 분석 서버 구현
  • 서버 백그라운드에서 발화 분석이 수행되도록 구조 설계
  • spaCy를 활용한 영어 형태소 분석
  • 사용자 발화에서 단어 추출 및 정규화
  • 사용자별 총 발화 단어 수 저장
  • 사용자별 유니크 단어 수 저장
  • 사용자가 말한 단어 풀 저장
  • 분석 완료 이후 결과 조회 API 제공
  • 저장된 학습 데이터를 그래프 형태로 시각화

사용자의 발화 문장을 그대로 보여주는 것이 아니라, 분석 가능한 단어 단위 데이터로 변환하는 것이 핵심이었습니다. 이를 위해 spaCy를 활용해 문장을 분석하고, 사용자가 실제로 어떤 단어를 말했는지 추출했습니다.

이후 사용자별로 다음과 같은 데이터를 축적했습니다.

  • 총 발화 단어 수
  • 유니크 단어 수
  • 사용자가 말한 단어 목록
  • 기간별 학습 변화

프론트엔드에서는 이 데이터를 기반으로 사용자가 자신의 학습 성과를 직관적으로 확인할 수 있도록 그래프 형태의 UI를 구현했습니다.

MSA로 분리한 이유

성과탭 기능을 MSA 형태로 구현한 이유는 발화 분석 작업을 사용자 조회 흐름과 분리하기 위해서였습니다.

사용자의 발화 데이터를 분석하는 작업은 spaCy를 활용한 형태소 분석, 단어 정규화, 총 단어 수 및 유니크 단어 수 계산, 사용자별 단어 풀 저장 등 비교적 무거운 처리 과정을 포함했습니다.
이 작업을 사용자가 성과탭에 진입하는 시점에 바로 수행하면 응답 시간이 길어지고, 사용자는 분석이 끝날 때까지 기다려야 하는 문제가 생길 수 있었습니다.

따라서 분석 로직을 기존 서비스와 분리된 FastAPI 기반 서버로 구성하고, 발화 데이터가 생성된 이후 서버 백그라운드에서 분석이 수행되도록 설계했습니다.
분석이 완료되면 결과를 저장해두고, 사용자가 나중에 성과탭에 진입했을 때는 이미 처리된 데이터를 조회하는 방식으로 구성했습니다.

즉, 성과탭은 사용자가 매번 분석 과정을 기다리는 기능이 아니라,
백그라운드에서 분석된 학습 결과를 나중에 빠르게 확인할 수 있는 기능으로 설계했습니다.

이를 통해 분석 처리와 사용자 조회 경험을 분리할 수 있었고, 이후 분석 로직이 확장되더라도 기존 서비스의 주요 흐름에 미치는 영향을 줄일 수 있었습니다.

기술적 고민

성과탭 기능에서 가장 중요하게 고민한 부분은 분석 처리 시점과 사용자 경험을 어떻게 분리할 것인가였습니다.

사용자의 발화 데이터를 분석하려면 문장을 단어 단위로 분해하고, 불필요한 표현을 정리한 뒤, 사용자별 학습 지표로 저장하는 과정이 필요했습니다.
하지만 사용자가 성과탭에 들어올 때마다 이 과정을 실시간으로 수행하면 화면 진입이 느려지고, 학습 결과를 확인하는 경험이 무거워질 수 있었습니다.

그래서 분석은 서버 백그라운드에서 수행하고, 성과탭에서는 저장된 분석 결과를 조회하는 구조로 설계했습니다.

이를 통해 사용자는 분석 과정 자체를 의식하지 않고,
수업 이후 누적된 단어 수, 유니크 단어 수, 단어 풀, 기간별 변화를 자연스럽게 확인할 수 있었습니다.

이 구조는 단순히 기능을 분리하는 것을 넘어,
분석 작업은 독립적으로 수행하고 사용자에게는 빠른 조회 경험을 제공하기 위한 설계였습니다.

배운 점

이 기능을 개발하면서 사용자 행동 데이터를 제품 경험으로 다시 돌려주는 과정의 중요성을 배웠습니다.

단순히 “사용자가 수업을 들었다”는 기록을 넘어서,
“사용자가 실제로 어떤 표현을 사용했고, 얼마나 다양한 단어를 말했는지”를 보여주면 학습 동기 자체를 높일 수 있습니다.

또한 분석 기능은 결과를 한 번 생성하는 것에서 끝나는 것이 아니라,
그 결과를 어떻게 저장하고, 사용자가 이후에도 의미 있게 다시 확인할 수 있게 만들 것인지가 중요하다는 점을 배웠습니다.

이를 통해 NLP 기반 분석 로직, 데이터 저장 구조, API 설계, 프론트엔드 시각화, 사용자 경험을 함께 고려하는 풀스택 개발 경험을 쌓을 수 있었습니다.

마무리

Ringle에서의 경험은 단순히 기능을 구현하는 것을 넘어,
사용자 행동 데이터와 제품 경험을 연결하는 방법을 배운 시간이었습니다.

앱 광고 전환 추적 기능을 통해서는 사용자가 어떤 경로로 서비스에 유입되는지 분석하는 흐름을 경험했고,
성과탭 기능을 통해서는 사용자의 학습 데이터를 가공해 다시 사용자에게 의미 있는 형태로 제공하는 경험을 했습니다.

이 과정에서 React Native, Expo, FastAPI, Next.js, 분석 도구, 앱 트래킹 도구를 함께 다루며
웹과 앱, 백엔드와 데이터 분석 흐름을 연결하는 풀스택 개발 경험을 쌓을 수 있었습니다.

scorchedrice.com

개발하며 배운 것과 프로젝트의 흔적을 기록하는 개인 공간입니다.

한지웅HONGIK UNIV. MATERIAL SCIENCE & ENGINEERING 17
2025. Han Ji Woong. All rights reserved.Built with Gatsby, MDX, and a small constellation of notes.