FRANKY'S
스케이트샵 카운터에 놓인 레트로 게임 키오스크
프랭키의 시각적 언어는 레트로 아케이드 게임장과 스케이트보드 숍을 결합한 듯한 모습입니다. 따뜻한 크림색 바탕(#f3e5df)은 선명한 픽셀 테두리로 둘러싸여 있고, 어디에나 존재하는 흑백 체커보드 패턴과 웹사이트의 모든 단어에 사용된 단일 픽셀 폰트인 'Arcade'가 특징입니다. 색상 팔레트는 의도적으로 최소화되어 있으며, 단 두 가지 유색(간판의 신호 주황색 #faa21f와 구매 버튼의 풍부한 녹색 #128e44)만 사용되었습니다. 전체적인 색상 계층 구조는 'Arcade' 폰트의 두께를 400에서 700으로 늘리고 크림색 배경에 검은색을 사용하여 표현됩니다. 표면은 평평하고 단일한 느낌을 주며, 깊이감은 버튼에 삽입된 1픽셀 두께의 크림색 선과 체커보드 패턴의 명암 변화를 통해서만 구현됩니다. 구성 요소들은 1990년대 상점 간판 이미지를 연상시킵니다. 두꺼운 검은색 테두리, 6~12픽셀의 좁은 테두리 곡률, 4~8픽셀의 콤팩트한 여백, 그리고 크롬 요소라기보다는 픽셀화된 아이콘처럼 보이는 3D/AR 토글 버튼이 특징입니다. 새로운 페이지들은 아케이드 게임 같은 분위기를 유지하도록 디자인되었습니다. 주황색 스크롤 텍스트를 제외하고는 그라데이션이 없고, 부드러운 그림자도 없으며, 장식적인 서체도 없습니다. 크림색 종이, 검은색 픽셀화된 선, 그리고 따뜻한 주황색 한 가지 색상만 사용되었습니다.
데스크톱에서 제품 페이지는 최대 너비 1200px의 전체 너비 중앙 정렬 레이아웃으로 표시됩니다. 위에서 아래로의 레이아웃 순서는 다음과 같습니다: 주황색 스크롤 텍스트 → 검은색 선이 있는 크림색 헤더 → 2단 분할(홈페이지 55%는 체커보드 패턴, 45%는 2단 그리드 형태의 제품 카드) → 푸터의 크림색 줄무늬. 모바일에서는 홈페이지가 전체 너비의 체커보드 패턴으로 축소되고 그리드는 단일 열 레이아웃으로 변경됩니다. 카드는 회색 Pixel(#e5e7eb) 구분선을 사이에 두고 2단 그리드에 고르게 배치됩니다. 섹션 간 간격은 최소화(43~61px)되어 있으며, 페이지 전체 너비를 차지하는 어두운 줄무늬는 사용하지 않고 크림색 바탕이 끊김 없이 표시됩니다.
깔끔한 크림색 배경 위에 모자들이 놓인 사진이 중앙에 배치되어 있고, 그 아래에는 은은한 숯검정색 그림자가 드리워져 있다. 라이프스타일도, 모델도, 맥락도 없이 모자가 주인공이다. 모자 뒤의 체크무늬 패턴은 그래픽 표면 역할을 한다. 일러스트레이션도, 증강 현실 토글 버튼을 제외한 3D 렌더링도, 로고의 픽셀화된 십자가를 제외한 장식 아이콘도 없다.
팔레트
상표
- Marquee Orange
#faa21f— 화면 상단의 알림 표시줄, 강조 요소, 브랜딩. - Buy Green
#128e44— "장바구니에 담기" 버튼이 채워져 있습니다. 녹색으로 표시된 유일한 구매 관련 동작입니다.
중립적
- Arcade Cream
#f3e5df— 페이지 배경, 제품 카드 표면, 버튼 삽입 부분. - Ink Black
#000000— 본문, 바둑판식 레이아웃, 모든 UI 테두리, 카드 윤곽선, 아이콘 테두리. - Pixel Gray
#e5e7eb— 얇은 테두리, 카드 구분선, 격자 셀 사이의 구조적 규칙. - Charcoal
#333333— 보조 표면 톤, 바둑판 무늬 그림자 사각형, 그림자 색상 - Carbon
#151515— 풍부한 중성 색조는 일러스트레이션을 채우거나 가장 촘촘한 체커보드 타일을 표현하는 데 적합합니다. - Muted Gray
#737373— 버튼과 본문 텍스트의 비활성화/음소거
타이포그래피
10에서 18px로 · 4단계
- Arcade — 대사: VT323 · 요점 400, 700 · 인터페이스 전체에 단일 글꼴이 사용됩니다. 모든 제목, 레이블, 가격, 버튼, 본문 텍스트 및 아이콘은 Arcade 글꼴입니다. 400에서 700으로의 전환만이 계층 구조를 만드는 유일한 요소이며, 두 번째 글꼴을 사용하면 키오스크의 느낌이 깨지게 됩니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 4-8px |
| 버튼 반경 | 6px |
| 카드 반경 | 12px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 43-61px |
| 페이지 너비 | 1200px |
AI가 FRANKY'S 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- 099 SUPPLY — 흑백 오브제로 가득 찬 갤러리 벽
- teenage engineering — 스튜디오 조명 산업 카탈로그에서는 제품이 페이지에서 유일하게 중요한 요소이며, 나머지 모든 내용은 그 주변에서 논의됩니다.
- Custo — 건메탈 색상의 갤러리에 거대한 글꼴이 눈에 띈다. 은은한 회록색 톤의 쇼룸에는 어두운 색상의 오브제 하나와 57px 크기의 글꼴이 그 자체로 모든 것을 말해준다.
- Walden — 숲 바닥의 고요함 - 모든 제품은 돌멩이이고, 모든 픽셀은 이끼와 고요함이다.
- Fiverr — 이 디지털 바자회의 핵심은 어두운 극장 무대를 배경으로 생동감 넘치는 녹색이 강렬하게 빛나는 모습입니다. 네온 그린 점 하나가 로고의 중심 역할을 하며, 나머지는 흑백으로 디자인되어 제공되는 서비스의 매력을 강조합니다.
- Peloton — 칠흑 같은 활주로 위의 붉은 신호등. 넓고 어두운 전시 공간을 가로지르는 선명한 빨간색 CTA 표지판 하나가 깔끔한 흰색 제품 전시실로 이어지는 피트니스 쇼룸.
- HOUSEPLANT — 린넨 종이에 견과류가 있는 서점
- Adam Lippes — 크림색 종이 위에 흑백으로 인쇄된 편집 스튜디오 – 색상 팔레트가 아닌 레이아웃 그리드만이 유일한 장식인 보그 화보.
- Elektron — 한밤중의 장비 제어판은 거의 검은색 캔버스처럼 보이며, 제품 사진은 돋보이지만 인터페이스는 거의 보이지 않습니다.
- Sigmaphoto — 정밀 기기 모노크롬 갤러리는 조용하고 하얀 공간으로, 이곳에서 중요한 유일한 색은 당신의 행동을 촉구하는 색뿐입니다.
- Channel Studio — 산호색 전등갓 하나가 있는 스튜디오 사진 현상소
- Specht Studio — 은은한 호기심을 자극하는 작품들로 가득 찬 갤러리 벽. 스튜디오 자체의 크롬 마감은 흰색 표면에 검은색 글씨로 이루어져 있으며, 시각적인 화려함은 오로지 프로젝트의 타일 작업에만 집중되어 있다.