스타일은 용도에 맞게은(는) 무엇을 하나요?
문제
AI가 UI를 작성할 때 관성적인 미적 감각을 가지고 있어, 무엇을 만들든 같은 스타일을 적용합니다:
- 유리 모피즘 카드 (
backdrop-filter: blur()+ 반투명 흰색) - 뉴모피즘의 볼록/오목 그림자
- 보라색에서 파란색으로의 그라데이션, 그라데이션 버튼, 그라데이션 텍스트, 그라데이션 테두리
- 어두운 배경 위에 떠다니는 흐릿한 컬러 광선
- 네온 글로우
box-shadow, 호버 시 확대, 부유, 회전 - 모든 블록이 24px 라운드 카드, 제목 앞에 이모지
- "✨ AI 기반", "🚀 지금 시작" 스타일의 카피
결과: 재무팀이 사용할 지출 승인 도구, 운영팀이 사용할 로그 뷰어가 게임 런처나 암호화폐 랜딩 페이지처럼 보입니다. 사용자가 하루 8시간 사용해야 하는데, 화려해서 보기 힘들고, 필요한 것을 찾기 어렵고, 전문적이지 않고 신뢰할 수 없어 보입니다.
반대의 경우도 있습니다: 친구와 하는 작은 게임, 제비뽑기 돌림판, 반려동물 일기가 회색빛 표와 기본 파란색 버튼으로 만들어져 재미가 전혀 없습니다.
스타일은 '예쁘냐 안 예쁘냐'의 문제가 아니라 '적합하냐 적합하지 않냐'의 문제입니다.
1단계: 프로젝트에 이미 있는 것 확인
우선순위 (높음 → 낮음):
- 프로젝트의 기존 디자인 시스템 / 컴포넌트 라이브러리 / 테마 파일 (
tailwind.config,theme.ts, CSS 변수, Figma 링크, 브랜드 가이드라인): 그대로 따르고 새로 만들지 마세요. - 프로젝트의 기존 페이지: 새 페이지는 기존 페이지와 일관성을 유지해야 합니다.
- 플랫폼 규칙: Windows 네이티브 앱은 Fluent/WinUI, macOS는 HIG, Android는 Material을 따릅니다. 플랫폼 규칙의 재질(예: Windows 11의 Mica/Acrylic)은 적절하며, 플랫폼에서 지정한 위치(창 배경, 플라이아웃 메뉴)에만 사용하고 모든 카드에 블러를 적용하지 마세요.
- 위의 모든 것이 없을 때만, 시나리오에 따라 판단하세요.
2단계: 시나리오 판단
다음 신호를 확인하세요:
| 신호 | 절제 쪽 | 활발 쪽 |
|---|---|---|
| 사용자 | 직원, 전문가, 고객의 고객 | 일반 플레이어, 친구, 아이, 팬 |
| 사용 방식 | 매일 오랜 시간 사용, 같은 작업 반복 | 가끔 열어서 잠시 플레이 |
| 내용 | 표, 숫자, 폼, 로그, 코드 | 이미지, 캐릭터, 스토리, 업적, 상호작용 |
| 실수 비용 | 높음: 돈, 데이터, 계약, 프로덕션 | 낮음: 다시 하면 됨 |
| 사용자가 원하는 느낌 | 신뢰성, 효율성, 전문성, 방해 금지 | 재미, 놀라움, 개성, 공유하고 싶음 |
3단계: 시나리오별 방향 선택
비즈니스 / 생산성 / 내부 도구 / 데이터 백엔드 / 개발자 도구
- 색상: 중성색 위주(흰색, 밝은 회색, 진한 회색), 하나의 강조색을 주요 동작과 중요 상태에 사용; 상태 색상(성공/경고/오류)은 고정된 의미가 있으므로 장식용으로 사용하지 않음.
- 폰트: 시스템 폰트 또는 성숙한 산세리프 폰트; 숫자는 고정폭 또는
font-variant-numeric: tabular-nums를 사용하여 열 정렬. - 밀도: 중간에서 높은 정보 밀도, 표 행 높이는 컴팩트하게, 여백은 그룹화를 위한 것이지 '고급스러워 보이려고'가 아님.
- 장식: 거의 없음. 작은 라운드(4~8px), 얇은 테두리 또는 매우 얇은 그림자, 그라데이션, 글로우, 유리 모피즘, 배경 광선 사용 금지.
- 애니메이션: 피드백용으로만 사용(로딩, 확장, 상태 변경), 150~200ms,入场 애니메이션, 호버 확대, 시차 효과 없음.
- 아이콘: 일관된 스타일의 라인 아이콘 세트(Lucide, Fluent Icons, Material Symbols), 이모지 사용 금지.
- 카피: 직접적이고 구체적으로: "저장", "CSV 내보내기", "승인 대기 3개 레코드".
엔터테인먼트 / 게임 / 창의 / 소셜 / 아동 / 개인 관심사
- 색상: 선명하고, 대담하며, 다채롭고, 기억에 남을 수 있음; 테마 색상, 그라데이션, 일러스트 배경 가능.
- 폰트: 제목은 개성 있는 디스플레이 폰트 사용 가능, 본문은 여전히 가독성 좋아야 함.
- 장식: 일러스트, 스티커, 텍스처, 캐릭터, 손그림 요소 모두 사용 가능, 단, 테마와 일치해야 하며, 무분별하게 일반적인 '멋진' 효과를 적용하지 말 것. 픽셀 아트 게임은 픽셀 아트 스타일로, 동화 테마는 동화 느낌으로, 통일된 보라색 네온이 아니라.
- 애니메이션: 더 풍부하게: 탄성, 파티클, 축하 애니메이션, 사운드 효과로 조작에 보상감 부여.
- 카피: 어조, 개성, 농담 가능.
중간 지대
일반 소비자 대상 도구형 제품(가계부, 할 일, 캘린더, 운동 기록), 포트폴리오, 제품 랜딩 페이지: 기본은 절제되고 사용성 우선, 소수의 장소(빈 상태, 완료 순간, 브랜드 색상, 일러스트)에 개성을 추가.
활발함이 AI 관성 스타일과 같지는 않습니다. 유리 모피즘, 보라-파랑 그라데이션, 네온 광선을 엔터테인먼트 시나리오에 넣어도 "일반 AI 스타일"일 뿐, 그 제품의 스타일이 아닙니다. 좋은 활발함은 테마가 있는 것입니다.
불확실할 때: 사용자에게 물어보기
시나리오가 명확하지 않거나 사용자의 요구가 여러 방식으로 구현될 수 있을 때는, 먼저 묻고, 그 다음에 작성하세요. 질문 방식은 구체적이어야 하며, 직접 선택할 수 있는 방향을 제시해야지, "어떤 스타일을 좋아하세요?"처럼 묻지 마세요:
✓ "이 도구의 스타일은 어떤 쪽을 선호하시나요?
A. 간결하고 전문적인: 밝은 배경, 중성색, 컴팩트한 표, Linear/Notion 스타일
B. 친근하고 편안한: 둥글둥글하고, 부드러운 색상, 약간의 일러스트, Duolingo 설정 페이지 스타일
C. 개성 있는: 대담한 색상과 애니메이션, 전시나 엔터테인먼트에 적합
잘 모르시겠다면 일단 A로 한 버전을 만들겠습니다."
환경이 직접 렌더링을 지원한다면, 2~3개의 샘플(같은 인터페이스의 다른 색상과 폰트)을 만들어 사용자가 선택하게 할 수도 있습니다.
물을 필요가 없을 때는 묻지 마세요: 사용자가 이미 용도를 말했거나 ("회사 재무팀용"), 프로젝트에 이미 스타일이 있거나, 요구사항이 명확할 때 ("테트리스 미니 게임 만들어 줘")는 바로 판단하여 만들고, 마지막에 선택한 방향을 한 줄로 언급하여 사용자가 수정할 수 있도록 하세요.
4단계: 완료 후 자가 점검
인터페이스의 모든 장식 요소를 보고 질문하세요: 이것을 제거하면 사용자는 무엇을 잃을까요? 만약 "아무것도 잃지 않는다"가 답이고, 이것이 도구형 인터페이스라면, 제거하세요.
항목별로 점검:
- 코드에서
backdrop-filter,linear-gradient,box-shadow의 컬러 글로우,animation, 이모지를 검색하세요: 각각이 의도적으로 사용된 것인가요? - 강조색이 주요 동작과 중요 상태에만 사용되었나요? 아니면 곳곳에 있나요?
- 스크린샷을 찍어 확인하세요 (배경 친화적 측면): 첫눈에 보이는 것은 콘텐츠와 주요 동작인가요, 아니면 장식인가요?
- 사용자의 입장이 되어 생각하세요: 매일 8시간 열어보거나 / 10분 동안 플레이할 때, 이 스타일이 적합한가요?
경계
- 사용자가 명확히 특정 스타일을 요구한 경우 ("사이버펑크 스타일로 해줘", "화려하게 만들어줘"), 도구형이더라도 사용자의 요구를 따르세요.
- 사용자가 참고 이미지, 참고 사이트, 브랜드 가이드라인을 제공한 경우, 참고를 기준으로 하세요.
- 데모, 마케팅, 전시용 페이지는 일상 도구보다 더 표현력이 있어도 되지만, 여전히 브랜드와 대상 청중에 맞아야 합니다.
체크리스트
- 프로젝트에 기존 디자인 시스템, 테마, 기존 페이지가 있습니까? 그것을 따르고 있습니까?
- 이 시나리오는 무엇입니까? 누가 사용하고, 얼마나 오래 사용하며, 실수 비용은 얼마나 됩니까?
- 시나리오가 명확하지 않을 때, 구체적인 방향을 제시하고 사용자에게 물었습니까?
- 도구형 인터페이스: 유리 모피즘, 보라-파랑 그라데이션, 네온 글로우, 광선 배경, 이모지 아이콘, 무의미한 애니메이션이 없습니까?
- 엔터테인먼트형 인터페이스: 테마에 맞는 개성이 있으며, 회색빛 표도 아니고 일반 AI 멋진 스타일도 아닙니까?
- 강조색이 필요한 곳에만 사용되었습니까?
- 모든 장식 요소가 그 존재 이유를 설명할 수 있습니까?