Glossier
햇살 아래 사진 촬영 - 흰 종이, 검은 잉크, 밝은 노란색 포인트 하나
글로시에(Glossier)는 마치 디지털 뷰티 매거진처럼 기능합니다. 흰색과 검은색의 거의 단색 캔버스에 브랜드 로고이자 유일한 행동 유도 버튼 역할을 하는 생동감 넘치는 노란색 포인트가 돋보입니다. 편집은 절제되어 있습니다. 큼직한 헤드라인, 넉넉한 텍스트 공간, 감성적인 무게감을 전달하는 전면 라이프스타일 사진이 사용되었으며, 실용적인 구성으로 제품 카드는 평면적이고 테두리는 얇으며 장식은 전혀 없습니다. 노란색은 브랜드의 보조 색상이 아니라 그 자체이며, 절제된 방식으로 사용되어 마치 카메라 플래시처럼 강렬한 인상을 줍니다. 다른 모든 요소는 배경으로 자연스럽게 녹아듭니다. 뉴트럴 컬러는 은은한 블러시 톤이 감도는 따뜻한 회색 계열이며, 테두리는 은은하고, 타이포그래피는 촘촘하고 압축적입니다. 그 결과, 자신감 넘치면서도 절제된, 타협 없는 모던함을 보여주는 매장이 탄생했습니다.
이 페이지는 세로로 배열된 전체 화면 섹션들로 구성되어 있으며, 각 섹션은 독립적인 편집 페이지처럼 디자인되었습니다. 메인 섹션은 전체 너비의 사진에 흰색 오버레이(왼쪽 상단)가 떠 있는 형태로 배치되어 있고, 페이지 하단 전체를 차지하는 커다란 노란색 로고가 있습니다. 메인 섹션 아래에는 전체 화면 이미지와 개별 카드 그리드가 번갈아 나타납니다. 스킨케어/메이크업 카테고리는 두 개의 열로 나뉘어 있으며, 이미지 비율은 50/50으로 동일하게 유지됩니다. 각 열 사이에는 눈에 띄는 테두리가 없고, 이미지들을 연결하는 선으로만 구분되어 있습니다. 제품 카탈로그는 #f7f7f7 색상의 캔버스에 정사각형 카드들이 4열 그리드 형태로 배열되어 있습니다. 내비게이션은 상단에 미니멀한 바가 있고 그 위에 보조 광고 스트립이 있습니다. 섹션 사이의 간격은 64px로 다소 넓지만, 구분선이나 배경색 변화 없이 부드럽게 전환됩니다. 다만, 따뜻한 색감의 푸터는 예외입니다. 전체적인 흐름은 사진, 텍스트, 사진, 그리드, 사진 순으로, 마치 패션 잡지를 넘기는 듯한 느낌을 줍니다.
사진은 주된 시각적 언어입니다. 전체 페이지는 라이프스타일 이미지와 인물 사진으로 가득 차 있습니다. 따뜻한 황금빛 조명, 부드러운 피부 클로즈업, 햇빛을 배경으로 제품 병을 든 손 등 다채로운 색감이 돋보입니다. 사진의 색감은 따뜻하고 채도가 낮은 톤으로, 복숭아빛 하늘, 테라코타 톤의 피부, 깊은 바다색 등이 사용되었습니다. 흰색 텍스트 카드나 노란색 로고를 제외하고는 이미지가 모서리가 둥글거나 프레임, 겹쳐진 부분 없이 페이지 전체를 차지합니다. 카탈로그 카드에 있는 제품 사진은 평평한 조명 아래 순백색의 이음새 없는 배경에서 촬영되었습니다. 이미지와 텍스트의 비율은 약 70:30으로, 이미지는 감정을 전달하고 텍스트는 기능을 설명합니다. 삽화, 추상적인 그래픽, 3D 렌더링은 전혀 사용되지 않았습니다.
팔레트
상표
- Glossier Yellow
#fff116— 노란색은 장식적인 디테일을 위한 보조적인 강조 색상으로 사용되거나 사용 빈도가 낮은 검색어를 강조하는 데 사용됩니다. 행동 유도 버튼의 주요 색상으로 사용해서는 안 됩니다.
중립적
- Ink
#000000— 본문 텍스트, 탐색 링크, 기본 텍스트, 바닥글 텍스트, 아이콘 윤곽선, 얇은 테두리; 주된 서체 및 구조적 색상. - Paper
#ffffff— 제품 카드 표면, 채워진 영역, 돌출된 패널; 쌓아 놓은 카드 더미에서 가장 밝은 표면. - Fog
#f7f7f7— 페이지 캔버스, 섹션 배경, 페이지 내 이미지 간 전환 효과 등 웹사이트 전체가 위치하는 기본 표면을 구성합니다. - Blush
#faf2f4— 바닥글 배경, 부드럽고 따뜻한 느낌의 섹션 구분선; 은은한 분홍빛이 도는 흰색 색조가 페이지 하단에 따뜻함을 더합니다. - Mist
#f0f0f0— 눈에 거슬리지 않는 배경을 만들고 섹션을 구분하는 데 사용할 수 있는 가벼운 보조 색상입니다. 행동 유도 문구의 주요 색상으로 사용해서는 안 됩니다. - Ash
#e8e8e8— 입력 필드 테두리, 아이콘 배경, 얇은 구분선, 카드 및 폼 요소의 구조적 테두리 색상.
타이포그래피
12px에서 32px로 · 5단계
- Apercu — 대사: Inter · 요점 400, 500, 700 · 기본 서체는 사용자 인터페이스 전체에 걸쳐 사용되며, 본문은 16px/400, 내비게이션 및 캡션은 12~14px/500, 소제목은 20px/500, 기사 제목은 32px/700으로 설정되었습니다. Apercu의 기하학적이고 인본주의적인 디자인은 브랜드에 간결하고 현대적인 스타일을 부여합니다. 거의 0에 가까운 자간(0.002~0.003em)은 서체를 여유롭고 친근한 느낌보다는 간결하고 잡지 같은 느낌으로 만듭니다. 700 굵기는 UI 요소가 아닌 기사 내 표시 요소에만 사용됩니다.
- Apercu Mono — 대사: JetBrains Mono or IBM Plex Mono · 요점 400 · 주문 메타데이터, 추적 번호 및 코드 옆 라벨에 사용되는 미세한 실용적인 타이포그래피입니다. 고정폭 버전은 비례적인 본문 서체와 대비되어 기술적인 느낌을 자아냅니다.
- GTStandard-M — 대사: Inter · 요점 400 · GTStandard-M - 추출된 데이터에서 발견되었지만 AI가 설명하지 못했습니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 8px |
| 버튼 반경 | 0px |
| 카드 반경 | 0px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 64px |
| 페이지 너비 | 1440px |
AI가 Glossier 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Lightship — 탁 트인 도로를 담은 영화 같은 디오라마. 따뜻한 크림색 갤러리 벽에는 촘촘하게 걸린 커다란 풍경 사진들이 장식되어 있고, 액자에는 가늘고 희미하게 보이는 검은색 글씨가 새겨져 있으며, 밝은 오렌지색 포인트 하나가 마치 들판의 모닥불처럼 흑백의 풍경을 깨뜨리고 있다.
- Faire ES — 따뜻한 크림 도매 카탈로그
- Adanola — 흰 종이에 인쇄된 에디토리얼 룩북. 타이포그래피와 사진이 깨끗한 흰 표면 위에서 생동감 넘치게 어우러지는 패션 화보로, 검정 잉크로 인쇄된 타이포그래피와 은은한 시그니처 산세리프체(Favorit)가 브랜드의 전반적인 스타일을 반영합니다.
- Oura Ring — 은은한 햇살이 가득한 아늑한 오트밀 만들기 작업실
- Stykka — 하얀 조명 아래 스칸디나비아풍 작업실 – 사진만이 유일한 목소리로 들리는 조용하고 수공예적인 쇼룸
- DJI — 항공우주 산업을 위한 검은색 캔버스에 강렬한 파란색 하이라이트 하나만 더한 디자인
- Altitude Beverages — 흑백 잡지 지면. 사진만 남기고 모든 색상을 제거한 패션 잡지 지면을 상상해 보세요. 텍스트와 여백만으로 모든 이야기가 전달됩니다.
- AATHER — 펼친 손바닥과 하나의 불꽃 - 고요함 속에 담긴 조용한 사치
- Cowboy — 새하얀 도자기로 장식된 벨기에 자전거 갤러리. 무광 표면, 편집 자료에 사용된 큰 글꼴, 그리고 장식이 거의 없는 이 쇼룸은 시선을 자전거와 그 안에 담긴 물건들로 집중시킨다.
- Refero — 흰색 대리석 바탕의 편집 레이아웃 - 타이포그래퍼가 제작한 제품 페이지로, 세리프체로 된 헤드라인이 브랜드의 상징 역할을 하고 나머지 요소들은 눈에 거슬리지 않도록 디자인되었습니다.
- Face Formula — 스칸디나비아풍의 에디토리얼 인물 사진. 차분하고 잡지 스타일의 이 화보는 모델의 시선과 간결한 세리프체로 쓰인 헤드라인이 시원하고 안개 낀 배경을 배경으로 강렬한 인상을 남긴다.
- Shupatto — 흰색 대리석으로 된 박물관 진열장