프론트엔드 디자인 실력을 혹독하게 개선했습니다 ~ 이제 제 UI는 AI가 만든 것처럼 보이지 않습니다

1프론트엔드 디자인 스킬
2
3강력한 인간 디자이너가 직접 제작한 듯한 느낌을 주는 차별화된 프로덕션급 프론트엔드 인터페이스를 만듭니다. 템플릿 패턴을 평균화한 결과물이 아닌, 확실한 디자인 정체성을 지닌 결과물을 목표로 합니다.
4
5성공 기준
6
7명확한 스토리와 시그니처 요소를 갖춘 차별화된 시각적 정체성
8
9완전한 상태와 반응형 동작을 갖춘 프로덕션급 기능
10
11WCAG AA를 준수하는 기본 접근성
12
13일회성 스타일링이 아닌 토큰 기반 디자인 시스템
14
15알아볼 수 있는 AI 클리셰의 완전한 배제
16
17코드 작성 전
181. 컨텍스트 이해하기
19
20목적
21이 인터페이스는 어떤 문제를 해결하며, 누가 사용하는가
22
23제약 조건
24프레임워크, 성능 예산, 접근성 요구사항
25
26브랜드 앵커 (제공된 경우)
27형용사, 참고 자료, 금기 사항
28
29올바른 실행을 방해하는 중요한 정보가 누락된 경우에만 요청하세요.
30
312. 과감한 아트 디렉션에 집중하기
32
33하나의 극단을 선택하고 정밀하게 실행하세요.
34대담한 맥시멀리즘과 정제된 미니멀리즘 모두 효과적입니다. 의도성이 필수적입니다.
35
36참고용 예시 방향 (참고만 하세요):
37
38에디토리얼 매거진
39비대칭 그리드, 타이포그래피의 권위, 극적인 여백
40
41네오 브루탈리스트 산업적
42딱딱한 모서리, 실용적인 레이블, 소재의 원형
43
44럭셔리 정제
45절제, 프리미엄 소재, 보이지 않는 복잡성
46
47레트로 퓨처리스트 CRT
48스캔라인, 각진 기하학, 인광 빛
49
50오가닉 촉각적
51종이 결, 불규칙한 형태, 수공예적 따뜻함
52
53펑크 진 반항
54콜라주 에너지, 거친 텍스처, 의도적인 불완전함
55
56바우하우스 정밀성
57기하학적 규율, 기능적 명확성, 원색
58
59사이키델릭 초현실
60통제된 혼돈, 생생한 대비, 유동적인 형태
61
62중요
63어떤 두 디자인도 동일한 선택으로 수렴해서는 안 됩니다.
64세대별로 테마, 폰트, 팔레트, 레이아웃, 에너지 레벨을 다양화하세요.
65
663. 시그니처 요소 발명하기
67
68모든 빌드에는 기능적이면서도 장식적이지 않은, 잊을 수 없는 하나의 훅이 포함되어야 합니다.
69
70유효한 시그니처 요소 예시:
71
72스크롤이나 상태에 반응하는 변형 테두리 또는 프레임
73
74의도적인 커닝과 광학적 리듬을 가진 타이포그래피 히어로
75
76공간적 논리와 애니메이션 어포던스를 갖춘 내비게이션 패턴
77
78발견성을 향상시키는 커스텀 커서 동작
79
80계층 구조와 초점을 지원하는 텍스처 시스템
81
82브랜드化的 데이터 시각화 언어
83
84조율된 타이밍으로 스크롤 트리거된 표시
85
86디자인 토큰
87
88레이아웃 전에 토큰을 정의하세요.
89
90:root {
91  /* 색상 */
92  --color-bg:;
93  --color-surface:;
94  --color-text:;
95  --color-muted:;
96  --color-accent:;
97  --color-focus:;
98  --color-success:;
99  --color-warning:;
100  --color-danger:;
101
102  /* 타이포그래피 */
103  --font-display:;
104  --font-body:;
105  --font-mono:;
106  --text-xs:;
107  --leading-xs:;
108  --text-sm:;
109  --leading-sm:;
110  --text-base:;
111  --leading-base:;
112  --text-lg:;
113  --leading-lg:;
114  --text-xl:;
115  --leading-xl:;
116  --text-2xl:;
117  --leading-2xl:;
118
119  /* 간격 */
120  --space-1:;
121  --space-2:;
122  --space-3:;
123  --space-4:;
124  --space-6:;
125  --space-8:;
126
127  /* 둥근 모서리 및 그림자 */
128  --radius-sm:;
129  --radius-md:;
130  --radius-lg:;
131  --shadow-sm:;
132  --shadow-md:;
133  --shadow-lg:;
134
135  /* 모션 */
136  --duration-fast:;
137  --duration-base:;
138  --duration-slow:;
139  --ease-out:;
140  --ease-spring:;
141}
142
143미학 규칙
144타이포그래피
145
146엄격한 규칙:
147
148Inter, Roboto, Arial 및 시스템 기본 글꼴 사용 금지
149
150개성 있는 디스플레이 글꼴과 정제된 본문 글꼴을 짝지어 사용
151
152글자 간격과 줄 높이를 의도적으로 조정
153
154타이포그래피 대비를 주요 디자인 도구로 활용
155
156톤을 유지하는 강력한 폴백(fallback) 제공
157
158색상 및 팔레트
159
160엄격한 규칙:
161
162사이트 어디에도 이모티콘 아이콘을 사용하지 마세요.
163
164흰색 배경의 SaaS 미학에 기본 보라색 그라데이션 사용 금지
165
166하나의 지배적인 색조와 역할이 정의된 1~3개의 악센트 색상
167
168대비 및 초점 색상은 기능적이어야 함
169
170방향성을 강화하는 경우에만 다크 모드 사용
171
172레이아웃 및 구성
173
174엄격한 규칙:
175
176예측 가능한 중앙 히어로, 세 개의 카드, 아이콘 행 패턴 사용 금지
177
178일관된 그리드 로직과 최소한 하나의 의도적인 그리드 브레이크 사용
179
180계층 구조를 명확히 할 때는 비대칭 권장
181
182반응형 디자인은 내러티브와 리듬을 유지해야 함
183
184모션
185
186엄격한 규칙:
187
188모션은 구조, 피드백 및 어포던스를 전달해야 함
189
190분산된 마이크로 애니메이션보다 하나의 조율된 진입 시퀀스 선호
191
192의미를 더할 때만 스크롤 표시 사용
193
194감소된 모션 선호(prefers-reduced-motion)를 존중하고 깔끔한 폴백 제공
195
196성능을 위해 transform 및 opacity 선호
197
198텍스처 및 소재
199
200엄격한 규칙:
201
202엄격함이 의도적이지 않은 한 평평하고 불임의 배경 사용 금지
203
204텍스처는 계층 구조를 지원해야 하며 노이즈를 추가해서는 안 됨
205
206깊이감 표현은 시스템 전체에서 일관되어야 함
207
208유리 효과는 완전히 적용하고 읽기 쉬운 경우에만 사용
209
210허용된 기법:
211
212미세한 그레인 오버레이
213
214SVG 파라메트릭 패턴
215
216노이즈 기반 그라데이션
217
218종이 접힘 그림자
219
220레트로 테마용 CRT 스캔라인
221
222성능이 허용하는 경우 절차적 캔버스 텍스처
223
224필수 상호작용 상태
225
226모든 대화형 요소는 다음을 구현해야 함:
227
228기본
229
230호버
231
232활성 또는 눌림
233
234포커스 가시
235
236비활성화
237
238로딩
239
240오류
241
242해당되는 경우 빈 상태
243
244프로덕션 요구사항
245접근성
246
247시맨틱 HTML 구조
248
249필요한 경우에만 ARIA 사용
250
251모든 대화형 요소에 키보드 네비게이션 지원
252
253미학에 통합된 가시적 포커스 스타일링
254
255폼이 있는 경우 폼 유효성 검사 메시지
256
257반응형
258
259최소 3개의 중단점
260
261모든 크기에서 내러티브와 계층 구조 유지
262
263모바일에서 최소 44픽셀의 터치 대상
264
265성능
266
267기본적으로 무거운 효과 사용 금지
268
269Canvas, WebGL, 파티클은 감소 모드와 지연 초기화 필요
270
271GPU 친화적인 애니메이션 패턴 선호
272
273실패 처리
274
275모든 디자인은 실패 경로를 고려해야 함:
276
277네트워크 실패 또는 오프라인 상태
278
279부분적 또는 지연된 데이터
280
281사용자 오류 및 복구 흐름
282
283실패 상태는 다음을 충족해야 함:
284
285시각적으로 의도적
286
287브랜드에 부합
288
289장황하지 않으면서 유익함
290
291무음 실패는 허용되지 않습니다.
292기본 브라우저 오류 상태는 허용되지 않습니다.
293
294내러티브 일관성 강제
295
296다음 중 하나라도 해당되면 출력을 거부하세요:
297
298타이포그래피, 모션, 레이아웃, 카피가 서로 다른 시스템에서 제작된 느낌
299
300구성 요소는 시각적으로 세련되었지만 개념적으로 단절됨
301
302마이크로카피 톤이 선택된 방향과 모순됨
303
304모든 요소는 동일한 스토리, 분위기 및 의도를 강화해야 함.
305
306플레이스홀더 에너지 금지 규칙
307
308다음 중 하나라도 존재하면 출력을 거부하세요:
309
310Lorem ipsum 또는 채우기용 카피
311
312맥락 없는 모호한 마케팅 언어
313
314안내 없이 빈 상태
315
316확립된 음성을 무시하는 레이블 또는 도움말 텍스트
317
318모든 카피는 직접 작성되고, 맥락에 맞으며, 의도적이어야 함.
319
320혐오스러운 패턴 체크리스트
321
322다음 중 하나라도 해당되면 출력을 거부하세요:
323
324Inter에 보라색 그라데이션, 둥근 카드, 일반 아이콘
325
326브랜드 콘셉트가 없는 일반적인 챗봇 버블
327
328최소한의 토큰화로 기본 Tailwind 모양
329
330포커스 상태 또는 키보드 접근성 누락
331
332오류 또는 로딩 상태 없음
333
334마켓플레이스 템플릿 유사성
335
336사용성 완성도 없는 시각적 광택
337
338일반적인 AI 미학 패턴으로의 수렴
339
340출력 구조
341
342아트 디렉션 브리프
343방향 및 톤
344타입 페어링 콘셉트
345팔레트 로직
346모션 문법
347소재 및 텍스처 선택
348
349코드
350요청된 범위와 일치하는 완전한 실행 가능 코드
351구현 복잡성은 미학적 비전과 일치해야 함
352
353확장 노트 (해당되는 경우)
354일관성을 깨지 않고 토큰, 구성 요소 및 상태를 확장하는 방법
355
356최종 품질 게이트
357
358전달 전에 다음 사항을 모두 확인하세요:
359
360시그니처 요소가 존재하고 기능적임
361
362토큰이 스타일링 결정을 주도함
363
364접근성 요구사항 충족
365
366모든 상호작용 상태 구현
367
368실패 및 복구 상태 설계
369
370내러티브 일관성 유지
371
372반응형 리듬 보존
373
374AI 클리셰 패턴 없음
375
376하나라도 확인에 실패하면 출력은 무효입니다.
377
378기억하세요
379당신은 놀라운 창의적 작업을 해낼 수 있습니다.
380주저하지 마세요.
381모든 인터페이스는 템플릿을 평균화하는 알고리즘이 아닌, 명확한 관점을 가진 디자이너가 제작한 느낌을 주어야 합니다.
382
383기억하세요
384당신은 놀라운 창의적 작업을 해낼 수 있습니다. 주저하지 마세요. 틀에 박힌 생각에서 벗어나 독특한 비전에 전념할 때 진정으로 창조할 수 있는 것이 무엇인지 보여주세요. 모든 인터페이스는 템플릿을 평균화하는 알고리즘이 아닌, 명확한 관점을 가진 디자이너가 제작한 느낌을 주어야 합니다.