Auros
생물 발광 데이터 구체가 있는 심해 터미널
Auros는 마치 심연 속에 자리 잡은 핀테크 단말기처럼 기능합니다. 거의 검은색에 가까운 청록색 캔버스 위에 생물 발광 데이터 구체와 청록색에서 분홍색으로 이어지는 빛의 그라데이션이 어우러져 깊이감, 유동성, 그리고 흐름감을 자아냅니다. 인터페이스는 미니멀하면서도 영화적인 디자인으로, 중간 두께의 단일 사용자 디스플레이(Matter)에 과감한 네거티브 트래킹을 적용하여 지나치게 화려하지 않으면서도 입체감을 표현합니다. 색상은 고르게 분포되어 있으며, 무채색인 흰색과 은색은 거의 모든 콘텐츠에 사용되고, 유색 팔레트는 분위기 있는 그라데이션, 카드 표면의 특징, 그리고 청록색에서 연보라색으로 색이 변하는 시그니처 알약 모양 버튼에만 사용됩니다. 카드는 높이가 아닌 미묘한 청록색 표면 능선(반경 16px, 그림자 없음) 위에 떠 있는 듯한 느낌을 주어, 계층 구조가 종이 위의 그림자가 아닌 물의 깊이처럼 인식됩니다. 구성 요소들은 마치 도구처럼 세심하게 디자인되었습니다. 대문자 트래킹 마크, 얇은 기하학적 화살표 아이콘, 연한 분홍색의 큰 숫자 표시 등이 그 예입니다.
최대 너비 1440px의 콘텐츠를 표시하는 어두운 전체 너비 캔버스입니다. 주요 요소는 전체 뷰포트 높이에 걸쳐 있는 중앙 정렬된 텍스트 블록(갈색 → 제목 → 부제목 → 클릭 유도 버튼)이며, 배경에는 입자 이미지가 사용되었습니다. 섹션은 전체 너비의 스트립 형태로, 68px 이상의 넓은 세로 간격으로 구분되며, 캔버스와 약간 오목한 표면이 번갈아 나타납니다. "탐색" 섹션은 비대칭적인 2단 레이아웃을 사용합니다. 왼쪽 열에는 기능 카드가 쌓여 있고, 오른쪽 열에는 기하학적 분자 일러스트레이션이 있습니다. 콘텐츠는 가독성을 높이기 위해 가장자리까지 확장되지 않고 좁은 열(최대 약 600px)로 중앙에 배치됩니다. 바닥글은 120px의 세로 여백이 있는 오목한 부분(#011d1c)으로, 깊은 웅덩이 같은 효과를 줍니다. 내비게이션은 얇고 투명한 패널이며, 요소들은 16~24px 간격으로 배치됩니다. 전반적인 리듬은 영화적이고 공간감이 넘치며, 모든 부분이 생동감 있게 펼쳐지고, 깊고 물처럼 흐르는 색채는 각 구절을 넘길 때마다 더욱 깊이 빠져드는 느낌을 자아낸다.
시각적 스타일은 미니멀하면서도 분위기 있다. 홈페이지에는 3차원 입자 구체가 자리 잡고 있는데, 수천 개의 미세한 청록색과 흰색 점들이 회전하는 구체를 이루며 캔버스의 색상과 가장자리의 연보라색 악센트를 반영하여 마치 정보 객체를 연상시키는 생물 발광 효과를 만들어낸다. 오른쪽 열에는 평면적인 기하학적 분자 다이어그램(어두운 캔버스 위에 흰색 원과 가는 연결선)이 장식 요소로 사용된다. 사진이나 라이프스타일 이미지, 인물은 전혀 등장하지 않으며, 시각적 언어는 깔끔한 데이터 그래픽과 추상적인 형태에 기반한다. 입자 구체는 브랜드 아이덴티티를 정의하는 핵심 시각적 요소로서, 심해라는 은유를 강화하기 위해 모든 주요 페이지에 최소 한 번 이상 등장해야 한다.
팔레트
상표
- Liquid Abyss
#012624— 메인 배경은 페이지의 기본 요소이자 헤더, 핵심 요소이며, 짙은 청록색의 주된 바탕입니다. 이는 심해의 분위기를 자아냅니다. - Liquid Deep
#011d1c— 움푹 들어간 표면은 하단 배경과 더 깊은 판지 패널입니다. 캔버스보다 반 톤 정도 어둡게 인식되어 미묘한 깊이감의 하향 그라데이션을 만들어냅니다. - Liquid Kelp
#003734— 돌출형 카드 표면 및 버튼 채우기 - 움푹 들어간 부분보다 한 단계 위에 위치한 돌출형 표면. 기능 카드, 콘텐츠 패널 및 그라데이션 버튼의 시작점에 사용됩니다.
중립적
- Liquid Mist
#edfffe— 시원한 느낌의 흰색이 본문, 섹션 제목, 그리고 따뜻하고 밝은 서체를 돋보이게 합니다. 은은한 푸른색은 본문을 청록색 계열의 색상과 조화롭게 연결해 줍니다. - Platinum
#ffffff— 순백색은 제목, 탐색 요소, 아이콘 윤곽선 및 고대비 텍스트에 사용됩니다. 모든 제목 수준과 기본 탐색 메뉴의 기본 텍스트 색상입니다. - Silver Mist
#bbc7c6— 보조 텍스트, 은은한 설명, 링크 색상은 원래 상태 그대로입니다. 청록색 배경과 조화를 이루도록 약간 녹색을 띠고 있습니다. - Ash
#f2f2f2— 인용문 및 리뷰에 추가할 텍스트입니다. 실버 미스트의 청록색이 너무 밝게 느껴질 때 사용하기 좋은 차분한 회색 계열 색상입니다. - Slate Deep
#707777— 활동이 없거나 눈에 잘 띄지 않는 배경에 은은한 표면 색조를 더합니다. 캔버스와 판지 사이에 위치하여 아주 미묘한 높이 차이를 만들어냅니다. - Lavender Phosphor
#fde9ff— 큰 통계, 카운터 숫자 및 중요한 지표에 사용되는 백라이트 색상입니다. 시그니처 그라데이션의 핑크색은 어두운 표면에 밝은 악센트로 절제하여 사용됩니다.
타이포그래피
10픽셀에서 96픽셀로 · 6단계
- Matter — 대사: Inter · 요점 400, 500 · 제목과 본문에는 기본 글꼴을 사용하며, 모든 제목(H1~H3)과 큰 동적 텍스트(86~295px)에는 굵기 500을 적용합니다. 본문과 UI 텍스트에는 굵기 400을 사용합니다. 이 글꼴은 큰 크기에서 공격적인 음수 자간(-0.04em, 61px, -0.046em)을 특징으로 하며, 제목 대문자에는 넓은 양수 자간(0.08em, 0.12em, 0.15em, 10px)을 적용합니다. 제목에만 중간 굵기의 글꼴을 사용하는 전략(굵게 또는 얇게)은 이 글꼴의 독특한 특징으로, 글꼴에 균일하고 기계적인 느낌을 부여합니다.
- Arial — 대사: system-ui · 요점 400 · 인터랙티브 UI 요소(내비게이션, 버튼, 헤더 마이크로카피, 푸터)에 대한 보조 대체 요소입니다. 14px 크기에서만 표시되며, Matter가 로드되지 않았을 때 안전하고 보편적인 대체 요소로 사용되고, 폼 레이블, 버튼 텍스트 및 작은 보조 텍스트를 포함합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 20px |
| 버튼 반경 | 6px |
| 카드 반경 | 16px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 68px |
| 페이지 너비 | 1440px |
AI가 Auros 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Design Full-Time — 따뜻한 조명 하나가 비추는 스튜디오 영화관
- Air — 조각 작품 "유리를 통해 본 한밤중의 하늘"
- Slash — 금박 장부가 있는 한밤중의 금고
- Raycast — 미드나잇 커맨드 센터, 코랄 네온
- Dimension — 은은한 조명이 비추는 작업 공간, 불투명 유리 패널
- Modal — 어두컴컴한 서버실 안의 형광 단말기 - 유일한 광원은 밝은 녹색이다.
- Giga — 서리가 내린 흑요석 위로 펼쳐진 한밤중의 지평선
- Reflect Notes — 별빛이 빛나는 보라색 공간은 어두운 천문대와 같으며, 그곳에서 음표들은 거의 검은색에 가까운 남색의 공허함을 배경으로 별자리처럼 떠다닙니다.
- Ameba — 한밤중의 제어실 – 불투명 유리 패널 안쪽에 선명한 파란색 빛이 번쩍인다.
- AgentQL — 밤에 터미널 위로 오로라가 보입니다.
- Frame — 심야 영화 상영을 위한 영화관. 어두운 공간에 푸른색 스포트라이트 하나만이 모든 조명을 비추고, 사용자 인터페이스는 배경으로 사라져 창의적인 콘텐츠가 전면에 투영될 수 있도록 한다.
- Harness — 한밤중의 관제센터, 형광 녹색으로 강조된 모습