탐색Landing개발자 도구 랜딩 — 다크 벤토 기능 섹션

1 / 1

검정 배경에 중앙 정렬 헤드라인을 두고, 그라데이션 아이콘 연동 타일·비포 애프터 코드 카드·이슈 목록·다운로드 버튼 카드를 크기가 다른 벤토 그리드로 배치한 다크 기능 섹션이다.

Landing

개발자 도구 랜딩 — 다크 벤토 기능 섹션

2026-03-11 · 이미지 1

AI 분석

어두운 배경 위에 크기가 다른 카드를 벤토 그리드로 배치한 개발자 도구 기능 소개 섹션이다.

중앙 정렬 제목과 부제 아래로 폭과 높이가 서로 다른 카드를 벤토 그리드로 짜 넣은 비대칭 레이아웃이다. 거의 검정에 가까운 배경과 한 단계 밝은 카드 면으로 층을 나누고, 산세리프 제목은 크게, 설명 문구는 회색 저채도로 눌러 대비를 만든다. 연동 상태를 보여주는 그라데이션 아이콘 타일, 비포·애프터 코드 스니펫 카드, 심각도별 이슈 목록, 알약형 태그와 다운로드 버튼이 카드마다 다른 밀도로 들어가 있고, 코드 패널이 이웃 카드 위로 겹쳐 떠 있는 오버레이 처리가 눈에 띈다. 기능 나열을 표가 아닌 화면 조각으로 보여주는 SaaS 랜딩 구성과 다크 UI의 카드 계층 처리 참고로 쓸 만하다.

dark-mode · minimal · techy · high-contrast

ai-tool asymmetric badge bento-grid button card dark-mode devtool high-contrast iconography overlay-panel progress saas

claude-opus-5 · 2026-09-07 18:06 · 신뢰도 0.90