Vercel
흰 종이에 인쇄된 터미널
베르셀 디자인 시스템은 절제된 단색의 미학을 보여줍니다. 거의 흰색에 가까운 바탕(#fafafa), 검은색 서체, 얇은 테두리, 그리고 장식적인 색상의 완전한 배제가 특징입니다. 시각적 언어는 개발자 터미널을 인쇄물로 구현한 듯한 느낌을 줍니다. Geist Sans는 400-450의 굵기와 -0.06em의 자간으로 "히어로익" 스케일에서 가독성이 매우 떨어지며, Geist Mono는 레이블, 메타데이터, 코드 샘플을 11-13px 크기의 대문자로 표시합니다. 버튼은 6px 반경의 날카로운 사각형 또는 흰색 바탕에 검은색, 또는 검은색 바탕에 흰색으로 구성됩니다. 이 시스템은 색상보다는 대비와 타이포그래피적 계층 구조에 의존하며, 삼각형 기호(▲)와 두 줄짜리 워드마크만을 유일한 브랜딩 요소로 사용합니다. 표면은 #fafafa → #ebebeb → #171717 순서로 쌓여 그림자나 색상이 아닌 명암의 변화를 통해 깊이감을 표현합니다. 각 요소는 4픽셀 그리드를 기반으로 촘촘하게 배치되어 엔지니어의 노트처럼 정확하고 기능적이며 여백을 과감하게 활용하는 인터페이스를 만들어냅니다.
컨테이너는 너비 1280px, 중앙 정렬, 넉넉한 가로 여백(24-48px)을 두고 있습니다. 메인 블록은 비대칭적인 3영역 구성을 사용하는데, 왼쪽에는 큰 헤드라인, 중앙에는 브랜드 로고, 오른쪽에는 "눈썹" 블록이 배치되어 있습니다. 메인 블록 아래에는 콘텐츠가 교차하는 줄무늬 형태로 배열되어 있습니다. 클라이언트 로고가 있는 전체 너비의 줄무늬, 그 다음에는 왼쪽에 헤드라인, 오른쪽에 제품 레이아웃이 있는 2단 "에이전트 크리에이터" 섹션, 그리고 특징 정보를 담은 3개의 카드 그리드가 이어집니다. 각 섹션은 구분선이나 배경 오프셋 없이 96-128px의 세로 간격으로 구분됩니다. 내비게이션은 배경이 흐릿한 64px 크기의 고정 패널 하나로 구성되어 있습니다. 카드 그리드는 일관되게 16-24px 간격의 2단 또는 3단 레이아웃을 사용합니다. 전체적인 밀도는 콤팩트하여 텍스트는 읽기 쉽고 여백도 충분하지만, 글꼴 크기와 구성 요소 크기 때문에 페이지가 시원하게 느껴지지는 않습니다.
이미지는 간결하고 항상 기능적입니다. 주요 시각적 요소는 검은색 삼각형(▲)으로, 대문자 크기로 떠 있는 실루엣처럼 나타나는 기하학적 브랜드 마크입니다. 콘셉트 증명용 인쇄물에 사용된 클라이언트 로고는 각 브랜드의 실제 워드마크를 회색조로 표현했습니다. 제품 목업(노션의 채팅 인터페이스, CLI 터미널 출력, 여권 카드)은 프레임 카드 안에 밝은 모드 스크린샷으로 삽입되어 있습니다. 사진, 일러스트레이션 또는 3D 요소는 전혀 사용되지 않았으며, 이 시스템은 흰 종이 위에 타이포그래피와 기하학적 도형만으로 구성되어 있습니다.
팔레트
중립적
- Obsidian
#171717— 주요 제목, 탐색 테두리, 어두운 버튼 채우기 및 목록 표시는 모두 거의 검은색으로, 강렬함이나 과도한 채도를 피했습니다. - Paper White
#fafafa— 페이지 캔버스, 카드 표면, 버튼의 밝은 배경—이것이 바로 다른 모든 요소가 위치하는 표준 배경입니다. - Pure White
#ffffff— 볼록한 카드 표면, 삽입물, 입력 필드. - Hairline
#ebebeb— 버튼, 링크 및 카드에 적용되는 1px 테두리는 확대 수준이 높을 때는 보이지만, 확대 수준이 낮을 때는 보이지 않습니다. - Ash
#c9c9c9— 텍스트 비활성화, 레이블 색상 흐림 처리, 클라이언트 로고에 브랜드명 워터마크 삽입. - Smoke
#a8a8a8— 보조 텍스트, 자리 표시자 텍스트, 미묘한 아이콘 채우기.
타이포그래피
11픽셀에서 64픽셀로 · 6단계
- Geist Sans — 대사: Inter · 요점 400, 450, 500 · 인터페이스와 제목에 사용된 기본 글꼴은 Vercel에서 맞춤 제작한 기하학적 산세리프체로, 큰 크기에서 자간이 좁습니다(-0.06em(56-64px), -0.05em(30px)). 페이지 상단의 제목에는 450 굵기를 선택했는데, 이는 Light보다 두껍지만 Semi-Bold보다는 얇아 자신감 있으면서도 과하지 않은 느낌을 줍니다.
- Geist Mono — 대사: JetBrains Mono · 요점 400, 500, 600 · 캡션, 코드 블록, CLI 출력 패널, 메타데이터 및 대문자 텍스트에 사용되는 고정폭 보조 글꼴입니다. 8px/600px/대문자 조합을 통해 작은 워드마크를 정확하게 배치할 수 있습니다. 고정폭 버전의 넓은 자간(0.071em)은 대문자 텍스트를 위한 충분한 공간을 제공합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 12px |
| 버튼 반경 | 6px |
| 카드 반경 | 6px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 96-128px |
| 페이지 너비 | 1280px |
AI가 Vercel 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Headspace — 따뜻한 종이 위에 펼쳐진 햇살 가득한 웰빙 공간
- WHOOP — 한밤중의 퍼포먼스 연구실 - 검은색의 연극적인 공간 아래 놓인 하얀색 임상 실험실 테이블, 그리고 보라색 전기 파동 하나
- Together AI — 빙하 종이 연구 콘솔
- v0 by Vercel — 선반 가공 도면. 정밀도와 기능성이 최우선이며, 각 요소는 깔끔하고 기술적으로 완벽한 표면 위에서 명확한 목적을 수행합니다.
- Dovetail — 검은 달 아래 놓인 설계도 - 거의 보이지 않는 그래프 선, 하얀 글씨, 그리고 보라색 반짝임 하나
- Glideapps — 흑백 제도 테이블, 눈부신 전기 청록색 반짝임 하나
- Timescale — 따뜻한 그래프 용지에 그린 공학 도면
- UGLYCASH — 크림색 종이에 스티커로 뒤덮인 노트는 대담하고 화려한 핀테크 기업의 분위기를 물씬 풍기며, 혼돈을 자랑스럽게 드러낸다.
- Sprout Social — 검은 슬레이트 위에 돋아난 초록 새싹. 엄격한 단색 캔버스에 밝은 포인트 하나가 더해졌고, 색상은 오직 움직임을 표현하는 데에만 사용되었으며, 자신감 넘치는 기하학적 글꼴이 이정표 역할을 한다.
- Krea — 한밤중의 갤러리 느와르
- Evergreen — 리넨 종이에 태양열 온실을 그린 그림
- Factory — 한밤중의 "작전실" 단말기. "공장"은 삭막한 검은색 제어판으로, 손전등에 비친 전령처럼 하얀 카드 한 장이 놓인다. 방 안에 있는 유일한 물건은 바로 작업 그 자체이다.