Framer
공허 속의 네온 갤러리
프레이머는 거의 완벽한 어둠 속에서 작동합니다. 마치 갤러리 개막식의 네온사인처럼 콘텐츠가 떠다니는 검은 캔버스 같습니다. GT Walsheim Medium 서체를 사용하고 0.8~1.1의 좁은 줄 간격과 54px에서 -0.04em의 과감한 음의 자간을 적용한 헤드라인은 페이지에 깔끔하게 자리 잡기보다는 앞으로 튀어나오는 듯한 압축적이고 장식적인 서체를 만들어냅니다. 테두리, 빛 효과, 아이콘, 활성 상태 등 모든 기능적 요소에는 단일한 일렉트릭 블루 색상(#0099ff)이 사용되었으며, 나머지 인터페이스는 무채색으로 유지되면서 미묘한 회색 전환(#111, #171717, #242424)을 통해 순수한 검은색에서 깊이감을 표현합니다. 구성 요소들은 장식적이기보다는 세심하게 고려된 느낌을 줍니다. 8~25px의 둥근 모서리, 1px의 얇은 테두리, 최소한의 그림자, 그리고 빈 공간이 드러나도록 하는 반투명 표면이 그 예입니다.
전체 너비 섹션은 검은색 캔버스를 넘어 확장되며, 콘텐츠는 최대 너비 약 1200px로 제한되고 중앙에 배치됩니다. 메인 섹션에는 왼쪽 정렬된 헤더와 하나의 클릭 유도 버튼(CTA)이 있으며, 오른쪽은 의도적으로 비워 두어 중앙 정렬이 아닌 비대칭적인 형태로 배치되었습니다. 섹션은 텍스트 전용 레이아웃(큰 헤더 + 부제목)과 제품 스크린샷을 번갈아 사용합니다. "Framer 포함" 섹션은 4열 그리드에 로고를 배치했습니다. 커뮤니티 섹션에서는 모서리가 둥근 중앙 정렬된 전체 너비 컨테이너 안에 제품 스크린샷을 배치했습니다. 내비게이션은 최소화되어 있으며, 왼쪽에 로고가 있고 오른쪽에 링크가 정렬된 얇은 상단 바가 있으며, 눈에 보이는 컨트롤은 없습니다. 섹션 간의 간격은 80px로 상당히 넓어 콘텐츠가 마치 빈 공간에 떠 있는 섬처럼 뚜렷하게 구분됩니다.
제품 사용자 인터페이스의 스크린샷이 주를 이루며, 신호등 점들이 있는 크롬 재질의 창 안에 앱의 스크린샷이 삽입되어 메인 이미지로 자리 잡습니다. 품질을 보증하는 로고는 검은색 배경에 흰색 글자로 넓은 간격을 두고 배치되어 있습니다. 사진, 일러스트레이션, 추상적인 그래픽은 전혀 사용되지 않았으며, 시각적 언어는 살아있는 인터페이스처럼 보여지는 제품 자체입니다. 아이콘 스타일은 미니멀하고, 윤곽선이 있으며, 흑백의 작은 크기입니다. 텍스트 밀도는 주로 텍스트로 구성되며, 제품 스크린샷 형태의 큰 이미지가 간간이 삽입됩니다. 공간의 시각적 균형은 이미지보다 타이포그래피를 분명히 우선시합니다.
팔레트
상표
- Vivid Violet
#0066ff— 인터페이스에서 단색 배경이 표시되는 유일한 곳은 기본 실행 버튼입니다.
중립적
- Bone
#ffffff— 주요 제목과 본문은 어두운 배경에 배치하고, 버튼 배경만 유일한 광원입니다. - Void
#000000— 페이지 캔버스, 내비게이션 배경, 카드 표면, 아이콘 채우기 등 모든 것이 불필요한 콘텐츠를 모두 흡수하는 끝없는 검은색입니다. - Graphite
#111111— 볼록하게 솟아오른 카드 표면은 텅 빈 표면보다 한 단계 높은 수준으로, 크고 기능적인 카드와 모달 컨테이너를 만들어냅니다. - Obsidian
#171717— 버튼, 추가 카드, UI 채우기 등을 위한 중간 영역으로, 상호작용 요소를 캔버스에서 분리합니다. - Slate
#242424— 마우스 커서를 올리면 입력 필드와 들여쓰기된 패널이 텍스트 형식으로 바뀌기 전에 가장 밝은 중립 색상으로 표시됩니다. - Ash
#333333— 사용되지 않는 배경 이미지 및 구조적 요소에 대한 딥 필(Deep Fill).
타이포그래피
12px에서 68px로 · 8단계
- sans-serif — 대사: Inter · 요점 400 · 산세리프체 - 추출된 데이터에서 발견되었지만 AI가 설명하지 못했습니다.
- GT Walsheim — 대사: Inter Tight · 요점 500 · 제목과 표제에 사용되는 글꼴은 브랜드 글꼴입니다. 이 글꼴은 44~68픽셀 범위에서 줄 간격 0.8~1.1, 자간 -0.04~-0.05em으로 압축되어 있습니다. 이는 장식적인 요소가 아니라, GT Walsheim의 기하학적인 따뜻함과 엄격한 자간이 결합되어 시스템의 정체성을 나타내는 자신감 있고 간결하며 약간 미래지향적인 느낌을 만들어냅니다. 이와 유사한 기하학적 표현을 원한다면 Inter Tight 또는 Space Grotesk Bold를 고려해 보세요.
- Inter Variable — 대사: Inter · 요점 400 · 본문, 내비게이션, 보조 제목은 핵심 요소입니다. Inter Variable 축을 사용하면 가중치를 부드럽게 보간할 수 있습니다. 크기가 커질수록 추적 간격이 좁아집니다. -0.001em에서 18px까지는 간격이 좁아지고, -0.027em에서 22px까지는 간격이 좁아집니다. 가변 버전은 사이트의 미세 애니메이션을 부드럽게 구현할 수 있도록 해줍니다. 대체 기능: Inter( Google) - 거의 동일한 대체 기능입니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 10px |
| 버튼 반경 | 9999px |
| 카드 반경 | 20px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80px |
| 페이지 너비 | 1200px |
AI가 Framer 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Auros — 생물 발광 데이터 구체가 있는 심해 터미널
- Origin Financial — 고요한 화려함이 감도는 한밤중의 갤러리. 크고 선명한 세리프체 글꼴과 몇 개의 조명이 켜진 색색의 패널이 어우러져 금융이 세심하게 선별된 예술 작품이라는 느낌을 자아내는 조용하고 거의 어두운 공간.
- Raycast — 미드나잇 커맨드 센터, 코랄 네온
- Dimension — 은은한 조명이 비추는 작업 공간, 불투명 유리 패널
- Reflect Notes — 별빛이 빛나는 보라색 공간은 어두운 천문대와 같으며, 그곳에서 음표들은 거의 검은색에 가까운 남색의 공허함을 배경으로 별자리처럼 떠다닙니다.
- Ameba — 한밤중의 제어실 – 불투명 유리 패널 안쪽에 선명한 파란색 빛이 번쩍인다.
- Branding — 검은색 갤러리 벽에 붉은색 포인트가 더해진 디자인입니다. 커다란 흰색 글꼴이 마치 공허한 공간처럼 보이는 어두운 배경 위에 떠 있는 듯하며, 밝은 빨간색 포인트와 갤러리 안내판처럼 보이는 강렬한 장식 요소들이 그 공간을 가로막고 있습니다.
- Harness — 한밤중의 관제센터, 형광 녹색으로 강조된 모습
- Koto — 한밤중의 옵시디언 갤러리. 거의 칠흑 같은 무대 위에는 단 하나의 노란색 마커만이 유일한 따뜻한 광원으로 작용하고, 빽빽하게 채워진 활자체들이 전시 포스터처럼 드넓은 빈 공간에 떠 있다.
- Ohzi — 어두운 갤러리에 매달린 빛나는 정육면체
- Depot — 어두운 서버 터미널. 거의 검은색에 가까운 개발자 콘솔에는 작업 시작을 알리는 녹색 LED 하나가 켜져 있고, 나머지 사용자 인터페이스는 흑연색으로 표시되어 있다.
- Maciej Zadykowicz — 만화경처럼 다채로운 벽화가 있는 미드나잇 갤러리는 거의 검은색에 가까운 스튜디오 벽으로, 생동감 넘치는 다채로운 타이포그래피 작품 하나가 시선을 사로잡는 반면 나머지는 모두 차분하고 절제된 분위기를 자아냅니다.