Cursor
타오르는 숯불 불빛 아래 아늑한 양피지 작업실
Cursor는 따뜻하고 양피지 같은 느낌의 타이포그래피를 사용합니다. 부드러운 바탕 위에 짙은 검정색 텍스트가 펼쳐지고, 강렬한 주황색 포인트가 버튼을 채우는 대신 링크와 선택 항목을 활성화하는 데 사용됩니다. 제목은 CursorGothic 400 굵기로 설정되며, 크기가 커질수록 자간이 점차 좁아집니다. 굵기보다는 절제된 얇은 글자 두께를 통해 권위감을 표현합니다. 표면은 얇은 테두리와 부드럽고 따뜻한 회색 그림자로 종이 질감을 살렸으며, 모서리는 4px 두께로 깔끔하게 유지됩니다. EB Garamond는 소제목과 본문에 선택적으로 사용되고, BerkeleyMono는 코드, 태그 및 메타데이터를 처리하여 SaaS 대시보드라기보다는 문학 잡지 같은 개성을 시스템에 부여합니다.
최대 너비: 1300px (중앙 정렬), 24px 여백. 상단 내비게이션: 로고와 텍스트 마크가 왼쪽에 있는 52px 높이의 투명 헤더, 중앙에 정렬된 4개의 내비게이션 링크, 오른쪽에 정렬된 "로그인/문의/다운로드" 링크 그룹. 히어로 섹션: 왼쪽 정렬 헤더 + 왼쪽 상단에서 아래로 이어지는 텍스트가 있는 이중 콜투액션 블록, 페이지 전체 너비를 차지하는 전체 너비 제품 목업 카드. 트러스트 스트라이프: 섹션 너비를 가로지르는 한 줄에 8개의 로고 타일. 기능 섹션은 왼쪽에 텍스트, 오른쪽에 스크린샷이 50/50 비율로 번갈아 배치되는 2단 레이아웃이며, 섹션 간 세로 간격은 64-96px입니다. 모든 기능 스크린샷은 동일한 macOS 스타일의 창 목업입니다. 푸터: 브랜드 마크가 왼쪽에 있는 4단 링크 그리드. 각 섹션은 구분선 대신 충분한 여백으로 구분됩니다. 크림색 캔버스 자체가 구분 역할을 합니다.
제품 스크린샷이 중심을 차지합니다. macOS 창 모형을 크게 보여주며 Cursor IDE의 작동 모습을 보여줍니다. 파일 탭, 차이점 비교 보기, 에이전트 플랜, 터미널 패널, Slack/채팅 통합 기능 등이 포함되어 있습니다. 각 창 모형은 부드럽고 따뜻한 대비를 이루는 #f2f1 색상의 카드로 테두리가 장식되어 있습니다. 은은한 풍경 사진(산/사막 지평선)이 메인 섹션 너머로 확장되어 UI와 조화를 이루면서도 따뜻한 느낌을 더합니다. 클라이언트 로고( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe)는 알약 모양의 Linen 타일 안에 흑백 글자로 표시됩니다. 인물 사진, 일러스트레이션, 추상적인 장식 그래픽 요소는 전혀 사용되지 않았으며, 모든 시각적 요소는 제품의 UI와 브랜딩에 집중되어 있습니다. 아이콘은 #7a7974 Ash 색상으로 채워진 얇고 단색의 글리프로, 색상은 전혀 사용되지 않았습니다.
팔레트
중립적
- Ink
#26251e— 기본 텍스트, 기본 액션 버튼 배경, 탐색 텍스트 - 따뜻한 느낌의 거의 검은색에 가까운 색조이며, 절대 순수한 #000 색상은 아닙니다. - Parchment
#f7f7f4— 페이지 배경, 즉 메인 캔버스는 따뜻한 크림색으로 되어 있어 대비를 부드럽게 하고 디지털 인쇄보다는 잉크 인쇄와 같은 느낌을 줍니다. - Bone
#f2f1ed— 캔버스보다 한 톤 어두운 골판지 표면과 볼록한 용기들이 겹쳐져 테두리 없는 "종이 위에 종이를 얹은" 듯한 효과를 만들어냅니다. - Linen
#e6e5e0— 어두운 표면의 버튼에는 밝고 중립적인 색상을 채웁니다. - Stone
#cdcdc9— 얇은 테두리, 구분선, 은은한 분할선 – 따뜻한 색조의 1픽셀 선 - Mist
#a1a19f— 3단계 보조 텍스트, 캡션 - 음소거된 텍스트와 보조 텍스트 사이에 위치합니다.
타이포그래피
12px에서 72px로 · 6단계
- CursorGothic — 대사: Inter · 요점 400, 500 · 사용자 인터페이스, 제목, 탐색 메뉴, 본문 및 제품 디자인에 사용되는 기본 글꼴입니다. 400포인트 두께의 제목은 22px에서 -0.005em, 72px에서 -0.03em으로 점진적으로 줄어드는 자간이 특징이며, 제목은 절대 굵게 표시되지 않습니다. 글꼴 기능 ss08, ss09, tnum을 사용하면 스타일 대체 문자와 표 형식 숫자를 활성화할 수 있습니다.
- EB Garamond — 대사: Iowan Old Style · 요점 400, 500 · CursorGothic은 개별 소제목, 본문 텍스트 및 표 형식 데이터에 적합한 편집용 세리프 서체로, 인터페이스에 문학적인 느낌을 더합니다.
- berkeleyMono — 대사: ui-monospace · 요점 400, 500 · 모노스페이스(Monospace)는 코드 블록, 명령줄 조각, 메타데이터, 파일 경로 및 개발자 레이블에 사용되는 기술 언어입니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 8px |
| 버튼 반경 | 4px |
| 카드 반경 | 4px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 64-96px |
| 페이지 너비 | 1300px |
AI가 Cursor 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Amplemarket — 색종이 조각이 흩뿌려진, 햇살이 쏟아지는 작업 공간
- Getharvest — 황금 시간대의 책상 – 따뜻한 크림색 캔버스, 캔버스에 걸린 하얀 엽서들, 그리고 선명한 오렌지색 불꽃 하나
- Drive Capital — 따뜻한 종이에 인쇄된 레트로 로드 트립 포스터
- Wealthsimple — 캐시미어로 안감을 댄 창고, 갤러리 조명 설치
- Huddle — 크림색 종이에 파스텔톤으로 그린 재고 카드
- Fuser — 디자이너의 작업 벽에 흩어져 있는 폴라로이드 사진들
- Campsite — 햇살이 비치는 편집자의 작업 공간 - 따뜻한 크림색 종이에 주황색 도장 하나가 찍혀 있습니다.
- Redis Agency — 근무 시간 이후에 문을 여는 편집 작업실은 칠흑같이 어두운 곳으로, 모든 브랜딩 작업은 세리프체 글꼴과 붉은 무 하나로 이루어진다.
- AI Product Generation — 흰 종이 위에 편집 사진 스튜디오를 그린 그림 - 표지 제목, 편집 강조를 위해 주황색 사용
- Getanchor — 햇볕에 바랜 크림색 바탕에 따뜻한 테라코타 색조
- Flatfile — 따뜻한 양피지 위에 조용히 적힌 데이터 일기
- Inthememory — 따뜻한 조명 하나가 비추는 하얀 대리석 위의 건축 도면. 깊은 청록색 잉크와 알약 모양의 조작 버튼들이 깔끔한 흰색 표면 위에 떠 있는 듯한 조용하고 아늑한 편집실. 단 하나의 주황색 포인트만이 공간에 생기를 불어넣고 있다.