제 1회 숨고 Tech Meet up

제 1회 숨고 Tech Meet up

Tech

여는 말

안녕하세요, People Team Teo입니다.

지난 10월 16일 수요일, 숨고는 React와 React Native에 관심 있는 개발자 약 30명을 모시고, Front-end & Mobile Meet up을 개최하였는데요. 숨고의 개발 문화와 서로의 인사이트를 공유하는 뜻깊은 시간이었습니다. 첫 번째로 진행된 행사였던 만큼, 숨고 멤버 모두 열심히 준비해 주셨고 예상을 훨씬 뛰어넘는 많은 분들이 Meet up에 신청해 주셨습니다. 그러나 한정된 자원으로 인해 모든 분을 모시지 못한 점이 크게 아쉬움이 남는데요. 그래서 이번 글을 통해 그날의 이야기를 조금이나마 담아보려 합니다.

본문 최하단에 다시 보기 영상 링크가 있으니, 더 궁금하신 분들은 영상을 통해 확인해 주세요!

대체 이미지

Session 내용 맛보기

첫 번째 Session - 빌드 워크플로우 가속화 by Front-end

숨고의 Front-end Chapter에서는 github으로 소스 코드를 관리하고 배포 프로세스를 실행하고 있습니다.

얼마 전 Front-end Chapter 배포에 사용하는 시간과 비용을 자체적으로 조사해 본 결과 한 달에 약 5,100분이라는 많은 시간을, 비용 관점에서는 월 기준 220만 원이라는 비용(연봉 5,000만 원의 개발자 기준)을 사용하고 있는 것으로 확인하였습니다.

스위칭 코스트 측면에서도 평균 23분이라는 시간이 소요되고 435개의 워크플로우를 진행한다면 월에 434만 원 정도의 비용을 사용하는 것으로 예상하였습니다.

결과적으로 시간과 비용 측면에서 개선이 필요하다는 진단을 내렸고, 아래 5가지 솔루션을 통해 배포 플로우를 개선하였습니다.

  • S3 파일 업로드 속도 개선
  • Github Larger hosted runner 도입
  • Docker layer caching 적용
  • Bundler migration
  • 그 외

이를 통해 배포 속도를 14분 단축하여 기존 대비 배포 속도가 5분 50초 정도로 소요되는 성과를 가져올 수 있었습니다.

대체 이미지

두 번째 Session - 에러 파이프라인 만들기 by Front-end

에러는 서비스가 변화하고 성장하면서 발생할 수밖에 없는 성장통입니다. 하지만 에러는 서비스에 대한 신뢰도 하락을 야기하기 때문에 신속한 대응이 필요합니다. 이 관점에서 숨고의 에러 처리 플로우는 문제가 많았습니다.

기존 방식은 에러 발생 → 관리 툴에서 캐치 → 슬랙에 알림 → 구독 중인 엔지니어가 파악해서 해결하는 구조였습니다. 이런 구조의 문제점은 우선 첫 번째로 에러 확인이 의무가 아니었고, 두 번째로 보이는 에러 알람이 직관적이지 않다는 점이었습니다.

이런 번거로움을 해결하기 위해 에러 파이프라인을 변경하여 문제를 해결하였고, 에러에 대한 오너쉽에 대해서도 생각해 볼 수 있는 환경을 마련할 수 있게 되었습니다.

대체 이미지

세 번째 Session - 숨고 모바일 챕터가 RN를 활용하는 방법 by Mobile

숨고 모바일 챕터가 업무에서 사용하는 기술과 주요 개선점을 소개합니다.

  • 주요 기술 스택 : React-Native / React / React Navigation
  • 상태 관리 : Redux, Zustand
  • 빌드 및 배포 :기존 codePush 라이브러리를 커스텀해서 사용, Github Action, Circle CI, S3
  • 모니터링 : Firebase, Bugsnag

주요 개선점은 App. StartUp Time을 개선하고, App Center와 숨고 Agile 조직의 빠른 배포 주기 (Small Release)에 기민하게 대응하기 위해 빌드 파이프라인을 활용한 자동화와 롤백 프로세스를 구현하는 등의 배포 프로세스를 개선하였습니다.

그 외에도 Native Stack을 활용하여 화면 전환 퍼포먼스를 개선하고 Native Module을 개발하여 유저의 사용성을 개선하는 성과를 일궈낼 수 있었습니다.

향후에는 레거시와 복잡도 개선, 디자인 시스템 개발 그리고, Native 개발 및 RN 뉴스레터 및 오픈소스화 등을 통해 React-Native 생태계에 기여하는 것을 목표로 열심히 달려볼 예정입니다.

대체 이미지

네 번째 Session - Networking

3번의 발표가 마무리된 이후 숨고의 Front-end Engineer와 Mobile App Engineer분들은 참여자 분들과 함께 1시간 동안 자유로운 네트워킹을 진행했습니다.

발표 자료에 대한 심도 있는 Q&A 시간부터, Agile 방식의 숨고 개발 문화에 대한 각자가 갖고 있는 생각 그리고 최신 개발 트렌드까지 유익한 시간을 보낼 수 있었습니다.

대체 이미지


그럼 숨고 Tech Meet Up은 빠른 시일 내에 다시 돌아오도록 하겠습니다. 참여해 주신 분들께 다시 한 번 머리 숙여 감사의 인사 드립니다.

더 자세한 내용이 궁금하신 분들을 위해

  • #culture
  • #engineer
  • #front-end
  • #organizational culture
  • #react
  • #tech
  • #meet up
  • #react-native
  • #mobile app
  • #software engineer
Teo Yang

Teo Yang

Talent Partner

연결을 통해 가치를 만드는 숨고팀과
함께할 당신을 기다립니다

채용중인 공고 보기