🎙️

AB180 - 유승연 개발자님 (프론트엔드 포지션)

개발자 커리어 점프 [점핏]! 개발자를 위한 직무 이야기를 전해드립니다.
AB180 사무실 벽면
개발자님의 직무 이야기
1. 담당하고 계신 업무를 소개해주세요.
Frontend Team에서 Airbridge의 대시보드와 사내 디자인시스템 개발을 담당하고 있습니다. 주로 UX/UI 디자이너, 백엔드 개발자, CSM 분들과 함께 협업하여 대시보드를 개선하는 작업을 진행합니다.
Airbridge 대시보드는 분석된 마케팅 성과를 확인하고, 측정 기준 등을 변경하거나, 쌓은 데이터를 다른 곳에 전송할 수 있도록 도와주는 다양한 기능들을 제공합니다. 대시보드가 담고 있는 정보의 양이 많은만큼 그 많은 양의 데이터를 사용자들이 목적에 맞게 이해하고 활용할 수 있는 인터페이스를 만드는 일을 중요하게 다루고 있습니다.
AB180의 Frontend Team은 Airbridge 대시보드의 일관성 있는 UI/UX를 유지하고 디자인 및 개발 생산성을 향상시키고자 UI Design Team과 협력해 사내 디자인시스템을 개발해 사용하고 있습니다. 대시보드의 특성상 컴포넌트화 할 수 있는 요소가 많고, 디자인 시스템 컴포넌트가 잘 구현되어 있을수록 작업 효율이 올라가기 때문에 틈틈이 UI 디자이너와 함께 디자인 시스템 작업을 진행하고 있습니다.
2. 현재 회사와 지금의 직무를 선택하게 된 계기는 무엇인가요.
우연한 계기로 웹 개발을 접하게 되었고, 보다 동적이고 사용자와 직접적으로 소통할 수 있다는 점이 흥미로워서 개발을 공부하기로 마음먹었습니다. 개발을 시작하게 된 계기가 사용자에게 직접 맞닿아 있는 영역이라는 프론트엔드의 매력때문이기도 하고, 원래 관심있던 분야인 디자인과의 접점이 많다고 생각되어 프론트엔드 직무를 선택했습니다.
데이터가 많을수록 사용자가 원하는 데이터를 얼마나 명료하고 간단하게 전달할 수 있는지에 대한 더 많은 고민할 수 있을 거라고 생각했기 때문에, 회사를 선택하는 과정에서 ‘프론트엔드 개발자로서 다룰 수 있는 양질의 데이터를 충분히 보유하고 있는가’를 중요하게 여겼습니다. 그런 점에서 AB180은 무수히 많은 양의 데이터를 다루는 마케팅 솔루션을 제공하고 있다는 점이 매력적으로 느껴졌습니다.
여러 채널을 통해 회사에 대해 알아보면서 좋은 개발 문화를 가진 곳이라는 생각이 들었습니다. 자유롭게 의견이 오고 가는 코드 리뷰나 Postmortem 같은 개발팀 문화도 너무 좋았지만, 모든 구성원이 프로덕트 개발 과정에 참여할 수 있다는 점이 가장 흥미로웠습니다. 주어진 업무만 하는 것이 아니라 능동적으로 더 크게 성장할 수 있는 곳이라고 느꼈고, AB180에 합류하게 되었습니다.
3. 하루 일과를 소개해주세요.
AB180은 코어 워킹 타임 기반의 시차 출퇴근제를 운영하고 있기 때문에 아침잠이 많은 저는 주로 10시 반에서 11시 사이에 출근하고 있습니다.
출근하면 오늘 해야할 일을 정리하고 Slack 채널에 공유하는 것으로 하루를 시작합니다. 코드 리뷰가 밀리는 일을 방지하기 위해 오전은 주로 코드 리뷰를 하는데 사용하고 있습니다. 점심시간은 라운지에서 간단하게 식사를 하고 동료들과 자유롭게 이야기를 나누면서 보냅니다.
본격적인 업무는 오후 시간에 이루어지는데, 주로 개발을 하고 일정에 따라 미팅에 참석해 의견을 공유하고 정리합니다. 여유가 있을 때는 관심있는 주제의 Product Research 세션(UX/UI Team에서 진행하는 Mar-tech 시장과 Airbridge, 고객사에 대해 리서치한 결과를 공유하고 논의하는 세션)을 듣기도 하고, 매주 금요일에는 프론트엔드 팀 회고에 참여합니다. 퇴근 전에는 오늘 작업한 일을 정리하고 내일 해야할 일을 확인하며 업무를 마무리합니다.
4. 업무를 하며 가장 보람을 느낄 때는 언제이신가요.
칭찬을 받으면 춤추는 고래같은 성향이라 좋은 피드백을 받을 때 가장 보람을 느낍니다.
내가 만든 기능이 릴리즈 되고 나서 긍정적인 피드백을 받았을 때라거나, 협업을 진행하는 과정에서 다른 작업자 분들에게 좋은 피드백을 받을 때면 순식간에 에너지가 차오릅니다.
긍정적인 피드백을 아끼지 않는 동료들 덕분에 늘 즐겁게 작업하고 있습니다.
AB180 회의실 및 업무공간
[AB180]의 개발이야기
1. 업무의 프로세스를 소개해주세요.
1-1. 기획부터 개발까지 진행되는 프로세스
티켓은 Jira를 통해 관리되며, UI/UX, 백엔드, 프론트엔드 작업자가 협업하는 티켓은 Roadmap이라는 타입으로 분류됩니다. 누구나 기능 개선을 제안할 수 있는 <아이디어파크> 에서 시작되는 작업들도 있습니다.
Roadmap 티켓의 시작은 UI/UX 작업자의 리서치로 시작합니다. 그 과정에서 엔지니어들이 자주 engage되는데, 프로덕트 특성 상 데이터 처리 파이프라인, 웹, 쿼리와 같은 부분에 지식이 많이 필요하기 때문입니다. 이렇게 진행한 리서치 결과를 토대로 우선순위를 고려해 해결할 문제를 선정합니다. 할 일이 정해지면 Kick-off → Tech Spec 리뷰 → Front 코드 작업 → QA & Code Review → Final QA → Release의 순서로 작업이 진행됩니다.
Kick-off 단계에서는 사용자 흐름에 대한 화면을 설계하며 티켓의 목표, 범위, 사용자 시나리오를 구체화 시켜나갑니다. 이 단계부터 PM과 UX 담당자 뿐만 아니라 UI 디자이너, 프론트엔드 개발자, 백엔드 개발자 등 모든 작업자가 참여합니다. UI/UX 작업자의 리서치 결과를 토대로 기획한 결과물은 Figma를 통해 공유되고, 작업자들이 모여 기획된 화면을 보고 회의를 진행합니다. 이 시간을 통해 해당 티켓을 진행하게 된 배경을 파악하고, 작업이 시작되기 전 필요한 도메인 지식을 미리 습득할 수 있습니다. 또한 UX 담당자가 기획한 사용자 시나리오가 기술적으로 구현 가능한지 확인하고, 기술적으로 사용자에게 더 나은 경험을 제공하기 위한 방법을 제안하기도 합니다.
Kick-off 단계가 끝나고나면 백엔드 개발자는 이번 티켓의 배경, 목표, 목표가 아닌 것, 작업 계획, 예상 Q&A 등의 정보와 함께 API Request / Response 설계 내용을 담은 Tech Spec을 작성합니다. 작성된 Tech Spec을 전달받으면 백엔드 개발자와 함께 API의 Request / Response의 스펙을 검토합니다. Tech Spec 리뷰까지 끝나면 본격적인 코드 작업에 들어갑니다.
1-2. [설계, 분석, 개발, QA, 런칭] 단계별 소요되는 평균시간
당연히 티켓의 크기에 따라 다릅니다. 티켓은 반드시 지켜야 하는 마감일이 정해진 Hard due가 있는 티켓과 상대적으로 유연한 Soft due를 사용하는 티켓으로 나뉩니다.
Tech Spec 작성 및 리뷰 단계를 통해 설계/분석 시간을 보장받을 수 있으며, 이 과정에서 각 액션아이템의 구체적인 일정을 정할 수 있으므로 예측 가능성과 자율성이 높습니다. 또, PM이 일정을 산정하기 전 각 작업자와 작업 단계별 예상 소요 시간에 대해 논의하는 과정을 거치기 때문에 각 단계마다 충분한 작업 시간을 보장받을 수 있습니다.
티켓마다 Start date와 Due date를 Assignee(대개 Roadmap 티켓의 경우 PM, 팀 티켓의 경우 각 팀원이 Assignee가 됩니다)가 직접 설정할 수 있으며, 조직장에게 소구만 된다면 각 엔지니어가 제안한 일정대로 진행할 수 있습니다.
물론 Hard due가 있는 티켓은 비즈니스적 요구사항이 있다거나 다른 일정과 조율이 필요한 경우이기 때문에, 이런 작업들은 당연히 열심히 달려야 합니다   혹시나 열심히 달리는 과정에서 일이 너무 바빠 새벽 잔업을 하게되면 야근한 시간 만큼 다음날 늦게 출근을 하고, 휴일에 출근하게 되면 업무 시간에 정해진 배율만큼 가산해 포상휴가도 지급해 줍니다.
2. ★개발 배포 프로세스를 소개해주세요.
프론트엔드 코드 작업은 대개 UX/UI 담당자가 작업한 Figma 가이드를 전달받으면 시작됩니다. 작업은 Figma 가이드와 Tech Spec의 내용대로 수행합니다. 작업을 진행하는 과정에서 작업 간 해결해야하는 이슈가 발생하거나 동료 작업자가 알아야할 내용이 생겼다면 적극적으로 작업 티켓 채널에 공유합니다.
코드 작업이 끝나면 QA와 코드 리뷰를 진행합니다. Jira 티켓명과 동일한 이름의 GitHub 브랜치를 생성하고 PR 요청을 보내면 CD(Continuous Deployment)를 통해서 작업 결과물을 확인할 수 있도록 deploy preview가 생성되고, 이렇게 생성된 deploy preview를 작업 티켓 채널에 공유하면 UX, UI 담당자가 QA를 진행합니다.
QA가 어느 정도 마무리 단계에 접어들면 코드 리뷰를 시작합니다. 코드 리뷰 단계에서는 장애가 발생할 여지가 있는 부분이 있는지, 코드 컨벤션에 맞지 않는 부분이 있는지 등을 확인합니다. 기능 구현에 대한 더 좋은 의견이 있다면 자유롭게 의견을 나누기도 합니다.
QA와 코드 리뷰가 모두 완료되고 프로덕션에 반영되기 전 최종적으로 검토하는 단계인 Final QA까지 마무리되면 백엔드 → i18n 시트 → 프론트엔드 차례로 릴리즈를 진행합니다. 코드를 프로덕션 브랜치에 merge하면 배포 파이프라인을 통해서 자동으로 배포됩니다. 릴리즈 후에는 프로덕션 환경에서 릴리즈 된 기능을 직접 테스트하고 Sentry, LogRocket을 이용해 모니터링을 진행하며 릴리즈 된 기능에 문제가 발생하지 않는지 확인합니다.
성공적으로 릴리즈됐다면 PM이 새로운 기능의 릴리즈를 알리는 Slack 채널에 모든 구성원에게 우리의 프로덕트가 조금 더 성장했다는 기쁜 소식을 공유하고, 여러가지 이모지를 달며 함께 축하하는 시간을 갖습니다.
3. ★개발환경을 소개해주세요.
장비는 공통적으로 Mac을 사용합니다.
Git, GitHub로 형상관리합니다.
React와 TypeScript를 사용해 개발합니다.
Cypress를 사용해 e2e 테스트를 진행합니다.
Vercel과 GitHub Actions를 이용해 CI/CD를 구성하고 있습니다.
모니터링을 위해 Sentry, LogRocket 등을 사용합니다.
효율적인 협업을 위해 Slack, Notion 등을 사용합니다.
어떤 도구든지 필요하면 추가하고, 필요 없으면 제거합니다.
4. 코드리뷰 문화를 소개해주세요!
작업을 진행한 feature 브랜치를 프로덕션 브랜치에 병합하기 위해서는 Pull Request를 통해 최소 3명의 팀원에게 Approve를 받아야 합니다. 리뷰를 요청하는 Slack 채널에 3명의 리뷰어를 태깅하고, 리뷰어가 중요하게 체크해주었으면 하는 내용을 적어 코드 리뷰를 요청합니다.
PR에는 Jira 티켓 링크, 코드 리뷰 Due Date, 주요 변경사항 등을 함께 기록해 리뷰어에게 충분한 정보를 제공하려 노력하고 있습니다.
코드 리뷰는 작업자가 요청한 중요하게 체크해야 하는 부분들을 중심적으로 보되, 작성된 코드가 팀에서 정한 스타일과 어긋나는 부분은 없는지, 재사용성이 고려되었는지, 적절한 디자인 시스템 컴포넌트가 사용되었는지 등을 함께 확인합니다.
코드 리뷰를 진행하는 정기적인 시간은 따로 정해두지 않지만, 사전에 공유된 Due Date 안에 코드 리뷰를 끝낼 수 있도록 개인 일정에 맞춰 자유롭게 진행하고 있습니다.
당연하겠지만, 좋은 코드베이스를 만들기 위해 건설적인 토론을 지향하며, 더 나은 코드 리뷰 문화를 만들어나가기 위해 항상 고민합니다.
5. 장애나 긴급상황에서는 어떤 프로세스로 대응하시나요.
Sentry와 LogRocket을 사용해서 모니터링을 진행하고 있습니다. 장애가 발생하면 Sentry에서 이슈를 수집해 Slack 채널에 알림을 보내고, 장애 알림을 확인한 작업자는 Sentry를 통해 에러를 확인하고 LogRocket을 통해 장애가 어떤 동작을 거쳐서 발생하는지 사용자의 실제 행동을 관찰하여 디버깅을 진행합니다.
Sentry에서 수집한 이슈를 알려주는 Slack 채널
LogRocket을 통해 사용자의 실제 행동을 관찰하며 디버깅합니다.
장애를 인지하면 최대한 빠른 시간 내에 핸들링이 가능한 작업자가 대응하고, 장애 대응이 완료되면 Slack으로 유관 작업자들과 팀원들에게 장애 대응 내용을 공유합니다.
프로덕션에 영향을 크게 미치는 크리티컬한 장애의 경우, 장애 대응이 완료된 후 Postmortem을 진행합니다. 장애 이슈가 미친 영향과 이슈 타임라인, 이슈가 발생할 수 있었던 근본적인 원인과 해결방법을 함께 논의하며 개선을 위해 진행해야 하는 액션아이템들을 선정합니다.
Postmortem Template
Postmortem 이후에는 생성된 액션아이템을 통해 비슷한 장애가 다시 발생하지 않도록 시스템을 개선하고자 노력하고 있습니다.
Postmortem에 대해 소개했는데, 저희 조직 내에서 장애는 사람 탓이 아니라 시스템 탓이라는 기조를 가지고 있습니다. 덕분에 조금 실수를 하더라도 주눅들지 않고, 계속 도전적으로 일할 수 있는 것 같습니다.
6. 기술 도입이나 업무 영역의 확장이 자유로우신 편인가요.
매주 진행하는 프론트엔드 팀 회고에서 업무 프로세스 개선을 위해 도입하고 싶은 새로운 기술에 대해 공유하는 시간을 갖습니다. 누구나 기술 도입을 제안할 수 있고, 팀원들과 논의해 충분히 가치가 있다고 판단되면 제안한 팀원이 신기술에 대해 리서치를 진행한 뒤 KT(Knowledge Transfer) 세션을 통해 다른 팀원들에게 기술에 대해 소개하고 프로덕션에 도입하는 티켓들을 진행합니다. 실제로 최근 프론트엔드 팀에서는 작은 단위의 상태 관리를 위해 Redux Saga를 React Query와 Recoil로 마이그레이션 하는 작업을 진행하고 있습니다. 해당 작업도 회고 시간에 위와 같은 프로세스를 통해 진행되었습니다.
조직장은 주기적으로 팀원과 1:1 미팅을 진행해서, 각 팀원에게 하고 싶은 일에 대한 의견을 듣고 관련 작업을 assign해줄 수 있도록 준비합니다. 업무 영역의 확장 또한 하고자 한다면 얼마든지 할 수 있습니다. 회사 내에 ‘나와는 상관없는 다른 팀의 이야기'라는 개념 자체가 없기 때문에 개발자가 디자인에 대해, 기획자가 개발에 대해 서슴없이 이야기할 수 있는 환경이 갖추어져 있습니다.
AB180 유승연 개발자님 데스크
나의 개발 Tip
1. 일하는데 가장 중요하게 고려하는 데스크 세팅은 무엇인가요?
데스크 세팅을 중요하게 생각하는 편은 아니지만 (당연하게도) 맥북, 종이와 필기구는 반드시 있어야 합니다.
보통은 Notion을 사용해 기록한 내용을 관리하지만, 생각을 정리할 때에는 직접 손으로 적어가면서 정리하는 것이 버릇이 되어서 노트와 볼펜은 업무 필수품입니다.
마우스보다는 트랙패드를 선호합니다. 키보드는 딱히 가리지 않지만 최근에는 매직키보드에 완전히 적응해서 당분간은 기계식으로 돌아가진 않을 것 같습니다.
2. 최근 가장 관심있는 기술스택(예, OS/ 언어) 은 무엇이며, 왜 관심을 가지게 되셨나요?
Airbridge의 Integration Overview 페이지
d3와 같은 데이터 시각화 라이브러리에 관심이 있습니다. 최근에 Integration Overview 페이지를 작업하면서 사용해보게 되었는데, Airbidge의 대시보드가 많은 데이터를 보여줘야하는 만큼 정제된 데이터를 사용자가 파악하기 쉽게 시각화해서 제공할 수 있다면 좋겠다는 생각에 관심을 갖게 되었습니다.
3. 현재 하고 있는 업무의 역량을 키우기 위한 나만의 노력은 무엇인가요?
출퇴근 시간을 이용해 개발 관련 article들을 읽기도 하고, 프론트엔드 개발자를 위한 세미나가 열릴 때면 꼭 참석하고 있습니다. 주말에는 마케터, PM, 백엔드 개발자, UX 디자이너 등 다양한 직군의 작업자들과 함께 사이드 프로젝트를 진행하고 있습니다.
AB180 열일 중인 동료들
우리회사는 개발자를 위해 이렇게 지원합니다.
1. 함께 일하는 동료들을 소개해주세요!
AB180은 좋은 동료가 복지라고 생각될 정도로, 정말 우수한 사람들이 모여 일하고 있습니다.
AB180은 현재 프론트엔드 직군 채용을 진행하고 있습니다. AB180의 프론트엔드 팀에서는 UI/UX, 테스트, 시각화, 설계 및 최적화의 각 분야를 모두 경험할 수 있습니다. 한 번에 수천, 수만개의 데이터가 들어오고 나가기 때문에 많은 데이터를 어떻게 하면 빠르고 보기 좋게 보여줄 수 있는지, 렌더링 최적화를 위해 상태 관리는 어떻게 해야 하는지 등을 모두 고려해야 합니다. 쉽지 않은 과정이지만 그만큼 많은 성장을 이룰 수 있는 곳이라고 생각합니다.
2. 어떤 사람들과 함께 일하고 싶으신가요?
우리가 가진 문제를 함께 논의하며 적극적으로 개선할 수 있는 분, 함께 즐겁게 일할 수 있는 분을 설레는 마음으로 기다리고 있어요! 혹시 이 글을 읽으시다가 관심이 생기셨다면 꼭 지원 부탁드립니다.
3. 기술 역량 향상을 위한 교육 및 학습의 기회를 소개해주세요.
각 팀원이 전문성을 키울 수 있도록, 최소 3개월에서 최대 6개월의 체계적인 온보딩 커리큘럼을 운영하고 있습니다. 온보딩 커리큘럼에는 도메인 지식을 학습할 수 있는 세션들이 준비되어 있어, 신규 입사자가 더 쉽고 빠르게 업무 배경지식을 익힐 수 있도록 돕고 있습니다.
AB180의 모든 구성원은 UI/UX 팀이 주관하는 Product Research, CSM 팀에서 주기적으로 외부 연사를 초대해 진행하는 세션, 프론트엔드 팀과 백엔드 팀 내에서 진행하는 KT(Knowledge Transfer) 등에 자유롭게 참여할 수 있습니다.
팀 내에 지정된 멘토가 1:1로 지도, 조언을 통해 신규입사자의 원활한 온보딩을 돕습니다. 멘토링비도 지원되는 덕분에 같이 맛있는 점심도 먹을 수 있습니다
제한 없는 도서 구매 지원, 강의/세미나/컨퍼런스 등 참가비 지원, 자격증 응시료 지원 등 기술 역량 향상을 위한 비용을 지원해주고 있습니다.
4. 우리회사의 테스트 기기현황 및 업무환경을 자랑해주세요.
MacBook Pro 및 고사양(QHD) 모니터, 키보드, 마우스, Magic Trackpad 등 각자에게 편한 주변기기 지원 및 스탠딩 데스크, 시디즈 의자
최근에는 M1 Mac을 구매할 수 있게 되어 업무 환경이 더 좋아졌습니다
맥은 2년마다 변경할 수 있습니다.
유료 소프트웨어 구매
GitKraken, Vercel 등의 업무에 필요한 소프트웨어 구매 비용도 지원하고 있습니다.
AB180 회의실
AB180 의 채용 포지션이 궁금하다면?! 점핏에서 확인해보세요
점핏에서 개발자로 취업하고 취업축하금 받으세요!