진유림 (Yurim Jalynne Jin)

다양한 팀과의 협업을 통한 기술적 의사결정

• 회원 시스템 전수조사: 다양한 회원 시스템 코드를 전수조사해 규칙을 세워 여러 계열사에서도 쉽게 적용할 수 있도록 SDK 형태로 배포
• 주요 팀 프론트엔드 개발자들과의 협업 조율: 여러 팀(예: 토스 광고, 토스 쇼핑팀)과 협업하여 코드 리뷰 및 기술적 방향성 조율, 각 팀의 요구사항을 반영해 통합된 기술 솔루션 제시
• 글로벌 네비게이션 설계: 모든 서비스에서 동일한 글로벌 네비게이션을 추가 배포 없이 제공할 수 있도록 Module Federation 방식으로 설계.

데스크탑 플랫폼의 기술적 문제 해결 주도

• 데스크탑 플랫폼 통합: 기존 B2B 데스크탑 서비스를 통합하는 과정에서 각 도메인의 파편화된 환경을 개선. 이를 위해 F-lead, FE 플랫폼 엔지니어, FE 헤드와 함께 'Desktop Platform' 회의를 주도하고 통합 방향성 제시
• Browser ID 표준화: 유저가 데스크탑 서비스 간 이동 시 발생하는 식별 ID 유실 문제를 해결하기 위해, 범용적으로 사용할 수 있는 Browser ID 표준을 제안. 이 표준을 수립하기 위해 데이터 분석가 및 DevOps 팀과 협력하여 공식 채널 생성 및 실행 계획 수립

팀과 조직을 아우르는 피드백 수집 및 반영

• 도메인 기대사항 반영: 도메인 리더들과 정기적으로 소통하며 협업 피드백을 수집. 이후 협업 방식과 기술 전략을 조정하여 다음 학기 목표에 맞춰 개인의 목표와 프론트엔드 팀의 목표를 조율
• 팀 코칭 및 성장 지원: 프론트엔드 직군뿐만 아니라 디자이너, iOS 개발자, 컬쳐팀과 함께 '팀 코칭' 스터디를 진행. 각 직군의 성장과 협업을 촉진하기 위한 실질적인 전략을 제안하고 실행

캐주얼한 분위기의 기술적 성장 유도

• 문제 해결을 위한 집단지성 도구 설계: 코드스멜 아카이브 슬랙 채널, 익명 커피챗 봇, 진행자 로테이션을 통한 엔지니어링 데이 등 구성원들이 쉽고 재미있게 참여할 수 있는 도구 설계

실사례 기반 커리어 코칭

• 성과와 영향력의 문서화: Brag Document 템플릿을 통해 개인의 성과를 기록하고, 1:1 미팅에서 실사례 기반의 코칭 제공
• 영향력 증진 워크샵: 스킬트리 템플릿을 1:1 미팅에서 함께 작성하고, 위클리 미팅에서 사례를 팀과 함께 찾아보며 기술적 영향력을 키우는 목표 설정

조직 개편 중 심리적 안정감 및 프로덕트 안정성 유지

• 소통과 라포 형성: 조직 개편 시 1:1 및 팀 회의를 통해 구성원의 궁금증을 해소하고, 심리적 안정감을 유지할 수 있는 환경 조성.
• 유지보수 체계 지원: 개발자 인원 축소 후에도 효율적 유지보수가 가능하도록 Zero-Ops 프로젝트 지원 및 주기적 미팅 수립.

시니어 개발자 채용을 위한 커뮤니티 기반 팬덤 형성

• 프론트 챕터에 시니어 지원자 부족 해결: 시니어 지원자가 부족하다는 문제를 해결하기 위해 대외 커뮤니티를 기획하여 운영.
• 오피스 방문 프로그램: 격월로 50명의 중/시니어 프론트엔드 개발자들이 오피스를 방문해 개발 문화를 체험하고 친밀감을 형성하도록 유도.
• 높은 전환율 달성: 매 모임 중 대략 참여자 30명 중 15명이 채용팀과의 커피챗을 신청하며 높은 전환율을 기록.

아티클과 영상 콘텐츠로 프론트 챕터의 기술 홍보 및 채용 인입 증대

• 기술 홍보 아티클 및 영상 출연: '프론트엔드 챕터 리드'로서 토스테크 아티클 인터뷰와 '모닥불' 1화 영상에 출연(조회수 3.7천)하여, 저비용으로 채용 브랜딩 강화.
• 지속적인 채용 인입 생성: 슬래시 발표영상 2개를 통해 꾸준히 채용 리드 생성. 지원자들이 개인 이메일 및 채용 인터뷰에서 영상을 언급하며, 채용 인입에 기여.

직군을 넘나드는 퍼블릭 스피킹 활동

• 전 직군이 모이는 사내 행사 MC: 2024년 1학기 코어 얼라인먼트 위크에 MC로 참여해 개발자 베이스의 사회를 진행, 다양한 직군과의 소통을 이끌어냄.

QA 자동화를 통한 금액 오노출 방지 및 테스트 비용 절감

• 자동화 스크린샷 도입을 통한 수기테스트 효율화: - 스크린샷 자동 전송: 주요 페이지의 스크린샷을 슬랙봇으로 전송해 테스트 리소스를 60분에서 5분으로 감소.
• 금액 검사 자동화: 가격 오류를 방지하기 위해 자동화 테스트를 도입해 가격이 잘못된 코드는 배포가 불가하도록 설정
• QA팀과 협업: QA팀과 협력하여 코드 오너십을 공유하며, 자동화 스크린샷 및 End-to-end 테스트 도입

사일로, 전사 OKR인 VoC 감소를 위해 QA, CX DRI를 프론트팀으로 이관

• VoC 감소 목표 달성: 플랫폼팀의 안정성 강화를 위해 CX, QA의 DRI를 프론트팀으로 이관해 VoC 감소 목표 달성. "CX, QA를 온전히 맡아주고 있어 든든하다"는 피드백을 받음.
• 정규화된 데이터 기반 개선: CS 데이터를 카테고리화하고, VoC 자동 분류 시스템 구축. 데이터를 시각화하여 개선 효과를 정량적으로 측정.

테스트를 하기 위한 인간 의존성 제거(서버개발자 의존, 프론트개발자 의존)

• 서버개발자 의존 없는 로컬테스트 환경 구축: 서버 개발자 도움 없이 프론트에서 다양한 사용자 케이스를 테스트할 수 있는 환경을 MSW(Mock Service Worker)를 활용해 구축.
• 프론트개발자 의존 없는 알파테스트 환경 구축: PO나 PD가 개발자 도움 없이도 직접 다양한 케이스를 확인할 수 있는 Admin 구성. 서비스 완성도와 테스트 시간 개선.

서비스 소개

• 주소: https://business.toss.im/
• 기간: 2024.02 ~ 현재
• 비즈니스 목표: 토스 내 여러 B2B 도메인(광고, 쇼핑, 페이 등)이 하나의 앱처럼 유기적으로 움직일 수 있는 플랫폼 생성
• 사용 기술: React(CSR 환경)

주요 도전 과제

• Cookie, JWT 등 각자의 스펙으로 각자의 도메인에서 운영하던 회원 체계를 OAuth로 단일화 (하나의 사이트로 리디렉션해 가입/로그인하는 방식) 및 여러 도메인 개발자와의 협업
• 한 번의 가입으로 토스 내의 여러 B2B 서비스를 이용할 수 있는 마이그레이션 플로우 설계 및 개발
• 서비스를 넘나드는 QA 프로세스 구축 (조건에 맞는 회원정보 DB화, 템플릿 수립)

• 유저가 데스크탑 서비스간에 이동시 식별ID 유실 문제를 인지하고 범-서비스간 보존되는 Browser ID 표준을 만들기 위해 타 도메인의 F-lead, Data Analyst, DataOps Manager와 회의를 진행하여 행동 계획 수립 및 공식 채널 생성

• 통합 서비스를 개발하니 이 서비스가 장애가 난다면 관련된 모든 팀에게 영향을 미치는 강결합이 생김
• 전반적인 피드백 채널과 최대한 빠르게 확인해야 하는 에러 제보 채널을 분리해 후자 채널은 모든 메세지가 이슈트래커 티켓으로 만들어지고, 주요 팀원들을 자동으로 멘션하도록 셋업
• 고객-CX-개발자 핑퐁을 줄이기 위해 디버깅에 필요한 정보를 고객에게 미리 받아 CX가 개발자에게 전달하는 솔루션 개발 및 프로세스 수립

서비스 소개

• 주소: https://tossmobile.co.kr/
• 기간: 2022.04 ~ 2024.02
• 비즈니스 목표: 인수한 알뜰폰 통신사를 통해 토스모바일 사업을 혁신적으로 이끌어내는 것
• 사용 기술: React(Next.js를 사용한 SSR 환경), 모바일 웹앱

주요 도전 과제

• 요금제 관리가 누적되면서 코드 복잡도가 증가, 금액 장애 빈도(월 7건) 및 운영/손실 비용이 급증.
• 일례로 많은 사람들이 해지해 6명만 쓰고있는 요금제라도, 이를 사용자에게 노출하기 위해 여러 분기 코드가 추가된 상황.

• UI 분기 정규화 및 어드민 생성: 요금제 페이지 정규화 및 Admin 통합 관리로 복잡성 감소.
• Unit test 커버리지 상승: 주요 로직 테스트 코드 작성으로 오류 발생 최소화.
• 금액 정합성 End-to-end 테스트: 슬랙봇을 활용해 금액 정합성 검증 자동화.
• 자동화 스크린샷 도입: 정성적 QA 시간을 1/10로 단축하는 스크린샷 자동화 구축.

• 금액 장애 발생 건수 0건 달성.
• 기존 복잡한 코드의 정규화를 통해 기능 추가에 소요되는 시간 및 비용을 1/10으로 절감.
• 반복적인 QA 업무를 자동화하여 리소스를 최적화하고 운영 효율성을 극대화함.

서비스 소개

• 주소: https://blog.toss.im/article/toss-insurance-partner
• 기간: 2020.02 ~ 2022.03
• 비즈니스 목표: 온라인화가 상대적으로 부족한 보험 업계를 스크래핑, 마이데이터를 활용해 혁신
• 사용 기술: React(Next.js를 사용한 SSR 환경), 모바일 웹앱

• 실시간 협업 및 데이터 시각화 기능이 포함된 데이터 사이언티스트용 React 웹 애플리케이션 개발
• 디자이너와 함께 정립한 디자인 가이드라인으로 프런트엔드 UI 컴포넌트 설계 및 구축. UI 컴포넌트 문서화를 위한 Storybook 제작

Overall app behavior

Carousel, Dropdown with Skeleton loading indicator

Modal with searchable dropdown components

Filterable/Sortable/Searchable Table with Pin feature

Item box and Overlay with micro interactions

Collapsible with Real-time Graphs and Table

Outline sidebar with search feature

Code snippets

• 데이터 기반 UI, UX 설계를 위한 사용자 데이터 분석 시스템 구축 - Google Analytics, Pendo - 테스트 자동화를 위한 단위 테스트, E2E 테스트 케이스 작성, Jest, Enzyme, Cypress, React Testing Library

핑크퐁 스토어 e-commerce 사이트 UI 디자인 설계 & 개발 및 Django를 이용한 백엔드 서비스 구축

• Angular를 이용한 SPA 기반 재고 관리 시스템 제작 및 React & Redux로 재고 관리 시스템 개편 - 재고 관리 시스템의 모바일 지원을 위한 Progressive Web Apps 적용 및 푸시 알람 구현

핑크퐁 스토어 사용자 및 구매 데이터 분석을 위한 Google Analytics Enhanced Ecommerce (관련 블로그 글) (관련 발표)

웹툰 작가 및 PD 용 관리자 웹 애플리케이션(Admin)을 Angular.js로 SPA 개발

레진코믹스 홈페이지에 Google Analytics 연동 및 UI 개편을 위한 데이터 제공

레진코믹스 홈페이지의 UI 기능 테스트를 위한 Phantom.js 헤드리스 테스팅 구현

Link

• 앱: https://todoy-murex.vercel.app/
• 사전신청: https://forms.gle/KJFZWv9dFtUfAa6p8

만든 배경

• 50개가 넘는 생산성 앱을 써본 후, 나에게 맞는 앱을 찾기 어려워 직접 만들었습니다. 현재 저는 메인 투두 앱으로 사용하고 있고, 가입자 수는 19명입니다 (회사 내 지인들에게만 공개. 추후 Billing 시스템을 갖춘 후 외부 공개 예정)

컨셉

Goal oriented: 카테고리 대신 목표를 기준으로 태스크를 관리해요. 이로서 내가 어떤 목표를 달성하기 위해 이 일을 하고 있는지 상기할 수 있어요.

High layer view: 한 해 나의 시도와 성취를 한 눈에 볼 수 있는 'Achieved' 뷰가 있습니다.

Simplicity: Goals, Focus, Today 3개의 칼럼으로 전체 할일을 관리하는 프레임입니다. 조만간 할 일은 Focus로, 오늘 당장 할 일은 Today로 마킹합니다.

저자 인터뷰 영상

도서 소개

1. 컨퍼런스 랜딩 사이트 제작 (https://milooy.github.io/DSTS2019/)

• 컨퍼런스 스폰서 목록을 표시하는 ‘전자 디스플레이’ 섹션
• 애니메이션을 통해 스포츠 선수 소개 컨셉의 세션 상세 정보 노출

2. 대표 오거나이저로서 컨퍼런스 전체 구성 및 진행