데이터 분석 툴 프론트엔드 개발이 특별한 이유

데이터 분석 툴 프론트엔드 개발이 특별한 이유

오픈서베이는 IT 기반의 서베이 플랫폼을 제공하고 리서치 비즈니스를 운영합니다. 오픈서베이나 피드백에서 직접 설문 폼을 작성하고 오픈애널리틱스로 설문 결과를 확인하는 일련의 과정에는 우리 눈에 보이는 오픈서베이를 만드는 프론트엔드 개발의 역할이 큽니다. 특히 그 진가는 원하는 분석 기준에 맞게 드래그 앤 드롭하는 즉시 수많은 데이터가 가공되어 쉽게 분석할 수 있는 오픈애널리틱스 프로덕트에서 두드러지죠. 백엔드가 아닌 프론트엔드 사이드에서 데이터를 처리하는 덕분에 사용자는 더욱 간편하고 빠르게 데이터를 분석을 할 수 있습니다.

오픈애널리틱스를 담당하는 김웅아 프론트엔드 개발 챕터 리드(이하 블라드)는 사용자 중심의 프로덕트를 위해 섬세하게 고민하는 개발자 중 한 명입니다. UX(User Experience)와 UI(User Interface)를 고려한 디테일은 물론, 페이지가 더 빠르게 구현되도록 성능 개선과 최적화 등 도전적인 과제도 즐겁게 수행하죠. 서비스와 사용자와의 접점에서 더 나은 사용자 경험을 만들기 위해 1픽셀까지 숙고하는 블라드가 오픈서베이 프론트엔드 개발의 가치와 매력을 소개합니다.

안녕하세요, 블라드!

반갑습니다. 프론트엔드 개발 챕터 리드 블라드입니다. 1픽셀의 미학을 만드는 프론트엔드 개발자로 일한 지는 벌써 8년 차, 오픈서베이에 입사한 지는 만 2년이 넘었네요.

‘1픽셀의 미학’이라니 표현이 굉장히 흥미로워요.

우리 오감 중에서 시각은 정말 중요한 부분을 차지해요. 웹 개발 중 프론트엔드 개발이 바로 우리 눈에 보이는 페이지, 즉 사용자가 눈으로 보며 경험하는 영역을 만드는 일입니다. 백엔드 개발이 집의 뼈대를 세운다면 프론트엔드 개발은 외관이나 인테리어를 담당하는 거죠.

사람들의 시각은 예민해서 쭉 나열된 버튼 중에 하나만 위치가 조금 흐트러져도 눈치챌 수 있어요. 폰트 사이즈를 하나 정할 때도 사용자마다 다른 취향을 고려해서 최적의 의사결정을 내려야 합니다. 긍정적인 사용자 경험을 위해서는 사소해 보이는 부분까지 세심하게 작업하기 때문에, 프론트엔드 개발을 1픽셀의 미학과 같다고 생각해요.

프론트엔드 개발은 어떻게 시작하게 되셨나요?

학부 때는 게임 소프트웨어 개발을 전공했습니다. 클라이언트, 서버 사이드 모두 개발했었는데 그때부터 눈에 보이는 일인 클라이언트 사이드, 다시 말해 프론트엔드 개발에 흥미가 생겼어요. 제가 코드를 쓰면 그 변화를 화면에서 즉각적으로, 직관적으로 확인할 수 있는 게 재미있었거든요. 또 작업한 산출물은 사용자와의 접점이 되고 피드백을 빠르게 받을 수 있다는 것도 큰 매력이라고 느꼈어요.

본격적인 커리어 시작은 윈도우용 응용 프로그램 프론트엔드 개발이었는데, 시간이 흐르고 점점 웹 개발이 더 중요해질 무렵 기회가 생겨 웹 프론트엔드 개발로 업무를 전환하게 됐습니다. 훨씬 더 재미있었어요. 같은 기술이더라도 구현이 비교적 쉬워서 효율적으로 일할 수 있고, 생산성이 올라가 제가 원하는 업무에 시간을 쓸 수 있더라고요. 다양한 시도도 해보고 만들어보고 싶은 걸 만들면서 일에서 즐거움을 더 크게 느낄 수 있었습니다.

“긍정적인 사용자 경험을 위해 화면 구석구석까지 세심하게 구현하는
프론트엔드 개발은 1픽셀의 미학을 만드는 일이죠.”

블라드는 오픈서베이에서 어떤 프로덕트를 개발하고 계신가요?

오픈서베이는 웹 기반의 서베이 플랫폼이나 피드백(Feedback), 모바일 앱인 오베이(Ovey), 큐럼블(Qrumble) 등 다양한 프로덕트를 개발합니다. 저는 그중에서 데이터 분석 툴인 오픈애널리틱스(OpenAnalytics)를 맡고 있어요.

오픈애널리틱스는 수집한 데이터를 잘 분석할 수 있도록 적합한 방식으로 시각화해 제공하는 프로덕트예요. 태블로나 구글 데이터 스튜디오처럼 시각적으로 데이터를 분석할 수 있게 도와줘서, 데이터에 익숙하지 않거나 데이터 활용을 어려워하는 분들도 쉽게 분석을 시작할 수 있어요.

오픈애널리틱스는 데이터를 시각화하는 프로덕트인 만큼 프론트엔드 개발 파트의 영역이 특히 중요한 역할을 한다고 들었어요.

오픈애널리틱스 프로덕트의 차별점을 먼저 말씀드려야겠네요.

사실 프론트엔드 개발은 백엔드에서 가공된 데이터를 받아 ‘어떻게 사용자 편의에 맞게 잘 보여주는가’의 일인데요. 화면에 보여줄 데이터를 백엔드에서 먼저 처리하고 그걸 프론트엔드에서 보여주는 게 대부분이죠. 하지만 오픈애널리틱스 프로덕트는 이 과정이 조금 다릅니다. 서버에서 Raw 데이터를 그대로 받고 프론트엔드 개발 영역에서 데이터를 처리해요. 방대한 양의 데이터를 분석하는 프로덕트에서 더 나은 사용성을 만들기 위한 노력 중 하나죠.

그 배경을 더 자세히 설명해주실 수 있을까요?

오픈애널리틱스에서는 설문을 통해 수집된 수많은 데이터를 목적에 따라 여러 기준으로 분석할 수 있어요. 이 데이터를 서버에서 처리한다면 분석 기준을 리셋해 교차분석표를 만들 때마다 데이터를 매번 새롭게 로드해야 합니다. 이렇게 되면 사용자가 데이터를 분석하는 데 시간이 걸리고 불편해져요. 자유자재로 데이터를 분석할 수 있게끔 해서 데이터 활용을 높이려는 오픈애널리틱스 프로덕트 목적에 맞지 않죠. 다시 말해 사용자 편의를 위해 데이터를 프론트엔드 사이드에서 처리합니다.

때문에 데이터 가공을 위해 가중치를 계산하거나 필터를 설정하는 등 프론트엔드 개발에서 다소 복잡한 로직을 짜야 하고, 성능 최적화 작업도 해야 해서 작업이 쉽진 않은 것 같아요.

오픈애널리틱스는 오픈서베이와 리서치 비즈니스를 진행한 기업이나 개인 고객이 최종 확인하는 산출물이고 수많은 데이터를 보여주고 있거든요. 데이터가 큰 프로젝트도 꽤 많은데 사용자 입장에선 데이터의 크기와 상관없이 페이지가 빠르게 로드되는 게 사용성에 큰 영향을 미치거든요. 프론트엔드 개발에서도 성능 개선이 중요하죠.

하지만 해냈을 때 뿌듯함도 더 큽니다. 이런 도전적인 과제는 어디서나 만날 수 있는 게 아니고, 처리하는 데이터의 양도 많다 보니 다양한 경험을 할 수 있으니까요. 또 데이터의 시대라고 말하는 요즘, 누군가에겐 큰 도움이 될 수 있는 프로덕트니까 그 가치를 개발하는 점에서 오는 즐거움도 있습니다. 이 프로덕트를 활용해서 누군가의 데이터 활용도를 높일 수 있고, 기업들이 좋은 의사 결정도 할 수 있으니까요.

“방대한 데이터를 프론트엔드 개발에서 처리하고 성능 개선도 고민하는 건
굉장히 도전적인 과제지만 잘 해냈을 때 느끼는 즐거움도 큽니다.”

최근 오픈애널리틱스뿐 아니라 다른 프로덕트의 개발에도 참여한 적 있으신데요. 중요한 순간 찾게 되는 ‘멀티 플레이어’인 블라드만의 협업 노하우는 무엇일까요?

우선 오픈서베이가 개발한 여러 프로덕트는 완전히 분리된 게 아니라 유기적으로 연결되어 있습니다. 그래서 OneQ나 모바일 쪽 프로젝트에도 참여할 수 있었죠.

스쿼드 내에서 또는 타 스쿼드와 일할 때 저만의 노하우라고 한다면 커뮤니케이션에서 발생할 수 있는 갈등을 최대한 줄일 수 있도록 상대방의 입장에서 많이 생각하려고 합니다. 개발은 협업이 기본이고, 특히 프론트엔드 개발은 그 대상이 기획, 백엔드, 디자인, QA 등 다양하고 심지어 사용자와도 맞닿아 있어요. 상대방 입장에서 생각해 커뮤니케이션하는 게 중요하죠.

코드 리뷰할 때 특히 이런 노력을 많이 기울이게 되는 것 같아요. 생각해보면 코드도 글쓰기처럼 일종의 창작 활동이에요. 글쓰기에 정답은 없지만 읽기 더 쉬운 글이 있고 글이 더 나아질 여지는 늘 있는데, 코딩도 마찬가지예요. 사람마다 스타일이 다르고 정답은 없지만 서로 리뷰하면서 더 발전할 수도 있으니 코드 리뷰를 진행합니다. 이때 더 나은 방향을 공유하려는 의도라고 하더라도 자칫 공격적으로 받아들여질 수도 있어요. 개발자 모두 자기 코드에 애착이 있거든요. 그래서 최대한 오해 없이 서로 감정을 해치지 않는 커뮤니케이션 하려고 해요. 단어를 선택할 때도 좀 더 신경을 쓰는 식으로요.

오픈서베이의 짤 부자로 알려져 있는데 이것도 커뮤니케이션 노하우 중 하나인가요?

비슷해요 (웃음). 오픈서베이는 슬랙 메신저로 소통을 정말 많이 해요. 자게나 힐링 채널은 매일 활성화되고 저도 종종 대화에 참여할 때가 있는데요. 재미있는 농담을 하고 싶은데 텍스트로만 전하면 뉘앙스를 전할 수가 없어서 제 의도와는 다르게 해석될 수 있겠다는 생각이 들었어요. 이럴 때 인터넷 밈이나 짤을 활용하면 이미지 한 장에 상황의 맥락이 다 들어가 있잖아요. 오해 없이 임팩트 있게 제가 하고 싶은 이야기를 전할 수 있어서 자주 씁니다.

블라드가 개발에 있어서 가장 많이 신경 쓰는 부분은 무엇인가요?

프론트엔드 개발인 만큼 UX/UI에 대해 가장 많이 고려합니다. 실제로 개발하는 과정에서 PM 분들의 기획 사항 외에도 사용자의 입장을 생각해 적극적으로 의견을 내기도 해요. 사용성 개선을 위해 같은 동작에서도 클릭 수를 줄인다거나 사용자가 예상할 수 있고 익숙한 방향으로 프로덕트가 동작하게끔 제안하는 편입니다.

그리고 프로덕트 개발에 대해서는 장기적인 최적화를 고민해요. 프로덕트가 당장 잘 동작하는 것도 중요하지만 장기적으로 잘 운영되는 것도 매우 중요합니다. 최대한 빨리 해결되어야 할 이슈는 즉각적으로 문제를 해결하는 방향으로 코드를 수정 및 배포하지만, 이후에도 재발생 가능성 높은 이슈인지 다시 고민하고 근본적인 원인을 찾아 최적화하려고 하죠. 비슷한 이유로 코드도 가독성 높게 작성하려고 합니다. 그래야 팀 전체적으로 생산성을 높일 수 있으니까요. 이 부분은 오픈서베이의 개발자 모두가 다 비슷한 마음일 것 같아요.

올해 들어서는 프론트엔드 개발 챕터의 리드를 맡게 되셨는데요. 전후로 어떤 변화가 있으셨는지 궁금합니다.

오픈서베이는 제품개발그룹은 물론이고 회사 전체가 수평적인 문화를 가지고 있어서 리드를 맡고 크게 달라진 건 없습니다. 리드 업무가 무엇이라고 정의된 것은 없지만, ‘챕터에 도움이 될만한 무언가를 하고 싶다’라는 개인적인 욕심이 생기더라고요. 일종의 책임감인 것 같아요. 그래서 어떤 것에 기여할 수 있을까 고민하다가 몇 달 전 챕터 스탠딩 미팅을 제안해 진행하고 있습니다.

스탠딩 미팅은 어떤 이유로 제안하게 된 건가요?

첫 계기는 코로나 상황 때문이었어요. 코로나 확산이 거세서 대부분 재택으로 업무를 하던 때였는데 그 무렵 프론트엔드 챕터 규모가 커지고 있었거든요. 그런데 재택근무로 얼굴을 마주할 기회가 없으니 챕터 간 친밀감이나 유대감이 좀 부족해지더라고요. 프론트엔드 개발자끼리도 스쿼드가 다르면 소통할 일이 별로 없거든요. 그래서 꼭 일 얘기를 하지 않더라도 스몰 토크하며 작은 접점이 있었으면 하는 마음에 스탠딩 미팅을 제안했죠.

스탠딩 미팅은 매일 아침 10~15분가량 짧게 진행합니다. 가볍게 일상을 나누기도 하지만 전날의 업무나 오늘 계획한 업무 현황을 공유하고, 진행하는 일의 고민을 공유하기도 해요. 챕터 내 누군가가 비슷한 경험이 있다면 예상되는 이슈를 얘기해주며 서로 도움도 주고요. 새로운 기술이 나오면 정보를 나누기도 합니다.

“오픈서베이 제품개발그룹은 시니어뿐 아니라 주니어에게도 기회가 많은 편이에요.
새로운 기술 도입에도 열려 있어 프론트엔드 개발자에게 특히 매력적인 환경입니다.”

짧지만 생산적인 시간이군요. 이밖에 프론트엔드 개발 환경이나 분위기는 어떤가요?

프론트엔드를 포함한 제품개발그룹 전반의 개발 환경이기도 한데요. 스쿼드에 관계없이 제품개발그룹 내 모두에게 코드가 오픈되어 있어서 누구나 코드를 리뷰할 수 있습니다. 개선 코멘트를 남기거나 PR(Pull Request)을 보내는 것도 자유롭고요. 다양한 의견을 나누는 데에 열린 분위기라 편하게 커뮤니케이션할 수 있어서 주니어에게도 기회가 꽤 많은 편입니다.

기술 스택에 대해서도 마찬가지입니다. 개발자 입장에선 활용하고 싶은 기술이 있으면 실무에 적용하고 싶은 욕심도 생기는데요. 좋은 기술이 있다면 자유롭게 제안할 수 있는 분위기예요. 그 기술이 회사나 프로젝트에 도움이 되는지, 도입 시기가 타당한지, 전환에 필요한 공수는 어느 정도인지 등을 팀이 함께 검토합니다. 변화에 따른 불편함이 조금 있더라도 일의 생산성을 높이는 방향으로 의사 결정하죠. 프론트엔드 개발의 경우 기술 트렌드가 빠르게 바뀌는 편이에요. 이런 점에서 기술 도입에 열려있는 오픈서베이의 문화는 프론트엔드 개발자에게 특히 매력적이라고 생각합니다.

오픈서베이는 프론트엔드, 백엔드 등 여러 개발 포지션을 채용하고 있어요. 마지막 질문으로 블라드가 함께 일하고 싶은 개발자는 어떤 분인지 말씀 부탁드려요.

기본기를 갖춘 개발자와 함께 일하고 싶어요. 여기서 기본기라는 건 어떤 문제를 해결할 수 있는 능력을 의미합니다. 당장 닥친 문제의 한 면만 보고 응급처치 식으로 개발하는 게 아니라 프로덕트 전체를 넓게 보고 코드를 쓰는 역량이 중요하다고 생각해요. 이렇게 문제를 잘 해결하기 위해서는 실무 경험만큼이나 컴퓨터 공학 지식부터 기초를 잘 쌓아오는 게 필요하죠.

그리고 성능 개선에 대한 고민을 깊게 하시는 분이요. 성능은 백엔드의 영역으로만 생각하기도 하는데, 앞서 말씀드린 것처럼 오픈서베이에는 프론트엔드의 영역에서 데이터를 처리하는 프로덕트도 있어서 프론트엔드의 중요한 고민거리이기도 하거든요. 조금이라도 더 빠르게 페이지를 보여주고 사용성을 높일 수 있도록 프론트엔드 사이드에서 성능을 개선한 경험이 있거나 관련 고민을 많이 해보신 분과 함께 일하고 싶어요.

마지막으로는 자신만의 강점을 잘 개발해오신 분이요. 꼭 기술 관련 역량이 아니더라도 본인의 강점과 특징을 발전시켜오신 분과 함께 일하면 제가 무언가 배울 수 있는 점이 있어요. 현재 프론트엔드 개발 챕터를 생각해보면 다들 기본기는 물론이고 자신만의 특징을 갖고 계신 분들이에요. 창의적인 접근법을 제안하는 분도 계시고 디테일에 강하신 분도 계시고 새로운 기술에 밝은 분도 계시죠. 이런 분들을 통해서 저도 부족한 부분을 채울 수 있다고 생각해요. 서로 시너지를 내며 일할 수 있는 분이 오시면 좋겠습니다.

“블라드와 함께 일하고 싶으시다면
지금 바로 입사 지원해보세요”