프론트엔드 개발자에게 가장 중요한 역량은?

토스 프론트엔드 챕터가 말합니다.

누구나 사용하기 쉽고 편리한 서비스, 사용자를 향하는 서비스를 만드는 프론트엔드 개발자가 되고 싶으신가요? 그런 분들을 위해 준비한 글입니다. 정답은 없겠지만… 좋은 개발자의 기준에 대해, 토스 프론트엔드 챕터가 어떤 생각을 하고 있는지 담아보았어요.

토스 전 계열사 프론트엔드 개발자 13인에게 질문을 던졌습니다. “좋은 프론트엔드 개발자가 되기 위해 꼭 필요한 역량, 무엇인가요?” 그중 꼭 소개하고 싶은 이야기들만 뽑아 세 개의 챕터로 소개해 드릴게요.

Chapter 1. 좋은 제품을 만들기 위해

1. 사용자 경험을 중요시하는 마인드셋

“개발해놓은 서비스를 갈아엎어야 하는 과정이 고통스럽더라도, 기꺼이 다시 돌아가 문제를 해결하려고요. 사용자 경험이 개선될 수만 있다면 행복할테니까요.” – 토스뱅크 Frontend Developer 류아영

10월 초 서비스 오픈 예정인 토스뱅크에서 대출 서비스를 만들고 있어요. 사실, 요즘 앱 시장을 보면 이미 좋은 제품들이 넘쳐나요. ‘와, 이건 정말 잘했는데?’ 싶은 부분들도 많고요. 이렇게 치열한 시장에서 토스가 사용자들에게 최종 선택을 받으려면, 쉽게 간과할 수 있는 디테일까지 신경써야 한다 생각해요. 의사결정부터 디자인, 개발까지 굉장히 빠르게 이뤄지는 토스팀이지만, 그럼에도 사용자들 입장에서 중요한 디테일을 놓치지 않도록 더 많이 고민하고 실현해내야 하는거죠.

빠른 속도에 맞추기 위해 정신없이 개발하다가도, 다시 돌아와서 개발해놓은 서비스를 하나하나 다시 만져보면서 사용자 입장에서 생각합니다. 조금이라도 불편한 부분을 찾게 되면, 여태 만든걸 갈아엎게 되더라도 처음부터 다시 논의하고요. 이런 일련의 과정들이 몇 번 반복되면, 그제서야 ‘사용자 입장에서 이해가 가는’ 서비스가 만들어지더라고요.

사실 개발자 입장에서 몇 시간 혹은 며칠 걸쳐 만든걸 다시 손대야 하는 것이 힘들 때도 있어요. 하지만, 최고의 사용자 경험을 위한거라 생각하면 제가 좀더 힘들어도 모든 과정이 의미있다 느껴져요. 사용자 경험을 중요하게 생각하지 않는다면… 이 모든 과정이 그저 고통스럽게만 느껴지지 않을까 싶어요.

대고객 오픈 후에는 지금보다 더 정신없어질 것 같은데요. 이렇게 정신없이 돌아가는 상황 속에서도 제가 개발한 영역에 대해 사용자가 불편하다는 의견을 주신다면, 기꺼이 다시 돌아가 문제점을 해결해 내려고요. 혼자 해결하기 어려울 땐 훌륭한 프론트엔드 챕터 동료들에게 얼마든지 도움을 청할 수 있고, 불편을 느꼈던 사용자들의 경험이 개선된다면 고통스러웠던 시간이 행복한 순간으로 바뀔테니까요.

🔵 토스뱅크 Frontend Developer 자세히 알아보기

“사용자들이 서비스가 ‘살아있다’고 느껴야 한다 생각해요. 제 일이 좀더 많아지고 어려워지더라도요.” – 토스증권 Frontend Developer 서현석

토스 주식 탭 오른쪽 상단에 돋보기 아이콘이 있어요. 토스증권 검색 서비스인데요. 이용해 보셨나요? ‘라면’을 검색하면 농심, 오뚜기 등 관련 회사가 함께 나오고, ‘네이버’를 검색하면 NAVER 종목 정보 뿐 아니라 카카오, 카페24 등 유사 업종의 상장기업 정보가 함께 나와요.

보통은 종목명 그대로 오타 없이 검색해야 원하는 결과를 볼 수 있었을텐데요. 저희 인포 사일로(Info Silo)는 사용자들이 종목명이 아닌 키워드를 활용해 검색하더라도, 투자자에게 필요한 정보들을 모아 보여드리고 있습니다. 토스증권 검색 결과 화면에서는 종목 정보 중심으로 공시자료, 재무제표, 뉴스는 물론, 투자자 동향과 양질의 콘텐츠 <투자는 이렇게> 까지 한 눈에 볼 수 있어요. 이왕이면 토스증권 사용자분들이 투자하는 과정에 꼭 필요한 정보를 재미있게 습득하실 수 있었으면 좋겠다는 생각이에요.

토스에서 제품을 만드는 메이커들은 Customer Centric(사용자 중심)을 첫 번째 가치로 삼는데요. 좋은 사용자 경험을 위해 필요한 장치들이 여러가지 있겠지만, 저는 사용자분들이 서비스가 살아있다고 느끼는게 가장 중요하다 생각해요. 제 일이 더 많아지고 어려워지더라도요.

지난 2월 토스증권 사전신청 이벤트 페이지 개발할 때도 사용자분들이 ‘살아있다’는 느낌을 받았으면 해서, 누적 신청자 수를 라이브로 보여드리는 요소를 추가했어요. 서버로부터 랜덤 주기로 데이터를 받아 숫자가 실시간으로 올라가는 애니메이션으로 구현했더니 반응이 좋더라고요. 이벤트 기간 동안 60만 명이 사전신청을 해주셨어요.

최대한 많은 분들이 빨리 토스증권 서비스를 경험해보셨으면 하는 마음으로 정말 간편하게 만든 퍼널도 큰 역할을 했을 것 같아요. 사용자 경험보다 제 편의를 더 중요하게 생각했다면, 개인정보 입력 – 휴대폰 인증 절차 – 약관 동의 체크 등 적어도 3단계 이상의 퍼널이 구현됐을텐데요. 사용자분들이 너무 귀찮을 것 같더라고요. 결국 버튼 한 번만 누르면 신청 완료되는 플로우를 동료분들과 함께 만들어낼 수 있었습니다.

🔵 토스증권 Frontend Developer 자세히 알아보기

2. 제품에 대한 오너십

“제품에 대한 애정과 오너십을 가지고 끊임없이 더 나은 방향을 고민하는 과정이 반복되면, 결국 좋은 서비스 품질로 이어지는 것 같아요. 스스로 문제를 정의하고 해결하는 과정 덕에 성장하는 것은 덤이고요.” – 토스뱅크 Frontend Developer 김찬연

10월 오픈 예정인 토스뱅크에서 카드 서비스를 준비하고 있습니다. 지금까지 다양한 카드를 사용해오면서 어렵고 복잡하다 느꼈던 순간이 많았는데요. 혜택을 받기 위한 조건이 너무 까다로워 기억하기 어렵고, 카드 앱에 접속하면 꼭 필요하지 않은 광고가 먼저 노출되고… 사용자 중심적이지 못하다고 느꼈던 부분이에요. 그간 토스가 금융이 불편했던 순간을 하나씩 바꿔왔던 것처럼, 카드를 사용할 때도 차별화된 경험을 제공해드릴 수 있는 방법을 고민하며 제품을 만들고 있습니다.

이 과정에서 최근 iOS에서 제공하는 Wheel Picker UI를 웹 기술로 구현했던 경험을 소개하고 싶습니다. 기존에 사용하던 DatePicker UI는 예쁘지 않고, 모바일 환경 사용성도 좋지 않다는 메이커분들과의 공감대가 있었거든요. 만약 Wheel Picker UI를 웹으로 구현할 수 있다면, iOS와 안드로이드에서도 일관된 사용자 경험을 제공할 수 있을거란 기대에 반드시 만들어야겠다 생각했습니다.

처음에 어찌저찌 구현하긴 했는데, 설정된 기간에 따라 각 휠의 옵션을 동적으로 변경하는 등 디테일한 부분을 잡아내는건 쉽지 않더군요. 완벽히 동일하게 구현하는건 힘들거란 생각에 차선의 방법을 선택했는데요. 기존에 사용하던 DatePicker UI보다 나은 방식은 맞지만, 사용 경험은 여전히 좋지 않더라고요. 시간이 좀더 걸리더라도 처음 생각했던 방향으로 구현해야겠다 마음 먹었고, 좋은 사용자 경험을 위해서도 반드시 필요한 부분이라 생각했기에 집중력을 발휘해 결국 구현해냈어요.

제품에 대한 애정과 오너십이 없었다면, 그냥 DatePicker UI를 사용했겠죠. 하지만 이왕이면 제가 만드는 제품이 토스 사용자들에게 최고의 경험을 제공했으면 좋겠더라고요. 평소에도 이런 고민들을 많이 하는 편이에요. ‘이 화면에 접근할 때 로딩 속도가 느린데 어떻게 더 개선할 수 있을까?’, ‘지금처럼 정적인 방식으로 콘텐츠를 보여주면 사용자들이 이해하기 어려울 것 같은데, 동적인 인터랙션을 통해 해결해볼 순 없을까?’ 이렇게 끊임없이 제품의 더 좋은 방향을 고민하는 과정이 반복되면, 결국 좋은 서비스 품질로 이어지는 것 같아요. 스스로 문제를 정의하고 해결하는 과정 덕분에 성장할 수 있는 것은 덤이고요.

🔵 토스뱅크 Frontend Developer 자세히 알아보기

“제품에 대한 이해도가 높아지면, 각자 다른 업무 영역을 맡은 동료들이 서로 어떤 영향을 미치는지 자연스레 습득할 수 있게 됩니다. 주어진 스펙에 맞춰 개발하는 것 이상으로, 제 영역이 아닌 부분까지 고려하며 주도적으로 제품을 만들 수 있게 되는거죠.” – 토스 Frontend Developer 박지우

‘토스보험파트너‘ 서비스를 만들고 있습니다. 토스와는 다른 아예 별도의 앱인데요. iOS나 안드로이드 개발자분들의 도움은 최소한으로 받고, 모든 화면을 웹으로 구현하는 제품이에요.

토스보험파트너 고객은 생명보험/손해보험 협회에 설계사로 등록되어 있는 설계사분들인데요. 사용자들이 처음 서비스에 가입할 때 거쳐야 하는 설계사 인증 과정 구현 절차가 꽤 복잡한 편이에요. 스크래핑이랑 연동하여 몇 가지 외부 사이트를 순차적으로 조회하면서 설계사 신분을 인증해야 하거든요. 프론트와 스크래핑 모듈 간 협업이 굉장히 중요합니다.

사실 이 인증 절차를 구현하는 것이 쉽지만은 않았어요. 하지만 1년 정도 토스보험파트너 서비스를 만들어 온 만큼 퍼널에 대해 한층 더 높아진 이해도를 바탕으로, 퍼널의 UI, 디자인, 로깅, 스크래핑 등 각 영역에서 어떤 제약 사항이 있는지, 서로가 서로에게 어떤 영향을 미치고 있는지 자연스럽게 습득할 수 있게 됐어요. 덕분에 새로운 문제를 해결해야 하는 과정에서 주도적으로 각 담당자분들에게 의견을 드리면서 제품을 만들어갈 수 있었죠.

설계사분들에게 더 매끄러운 경험을 드리기 위해 어떻게 UI를 변경하면 좋을지, 어떤 로깅을 추가해야 할지, 인증을 실행하는 스크래핑 시스템에서 어떤 변화가 필요한지… 각 영역을 담당하시는 동료들에게 적극적으로 의견을 드리고, 함께 논의하며 액션 아이템을 만드는 등 주도적으로 제품을 만드는 데에 기여할 수 있었습니다.

모든 팀원들이 제품에 대한 높은 이해도를 가지고 워낙 높은 수준의 결과를 만들고 계시기에, 이로 인한 신뢰를 기반으로 사용자 경험을 최우선에 두는 방향으로 제품을 발전시킬 수 있었다 생각해요. 덕분에 주어진 스펙에 맞춰 개발하는 것 이상으로, 담당한 제품에 대한 애정과 오너십을 바탕으로 제 영역이 아닌 부분까지 고려하면서 개발하는 경험도 할 수 있었고요.

🔵 토스 Frontend Developer 자세히 알아보기

3. 다양한 맥락을 가진 작업들의 임팩트와 우선순위를 판단하는 능력

“수많은 작업들의 다양한 맥락을 파악해 임팩트와 우선순위를 판단할 수 있게 되면, ‘시간’이라는 한정된 자원을 더욱 잘 활용할 수 있어요. 제품의 성공을 더 빠르게 이뤄낼 수 있는 효과적인 방법이죠.” – 토스페이먼츠 Frontend Developer 양의현

토스페이먼츠 온보딩 사일로에서 가맹점 고객들이 가입할 때 거치는 신청 프로세스를 만들고 있어요. 가입 및 서비스 신청 과정에서 고객이 답답함을 느끼지 않도록, 가입 플로우를 간소화하거나 온라인에서 모든 신청 과정을 마칠 수 있도록 전자화시키는 작업을 했습니다.

특히 사용자들에게 최적의 온보딩 경험을 제공하기 위해 제작한 ‘인스턴트 온보딩’이라는 서비스 런칭 과정을 소개하고 싶어요. 처음에 온보딩 사일로 PO분이 “호스팅사 신청할 때부터 결제 서비스 신청할 때까지, 하나로 이어지는 경험이 가맹점에게 꼭 필요하다”는 제안을 하셨어요. 사일로 팀원들 모두 공감했고 제품이 만들어지기 시작했죠.

하지만 토스페이먼츠에는 인스턴트 온보딩 외에도 여러가지 온보딩 방법이 존재해요. 가맹점이 토스페이먼츠에 어떻게 유입되는지에 따라, 온보딩 방식도 달라지거든요. 지속적으로 늘어나는 온보딩 과정에 대한 관리를 따로따로 하게 된다면, 어느 순간부터는 각각의 온보딩 경험을 별도로 개선해야 하는 것은 물론, 새로운 기능을 추가하는 것 또한 어려워질거라 생각했어요.

그냥 인스턴트 온보딩 서비스를 만드는 것 이상으로, 기존에 존재하던 모든 온보딩 퍼널들의 경험과 호환 가능하도록 통일시키는 작업이 장기적으로 봤을 때 더 큰 임팩트를 줄 수 있다고 동료들에게 설명했죠. 모두 공감해주셨고요. 그 결과, 인스턴트 온보딩 서비스를 개발하는 과정에서 기존 퍼널의 기능을 활용할 수 있었고, 요구사항 변화에도 훨씬 유연한 구조를 만들어낼 수 있었습니다.

토스팀에서는 다양한 계열사에서 수많은 서비스들을 만들고 있고, 이들은 빠르게 발전하고 있어요. 팀의 방향과 그간 런칭됐던 서비스들의 맥락을 파악해서 작업에 임하게 된다면, 그냥 제품을 개발하는 것 이상으로 제품의 가치를 한층 더 디벨롭시킬 수 있다고 생각합니다. 실현해야 하는 아이디어들이 무궁무진한데, 이왕이면 임팩트 있게 구현되는 것이 좋으니까요.

무엇보다 작업들의 다양한 맥락을 파악해 임팩트와 우선순위를 판단할 수 있게 되면, ‘시간’이라는 한정된 자원을 더욱 잘 활용할 수 있게 되는데요. 결국 더 빠르게 제품의 성공으로 이어질 수 있는 효과적인 방법이라 생각합니다.

🔵 토스페이먼츠 Frontend Developer 자세히 알아보기

“전사적인 맥락을 고려해 지금 당장 해야할 일을 파악하고, 좀더 시급하게 마무리되어야 하는 작업들의 우선순위를 높여달라고 동료들에게 적극 제안했어요. 약속한 시간 내에 제품을 완성하고 싶었거든요.” – 토스 Frontend Developer 조규진

학생들에게 꼭 필요한 서비스를 만드는 학자금 사일로에서 제품을 만들고 있어요. 학자금 관련 정보가 여기저기 흩어져 있고 정확한 정보를 찾기도 쉽지 않아서, 학생분들에게 꼭 필요한 혜택임에도 놓치기 쉬울텐데요. 토스를 통해 쉽고 편하게 관련 정보를 받아볼 수 있도록 도움 드리면, 학생분들이 학자금이나 장학금 관리를 더 잘할 수 있을 거라는 기대로 서비스를 만들어가고 있어요. 앞으로 새로운 서비스도 여럿 선보일 예정입니다.

처음에 ‘숨은 장학금 찾기’ 서비스 런칭할 때를 떠올려 보면, 팀 내에 다른 서비스를 겸임해서 담당하시는 분들이 많아서 다들 장학금 서비스에 온전히 집중할 수 있는 시간을 내기 빠듯한 상황이었어요. 이때 제가 맡은 영역이 아니더라도, 동료분들이 좀더 수월하게 일할 수 있도록 지금 해야할 일이 어떤 것인지 먼저 파악해 공유드리기도 하고요. 더 시급하게 마무리되어야 하는 작업이라 판단되면 우선순위를 높여달라 적극적으로 제안했어요. 약속한 시간 내에 제품을 완성하고 싶었거든요.

토스에서는 ‘당신이 지금 해야할 일은 이것입니다.’ 지정해주는 사람이 없어요. 전사적으로 잘 공유되는 정보들을 바탕으로, 임팩트 있는 일이 무엇인지 스스로 정할 수 있는 조직이죠. 그래서, 우리 팀과 사일로에서 지금 가장 중요한 일이 무엇인지, 임팩트가 더 큰 일은 없는지 스스로 잘 판단하는 능력이 중요한 것 같아요.

저는 일하다 궁금하거나 모호한 점이 생기면 최대한 다 물어보는 편이거든요. 다른 멤버들도 저와 같은 방향으로 내용을 이해했는지 다시 한 번 확인하고, 의구심이 남은 것처럼 보이는 동료가 있다면 지나치지 않고 물어보려 하고요. 전사적인 맥락에서도 더 고려해야 할 사항이 있는지 확인해봐요. 제가 모르는 맥락을 더 아시는 분에게 관련 정보에 대해 더 자세히 알려줄 수 있는지 여쭈어보기도 하고요.

저 혼자 동료들과 다른 트랙에 있는 일이 발생하면, 비즈니스 임팩트가 큰 작업의 실행이 늦어질 수 있으니까요. 이런 일이 반복되면 결국은 저희 제품이 시장에서 뒤쳐질거고요. 그런 가슴 아픈 상황을 만들지 않기 위해, 다양한 작업들의 임팩트와 우선순위를 스스로 잘 판단할 수 있도록 노력하고 있습니다.

🔵 토스 Frontend Developer 자세히 알아보기

4. 유지보수 가능한 코드를 작성하는 능력

“유지보수가 용이한 코드와 개발환경이 기본이 되면, 큰 비즈니스 임팩트가 자연스레 따라옵니다. 대표적인 사례가 단 이틀 만에 런칭했던 ‘재난지원금’ 서비스예요.” – 토스 Frontend Developer 박서진

매일 빠르게 변화하는 토스의 성공 방정식 중 하나는 ‘실험’이라고 생각해요. 서비스를 내기 전 ‘어떤 방법이 좋을까?’ 계속 고민하기보다, 빠르게 출시해 사용자 반응을 보고 답을 찾아가는 거죠. 이 과정에서 보통은 열 번의 실험 중 한 번의 실험만 성공하기 때문에, 다양한 종류의 화면을 빠르게 개발할 필요가 있습니다.

그러기 위해선 ‘코드의 유지 보수성’이 중요하다 생각해요. 수정하기 쉽고 재사용하기 쉬운 코드일수록, 다음 제품을 완성하는 데에 걸리는 시간이 줄어들거든요. 더 나아가 사용자들에게 새로운 기능을 더 빠르게 선보일 수 있고, 큰 비즈니스 임팩트를 만들어가는 데에도 빠르게 다가갈 수 있다 생각해요. 유지보수하기 용이한 코드를 중요하게 생각하는 이유죠.

이런 코드 덕분에 큰 비즈니스 임팩트까지 낼 수 있었던 대표 사례가 바로 ‘재난지원금’ 서비스인데요. “전국민에게 지급되는 재난지원금, 토스 사용자들이 몇 번의 클릭만으로 지원금을 편하게 받을 수 있다면 어떨까?” 라는 말에 홀려 시작하게 됐어요. 주어진 시간이 정말 제한적이었어요. 금요일 아침에 아이디어가 나왔는데, 토요일 아침에 MVP를 출시해야 했거든요.

처음에는 이게 될까? 싶었는데, 시간이 지날수록 되겠다! 라는 확신으로 바뀌었어요. 3~4시간 만에 기획안과 디자인이 완성되자, 곧이어 서버 API가 완성되더라고요. 자극을 받아 빠르게 MVP를 만드는 데에 집중했는데요. 잘 갖추어져 있는 TDS(Toss Design System)와 개발환경의 도움을 받아 다행히 금요일 밤에 제품을 완성할 수 있었어요. 토요일 오전부터 수백만 사용자들이 편리하게 서비스를 사용해주셨는데, 회사 지표가 실시간으로 상승하는 것을 지켜보며 말로 표현하기 어려운 성취감이 차오르더라고요. 토스에서 가장 짜릿한 경험이었던 것 같아요.

🔵 토스 Frontend Developer 자세히 알아보기

“주고객이 가맹점 개발자분들이다 보니, 유지 보수 가능한 코드를 작성하는 데에 공을 들이게 됩니다. 특히 수명이 긴 서비스를 운영할 때야말로 이 능력이 빛을 발한다 생각해요.” – 토스페이먼츠 Frontend Developer 이현섭

토스페이먼츠 고객인 가맹점이 손쉽게 결제 연동을 할 수 있도록, 토스페이먼츠 결제 연동 문서의 새로운 버전을 만드는 데에 집중하고 있어요. 가맹점 개발자분들이 결제 시스템을 붙일 때 참고하는 문서로, 만든지 1년 정도 된 제품인데 그동안 개선이 거의 안 되고 있었거든요. 이 제품을 한국에서 볼 수 없었던 퀄리티로 만들어서, 결제 연동하는 개발자분들이 행복해지는 것이 목표입니다.

이외에도 가맹점에서 활용하는 SDK와 API를 관리하고 전체적인 통일성을 유지하며, 기술 문의에 대응하는 일을 하고 있습니다. 주로 만나는 고객이 가맹점 개발자분들이다 보니, 유지보수 가능한 코드를 작성하는 데에 더욱더 공을 들이게 됩니다.

특히, 토스페이먼츠가 만드는 제품과 서비스들은 대체적으로 수명이 깁니다. 어떤 서비스들은 토스페이먼츠가 LGU+ 전자결제사업부를 인수하기 전부터 운영되고 있었고요. 인수 후 새롭게 만드는 제품들도 수명이 길 것이라 (자연스럽게) 기대하게 되는 것 같아요. 많은 가맹점 고객들이 오래 유지될 서비스라는 신뢰를 가지고 이용해주고 계시니, 그 기대에 부응할 수 있는 방향으로 서비스를 운영하는 것이 맞다 생각하고요.

이렇게 수명이 긴 서비스를 운영할 때야말로 ‘유지 보수 가능한 코드’, ‘나중에도 쉽게 이해하고 변경할 수 있는 코드’를 작성하는 능력이 빛을 발한다 생각해요. 이해하기 어렵거나 변경 가능성이 낮은 코드가 활용된다면, 나중에 기능을 추가할 때 빠르게 구현하기가 어려워지거든요. 신규 기능을 구현할 때도 방어적으로 접근할 가능성이 높아지고요.

물론 장기간 유지 보수해야 하는 서비스가 아니더라도, 이런 코드를 잘 작성하는 분들은 어디서든 환영받기 마련입니다. 코드에 대한 높은 기준을 가지고 있을 가능성이 크다 보니, 코드 리뷰할 때도 더 좋은 구조를 제안할 수 있고 프론트엔드 챕터의 성장에도 긍정적인 영향을 미치게 되기 때문입니다.

🔵 토스페이먼츠 Frontend Developer 자세히 알아보기

Chapter 2. 함께 일하고 싶은 동료가 되기 위해

1. 동료들의 신뢰를 얻을 수 있는 태도

“입사한지 얼마 되지 않았을 때 ‘내가 이걸 고쳐도 되나’ 싶은 생각이 앞섰어요. 하지만 더 나은 개발환경을 위한 개선안을 투명하게 공유하니, 동료들이 신뢰를 보내주었고 작업을 이어나갈 수 있었습니다.” – 토스 Frontend Developer 박서진

1분 만에 프론트엔드 웹 서비스가 빌드되고 배포되는 환경을 상상해보신 적 있으신가요? 토스에서는 가능한데요. 처음부터 그랬던 건 아니었어요. 토스팀 합류하고 6개월이 지났을 때, 프론트엔드 개발자가 10명이 되면서 코드의 총량이 기하급수적으로 커지는 문제가 발생했던 적이 있어요. 프로젝트 빌드에 걸리는 시간이 3~4분에서 10~20분까지 늘어나곤 했죠. 문구 한 글자를 수정하기 위해 20분을 기다리다 보니, 꼭 이 문제를 해결하고 싶더라고요. 기다리는 시간을 줄이는 것만으로 모두의 몇십 분을 아낄 수 있다는 생각에요.

처음엔 큰 프로젝트를 여러 개의 작은 단위로 쪼개는 작업을 생각했어요. 그런데, 그렇게 하려면 프론트엔드 프로젝트 구조를 뿌리부터 바꾸어야 하더라고요. 입사한지 얼마 되지 않았다 보니 내가 이걸 고쳐도 되나 싶은 생각도 들었고요. 조금 망설이다 프론트엔드 챕터 위클리 때 동료 개발자분들께 작업 배경과 방법을 설명드렸어요. 다행히 좋은 반응이 있었고 기대된다는 피드백을 받았죠. 더 나은 방향을 위한 개선안을 투명하게 공유하니 동료들의 신뢰를 얻을 수 있었고, 이를 기반으로 작업을 이어나갈 수 있었습니다. 결국 목표했던 결과를 성취할 수 있었고요.

이때 한 작업이 지금까지도 토스 프론트엔드의 기반을 이루고 있어요. 챕터분들의 시간도 몇 만 시간은 아껴졌을 거예요. 아마 동료들의 신뢰를 얻지 못했다면 이 작업은 이뤄지기 어려웠을거고, 프론트엔드 개발자들의 소중한 시간이 아낌없이 흘러갔겠죠.

이제 40명이 넘는 프론트엔드 개발자분들이 함께하고 계세요. 개발환경을 개선함으로써 만들 수 있는 임팩트 크기가 이전보다 훨씬 커진 셈이죠. 배포에 걸리는 시간을 1분 씩만 단축하더라도, 토스팀 전체로 봤을 때 40분 이상을 아끼게 되거든요. 토스에는 웹 뷰로 만들어진 서비스가 정말 많아요. 앱 곳곳에 녹아있는 웹 제품들이 네이티브 앱처럼 보이도록 웹 성능을 최적화하는 일이 중요도가 높고 임팩트가 클 수밖에 없어요.

클라이언트 플랫폼 팀에서는 최고의 개발자 경험을 목표로, 단단한 기반과 시스템을 만들어가고 있는데요. 토스팀에 계신 모든 프론트엔드 개발자분들이 저희를 더욱 신뢰하고 등을 맡길 수 있도록, 매일 더 나은 프론트엔드 개발 환경을 만들어가려 합니다. 많은 분들이 더 빨리, 더 많은 비즈니스 임팩트를 낼 수 있도록요.

🔵 토스 Frontend Developer(DevOps) 자세히 알아보기

2. Dare to make conflict

“다른 직군의 동료들과 세부사항의 구현 내용을 맞춰나가는 과정에서 이상하거나 잘못된 부분이 보일 때가 있거든요. 이때 솔직하게 말하는 용기가 정말 중요하다 생각해요.” – 토스페이먼츠 Frontend Developer 이현섭

프론트엔드 개발을 하다 보면, 다양한 직군의 동료들과 업무에 대한 커뮤니케이션을 해야할 때가 참 많아요. 기능 요구사항부터 서비스 디자인, API, 데이터 로깅 등 뭐 하나 중요하지 않은 것이 없고, 이 모든 것들이 다른 직군의 동료들과 상호작용하면서 세부사항의 구현 내용을 맞춰나가야 하는 것들이에요.

그런데 세부사항을 맞춰나가는 과정에서, 이상하거나 잘못된 부분이 보일 때가 있거든요. 이때 솔직하게 말하는 것이 정말 중요하다 생각해요. 접근성이 고려되지 않은 디자인이라든가, 클라이언트의 리소스를 너무 많이 잡아먹는 스펙 같은 것들이 있겠죠.

프론트엔드는 사용자와 가장 직접적으로 만나는 영역이기 때문에, 프론트엔드 개발자가 잘못된 결정을 내려 작업을 마무리한다면, 그 피해가 고스란히 사용자의 몫으로 돌아가게 됩니다. 동료와의 불편함이 예상되더라도 “No”라고 말하고, 그 이유를 솔직하게 말하는 용기가 꼭 필요하다 생각해요.

다행히 토스팀에서는 이런 의견들을 정중하게 주고받는 문화가 잘 정착되어 있어서, 더 나은 방향을 논의하는 과정을 거칠 수 있어요. 더 개선됐으면 하는 부분에 대해 말하는 용기를 발휘할 때 제품이 더 나아질 수 있는 것은 물론, 사용자가 피해를 입을 수 있는 부분도 미리 방지하게 되더라고요. 궁극적으로는 더 좋은 제품의 밸류를 만들어내는 역할도 할 수 있고요.

그리고 토스 프론트엔드 챕터에서는 배포하기 전 작성한 코드를 모든 동료들에게 리뷰를 받는 문화가 잘 형성되어 있어요. 단순히 코드의 기능이 동작한다 해서 넘어가지 않고, 이 코드가 어떤 의도에서 작성되었는지, 확장이나 재사용에 용이한지, 함수의 역할이 명확한지 등 여러 관점에서 의견을 주고받을 수 있습니다.

이 과정에서도 더 높은 퀄리티의 코드를 추구하기 위해, 때때론 불편함을 감수해야 할 때가 있는데요. 코드 리뷰를 주고받는 과정에서 제가 인사이트를 얻을 때도, 동료들에게 영감을 줄 때도 있었어요. 결과적으로 프론트엔드 챕터 구성원들이 함께 성장하는 데에 큰 도움이 되었다고 생각합니다.

🔵 토스페이먼츠 Frontend Developer 자세히 알아보기

Chapter 3. 더 나은 개발자가 되기 위해

1. 새로운 것에 대한 호기심과 도전의식

“한 번 만들어봤던 방식은 쉽고 편하죠. 하지만, 성장에는 한계가 생기는 것 같아요. 새로운 시도를 해보면서 컴포트 존에서 벗어나려고 의식적으로 노력해야 한다 생각합니다.” – 토스 Frontend Developer 김도환

개발을 하다 보면, 경험이 쌓임에 따라 ‘예전에 만들어봤던 것’도 많아집니다. 한 번 만들어봤던 것은 두 번째 만들 때 훨씬 쉽게 만들 수 있어요.

익숙한 방식으로 일을 하면 결과물을 예측하기가 쉬워지면서 퍼포먼스도 안정적이게 되는데요. 편할 수는 있지만, 과거의 경험을 되풀이하는거라 성장에 한계가 생기는 것 같더라고요. ‘예전보다 더 나은 방식으로 해볼 수는 없을까?’라는 생각으로, 새로운 시도를 해보면서 컴포트존에서 벗어나려고 노력하는 것이 더 나은 개발자가 될 수 있는 길이라 생각해요.

지금은 클라이언트 플랫폼 팀에서 동료 개발자들의 생산성을 높이고 앱 전반의 퀄리티를 높이는 일을 주로 하고 있는데요. 예전에 베네핏 사일로에서 혜택 탭을 런칭했던 때가 떠오르네요. 새롭게 만드는 탭이다 보니 미지의 영역이 많았어요. 사일로 동료들과 매일 치열하게 토론하며 새로운 아이디어를 냈습니다. 4개월이 채 안 되는 시간 동안 6명의 동료들과 함께 혜택 탭을 비롯해 브랜드 캐시백, 지도 만보기, 행운퀴즈까지 4개의 서비스를 런칭하기로 했고, 일정을 맞추기 위해 다같이 엄청 달렸어요.

그때 만든 ‘지도 만보기’는 지도에 표시된 지역으로 이동하면서, 만보를 걷도록 하는 서비스였는데요. 토스에서 웹 기술을 이용한 지도 기반 서비스를 만들었던 적이 거의 없어서, 기술적으로 굉장히 챌린징한 경험이었어요.

사용자의 현재 방향을 알려주는 기능이 수반된 지도 SDK가 필요했는데, 당시 활용하려 했던 네이버 지도 SDK는 그 기능을 제공하지 않더라고요. 웹으로 된 다른 지도 서비스들도 찾아봤는데 방향을 알려주는 기능을 가진 서비스는 없었어요. 방향 정보를 가져오는 Web API도 찾아서 테스트해봤지만 특정 브라우저에서만 되는 API라 결국 실패했고요. 방향 기능을 제공하는 서비스는 다 앱이더라고요.

발만 동동 구르다가 주변 동료들에게 도움을 요청했는데, 네이티브 개발자분께서 “앱에서 웹으로 방향값을 내려주면 그걸 사용하는 게 어떠냐”는 아이디어를 주시더라고요. 한 번도 시도해본 적 없었지만 좋은 방법이라는 생각에, iOS/Android 개발자분들과 붙어서 방향과 관련된 것처럼 보이는 값을 받아 구현했어요. 밖으로 나가서 네이버 지도 앱이랑 직접 비교해보며 수차례 테스트하고요. 결국 방향 기능까지 잘 구현할 수 있었습니다.

경험해본 적 없는 방법이라 시도하지 않았다면, 기획한 대로 서비스를 구현하기도 어려웠을거고 저도 안주했겠죠. 새로운 방법에 망설임 없이 도전했기에 좋은 제품을 만들어낼 수 있었다 생각합니다.

🔵 토스 Frontend Developer 자세히 알아보기

“개발이 정말 좋아요. 일하는 시간 외의 시간도 개발에 사용하다 보면, 개발자로서 더 성장할 수 있는 기회로 자연스럽게 이어진다 생각합니다.” – 토스페이먼츠 Frontend Developer 한재엽

토스페이먼츠에서 ‘대시보드’ 제품을 만들고 있어요. 토스페이먼츠 목표는 가맹점들이 사업하면서 필요한 모든 것들을 만드는 것인데요. 대시보드는 그 토대가 되는 제품이에요. 지금은 토스페이먼츠 결제 시스템을 활용하는 가맹점이 결제된 내역부터 정산 내역까지 결제 관련 다양한 정보를 볼 수 있는 제품으로 구현되어 있는데요. 향후 B2B 플랫폼 역할까지 수행하는 것을 목표로 하고 있습니다. 무한한 확장성과 오래 지속될 수 있는 서비스를 만드는 데에 집중하고 있어요.

작년에 대시보드 제품을 만드는 과정에서 달력 UI가 필요했는데, 찾아보니 활용할 수 있는 라이브러리가 잘 없더라고요. ‘달력’ 기능이 정말 많은 제품에서 사용될 것 같은데… 의외로 바로 사용할 만한 오픈소스가 없다는 것에 놀랐고, 다른 사람들도 필요할 것 같다는 생각에 ‘아예 오픈소스로 만들어보자’ 결심했어요. 라이브러리 환경 구축부터 문서화까지 꽤 시간이 걸릴 것 같아, 작년 말에 있었던 겨울방학을 이용해 사이드 프로젝트로 만들기 시작했습니다.

오픈소스로 만들 때는 다른 제품에서도 쉽게 가져다 사용할 수 있어야 하기 때문에, 대시보드 제품에 필요한 것 이상으로 다양한 케이스를 고려해서 만들었는데요. 따로 홍보를 하지 않았는데도, 미국의 어떤 스타트업 개발자가 제 라이브러리를 활용해 쉽고 빠르게 달력 UI를 개발했다며, 고맙다고 트위터에서 멘션을 해줬어요. 오픈소스 없이 개발할 수 없는 시대에 작게라도 오픈소스와 개발자 생태계에 기여했다는 생각에, 짜릿했던 경험이었습니다.

비슷하게 기술 블로그 오픈소스도 만든 경험이 있는데요. 평소 사용하고 싶었던 기술을 활용해 필요한 기능을 담아 만드니 정말 재밌더라고요. 점심 시간을 쪼개가며 만들 정도였거든요. 다 만들고 나니 ‘다른 사람들도 자신 만의 블로그가 필요하지 않을까?’라는 생각이 들더라고요. 오픈소스로 공개 후 감사하게도 많은 분들이 이용해주고 계세요. 잘 활용해주시는 분들의 블로그를 발견하면 괜히 뿌듯합니다.

이렇게 일하는 시간 외의 시간을 쪼개서 오픈소스를 만들어보기도 하고, 새롭게 알게 된 지식도 기술 블로그에 잘 정리해두곤 하는데요. 개발이 너무 재미있고, 그래서 더 잘하고 싶다는 생각에 이것저것 만들어보면서 자연스럽게 성장할 수 있다 생각해요.

🔵 토스페이먼츠 Frontend Developer 자세히 알아보기

2. 더 성장하고자 하는 열망

“복잡도가 높은 증권 서비스를 모두 웹으로 개발하고 있다는 말에 프론트엔드 개발자로서 도전의식이 생겼고, 더 성장하고 싶다는 생각에 증권팀에 합류했습니다.” – 토스증권 Frontend Developer 최지민

토스증권 서비스는 모두 웹으로 만들어져 있기 때문에, 프론트엔드 개발자로서 다양한 경험을 쌓고 있는데요. 에셋(asset) 사일로에서 개설, 자산, 인증 서비스를 만들고 있습니다. 증권 서비스로서의 안정적인 운영은 물론, 토스만의 빠른 이터레이션을 통해 마켓 핏까지 찾을 수 있도록 두 마리 토끼를 잡기 위한 노력을 하고 있어요.

처음에는 토스로 입사했었는데요. 토스팀에서 일하는 방식을 경험하면서, 함께하는 동료들과 다양한 제품을 개발하고 더 나은 서비스를 만드는 것에 집중할 수 있었어요. 동시에 주변에 있는 뛰어난 동료들처럼 더 나은 개발자로 성장하고 싶다는 마음도 있었고요.

새로운 도전의 기회를 모색하던 중, 당시 토스증권팀이 ‘주식 투자를 새롭게 정의하고자 완전히 새로운 서비스를 준비하고 있다’는 사실과 프론트엔드 개발자가 필요하다는 이야기를 듣게 되었습니다. 동학개미운동으로 주식 투자에 대한 전국민적인 관심이 고조되고 있던 시기이기도 했고요. 무엇보다 복잡도 높은 증권 서비스를 모두 ‘웹’으로 개발하고 있다는 말에 프론트엔드 개발자로서 도전의식이 생겼고, 더 성장하고 싶다는 마음에 토스증권에 합류했습니다.

몇몇 기능들을 개발하며 증권 도메인에 대한 이해를 키우던 중, 핵심 기능 개발에 몰두하느라, 서비스 전반에 영향을 미치는 최신 TDS 적용 / 더 큰 텍스트 대응 등 필요한데도 쉽사리 적용되지 못했던 일들이 눈에 띄었어요. 투입되는 시간 대비 효용이 크지 않았던 작업임에도 자원해서 이 업무에 대한 오너십을 가져왔고, 효과적으로 처리하기 위해 디자이너분들과 함께 논의해가며 의사결정을 이끌어냈습니다. 일주일 만에 증권 서비스 전체에 해당 작업을 적용할 수 있었죠. 서비스 전반에 대한 이해도를 높일 수 있었던 것은 물론, 동료들에게 신뢰를 얻을 수 있었던 프로젝트라 생각합니다.

성공적으로 런칭한 증권 서비스는 폭발적인 이벤트로 수많은 고객들을 유치했는데요. 저희가 그려오던 청사진은 지금부터가 시작입니다. 앞으로가 더 많이 기대돼요. 개발자로서 설레는 제품을 만들 수 있어 너무 즐겁고요. 무엇보다 제가 만든 서비스로 시장과 산업을 바꾸고, 더 나아가 사람들에게 영감을 주는 경험을 할 수 있게 된 것이 정말 감사하죠.

🔵 토스증권 Frontend Developer 자세히 알아보기

“기술을 소비만 한다면, 개발자로서의 성장은 멈추겠죠. “왜?”라는 질문은 성장의 원동력이 됩니다. 기술 지식을 넓고도 깊게 쌓아갈 수 있기 때문이죠.” – 토스증권 Frontend Developer 김재원

토스증권 트레이딩 사일로에서 주식을 ‘매매’하는 서비스부터 주식 구매할 때 발생하는 ‘권리’의 고도화 작업, ‘선물’받은 주식에 대한 증여세 신고까지 다양한 서비스들을 만들고 있어요.

증권 서비스 오픈 전에는 ‘실시간 시세 연동’ 기능을 만들었는데요. 오픈 한 달 전 급하게 개발해야 했던 상황이었습니다. 실시간으로 시세를 반영하기 위해 여러가지 라이브러리를 후보에 놓고, 개념 증명(PoC: Proof of Concept)을 진행했고 최종적으로 한 라이브러리를 선택했는데요. 실제로 적용해보니, PoC 단계에서는 찾을 수 없었던 버그가 발견되었습니다. 아주 드물게 일어나는 현상이긴 했지만, 증권업 특성상 사용자들에게 잘못된 투자 정보가 제공되면 안 되기 때문에 반드시 고쳐야 했어요.

끈질기게 디버깅한 결과, 생명주기에 대한 속성에 원인이 있다는 것을 알게 되었습니다. 라이브러리를 선택하는 과정에서 다양한 후보를 철저히 검증하는 과정을 거쳤기 때문에, 문제 원인을 파악하자마자 고칠 수 있었고요. PoC 단계에서 이 라이브러리의 특징을 알고 있었기에 빠르게 더 나은 대안을 선택할 수 있었습니다. 아마 ‘왜 이 기술을 선택해야 하는가?’에 대한 충분한 고민이 선행되지 않았다면, 버그를 빠르게 수정할 수 없었을테고 증권 서비스 오픈도 미뤄졌을 수 있어요.

모르는 것을 알아내기 위해 해결 방법을 찾아내고 스스로에게 끊임없이 질문하는 습관이 꼭 필요하다 생각합니다. 더 나은 개발자로 성장하려면 항상 도전 의식을 가지고 새로운 것을 알아내야 하는데, 그 근원이 결국 “왜?”라는 질문에서 오기 때문이죠. A라는 기술이 있다고 할 때, 이 기술이 왜 나왔을까? 생각하다 보면 내부 동작들을 알아보게 될 것이고, 대체제인 B, C, D까지 비교하면서 그 기술에 대한 스펙트럼이 훨씬 넓어지게 됩니다. 운이 좋으면 이 기술에 기여하거나, 더 좋은 기술을 만들 수 있는 기회가 오기도 하고요.

새로운 지식이나 기술을 알게 될 때 더 자세히 알아가기 위한 질문을 꾸준히 하다보면, 분명히 기술 지식이 넓고 깊어집니다. 기술을 소비만 한다면 개발자로서의 성장은 결코 이뤄낼 수 없다 생각해요.

🔵 토스증권 Frontend Developer 자세히 알아보기

3. 어떻게든 해내겠다는 의지와 쉽게 포기하지 않는 그릿(grit)

“제품을 만들다 보면, 구현이 어려운 상황을 접하게 될 때가 있어요. 중간에 포기하지 않고 끝까지 해냈을 때, 더 좋은 기능으로 구현되고 개발 환경 또한 조성될 수 있었어요.” – 토스뱅크 Frontend Developer 이민규

제품을 만들다 보면, 구현이 어려운 상황을 자주 접하게 되는 것 같아요. 근본적으로 구현할 수 없는 기능일 수도 있고, 아예 처음부터 새로 시작해야 하는 일일 수도 있습니다. 또는 여러 협업자들과 함께 해결해낼 수도 있는데, 이 케이스에 대한 경험을 좀더 자세히 소개하고 싶어요.

별도 앱이 아닌 토스 앱 내에서 경험할 수 있는 뱅크 서비스인 만큼, 코어 동료들과의 협업이 필수인데요. 뱅크 서비스와 토스 앱을 연동하기 위한 수많은 작업들 중 스크래핑 연동이 기억에 많이 남아요. 해결하지 못할 것만 같은 일이었는데, 동료들과 다함께 해낸 일이거든요.

저희는 스크래핑 로직을 작성하고, 코어 분들은 앱에서 스크래핑하는 모듈을 작성하는 개발이었어요. 고객들의 데이터가 모두 암호화 되어야 하는 기능이 필수로 포함되어 있었기에, 기능 개발은 물론 테스트, 디버깅까지 많은 어려움이 있었어요. 사무실이 다르니 물리적 거리도 멀어서 데이터 하나 확인하는 것도 쉽지 않았던 상황이었거든요. 자칫하면 불협화음이 생길 수도 있었는데요, 이런 상황을 원천적으로 막기 위해 다같이 개발 환경 자체를 개선하는 작업을 진행했습니다. 프론트 영역에 자체 암복호화모듈을 만들고 뱅크와 코어 개발 로직 간 의존성이 없도록 개발해가면서, 처음에 힘들었던 상황들을 많이 바꿀 수 있었어요.

중간에 포기하지 않고, 동료들과 지속적으로 의견을 나누며 끝까지 해결해낸 경험인데요. 어떻게든 해내겠다는 그릿(grit)으로 더 좋은 기능과 개발 환경을 만들 수 있었고, 더 나은 사용자 경험에도 한 발 다가갈 수 있었다 생각해요. 동료들에 대한 신뢰가 두터워지는 것은 물론이고요.

🔵 토스뱅크 Frontend Developer 자세히 알아보기