L' UI STYLE — 디자인 스타일 도감
같은 화면을
107가지로 만들면.
AI에게 “세련되게 만들어줘”라고 하면 늘 비슷한 게 나옵니다. 학습 데이터의 평균을 그리기 때문입니다. 평균에서 벗어나려면 좌표를 줘야 하고, 그 좌표가 스타일의 이름입니다. 여기 있는 97장은 전부 똑같은 대시보드 화면 하나에 스타일만 바꿔 찍은 것입니다 — 다른 건 스타일뿐이라, 차이가 보이면 그게 곧 그 스타일입니다.
쓰는 법 — 이름을 조건으로 준다
대시보드 화면을 만들어줘.
스타일은 브루탈리즘 — 굵은 검정 테두리 3px, 어긋난 오프셋 그림자, 라운드 0.
레이아웃은 벤토 그리드로.각 카드의 ‘핵심’ 줄을 그대로 옮겨 적으면 됩니다 — 그게 그 스타일을 만드는 조건입니다
시각 스타일 52
같은 화면을 어떻게 칠하는가
레이아웃 24
같은 데이터를 어떻게 배치하는가
일러스트 12
같은 장면을 어떤 그림체로 그리는가
환경 9
같은 화면이 기기에 따라 어떻게 달라지는가
인터랙션 10
정지 화면으로는 못 보여주는 것 — 3~5초 루프
107개
시각 스타일
52개— 같은 화면을 어떻게 칠하는가레이아웃
24개— 같은 데이터를 어떻게 배치하는가일러스트
12개— 같은 장면을 어떤 그림체로 그리는가환경
9개— 같은 화면이 기기에 따라 어떻게 달라지는가인터랙션
10개— 정지 화면으로는 못 보여주는 것 — 3~5초 루프어떻게 만들었나
이미지 생성 AI로 뽑지 않았습니다. 생성 AI는 매번 다른 화면을 그려서 비교가 통제되지 않고, 한글 UI 텍스트가 깨집니다. 그래서 한 벌의 HTML 대시보드를 만들고 CSS 토큰만 바꿔가며 브라우저로 캡처했습니다. 사이드바 메뉴, 지표 숫자, 주문 목록의 이름까지 97장이 전부 동일합니다. 인터랙션 10종만은 정지 화면으로 옮기면 뜻이 사라져서, 짧은 루프 영상으로 만들었습니다.
분류는 공식 표준이 아닙니다. UI 스타일은 시각·레이아웃·인터랙션·기기가 뒤섞여 이름이 붙기 때문에, 사람마다 경계가 다릅니다. 여기서는 ‘대시보드 한 화면에 적용했을 때 눈으로 구분되는가’ 를 기준으로 추렸습니다. 구분이 안 되는 것들은 합치거나 뺐습니다 — 예를 들어 스위스· 모더니즘·미니멀리즘은 이 화면에서 거의 같아져서 통합했고, 정의가 확립되지 않은 항목은 넣지 않았습니다.