토스에서의 FE로써 1년 6개월

lingodingo·2022년 3월 15일
160

회고록

목록 보기
2/3
post-thumbnail

🎈 토스에서의 FE로써 10개월 이후


프토스에서의 FE로써 10개월 라는 포스트를 작성하고 8개월이 지났다. 해당 포스트가 나름 많은 관심을 받았는데 아마 토스라는 밸류가 한 몫 하지 않았나 싶다. 심지어 사내에서 박제까지 당했다(어떻게 찾은거지? + 어우 부끄러 😞) 저 포스트를 작성한 시점으로부터 고작 8개월이 지난 것 뿐이지만, 정말 너무나도 많은 일들이 있었다. 외적으로도, 내적으로도 말이다.

🚚 낙성대 -> 뚝섬 -> 왕십리로의 정착

현재 오피스텔에서 월세로 1년을 거의 다 채워가는데, 3개월 뒤에 뚝섬역 주변의 전셋집을 구할 예정이다. 살면서 점점 집이 좋아지는 것 같아 넘나 좋다 😁

8개월 전에 전세구할거에요! 했는데 정말 전세를 구했다. 사내 대출(무이자 1억)을 받고, 은행에 빚을 지고 타이밍 좋게 전세 대출 막차까지 타서 왕십리 신축 투룸으로 이사를 갔다. 내가 빚을 지는 것 자체를 싫어해서 대출은 나랑 거리가 먼 이야기라고 생각했다. 하지만 점점 더 좋은 집에서 살고 싶은 욕망이 생기다보니 덜컥 빚을 만들어버렸다. 근데 빚도 자산아닌가? 아님말고..

이사 당일에 원룸 보증금, 은행 전세 대출, 회사 사내 대출.. 이 셋이 한 번에 들어와야해서 굉장히 쫄렸는데, 한 시간내로 모두 잘 들어와서 무사히 이사를 마칠 수 있었다.

대출 진행 당시에 아이 ㅋㅋ 앞으로 금리가 오르겠어요? 하면서 가변금리로 했는데.. 1년 뒤에 이율이 올라간다 어떡하냐 진짜..

뚝섬, 성수도 정말 좋지만 좋은 전세 매물이 없었기에, 눈물을 머금고 왕십리로 이사를 갔다. 이상하게 지리적으로 조금만 올라왔을 뿐인데 주민들의 나잇대가 뭔가 확 올라간 것 같다. (아 물론 나도 나잇대 올리는데 한 몫 거듬) 이 동네에서는 이상하게 길빵하시는 분들이 너무 많다. 볼 때마다 뚝배기 깨는 상상만 한다. 👿 성수는 이정도는 아니었는데.. 😮

회사는 역삼에 있지만 개인적으로 지하철 1, 2번 더 갈아타는거에 큰 거부감이 없어서 왕십리로 갔다. 다이소도 가깝고, 이마트도 있고, 무엇보다도 2, 5, 수인분당선, 경의중앙선 모두 다 지나가는 쿼드라 역세권이다.

투 룸으로 옮기다보니 이것 저것 살게 많아졌다. 뚝섬에 살때는 침대 프레임도 없이 매트리스만 덜렁 하나 둬서 살았는데, 침대도 싹 바꿔서 퀸사이즈로 사고, 이케아에서 조명도 사오고, 티비도 스탠드형으로 달아서 침대 앞으로 두니 천국이 따로 없다.

최근까지도 손님이 오면 앉을 자리가 없었는데, 식탁도 새로 사고 뭔가 진짜 사람사는 집 같아졌다.

🐱 고양이(루나)

우리 루나는 굉장히 잘 있다. 몇 달 전에 살이 찢어져서 수술도 했었는데, 다행히 별 이상없이 지내고 있다. 다만 넥카라는 아직 완벽하게 못 벗는다 욘석아..

우리 루나가 등의 털을 핥을 때 혀로 핥다가 갑자기 입으로 털을 물고 털이 찢어질 때 까지 물어올리는데, 보는 내가 무섭다. 실제로 이러다가 등에 상처난 걸 몇 번 봤다. 😱
왜 이러는지 아시는 분 있는지 궁금하다. 개인적인 추측으로는 어렸을 때 부터 잘못된 그루밍 습관을 갖게 돼서 이런 것 같다. 일단은 보일때마다 주의를 주지만 고양이는 집사의 충고를 개의치 않는다.

💻 M1 Max

맥도 어느정도 적응을 했는데, 최근에 회사에서 M1 Max 사용하고 싶다면 신청하라고 해서 16인치로 냅다 신청했다. M1을 받았지만 기존에 쓰고 있는 세팅들을 옮기기가 귀찮아서 미루다가 최근에 끝냈는데, 확실히 성능도 좋고 배터리도 짱짱하다. 인텔 맥은 동영상 시청하면 3~4 시간만에 배터리가 끝나는데 M1은 8시간 이상 지속돼서 아주 좋다.

최근에 맥을 클램쉘로 세팅해서 쓰는데, 이전에는 인텔 맥이랑 벨킨 독이랑 연결해서 세팅을 했다. 근데 툭하면 화면이 나가고 kernel panic 나고 정신이 없었는데 M1으로 옮기면서 괜찮아졌다. 다만 블루투스 장비를 3개 이상쓰니 마우스가 끊기거나 이어폰이 끊기거나.. 이건 인텔 맥에도 있었던 문제인데 맥은 기본적으로 블루투스 연결이 잼병인가? 싶기도 하다.

매 번 16인치를 고르면서 "진짜 개무겁다. 이건 노트북이 아니라 벽돌이다" 생각은 하지만 또 무심하게 잘 들고는 다닌다. 🧱

😵‍💫 Next 면접

면접관으로 참여하기 전, 당시 문제를 내던 동료랑 어떤 문제가 좋은 문제일까 하면서 토론을 했었다. 그리고 그 분이 어떤 문제를 만들었는데 그걸 본 나는 아니 이렇게 내면 어떻게 풀어요..? 라고 했다. 실제로 그 문제는 정답률이 가장 낮았다.

문제가 좀 어려운 편이었지만 다들 잘 풀어주셨다. 당시 지원자가 너무 많아서 면접관으로 우연히 참여할 수 있었는데, 당시에 나는 아니 나 같은 놈이 면접을?이라는 생각을 가진채로 면접에 임했다. 하지만 부족한 모습 안 보이려고 스스로 채찍질을 더욱 열심히했다.

하나 기억나는 에피소드가 있는데 이전 회사에서 인턴으로 같이 일하셨던 분이 토스에 지원을 해서(난 몰랐음) 내가 인터뷰어가 되었다, 면접 시작전에 그 사실을 알았던 나는 안면식이 있는 사람이라 면접에 직접적으로 참여는 못하고 간접적으로 참여했다. 그 분은 후에 배민에 갔다는 소식을 최근에 알게 되었다.

이 기간에 5~6 분의 면접을 봤었고, 한 분에게 패스 의견을 드렸었다. 지금은 같은 트라이브에서 같이 일하고 있다 (신기)

👥 메이트

작년 5월에 나도 누군가의 첫 메이트가 되었다. 시니어 분이셨는데 외국에서 업무를 하시다가 토스로 합류하신 분이었다. 그래서 바로 한국에서 업무를 시작하지 않고 외국에서 원격으로 업무를 시작하셨고, 3개월쯤 지나서 한국에서 일하시게 됐다. 물리적으로도 거리가 있다보니 소통을 많이 못해서 아쉬웠다. 온보딩이나 커피챗 요런거를 안내를 제대로 못해드려서 개인적으로도 너무 아쉽... 😰

내가 만약 다른 회사에 합류할 때, 내 상황이 이랬으면 잘 적응했을까 심히 걱정된다. 개인적으로 이런 환경에서도 적응하셨던 메이트분이 정말.. 대단하다고 생각한다 👏

입사 당시 내 메이트였던 분이 최근에 퇴사를 하셨다. 퇴사안하실 줄 알았는데 갑작스럽게 퇴사한다고 DM이 와서 놀랐었다. 토스 합류하고 나서 동료 프론트엔드 분이 퇴사하는건 못 봤는데 아마 첫 번째인 것 같다. 그래도 워낙 잘하시기로 유명하셔서 어딜 가시든 잘 해내실거라고 믿는다.

🏥 처음으로 맡은 서비스, 병원비 돌려받기


토스 코어에 전직이 되고 나서, 자연스럽게 토스 앱의 서비스를 하나 맡게 되었는데, 그것이 병원비 돌려받기다. 원래 토스의 병원비 돌려받기 서비스는 딱히 손 볼 필요없는 서비스였는데, 레거시 코드가 쌓이고 비즈니스적으로도 바뀌다보니 리뉴얼이 한 번 필요했다. 상태관리가 Mobx로 되어있었는데, 내 맘대로 recoil로 바꾸면서 개발했다.

리뉴얼을 진행하면서 페이지들을 굉장히 많이 바꿨다. 이전 병원비 돌려받기는 한 페이지에 여러가지를 동시에 물어보는 디자인이었는데, 페이지 하나에 한 관심사만 물어보는 디자인으로 바꿨다. 그리고 이전에 비해 병원비를 돌려받을 수 있는 보험사가 훨씬 많아지게 되었는데, 특정 보험사에 대한 분기처리(우체국)도 꼼꼼히 진행했다. 어디서 이탈하는지 로깅을 통해 분석하여 이탈률을 낮추기도 하였고, A/B 테스트도 진행해보았고, 개편했음에도 불편하다고 느껴지는 부분은 상당수 보완하여 만족도가 높은 서비스가 되었다.

토스 웹뷰 서비스의 고질적인 문제점이 하나 있었는데, 바로 초기 로딩 속도가 엄청 느리다는 것이다. 무거운 API들을 초기에 클라이언트에서 불러와야 하는데 심지어 Suspense로 이루어진 환경에서는 FCP(First Contentful Paint)가 굉장히 높았다. 서비스 진입할 때 로더가 한동안 돌거나 흰, 검은 화면을 오랫동안 봤어야 했는데, 이번에 클라이언트 플랫폼 팀에서 진행한 SSR 마이그레이션을 통해 초기 데이터 받아오는 방법을 전적으로 서버에 맡기고, 이 후 요청은 클라이언트로 위임함으로써 FCP를 대폭 낮출 수 있었다. 이전과 비교하면 다음과 같다

배포하기 까지 우여곡절이 많았지만 정말 만족할만한 서비스이고 개발하면서 사용자에게 많은 칭찬을 받았던 제품이라 많이 뿌듯하다. 😤

종종 구글에다가 토스 병원비 돌려받기를 검색해서 사람들이 내꺼 잘 쓰고 있나.. 찾아볼 때가 있다. 아직까지는 구버전 스크린샷이 많은데 내가 만든 버전의 스크린샷이 보이면 괜히 기쁘다. 이래서 서비스 개발을 하는 회사를 가는구나 싶다

💰 연봉협상

작년 10월에 첫 연봉협상도 해보았다. 계기는 토스 인슈어런스 -> 토스 코어로 전적하면서 맡은 제품의 수도 늘었고, 챕터에 기여도 어느정도 하면서 자연스럽게 나의 DRI(Directly Responsible Individual, 최종 결정권자, 최종 책임자)가 넓어졌기 떄문이었다. 그래서 자연스럽게 연협을 진행해보았는데, 2개월 정도 시간이 소요되었고 나름 만족할만한 인상률을 받아내었다.

이전 회사에서는 거의 통보식이고, 회사 나갈때 쯤이여서 연협이라고도 생각안했다 👿

연협을 진행하고 느낀 것은

  1. 생각보다 연협을 할까 말까 고민했지만 생각보다 할만 하다는 것
  2. 자기 PR이 정말로 중요하다
  3. 현재 회사 내에서 내 위치를 가장 객관적으로 알 수 있는 수단

담에 또 연협에 도전할 생각이다 😙

🖥 프론트엔드

토스 인슈어런스의 제품을 계속 맡고 있었는데 여전히 토스 코어와의 기술적 괴리감이 심했다. 토스 인슈어런스 일을 1년 넘게 있으면서 프론트엔드 개발 방식도 어느정도 많이 바꿔봤다

💩 주의 쓸데없는 기술 얘기임

🧶 yarn workspace를 사용해서 monorepo로 이전하기

토스 인슈어런스 제품은 하나밖에 없어서 모노레포를 써야할까 생각했지만 통합 관리 서비스(어드민)를 새로 만들 필요가 생기면서 프론트엔드 레포를 monorepo로 구성해보고 싶었다. yarn의 공식 문서를 참조하고 수많은 삽질로 monorepo로 마이그레이션을 성공했다. 이전하면서 인프라에 대해 경험했는데 굉장히 재밌었다.

AWS, lambda@edge

기본 목적은 https://foo.bar/admin로 들어오면 monorepo의 admin 서비스를 불러오는게 목적이었다. 하지만 모종의 이유로 https://foo.bar/admin로 요청을 하면 https://foo.bar/defaultService 계속해서 defaultService로 요청을 보내서 받아왔다. 그 이유는 lambda@edge 때문이었다. 나는 요게 뭔지 대충 감만 잡고 있었는데 막상 건드려니까 넘 힘들었다. 이게 테라폼으로 다른 레포에서 관리되고 있는건 나중에 알았는데 당시에 디버깅, 배포가 진짜 굉장히 힘들었다. 또 물리 서버인 nginx에서도 라우팅 규칙이 기괴했는데 요것도 인프라 구조를 그려가면서 파악하니 해결할 수 있었다.

배포

기본적으로 webpack, tsconfig, eslint, ... 세팅을 호다닥 끝냈고 배포가 남았었는데 변경된 서비스(workspace)들만 빌드가 돌아가고 AWS에 업로드 되어야 했다. 요 스크립트를 짜는데도 좀 힘들었다. 특히 node의 기능을 이용하지 못하는 문제, 특정 서비스 typescript server가 module을 link 할 수 없다고 에러 미친듯이 내뿜는 광경을 겪으면서 멘탈이 많이 갈렸었다. 기존 서비스에서 module link를 못하는 문제는 강제로 pnpify를 시켜주는 @yarnpkg/pnpify를 이용하여 해결했다.

새로 생긴 서비스에서 @emotion이 제대로 적용되지 않는 상황도 있었는데, babel 설정에 문제가 있는 것이라 호다닥 고쳤다. 근데 고치고나니 emotion의 css prop이 맨 후순위로 밀려서 원하는 디자인이 제대로 적용되지 않는 문제도 튀어나왔는데, 이건 react-helmet의 문제였다. 토스 디자인 시스템을 쓰기 위한 css 파일을 react-helmet으로 로드했는데, 라이브러리가 이 css 파일을 항상 마지막에 추가하도록 해놔서 컴포넌트 스타일이 토스 디자인 시스템에 override 되어서 생긴 문제였다. html 파일에서 css 파일을 먼저 불러오도록 하니 깔끔히 해결되었다.

Github Actions 에도 변경된 서비스에만 테스트 스테이지가 각기 돌아가도록 하고 배포가 돌아가도록 변경했다. 1~2주 사이에 모노레포로 변경하는 작업을 호다닥 끝마쳐두고 첫 배포가 제대로 되었을땐 정말 뿌듯했다.

👦🏻 현재, 회사생활

건강

건강이 진짜 나빠졌다. 3~4개월 전부터 오른쪽 어깨 통증이 굉장히 심해서 잠 잘때도 불편하고 일할때도 엄청 불편해졌다. 회사에서 1주일간 방학을 줘서 이번년도 1월달에 일주일 동안 거의 매일 병원가서 이것 저것 검사를 했는데 어깨에 염증이 심하단다. 염증빼는 주사도 2회 맞고, 체외충격파인지 뭔지하는것도 맞아봤으나 1~2주 정도만 괜찮아졌다가 다시 급격하게 나빠지더니 이젠 오른쪽 엄지 손가락이 저리다. 다른 병원으로 가서 도수치료를 첨 받아봤는데 나는 등 근육을 쓸 수 없단다. 너무 안써서 굳어버렸대나 뭐래나.. 어깨는 등, 목근육으로 드는건데 등 근육이 없으니 목으로만 들어서 이렇다고 하더라. 도수 치료 자주 받으려고 한다.

암만 생각해도 아픈 원인은 개발할때 자세때문인 것 같다. 터치패드 마우스 문제인가 싶어서 버티컬 마우스도 사용하고 있다. 그리고 의자 높이를 최대로 올려도 낮은데 책상은 높다. 진짜 돈쓰기 싫은데 죽겠다 싶어서 의자를 찾아보던 중에 회사에서 허먼밀러 공구를 한다길래 잽싸게 신청했다.

😱 허리 디스크치료는 1,700만원 인데 허먼밀러는 그거보다 싸단다. 그 말듣고 돈 써야겠다 다짐했다.

4~5월달에나 온다는데 그 때까지 진짜 어떻게 버티냐 😰 어깨 잘라버리고 싶은 통증이 계속 지속된다.

  • 요 어깨 통증때문에 상체운동은 3달 전부터 그만뒀고, 하체운동만 조지고 있다.

강점찾기

매 주 프론트엔드 엔지니어 5명이 모여서 워킹그룹을 가졌다. 거기서 재미난걸 발견했는데 강점찾기이다. 처음 얘기를 들었을 때 뭐지? 제 2의 MBTI인가? 싶었는데 아무래도 책을 사야지 검사를 진행할 수 있는 유료 검사다보니 되게 체계적으로 만들어놨다.

나의 경우엔, 1.복구 2.성취 3.배움 4.개별화 5.행동 순이었다.

이게 되게 기가막힌게, 나에 대한 강점 소개 중에 누군가 나에게 칭찬을 해주면 나는 그걸 칭찬으로 받아들이지 않는다 하는 구절이 있었다(실제로도 그렇다) 이 문구가 나오니까 주변 프론트엔드 동료분들이 굉장히 놀랐는데 이런 사람 첨본다고 했다. 어떤 분이 '칭찬할때 데이터로 패서 칭찬하면 된다'라고 하셨는데 동의한다. 😎

그리고 나는 내 성격때문에 영원히 고통받는다고 한다. 끊임없이 무엇을 하려는 욕심때문이라나 뭐라나.. 숙명이라 생각하고 열심히 고통받을 생각이다 😹

이 강점찾기로 각 프론트분들의 성향이 진짜 거의 99% 맞아 떨어지는걸 보고 되게 신기해했다. (살다살다 다른 사람 도와주고 매니징하는게 천직인 사람은 처음 본다). 이미 강점찾기가 우리 회사를 휩쓸고 있다.

비포괄?

회사가 뜬금 비포괄로 전환한다고 했다. 야근비를 월 중순에 주고 월급을 말에 주는데 뭔가 두 번 받는 것 같아서 기부니가 좋다. 다만 야근비는 소득세를 제외하고 들어오는데, 월급에서 이 금액을 포함해서 소득세를 내게 된다.

개인적으로 주식, 코인, 제테크로나 서울 집을 살 수 있다고 생각을 했다. 근데 평소에도 야근 많이하는데(?) 돈은 더 주고, 근데 그 양이 생각보다 상당하고.. 이러면 진짜 집을 살 수 있지 않을까? 하는 생각이 든다.

metadata driven react

현재 팀을 옮기고 토스 내의 인터널 제품을 맡는 조직으로 옮겼다. 이 조직은 개발 방식이 일반 개발방식과는 사뭇 다른데,

기능 회의 => 디자인 => 프론트 + 서버 개발이 통상적인 방법이라면 여기는 서버가 어떤 타입의 버튼을 주고, 버튼을 누르면 어떤 창이 열려야하고,... 이런 규격화된 데이터를 모두 갖다 준다. 프론트와 서버, 디자인은 어떤 공통점을 찾아 패턴화하고 프론트는 컴포넌트를 개발한다. data driven 개발 방식이라고 한다. 그래서 개발 난이도가 미친듯이 치솟았는데 첨 이 팀에 합류했을때 나름 리액트에 자신있다고 생각했는데 2주간 코드베이스를 이해도 못하는 나를 보며 실망했다. 지금은 1달 반정도 지나니 어느정도 이해했다 😩

처음에는 왜 이렇게 어렵게 작성했는가? 에 대해 많은 고민을 했지만, 팀에게는 다른 선택지가 없었다고 한다. 이전에 내가 소개한 평범한 방법처럼 개발을 했지만 너무도 다른 도메인때문에 코드 베이스가 망가졌다고 하니 이 방식이 이해가 갔다.

목표

다음 하반기에 있을 연봉 협상을 한 번 더 할 생각이다. 처음 신청만 긴장되었지, 마구마구 신청할테다. 다른 회사에 면접을 봐서 카운터 오퍼를 칠 생각이다.

최근에 당근마켓 Recruit 24에 신청했다가 화상 인터뷰에서 탈탈 털렸다. 준비한 질문들이랑은 전혀 다른 질문들이 와서 멘붕이 많이 왔었다. 특히 내가 말을 더럽게 못 한다는것을 상기할 수 있었다.. 👻

다른 회사로의 이직은 잘 모르겠다. 이 회사만큼 모두가 달리는 회사가 얼마나 될까..?


🥱 마치며

이 회사에 오고나서 정말 많은 것이 너무 빠르게 바뀌고, 성장한다는 것을 느낀다. 나는 변화에 둔감한 사람이라고 생각하는데도 그렇다. 단적으로 예를 들자면, 몇 개월만에 내 코드에 자신감이 생기기도 하고, 회사 내에서 영원한 막내일줄 알았던 내가 다른 누군가를 리드하고 있다. (입사할때 20명 남짓하던 프론트엔드 엔지니어는 이제 60명을 넘어가고 있다). 코드 퀄리티에 집중하던 나는 비즈니스 임팩트가 더 크다면 코드 퀄리티는 어느정도 포기해도 된다는 생각을 이제 막 하기 시작했다.

나는 회사에서 일만 생각하면 될 줄 알았는데, 생각보다 많은 일들이 내 주변에서 일어나고 있으며 더 이상 일에만 집중하면 안된다는 교훈도 이번에 뼈저리게 느꼈다. 지금까지는 너무 무신경하게 회사는 천국이야 같은 생각만 하고 살았었기 때문이다.

요번에 작성한 글은 저번보다 굉장히 길다. 하지만 숨겨진 이야기는 아직도 많다. 언제쯤 정리할 수 있을까 막막하다.

profile
Frontend developer

8개의 댓글

comment-user-thumbnail
2022년 3월 16일

유익한 글 너무 잘 읽었습니다 :)

답글 달기
comment-user-thumbnail
2022년 3월 17일

솔직 담백한 글이어서 잘 읽히네요.~

답글 달기
comment-user-thumbnail
2022년 5월 11일

유익한 글 잘 읽었습니다
내용중 "서버가 어떤 타입의 버튼을 주고" 라는 표현이 있는데,
어떤 의미로 해석해야할지 잘 모르겠습니다
좀 더 풀어서 설명해 주시면 감사하겠습니다. :)

1개의 답글
comment-user-thumbnail
2022년 8월 7일

잘 읽었습니다 :-)

답글 달기
comment-user-thumbnail
2023년 2월 15일

잘 읽었습니다 :)

답글 달기
comment-user-thumbnail
2023년 9월 4일

너무 잘읽었습니다.
추가적인 궁금증이 있는데 프론트엔드 개발자로서 프로젝트 하나를 진행할때 전체적으로 어떤 과정을 거쳐 프로덕션이 탄생하는지 알고 싶습니다.
혹시 이와 관련한 토스 아티클이 있을까요?

1개의 답글