지난 12월 Protocol 템플릿을 출시한 이후로 Tailwind UI 업데이트를 공유하지 않았지만, 그동안 바쁘지 않았던 것은 아닙니다.
지난 4개월 동안 우리는 Tailwind UI에서 그 어느 때보다 많은 작업을 진행했고, 마침내 목표를 달성한 후 여러분께 모든 것을 공개하게 되어 기쁩니다!
Commit: 여러분의 다음 아이디어를 위한 아름다운 변경 로그 템플릿
며칠 전, 우리는 Tailwind UI를 위해 디자인한 새로운 변경 로그 템플릿인 Commit을 출시했습니다. 이 템플릿은 Tailwind CSS와 Next.js로 제작되었습니다.
공개 변경 로그는 여러분이 진행 중인 작업을 사람들에게 알리고, 책임감을 유지하며, 제품 출시 능력을 키우는 인기 있는 방법이 되었습니다. 물론 이 개념 자체는 새로운 것이 아니지만, Linear가 자신들의 변경 로그 사이트에 게시하기 시작하면서 다른 사람들도 이를 회사 블로그의 대안으로 사용하는 것에 대해 열광하기 시작했습니다.
Commit은 현대적인 제품 변경 로그를 위한 우리의 시도입니다. 이 템플릿은 단일 페이지 웹사이트로 설계되어 프로젝트 홈페이지와 작업 내역을 모두 제공할 수 있습니다.
다른 모든 템플릿과 마찬가지로, 이 템플릿도 다양한 기능과 디테일로 가득 차 있어 사용하기 편하고 작업하기 즐겁습니다:
- 라이트 및 다크 모드 지원, 개발자가 어두운 밤에 읽을 수 있도록 최적화되었습니다.
- 손으로 직접 만든 타이포그래피 스타일, 이 템플릿을 위해 세심하게 선택된 폰트 크기, 간격, 목록 스타일 등.
- 내장된 구문 강조, Shiki로 구동되며 몇 가지 CSS 변수로 쉽게 커스터마이징할 수 있습니다.
- 단일 파일 편집 경험, 모든 항목이 단일 MDX 파일에 저장되어 변경 로그를 업데이트하는 것이 오픈소스 프로젝트의
CHANGELOG.md파일을 업데이트하는 것처럼 가볍습니다. - 아름다운 애니메이션과 효과, 이번에는 Motion One로 구동되어 최신 라이브러리를 사용하여 이러한 효과를 구현하는 방법을 배우기에 좋은 리소스입니다.
항상 그렇듯이 코드를 살펴보고 자신만의 것으로 만들기 쉽습니다. 여기서는 몇 가지 색상만 조정했는데도 완전히 다른 웹사이트처럼 느껴집니다:
라이브 데모를 통해 전체 경험을 확인해 보세요. 이미 Tailwind UI 전체 액세스 라이선스를 소유하고 있다면, 이 템플릿을 다운로드하여 다음 프로젝트에 사용하거나 소스 코드를 연구하여 새로운 기술을 배울 수 있습니다.
Tailwind UI의 수백 개 컴포넌트 재설계
디자인은 빠르게 변화합니다. Tailwind UI를 처음 출시한 지 3년이 넘었기 때문에, 우리는 이를 다시 한번 면밀히 검토하고 여전히 최고의 작품으로 느껴지는지 확인해야 한다고 생각했습니다.
우리는 지난 3년 동안 디자인 실력이 실제로 향상되었다는 사실을 발견하고 기뻤습니다. 그래서 새롭게 얻은 능력을 최대한 활용해 4개월 동안 모든 컴포넌트와 카테고리를 픽셀 단위로 완벽하게 다듬었습니다.
우리가 다시 햇빛을 보러 나왔을 때, 수백 개의 재설계된 컴포넌트와 수십 가지의 완전히 새로운 아이디어, 그리고 이를 모두 보여줄 새로운 페이지 예제들이 준비되어 있었습니다.
우리가 개선한 몇 가지 유형을 간단히 살펴보겠습니다.
시대에 뒤떨어진 기존 패턴 재설계
Tailwind UI의 많은 컴포넌트 패턴은 정말로 시대를 초월한 아이디어입니다. 하지만 디자인 트렌드가 변하고 우리가 더 나은 디자이너로 성장함에 따라, 이러한 패턴의 특정 구현 방식은 시대에 뒤떨어진 느낌을 줄 수 있습니다.
우리는 모든 컴포넌트를 하나씩 검토하며 다시 손보고 싶은 패턴을 많이 발견했고, 이를 2023년에 맞게 최대한 업데이트했습니다.
새로워진 패턴이 어떤 모습인지 확인하려면 Hero Sections 카테고리를 살펴보세요.
세부 사항 전반에 걸친 미세 조정
많은 컴포넌트들은 완전한 재설계보다는 약간의 추가적인 다듬기가 필요했습니다.
우리는 수많은 컴포넌트를 살펴보며 간격, 타이포그래피, 대비 등을 미세하게 개선했고, 그 결과 훨씬 더 선명하고 깔끔한 느낌을 얻었습니다.
위 예제는 Description Lists 카테고리에서 가져온 것입니다. 브라우저에서 렌더링된 전체 모습을 보고 싶다면 해당 링크를 확인해 보세요.
다양한 새로운 예제 디자인
기존 컴포넌트들을 살펴보면서, 원래 패턴 세트에서 빠져 있다고 느껴지는 새로운 아이디어들이 계속 떠올랐습니다.
그래서 우리는 눈에 띄는 빈자리를 최대한 채우기 위해 수많은 새로운 컴포넌트를 디자인했습니다.
Feature Sections 카테고리와 같은 많은 분류가 크게 확장되었고, 정말 훌륭한 새로운 아이디어들로 가득 차 있습니다.
더 많은 다크 테마 변형 추가하기
요즘 보는 거의 모든 새 웹사이트가 기본적으로 다크 테마를 사용하는 것 같아서, 우리도 다크 배경에 최적화된 예제를 더 제공해야 할 도덕적 의무가 있다고 느꼈습니다.
특히 마음에 드는 예제 중 하나는 새로운 다크 배지입니다. 별다른 기능은 없지만 배경색에 약간의 투명도를 적용한 것이 다크 디자인에 정말 멋진 효과를 줍니다.
완전히 새로운 페이지 예제
마지막으로, 우리는 이 모든 새로운 기능을 모아서 다양한 새로운 페이지 예제를 만들었습니다. 여기에는 마케팅 컴포넌트의 스크린샷에서 많은 사람들이 요청했던 애플리케이션 UI 예제도 포함되어 있습니다.
업데이트된 Home Screens 카테고리를 확인하여 이러한 새로운 디자인을 살펴보세요.
이렇게 해서, 우리는 지금까지 가장 큰 Tailwind UI 업데이트를 완료했습니다. 1월부터 천천히 이러한 개선 사항을 공개해 왔으며, 모든 변경 사항은 Tailwind UI 변경 로그에 기록되어 있습니다. 더 자세한 내용을 알고 싶다면 확인해 보세요.
다음으로, 우리는 Tailwind CSS v4.0을 위한 다양한 아이디어를 탐구하고, 첫 번째 Next.js 애플리케이션 스타터 키트를 개발할 예정입니다. 앞으로 몇 주 동안 더 많은 소식을 공유할 수 있기를 기대합니다!