React Summit 2022 참관기

React Summit은 'The Biggest React Conference World Wide'라는 캐치프레이즈로 2017년부터 열리고 있는 React 컨퍼런스입니다. 작년에는 COVID-19 감염증의 여파로 Full-remote로 열리게 되었지만, 올해는 오프라인과 remote 두 가지 hybrid 버전으로 개최되었습니다. 대부분의 컨퍼런스가 취소되거나 축소 된 작년이 다 지나갈 때쯤 React Summit 2022가 개최된다는 소식을 들었고, 팀의 좋은 지원을 받게 되어 참가하였습니다.

주최 측에 따르면 올해는 오프라인으로 1,500명 이상의 엔지니어들이 이 뜻깊은 행사에 함께하였고, 25,000명 이상이 실시간 온라인 세션을 들었으며, 60명 이상의 스피커가 영감을 주는 이야기를 들려주었습니다.

React와 관련된 다른 컨퍼런스는 여기에서 볼 수 있습니다.

컨퍼런스 모습들

컨퍼런스는 암스테르담 중심에 있는 The Kromhouthal이라는 곳에서 열렸습니다. 사용하지 않는 공장을 행사장과 음식점으로 개조한 곳입니다. 실제로 내부에서 천장을 보면 아직도 크레인이 그대로 설치되어 있습니다.

이 자리에 모인 엔지니어들은 언제든 멋진 테라스에 모여서 이야기를 나눌 수 있습니다. 아름다운 도시와 도시를 가로지르는 강가의 테라스에서 자유롭게 이야기를 나누는 모습을 보니 국내에서 열리는 컨퍼런스와는 또 조금 다른 느낌을 받을 수 있었습니다.

이번 발표에서는 어떤 키워드들이 많이 언급되었을까요? 아래에서 확인해보세요.

어떤 키워드들이 가장 많이 언급되었을까?

1. Design System

가장 많은 세션에서 언급된 주제는 Design System이었습니다. 꽤 놀랐던 점은 채널팀뿐만 아니라 많은 회사에서 이에 대한 고민을 하고 있다는 점이었습니다. Design System은 팀이 더욱 효율적으로 일하고, 일관된 고객 경험을 제공할 수 있도록 하는 훌륭한 도구이기 때문이 아닐까 싶습니다.

'Introducing Design System to Multinational Web Apps' 등의 세션에서는 디자인 시스템이 단순히 컴포넌트 모음 라이브러리를 뛰어넘어, brand identity와 훌륭한 DX를 제공하기 위해 갖추어져야 하는 요소들에 대해 소개하고 있습니다.

또 GitHub 팀에서 일하고 있는 Siddharth Kshetrapal의 'Walking the Line Between Flexibility and Consistency in Component Libraries' 세션에서는 잘 사용되기 위한 디자인 시스템을 만들 때 고려해야 할 유연성과 일관성에 대해서 이야기 합니다.

'Find Out If Your Design System Is Better Than Nothing'에서는 디자인 시스템을 만드는 것이 아니라 사용하는 것이 중요하다고 설명하면서, 디자이너부터 개발자까지의 협업 과정이 필요함을 이야기하고 있습니다. 그와 함께 디자인 시스템을 정량적으로 측정하기 위한 방법에 대해 소개합니다.

대부분의 Design System에 대한 세션들은 결국 Design System은 목적이 아닌 수단이라는 이야기를 하고 있습니다. 더 좋은 UX와 DX를 제공하기 위한 수단이기에, 쉽게 사용할 수 있고 더 많이 쓰일 수 있는 방법을 고민해야 합니다.

채널팀에서 처음 Bezier라는 오픈소스 Design System을 만들었을 때는 중복된 코드를 줄이는 것이 가장 큰 목적이었고, Color System, Typography, Button과 같은 공용 컴포넌트들이 우선적으로 만들어졌습니다.

지금은 Design System의 더 높은 활용성에 대한 고민을 하고 있습니다. a11y를 고민하고, mono-repo를 고민하였으며, 디자이너들이 만든 컴포넌트를 single source of truth로 가져갈 수 있는 방법에 대해 고민하면서 끊임없이 개선을 이루어내고 있습니다. 더 나아가, Bezier가 웹팀 뿐만 아닌 채널팀 전체가 관심을 가지고 발전할 수 있게 하기 위한 워킹 그룹을 구축하고 있습니다.

2. SSR (Server Side Rendering)

두번째로 많이 언급 된 주제는 SSR과 관련한 것이었습니다. React 18의 주요 릴리즈 내용 중 하나로 Concurrent 기능이 포함되었고, Next.js를 포함한 인기 있는 SSR 프레임워크들이 이 Concurrent의 일부인 streaming을 지원하게 되었습니다. 심지어 대부분 특별한 configuration 없이도 알아서 새로운 기능을 활용해 앱의 성능을 끌어올려 줍니다.

Next.js 프로젝트를 리드 하고 있는 Vercel 팀에서 일하고 있는 Delba de Oliveira의 'Routing in React 18 and Beyond' 세션에서 이것에 대해서 자세히 이야기 들을 수 있었습니다. Next.js의 새로운 라우터는 Server Components를 기반으로 구현되어 있으며, 새로운 Concurrent 기능을 최대한 활용할 수 있도록 설계되었다고 합니다.

또 하나의 중요한 인사이트는, 페이지의 세그먼트를 최대한 나누어 필요에 따라 서버와 클라이언트에 렌더링을 각각 위임 하기를 제안합니다. 이렇게 함으로써 네비게이션 바와 같은 공용으로 사용하는 레이아웃 세그먼트들은 페이지의 내용이 바뀌더라도 계속해서 (추가적인 하이드레이션이 필요 없이)인터랙션이 가능할 수 있고 불필요하게 리렌더링을 하지 않게 되며 상태를 잃어버리지 않을 수도 있습니다.

비슷하게 Liad Yosef의 'Dear Client, I'm Leaving You' 세션에서는 웹 앱의 렌더링 주체가 클라이언트에서 서버로, 다시 클라이언트로, 그리고 또다시 서버로 옮겨지고 있는 트렌드에 대해서 설명합니다. 그리고 최종적으로 React 18의 Concurrent기능(그리고 앞으로 나올 Server Component)을 활용하여 서버와 클라이언트 모두에게 적절하게 렌더링을 분배하고 위임하는 것에 대한 성능상의 이점을 말합니다.

채널톡에는 서버와 연동되어야 하는 매우 많은 수의 컴포넌트들이 존재하는데요, 일부 피쳐에서는 화면에 보이는 대부분의 컴포넌트가 실시간 데이터를 반영해야 합니다. 제품의 이런 특성 상 렌더링의 일부분을 서버에 위임하는 것이 쉽지 않고, 또 효용이 크지 않다고 생각하여 CSR을 고수하고 있어요. 다만 폼의 입력 된 내용을 바탕으로 '결과 미리보기' 렌더링을 제공하는 곳이 몇 군데 있는데요, 이런 부분을 서버로 옮기는 것을 고민해 볼 수 있을 것 같습니다.

3. Micro-frontend

Micro-frontend 분야는 채널팀이 요즘 가장 고민을 하고 있는 부분이기도 합니다. 채널톡 데스크는 페이지 단위로 다른 기능을 제공하는 서비스가 아닌, 유기적으로 동작하는 하나의 큰 앱이다보니 도메인 별로 분리를 하고 있지는 않습니다.

그러나 팀이 빠른 속도로 성장함에 따라 컨텍스트의 분리가 필요해졌습니다. 기술 스택, 테스트 바운더리, 에러 바운더리, 릴리즈 사이클 분리의 필요성에 대한 목소리가 점차 커지고 있으며, 머지 않은 미래에는 분명 업무의 컨텍스트가 나뉘어 지는 날도 올 것이기 때문입니다. 저희 팀은 지금이 그 준비를 차차 시작해 나가야 할 때라고 생각합니다.

리액트 생태계가 성장해가고 기업들이 제품의 전반에 리액트를 도입하는 사례가 많아짐에 따라 과거에 비해 굉장히 복잡한 형태의 리액트로 만든 서비스가 많아졌고, 많은 팀들이 이 복잡해진 컨텍스트를 나누기 위한 다양한 아이디어를 떠올리고 있습니다.

Micro-frontend를 도입하기 전에 깊은 고민이 필요하다는 이야기를 하는 세션도 있었습니다. Micro-frontend는 필요 이상으로 제품을 복잡하게 만들고, 대부분의 경우에는 하나의 큰 앱에서도 문제를 해결할 수 있는 방법이 분명 있다는 이야기였습니다.

마치며

모든 세션이 끝난 뒤에는 네트워킹 파티가 있었습니다 🎉

서밋에서 만난 분들을 보니 조금 의외였던 점은, 현지의 자체 서비스를 만드는 팀도 물론 많았지만 한국에서 흔히 SI라고 부르는, 아웃소싱을 전문으로 하는 대규모 팀이 많이 보였다는 것입니다(그 중에는 행사의 스폰서인 NearForm 팀도 있었습니다). 그들과 이야기를 나눌 기회가 생겨 물어보니 팬데믹 이후 많은 기업들이 IT 전환에 가속도가 붙거나 또는 IT 기술을 활용한 회사가 많아졌고, 그에 따라 아웃소싱에 대한 니즈가 어느 때보다 커졌다고 합니다. 과거에는 프로젝트별로 개발자와 관리자를 따로 채용하고 프로젝트를 관리해주는 전문 업체들이 있었으나 최근들어 비용이 비싸졌고, end to end 서비스를 제공해주는 전문 아웃소싱 팀을 더 선호하게 되었다네요. 그런 시장의 분위기로 인해 대규모 아웃소싱 전문 팀들이 많아지고 있다고 합니다.

이번 서밋에 참가하며 한국의 다른 팀에서 일하고 계신 분들을 뵙기를 기대 했습니다만 아쉽게도 한국에서 오신 분들은 만나지 못했습니다. 유럽과 달리 한국은 아직 COVID-19의 영향이 남아있기 때문으로 보입니다. 만약 내년에도 서밋에 참가하게 된다면 그 때는 한국에서 일하시는 분들과도 이야기를 나눠 볼 수 있기를 고대합니다.

팀과 제품이 외적으로 그리고 내적으로도 급격하게 성장하고 있는 이 때에, 많은 영감을 받을 수 있는 기회였습니다. 좋은 인사이트들을 듣고 보니 제품에 어떻게 녹여낼지에 대한 고민이 많아지기도 하지만, 한편으로는 우리 제품과 우리 팀이 가는 방향에 대한 확신 또한 더 많이 생기게 된 시간이었습니다.

꾸준히 성장하고, 더 나은 방법을 고민하는 채널톡 웹팀과 함께하고 싶다면 지금 바로 지원해주세요!