테크톡톡 2026 | Frontend Developer - 토스증권 AI 개발로 배운 실전 인터랙션 팁

컨퍼런스

테크톡톡 2026 | Frontend Developer - 토스증권 AI 개발로 배운 실전 인터랙션 팁

토스증권 Tech Talk Talk 토스 · YouTube

AI 핵심 요약

토스증권 AI 시그널을 순수 웹뷰로 개발하며 네이티브 앱에 가까운 인터랙션을 구현하는 과정에서 성능과 스크롤 제어, 인트로 애니메이션을 다뤘습니다. 애니메이션에는 Web Animations API를 우선 지원하는 Motion을 선택했고, 마스크 위치를 바꾸던 펄스 효과를 고정된 화살표 틀 아래에서 그라디언트를 이동시키는 방식으로 바꿔 리페인트와 발열·렉 문제를 줄였습니다. 대각 스크롤을 막고 스냅 등 요구사항을 제어하기 위해 Three.js의 카메라 컨트롤을 커스텀했으며, 인트로에는 투명 배경 영상과 Cache API를 활용했습니다. 브라우저 기본 기능만으로 요구사항을 충족하기 어렵다면 직접 제어하는 방법도 고려하고, 애니메이션 속성 선택과 리소스 캐싱으로 웹 UX를 개선할 수 있다는 점을 공유했습니다.

transform과 opacity처럼 컴포지터 스레드에서 처리할 수 있는 속성을 우선 사용하면 메인 스레드의 부담을 줄일 수 있습니다.
스크롤 방향 제한, 스냅, 핀치 줌처럼 브라우저 기본 동작만으로 제어하기 어려운 요구사항은 직접 구현하는 방안도 검토할 수 있습니다.
투명 배경 영상 두 개를 겹치면 웹에서도 레이어가 분리된 인트로 애니메이션을 구성할 수 있습니다.
Media DevTools로 영상의 재생·정지와 리소스 할당 상태를 확인하면 미디어 동작을 시각적으로 디버깅할 수 있습니다.

소개

토스증권 AITribe 조직의 미션은 'AI 기술을 활용해 고객에게 혁신적인 금융 서비스를 제공하는 것'이에요. 순수 웹뷰 기반의 '토스증권 AI 시그널'을 개발하며, 네이티브 앱 수준의 유려한 UX를 만들기 위해 분투했던 세 가지 에피소드를 공유할게요. 이승현 | 토스증권 Frontend Developer 토스증권 프론트엔드 챕터에 합류하고 싶다면 👉 https://toss.im/career/jobs?search=프론트엔드집중채용

비슷한 학습 자료

컨퍼런스 당근 밋업

개발자 없이 AI로 프로덕트 a-z 완성하기

컨퍼런스 당근 밋업

비개발자도 AI로 실무 자동화를 만들 수 있을까? 당근 운영팀의 실제 사례로 바이브 코딩, 리뷰 자동화, LLM 기반 운영 전환까지 A to Z를 공유합니다. # 주요 내용 - 바이브 코딩 도전기: 검색어 이상치 탐지, 인터랙션 프로토타입, 실무 적용 팁과 한계 - 리뷰 자동화 시스템: 슬랙 + 재피어 + GPT로 요약, 라벨링, 인사이트 리포팅까지 구현 - LLM 운영 자동화 전환: “레귤러 마커(Regex Maker)”에서 완전 자동화 판단 시스템으로의 진화 - 프롬프트 전략: 역할 부여, 맥락 제공, 네거티브 샘플, 제약조건, 반복 개선 - 커리어 인사이트: “중간은 필요 없다” 시대의 생존 전략과 실전 사례 # 이런 분들께 추천해요! - 개발 리소스 없이도 빠르게 프로토타입과 자동화를 시도해보고 싶은 실무자 - 분석, 분류 등 반복 업무를 AI로 대체하고 싶은 운영 담당자 - 프롬프트 설계와 에이전트 활용의 실전 감을 익히고 싶은 분 #바이브코딩 #LLM #업무자동화...

AI 코딩 AI에이전트 개발

컨퍼런스 토스증권 Tech Talk Talk

테크톡톡 2026 | ML Engineer - AI에게 투자정보를 말하게 하기까지

컨퍼런스 토스증권 Tech Talk Talk

토스증권 AI Tribe는 복잡한 금융·증권 정보를 쉽게 이해할 수 있도록, 개인에게 필요한 투자정보를 전달하는 AI 기반 서비스를 만들고 있어요. 무엇을 말할지 고르고, 어떻게 생성할지 통제하고, 평가 가능한 구조로 만들기까지. AI가 투자정보를 말할 수 있게 되기까지의 개발 경험을 공유할게요. 정현규 | 토스증권 ML Engineer 토스증권 ML Engineer로 합류하고 싶다면 👉 https://toss.im/_m/LJjCHeCD

딥러닝 · 머신러닝

컨퍼런스 토스증권 Tech Talk Talk

테크톡톡 2026 | ML Engineer - 토스증권 추천과 검색은 어떻게 진화하고 있을까?

컨퍼런스 토스증권 Tech Talk Talk

토스증권 AI Data Platform Team은 모든 AI 서비스가 공통으로 활용할 수 있는 탄탄한 데이터 생태계를 만들고 있어요. 토스증권의 추천과 검색이 어떤 방향으로 진화하고 있는지, 실시간 개인화부터 RAG와 GraphRAG까지 세 가지 이야기를 공유할게요. 황호익 | 토스증권 ML Engineer 토스증권 ML Engineer로 합류하고 싶다면 👉 https://toss.im/_m/LJjCHeCD

AI에이전트 개발 딥러닝 · 머신러닝

컨퍼런스 토스증권 Tech Talk Talk

테크톡톡 2026 | ML Engineer - LLM 서빙, 띄우는 것과 잘 띄우는 것 사이

컨퍼런스 토스증권 Tech Talk Talk

토스증권 ML Platform Team은 누구나 모델 코드만으로 쉽게 서빙하고, 안정적으로 운영할 수 있는 환경을 만들고 있어요. LLM 서빙 플랫폼을 직접 만들고 운영하며, 모델을 띄우는 것과 잘 띄우는 것 사이의 간극을 메우기 위해 분투했던 세 가지 에피소드를 공유할게요. 김민규 | 토스증권 ML Engineer 토스증권 ML Engineer로 합류하고 싶다면 👉 https://toss.im/_m/LJjCHeCD

데브옵스 · 인프라 딥러닝 · 머신러닝

컨퍼런스 토스증권 Tech Talk Talk

테크톡톡 2026 | Frontend Developer - 우당탕탕 디자인 시스템

컨퍼런스 토스증권 Tech Talk Talk

토스증권 Design System Team의 미션은 '제품 메이커들이 높은 퀄리티의 UX를 빠르게 구현할 수 있는 환경을 만드는 것'이에요. 디자인 시스템을 운영하며, ‘우리 팀의 현재 상황’에 최적화된 방식으로 문제를 풀어낸 세 가지 에피소드를 공유할게요. 박건영 | 토스증권 Frontend UX Engineer 토스증권 프론트엔드 챕터에 합류하고 싶다면 👉 https://toss.im/career/jobs?search=프론트엔드집중채용

프론트엔드 UI/UX

컨퍼런스 토스증권 Tech Talk Talk

테크톡톡 2026 | Frontend Developer - 토스증권 FE 인프라 전반

컨퍼런스 토스증권 Tech Talk Talk

토스증권 Client Platform Team은 수많은 유저에게 정적 자원을 신속하고 안정적으로 전달하기 위해 고도화된 인프라를 구축해 배포하고 있어요. CloudFront + Lambda@Edge 기반의 배포부터 마이크로 프론트엔드(MFA), 그리고 AI를 활용한 생산성 혁신까지! 토스증권 FE 인프라의 핵심 전략을 공개해요. 장재영 | 토스증권 Client Platform Team Leader 토스증권 프론트엔드 챕터에 합류하고 싶다면 👉 https://toss.im/career/jobs?search=프론트엔드집중채용

프론트엔드 데브옵스 · 인프라