당근 @ FEConf 2023
지난 10월 21일에 열렸던 FEConf 2023는 “웹 프론트엔드”를 주제로 하는 행사 중 국내에서 가장 큰 행사입니다.
이번 FEConf 2023 행사 티켓도 열리자마자 수 초 안에 매진될 정도로 반응이 뜨거웠습니다. 저도 여전히 “웹 프론트엔드” 라는 분야가 얼마나 많은 관심을 받고 있는지 실감할 수 있어서 좋았습니다.
당근은 2020년 행사부터 꾸준히 FEConf 의 후원사로 함께하고 있습니다, 컨퍼런스에 참여하셨던 분들은 당근 부스에서 저희를 만났을 수도 있어요. 이번엔 행사 부스를 운영하는 것 뿐 아니라, 동료 두 분이 발표를 해주시기도 했습니다.
티켓팅에 실패해서 아쉽게 참석하지 못한 분들도 많이 계실 것 같기에, (조금 늦은거 같지만 😅) 당근 부스에서 있었던 설문과 당근 멤버들의 발표 내용을 공유해볼까 합니다.
전체 발표 내용은 언제든지 FEConf Korea 공식 Youtube 채널에서 다시 시청하실 수 있어요.
당근 부스 둘러보기
State of Karrot — FEConf 2023 Edition
여느 다른 부스와 마찬가지로 당근 부스도 설문을 메인으로 했습니다. 질문이 상당히 많았는데, 현장에서 끈기있게 답변 해주신 분들께 먼저 감사하다는 인사를 드립니다.
당근의 설문은 다른 부스들에서 진행한 것과 다르게 무려 직접 만든 수제(!) 폼으로 설문을 진행했습니다. 이걸 위해 저는 현장에서까지 열심히 라이브로(!!) 코딩을 하고 있었답니다.
왜 Google Forms 안쓰고 번거롭게 직접 만들었는지… 저도 모르겠습니다. 뭔가 만들어야 할 것 같았다고 할까요 ㅋㅋ; 일단 데이터 취합은 확실히 더 편했습니다. 참고로 설문을 통해 수집된 개인정보는 이미 말소되었으며 추후 이메일 발송등이 없음을 안내드립니다
당근 설문은 Devographics에서 매년 주제별로 진행하는 State of X 설문과 유사한 컨셉으로 구성되었습니다.
이름하야 “State of Karrot”! 한 가지 차별점은, 똑같은 설문을 당근 프론트엔드 챕터 멤버들도 함께 진행했다는 점입니다.
그래서 응답 데이터를 당근 프론트엔드 챕터와 FEConf 행사의 대중 참석자분들 세그먼트로 나누어, 내외부의 트렌드 차이를 보여주도록 구성할 수 있습니다.
설문 결과 보러가기:
https://state-of-karrot.pages.dev/surveys/feconf2023
눈에 띄는 점이 있는지 함꼐 살펴볼까요?
카테고리: HTML
첫 번째 카테고리는 웹 개발의 시작, HTML에 대한 것 입니다.
<dialog>와 <popover> 요소는 매우 유용하지만 아직 널리 지원되지 않는데요, 이렇게 새롭게 추가된 HTML 요소에 대한 인지도(awareness)는 크게 차이가 없었습니다.
tabindex나 inputmode와 같은 접근성에 중요한 기능들은 당근 앱 내에서도 활발히 사용되는 만큼, 당근 멤버 중에 사용하고 있다고 응답해주시는 분들이 많았습니다.
카테고리: JavaScript
자바스크립트 문법에 대한 질문에서는 당근 멤버 분들이 전반적으로 더 높은 인지도를 보였습니다. HTML과 다르게 트랜스파일과 폴리필을 통해 실제로 사용할 수 있는 여지가 더 커서 그럴까요?
의아한 점은, Explicit Resource Management 같은 가장 최신 표준에 대해서는 반대로 FEConf 참석자 분들의 인지도가 더 높았습니다.
카테고리: CSS
CSS도 빼먹을 수 없겠죠! 뒤에서도 얘기할 당근의 디자인 시스템이 CSS Variables를 기반으로 하고 있다보니 이 부분의 차이가 두드러지게 나타났습니다. 그 밖에도 당근이 모바일 앱이다보니 env(safe-area-inset-*) 같은 기능에 대한 인지도가 높았어요.
반면 앱 내에서 거의 볼 일이 없는 효과인 backdrop-filter 같은 속성에 대한 인지도는 거의 차이가 없었습니다.
그 밖에도 은근 알려지지 않은 유용한 선택자인 :focus-within, :placeholder-shown, Fluid Typography 등에 자주 사용되는 clamp() 함수, 비교적 최근에 지원되기 시작한 @container 쿼리나 사용자의 신경다양성을 존중하기 위한 prefers-reduced-motion 쿼리에 대한 인지도는 양 쪽 모두 전반적으로 낮게 나와서 조금 아쉬웠습니다.
특히 요즘 화려한 애니메이션에 대한 요구사항이 많은 만큼, 신경다양성에 대한 인지를 키우는 것과 UX 향상을 위해 꼭 필요한 애니메이션과 사용자를 아프게 만들 수 있는 “환각적” 애니메이션을 구분하고 오남용을 막는 것이 중요합니다. 이번 주말에 공부해보는 건 어떨까요? 여기 몇몇 유용한 리소스를 남겨둘게요.
prefers-reduced-motion 리소스:
- https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
- https://web.dev/i18n/ko/prefers-reduced-motion/
- https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html
- https://source.opennews.org/articles/motion-sick/
- https://alistapart.com/article/accessibility-for-vestibular/
- https://css-tricks.com/nuking-motion-with-prefers-reduced-motion/
카테고리: Browser APIs
그 다음은 알아두면 유용한 Browser 기본 API 들에 대한 질문이였습니다.
이쪽은 IntersectionObserver를 제외하면 양쪽의 인지도 차이가 거의 없었습니다. 전반적으로 인지도가 높지 않았는데 그 중 특히 Import Maps처럼 모듈과 관련된 스펙이 가장 안좋았습니다.
크고 복잡한 앱들은 모두 번들러를 사용해야 하지만, 최신의 방법을 알면 단순한 문제를 단순하게 푸는데 도움이 됩니다.
WebAssembly는 세상을 바꾸고 있는 기술 중 하나입니다. 대표적으로는 Figma나 Adobe PhotoShop 웹 버전이 많이 의존하는 기술로 알려져 있습니다. WASI의 등장으로 시스템 개발과의 교집합도 점점 커지고 있습니다. GitHub CodeSpaces, CodeSandbox, StackBlitz 같은 온라인 도구들은 놀라울 정도로 정교하고, 심지어 브라우저에서 서버가 돌아갑니다!
AbortController와 navigator.connection은 클라이언트의 연결성 개선에 큰 도움이 되는 기능이니 온라인 앱을 만드시는 분들은 관심을 가지고 활용해보시면 좋습니다.
카테고리: React Meta Frameworks
본격적인 트렌드 비교입니다. 여기서 부터는 선호도를 함께 조사하기 위해 “다시 사용 예정”/”다시 사용 안함”을 포함한 5지선다의 질문입니다.
당근 웹 프론트엔드는 거의 다 리액트를 사용합니다. 어떤 리액트 프레임워크를 좋아하는지 살펴보면 재밌겠죠?
놀라운 점은 의외로 당근 내부에선 Next.js가 인기가 없습니다 😂 저는 Next.js에 대해 안좋은 기억이 있더라도, 그게 App Router 출시 이전이라면 다시 배워볼 가치가 있다고 생각합니다.
한편 당근 외부에서는 Gatsby.js에 대한 관심히 완전히 식어버린 것 같습니다. 참 우여곡절이 많은 프레임워크죠. 당근의 컨텐츠 웹사이트 일부는 Gatsby.js로 만들어져 있고, 아마 공개된 Gatsby.js 사이트 오픈소스 중 가장 큰 편에 속할 겁니다. 노하우도 많고 내부에서 지속적으로 쓰이다 보니 인지도와 선호도가 비교적 높게 나온 것 같습니다.
그 밖에 몇몇 프레임워크들에 대해서는 당근 멤버들이 별로 관심을 주지 않았습니다 (Astro, Fresh 좋은데…)
몇몇 분들이 오해하길래 첨언해두자면, Vike는 Vite 기반 프레임워크인 vite-plugin-ssr의 새로운 이름입니다.
카테고리: Other frameworks — Non-React
그럼 리액트 바깥 세상은 어떨까요? 결과는 처참했습니다.
특히 당근 내부에서는 눈길조차 주지 않는 걸로 보입니다. 그래도 새로운 프레임워크를 사용해보고, 여러 접근방식과 대안을 학습하는 것은 분명 장기적으로 도움이 됩니다.
Qwik은 컴파일러 기반 추상화의 최전선을 달리고 있는 프레임워크로 주목할 만 합니다. 서버 통합에 대해서는 최근엔 리액트에도 Server Actions와 같이 유사한 개념들이 도입되고 있습니다.
htmx는 프레임워크라기 보단 라이브러리에 가깝지만, 간단한 서버 기반 동적 애플리케이션을 만들 때 매우 유용합니다. 현대 웹에서 진정한 의미의 RESTful 클라이언트를 지향하는 몇 안남은 기술이기도 합니다.
카테고리: Bundler
번들러에 대한 선호도 조사도 있습니다.
당근 멤버들의 Creact App React 증오(애증?)와 Vite에 대한 무한한 사랑을 느낄 수 있었습니다.
카테고리: Monorepo
요즘 모노레포에 대한 언급이 꾸준히 들리는 것 같습니다. 실제 관심도는 어떨까요?
당연히 당근 내부에도 수많은 모노레포가 있는데요, 의외로 당근 프론트엔드에선 모노레포 전용 도구들에 대한 관심도가 그렇게 높지 않습니다. 대부분의 프로젝트들이 Yarn(Berry)를 사용하고 있고, Yarn의 풍부한 기능만으로도 이미 많은 문제들이 해결되기 때문입니다.
FEConf 응답에서도 모노레포 도구들에 대한 관심은 예상보다 적은 것 처럼 보입니다. 그나마 Turborepo가 가장 많은 지지를 받고 있습니다.
카테고리: Testing Framework
테스팅 프레임워크로는 여전히 Jest가 가장 많이 사용되고 있습니다. 이제는 Jest가 오래되긴 했지만, 한 때 State of JS 선호도 조사에서 그랜드슬램을 달성했던 레전드죠.
하지만 당근이 Vite를 사랑하는 만큼, Jest의 완벽한 대체제인 Vitest에 대한 선호도가 꾸준히 증가하고 있습니다.
Puppeteer, Playwright 같은 헤드리스 브라우저 기반 환경에 당근과 FEConf 응답에 큰 차이가 있었습니다. 인터랙션 등 복잡한 UI 요구사항은 단순한 통합 테스트로 검증이 어렵다보니 브라우저 기반의 E2E 테스트가 많이 권장되고 있습니다.
나름 근본(?)있는 Node-Tap의 인지도는 거의 없었습니다. Node-Tap은 TAP(Test Anything Protocol)을 지원하는 경량 테스팅 프레임워크 입니다.
최근 버전의 Node.js는 내장된 Test Runner와 TAP 포맷을 직접 지원하기 시작했기 때문에 앞으로 이런 프레임워크 의존도가 줄어들 수도 있겠습니다.
당근 발표 둘러보기
발표에는 당근 멤버 두 분이 연사로 참여해주셨습니다. 서로 다르면서도 어쩌면 비슷한 두 주제로 인사이트가 넘치는 내용이였습니다.
이벤트 기반 웹뷰 프레임워크 설계와 플러그인 생태계 만들기
당근 프론트엔드 챕터를 리드하고 있는, 프론트엔드 코어 팀의 Tony(
)의 발표입니다. 프론트엔드 코어팀에서 만들어서 당근 내 수많은 화면을 지탱하고 있는 Stackflow 프레임워크를 만들며 배운 레슨런을 공유합니다.오래 전에 만들어진 Karrotframe이라는 프레임워크를 처음부터 다시 설계하면서, 더 유지하기 쉽고, 더 테스트하기 쉬운 구조를 고민하다보니 자연스럽게 “플러그인 아키텍처”(마이크로 커널 아키텍처 라고도 함)에 도달했다고 해요.
잘 격리된 코어와 플러그인 시스템을 통해 확장성을 제공하는 것 부터, 핵심 유저가 기여할 수 있도록 구성해서 외부에 “생태계”를 만드는 방법까지 함께 설명해줍니다.
크로스 플랫폼 디자인 시스템, 1.5년의 기록
당근 제품을 지탱하는 또 하나의 기술인 Seed 디자인 시스템의 설계부터 웹 컴포넌트와 개발 도구의 구현까지 폭 넓게 기여하고 계신 디자인 시스템 팀의 Asher(@__malangcat)의 발표입니다.
당근의 디자인 시스템은 만들어진지 그리 오래되지 않았지만, 이미 당근의 많은 화면을 구성하는 핵심 기술 중 하나가 되었습니다.
디자인 시스템의 가장 큰 목표는 물론 프론트엔드 개발자 분들의 생산성 향상이지만, 그걸 위해 단기적으로만 효과있는 결정을 하지 않기 위해 누구보다 치열하게 고민한 결과를 압축해서 공유해주셨습니다.
당근은 다양한 플랫폼 기술을 혼합해서 쓰고, 웹에서는 대부분 리액트를 쓰긴 하지만 CSS 작성 방식 등 세부적인 기술 결정은 각 제품 엔지니어 분들이 주도적으로 결정하는 만큼, 다양성을 포용하고 가는 것이 디자인 시스템의 가장 큰 챌린지 였습니다.
이런 배경에서 만들어진 철학과, 튼튼한 설계는 디자인 시스템이 지속적으로 앞으로 나아가는데 큰 도움이 되고 있습니다. 다른 곳에서 또 다른 디자인 시스템을 만들거나 운영해야 하는 분들이 얻어갈 인사이트가 많다고 느꼈습니다.
마무리하며
그 외에도 다른 많은 회사들이 운영한 부스와, 다른 분들이 하신 발표도 모두 흥미로웠습니다. 현장에선 A, B 트랙을 한 번에 볼 수 없어 아쉬웠지만 머지않아 유튜브로 볼 수 있었고 보는데 무엇하나 시간이 아깝지 않았습니다.
당근은 적극적인 기술 공유를 권장하고, 당근 발표들의 주제가 되었던 Stackflow, Seed Design System 역시 오픈소스로 공개되어 있습니다. 더 자세한 내용이 궁금하신 분들은 GitHub에서 직접 둘러볼 수 있어요!
당근 부스에 참여해서 긴 설문 응답해주신 분들에게 다시 한 번 감사드립니다. 그리고 매년 행사 준비하느라 고생해주시는 FEConf Staff 분들에게도 감사드립니다.
앞으로도 FEConf와 대한민국의 프론트엔드 생태계가 쭉쭉 성장했으면 좋겠습니다.
내년에도 FEConf에서 함께해요!
아니면 당근 프론트엔드 챕터에서 함께할수도…?
