
Creative Giants
크림색 용지에 인쇄된 대형 편집 포스터
Creative Giants는 마치 코드로 구현된, 크기가 큰 아트북의 한 페이지처럼 보입니다. 따뜻하고 부드러운 캔버스에 얇은 여백, 그리고 헤드라인이라기보다는 포스터처럼 느껴질 정도로 큰 글자체가 특징입니다. 전체 시스템은 여백과 단일하고 가벼운 크기(300)를 활용하여 작동합니다. 헤드라인은 64~84px 크기로 거의 들리지 않을 정도로 작으며, 글자 크기가 커질수록 자간이 급격히 줄어들어(-0.04em) 단어가 마치 조각된 것처럼 보입니다. 색상은 작고 채도가 높은 붓 터치처럼 배치되어 있습니다. 생생한 보라색, 진한 청록색, 밝은 파란색, 핫핑크, 민트색, 남색은 배경을 채우는 대신 카드 표면이나 포인트 색상으로 나타납니다. 인터랙티브 요소는 크림색 배경 위에 모서리가 완전히 둥근(1440px) 검은색 도형으로 표현되었으며, 크롬 요소는 거의 보이지 않습니다. 둥근 로고 하나와 "메뉴" 버튼이 흰색 공간에 떠 있는 듯한 모습입니다. 시각적 콘셉트는 제작 스튜디오의 콘택트 시트와 같습니다. 커다란 헤드라인 하나, 전체 너비의 사진 하나, 간결한 메타텍스트 한 줄. 모든 페이지는 이와 같은 간결한 스타일을 따라야 합니다.
페이지 레이아웃은 콘텐츠를 최대한 활용하는 방식입니다. 최대 너비 컨테이너가 없으며, 콘텐츠는 좌우 여백(모바일 16~32px, 데스크톱 32px 이상)을 두고 페이지 전체 너비를 차지합니다. 메인 제목은 화면의 약 40%를 차지하는 크고 눈에 띄는 헤드라인("CREATIVE GIANTS", 84px)이며, 그 바로 뒤에 왼쪽 하단에 메타 태그가 있는 전체 너비 사진과 제목 오버레이가 배치됩니다. 섹션 구성은 단일 레이아웃으로, 각 섹션은 짧은 대문자 텍스트와 설명으로 시작하며, 48~64px의 공백으로 구분됩니다. 강조된 네이비 잉크 카드 하나를 제외하고는 밝은 색과 어두운 색 띠가 교차하지 않습니다. 콘텐츠는 왼쪽 정렬되며, 메인 제목을 제외하고는 가운데 정렬된 블록이 없습니다. 뉴스/사례 연구 섹션은 오른쪽에 화살표 블록이 있는 3단 그리드 형식의 카드 레이아웃을 사용합니다. 탐색은 상단 헤더 하나만으로 이루어지며, 사이드바나 헤더 외에 고정된 요소는 없습니다. 전체적인 레이아웃은 여유롭고 편집 스타일과 일관성이 있습니다. 각 섹션은 숨 쉴 공간이 있으며, 여백이 주요 구조적 요소로 작용합니다.
편집 사진이 디자인의 중심을 이룹니다. 이미지는 페이지 전체 너비를 차지하며, 날카로운 각도로 촬영되었고, 겹침이나 둥근 마스크 처리가 없습니다. 주름진 손, 공공 설치물, 자연스러운 사람들의 모습 등 다큐멘터리적이고 분위기 있는 스타일을 지향하며, 연출된 제품 사진은 전혀 사용하지 않습니다. 이미지는 항상 큰 크기(전체 너비 뷰포트 또는 카드 전체를 채움)로 표시되므로 디자인의 핵심은 사진이지 사용자 인터페이스가 아닙니다. 일러스트레이션, 3D 모델 또는 제품 목업은 사용하지 않습니다. 아이콘은 최소화되어 있습니다. 작은 원형 로고 하나, 캐러셀 컨트롤의 윤곽선 셰브론, 그리고 1픽셀 윤곽선의 가벼운 UI 아이콘이 사용됩니다. 이미지 밀도는 이미지 자체에 따라 결정되며, 텍스트는 사진 아래 또는 위에 눈에 띄지 않는 주석 레이어 역할을 합니다.
팔레트
상표
- Magenta Bloom
#8a0467— 분홍색은 장식적인 디테일을 위한 보조적인 색상으로 사용되거나 사용 빈도가 낮은 검색어를 강조하는 데 사용될 수 있습니다. 행동 유도 문구의 주요 색상으로 사용해서는 안 됩니다. - Forest Teal
#03624c— 카드 프레임 및 장식 요소에 어울리는 풍부한 브랜드 포인트 색상으로, 마젠타 블룸과 함께 사용하면 투톤 마감 효과를 연출할 수 있습니다.
중립적
- Bone White
#fffef7— 페이지 캔버스, 판지 표면, 어두운 부분의 텍스트는 순수한 #ffffff 색상을 대체하는 따뜻하고 부드러운 크림색으로 처리되어 전체 시스템에 종이로 인쇄된 듯한 느낌을 줍니다. - Ink Black
#000000— 어두운 색상은 중립적인 텍스트와 아이콘을 보완하고 강한 대비를 만들어냅니다. 하지만 클릭 유도 버튼(CTA)의 주요 색상으로는 사용하지 않는 것이 좋습니다. - Graphite
#666666— 본문의 보조 텍스트, 캡션, 메타데이터 및 보충 텍스트는 배경으로 밀려나 주요 텍스트가 두드러지게 표시됩니다. - Ash
#aaaaaa— 입력 필드 테두리, 비활성 링크 색상, 보조 구분선 - 필요하지 않을 때는 사라지는 부드러운 구조적 회색입니다. - Charcoal Scale
#4d4c4a— 목록 테두리에는 중간 정도의 중립적인 색상을 사용하고, 어두운 그라데이션 경로에는 미묘한 대비 효과를 주어 청회색보다는 따뜻한 회색에 가깝게 했습니다. - Powder Blue
#a5c8eb— 엽서 배경, 흐릿한 배경, 은은한 일러스트 채우기처럼 부드러운 색상으로 포인트를 주면 따뜻한 배경과 어우러져 차분한 분위기를 연출할 수 있습니다.
타이포그래피
12px에서 84px로 · 7단계
- Switzer — 대사: Inter (300 · 요점 300, 400 · 단일 글꼴 시스템: 모든 표시 요소와 제목(12~84px)에는 300 두께, 본문, 메타데이터 및 UI 컨트롤에는 400 두께를 사용합니다. 64~84px 크기에서는 300 두께를 사용하는 것이 바람직합니다. 대부분의 시스템에서는 이 크기에 700~800 두께의 굵은 글꼴을 사용하는데, 밝은 톤의 Switzer 글꼴은 얇은 선을 유지하여 마치 크림색 캔버스에 에어브러시로 그린 듯한 느낌을 줍니다. 크기가 커질수록 자간을 좁히면(-0.04em(84px), -0.018em(14px)) 내부 공간이 넓어 보이면서도 듬성듬성한 느낌을 주지 않습니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 8px |
| 버튼 반경 | 1440px |
| 카드 반경 | 0px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 64px |
AI가 Creative Giants 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- ElevenLabs — 따뜻한 크림색 톤의 사진 에세이에 은은한 제목이 더해졌습니다. 바우하우스 스타일의 노트는 달걀 껍질색 종이에 검정 잉크를 사용하고, 보라색과 주황색으로 포인트를 주어 제품을 돋보이게 합니다.
- monopo saigon — 편집자의 침묵 뒤에서 흐르는 액체처럼 영롱한 빛—녹아내리는 빛 위에 떠 있는 흑백의 편집 갤러리
- Awesomic — 편집용 아연 메시 소재에 색종이 조각을 연상시키는 주황색 구두점이 있습니다.
- Monad — 따뜻한 양피지에 대한 편집 기술 저널
- Dub — 링크의 무광택 쌀 종이 재질 컨트롤 패널
- Seline Analytics — 따뜻한 종이 위에 놓인 조용한 분석표
- Notion — 한낮의 따스한 햇살 아래 따뜻한 종이 노트
- Hyer Aviation — 조종석의 황혼녘, 양피지 위로 희미한 새벽 하늘이 동체 크기의 세리프체 로고와 어우러지고, 따뜻한 흙빛 포인트 하나가 단조로운 단색의 분위기를 깨뜨린다.
- Anthropic — 따뜻한 느낌의 양피지에 인쇄된 과학 분야 저널—차분한 상아색 표면, 세리프체로 쓰인 편집 제목, 그리고 필요한 순간에만 나타나는 단 하나의 점토색 포인트.
- Calendly — 차가운 대리석 위에 진한 파란색 잉크
- Augen Pro — 애플의 하얀색 프레젠테이션은 단색 공간에 깔끔하고 가벼운 느낌의 강렬한 파란색을 유일한 포인트 색상으로 사용했습니다.
- OFF+BRAND. — 따뜻한 양피지 위에 놓인 무지갯빛 구체