진유림 (Yurim Jalynne Jin)
Product oriented front-end engineer
프론트엔드 개발자 진유림입니다.
작은 목적조직에서 1인의 프론트엔드 개발자로서 민첩하게 움직인 경험 (2020.05 토스보험파트너),
중간 규모 조직에서 6인의 프론트엔드 그룹 리드로서 하나의 도메인을 일궈나간 경험(2022.04 토스모바일),
큰 규모 조직에서 여러 B2B 도메인이 하나의 앱처럼 유기적으로 움직일 수 있는 플랫폼을 다진 경험(2024.05 토스비즈니스)이 있습니다.
팀으로서 일궈내는 성취와, 팀원으로서 얻는 행복에 관심이 있습니다.
이를 위해 코칭을 공부하고, 1:1미팅 포맷을 지속적으로 개선해 나가며, 사내 프론트엔드 개발자들의 성장을 지원하는 다양한 프로그램을 고안합니다(사내/사외 기술토론 커뮤니티 - 프론트엔드다이빙클럽, 역량 지표, 코드스멜 위키 오픈소스).
어떻게든 즐겁게 일하기 위해 머리를 굴립니다.
현재 비바리퍼블리카(토스)에서 Frontend agile lead로 일하고 있습니다.
- jayjinjay@gmail.com
- https://github.com/milooy
- https://twitter.com/jayjinjay
경력
- Frontend Lead2023.07 - Present
- Frontend Engineer2020.03 - 2023-06
- Frontend Engineer2018.02 - 2020-02
- Software Engineer and UI Designer2015.06 - 2017-12
- (Internship) Frontend Engineer2015.01 - 2015-06
- (Internship) UI Designer2014.01 - 2014-02
프로젝트
Viva Republica (Toss)
다양한 팀과의 협업을 통한 기술적 의사결정
- 회원 시스템 전수조사: 다양한 회원 시스템 코드를 전수조사해 규칙을 세워 여러 계열사에서도 쉽게 적용할 수 있도록 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 환경)
주요 도전 과제
1. 회원 체계 대통합 (OAuth)- Cookie, JWT 등 각자의 스펙으로 각자의 도메인에서 운영하던 회원 체계를 OAuth로 단일화 (하나의 사이트로 리디렉션해 가입/로그인하는 방식) 및 여러 도메인 개발자와의 협업
- 한 번의 가입으로 토스 내의 여러 B2B 서비스를 이용할 수 있는 마이그레이션 플로우 설계 및 개발
- 서비스를 넘나드는 QA 프로세스 구축 (조건에 맞는 회원정보 DB화, 템플릿 수립)
2. 로그 표준 논의 주도
- 유저가 데스크탑 서비스간에 이동시 식별ID 유실 문제를 인지하고 범-서비스간 보존되는 Browser ID 표준을 만들기 위해 타 도메인의 F-lead, Data Analyst, DataOps Manager와 회의를 진행하여 행동 계획 수립 및 공식 채널 생성
3. 에러 민감도를 높여 서비스 안정화 및 디버깅이 용이한 환경 구축
- 통합 서비스를 개발하니 이 서비스가 장애가 난다면 관련된 모든 팀에게 영향을 미치는 강결합이 생김
- 전반적인 피드백 채널과 최대한 빠르게 확인해야 하는 에러 제보 채널을 분리해 후자 채널은 모든 메세지가 이슈트래커 티켓으로 만들어지고, 주요 팀원들을 자동으로 멘션하도록 셋업
- 고객-CX-개발자 핑퐁을 줄이기 위해 디버깅에 필요한 정보를 고객에게 미리 받아 CX가 개발자에게 전달하는 솔루션 개발 및 프로세스 수립
서비스 소개
- 주소: https://tossmobile.co.kr/
- 기간: 2022.04 ~ 2024.02
- 비즈니스 목표: 인수한 알뜰폰 통신사를 통해 토스모바일 사업을 혁신적으로 이끌어내는 것
- 사용 기술: React(Next.js를 사용한 SSR 환경), 모바일 웹앱
서비스 소개
- 주소: https://blog.toss.im/article/toss-insurance-partner
- 기간: 2020.02 ~ 2022.03
- 비즈니스 목표: 온라인화가 상대적으로 부족한 보험 업계를 스크래핑, 마이데이터를 활용해 혁신
- 사용 기술: React(Next.js를 사용한 SSR 환경), 모바일 웹앱
Zepl
- 실시간 협업 및 데이터 시각화 기능이 포함된 데이터 사이언티스트용 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
The Pinkfong Company
핑크퐁 스토어 e-commerce 사이트 UI 디자인 설계 & 개발 및 Django를 이용한 백엔드 서비스 구축
- Angular를 이용한 SPA 기반 재고 관리 시스템 제작 및 React & Redux로 재고 관리 시스템 개편 - 재고 관리 시스템의 모바일 지원을 위한 Progressive Web Apps 적용 및 푸시 알람 구현
핑크퐁 스토어 사용자 및 구매 데이터 분석을 위한 Google Analytics Enhanced Ecommerce (관련 블로그 글) (관련 발표)
Lezhin Entertainment
웹툰 작가 및 PD 용 관리자 웹 애플리케이션(Admin)을 Angular.js로 SPA 개발
레진코믹스 홈페이지에 Google Analytics 연동 및 UI 개편을 위한 데이터 제공
레진코믹스 홈페이지의 UI 기능 테스트를 위한 Phantom.js 헤드리스 테스팅 구현
외부 활동
2024
Link
만든 배경
- 50개가 넘는 생산성 앱을 써본 후, 나에게 맞는 앱을 찾기 어려워 직접 만들었습니다. 현재 저는 메인 투두 앱으로 사용하고 있고, 가입자 수는 19명입니다 (회사 내 지인들에게만 공개. 추후 Billing 시스템을 갖춘 후 외부 공개 예정)
컨셉
Goal oriented: 카테고리 대신 목표를 기준으로 태스크를 관리해요. 이로서 내가 어떤 목표를 달성하기 위해 이 일을 하고 있는지 상기할 수 있어요.
High layer view: 한 해 나의 시도와 성취를 한 눈에 볼 수 있는 'Achieved' 뷰가 있습니다.
Simplicity: Goals, Focus, Today 3개의 칼럼으로 전체 할일을 관리하는 프레임입니다. 조만간 할 일은 Focus로, 오늘 당장 할 일은 Today로 마킹합니다.
2023
2021
~2020
- 컨퍼런스 랜딩 사이트 제작 (https://milooy.github.io/DSTS2019/)
- 컨퍼런스 스폰서 목록을 표시하는 ‘전자 디스플레이’ 섹션
- 애니메이션을 통해 스포츠 선수 소개 컨셉의 세션 상세 정보 노출
- 대표 오거나이저로서 컨퍼런스 전체 구성 및 진행
Education
NHN NEXT (1기) - 컴퓨터 공학 2013.03 - 2016.02
Language
-
Korean(Native)
-
English(Professional)
Zepl 회사에서 다국적 팀원들과 2년간 영어로 일한 경험이 있습니다.Facebook Developer Circle활동을 하며 다국적 매니저들과 영어로 커뮤니티를 매니징 한 경험이 있습니다