Tile — 여백 넓은 흰 카드와 파랑·민트 링의 대시보드 스타일

Tile은 연한 회청색 바탕 위에 흰 카드를 타일처럼 고르게 깔고 파랑·민트 링으로 수치를 보여 주는 대시보드 스타일입니다. 가상의 부티크 호텔 3개 지점 운영 데이터로 만든 샘플 화면을 직접 조작해 볼 수 있습니다.

Tile — 여백 넓은 흰 카드와 파랑·민트 링의 대시보드 스타일

Tile은 연한 회청색 바탕 위에 흰 카드를 타일처럼 고르게 깔고, 얇은 선과 파랑·민트 링으로 수치를 보여 주는 대시보드 스타일입니다. 샘플은 가상의 부티크 호텔 3개 지점의 2026년 9월 운영 현황입니다. 위쪽 탭으로 지점을 바꾸고, 차트에 마우스를 올리거나 방향키로 움직이며 값을 확인해 보세요.

전체 화면으로 보기 ↗

Design

  • 카드는 테두리와 배경색 없이 흰색으로 두고 아주 옅은 그림자만 줬습니다. 색이 들어간 곳을 연한 회청색 바탕 하나로 줄이고 카드 사이 간격을 고르게 맞춰, 흰 타일을 줄지어 붙인 듯 가볍고 정돈돼 보입니다.
  • 데이터 색은 파랑과 민트 두 가지입니다. 추이와 목표는 파랑, 강조할 기간과 비율은 민트로 나누고, 비교 대상은 회색 점선과 회색 막대로 한 걸음 물러나게 했습니다.
  • 수치는 굵게 쓰지 않았습니다. 보통 굵기의 큰 수치에 단위를 작게 붙이고 증감은 바로 아래 줄에 두어, 카드가 달라도 수치 높이가 맞습니다.
  • 차트는 선과 링으로 가볍게 그렸습니다. 카드 끝까지 이어지는 곡선, 속이 빈 원 표식, 둥근 끝의 링과 게이지가 여백을 살리고, 일별 점유율은 파랑 한 가지의 농도로 칠한 달력으로 보여 줍니다.

Prompt

레이아웃, 색 토큰, 글꼴, 컴포넌트, 동작 규칙을 명세로 정리해 두었습니다. 명세 주소와 함께 아래처럼 요청하면 같은 느낌의 화면을 만들 수 있습니다.

명세: https://styles.vizney.com/tile/style.html

Tile 스타일로 매장 운영 대시보드를 HTML 한 파일로 만들어 줘.
명세: https://styles.vizney.com/tile/style.html
데이터: 첨부한 CSV(매장별 월 매출, 방문객, 목표)
구성: 위쪽 매장 탭, 월 매출 추이, 목표 달성 링, 일별 방문객 캘린더

이 스타일로 대시보드 제작이 필요하시면 제작 문의를 남겨 주세요.