프론트엔드 엔지니어 창진님 이야기

ABLY TEAM | 에이블리 팀
8 min readJul 25, 2023

넥스트 커머스 에이블리를 만드는 사람들을 만나보는 ‘에이블리언이라 블리다’* 시리즈

▶️ 백엔드 엔지니어 수겸님 이야기 먼저 보러가기

“하나의 쇼룸을 만들려면 창고에 쌓여있는 수많은 제품을 고객들이 편하게 둘러볼 수 있도록 쇼룸에 예쁘게 진열하잖아요? 프론트엔드 엔지니어는 그것과 비슷해요.”

에이블리 팀에는 ‘에이블리’라는 쇼룸에서 사용자들이 다양한 상품을 더 편하게 탐색하고 쇼핑할 수 있도록 돕는 프론트엔드 엔지니어 분들이 있어요. ‘에이블리에서 프론트엔드 엔지니어로 일한다는 것’은 어떤 것인지, 요즘은 어떤 일에 집중하고있고, 앞으로 어떤 동료들과 함께하고 싶은지… 창진님을 만나 에이블리 프론트엔드 엔지니어의 A to Z를 살펴봤어요.

*에이블리언 : 에이블리 구성원을 지칭하는 말

Q. 안녕하세요. 자기소개 부탁드립니다.

창진 : 안녕하세요. 에이블리 프론트엔드 엔지니어 최창진입니다.

Q. 반갑습니다 창진님, 에이블리 프론트엔드 엔지니어는 주로 어떤 일을 하는지 궁금해요.

창진 : 에이블리 프론트엔드 엔지니어는 하나의 목표 중심으로 만들어진 스쿼드*에 소속되어, 각 스쿼드 목표를 달성하기 위한 과정의 프론트엔드 개발을 담당하고 있어요. 스쿼드마다 달성하고자 하는 세부 목표는 모두 다르지만, 공통적으로 에이블리 유저와 셀러 모두가 더 편안한 쇼핑 환경을 경험할 수 있도록 개선하는 일을 하고 있는데요. 그래서 에이블리 프론트엔드 엔지니어는 마치 ‘쇼룸’같은 역할을 하는 것 같아요. 하나의 쇼룸을 만들려면 창고에 쌓여있는 수많은 제품을 고객들이 편하게 둘러볼 수 있도록 쇼룸에 예쁘게 진열하잖아요? 그것과 비슷해요. 에이블리라는 쇼룸에서 사용자들이 다양한 상품을 더 편하게 탐색하고 쇼핑할 수 있도록 개선하는 작업을 하죠.

프로모션 이벤트를 생성해주는 이벤트 에디터 프로그램인 ‘A-ditor (ABLY editor)’ 만들었는데요. 에이블리는 각종 프로모션과 이벤트가 자주 진행되는데, 따로 에디터 프로그램이 없다 보니 이벤트가 발생할 때마다 엔지니어들이 함께해야 업로드가 가능했어요. 그래서 포토샵 같은 자체 에디터 프로그램을 제작하게 되었고, 덕분에 같이 협업하는 비즈니스 직군 구성원 분들이 엔지니어가 없이도 쉽게 프로모션을 제작할 수 있는 환경이 됐죠. 또한 기존에는 이벤트 페이지에 이미지만 넣을 수 있었는데, A-ditor로 제작하는 페이지는 동영상이나 캐러셀*도 가능하게 되면서 유저가 더 색다르고 다양한 이벤트, 프로모션 콘텐츠를 접할 수 있게 됐어요. 이렇게 백오피스에서 에이블리를 잘 운영할 수 있도록 돕는 작업을 통해 유저의 에이블리 사용 경험을 개선하기도 하죠.

*스쿼드 : 한 가지 목표를 달성하기 위해 다양한 직군의 구성원이 모여있는 에이블리의 애자일(Agile) 조직 구조. 한 스쿼드 당, 마치 하나의 작은 스타트업처럼 개발, 데이터, 디자인, 비즈니스 등등 다양한 직군이 모여 목표를 달성함.

*캐러셀 : 이미지나 텍스트 콘텐츠를 슬라이드 형식으로 표시하는 것.

Q. 그렇군요. 최근엔 또 어떤 일에 집중하고 계신가요?

창진 : 최근에는 웹뷰(WebView)로 확장하기 위한 기반을 만들고 있어요. 웹뷰란 에이블리 앱에서 웹 환경으로 화면을 띄우는 것을 말하는데요. 보통 앱에서 사용자에게 새로운 화면을 보여주기 위해선 무조건 사용자가 앱을 업데이트해야 하잖아요. 그런데 웹뷰를 사용하면 (사용자가 직접 업데이트해야 하는) 그런 과정이 없이, 저희가 화면을 업데이트하면 사용자가 바로 최신 화면을 볼 수 있게 되죠.

에이블리는 좋은 아이디어가 있을 때 빠르게 실험해 보고 인사이트를 얻는 것을 가장 중요하게 생각하며 일하고 있는데요. 다양한 실험을 바로 적용해 보기 위해선 웹뷰 환경이 가장 적합하기 때문에 그 기반을 다지기 위한 작업을 하고 있어요.

Q. 저처럼 앱 업데이트를 잘하지 않는 사람에게는 너무 좋은 방식이네요. (웃음) 하지만 화면이 자주 변화하면 그만큼 유저 입장에서 단점도 있지 않을까요?

창진 : 맞아요. 웹뷰를 사용하면 트레이드오프가 있을 수 있죠. 저희 입장에서는 빠르게 화면을 바꿔보면서 다양한 실험을 해볼 수 있다는 장점이 있지만, 그만큼 사용자 경험이 떨어질 수 있어요. 앱에는 자연스러운 사용자의 제스처나 애니메이션 같은 것들이 있는데, 웹뷰에서는 그런 부분을 자연스럽게 구현하는 것이 상대적으로 어렵죠.

Q. 어떻게 보면 사용자 경험을 해칠 수 있는 리스크가 있는 것인데, 그런데도 웹뷰 환경으로 기반을 다져가는 이유가 있을까요?

창진 : 가장 큰 이유는 에이블리가 애자일 하게 일하는 조직이기 때문이에요. 애자일 하다는 것은 최대한 빠르게 배포하고, 그 피드백을 바탕으로 속도감 있게 개선해 나가는 것을 의미하잖아요. 그러려면 A/B 테스트를 많이 해볼수록 좋은데, 웹뷰가 즉각적으로 새로운 화면을 반영해서 빠른 피드백을 받을 수 있어요.

다만, 말씀하신 것처럼 사용자 경험을 해칠 수 있다는 리스크를 최대한 줄이는 것이 가장 큰 과제인데요. 그러기 위해선 엔지니어 본인이 직접 앱을 많이 사용해봐야 해요. 앱에서의 동작과 웹에서의 동작을 직접 비교하면서 제스처나 애니메이션 등을 최대한 앱과 비슷하게 구현하는 것이 가장 중요하죠.

Q. 그렇군요. 에이블리에서 프론트엔드 엔지니어로 일하면서 가장 좋은 점은 무엇인가요?

창진 : 일단 에이블리는 패션 플랫폼 사용자 수 1위인 플랫폼*이잖아요. 내가 만든 기능이 유저에게 직접적인 영향을 주고, 많은 유저가 그것으로 인해 좋은 경험을 했을 때 엄청 뿌듯하죠. 반대로 어떤 기능은 유저에게 고통(?)을 줄 수도 있어서 건강한 부담감과 책임감을 느끼며 일하는 것도 재미있어요. 방금도 피처 하나를 배포하고 왔는데 너무 떨리더라고요. (웃음) 애자일 조직이다 보니 빠른 실험과 구현을 우선시해서 다양한 경험을 해볼 수 있다는 점도 즐거워요. 이런 경험을 아무 데서나 할 수 있는 게 아니니까…

또 에이블리는 데이터 중심으로 사고하는 문화가 잘 잡혀있는데요. 사람이 직관적으로 ‘이럴 것이다.’ 생각하고 판단하는 것이 아닌, 객관적인 숫자와 데이터를 바탕으로 의사 결정하는 것이 큰 장점이라고 생각해요.

Q. 그럼 반대로 아쉬운 점도 있을까요?

창진 : 이건 애자일 조직의 단점 같기도 해요. 아무래도 속도감 있게 다양한 시도를 하는 것을 우선시하다 보면 코드 퀄리티를 놓치기 쉬운 순간들도 있어요. 그럴 때는 프론트엔드 엔지니어끼리 함께 고민하면 좋은데, 같은 직군끼리 일하는 팀 단위 구조가 아니다 보니 아쉬울 때가 있죠.

그래서 ‘짝꿍 스쿼드’라는 리뷰 문화가 만들어졌어요. 비슷한 도메인을 다루는 스쿼드끼리 1:1로 맵핑해 서로 필수 리뷰어를 지정해 두는 것이죠. 어떤 피처를 배포하기 전에, 짝꿍 스쿼드의 필수 리뷰어가 리뷰하고 동의해야지만 배포를 할 수 있어요.

또 각 스쿼드에 흩어져 일하면서 어려움이 있을 땐 챕터*의 도움도 많이 받아요. 슬랙의 챕터 채널에서 도움을 요청하면, 다들 바쁜 와중에도 자기 일처럼 같이 고민해 주시니까 너무 든든하죠.

슬랙 커뮤니케이션에 한계가 있을 땐 연차 관계없이 자유롭게 챕터 회의를 소집하기도 해요. 상투적인 말 같지만, 이럴 때 ‘역시 동료가 최고의 복지다!’라는 생각을 많이 해요. (웃음) 챕터 내에서도 번갈아 가며 한 명씩 리뷰어를 지정해서 리뷰하고 있는데요. 리뷰어가 됐을 때 제가 다루지 않고 있는 도메인의 코드를 보면서 스스로 공부도 되기 때문에 좋은 것 같아요.

*챕터 : 같은 직군의 구성원을 지칭하는 단위. 하나의 스쿼드에 여러 직군의 구성원들이 스쿼드 목표를 중심으로 모여 있다면, 챕터는 일반적인 ‘팀 단위’처럼 전문 분야가 같은 구성원들의 모임을 의미함.

Q. 이것 외에도 챕터 구성원끼리 함께하는 문화가 또 있을까요?

창진 : 함께 직무적으로 더 성장하기 위해서 스터디도 하고 있어요. 항시 하는 것은 아니고, 재미있는 주제가 있으면 누구든지 드리븐 할 수 있죠. 최근까지는 OOP* 스터디를 매주 했어요.

*OOP: 객체 지향 프로그래밍(Object-Oriented Programming)

Q. 에이블리 채용에 관심 있으신 분들은 커뮤니케이션 방식이라든지.. 에이블리의 일하는 문화가 어떤지 많이 궁금하실 것 같아요. 창진님께서 실제로 느끼는 에이블리의 ‘따뜻한 프로페셔널’은 어떤 느낌인가요?

창진 : 기본적으로 서로 이해하고 배려하려는 노력을 많이 하는 것 같아요. 스쿼드에는 다양한 직군이 모여있는데, 협업하다 보면 상대의 상황을 100% 이해하기 어려운 순간이 있기 마련이잖아요. 그럴 때마다 에이블리언들*은 각자의 입장만 고집하기보단, 서로의 입장에서 생각하고 양보하면서 배려하죠. Tech 직군과 Non-Tech 직군끼리 협업할 때 커뮤니케이션하는 과정에서 어려움이 많다고 하는데, 에이블리는 그런 어려움은 거의 없는 것 같아요.

*에이블리언 : 에이블리 구성원을 의미함.

Q. 창진님께서는 실제로 프론트엔드 엔지니어 채용에도 참여해주시고 계신데, 앞으론 어떤 동료들과 함께하고 싶으신가요? 미래의 동료에게 한마디 부탁드립니다.

창진 : 높은 책임감을 가진 분들이면 좋을 것 같아요. 에이블리 프론트엔드 엔지니어는 스쿼드의 일원으로 아이데이션, 기획 단계부터 배포까지 함께하기 때문에, 주도적으로 고민하고 문제를 해결하려는 자세를 가진 분들이라면 에이블리에서 즐겁게 일하실 수 있을 거예요.

또 다양한 직군의 구성원분들과 협업하기 때문에 소프트 스킬도 매우 중요하죠. 아까 말씀드린 것처럼 최고의 복지인 동료들이 있다고 자신 있게 말할 수 있어요. 배우고 싶고, 닮고 싶은 동료와 함께한다는 것 자체가 스스로에게도 큰 성장이니까요.

--

--

ABLY TEAM | 에이블리 팀

아무도 상상하지 못하는 넥스트 커머스를 만들어갑니다. 지금 에이블리에 합류하세요! https://ably.team