미리보기

• AI 프로젝트 개발 리드(Angular + NestJs + Open AI)

• 글로벌 서비스 웹 애플리케이션 리뉴얼 및 유지보수 (React)

• 프리미엄 아이템(과금형 인터랙티브 콘텐츠) 개발 및 유지보수 (Angular)

• 만세력 웹페이지 개선

• 한국 서비스 웹 애플리케이션 개발 및 유지보수 (Angular)

• 백오피스 유지보수(Angular + NodeJS)

• 프로모션 페이지 개발 및 유지보수 (Vue, React)

https://ai.forceteller.com

유저의 질문을 기반으로 타로 운세를 봐주는 AI 서비스

프로젝트 참여 인원 : 총 3명 - 개발(1), 디자인 및 PM (1), 콘텐츠 에디터 (1)

베타 서비스의 리뉴얼 및 정식 출시 개발을 단독으로 리드했습니다.

개발 리드

• 요구 사항 분석

  • 클라이언트 ,서버, AI 파이프라인 개발 전담

    • 유저와 AI 봇 간 채팅창을 제거하고, Spine 애니메이션 기반 캐릭터를 메인 화면에 배치했습니다. 사용자의 액션에 따라 캐릭터 동작을 제어하는 기능을 설계 및 구현

    • LangChain 0.0.1v에서 0.3v로 업그레이드하면서, AI 응답 스트림을 받아 문장 단위로 가공하는 로직을 추가했습니다.

    • 사내 콘텐츠 데이터를 RAG 파이프라인을 통해 유저 질문과 연관된 정보를 AI 응답에 자동 반영하도록 했습니다.

    • 클라이언트, 서버, AI 서비스 전반의 버그 수정과 성능 최적화를 수행했으며, 새로운 요구사항에 따른 핵심 비즈니스 로직을 작성했습니다.

  • 프로젝트 리더 및 팀원들과의 기술적인 소통 전담

    • 프로젝트 리더 및 팀원과의 긴밀한 기술 논의를 주도했으며, 프롬프트에 대한 여러가지 실험으로 콘텐츠 에디터와 few-shot 프롬프트의 예시 부분을 RAG로 동적으로 불러오는 플로우를 설계하고 구현하여 AI 응답 품질을 한 층 끌어올렸습니다.

    • 2024년 11월 말, OpenAI API 오류로 AI 운세 응답이 생성되지 않는 현상이 발생했을 때, 재시도 로직을 신속히 작업하여 CS 이슈를 최소화했습니다.

  • 서비스 기능 및 UX 개선 아이디어 발굴 및 제안

    • 신규 유저 온보딩 플로우 작성

Frontend (Angular)

• Pixi.js 및 스파인 애니메이션 최적화

  • JS 힙 메모리 사용량 34% 감소시켜 페이지 다운 현상 해결하고 앱 안정성과 성능을 대폭 향상

  • Pixi를 사용하는 모달을 여러번 띄우고 닫을 때 간헐적으로 페이지가 다운되거나 프리징 되는 현상이 발생한다는 이슈가 QA를 통해 여러번 제보됨.

  • 원인 : 모달 컴포넌트가 destroy 되어도,Pixi에서 사용하는 WebGL context가 사라지지 않고 계속 축적되고 있었음

  • 해결 방법

    • 애니메이션 에셋 용량을 최적화 (38mb -> 7mb)

    • pixi application을 싱글톤으로 관리

    • 블로그에 자세한 사항을 기록해두었습니다. (https://velog.io/@soonmac/%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC%EB%A1%9C-PixiJS-%ED%8A%95%EA%B9%80-%ED%98%84%EC%83%81-%EC%97%86%EC%95%A0%EB%8A%94-%EB%B2%95feat.-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98)

• MobX 상태 관리로 실시간 스트리밍 메시지 처리

  • store에 @observable 변수를 생성하고, 컴포넌트에서 observable를 구독해서 변경 사항을 즉시 반영함.

  • reaction 함수를 통해 웹소켓으로 전달 받은 데이터를 가공 -> AI 캐릭터의 애니메이션과 말풍선 UI를 제어 및 로딩 상태 관리

  • 메세지를 토큰 단위가 아닌, 문장 단위로 묶어두었기 때문에 불필요한 렌더링을 줄이고, 프레임 드랍 없이 부드러운 타이핑 애니메이션 구현

• RxJS를 활용한 에셋 로딩바 Guard 구현

  • 스파인 애니메이션을 렌더링 하기 전에 JSON, 텍스처 에셋을 프리로드, 자연스럽고 깔끔한 UI/UX를 구현하여 이탈하는 유저의 수를 10% 줄임

Backend (NestJS, OpenAI, Langchain)

• AI 파이프라인 설계 및 RAG 도입

  • 사내 콘텐츠 데이터 약 3000건을 전처리하여 벡터 DB(pinecone) 구축 -> 월간 10,000+ AI 요청 처리

  • Langchain 기반 컨텍스트 자동 구성 : 유사 콘텐츠를 검색 후 프롬프트에 포함

  • AI 답변 정성평가 점수 답변 적합성, 자연스러움, 상담 유용성 지표에서 약 2점대에서 3점대로 상승

• AI 응답 스트리밍 처리 & WebSocket 전송

  • openAI 스트림 토큰을 문장 단위로 분할하여 webSocket으로 실시간 전송

• AI 요청 모니터링, 평가 자동화

  • Langsmith 연동 -> context로 유사 콘텐츠의 내용, 토큰 수, 비용, 레이턴시 등 실시간 모니터링

• 지수적 백오프를 사용한 서버 로직 안정성 강화

  • 연결 실패 시 3회 재시도 + 대기시간 2ⁿ초 적용

  • AI응답 불안정 시 지수적 백오프를 활용해 서버 부하를 최소화하고 안정성 강화

  • 정식 출시 이전 : 관련 CS 하루에 5건~10건 → 현재(25년 5월 기준) : 일일 방문자 200% 이상 증가한 현재에서도 관련 CS 0건

성과

• 일주일 만에 이전 한 달 평균 매출의 100% 이상 달성

• 일일 방문자 200% 이상 증가

• styleX를 도입한 디자인 시스템 적용 방식을 익히며 협업

• Ionic Animation을 활용해 메인 페이지 히어로 섹션의 인터랙션 리뉴얼

• tanstack-query를 활용한 북마크 UX 개선

  • 낙천적 업데이트로 느린 네트워크 환경에서도 빠르고 일관된 반응 제공

  • 글로벌 사용자 경험을 개선

• React-hook-form과 공동 컴포넌트 생성

  • 공통적으로 사용하는 폼 요소를 컴포넌트로 분리하여 유지보수성과 개발 생산성을 향상

• 아코디언 컴포넌트의 초기 렌더링 최적화

  • 페이지 이동 시 아코디언 아이템이 닫혔다가 열리는 과정에서 발생하는 깜빡임 현상을 해결

    → 뷰포트 내 노출 이벤트가 잘못 트리거되는 문제를 방지해 성능 및 사용자 경험을 동시에 개선

• UI 디자인 개편에 따른 전반적인 스타일링 수정 및 컴포넌트 리팩토링

• Day.js를 활용한 사주 운세 캘린더 컴포넌트 개발

• 유저의 사주 데이터에 기반한 동적 그래픽 컴포넌트 설계 및 구현

• Recoil로 props drilling을 방지하고 유저의 사주 데이터를 전역 상태로 효율적으로 관리

과금형 인터랙티브 콘텐츠 개발 및 유지보수 (Angular)

• Web animation API를 통해 애니메이션 동적으로 제어

• three.js를 사용한 애니메이션의 3D 에셋 최적화 작업

• Scala를 사용한 인터랙티브 콘텐츠의 서버 로직 작성

백오피스 유지보수(Angular + NodeJS)

• 매월 직원들의 피드백을 반영하여 백오피스 기능을 지속적으로 개선 및 유지보수

• Node.js와 Sequelize를 활용하여 MySQL DB 스키마 연결 및 API 로직 최적화

프로모션 페이지 개발 및 유지보수 (Vue, React)

• 글로벌 웹툰 플랫폼 'Manta'와의 제휴용 인터랙티브 콘텐츠 개발(React)

• 행운 단어 뽑기 이벤트 (2024. 1. 15. ~ 1. 21.): BFS 알고리즘 적용, 키워드 정오답 처리 기능 구현

  • 2023년~2024년 상반기 가장 높은 이벤트 페이지 인입 기록(평균 view 12,548), 광고 수익 목표 132.3% 초과 달성

• 프로모션 페이지 템플릿화 및 기존 템플릿 개선