Electronic Materials Office
숯으로 장식된 갤러리 안의 타오르는 불씨
전자재료 사무소는 심야 작업실과 같습니다. 무광택의 짙은 검정색 캔버스에 은은하게 빛나는 주황색 불씨 하나, 그리고 선언하기보다는 속삭이듯 말하는 서체가 어우러져 있습니다. 인터페이스는 각 화면을 어두운 스튜디오처럼 다룹니다. 키보드 사진만이 유일한 광원이며, UI는 이를 충실히 따릅니다. 200포인트 GT-Flexa 서체로 설정된 헤드라인은 넓은 여백에 떠 있는 듯하고, 본문은 의도적으로 작고 인간적인(Times) 느낌을 줍니다. 색상은 절제되어 사용되었습니다. 글자는 순백색, 링크는 은은한 보라색(#9e9eff), 그리고 페이지에서 30px의 은은한 빛을 내는 주황색(#f45500)의 클릭 유도 버튼이 있습니다. 구성 요소들은 20px 반경 안에 촘촘하게 배치되고, 테두리는 #9d9d9d 색상으로 거의 눈에 띄지 않으며, 유일한 그림자는 주요 클릭 유도 버튼 주변의 두 개의 색깔 있는 후광뿐입니다.
전체 너비의 짙은 회색 캔버스에 최대 너비(약 1200px)의 콘텐츠가 중앙에 배치됩니다. 메인 화면은 제품 비디오가 포함된 20px 반경의 미디어 카드로 시작하며, 이는 뷰포트 너비의 약 80%를 차지합니다. 그 바로 뒤에는 GT-Flexa 200 서체를 사용한 여러 줄짜리 헤드라인이 거의 전체 콘텐츠 너비까지 줄바꿈됩니다. 섹션 구성은 다음과 같습니다. Tobias 스타일의 대문자로 작성된 단일 제품 설명 섹션 다음에 제품 설명 카드가 2x2 그리드(데스크톱 기준)로 배열됩니다. 카드에는 1px #9d9d9d 테두리와 24px 간격이 사용됩니다. 각 섹션은 구분선 대신 48~128px의 짙은 회색 여백으로 구분되어 충분한 세로 여백을 제공합니다. 내비게이션은 상단에 고정된 투명 패널 하나로 구성되며, 숨겨진 링크 모음과 하나의 Ember 콜투액션 버튼이 있습니다. 사이드바, 메가 메뉴, 보조 내비게이션은 없습니다.
이미지는 제품 시연 목적으로만 사용됩니다. 완전히 검은색 배경에 Altar I 키보드를 클로즈업하여 촬영한 이미지로, 위에서 비추는 백라이트로 인해 키보드 케이스가 빛나고 키캡 가장자리가 빛을 반사하는 모습입니다. 일상생활, 사람의 손, 주변 환경은 전혀 포함되지 않았습니다. 이미지는 고대비의 어두운 색상으로 구성되어 있으며, 단색 팔레트에서 벗어난 유일한 색상은 키보드 자체의 주황색 전원 스위치로, Ember Orange의 슬로건을 반영합니다. 이미지는 정사각형 또는 16:9 비율이며, 항상 20px 반경의 여백을 두고 카드 가장자리를 넘어 배치됩니다(사진 주변에 여백이 없으며 텍스트는 가장자리 아래에 있습니다). 아이콘 스타일: 유일한 아이콘은 로고 앞에 있는 작은 채워진 원(●)이며, 로고는 두께 약 6px의 주황색 점 하나로 구성됩니다.
팔레트
상표
- Ember Orange
#f45500— 기본 액션 버튼은 채워진 색상으로 UI에서 유일하게 색상이 있는 표면이며, 항상 30px 두께의 주황색 테두리가 둘러싸고 있어 마치 필라멘트처럼 빛납니다. 기본 통화 버튼의 30px 외곽 광선은 엠버 오렌지 육각형 기호를 복제한 것이지만, 채우기가 아닌 그림자 형태로 존재하여 버튼이 내부에서 빛나는 것처럼 보이게 합니다.
중립적
- Studio Charcoal
#202020— 캔버스와 판지의 표면은 마치 어두운 갤러리의 바닥처럼 완전히 검지 않아서 눈이 부드러운 가장자리에 머물 수 있습니다. - Bone White
#ffffff— 본문, 이미지의 얇은 테두리, 그리고 드물게 반전된 표면이 사용됩니다. 전체 글꼴 계층 구조는 독립적으로 유지됩니다. - Ash Gray
#9d9d9d— 은은한 텍스트, 미묘한 카드 테두리, 그리고 비활성화된 캡션은 색 구성표에서 유일하게 중간 회색 계열이며, 흰색이 너무 강렬할 때 사용됩니다. - Mid Felt
#eaeaea— 반전 패널이나 모달 그리드에 사용할 수 있는 밝은 표면 워시 - 베이지색과 어두운 캔버스색의 중간쯤 되는 흰색 계열입니다. - Carbon
#000000— 가장 눈에 띄는 강조점은 숯 캔버스가 너무 밝아서 형태를 제대로 유지하지 못하는 부분에서 나타나는 아이콘의 획과 대비되는 프레임입니다. - Lavender Link
#9e9eff— 삽입된 링크의 색상과 추가 작업 프레임의 윤곽선은 따뜻한 주황색과 차분하고 시원한 대비를 이루어 짙은 회색 배경에서도 작업이 잘 보이도록 합니다.
타이포그래피
16픽셀에서 86픽셀로 · 8단계
- GT-Flexa — 대사: Inter (200/400) or Manrope (200/400) · 요점 200, 400 · 제목과 장식 요소에 주로 사용되는 기본 글꼴입니다. 200 두께는 24px 이상의 모든 제목에 적합하며, 이는 이 글꼴의 특징적인 스타일입니다. 68px와 86px 크기에서는 글자가 두드러지기보다는 마치 공기 속에 녹아드는 듯한 느낌을 줍니다. 400 두께는 부제목이나 카드 설명처럼 거의 눈에 띄지 않는 곳에 사용하기 적합합니다. 가장 큰 크기에서는 줄 간격이 1.0으로 줄어들어, 장식용 글꼴이 마치 공기 기둥처럼 겹겹이 쌓이는 효과를 냅니다.
- Tobias-light — 대사: Söhne Buch or Inter Tight · 요점 400 · 섹션 제목과 푸터 로고에 사용되는 보조 서체 스타일입니다. GT-Flexa 200보다 한 단계 낮은 자간을 사용하여 톤 대비를 만들어냅니다. Tobias는 건축적이고 표현적인 느낌을 주는 반면, GT-Flexa는 더 분위기 있는 느낌을 줍니다. 네거티브 자간은 Tobias Light의 넓은 비율을 좁아 보이게 합니다.
- Times — 대사: Source Serif 4 or PT Serif · 요점 400 · 본문과 제목 단락은 기하학적이고 장식적인 글꼴과 의도적으로 대비를 이루도록 세리프를 사용했습니다. 세리프는 본문 텍스트의 크기를 넘어서지 않으면서 제품 설명에 따뜻함과 편집상의 권위를 더합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 4-8px |
| 버튼 반경 | 20px |
| 카드 반경 | 20px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 48-128px |
| 페이지 너비 | 1200px |
AI가 Electronic Materials Office 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- OFFFICE : — 거대한 글꼴로 뒤덮인 누아르 갤러리
- Bibliothèque — 스포트라이트를 받는 검은색 정육면체 모양의 전시실 – 드넓고 어두운 홀 한가운데 홀로 빛나는 접시 하나
- 21 TSI — 진홍빛 공허, 하나의 실루엣 – 사용자 인터페이스가 분위기 속으로 사라지는 하이패션 화보
- Structured — 찰흙 같은 종이에 그려진 르네상스 갤러리
- CHAIBOY — 검은색 갤러리 벽에 조명이 비춰진 사진 한 장이 걸려 있다.
- Holiday 100 — 한밤중에 펼쳐지는 선물 갤러리—세리프체 헤드라인은 스포트라이트 역할을 하고, 어두운 캔버스는 벨벳 벽처럼 보이며, 각 제품 이미지는 신중하게 고른 액자처럼 걸려 있다.
- Apple (España) — 부드러운 자연광이 비추는 박물관 전시실은 매혹적이고 가벼운 하얀 공간으로, 은은하게 색이 들어간 벽을 배경으로 각 전시품이 스포트라이트를 받아 밝게 빛나고 있다.
- Analogue — 검은색 갤러리 진열장 – 상품들이 허공에 떠 있는 듯하다
- Apple (España) — 옵시디언 갤러리 쇼케이스는 칠흑 같은 배경을 바탕으로 티타늄 소재의 오브제 하나가 빛나는 어두운 전시 공간입니다.
- Studio Oker — 붉은색으로 포인트를 준 어두컴컴한 갤러리, 검은 벽으로 둘러싸인 작품 포트폴리오실에서 흰 글자는 마치 떠다니는 듯하고, 붉은색 한 줄기가 정적을 가르며 속삭인다.
- 099 SUPPLY — 흑백 오브제로 가득 찬 갤러리 벽
- Retool — 따뜻한 흑요석 작업장 - 정밀한 도구들이 놓인 작업대, 타오르는 불씨에 의해 밝혀진, 모든 것이 만들어지는 곳