토스 윤문

Author: yurim

src/components/Collapsible.tsx

@@ -30,11 +30,11 @@ const Collapsible = ({
           />
         )}
       </Title>
-        <Contents opened={opened}>
-          <Divider />
-          {children}
-        </Contents>
-      
+      <Contents opened={opened}>
+        <Divider />
+        {children}
+        <div style={{ marginTop: 20 }} />
+      </Contents>
     </Wrapper>
   )
 }
@@ -58,17 +58,24 @@ const Wrapper = styled.div`
   &:last-child {
     margin-bottom: 0;
   }
+  ul {
+    margin: 0 0 0 1rem;
+
+    li {
+      margin-bottom: 0;
+    }
+  }
 `
 
 const Divider = styled.div`
   border-top: 2px solid #d7d7d796;
   margin: 0.5rem 0;
 `
 
-const Contents = styled.div<{opened: boolean}>`
+const Contents = styled.div<{ opened: boolean }>`
   color: #6f7172;
   overflow: auto;
-  max-height: ${props => props.opened ? '100vh' : 0};
+  max-height: ${props => (props.opened ? "100vh" : 0)};
   transition: max-height 0.2s;
 `
 

src/components/SubHeading.tsx

@@ -8,7 +8,7 @@ const SubHeading = styled.h3`
 
 export const SubHeading2 = styled.h4`
   font-size: 1rem;
-  margin: 1rem 0 0.3rem;
+  margin: 1.5rem 0 0.3rem;
 `
 
 export default SubHeading

src/pages/resume-content/flead.mdx

@@ -2,28 +2,20 @@ import { SubHeading2 } from "../../components/SubHeading"
 
 <SubHeading2>캐주얼한 분위기의 기술적 성장 유도</SubHeading2>
 
-- <u>문제를 흥미롭게 해결할 수 있는 집단지성 장치 설계</u>: 소그룹 위클리 시간
-  뿐 아니라 평소에도 함께 문제를 해결하고 본인의 생각을 논리적인 언어로
-  정리해내는 장치 설계 → 코드스멜을 아카이브하는 비공개 슬랙 채널, 혼잣말처럼
-  부담 없이 개발 고민을 올릴 수 있는 채널, 익명 커피챗 봇, 진행자를 로테이션하는
-  엔지니어링데이
+- <u>문제 해결을 위한 집단지성 도구 설계</u>: 코드스멜 아카이브 슬랙 채널, 익명
+  커피챗 봇, 진행자 로테이션을 통한 엔지니어링 데이 등 구성원들이 쉽고 재미있게
+  참여할 수 있는 도구 설계
 
 <SubHeading2>실사례 기반 커리어 코칭</SubHeading2>
 
-- <u>개인의 성과와 영향력 문서화</u>: Brag document(자랑 문서)라는 템플릿을
-  만들어 개인의 성과와 영향력을 문서화하여 성장에 대한 동기를 부여하고, 1:1을
-  통해 추적 및 실사례 기반 코칭
-- <u>영향력 증진 워크샵</u>: 프론트 챕터 공식 스킬트리 템플릿을 1:1로 작성하고,
-  위클리 팀 미팅에서 스킬에 대한 사례를 함께 채워나가며 기술적 영향력을 키워나갈
-  영감과 목표 제시
+- <u>성과와 영향력의 문서화</u>: Brag Document 템플릿을 통해 개인의 성과를
+  기록하고, 1:1 미팅에서 실사례 기반의 코칭 제공
+- <u>영향력 증진 워크샵</u>: 스킬트리 템플릿을 1:1 미팅에서 함께 작성하고,
+  위클리 미팅에서 사례를 팀과 함께 찾아보며 기술적 영향력을 키우는 목표 설정
 
-<SubHeading2>조직 개편 중에도 심리적 안정감, 프로덕트 안정성 유지</SubHeading2>
+<SubHeading2>조직 개편 중 심리적 안정감 및 프로덕트 안정성 유지</SubHeading2>
 
-- <u>소통과 라포 형성</u>: 조직개편을 할 때 1:1뿐 아니라 팀 회의를 통해 궁금한
-  점을 해소하고 새로운 시작을 할 수 있도록 자리 마련. 라포를 쌓은 구성원과 함께
-  1년 후 나의 모습을 그려보고, 실제로 1년 뒤 이 대화를 나눌 수 있도록 캘린더
-  초대. 회고와 계획을 통해 변화하는 조직 내에서도 구성원이 심리적으로 안정감을
-  유지하며 다음 단계로 성장할 수 있도록 지원.
-- <u>유지보수 지원</u>: 조직개편을 통해 개발자 인원이 6인에서 1인으로 축소된
-  상황에서도 효율적인 유지보수가 가능하도록 체계 구축(Zero-Ops Project) 지원 및
-  기존 구성원들과 주기적인 미팅 수립
+- <u>소통과 라포 형성</u>: 조직 개편 시 1:1 및 팀 회의를 통해 구성원의 궁금증을
+  해소하고, 심리적 안정감을 유지할 수 있는 환경 조성.
+- <u>유지보수 체계 지원</u>: 개발자 인원 축소 후에도 효율적 유지보수가
+  가능하도록 Zero-Ops 프로젝트 지원 및 주기적 미팅 수립.

src/pages/resume-content/도메인리드.mdx

@@ -1,36 +1,30 @@
 import { SubHeading2 } from "../../components/SubHeading"
 
-<SubHeading2>범-트라이브, 범-계열사 확장을 고려한 기술적 의사결정</SubHeading2>
+<SubHeading2>다양한 팀과의 협업을 통한 기술적 의사결정</SubHeading2>
 
-- <u>회원체계 코드 전수조사</u>: 토스 내의 다양한 회원체계 코드를 전수조사하고,
-  새로운 코드를 쉽게 적용할 수 있도록 1차 PR 생성. 추후 타 계열사도 빠르게
-  적용할 수 있도록 SDK 형태로 제공.
-- <u>애즈트라이브 및 쇼핑트라이브 협업</u>: 애즈트라이브, 쇼핑트라이브의 각
-  개발자들과 미팅을 통해 시나리오와 코드를 설명하고 협업을 이끌어냄
-- <u>글로벌 네비게이션 기술 설계</u>: 각 서비스가 고유의 배포주기를 가지면서도,
-  추가 배포 없이 동일한 글로벌 네비게이션을 보여줄 수 있도록 기술적 설계(Module
-  federation)
-- <u>타 사일로 기술 자문</u>: 트라이브 내의 타 사일로(어드민 플랫폼)의 향후
-  계획에 기술적 자문 제공
+- <u>회원 시스템 전수조사</u>: 다양한 회원 시스템 코드를 전수조사해 규칙을 세워
+  여러 계열사에서도 쉽게 적용할 수 있도록 SDK 형태로 배포
+- <u>주요 팀 프론트엔드 개발자들과의 협업 조율</u>: 여러 팀(예: 토스 광고, 토스
+  쇼핑팀)과 협업하여 코드 리뷰 및 기술적 방향성 조율, 각 팀의 요구사항을 반영해
+  통합된 기술 솔루션 제시
+- <u>글로벌 네비게이션 설계</u>: 모든 서비스에서 동일한 글로벌 네비게이션을 추가
+  배포 없이 제공할 수 있도록 Module Federation 방식으로 설계.
 
-<SubHeading2>
-  프론트 챕터에 신설된 '데스크탑 트랙'의 기술적 문제 발굴 및 개선 논의 주도
-</SubHeading2>
+<SubHeading2>데스크탑 플랫폼의 기술적 문제 해결 주도</SubHeading2>
 
-- <u>데스크탑 플랫폼 논의 주도</u>: B2B 데스크탑 서비스를 원앱으로 묶는
-  '토스비즈니스' 프로젝트를 개발하며 기존에 파편화된 환경을 인지하고 각 도메인의
-  F-lead, FE 플랫폼 엔지니어, FE 헤드 등 이해관계자와 총 3번의 회의를 통해
-  'Desktop platform' 논의 주도
-- <u>Browser ID 표준 논의 주도</u>: 유저가 데스크탑 서비스간에 이동시 식별ID
-  유실 문제를 인지하고 범-서비스간 보존되는 Browser ID 표준을 만들기 위해 타
-  도메인의 F-lead, Data Analyst, DataOps Manager와 회의를 진행하여 행동 계획
-  수립 및 공식 채널 생성
+- <u>데스크탑 플랫폼 통합</u>: 기존 B2B 데스크탑 서비스를 통합하는 과정에서 각
+  도메인의 파편화된 환경을 개선. 이를 위해 F-lead, FE 플랫폼 엔지니어, FE 헤드와
+  함께 'Desktop Platform' 회의를 주도하고 통합 방향성 제시
+- <u>Browser ID 표준화</u>: 유저가 데스크탑 서비스 간 이동 시 발생하는 식별 ID
+  유실 문제를 해결하기 위해, 범용적으로 사용할 수 있는 Browser ID 표준을 제안.
+  이 표준을 수립하기 위해 데이터 분석가 및 DevOps 팀과 협력하여 공식 채널 생성
+  및 실행 계획 수립
 
-<SubHeading2>사일로, 직군을 넘은 주체적 피드백 수집 및 반영</SubHeading2>
+<SubHeading2>팀과 조직을 아우르는 피드백 수집 및 반영</SubHeading2>
 
-- <u>도메인 단위의 기대사항 적극적 수집 및 반영</u>: 도메인 리드와 직접 소통하여
-  1학기 동안의 협업 피드백을 받고, 2학기에 기대하는 점을 파악하여 회사와 나의
-  행동 방식을 조율
-- <u>팀 코칭 학습 및 적용</u>: 프론트엔드 직군뿐만 아니라 디자이너, iOS 개발자,
-  컬쳐팀과 함께 ‘팀 코칭’ 스터디를 진행하여, 직군을 아우르는 좋은 팀을 만들기
-  위한 실질적인 전략을 모색하고 구성원의 성장을 이끔
+- <u>도메인 기대사항 반영</u>: 도메인 리더들과 정기적으로 소통하며 협업 피드백을
+  수집. 이후 협업 방식과 기술 전략을 조정하여 다음 학기 목표에 맞춰 개인의
+  목표와 프론트엔드 팀의 목표를 조율
+- <u>팀 코칭 및 성장 지원</u>: 프론트엔드 직군뿐만 아니라 디자이너, iOS 개발자,
+  컬쳐팀과 함께 '팀 코칭' 스터디를 진행. 각 직군의 성장과 협업을 촉진하기 위한
+  실질적인 전략을 제안하고 실행

src/pages/resume-content/장애감소.mdx

@@ -1,34 +1,32 @@
 import { SubHeading2 } from "../../components/SubHeading"
 
-<SubHeading2>
-  QA 자동화를 통한 수십억대의 손실 방지 및 테스트 비용 절감
-</SubHeading2>
+<SubHeading2>QA 자동화를 통한 금액 오노출 방지 및 테스트 비용 절감</SubHeading2>
 
-- 지난 1년간 토스모바일에서는 새로운 기능이 출시될 때마다 사일로 구성원 모두가 모여 손으로 일일이 테스트를 했습니다.
-- 하지만 요금제 및 통신사가 늘어나니 모든 분기를 테스트하는게 물리적으로 어려워지고, 실수로 금액을 잘못 노출시 수십억의 손실을 낼 수 있는 상황이 되었습니다.
-- 요금제 UI는 계속 추가 및 변경되기 때문에 자동화 테스트가 불가해보였지만, 가장 중요한 문제 및 임팩트에 집중해 새로운 방안을 냈습니다.
-- 눈으로 확인해야 하는 페이지가 너무 많다 → 해당 페이지들 스크린샷을 자동으로 찍어 슬랙봇으로 전송하고 이를 흟어보기만 할 수 있도록 (정성적 QA 보조수단. 테스트 리소스 60분 → 5분으로 감소)
-- 다른 것보다, ‘가격’만 잘 나오면 된다 → 가격 하나만 검사하는 자동화 테스트 생성. 코드 변경시마다 검증해서 가격이 잘못된 코드는 배포가 불가하도록.
-- 이를 위해 QA팀과 접촉해 긴밀하게 협업하였고, QA팀이 코드 오너쉽을 맡게 하여 두 팀이 공동목표를 가져 Best practice를 만들 수 있도록 하였습니다.
-- QA 보조도구로서의 자동화 스크린샷 및 웹 서비스에서의 End-to-end 테스트는 계열사 포함 토스 전체에서 첫 시도이며, 토스모바일처럼 장애 리스크가 높지만 정성적 테스트가 필요한 팀들이 사용할 수 있도록 일반화 할 예정입니다.
+- <u>자동화 스크린샷 도입을 통한 수기테스트 효율화</u>: - 스크린샷 자동 전송:
+  주요 페이지의 스크린샷을 슬랙봇으로 전송해 테스트 리소스를 60분에서 5분으로
+  감소.
+- <u>금액 검사 자동화</u>: 가격 오류를 방지하기 위해 자동화 테스트를 도입해
+  가격이 잘못된 코드는 배포가 불가하도록 설정
+- <u>QA팀과 협업</u>: QA팀과 협력하여 코드 오너십을 공유하며, 자동화 스크린샷 및
+  End-to-end 테스트 도입
 
 <SubHeading2>
   사일로, 전사 OKR인 VoC 감소를 위해 QA, CX DRI를 프론트팀으로 이관
 </SubHeading2>
 
-- 안정성이 필수 가치인 플랫폼팀의 구성원으로서, KR1인 ‘VoC 감소’의 달성을 위해 PO와 논의를 거쳐 CX, QA의 DRI를 프론트 팀으로 이관하였습니다.
-- 개선을 위해선 측정을, 측정을 위해선 정규화된 데이터가 필요하기 때문에:
-- CX팀과 협업해 CS를 카테고라이즈화 하고, 머신러닝팀과 협업해 VoC를 자동 분류하고, DA와 협업해 정규화된 데이터를 시각화하여 어떤 개선이 어느만큼의 임팩트가 있는지 정량적으로 측정할 수 있는 환경을 구성했습니다.
-- 이로 인해 PO의 “CX, QA쪽은 온전히 맡아주고 계셔서 든든하다”란 피드백을 받고 Weekly에서 고정으로 공유하는 등 사일로의 한 축을 맡고 있습니다.
+- <u>VoC 감소 목표 달성</u>: 플랫폼팀의 안정성 강화를 위해 CX, QA의 DRI를
+  프론트팀으로 이관해 VoC 감소 목표 달성. "CX, QA를 온전히 맡아주고 있어
+  든든하다"는 피드백을 받음.
+- <u>정규화된 데이터 기반 개선</u>: CS 데이터를 카테고리화하고, VoC 자동 분류
+  시스템 구축. 데이터를 시각화하여 개선 효과를 정량적으로 측정.
 
 <SubHeading2>
-  테스트 환경의 근본적 개선으로 개발자 없이도 자유롭게 사용자 케이스를 확인할 수
-  있도록
+  테스트를 하기 위한 인간 의존성 제거(서버개발자 의존, 프론트개발자 의존)
 </SubHeading2>
 
-- 토스모바일 가입자에게 보여지는 ‘내 요금제’ 화면같은 경우는, 화면은 하나여도 가입한 요금제, 할인정보, 사용량 등에 따라 UI가 다르게 보여집니다.
-- PO, FE등 사일로 구성원이 이런 다양한 화면과 그에 따른 기능 확인을 하기 위해선 서버개발자가 도와서 일일이 값을 바꿔줘야 했습니다.
-  - 그런 번거로움 때문에 기능 배포가 느려지고, 모든 경우의 수를 보기도 어려워 서비스의 완성도가 떨어지는 엣지케이스가 생겼습니다.
-- 속도와 완성도 개선을 위해선 ‘테스트 환경 개선’이 선행되어야 한다는 본질을 파악하고, 서버개발자의 리소스 없이도 프론트 개발 환경에서 여러 유저를 바꿔가며 테스트해볼 수 있도록 환경을 개선했습니다.
-- 이를 넘어서, 프론트 개발자의 리소스 없이도 PO나 PD가 직접 다양한 사용자 케이스를 조작하며 확인해볼 수 있도록 작은 Admin을 구성하였습니다.
-- 이를 통해 사일로 구성원들이 자유롭게 모든 기능을 열람할 수 있도록 하였고, 서비스 완성도를 높이고 테스트 시간을 감소시킬 수 있었습니다.
+- <u>서버개발자 의존 없는 로컬테스트 환경 구축</u>: 서버 개발자 도움 없이
+  프론트에서 다양한 사용자 케이스를 테스트할 수 있는 환경을 MSW(Mock Service
+  Worker)를 활용해 구축.
+- <u>프론트개발자 의존 없는 알파테스트 환경 구축</u>: PO나 PD가 개발자 도움
+  없이도 직접 다양한 케이스를 확인할 수 있는 Admin 구성. 서비스 완성도와 테스트
+  시간 개선.

src/pages/resume-content/퍼블릭스피킹.mdx

@@ -1,32 +1,26 @@
 import { SubHeading2 } from "../../components/SubHeading"
 
-<SubHeading2>
-  부족했던 시니어 지원자. 대외 커뮤니티를 통해 팬덤 형성하여 채용 전환
-</SubHeading2>
+<SubHeading2>시니어 개발자 채용을 위한 커뮤니티 기반 팬덤 형성</SubHeading2>
 
-- 프론트챕터에 시니어 지원자가 심각하게 부족하다는 문제를 챕터리드로부터 듣고, 이를 지원하기 위해 커뮤니티를 기획했습니다.
-- 개인적으로 커뮤니티 리딩은 15년부터 3개를 운영했으며, 1개 기준 최대 7천명까지 지속 운영한 경험이 있습니다.
-- 격달로 50명의 중/시니어 프론트엔드 개발자들이 토스 오피스에 방문하도록 하고, 이를 통해 토스에 친밀감을 느끼게 하고 자연스럽게 토스의 개발력을 알아가게 만들었습니다.
-- 지난 3번째 모임에선, 만족도 조사에 응답한 30명 중 15명이 채용팀과의 커피챗을 신청했습니다.
-- 이는 기존에 채용팀과 개발자가 함께 진행하던 아웃바운드콜(10명 보내면 1~2명 응답)에 비해 자연스러워 적은 리소스 대비 큰 전환율을 낼 수 있습니다.
-- 이 커뮤니티는 채용팀의 보조수단으로도 사용되고 있으며, 디자인 챕터에서도 도입을 검토하는 등 실용적인 효과가 검증되고 있습니다.
+- <u>프론트 챕터에 시니어 지원자 부족 해결</u>: 시니어 지원자가 부족하다는
+  문제를 해결하기 위해 대외 커뮤니티를 기획하여 운영.
+- <u>오피스 방문 프로그램</u>: 격월로 50명의 중/시니어 프론트엔드 개발자들이
+  오피스를 방문해 개발 문화를 체험하고 친밀감을 형성하도록 유도.
+- <u>높은 전환율 달성</u>: 매 모임 중 대략 참여자 30명 중 15명이 채용팀과의
+  커피챗을 신청하며 높은 전환율을 기록.
 
 <SubHeading2>
-  아티클과 영상 콘텐츠로 프론트 챕터의 기술을 알려 채용 인입 증대
+  아티클과 영상 콘텐츠로 프론트 챕터의 기술 홍보 및 채용 인입 증대
 </SubHeading2>
 
-- <u>기술 홍보 아티클 및 영상 출연</u>: '프론트엔드 챕터 리드'에 대한 토스테크
-  아티클에 인터뷰이로 참여하여 토스 시니어 FE 개발자의 이미지 제고. 캐주얼한
-  기술 영상인 '모닥불' 1화에 출연(조회수 3.7천 - 총 3화 중 조회수 1위)하여
-  저비용으로 채용 브랜딩 강화
-- <u>지속적인 채용 인입 생성</u>: 기존 2개의 슬래시 발표영상으로 꾸준히 채용
-  리드를 생성 - 프론트 챕터 채용의 오른쪽 바퀴 담당. 개인 이메일과 채용
-  인터뷰에서 지원자의 진유림 Slash 영상이 지속적으로 언급되어 채용 인입에
-  기여하고 있음을 확인 - (24.07.11 수신 이메일 발췌) "저는 토스 slash의 유림님의
-  '실무에서 바로 쓰는 frontend clean code'를 보고 클린코드를 배웠고… 유림님의
-  useFunnel 영상을 보고 제 프로젝트에 직접 적용해보았을 정도로…”
+- <u>기술 홍보 아티클 및 영상 출연</u>: '프론트엔드 챕터 리드'로서 토스테크
+  아티클 인터뷰와 '모닥불' 1화 영상에 출연(조회수 3.7천)하여, 저비용으로 채용
+  브랜딩 강화.
+- <u>지속적인 채용 인입 생성</u>: 슬래시 발표영상 2개를 통해 꾸준히 채용 리드
+  생성. 지원자들이 개인 이메일 및 채용 인터뷰에서 영상을 언급하며, 채용 인입에
+  기여.
 
 <SubHeading2>직군을 넘나드는 퍼블릭 스피킹 활동</SubHeading2>
 
-- <u>코어 얼라인먼트 위크 MC 참여</u>: 2024년 1학기 코어 얼라인먼트 위크에 MC로
-  참여해 개발자 베이스의 사회를 진행, 다양한 직군과의 소통을 이끌어냄
+- <u>전 직군이 모이는 사내 행사 MC</u>: 2024년 1학기 코어 얼라인먼트 위크에 MC로
+  참여해 개발자 베이스의 사회를 진행, 다양한 직군과의 소통을 이끌어냄.