Seline Analytics
따뜻한 종이 위에 놓인 조용한 분석표
셀린은 따뜻한 돌색 배경(#fafaf9)에 생동감 넘치는 파란색 포인트가 더해져 있으며, 나머지 색상은 모두 Tailwind의 돌색 팔레트에서 가져온 중성적인 색상입니다. 헤드라인은 맞춤 디자인된 기하학적 산세리프체(roobert)를 400의 굵기와 좁은 네거티브 자간으로 표현하여, 전형적인 SaaS 스타일에서 흔히 볼 수 있는 시끄러운 느낌과는 대조적으로 차분하고 속삭이듯 자신감 있는 분위기를 연출합니다. UI 표면은 따뜻한 배경 위에 16px의 부드러운 블러 효과와 함께 떠 있는 듯한 평평한 흰색 카드 형태로 구성되어 있습니다. 테두리는 1px 두께의 얇은 돌색 선으로 만들어졌으며, 두꺼운 구분선이나 패널 대신 주요 구조적 요소로 아낌없이 사용되었습니다. 레이아웃은 여유로운 세로 리듬에 맞춰 전체 너비의 콘텐츠가 중앙에 배치되어 있으며, 알약 모양의 인터랙티브 컨트롤, 개성을 더하는 마스코트 일러스트, 그리고 제품 증거로 대시보드 스크린샷이 사용되었습니다. 전체적인 인상은 차분하고, 단색이며, 자신감 넘치는 편집 스타일입니다. 다른 모든 요소들의 절제된 디자인 덕분에 파란색 콜 투 액션 버튼이 페이지에서 가장 눈에 띄는 요소로 자리 잡고 있습니다.
페이지는 최대 너비로 설정되어 있으며, 약 1200px 간격으로 중앙에 배치되어 충분한 세로 공간을 확보했습니다. 메인 페이지는 왼쪽 정렬된 두 줄짜리 텍스트 블록으로, 파란색으로 강조된 문구("간단하고 효과적")가 있습니다. 그 다음에는 두 개의 클릭 유도 버튼(파란 알약 + 유령 알약), 회색 파트너 로고, 신뢰도 평가, 그리고 다음 섹션과 살짝 겹치는 전체 너비의 대시보드 미리보기가 이어집니다. 페이지 하단에는 단일 열 그리드 형식으로 고객 후기가 번갈아 가며 표시되고, 그 아래에는 왼쪽 정렬된 텍스트와 중앙에 배치된 제품 이미지가 있는 전체 너비 섹션이 있습니다. 내비게이션은 최소한의 디자인으로 구성된 상단 바입니다. 왼쪽에는 로고, 중앙에 배치된 내비게이션 링크, 오른쪽에는 로그인 버튼과 파란색 클릭 유도 버튼이 있으며, 내비게이션 중앙에는 아바타 이미지가 떠 있어 신원 확인을 돕습니다. 각 섹션 사이의 간격은 넓게(96px) 설정하여 정보가 빽빽하게 나열되는 것이 아니라 편집상의 리듬감을 만들어냅니다.
시각적 언어는 제품 사용자 인터페이스의 스크린샷이 주를 이룹니다. 대시보드 미리보기는 회색조(1)(0.94) 대비 필터로 렌더링된 사진으로, 데이터의 색상을 단색으로 바꿉니다. 유일한 사람 형상은 윤곽선만으로 이루어진 선형 마스코트 스티커(후드를 쓴 캐릭터)이며, 분석 콘텐츠와 재미있는 대조를 이루도록 각 섹션에 한 번씩 배치됩니다. 부드러운 그림자를 사용하여 스티커처럼 깊이감을 표현합니다. 브랜드 로고와 글리프는 작은 검은색 불꽃/불꽃 모양입니다. 사진은 전혀 사용되지 않았습니다. 라이프스타일 사진, 팀 사진, 환경 이미지 등 어떤 사진도 없습니다. 객체(대시보드)가 주인공입니다. 모든 장식 아이콘은 #0c0a09 또는 #3ba6f1 색상의 1px 윤곽선 스타일이며, 채워지지 않습니다.
팔레트
상표
- Cyan Signal
#3ba6f1— 페이지에서 유일하게 색상을 사용한 부분은 주요 행동 유도 버튼, 활성 링크, 그리고 브랜드 아이콘의 테두리뿐이며, 이러한 색상은 최소한으로 사용하여 사용자의 주의를 행동에 집중시킵니다. - Cyan Edge
#3398e1— 파란색은 동작 개요, 링크 레이블 및 상호 작용 요소를 강조하는 데 사용됩니다. 클릭 유도 버튼의 기본 색상으로 사용해서는 안 됩니다.
중립적
- Ink Black
#0c0a09— 주요 제목, 강조된 본문 텍스트 및 표현력이 풍부한 아이콘은 따뜻한 느낌의 거의 검은색에 가까운 색상입니다. - Stone Canvas
#fafaf9— 페이지 배경은 화면의 흰색보다는 종이 같은 느낌을 주는 따뜻하고 부드러운 색상입니다. - Pure White
#ffffff— 지도 표면, 돌출 패널 및 입력 필드 채우기는 기본적으로 평평하고 그림자가 없습니다. - Stone Border
#e8e6e5— 카드, 탐색 메뉴, 입력 필드의 얇은 테두리가 주요 구조적 요소이며, 구분선이 아닙니다. - Stone Muted
#d6d3d1— 추가 액자, 은은한 배경색, 장식용 칸막이. - Ash Gray
#a8a29e— 도움말 텍스트, 아이콘 윤곽선, 비활성화 상태 - 읽을 수는 있지만 작동하지 않습니다.
타이포그래피
10에서 52px로 · 5단계
- Roobert — 대사: Inter Tight or Satoshi · 요점 400, 500 · 제목과 본문 레이아웃에 사용된 폰트는 독특한 기하학적 산세리프체로, 최소한의 음수 자간(-0.025em, -0.021em, 32px)을 특징으로 합니다. 400 x 52px의 굵기는 이 폰트의 시그니처로, 틀에 얽매이지 않으면서도 은은하고 권위적이면서도 절제된 느낌을 줍니다. 제목은 과하지 않으면서도 존재감을 드러냅니다.
- Inter — 대사: Inter · 요점 400, 500, 600 · 본문 텍스트, 내비게이션, UI 및 제목에 사용되는 기본 글꼴은 모든 화면 밖 텍스트에 공통적으로 사용되는 중립적인 범용 글꼴입니다. 본문 텍스트의 주된 크기는 14px, 두께는 400, 줄 간격은 1.64이며(빈도 1174), 작은 크기에서는 양의 자간(0.004em)을 적용하여 빽빽한 UI 요소의 가독성을 확보합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 넓은 |
| 기본 단계 | 8px |
| 버튼 반경 | 9999px |
| 카드 반경 | 10px |
| 그림자 | 부드러운 그림자 |
| 구간 사이 | 96px |
| 페이지 너비 | 1200px |
AI가 Seline Analytics 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- ElevenLabs — 따뜻한 크림색 톤의 사진 에세이에 은은한 제목이 더해졌습니다. 바우하우스 스타일의 노트는 달걀 껍질색 종이에 검정 잉크를 사용하고, 보라색과 주황색으로 포인트를 주어 제품을 돋보이게 합니다.
- Awesomic — 편집용 아연 메시 소재에 색종이 조각을 연상시키는 주황색 구두점이 있습니다.
- Monad — 따뜻한 양피지에 대한 편집 기술 저널
- Dub — 링크의 무광택 쌀 종이 재질 컨트롤 패널
- Notion — 한낮의 따스한 햇살 아래 따뜻한 종이 노트
- Anthropic — 따뜻한 느낌의 양피지에 인쇄된 과학 분야 저널—차분한 상아색 표면, 세리프체로 쓰인 편집 제목, 그리고 필요한 순간에만 나타나는 단 하나의 점토색 포인트.
- Calendly — 차가운 대리석 위에 진한 파란색 잉크
- Augen Pro — 애플의 하얀색 프레젠테이션은 단색 공간에 깔끔하고 가벼운 느낌의 강렬한 파란색을 유일한 포인트 색상으로 사용했습니다.
- Antimetal — 크림색 종이에 인쇄된 편집 기록 - 절제가 자신감을 드러내고 세리프체가 중요한 역할을 하는 과학 저널의 조용한 아침.
- Perk — 따뜻한 양피지 위에 전기 석회
- Ditto — 햇살 가득한 작업실에서 야생화 샘플을 제작하고 있습니다. 따뜻한 크림색 표면에 생생한 노란색 바탕색, 짙은 남색 잉크, 작품 뒤편으로 피어나는 유기적인 색채의 형태들이 어우러져 있습니다.
- Officevibe — 따뜻한 크림색 종이에 인쇄된 잡지. 인사 관리에 대한 심도 있는 에세이가 하나의 상품처럼 담겨 있다고 상상해 보세요. 모던한 파란색 인터페이스를 배경으로 부드러운 필기체 글꼴이 은은하게 흘러나옵니다.