Bpco
콘크리트 슬래브로 만든 타이포그래피 선언문. 흑백으로 구성된 보도 자료에서, 과장된 헬베티카 글꼴은 사진을 모방하고, 유일한 질감은 주요 글꼴 아래에 구겨진 종이 한 장이다.
Bigpicture는 웹페이지를 마치 인쇄된 보도자료를 원지 위에 펼쳐놓은 것처럼 다루는 흑백 편집 시스템을 사용합니다. 인터페이스는 색상을 전혀 사용하지 않고, 오직 검정 잉크, 여백, 가는 선, 그리고 구겨진 종이의 균일한 질감만을 이용하여 분위기를 조성합니다. 타이포그래피는 핵심 요소입니다. 제목은 Helvetica Neue 700 서체를 사용하여 274px 크기로 표시하고, 과감한 네거티브 자간을 적용하여 모든 화면에서 텍스트가 시각적으로 가장 두드러지게 나타납니다. 고정폭 캡션([01-N INTRODUCTION], CREATIVE/AGENCY)은 인쇄물 스타일의 서명 역할을 하며, 네모난 광택 아이콘이 섹션 사이의 유일한 장식 요소로 사용됩니다. 레이아웃은 넉넉하고 자가 출판을 연상시킵니다. 섹션 간 72px 간격, 144~250px의 가로 여백, 그리고 모서리 여백이 288px인 전체 너비 이미지 블록은 페이지가 소프트웨어가 아닌 갤러리 벽처럼 숨 쉬는 듯한 느낌을 줍니다.
최대 너비는 약 1440px이며, 섹션 밀도에 따라 가로 여백이 40~144px로 중앙에 배치됩니다. 메인 이미지는 전체 너비의 이미지 위에 텍스트가 겹쳐진 형태입니다. 이미지 아래에는 중앙 정렬된 텍스트 블록과 화면 전체를 채우는 타이포그래피가 번갈아 나타납니다. 페이지 하단 60%는 스크롤 가능한 긴 선언문으로, 광택 있는 구분선으로 구분된 행들 사이에 큰 글씨가 전체 화면 너비를 채우며 한 줄씩 표시됩니다. 내비게이션은 전체 너비 패널이 아닌 화면 상단 중앙에 위치한 플로팅 바 형태입니다. 푸터는 얇은 테두리가 있는 단일 스트립입니다.
메인 화면에는 사진이 주를 이루는데, 커다란 건축물과 옥외 광고 이미지(빌보드, 건물 외장재, 거리 광고)가 둥근 모서리로 전체 크기로 표시됩니다. 페이지 하단에는 구겨진 종이 질감이 겹쳐져 촉각적인 느낌을 주고 인쇄된 잡지 같은 인터페이스를 연출합니다. 선으로 그려진 작은 지구본 아이콘이 유일한 일러스트레이션 요소입니다. 3D 효과나 추상적인 그라데이션, 제품 목업은 없고, 이미지는 다큐멘터리적이고 산업적인 성격을 띠며, 광고 대행사의 옥외 광고 포트폴리오를 기반으로 합니다.
팔레트
중립적
- Press Ink
#121212— 본문 텍스트, 가는 선, 섹션 테두리, 아이콘 윤곽선 및 바닥글 텍스트는 모두 전체 전경 정보의 95%를 전달하는 단일 어두운 색조를 사용합니다. - Paper White
#ffffff— 페이지 캔버스, 판지 표면, 내비게이션 바 배경, 제목 프레임이 있는 표면. - Newsprint
#f1f1f1— 섬세한 표면 채색, 부드러운 테두리, 얇은 구분선, 구겨진 종이 질감 뒤에 숨겨진 색조. - Foil Gray
#e1e1e1— 밝은 프레임, 아이콘 윤곽선 형태의 포인트, 추가 구분선. - Mute Gray
#c5c5c5— 보조 텍스트, 장애 상태, 저대비 표면선
타이포그래피
13픽셀에서 274픽셀로 · 6단계
- Helvetica Neue — 대사: Inter · 요점 400, 500, 700 · 범용 도구 - 본문 텍스트는 17px/1.29, 표시 제목은 75~274px, 가장 큰 크기에서는 -0.04em의 자간, 탐색 레이블은 15px로 설정합니다.
- PPSupplyMono — 대사: JetBrains Mono · 요점 400 · [01-N INTRODUCTION]과 같은 메타 태그 및 괄호 안의 레이블, 그리고 섹션 태그(ADVERTISING, CREATIVE/AGENCY, OFFLINE MARKETING)는 헬베티카의 단조로움을 깨뜨리는 유일한 타이포그래피적 요소입니다.
- PPSupplySans — 대사: Inter · 요점 400 · 다른 산세리프 글꼴이 필요한 푸터의 보조 탐색 메뉴 및 마이크로카피.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 50px |
| 버튼 반경 | 8px |
| 카드 반경 | 20px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 72px |
| 페이지 너비 | 1440px |
AI가 Bpco 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Steep — Warm Paper에서 세리프 글꼴 분석
- Newformcap — 탈의실에 있는 편집 신문
- Claude — 따뜻한 양피지에 인쇄된 유물—뼈로 만든 종이에 잉크로 인쇄된 것, 점토만이 유일한 색채의 흔적이다.
- 11x– Digital workers — 영화 같은 편집의 황무지—풍경의 파노라마 사진과 고급 잡지 화보처럼 읽히는 웅장한 세리프체 헤드라인이 어우러져 있다.
- Revolut — 구름 사진을 바탕으로 한 흑백 편집 디자인 - 흰색 잉크, 약통 단추, 회색조의 세상 속에 돋보이는 단 하나의 파란색 줄무늬.
- Scheduling — 크림색 종이에 인쇄된 편집용 잉크
- Titan — 따뜻한 색조의 흑백 아카이브
- Programa — 정오의 스위스 디자인 스튜디오. 하얀 갤러리 벽은 노란색 테이블 램프 하나로 환하게 밝혀져 있다. 모든 것이 회색 톤으로 이루어져 있다가 버튼, 아이콘, 또는 포인트가 눈길을 사로잡으면 그 하나의 노란색이 공간 전체의 분위기를 결정짓는다.
- Sana Agents — 흰색 배경에 라임 스파클이 있는 화보
- Visual — 따뜻한 느낌의 사미즈다트(비밀 출판물). 크림색 종이, 세리프체 포스터, 흑백 여백 메모, 노란색 마커 한 개.
- Midday — 양피지 재질의 편집 브로셔 - 따뜻한 돌색 배경에 72px 세리프체 제목, 산세리프체 본문(간격 조정), 알약 모양 컨트롤, 그림자 없음
- Chat for impact — 숲처럼 푸른색으로 꾸며진 병원, 파스텔톤의 방들