새로운 Tailwind CSS + Framer Motion 템플릿과 Tailwind Jobs

Adam Wathan

오늘은 출시한 멋진 것들과 곧 출시될 다른 것들에 대한 업데이트를 전해드립니다!

6월에 있었던 Tailwind UI 사이트 템플릿과 all-access 출시 이후로, 우리는 350개 이상의 GitHub 이슈와 풀 리퀘스트를 처리하고, 출시한 모든 새로운 템플릿을 Next.js 12.2와 새로운 next/future/image 컴포넌트를 사용하도록 업데이트하는 등 유지보수 중심의 작업을 많이 진행했습니다.

그 와중에도 몇 가지 새로운 것을 출시할 시간을 찾았습니다!


Tailwind + Framer Motion = Pocket

약 일주일 전, 우리는 Next.js와 (당연히) Tailwind CSS로 만든 새로운 Tailwind UI 템플릿을 출시했습니다.

이 템플릿을 Pocket이라고 부르며, 이는 모바일 앱 랜딩 페이지로, 다양한 재미있는 애니메이션과 인터랙션으로 가득 차 있습니다. 이 모든 것은 Framer Motion이라는 라이브러리로 구현되었는데, 이 라이브러리는 누구나 만든 것 중 가장 멋진 라이브러리라고 할 수 있습니다.

Pocket 템플릿에 대해 알아보기

전체 경험을 위해 라이브 미리보기를 꼭 확인해 보세요. 스크린샷으로는 페이지 로드 시 그려지는 그래프, 기능 섹션의 애니메이션된 모바일 디바이스 UI, 그리고 Frogger에서 영감을 받은 추천 애니메이션과 같은 가장 멋진 부분을 놓칠 수 있습니다.

이 템플릿에 대한 재미있는 이야기가 있습니다. 처음에 디자인하고 구축할 때, 우리는 애니메이션이나 인터랙션에 대해 아무런 계획을 세우지 않았습니다. Figma에서 정적인 디자인을 만들었고, 모두가 매우 흥분했으며, 약 3주 반 전에 출시할 계획으로 전체를 구축했습니다.

하지만 브라우저에서 완성된 템플릿을 보니 뭔가 딱딱하게 느껴졌습니다. Figma에서는 모든 것이 정적이고 움직이지 않을 것이라고 예상하지만, 실제로 보니 스크린샷 같은 느낌이 들었고, 실제 인터랙티브 웹사이트 같지 않았습니다.

이 템플릿의 초기 버전을 살펴보면 제가 무슨 말을 하는지 이해할 수 있을 겁니다.

우리는 출시를 몇 주 연기하고, 템플릿에 생기를 불어넣기 위해 여러 가지 실험을 했습니다. 다양한 아이디어를 시도한 끝에 오늘의 결과물을 얻었습니다.

이번 결과물에 대해 매우 만족스럽고, Framer Motion을 사용하여 멋진 효과를 구현하는 방법을 배우고 싶다면 이 코드베이스가 매우 흥미로운 사례 연구가 될 것이라고 생각합니다.

그리고 우리의 모든 템플릿과 마찬가지로, Tailwind UI 전체 액세스 라이센스를 가지고 있다면, 추가 비용 없이 모든 컴포넌트와 템플릿과 함께 사용할 수 있습니다.


Tailwind Jobs

약 2년 동안 공식 Tailwind CSS 채용 게시판을 만드는 아이디어를 고민해왔고, 지난 몇 주 동안 시도해보기로 결정했습니다.

여러분의 회사가 Tailwind를 사용하며 프론트엔드 엔지니어를 찾고 있거나, Tailwind를 사용하는 회사에서 일하고 싶은 개발자라면, Tailwind Jobs를 확인해보세요.

Tailwind Jobs

7월 14일에 코드베이스를 시작했고, 8월 2일에 사이트를 회사들에게 공개했습니다. Laravel, Inertia, React, 그리고 물론 Tailwind CSS를 사용해 만들었습니다. 이런 도구들로 단 20일 만에 무엇을 만들 수 있는지 정말 놀랍습니다!

아직 포지셔닝과 Tailwind를 사용하는 회사들이 프론트엔드 인재를 찾는 최고의 장소로 만들기 위해 무엇을 할 수 있는지 고민 중입니다. 여러분의 회사에서 채용을 담당하고 있고 피드백이나 아이디어가 있다면, Peter에게 이메일을 보내주세요 — 그는 이 프로젝트를 주도하고 있으며, 이에 대해 이야기할 사람을 찾고 있습니다.

예를 들어, 우리가 고민 중인 한 가지는 채용 공고가 반드시 "하루 종일 Tailwind CSS로 스타일링하는 것"일 필요가 없다는 점을 어떻게 명확히 할 것인가입니다. 세상에 그런 일자리는 많지 않습니다. 심지어 Tailwind CSS를 만드는 회사에서도 그런 일자리는 없습니다!

하지만 많은 사람들이 CSS와 씨름하는 것을 싫어합니다. 매일 CSS를 작성하지 않더라도 말이죠.

스타일링을 해야 할 때 커스텀 CSS 스파게티 대신 Tailwind를 사용할 수 있다는 것을 알게 된다면 기뻐할 개발자들이 많습니다.

우리는 이 채용 게시판이 React 개발자, Vue 개발자, Laravel 개발자, Rails 개발자 등을 찾을 수 있는 장소가 되길 원합니다. 스타일링을 할 때 Tailwind를 사용할 수만 있다면, Tailwind Jobs에 적합합니다.


작업 중인 내용들...

다음 몇 주 안에 출시될 멋진 것들이 준비 중입니다:

그러니 몇 주 후에 더 많은 소식이 담긴 업데이트를 기대해 주세요! 대형 템플릿/올액세스 출시가 끝난 지금, 새로운 제품을 만드는 데서 벗어나 올해 남은 기간 동안 Tailwind CSS와 Headless UI를 더욱 개선하고, Tailwind UI에 멋진 새로운 기능들을 추가하는 데 집중할 예정입니다.

모든 업데이트를 직접 받아 볼 수 있습니다.
뉴스레터에 가입하세요.