Bang & Olufsen
도자기에 담긴 스칸디나비아 갤러리. B&O 페이지가 어두울 때는 작품이 마치 한밤중의 벽감 속 조각품처럼 빛을 발하고, 조명이 켜지면 하얀 실크 위에 떠 있는 듯하며, 그 어떤 것도 작품에 집중을 방해하지 않습니다.
뱅앤올룹슨은 갤러리나 박물관과 같은 원칙을 따릅니다. 거의 흰색에 가까운 도자기 캔버스 위에 제품들이 조각품처럼 떠 있는 듯한 모습으로 배치되어 있으며, 화면 전체를 뒤덮는 짙은 울트라마린 바이올렛이나 풍부한 테라코타 레드와 같은 색채 요소가 감정적인 악센트를 더합니다. 서체는 맞춤 제작된 네오 그로테스크 서체(BeoSupreme) 하나만 사용되어 그 자체로 의미를 전달합니다. 큰 화면에서는 거의 눈에 띄지 않고, 작은 라벨에는 넉넉한 굵기의 대문자가 사용되어 다른 서체는 필요하지 않습니다. 구성 요소는 최소화되어 있습니다. 반투명 알약 모양의 컨트롤, 얇은 테두리, 장식적인 그림자나 그라데이션 버튼, 아이콘은 없습니다. 그리드는 넉넉하고, 여백은 사치입니다. 각 제품은 마치 떠 있는 듯한 받침대 위에 놓여 있으며, 주변의 흰색 공간은 비어 있습니다. 색상은 마치 귀중한 재료처럼 사용되며, 나타날 때는 화면 전체를 차지합니다.
최대 너비 1440px의 컨테이너는 중앙에 배치되어 있으며, 가장자리에 25px의 가로 여백이 있습니다. 히어로 요소는 페이지 전체 너비를 차지하며(컨테이너 경계를 벗어남), 울트라마린 색상의 카메라 이미지는 페이지 가장자리까지 확장되어 있습니다. 제품 그리드는 4~5개의 열로 균등하게 배치되어 있으며, 각 열 사이의 간격은 25px이고 모바일 기기에서는 가로 스크롤이 가능합니다. 각 섹션은 흰색 배경과 전체 너비의 컬러 카메라 이미지가 번갈아 나타나며, 구성 순서는 다음과 같습니다: 흰색 제품 그리드 → 울트라마린 히어로 요소 → 흰색 제품 그리드 → 진한 빨간색 에디터 배너 → 흰색 제품 그리드 → 울트라마린 푸터. 내비게이션은 흰색 및 컬러 섹션 위에 떠 있는 미니멀한 상단 바 형태로 제공됩니다(어두운 배경에 흰색 텍스트). 페이지는 마치 숨 쉬는 듯한 느낌을 주며, 섹션 사이의 간격은 60~80px이고, 각 제품은 셀 내에서 충분한 공간을 확보하고 있으며, 정보 밀도가 낮습니다.
제품 사진은 유일한 시각적 요소이며, 라이프스타일 이미지, 모델, 환경적 맥락은 사용되지 않습니다. 제품은 소재(무광 알루미늄, 가죽 질감, 양극 산화 처리된 구리, 무광 실리콘)를 강조하는 스튜디오 조명을 사용하여 순전히 중립적인 배경(흰색, 검은색, 그라데이션 진한 파란색)에서 촬영됩니다. 크롭은 중앙에 맞춰 타이트하게 하고 주요 피사체를 강조합니다. 색상 표현은 소재에 맞게 차분하게 처리됩니다. 예를 들어 구리는 "골든 아워"가 아닌 구리 본연의 색상으로 표현됩니다. 보조적인 시각적 요소로는 풍부한 단색 배경(울트라마린, 테라코타 레드)을 배경으로 제품의 실루엣을 화면 전체에 배치하여 극적인 효과를 연출합니다. 아이콘은 얇은 1픽셀 선, 흰색 바탕에 검은색 또는 어두운 바탕에 흰색, 기하학적 형태, 채우기 없음, 다색 사용 금지 등의 특징을 가집니다.
팔레트
상표
- Ultramarine Velvet
#060daa— 페이지 상단과 하단의 배경 이미지, 페이지 전체 너비를 아우르는 극적인 섹션, 그리고 바닥글 채우기—풍부하고 거의 검정과 청자색이 섞인 색상으로 전체 프레임을 감싸 하나의 제품에 극적인 느낌을 더합니다.
중립적
- Porcelain Canvas
#ffffff— 페이지 배경 이미지, 제품 카드 디자인 및 탐색 모음은 모든 제품이 구축되는 기본 토대입니다. - Bone
#fcfaee— 따뜻한 중성톤 블록을 위한 보조 표면, 어두운 배경의 버튼 텍스트, 흰색이 밋밋하게 느껴질 때 사용할 수 있는 대안적인 캔버스. - Obsidian
#191817— 본문과 제품 설명 텍스트는 따뜻한 느낌의 거의 검정색에 가까운 색상으로, 흰색 배경에서 순수한 #000000 색상보다 더 부드러운 느낌을 줍니다. - Pure Ink
#000000— 아이콘 윤곽선, 마이크로태그, 은은한 테두리, 그리고 선명한 텍스트 대비. - Graphite
#555555— 보조 텍스트, 메타데이터, 가격표, 무음 보조 텍스트 - Mist
#e5e5e5— 입력 데이터 경계가 얇고 시스템 내 유일한 구조적 구분자입니다.
타이포그래피
12픽셀에서 36픽셀로 · 5단계
- BeoSupreme — 대사: Neue Haas Grotesk Display Pro (closest) · 요점 400, 500, 700 · 브랜드 아이덴티티 전체를 반영하는 단 하나의 폰트입니다. 제목 및 헤더에는 500~700 굵기, 24~36px 너비에 좁은 자간(-0.056em → -0.014em)을 사용하여 자신감 있고 간결한 헤드라인을 연출합니다. 본문 및 UI에는 400 굵기, 14~16px 너비, 일반 자간, 1.5~1.7줄 간격을 사용합니다. 마이크로라벨(내비게이션, 아이콘, "1925년 설립" 슬로건)에는 500 굵기, 9~12px 너비에 최대 +0.143em의 넓은 자간을 사용하고, 눈에 거슬리지 않는 구조적 주석으로 활용하기 위해 모두 대문자로 표시합니다. 이 폰트와 경쟁하는 다른 폰트는 없습니다.
- object-fit: cover; object-position: center; — 대사: Inter · 요점 400 · object-fit: cover; object-position: center; - 추출된 데이터에서 발견되었지만 AI에 의해 설명되지 않았습니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 8-16px |
| 버튼 반경 | 40px |
| 카드 반경 | 0px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 60-80px |
| 페이지 너비 | 1440px |
AI가 Bang & Olufsen 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Structured — 찰흙 같은 종이에 그려진 르네상스 갤러리
- Apple (España) — 부드러운 자연광이 비추는 박물관 전시실은 매혹적이고 가벼운 하얀 공간으로, 은은하게 색이 들어간 벽을 배경으로 각 전시품이 스포트라이트를 받아 밝게 빛나고 있다.
- Apple (España) — 옵시디언 갤러리 쇼케이스는 칠흑 같은 배경을 바탕으로 티타늄 소재의 오브제 하나가 빛나는 어두운 전시 공간입니다.
- 099 SUPPLY — 흑백 오브제로 가득 찬 갤러리 벽
- Custo — 건메탈 색상의 갤러리에 거대한 글꼴이 눈에 띈다. 은은한 회록색 톤의 쇼룸에는 어두운 색상의 오브제 하나와 57px 크기의 글꼴이 그 자체로 모든 것을 말해준다.
- Apple (España) — 화이트 박물관 갤러리, 정오
- VITURE — 한밤중 유리창 너머로 네온사인으로 제품 진열이 펼쳐집니다. 어두컴컴한 쇼룸에서 주황색 광선 하나가 어둠을 가르며 진열대 위의 안경을 비춥니다.
- HNST Studio — 녹슨 듯한 린넨 원단으로 꾸며진 아늑한 스튜디오는 슬로우 패션 갤러리로, 크림색과 숯색으로 이루어진 수도원 같은 인테리어에 타오르는 듯한 오렌지색 포인트 하나가 따스함을 더해줍니다.
- OFFFICE : — 거대한 글꼴로 뒤덮인 누아르 갤러리
- ARTU — 흰 종이 위에 갤러리 벽을 꾸민 듯한 모습입니다. ARTU는 마치 박물관의 전시물처럼 제품을 보여주는 공간을 구성했습니다. 대형 제품 사진, 섬세한 표시, 그리고 맨 아래쪽에 살짝 덧칠한 라임색으로 구성을 완성했습니다.
- Specht Studio — 은은한 호기심을 자극하는 작품들로 가득 찬 갤러리 벽. 스튜디오 자체의 크롬 마감은 흰색 표면에 검은색 글씨로 이루어져 있으며, 시각적인 화려함은 오로지 프로젝트의 타일 작업에만 집중되어 있다.
- MindMarket — 크림색 종이에 인쇄된 아늑한 동화책은, 커다란 인터(Inter) 헤드라인과 오려낸 종이 캐릭터들이 햇살 가득한 부드러운 스티커 표면 위에 조화롭게 어우러진 친근한 편집 공간을 제공합니다.