Tailwind Connect 2023: 우리의 첫 오프라인 이벤트 회고

지난달, 200명 이상의 사람들이 캐나다 온타리오 주의 캠브리지에 모여 함께 시간을 보내고, 새로운 작업물을 엿보는 자리를 가졌습니다.

Tailwind Connect는 팀이 마을에 있을 때 작은 지역 모임을 열자는 아이디어에서 시작했지만, 결국 큰 홀을 빌리고 4명의 비디오그래퍼를 고용하며, 제 결혼식보다 더 큰 케이터링 비용을 지출하는 대형 이벤트로 발전했습니다.

하지만 제작 과정에서 약간 과장되긴 했지만, 우리는 이벤트를 컨퍼런스보다는 모임처럼 느껴지도록 노력했습니다. 이벤트는 저녁에 진행되었고, 단 하나의 발표만 준비하여 피자와 맥주를 즐기며 사람들이 서로 교류할 시간을 최대한 확보했습니다.

처음에는 “퇴근 후 차를 타고 오는” 지역 중심의 이벤트를 기대했지만, 참가자 중 거의 절반이 비행기를 타고 왔습니다. 그래서 모두가 시간을 잘 활용할 수 있도록, 이벤트를 위한 Discord 서버를 만들어 여행 온 사람들이 서로 계획을 세울 수 있게 했고, 이벤트장 옆 Foundry Tavern의 파티오를 대여하여 사람들이 일찍 만나 새로운 친구를 사귈 수 있도록 했습니다.

Tailwind Connect 참가자들이 Foundry Tavern에서 점심을 즐기는 모습 — Tailwind CSS 티셔츠를 입은 두 사람은 이 이벤트를 위해 독일에서 날아왔습니다.

이벤트는 오후 5시 30분쯤 문을 열고, 1시간 동안의 오프닝 리셉션으로 시작했습니다. 참가자들은 캐나페를 즐기며 이야기를 나눴습니다.

우리가 정말 잘한 부분 중 하나는 배지였습니다. 티켓을 구매할 때 기본 마크다운 필드를 제공하여 자신에 대해 무엇이든 쓸 수 있게 했고, 이를 통해 흥미로운 대화를 시작할 수 있었습니다.

저는 밤새 모든 사람의 배지를 보며 대화를 나누는 것이 정말 좋은 아이스브레이커가 되었다고 느꼈습니다.

오후 6시 30분쯤, 모두가 키노트 발표를 위해 자리에 앉았습니다. 저는 Tailwind CSS 프로젝트의 역사와 현재까지의 여정에 대해 이야기했습니다.

Adam Wathan이 Tailwind CSS를 사용하는 회사들을 강조하는 슬라이드 앞에서 발표하는 모습

6년 전만 해도 이 프로젝트는 제가 프로젝트마다 복사해 붙여넣던 스타일시트에 불과했습니다. 오늘날 이 프로젝트는 매월 2,500만 번 이상 다운로드되며, 세계 최대 규모의 회사들이 세계 최대 규모의 웹사이트를 구축하는 데 사용하고 있습니다. 커뮤니티의 많은 사람들과 함께 이렇게 멀리 온 것을 직접 축하할 수 있어 정말 특별했습니다.

그 후, Sam Selikoff가 몇 가지 멋진 데모를 통해 CSS의 최신 기능을 선보였습니다. 그는 액센트 컬러, 유동 타이포그래피, 헤드라인 밸런싱, 컨테이너 쿼리, 심지어 메이슨리 그리드 등을 Tailwind CSS와 유틸리티-퍼스트 워크플로우를 사용해 시연했습니다.

Sam은 정말 멋진 친구입니다. 저는 그에게 이벤트에 와서 키노트에 참여해 달라고 요청했지만, 정확히 무엇을 해달라고 할지 계획이 없었습니다. 그는 도착한 지 약 36시간 만에 전체 발표를 준비했고, 정말 잘 해냈습니다. 슬라이드 없이 모두 라이브 코딩으로 진행했고, 전문가처럼 해냈습니다. 그의 YouTube 채널과 트레이닝 사이트 Build UI를 강력히 추천합니다. 그는 정말 훌륭한 선생님입니다.

다음으로, 저는 Tailwind CSS 엔진의 다음 진화 단계인 Oxide를 미리 보여드렸습니다.

Adam Wathan이 "Oxide"라고 적힌 슬라이드 앞에서 발표하는 모습

Oxide는 여러 가지 부분으로 구성되어 있지만, 결국 두 가지 목표로 요약됩니다. 성능 개선과 개발자 경험 단순화입니다.

우리는 Lightning CSS를 통합하여 Tailwind를 더욱 올인원 CSS 처리 도구로 만들고 있습니다. 이는 다음 버전의 Tailwind에서 다른 CSS 파일 임포트, 중첩, 벤더 프리픽스, 미래 CSS 기능을 위한 구문 변환 등이 별도의 도구 없이도 작동한다는 것을 의미합니다. autoprefixer나 postcss-import 같은 추가 도구를 설치하거나 설정할 필요가 없습니다.

Adam Wathan이 "Lightning CSS"라고 적힌 슬라이드 앞에서 발표하는 모습

Lightning CSS는 Rust로 작성되어 매우 빠르며, 우리도 Rust를 사용하여 템플릿 파일에서 클래스 이름을 스캔하는 등 가장 중요한 부분을 다시 작성하고 있습니다.

이러한 개선으로 인해 실제 프로젝트에서 빌드 시간이 50% 이상 단축되었으며, 가장 큰 프로젝트에서도 프로덕션 빌드 시간이 약 150ms로 줄어들었습니다.

Tailwind CSS v3.4가 Tailwind CSS v3.3보다 두 배 이상 빠르다는 것을 보여주는 차트

Oxide는 또한 단순화된 설정 경험을 제공할 것입니다. 자동 콘텐츠 감지를 추가하여 더 이상 템플릿 파일의 경로를 설정할 필요가 없으며, CSS 파일 상단에 간단한 @import "tailwindcss" 호출로 모든 @tailwind 지시문을 대체할 수 있게 됩니다.

또한, JavaScript 대신 CSS 파일에서 Tailwind CSS를 설정하는 아이디어를 초기 단계로 공유했습니다. CSS 기반 설정, 자동 콘텐츠 감지, 단순화된 임포트 스토리를 통해, 커스텀 색상과 폰트를 설정하는 것이 다음과 같이 간단해질 수 있습니다:

@import "tailwindcss";
@import "./fonts" layer(base);

:theme {
  --colors-neon-pink: oklch(71.7% 0.25 360);
  --colors-neon-lime: oklch(91.5% 0.258 129);
  --colors-neon-cyan: oklch(91.3% 0.139 195.8);

  --font-family-sans: "Inter", sans-serif;
  --font-family-display: "Satoshi", sans-serif;
}

우리는 이 모든 것을 호환성 문제 없이 도입할 계획이며, Lightning CSS 통합과 Rust 기반 템플릿 파서를 포함한 많은 개선 사항이 몇 달 안에 Tailwind CSS v3.4에 포함될 예정입니다.

출시가 가까워지면 이에 대해 더 자세히 글을 쓸 예정이지만, 그 전에 키노트를 시청하시면 더 자세히 알아볼 수 있습니다.

우리는 Catalyst 미리보기로 키노트를 마무리했습니다. Catalyst는 작년 말부터 작업해 온 새로운 React UI 키트입니다.

Adam Wathan이 "Catalyst"라고 적힌 슬라이드 앞에서 발표하는 모습

이 프로젝트는 2년 전부터 로드맵에 있었고, 최적의 접근 방식을 찾기 위해 여러 달을 보낸 후 작년 10월에 작업을 시작했습니다.

Catalyst는 신중하게 설계된 API를 가진 배터리 포함형 컴포넌트 시스템으로, 애플리케이션을 구축하는 데 필요한 모든 기본 빌딩 블록을 포함하고 있습니다. 버튼, 폼 컨트롤, 다이얼로그, 슬라이드 오버, 테이블, 드롭다운 등이 포함되어 있습니다.

Catalyst와 기존 애플리케이션 UI 컴포넌트 예제의 가장 큰 차이점은 Catalyst의 컴포넌트들이 실제 프로젝트에서처럼 연결되어 있다는 점입니다. 단순히 복사해 붙여넣을 수 있는 코드 조각이 아닙니다.

하지만 사이트 템플릿과 마찬가지로, Catalyst의 코드는 여러분의 것입니다. 무언가를 수정하고 싶다면 파일을 열어 수정하면 됩니다. npm을 통해 설치하는 라이브러리가 아닙니다.

여러분만의 컴포넌트 시스템을 위한 시작점이라고 생각하세요. 우리로부터 최신 버전을 다운로드하고, /components 디렉토리의 내용을 프로젝트에 복사한 후, 구축을 시작하면 됩니다.

무언가를 변경해야 한다면, 변경하세요.

새로운 컴포넌트를 만들고 싶다면, 만드세요.

6개월 후에는 코드베이스가 완전히 여러분의 것처럼 느껴져, Catalyst로 시작했다는 사실을 거의 잊어버릴 정도가 될 것입니다.

프로젝트를 소개하고 모두에게 간단히 둘러본 후, Steve Schoger에게 마이크를 넘겼습니다. 그는 Catalyst를 정교한 디자인 시스템으로 만드는 데 들어간 모든 디테일을 설명하며 정말 훌륭한 작업을 해냈습니다.

Steve Schoger가 Catalyst의 시각적 디자인 디테일을 설명하는 모습

저는 CSS 변수와 Tailwind의 임의 속성 기능을 사용하여 Framer Motion으로 반응형 트랜지션을 구현하는 방법 등 몇 가지 고급 Tailwind CSS 트릭을 보여주며 마무리했습니다.

Adam Wathan이 Tailwind CSS와 Framer Motion으로 라이브 코딩 데모를 하는 모습

Catalyst는 아직 작업 중이므로 확실히 약속할 수는 없지만, 다행히도 다음 달쯤 Tailwind UI 고객들에게 초기 버전과 더 많은 세부 사항을 공유할 수 있을 것입니다.

다음 3시간 동안 우리는 이벤트장에서 음료를 즐기며 참가자들과 교류했습니다.

키노트에서 언급했듯이, 이번 이벤트는 프로젝트 역사상 처음으로 많은 Tailwind 팬들을 한 자리에 모은 자리였습니다. 프레임워크를 사용하며 많은 것을 얻은 사람들을 직접 만날 수 있어 정말 특별한 경험이었습니다. GitHub와 Twitter에서만 모든 것이 이루어질 때는 우리가 하는 일의 영향을 과소평가하기 쉽지만, 실제 공간에서 실제 사람들과 함께하는 것을 보며 자부심을 느꼈습니다.

이 프로젝트를 작업하며 웹을 위한 것을 만드는 데 더 많은 즐거움을 느낄 수 있도록 도울 수 있어 정말 영광입니다. 앞으로도 이런 이벤트를 더 많이 열고 싶습니다. 이번 이벤트는 제 인생의 주요 하이라이트 중 하나가 될 것입니다.

이벤트의 더 많은 사진을 보려면 Tailwind Connect 2023 사진 갤러리를 확인하고, 직접 참석하지 못했다면 YouTube에서 키노트를 시청하세요.