새로운 변경 로그 템플릿 + Tailwind UI의 역대급 업데이트
- Date
Adam Wathan
12월에 Protocol 템플릿을 출시한 이후로 Tailwind UI 업데이트를 공유하지 않았지만, 그동안 바쁘지 않았던 것은 아닙니다.
지난 4개월 동안 우리는 Tailwind UI에 그 어느 때보다 많은 작업을 진행했고, 마침내 목표를 달성한 지금 여러분께 그 모든 것을 공개하게 되어 기쁩니다!
Commit: 여러분의 다음 아이디어를 위한 아름다운 변경 로그 템플릿
며칠 전, 우리는 Tailwind CSS와 Next.js로 제작된 새로운 변경 로그 템플릿인 Commit을 출시했습니다.
공개 변경 로그는 여러분이 진행 중인 작업을 사람들에게 알리고, 책임감을 유지하며, 제품 출시 능력을 키우는 인기 있는 방법이 되었습니다. 물론 이 개념이 새로운 것은 아니지만, 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 예제도 포함되어 있습니다.
이 새로운 디자인들을 확인하려면 업데이트된 홈 스크린 카테고리를 살펴보세요.
이렇게 해서, 지금까지 가장 큰 Tailwind UI 업데이트를 완료했습니다. 우리는 1월부터 천천히 이러한 개선 사항들을 공개해 왔으며, 모든 변경 사항은 Tailwind UI 변경 로그에 기록되어 있습니다. 더 자세히 알고 싶다면 확인해 보세요.
다음으로, 우리는 Tailwind CSS v4.0을 위한 다양한 아이디어를 탐구하고, 첫 번째 Next.js 애플리케이션 스타터 키트를 개발할 예정입니다. 앞으로 몇 주 동안 더 많은 소식을 공유할 수 있기를 기대합니다!