Subframe
따뜻한 양피지 위에 그려진 그래픽 드로잉. 디자이너 용지에 그려진 이 그림은 모든 획이 연필이나 지우개로만 이루어져 있고, 물감은 전혀 사용되지 않았다. 선의 굵기와 드문드문한 세리프를 통해 깊이감이 표현된다.
Subframe은 흑백 디자인 작업 공간입니다. 따뜻하고 부드러운 캔버스에 흑연처럼 선명한 검정 잉크가 사용되었고, 색상 강조는 전혀 없습니다. 전체 인터페이스는 종이, 연필, 그림자라는 하나의 재료로 인식되며, 세련된 세리프체(Instrument Serif)와 체계적인 산세리프체(Inter)의 대비라는 과감한 타이포그래피적 요소가 헤드라인에 편집상의 무게감을 더합니다. 표면은 입체감이 아닌 평면으로 구성되어 있으며, 깊이감은 그림자 대신 #e5e7eb 색상의 얇은 구분선과 어두운 컨트롤 부분의 강조 표시를 통해 표현됩니다. 밀도는 넉넉합니다. 섹션 간 간격은 48~64px로 넓게 배치되었고, 레이아웃은 중앙에 정렬되어 있으며, 텍스트 주변에는 충분한 여백이 있습니다. 유일한 색상은 거의 흰색과 거의 검은색의 대비뿐이며, 어두운 버튼이 각 페이지에서 가장 눈에 띄는 요소이고, 회색 톤의 파트너 브랜드 로고 스트립이 유일한 시각적 장식 요소입니다.
중앙 정렬된 전체 너비(1200px) 레이아웃은 풍부한 세로 리듬감을 제공합니다. 주요 요소는 중앙에 위치한 단일 블록으로, 상단에는 어두운 색상의 분할 컨트롤, 큰 "Inter" 제목, 한 줄짜리 부제목, 그리고 두 개의 버튼(채워진 버튼과 반투명 버튼)이 나란히 배치되어 있습니다. 측면 이미지나 레이아웃 분할은 없습니다. 주요 요소 아래에는 중앙에 위치한 회색 로고 스트라이프가 있습니다. 이후의 각 섹션도 동일한 패턴을 따릅니다. 왼쪽 정렬된 제목과 부제목 블록, 그리고 섹션 사이에 48~64px의 여백이 있는 전체 너비의 제품 쇼케이스 프레임이 있습니다. 내비게이션은 최소화되어 있습니다. 중앙에 정렬된 링크와 오른쪽 정렬된 액션이 있는 상단 바가 있으며, 사이드바나 메가 메뉴는 없습니다. 페이지는 위에서 아래로 중앙에 정렬된 일련의 문구들로 구성되어 있으며, 각 문구는 충분한 공간을 확보하고 있습니다. 이러한 레이아웃은 복잡한 제품 페이지라기보다는 편집 포트폴리오처럼 느껴집니다.
시각 디자인은 미니멀하고 기능적입니다. 시스템은 두 가지 시각 모드를 활용합니다. (1) 24px 반경의 프레임으로 둘러싸인 제품 스크린샷 및 UI 목업은 실제 인터페이스 구성 요소(테이블, 버튼, 폼)를 동일한 흑백 팔레트로 렌더링하여 스크린샷이 페이지에 자연스럽게 통합된 것처럼 보이게 합니다. (2) 회색조 파트너 로고 한 줄은 색상이나 컨테이너 없이 평면으로 렌더링되어 사회적 증거 역할을 합니다. 라이프스타일 사진, 추상적인 그라데이션 또는 3D 렌더링은 사용되지 않았습니다. 유일한 설명 요소는 브랜드 아이콘과 함께 따뜻한 회색 배경 중앙에 배치된 어두운 색상의 제품 "타일"입니다. 이는 장식이 아닌 제품 시연으로 인식됩니다. 모든 이미지는 텍스트 기반 레이아웃에 배치되어 시각적 무게는 텍스트에 있습니다.
팔레트
중립적
- Page Canvas
#fafafa— 페이지 배경, 캔버스 위의 엽서, 어두운 표면 위의 밝은 글씨 – 전체 흑백 시스템의 바탕이 되는 따뜻한 흰색. - Hairline Border
#e5e7eb— 구분선, 카드 테두리, 이미지 프레임, 아이콘 윤곽선 - 시스템에서 가장 자주 사용되는 윤곽선 유형으로 공간 구조를 정의합니다. - Card Surface
#ededed— 카드용 돌출형 배경은 캔버스보다 한 단계 위에 위치하여 그림자 없이 깔끔한 구성을 만들어냅니다. - Divider Mid
#dadada— 중간음 구분선 및 섹션 간 전환 - Graphite
#242424— 밝은 표면의 주요 버튼에는 고대비의 중성색을 채워 넣습니다. - Ink Black
#171717— 본문, 제목, 아이콘 윤곽선 - Graphite보다 약간 더 세련된 느낌이며, 표면보다는 타이포그래피에 사용됩니다.
타이포그래피
12px에서 128px로 · 7단계
- Inter — 대사: Inter (Google Fonts) · 요점 500, 600, 700 · 산세리프체 시스템 인터페이스 - 탐색 메뉴, 본문, 버튼, 소제목 및 섹션 제목. 굵기: 본문 및 컨트롤은 500, 소제목 및 탐색 메뉴 강조 표시는 600, 섹션 제목은 700. 강한 음의 자간은 모든 크기의 기하학적 도형을 압축하여 인터페이스에 간결하고 전문적인 느낌을 줍니다.
- Instrument Serif — 대사: Playfair Display · 요점 400 · 제목과 사설 콘텐츠 전용으로 디자인된 세리프 서체입니다. 400 굵기와 -0.025em의 자간은 우아하고 기울어진 듯한 느낌을 주며, 이는 Inter 서체의 산업적인 기하학적 형태와 대비를 이룹니다. Inter 서체의 특징적인 기법은 산세리프 서체 페이지 내에 세리프 서체를 사용한 단어나 구절 하나를 배치하여 제목 스타일보다는 시각적 구두점 역할을 하도록 하는 것입니다.
- Fragment Mono — 대사: JetBrains Mono · 요점 400 · 인라인 코드와 유사한 요소, 태그 레이블 및 기술 설명에 사용되는 강조 모노체입니다. 디자인 도구가 "이것은 기계 출력입니다"라고 표시하고자 하는 함수 목록 및 인라인 주석에 드물게 사용됩니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 8px |
| 버튼 반경 | 16px |
| 카드 반경 | 24px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 64px |
| 페이지 너비 | 1200px |
AI가 Subframe 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- monopo saigon — 편집자의 침묵 뒤에서 흐르는 액체처럼 영롱한 빛—녹아내리는 빛 위에 떠 있는 흑백의 편집 갤러리
- Hyer Aviation — 조종석의 황혼녘, 양피지 위로 희미한 새벽 하늘이 동체 크기의 세리프체 로고와 어우러지고, 따뜻한 흙빛 포인트 하나가 단조로운 단색의 분위기를 깨뜨린다.
- OFF+BRAND. — 따뜻한 양피지 위에 놓인 무지갯빛 구체
- Seed — 실험실 유리 아래에 있는 살아있는 유기체
- Eindhoven Design District — 흰 종이 위에 쓰인 편집상의 잔혹함은, 최소한의 사진과 절대적인 절제미를 바탕으로 큰 활자체로 표현된 도시 디자인 선언문이다.
- Miranda — 밝은 크림색 배경에 클래식한 와이드 포맷 서체가 돋보이는 디지털 시대의 신문 사설입니다.
- Monocle — 크림색 용지에 인쇄된 고품질의 대형 신문. 모든 칼럼이 제자리를 차지할 만한 가치가 있도록 세심하게 구성된 편집 내용과, 페이지에 의미 있는 색상 하나만이 사용됩니다.
- Agencja brandingowa — 흰색 톤에 검은색 잉크로 타이포그래피를 적용한 편집 갤러리
- Websmith Studio — 크림색 종이에 비치는 아침 햇살
- Aspelin Reitan — 촛불 아래 건축 아카이브 - 이 페이지는 따뜻한 크림색 벽에 고정된 건축 공간 포트폴리오처럼 보이며, 각 이미지 위에는 페이지 전체 너비에 걸쳐 한 줄의 흰색 텍스트가 떠 있는 듯합니다.
- Public — 차가운 대리석 위에 흑백으로 인쇄된 화보. 마치 흑백 캔버스처럼 보이는 이 화보에서 300포인트 세리프체 글꼴과 단 하나의 보라색 포인트가 모든 색감을 표현하고 있다.
- Motto — 종이 위의 타이포그래피적 모놀리스 – 새하얀 종이 위에 당당하게 자신을 드러내는 하나의 목소리