Meet Studio: Our beautiful new agency site template
- Date
Adam Wathan
우리는 Studio를 출시했습니다. 이는 지난 몇 달 동안 Tailwind UI를 위해 작업해온 아름다운 새로운 에이전시 웹사이트 템플릿입니다.
이 템플릿은 Next.js, MDX, 그리고 물론 Tailwind CSS로 구축되었으며, 새로운 Next.js App Router를 사용하여 출시한 첫 번째 템플릿입니다.
에이전시 템플릿을 디자인하는 것은 흥미로운 프로젝트입니다. 왜냐하면 창의적인 에이전시들은 종종 자신들의 웹사이트를 통해 정말 화려하고 맞춤형 아이디어를 보여주기 때문입니다. 그리고 템플릿을 사용하는 것은 자신의 회사가 무엇을 할 수 있는지 보여주는 것이 목표일 때 다소 이상하게 느껴질 수 있습니다.
그래서 우리는 이 프로젝트를 두 가지 목표를 염두에 두고 접근했습니다:
- 플래시 에이전시 사이트에서 볼 수 있는 멋진 기능들을 어떻게 구현하는지 가르치기 — 우리는 항상 템플릿이 단순히 템플릿으로서뿐만 아니라 교육 자료로서도 가치가 있다고 믿어왔습니다. 그래서 이 템플릿을 통해 이러한 종류의 사이트에서 볼 수 있는 멋진 인터랙티브와 애니메이션 디테일을 어떻게 구축하는지 보여주고 싶었습니다.
- 디자인을 판매하지 않는 에이전시를 위해 디자인하기 — 엔지니어링 작업에만 집중하는 많은 에이전시들이 있으며, 이러한 회사들은 종종 디자인적으로 두드러지기 어려워합니다. 우리는 이 템플릿을 디자인할 때 디자인 작업의 스크린샷 등에 의존하지 않고도 멋지게 보일 수 있도록 디자인했습니다. 그래서 코드에 집중하는 에이전시가 자신들의 사이트를 위한 시작점으로 사용할 수 있도록 했습니다.
우리가 만들어낸 결과물은 이 두 가지 목표를 달성했고, 그 결과가 매우 자랑스럽습니다.
라이브 프리뷰를 통해 전체 경험을 확인해보세요. 이 템플릿에는 브라우저에서 직접 보아야만 진정으로 감상할 수 있는 멋진 디테일들이 가득합니다.
매력적인 애니메이션
에이전시 웹사이트의 불문율 중 하나는 화려해야 한다는 것입니다. 마우스 커서를 대체하거나 웹사이트 전체를 WebGL로 렌더링하는 극단적인 방법은 사용하지 않았지만, 가능한 곳마다 세련된 애니메이션과 인터랙티브 요소를 도입하려고 노력했습니다.
예를 들어, Framer Motion의 일부 기능을 활용해 스크롤 트리거 애니메이션을 쉽게 구현할 수 있는 간단한 선언적 컴포넌트 기반 API를 만들었습니다:
이러한 애니메이션을 구현하는 과정은 매우 간단했습니다. FadeIn 또는 FadeInStagger 컴포넌트로 감싸기만 하면 됩니다:
function Clients() {
return (
<div className="mt-24 rounded-4xl bg-neutral-950 py-20 sm:mt-32 sm:py-32 lg:mt-56">
<Container>
<FadeIn className="flex items-center gap-x-8">
<h2 className="text-center font-display text-sm font-semibold tracking-wider text-white sm:text-left">
We’ve worked with hundreds of amazing people
</h2>
<div className="h-px flex-auto bg-neutral-800" />
</FadeIn>
<FadeInStagger faster>
<ul
role="list"
className="mt-10 grid grid-cols-2 gap-x-8 gap-y-10 lg:grid-cols-4"
>
{clients.map(([client, logo]) => (
<li key={client}>
<FadeIn>
<Image src={logo} alt={client} unoptimized />
</FadeIn>
</li>
))}
</ul>
</FadeInStagger>
</Container>
</div>
)
}또한 로고에 마우스를 올렸을 때 단색으로 채워지는 작은 애니메이션도 추가했습니다:
이 작은 디테일은 사소해 보이지만, 클라이언트 사이드 네비게이션 없이는 구현하기 어렵습니다. 로고를 클릭해 홈페이지로 돌아갈 때 애니메이션이 다시 실행되기 때문입니다. Next.js 같은 프레임워크를 사용하면 URL이 변경되더라도 로고가 채워진 상태를 유지할 수 있어 훨씬 자연스럽습니다.
메뉴 드로어 애니메이션도 매우 만족스럽게 구현되었습니다. 메뉴가 열릴 때 전체 페이지가 아래로 밀려납니다:
자세히 보면 로고와 버튼의 색상이 단순히 바뀌는 것이 아니라, 슬라이드 다운되는 시트의 위치에 따라 정확하게 조절됩니다. 시트의 가장자리가 로고와 교차할 때 로고는 부분적으로 흰색과 검은색이 동시에 나타납니다.
또한 케이스 스터디 페이지의 이미지에 적용한 인터랙션도 매우 마음에 듭니다:
전체 사이트를 흑백으로 느껴지게 하고 싶었지만, 항상 흑백 이미지를 보여주는 것은 적절하지 않다고 판단했습니다. 그래서 이미지가 흑백으로 시작하다가 스크롤하면서 화면 중앙에 가까워질 때 채도가 서서히 돌아오는 효과를 적용했습니다. 또한 마우스를 올리면 풀컬러 이미지를 보여줍니다.
이 모든 애니메이션을 구현할 때 전정기관 장애가 있는 사람들을 고려했습니다. Framer Motion의 useReducedMotion 훅과 Tailwind의 motion-safe 변형을 사용해 네비게이션 메뉴 애니메이션을 조건부로 비활성화하고, 스크롤 트리거 애니메이션을 불투명도만 조절하도록 제한해 화면에서 움직이는 요소를 최소화했습니다.
개발자 중심의 사례 연구와 블로그 워크플로우
스튜디오는 사례 연구와 블로그 포스트를 모두 지원합니다. 다른 템플릿을 사용해 본 적이 있다면 짐작하셨겠지만, 이번에도 MDX를 프로젝트에 통합했습니다.
다음은 기본적인 사례 연구의 예시입니다. 주로 마크다운으로 작성되었으며, 몇 가지 공통 메타데이터와 커스텀 컴포넌트를 콘텐츠에 혼합할 수 있는 기능이 포함되어 있습니다.
import logo from '@/images/clients/phobia/logomark-dark.svg'
import imageHero from './hero.jpg'
import imageJennyWilson from './jenny-wilson.jpeg'
export const caseStudy = {
client: 'Phobia',
title: 'Overcome your fears, find your match',
description:
'Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.',
summary: [
'Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.',
'We worked with Phobia to develop a new onboarding flow. A user is shown pictures of common phobias and we use the microphone to detect which ones make them scream, feeding the results into the matching algorithm.',
],
logo,
image: { src: imageHero },
date: '2022-06',
service: 'App development',
testimonial: {
author: { name: 'Jenny Wilson', role: 'CPO of Phobia' },
content:
'The team at Studio went above and beyond with our onboarding, even finding a way to access the user’s microphone without triggering one of those annoying permission dialogs.',
},
}
export const metadata = {
title: `${caseStudy.client} Case Study`,
description: caseStudy.description,
}
## 개요
높은 이탈률을 발견한 Phobia 팀은 근본적으로 잘못된 비즈니스 아이디어 때문이 아니라 온보딩 프로세스를 개선해야 한다는 결론에 도달했습니다.
이전에는 사용자가 직접 공포증을 선택했지만, 이로 인해 일부 사용자는 매칭을 늘리기 위해 실제로 두려워하지 않는 것들을 선택하는 문제가 발생했습니다.
이를 해결하기 위해 온보딩 과정에서 일반적인 공포증을 보여주는 슬라이드쇼 시스템을 개발했습니다. 그런 다음 사용자의 마이크에 접근하여 소리를 감지하고, 그들의 반응을 측정합니다. 비명의 높이, 크기, 지속 시간을 측정하여 매칭 알고리즘에 정보를 제공합니다.
다음 단계는 사용자의 공포를 결정하는 일련의 시나리오를 제공하는 VR 버전의 온보딩 플로우입니다. 현재 첫 번째 시나리오를 개발 중이며, 작업 제목은 "거미로 가득 찬 비행기에서 뛰어내리기"입니다.
## 우리가 한 일
<TagList>
<TagListItem>Android</TagListItem>
<TagListItem>iOS</TagListItem>
<TagListItem>Malware</TagListItem>
<TagListItem>VR</TagListItem>
</TagList>
<Blockquote
author={{ name: 'Jenny Wilson', role: 'CPO of Phobia' }}
image={{ src: imageJennyWilson }}
>
The team at Studio went above and beyond with our onboarding, even finding a
way to access the user’s microphone without triggering one of those annoying
permission dialogs.
</Blockquote>
<StatList>
<StatListItem value="20%" label="Churn rate" />
<StatListItem value="5x" label="Uninstalls" />
<StatListItem value="2.3" label="App store rating" />
<StatListItem value="8" label="Pending lawsuits" />
</StatList>이 템플릿의 모든 타이포그래피 스타일은 완전히 커스텀입니다. 이번에는 기존과 다른 접근 방식을 시도했습니다. MDX 내의 커스텀 컴포넌트와 충돌을 피하기 위해 복잡한 CSS를 작성하는 대신, remark-rehype-wrap이라는 작은 remark 플러그인을 만들어 마크다운 콘텐츠를 래퍼 엘리먼트로 감싸는 방식을 선택했습니다.
이렇게 하면 일반 마크다운 콘텐츠는 typography 클래스로 감싸고, 문서 내의 커스텀 컴포넌트는 감싸지 않도록 할 수 있습니다. 이 방식은 CSS를 조정하여 트리의 특정 부분을 무시하는 것보다 더 간단하고 효과적입니다.
두 접근 방식 모두 효과적이지만, 새로운 아이디어를 시도하고 배우는 것은 항상 즐겁습니다. 앞으로 CSS의 새로운 기능인 스타일 쿼리를 기반으로 한 솔루션이 어떻게 발전할지 궁금합니다.
이것이 바로 스튜디오입니다! 코드를 다운로드하고, 뜯어보며 새로운 기술을 배워보세요.
다른 템플릿과 마찬가지로, 이 템플릿도 Tailwind UI all-access 라이선스로 제공됩니다. 이 라이선스는 Tailwind CSS 개발을 지원하고 앞으로도 멋진 도구를 계속 만들 수 있게 해줍니다.