brunch

Tech Mixtape: 프론트엔드 개발자 고종현

by Lia

안녕하세요, IT 분야에서 활동하고 계신 분들의 특별한 이야기를 음악처럼 들려드리는 Tech Mixtape!

2번째 트랙에 오신 것을 환영합니다!


2번째 트랙의 주인공은 IT 생태계에 깊이 기여하는 진정한 컨트리뷰터, 토스 프론트엔드 개발자 고종현 님입니다. 종현 님의 'Tech Mixtape'을 함께 플레이해볼까요?



종현 님의

최애 작업곡




Lia: 종현 님, 안녕하세요! Tech Mixtape 1번째 트랙에 함께해 주셔서 감사드립니다. 인터뷰를 시작하기 전에, 저희 'Tech Mixtape'의 시그니처 질문부터 드리겠습니다. 작업하실 때 즐겨 들으시는 '최애곡'이 있으신가요?
출처: https://www.youtube.com/watch?v=OQWHFmPDVRg

(인터뷰를 즐기며 종현 님의 최애곡을 지금 바로 들어보세요!)

종현: 안녕하세요, 여진 님! 초대해 주셔서 감사합니다. 제가 작업할 때 즐겨 듣는 최애곡은 Wave to Earth의 '사랑으로'예요.


요즘 '어떻게 하면 진심이 잘 전달될까?'라는 주제를 자주 생각하는데요. 이 노래를 들으면, '사람'에서 'ㅁ'이 깎여 'ㅇ'이 된 '사랑'처럼, 우리 진심도 파도처럼 부서지고 닿아가다 보면 결국 영원한 사랑으로 이어질 수 있다는 생각이 들어요.


그래서 저도 상대방에게 전하고 싶은 마음을 포기하지 않고 '사랑으로' 계속 전달하려 노력하고, 서로의 이야기를 더 잘 들어주다 보면 결국 진심이 통하고 더 행복해질 수 있지 않을까 생각합니다. 제가 투머치 토커이긴 하지만 (웃음), 그래도 제 투머치 토킹이 누군가에게는 부담이 아니라, 진심 어린 마음으로 받아들여지면 좋겠습니다.




Part 1:

불가능을 뚫고,

목표에 도달하는 성장을




Lia: 종현 님은 대학에서 디자인을 전공하시고 창업까지 경험하셨는데, 결국 카카오헤어샵, 요기요를 거쳐 현재 토스에서 프론트엔드 개발자로 근무 중이신데요, 프론트엔드 개발자라는 길을 걷게 된 특별한 계기가 있으실까요? 또, 디자인과 프론트엔드의 어떤 매력이 종현 님을 이끌었는지 궁금합니다.


종현: 저는 대학에서 디자인을 전공했고, 영상 편집 공부를 했어요. 그 당시 전공 수업 주제가 ‘앱 디자인’이었는데 맥북의 터치바처럼, 스마트폰 화면에 아이콘을 띄우고 그걸 누르면 단축키가 실행되는 앱을 만들면 더 직관적인 편집이 가능하겠다는 아이디어가 떠올랐어요. 이 아이디어로 창업지원사업에 지원했고, 덜컥 합격해버렸죠.


그런데 개발을 전혀 몰랐어요. 외주 업체에 앱 개발을 맡기면서 "아이디어도 중요하지만, 그걸 실현해내는 능력이 정말 중요하구나"를 강하게 느꼈습니다.


그때부터 프론트엔드 반복 작업을 직접 해보면 좋겠다 싶어 유튜브로 독학을 시작했고, 하나하나 만들어나가면서 프론트엔드 개발 자체에 흥미를 느꼈어요. 저에게는 내가 원하는 방향으로 무언가가 '실질적으로' 해결되는 과정이 정말 좋았던 것 같아요.


그리고 프론트엔드는 그런 점에서 특히 매력적이에요. 디자이너, 기획자, 백엔드 등 다양한 직군과 협업하면서 서로의 언어를 통역해주고, 요청을 구체화하며, 무엇보다 최종 결과물을 만들어내는 역할이니까요.



그래서 지금도 프론트엔드라는 역할 안에서, 이 "실현하는 힘"을 가진 사람으로 있는 게 참 잘 맞는 것 같아요. 벌써 6년이나 되었네요!



Lia: 그렇게 프론트엔드 개발자가 되어 현재는 토스에서 근무 중이신데요, 현재 종현 님께서 토스에서 진행하고 계신 프로젝트, 혹은 만들고 있는 기능이 있다면 공유 부탁드립니다. 토스에서 어떤 일을 하고 계신지 궁금해요!

종현: 저는 토스쇼핑의 카탈로그 팀에서 개발을 맡고 있어요. 카탈로그는 이커머스에서 같은 상품을 여러 판매자가 팔 때, 이들을 하나로 묶어 사용자에게 보여주는 작업을 말해요. 사용자가 원하는 상품을 쉽게 찾고 가장 적합한 상품과 광고가 노출되도록 하는 데 아주 중요하죠.


토스쇼핑 대부분의 팀이 이 카탈로그화된 그룹을 기반으로 움직여서, 저희 팀 역할이 핵심이에요. 저희 팀은 다양한 비정형 데이터를 일관되게 정형화하고, 룰 기반으로는 어려운 케이스들을 자동으로 잘 묶이는 구조를 만들고 있어요. 덕분에 새로운 키워드를 흡수하고, 예외들을 시스템적으로 해결하며 정말 재미있게 일하고 있습니다.



Lia: 종현 님은 토스에 세 번 지원하셨다고 했는데, 솔직히 세 번이나 같은 회사에 도전하는 게 쉽지 않았을 것 같아요. 어떤 마음으로 포기하지 않고 계속 도전하셨고, 그 과정에서 가장 크게 성장했다고 느꼈던 부분은 무엇인가요?

종현: 아마 영상을 보시고 제가 토스에 세 번만 지원한 걸로 아는 분들도 있을 텐데요. 사실 토스에 최종 합격하기까지 총 일곱 번 정도 지원했던 것 같아요. (ㅠㅠ)


물론 매번 지원하고 떨어지는 경험이 익숙해질 수는 없었어요. 하지만 그 과정에서 토스가 요구하는 코드의 방향성과 디테일 수준을 조금씩 체감하게 됐고, 면접 과정도 굉장히 인상 깊었죠.


특히 "서비스가 확장될 때 어떻게 안정성을 지킬 수 있을까?"라는 질문은 코드뿐만 아니라 협업적인 측면까지 고려하게 하는 큰 동기 부여가 됐어요. 그때 나눴던 이야기와 고민들이 지금까지도 제 개발 방식과 팀에서의 역할에 많은 영향을 주고 있는 것 같아요. 저도 아직 계속 배우고 있습니다.



Lia: 많은 개발자들이 좌절하거나 포기할 법한 상황을 겪으면서, 종현 님만의 '회복탄력성'이나 '성장 마인드셋'을 어떻게 유지하셨는지 궁금해요.

종현: 사실 저는 제가 회복 탄력성이 좋은 사람인지는 잘 모르겠어요. 하지만 장기적인 방향이 올바르고 경제적인 여력만 있다면, 실패는 단지 겹겹이 쌓인 목표를 하나씩 벗겨내는 과정이라고 생각해요.

토스 입사에는 매번 실패했지만, "더 좋은 개발자가 되고 싶다"는 목표에는 매번 가까워졌던 것 같아요. 그래서 결국은 그 모든 도전이 실패가 아니라 작은 성공들이 모인 시간이었다고 느껴요.


예전에 창업할 때는 돈을 아끼려고 자전거로 등굣길을 다니고, 편의점 새벽 알바를 하며 코딩하던 때도 있었는데요. 그때를 떠올리면 지금처럼 실패할 수 있는 여유가 있다는 것 자체가 정말 감사하게 느껴져요. Wave to Earth의 "사랑으로"처럼, 언젠가는 우리의 "염원"이 "영원"이 되도록, 앞으로도 기꺼이 실패하면서 배워가야죠. (웃음)





Part 2:

IT 생태계에 기여하며

성장 속도를 더하다




Lia: 종현 님의 이력에서 가장 눈에 띄는 부분 중 하나가 바로 오픈소스 기여인데요. 오픈소스 활동에 적극적으로 기여하게 된 특별한 동기가 있으셨나요? 토스에서 진행한 인터뷰를 살펴보면, ‘처음엔 문서 픽스부터 시작해서 타입, CI 코드까지 검토하며 빠르게 학습할 수 있었다’는 말씀처럼, 개인적인 성장에 어떤 긍정적인 영향을 주었는지 구체적인 사례를 듣고 싶어요.

종현: 처음부터 오픈소스에 관심 있던 건 아니에요. 토스의 개발 문화와 기술적인 행보에 큰 관심을 갖고 있었죠. 그러던 중, 토스에서 Slash 라이브러리를 오픈소스로 공개했을 때, "토스는 코드를 어떻게 짤까?" 궁금했죠. 코드를 살펴보니 인상 깊었고, 개선할 아이디어도 보여 PR을 보내기 시작했어요.



그 과정에서 받은 코드 리뷰를 통해 다양한 키워드와 개념들을 배울 수 있었습니다.

monorepo 구성 방식 (nx, lerna)

package.json 필드들

ESM과 CJS의 동작 방식

Shopify가 사용하는 타입 테스트 툴인 tsd

workspace 프로토콜 등

이 경험들은 제가 이후 다닌 회사들에서도 실제로 가져다 쓰며 개발 환경을 개선하는 데 많은 도움이 되었고요.


제가 가장 흥미롭게 기여했던 건 React Query의 suspense 옵션을 기본으로 설정한 @toss/react-query 패키지였어요. 개발 중 타입 문제가 구조적으로 개선되어야 하는데, 기존 구조로는 BREAKING CHANGE가 불가피했죠.


그래서 PR을 보냈지만, 실제 서비스에 사용되는 패키지라 내부에서도 신중하게 검토할 수밖에 없는 상황이었어요. 기존 구조로는 해결이 어렵겠다는 생각이 들어, MIT 라이선스 소스를 기반으로 Suspensive라는 별도 저장소를 만들어 근본적으로 다시 설계했어요.



Suspensive가 나중에 TanStack Query 커뮤니티 리소스로 추가되면서 TanStack 팀과의 인연이 시작됐고요. 현재는 토스 오픈소스로 머지되어 토스에서도 많이 사용하는 패키지가 되었어요.


과정 중에 만난 사람들 중에 현재 Suspensive를 같이 관리하는 gwansikkkangju2000bigsaigon333님, 함께 코드에서 만나서 현재 토스를 같이 다니고 있는 okinawaa, minsoo-web님도 있고 많은 기여자 분들도 만날 수 있어서 행복했습니다.



Lia: 오, 그렇게 TanStack Query와 연이 시작되었군요! 이 자리를 빌어 다시 한번 메인테이너가 되신 것을 진심으로 축하드립니다. :)
TanStack Query의 메인테이너가 되신 소감이 궁금해요. 전 세계 수많은 개발자들이 사용하는 오픈소스의 핵심 기여자로서 가장 보람을 느끼는 순간은 언제인가요?

종현: 축하해주셔서 감사합니다! 사실 여진 님께 특별히 감사한 마음이 있어요. 제가 프론트엔드 개발을 시작하게 된 계기가 바로 여진 님이 진행해주신 교육 프로그램이었거든요. 메인테이너가 된 것도 여진 님 프로그램들 덕분이라 더 유달리 감사하게 느껴져요(제가 더 감사합니다, 종현 님!).



솔직히 저도 제가 TanStack Query의 메인테이너가 될 거라곤 상상도 못 했어요. 처음엔 Dominik Dorfmeister(aka. TkDodo)에게 디스코드로 메시지가 왔는데, 정말 기쁘고 놀라웠죠. 물론 지금은 많은 프론트엔드 개발자들이 사용하는 인터페이스를 만들고 있다는 점에서 큰 보람을 느껴요.


하지만 그보다도, 제가 직접 쓰는 서비스에서 정말 유용한 툴을 만들고 있다는 점, 그리고 서버 상태를 다루는 전반적인 흐름을 스스로 완전히 이해하고 있다는 안정감이 가장 큰 만족감으로 다가옵니다.



회사에서도 여러 이유로 TanStack Query v4를 쓰는 서비스가 많은데, v5의 핵심 인터페이스(queryOptions, useSuspenseQuery 등)를 활용하지 못하는 상황이었어요.

그래서 최근에 v5 API들을 v4로 백포팅하는 작업을 진행했고, 이제는 v4에서도 해당 인터페이스들을 사용할 수 있게 되었습니다.



이 작업도 정말 보람찼어요. 무엇보다도 제가 개발할 때 가장 자주 활용하는 툴이기 때문에, 이 툴을 더 좋게 만들고, 제 작업 환경도 개선되고 있다는 사실이 가장 즐거운 포인트인 것 같아요.


이 외에도 fakeTimers로 이전해서 flaky한 테스트 코드가 항상 동일하게 동작하도록 작업했던 작업도 떠오르는 것 같네요. 지금은 새 기능인 mutationOptions에 대한 PR을 열심히 리뷰하면서 다듬고 있습니다.



Lia: 개인적으로 만드신 오픈소스 라이브러리 Suspensive가 회사 내부에서 20개 넘는 서비스에 사용된다는 건 정말 대단한데요. Suspensive를 통해 프론트엔드 개발에서 만나던 '미결적인 것들(비동기, 에러, 타이밍 제어 등)'을 어떻게 해결하고 계신가요?

종현: 입사 당시 Suspensive는 토스코어 약 10여 개 패키지에서만 사용됐는데, 지금은 토스 전 계열사 80개가 넘는 패키지들에서 쓸 정도로 확산되었어요.


Suspensive는 TanStack Query v5가 나오기 전부터, v4에서는 없던 Suspense 관련 기능들을 먼저 제공해온 라이브러리입니다. 덕분에 낮은 브라우저 호환성 상황에서도 개발자 경험(DX)을 크게 개선했죠.


핵심은 단순히 suspense 기능뿐 아니라, 복잡한 비동기 UI 흐름에 필요한 인터페이스들을 통합적으로 제공한다는 점이에요. 예를 들면

ClientOnly, Suspense, ErrorBoundary 같은 기본 컴포넌트부터

여러 ErrorBoundary를 하나로 묶어 관리할 수 있는 ErrorBoundaryGroup

로딩 상태에 delay를 줄 수 있는 Delay 컴포넌트 등

이러한 구성 요소들은 @suspensive/react 패키지에서 통합적으로 제공되고 있습니다.


Suspensive의 목표는 성공적인 흐름에 집중하고, 미결 상태의 경우의 수를 극단적으로 줄이는 개발 방식을 가능하게 만드는 것입니다. 앞으로도 많은 관심 부탁드립니다!



Lia: 그렇다면 요즘 가장 관심있게 보고 계신 기술이나, 라이브러리가 있을까요?

종현: 요즘에는 es-toolkitTanStack Form에도 관심을 갖고 있어요.


es-toolkit: lodash를 현대적으로 교체하기 위한 토스 오픈소스에서 진행한 프로젝트에요. 인터페이스들이 정말 아름답습니다. es-toolkit은 현재 Storybook과 Recharts와 같은 라이브러리에서도 의존하고 있어요.


TanStack Form: 그동안은 react-hook-form을 정말 잘 사용해왔지만, TanStack Form이 강조하는 ‘Only Controlled’ 방식과 타입 안전성(Type Safety)에 대한 철학에 저도 깊이 공감하고 있거든요.



Lia: 현재 진행하고 계신 다양한 활동이 있다면 소개해주시겠어요?

종현: 업무로 진행 중인 프로젝트인 토스쇼핑은 토스 앱의 가운데 탭에서 만나보실 수 있어요.


제가 메인테이너로 참여하고 있는 오픈소스 프로젝트인 TanStack Query와 Suspensive는 GitHub에서도 확인하실 수 있습니다. 또, 평소에는 ‘함수랑산악회’라는 동아리 활동을 통해 다양한 주제를 나누며 즐겁게 교류하고 있어요.


∙ 토스쇼핑: https://toss.im/shopping-seller

∙ TanStack Query: https://tanstack.com/query/latest

∙ Suspensive: https://suspensive.org

∙ 함수랑산악회: https://hamsurang.notion.site/index



Lia: 마지막으로, 오픈소스 기여에 관심 있는 개발자, 혹은 성장하고 싶지만, 어떻게 해야 할지 해메고 있는 분들에게 해주고 싶은 메시지가 있다면 무엇일까요?

종현: 평소 쓰는 기술들을 자세히 들여다보면, 의외로 부족한 점이 많다는 걸 알게 돼요. 운 좋게도 그런 과정에서 훌륭한 개발자분들로부터 여러 인사이트와 좋은 키워드를 배울 기회도 얻었죠. 문제를 해결하기 위해, 오늘도 야금야금 딥다이브하고, 실패하고, 배우면서 재밌게 개발해봐요!



Lia: 감사합니다, 종현 님! 도전부터 성장까지 끝없이 노력하는 이야기를 들으며 읽고 계신 분들도 당장이라도 Do It! 하는 마음을 심게 되었을 것 같은데요. 개발에 대한 뜨거운 열정과 끊임없는 도전으로 자신만의 비트를 찾아나서는 모습에서 힘찬 에너지 함께 얻어갑니다.


오늘 고종현 님의 Tech Mixtape은 여기서 마무리되지만, 앞으로 만들어갈 새로운 코드와 커뮤니티를 위한 노력은 계속될 것이라고 믿습니다.

그럼 다음 트랙에서 또 다른 IT 전문가의 흥미로운 Tech Mixtape을 들어보겠습니다. 감사합니다!






Next Track



Tech Mixtape의 다음 트랙은 IT 기획부터 힙합 음악까지 창작에 대한 열정을 키워나가고 계신 이재영 님의 트랙이 오픈됩니다.




본 인터뷰의 내용의 저작권은 인터뷰이 고종현 님께 있으며, 인터뷰의 기획 및 편집(Tech Mixtape)에 대한 저작권은 이여진에게 있습니다.

keyword
월요일 연재
이전 01화Tech Mixtape: 데이터/전략기획 전문가 이은지