Mercury
황혼녘 알프스 산비탈
머큐리는 알프스 산맥의 은행에서 영감을 받은 미학을 바탕으로 디자인되었습니다. 거의 검은색에 가까운 바탕(#171721)은 마치 영화 속 천문대와 같은 분위기를 자아내며, 콘텐츠는 약간 더 밝은 흑연색 카드 형태로 표현됩니다. 인터페이스는 주로 흑백으로 구성되어 있으며, 오닉스 바탕에 아이보리색 텍스트가 사용되었고, 핵심 기능인 "계좌 개설"에만 생생한 코발트색(#5266eb) 요소가 사용되었습니다. 타이포그래피는 디자인의 핵심적인 표현 수단입니다. 480포인트(굵지도 얇지도 않은)의 맞춤형 디스플레이 폰트와 400포인트의 은은한 본문 폰트가 조화를 이루어 자신감 있으면서도 결코 과하지 않은 스타일을 완성합니다. 구성 요소는 평면적이고 프레임이 없으며, 그림자 대신 12픽셀의 흑연색 카드 테두리와 캡슐 모양의 컨트롤을 사용하여 구조를 정의합니다. 페이지 전체를 차지하는 메인 사진 요소(외로운 테이블을 배경으로 안개 낀 산)는 사용자 인터페이스가 시작되기 전의 분위기를 설정하며, 이후의 모든 요소는 이러한 차분하고 고급스러운 어둠을 유지합니다.
모든 콘텐츠는 어두운 색상의 전체 너비 스타일로 디자인되었습니다. 메인 화면은 100px 너비의 전체 너비 사진으로 구성되며, 가운데 정렬된 제목, 부제목, 그리고 이메일 연락처 정보를 수집하는 양식 블록(최대 너비 약 640px)이 있습니다. 메인 화면 아래에는 최대 너비 1200px, 세로 여백 72px의 섹션별 콘텐츠가 배치되어 있으며, 왼쪽에는 텍스트, 오른쪽에는 이미지가 있는 2단 레이아웃과 3단 제품 설명 카드가 번갈아 나타납니다. 내비게이션은 메인 화면 위에 겹쳐진 투명한 상단 바 형태로, 스크롤하면 불투명 유리처럼 어두운 색상으로 전환됩니다(배경 흐림 효과). 바닥글은 어두운 색상에 안내 문구가 표시됩니다. 세로 레이아웃은 여유로운 공간감을 제공하며, 각 섹션 사이에는 충분한 간격이 있습니다. 측면 내비게이션은 없으며, 모든 내비게이션은 상단 바에 있습니다.
메인 섹션은 영화 같은 분위기의 사진들로 가득 차 있습니다. 안개 낀 산, 자연 속 한적한 업무 공간 등 영감을 주는 풍경 사진들은 은행 업무를 사색적이고 숭고한 경험으로 표현합니다. 사진은 고화질이며, 채도가 약간 낮고 차가운 색조에 은은한 어두운 오버레이를 더해 텍스트 가독성을 유지합니다. 메인 섹션 아래에는 제품 사용자 인터페이스의 스크린샷과 추상적이고 분위기 있는 배경 이미지가 번갈아 나타납니다. 일러스트레이션이나 예술 작품을 연상시키는 아이콘은 없으며, 시각적 요소는 사진이거나 순수하게 기능적인 요소로만 구성되어 있습니다. 사용자 인터페이스 전체에 사용된 아이콘 스타일은 내비게이션, 버튼, 폼 요소에 사용되는 미니멀한 아이보리 색상의 라인/글리프 스타일입니다.
팔레트
상표
- Cobalt
#5266eb— 보라색은 채워진 버튼, 선택된 탐색 상태 및 포커스 기반 전환 순간에 사용됩니다.
중립적
- Onyx Canvas
#171721— 메인 페이지 배경, 홈 화면의 기본 오버레이, 바닥글 및 섹션용 캔버스. - Graphite Card
#1e1e2a— 판지와 각 부분의 볼록한 표면은 캔버스보다 한 단계 밝아서 매끄러운 구분을 만들어냅니다. - Obsidian Button
#272735— 추가 버튼 채우기, 내장형 폼 배경, 눈에 거슬리지 않는 상호 작용 표면. - Slate Border
#70707d— 콘텐츠 블록 사이의 중간 두께의 칸막이 및 구조적 경계. - Mist Border
#e2e3ed— 얇고 거의 눈에 띄지 않는 테두리, 거의 눈에 띄지 않는 버튼 윤곽선, 입력 필드 가장자리 - 어두운 배경에 밝은 테두리. - Ash Text
#c3c3cc— 본문, 보조 텍스트, 추가 레이블 - 가독성을 유지하면서 계층 구조를 간소화했습니다.
타이포그래피
12픽셀에서 65픽셀로 · 9단계
- arcadia — 대사: Inter · 요점 360, 400, 420, 480 · 메인 및 사용자 인터페이스 - 내비게이션, 본문, 버튼, 입력 필드, 레이블 및 보조 텍스트에 사용되는 폰트로, 본문 텍스트는 400, 강조 텍스트는 480의 굵기를 제공합니다. 표준(300/400/600) 대신 중간 굵기 스케일(360, 420, 480)을 사용하여 Mercury 텍스트는 굵지도 얇지도 않은, 항상 적절한 균형감을 보여줍니다.
- arcadiaDisplay — 대사: Söhne Breit · 요점 360, 480, 530 · 제목과 장식 요소에는 28px에서 65px까지의 모든 제목 크기에 480 굵기의 글꼴이 사용되며, 가장 큰 장식 요소에는 530 굵기의 글꼴이 사용됩니다. 낮은 줄 간격(1.1~1.2)과 넓은 자간(0.01~0.02em)은 편집 텍스트에서 볼 수 있는 압축된 구조와는 달리 장식 텍스트에 넓고 건축적인 느낌을 줍니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 12px |
| 버튼 반경 | 32px |
| 카드 반경 | 12px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 72px |
| 페이지 너비 | 1200px |
AI가 Mercury 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Origin Financial — 고요한 화려함이 감도는 한밤중의 갤러리. 크고 선명한 세리프체 글꼴과 몇 개의 조명이 켜진 색색의 패널이 어우러져 금융이 세심하게 선별된 예술 작품이라는 느낌을 자아내는 조용하고 거의 어두운 공간.
- Air — 조각 작품 "유리를 통해 본 한밤중의 하늘"
- Slash — 금박 장부가 있는 한밤중의 금고
- dope.security — 보라색 신호등이 있는 한밤중 터미널
- Modal — 어두컴컴한 서버실 안의 형광 단말기 - 유일한 광원은 밝은 녹색이다.
- Giga — 서리가 내린 흑요석 위로 펼쳐진 한밤중의 지평선
- Dovetail — 자정의 설계도 관리 센터
- Dovetail — 검은 달 아래 놓인 설계도 - 거의 보이지 않는 그래프 선, 하얀 글씨, 그리고 보라색 반짝임 하나
- AgentQL — 밤에 터미널 위로 오로라가 보입니다.
- Supabase — 한밤중의 코드 편집기, 석탄 먼지 바다 위에 빛나는 형광 녹색 점 하나 - 단 하나의 색채의 맥박
- Changelog — 어두운 유리창 너머로 보이는 천문대 콘솔
- GitHub — 생물 발광 제어 장치가 있는 우주 지휘 패널 - 어둡고 분위기 있는 작업 공간에서 하나의 녹색 빛이 앞길을 가리킨다.