[톡터뷰 : 웹팀] 채널톡의 첫인상을 책임지는 웹팀

안녕하세요! 채널팀에서 채용을 담당하고 있는 한스입니다👨🏻‍💻

’톡터뷰’ 여섯번째 이야기! 저는 이번에는 채널톡의 첫인상을 책임지고 있는 웹팀 이야기를 소개해보려 합니다.

이런 분에게 이 글을 추천합니다!

✅ 채널톡 ‘웹팀’ 문화/직무에 대해 알고 싶은 분

✅ 채널톡 프론트엔드 개발자가 하고 있는 경험에 대해 알고 싶은 분

Q. 존, 아루 안녕하세요~ 자기소개 부탁드려요.

• 존 : 안녕하세요! 채널팀의 존이라고 합니다.

  저는 현재 데스크 팀에서 프론트엔드 개발을 담당하고 있으며, 사용자들에게 더 나은 경험을 제공하기 위해 UI/UX 개선 및 성능 최적화 작업을 주로 하고 있어요.

  웹 개발을 통해서 채널톡에서 더 나은 서비스를 만들기 위해 노력하고 있습니다.

• 아루 : 안녕하세요! 채널팀에서 프론트엔드 개발자로 재직 중인 아루입니다.

  채널팀에 합류한 이후로 다양한 태스크에 참여하였고, 최근에는 채널톡 데스크탑 앱(Electron)의 신규 기능 개발과 유지보수를 주로 맡고 있어요.

  비즈니스 채팅 애플리케이션에 걸맞은 안정성과 사용자 편의성을 제공하는 데 중점을 두고 있습니다.

Q. 존과 아루는 프론트엔드 개발을 어떻게 시작하게 되셨나요?

• 존 : 아~ 저는 대학생 때 한창 철권에 빠져있었는데요😁 제 전공이 컴퓨터공학이어서 철권사이트를 직접 만들어 보고싶어 이런저런 개발 관련 내용들을 찾아보고 익히면서 자연스럽게 개발을 시작하게 되었어요.

  다양한 개발 분야 중 웹을 선택한 이유는 평소 성능 최적화와 시스템 환경을 만드는 거에 관심이 높았고, 사람들의 구매 욕구를 불러일으키는 걸 만들어 가는 과정이 매우 흥미롭다고 느끼는데 이때 웹이 개발에서 가장 직관적인 플랫폼인 거 같아서 선택하게 되었어요.

• 아루 : 저는 좀 심플한데요. 평소 리서치분야(데이터 사이언스/데이터 엔지니어링)에 관심이 많은 상황이었는데 채널팀에 오기 전 첫 회사에서 프론트개발 포지션으로 제안이 왔고 해보고 싶다는 도전 욕구가 생겨 시작하게 되었어요.

Q. 채널팀을 특별히 선택하게된 이유는 무엇인가요?

• 존 : 이전 회사에서는 기술적으로 훌륭한 팀과 함께 일했지만, 비즈니스적인 결정들이 아쉬운 부분이 있었어요.

  아무리 기술이 뛰어나더라도 비즈니스적으로 강력한 임팩트를 내지 못하면 전체적인 성과에 한계가 있음을 깨달았고, 채널팀은 비즈니스와 기술의 조화를 통해 뛰어난 성과를 내고 있다는 점이 굉장히 매력적으로 느껴서 합류하기로 했어요.

• 아루 : 저는 오히려 존과 반대 케이스인데요. 이전 회사는 비즈니스적으로 매우 성공적이었지만, 기술적으로 더 발전하기 위해서는 더 복잡하고 도전적인 문제를 다루는 팀에서 일해야겠다는 생각이 들었었어요.

  마침, 전 회사에서 채널톡 제품을 쓰고 있었는데요. 제품을 살펴보니 팀챗, 유저챗, 마케팅 등의 여러 도메인이 엮여있으면서도 실시간성이 가미된 복잡한 제품이고 기술적으로 충분히 어려운 제품을 만들고 있다고 생각했어요.

  그래서 채널팀에 합류하면 다양하고 복잡한 문제를 해결하며, 기술적으로 한 단계 더 성장할 수 있는 환경이 마련되어 있다고 느껴져서 합류하게 되었어요.

Q. 채널팀에 입사한 후 느낀 장단점은 무엇인가요?

• 존 : 장점과 개선이 필요한 부분을 나눠서 말씀드릴 수 있겠는데요. 먼저 장점으로는 팀에서 개인에게 많은 신뢰를 주며, 업무 퍼포먼스에 있어 자율성을 강조하는 문화를 가지고 있는 점이 좋았어요. 덕분에 책임감을 가지고 중요한 프로젝트를 주도할 수 있었고, 실제로 큰 임팩트를 낼 수 있는 기회가 많았어요.

  하지만 팀이 성장하면서, 개인에게 맡겨진 역할이 커지는 만큼 이를 더욱 체계적으로 관리할 수 있는 시스템의 필요성을 느꼈어요. 앞으로 이런 부분에서 더 나은 협업과 성과를 끌어낼 수 있도록 개선이 이루어지길 기대하고 있어요.

• 아루 : 저는 제가 기대했던 것 이상으로, 기술적으로 충분히 성장할 기회들이 많았던 거 같아요. 존이 말씀 주신 거처럼 구성원을 믿고 많은 기회를 부여한다는 점이 가장 장점이라고 말씀드릴 수 있을 거 같아요.

  아쉬운 점은 크게 없지만, 제품의 복잡도가 매우 높아서 해야 하는 일들이 정말 많은데 가끔 일이 한꺼번에 몰릴 경우에는 힘에 부칠 때가 있기는 해요. 하지만 고통 없는 성장은 없다고 생각하고 열심히 하고 있답니다🔥

Q. 존, 아루 채널팀에서 기술적으로 가장 어렵게 해결한 문제라고 생각하거나 기억에 남는 프로젝트가 있나요?

• 존 : 저는 대규모의 React 코드베이스에서 상태 관리 라이브러리를 Redux에서 React Query로 마이그레이션하는 작업을 리딩했던 프로젝트가 가장 기억에 남아요.

  Redux의 복잡한 상태 관리와 보일러플레이트 코드를 줄이고, 서버 상태 관리를 효율화하기 위해 React Query를 도입했었습니다. Redux와 React Query가 공존할 수 있도록 하여 새로운 기능은 React Query로 작성하고, 기존 코드는 점진적으로 전환했어요.

  또한 팀원들에게 전파하여 동일한 합의와 컨벤션을 잡는 것에 신경 썼어요. 결과적으로 React Query로 전환하면서 ErrorBoundary와 Suspense를 적극적으로 사용하게 되었고 선언적으로 코드를 작성하기 수월한 환경을 만들었어요. 동시에 불필요한 상태들을 관리할 필요가 없어져서 개발을 좀 더 편하게, 효율적으로 할 수 있는 환경 또한 만들 수 있었어요.

• 아루 : 제가 합류할 당시 채널톡 데스크탑 앱은 코드베이스의 Readability가 심하게 떨어지는 상태였고, 코드 히스토리와 배포 프로세스를 알고 있는 분도 거의 없는 상황이었어요.

  이러한 상황에서 마일스톤을 세우고 팀원들의 공감을 얻어 Electron 대신 Tauri를 사용하여 데스크탑 앱을 재작성하는 TF를 진행하였고, 그 과정에서 macOS 코드 사이닝 히스토리를 복원하고, EV Code Signing 인증서 토큰을 배송받아 팀원들과 같이 등록했던 과정이 가장 기억에 남는 것 같아요.

Q. 존, 아루은 앞으로 어떤 커리어 패스를 만들어 가고 싶으신가요?

• 존/아루 : 저희 둘다 비슷한 생각을 가지고 있는데요. ‘웹 프론트엔드 스페셜리스트’를 목표로 할 수도 있겠지만, 비즈니스의 필요에 따라 다방면으로 활약할 수 있는 ‘소프트웨어 엔지니어’가 되는 것이 지금의 목표라고 말씀드릴 수 있을 거 같아요.

  현재 채널톡 개발자의 채용 기조이기도 한데요. 특정 기술에 치우치기보다는 탄탄한 기본기를 바탕으로 비즈니스가 성장하는 데에 기술적으로 해결해야 하는 문제가 있다면 해결해 나가면서 ‘웹 프론트엔드 엔지니어’가 아닌 ‘소프트웨어 엔지니어’가 되는 것이 목표예요.

Q. 채널톡의 웹팀은 어떤 기술 스택을 활용하고 있나요?

• 존 : 채널팀의 웹팀의 기술은 현재 레거시 Redux Redux-Saga 기술을 React Query를 통해 상태를 제거하고, Zustand를 도입하여 모던한 상태관리로 마이그레이션하는 작업을 하고 있어요.

  Styled Component를 사용하고 있고, 최근에 저희의 디자인 시스템인 베지어는 폭넓은 환경을 지원하기 위해 CSS In JS가 아닌 SCSS로 최근에 마이그레이션 하기도 했어요.

• 아루 : 프로젝트 전체적으로 이야기해 보면 React + Webpack + Babel 조합을 사용하고 있고, 최근에는 Vite와 같은 차세대 프론트엔드 툴링과 SWC 등을 도입하여 빌드 속도를 개선하는 작업도 진행 중이에요.

Q. 채널톡의 웹팀의 조직은 어떻게 구성되어 있나요?

• 아루

  : 네~ 웹팀은 현재 데스크팀과 프론트팀으로 나눠져 있는데요.

• 먼저 데스크팀에서는 팀챗, 유저챗 등을 제공하는 '채널톡 데스크' 웹 애플리케이션을 개발합니다.

  채팅 상담, 미트 상담 인입, 워크플로우 설정 등 다양한 기능을 하나의 앱에서 제공하고 있어요. 새로운 기능 개발과 동시에 제공되고 있는 앱의 번들을 경량화하고, FCP/CLS 등 성능 지표를 꾸준히 개선하고 있어요.

  또한 앱에서 제공하는 기능들과 마찬가지로 코드 베이스의 규모가 크기 때문에, 여러 팀원이 같이 작업하더라도 퀄리티나 속도가 떨어지지 않도록 DX 개선 등을 진행하고 있습니다.

• 프론트팀에서는 고객사 사이트나 앱에 삽입되는 '채널톡 프론트'를 개발합니다.

  고객과 채널톡의 첫 번째 접점인 만큼 애니메이션과 같은 미려한 UI와 접근성에 더욱더 신경 쓰고 있고, 프론트 미트 상담 같은 기능을 추가하면서도 번들 경량화, 크로스브라우징 등 다양한 문제를 해결하고 있어요.

  프론트는 고객사 사이트에 직접 삽입되는 애플리케이션인 만큼 고객사 사이트의 스타일과 성능에 영향을 미치지 않아야 하고, 가볍고 격리된 환경을 만드는 데에 집중하고 있습니다.

Q. 채널톡의 프론트엔드 개발자로 일하면서, ‘이런 경험은 채널에서만 할 수 있다’고 느끼신 순간이 있을까요?

• 존 : 단순히 웹페이지 개발이 아니라 다양한 측면에서 경험할 수 있었던 부분이 좋았던 거 같아요. 채널톡은 웹/앱을 모두 지원하고 있는데요.

  이때 앱을 사용하기 위한 일렉트론을 사용하게 되면서 일관성을 유지하기 위해 기술적으로 노력하는 경험, 화면 공유 등이 들어간 ‘미트’ 기능을 개발하고, 미트의 편의성을 높이기 위해 노이즈캔슬링 기능을 도입하는 등의 경험은 채널톡이 아니면 하기 힘든 경험이라고 생각하고 있어요.

• 아루 : 채널톡은 한국에서만 서비스하고 있는 제품이 아닌 일본/미국 등 글로벌 시장에서 활약하고 있는 제품이다 보니 여러 언어를 제공하고 그에 따른 문제들에 대응해야 하는 점이 유니크하다고 생각해요.

  다양한 언어를 제공하고 있다 보니 많은 텍스트의 양을 효율적으로 처리할 방법에 대해 고민을 해야 하는 점과 언어 대응뿐만 아니라 번역 파일을 스플리팅하여 첫 로딩 속도를 최대한 빠르게 해야 하는 작업 등을 진행하면서 쉽게 해보기 어려운 경험을 쌓고 있다고 생각하고 있어요.

Q. 채널톡 프론트엔드 개발자로서 좋은 성과를 내는 기준은 무엇이라고 생각하나요?

• 존/아루 : 가장 중요하게 생각하는 부분은 비즈니스 임팩트를 내기 위해 정해진 기한을 지키면서, 기술 부채를 최소화하는 것이 중요하다고 생각해요.

  주어진 시간 안에 현재의 코드에 어떻게 새로운 기능을 구현할 것인지 그 과정 안에서 대략적인 일정 산출, 퀄리티 있는 코드 작성, 라이브러리 선택 등 다양한 요소를 고려하면서 최상의 결과를 만드는 것이 좋은 성과를 내는 개발자라고 생각하고 있습니다.

JOIN OUR TEAM!

Q. 웹팀만이 가진 장점이 있다면 무엇인가요?

• 존 : 웹팀의 가장 큰 장점은 다양한 최신 웹 기술을 활용하여 폭넓은 기술 스택을 경험할 수 있다는 점이에요. 또 웹 개발은 빠른 배포와 사용자 피드백을 받을 수 있어, 개선과 성장이 빠르게 이루어집니다.

  이를 통해 더 나은 사용자 경험을 제공하고 사용자 중심의 기능 개발이 가능해요. 채널톡은 15만 개 이상의 고객사가 사용하는 채팅 상담 플랫폼으로, 소켓 처리와 대규모 상태 관리 등 도전해 볼 만한 과제가 많아요.

  특히 대규모 상태 관리를 해야 하는 어려운 프론트엔드 제품을 다루기 때문에 기술적으로 성장할 기회가 많습니다.

• 아루 : 이를 통해 팀 간의 커뮤니케이션 능력과 협업 능력을 키울 수 있는 점도 좋은 거 같아요.

  또 새로운 기술과 트렌드를 빠르게 적용할 수 있는 분야로, 창의적인 아이디어를 실제로 구현하고 혁신적인 기능을 개발할 수 있는 환경이 마련되어 있는 점도 들 수 있을 거 같아요.

Q. 어떤 분들이 웹팀으로 오시면 잘 맞을까요? 함께하고 싶은 동료에게 한마디 부탁드려요!

• 존 : 채널톡에서는 개인에게 신뢰를 바탕으로 다양한 기회를 주고 있기 때문에 주도적으로 문제를 해결하고 개선하려는 의지가 강한 분이면 저희랑 잘 맞으실 거 같아요.

• 아루 : 자율과 책임이 명확한 문화를 가진 팀인 만큼 자발적으로 뛰어야 할 때는 열심히 달리고 쉴 때는 잘 쉴 수 있는 분이 오시면 좋을 거 같아요.

  더불어 더 나은 기술 스택이나 컨벤션을 제안하고 팀원들과 적절한 커뮤니케이션으로 공감대를 형성해서 본인 주도하에 도입하고 후속 작업까지 이어 나가는 게 보통 채널톡 제품팀에서의 일하는 방식이에요. 그래서 이런 방식에 익숙하신 분이라면 조금 더 빠르게 잘 적응하실 수 있을거라고 생각해요. [이런 글도 추천드려요👍]

• [개발문화] 채널팀의 엔지니어 세션을 소개합니다!

• 유저 경험을 고려한 웹 메신저 SDK 개발하기

• 대규모 코드 마이그레이션 자동화하기