| name | web-design-pro |
| description | Modern web design engineering skills including design tokens, advanced UI/UX methodologies, accessibility, and game-specific UI patterns. Use for building commercial-grade, performant, and accessible web interfaces. |
| metadata | {"author":"misskim","version":"1.0","origin":"Synthesized from 2024-2026 web design standards research"} |
Web Design Pro (Modern Design Engineering)
์น ๋์์ธ์ ์ฌ๋ฏธ์ฑ์ ๋์ด, ์์คํ
์ค๊ณ, ์ฑ๋ฅ ์ต์ ํ, ์ ๊ทผ์ฑ, ๊ทธ๋ฆฌ๊ณ ๊ฒ์ ํนํ UX๋ฅผ ํตํฉํ ์ ๋ฌธ๊ฐ ๋ ๋ฒจ์ ๊ธฐ์ ์
.
1. Design Systems & Tokens (๋์์ธ ์์คํ
& ํ ํฐ)
๋์์ธ ๊ฒฐ์ ์ ๋ฐ์ดํฐ๋ก ๊ด๋ฆฌํ์ฌ ๋์์ธ๊ณผ ์ฝ๋ ๊ฐ์ ๊ฐ๊ทน์ ์์ค๋ค.
ํ ํฐ ๊ณ์ธต ๊ตฌ์กฐ
- Primitive Tokens (Raw): ๊ธฐ์ด์ ์ธ ๊ฐ (์:
blue-500: #3B82F6)
- Semantic Tokens (Meaning): ์ญํ ๊ณผ ๋งฅ๋ฝ ๋ถ์ฌ (์:
action-primary: var(--blue-500))
- Component Tokens (Specific): ํน์ ์ปดํฌ๋ํธ ์ ์ฉ (์:
btn-bg: var(--action-primary))
๊ตฌํ ๊ฐ์ด๋
- CSS Custom Properties: ๋ธ๋ผ์ฐ์ ๋ค์ดํฐ๋ธ ํ ํฐ์ผ๋ก ์ค์๊ฐ ํ
๋ง ๋ณ๊ฒฝ ๊ฐ๋ฅ.
- Tokens Studio (Figma): ๋์์ธ ์์ค์์ ์ง์ JSON/CSS ์ถ์ถ.
- ์๋ํ: ํ ํฐ ๋ณ๊ฒฝ ์
Style Dictionary ๋ฑ์ ํตํด ๋น๋ ํ์์ ๊ฐ ํ๋ซํผ์ ๋ฐฐํฌ.
2. UI/UX Methodologies (ํ๋์ UX ๋ฐฉ๋ฒ๋ก )
์ฌ์ฉ์์ "์ง์ง" ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ํ๋ ์์ํฌ.
์ฃผ์ ๋ฐฉ๋ฒ๋ก
- Jobs to be Done (JTBD): "ํ๋ ์ด์ด๋ ๊ฒ์ ์๊ฐ๋ฅผ ์ฝ๊ณ ์ถ์ ๊ฒ ์๋๋ผ, ์ด ๊ฒ์์ด ์ฌ๋ฏธ์๋์ง 3์ด ์์ ํ์ธํ๊ณ ์ถ์ดํ๋ค." -> Hero ์น์
์ ํ
์คํธ ๋์ gameplay ์์ ๋ฐฐ์น.
- Design Thinking: ๊ณต๊ฐ - ์ ์ - ์์ด๋์ด - ํ๋กํ ํ์
- ํ
์คํธ์ ๋ฐ๋ณต.
- Design Sprints: 2~5์ผ ์์ ํต์ฌ ๊ฐ์ค์ ๊ฒ์ฆํ๋ ์์ถ ํ๋ก์ธ์ค.
3. Responsive Design Patterns (๋ฐ์ํ ํจํด)
๋ชจ๋ ๊ธฐ๊ธฐ์์ ์๋ฒฝํ ๋ ์ด์์์ ์ ๊ณตํ๋ ํ๋์ CSS ๊ธฐ๋ฒ.
Fluid Typography & Layout
4. Accessibility Standards (์ ๊ทผ์ฑ ํ์ค - WCAG 2.1)
๋๋ฝ๋ ์ฌ์ฉ์๊ฐ ์๋๋ก ํ๋ ๋์์ธ์ ๊ธฐ๋ณธ.
ํต์ฌ ์ฒดํฌํฌ์ธํธ
- Semantic HTML:
<div> ๋์ <nav>, <main>, <article>, <section> ์ฌ์ฉ.
- Color Contrast: ํ
์คํธ ๋๋น 4.5:1 ์ด์ (AA ๋ ๋ฒจ ๊ธฐ์ค).
- Keyboard Friendly: ๋ชจ๋ ์ํธ์์ฉ์ด Tab/Enter๋ก ๊ฐ๋ฅํด์ผ ํจ.
- ARIA Labels: ์์ด์ฝ๋ง ์๋ ๋ฒํผ์ ๋ฐ๋์
aria-label ๋ถ์ฌ.
- Reduced Motion:
prefers-reduced-motion์ ์กด์คํ์ฌ ๊ณผํ ์ ๋๋ฉ์ด์
์ ์ด.
5. Performance & Web Vitals (์ฑ๋ฅ ์ต์ ํ)
์๋๊ฐ ๊ณง ์ฌ์ฉ์ ๊ฒฝํ์ด๋ค.
Core Web Vitals (2024 ๊ธฐ์ค)
- LCP (Largest Contentful Paint): ๊ฐ์ฅ ํฐ ์ฝํ
์ธ ๋ก๋ < 2.5s.
- INP (Interaction to Next Paint): ์ํธ์์ฉ ์๋ต ์๋ < 200ms. (FID ๋์ฒด)
- CLS (Cumulative Layout Shift): ๋ ์ด์์ ํ๋ค๋ฆผ < 0.1.
์ต์ ํ ๊ธฐ์
- Image optimization: WebP/AVIF ์ฌ์ฉ,
width/height ๋ช
์๋ก CLS ๋ฐฉ์ง.
- Preload: Critical ํฐํธ ๋ฐ Hero ์ด๋ฏธ์ง๋ฅผ ์ฐ์ ๋ก๋.
- Defer JS: ๋นํ์ ์คํฌ๋ฆฝํธ๋
defer๋ async๋ก ์ฒ๋ฆฌ.
6. Game UI/UX Specifics (๊ฒ์ ํนํ UI)
ํ๋ ์ด์ด์ ๋ชฐ์
๊ฐ์ ๊ทน๋ํํ๋ UI ๊ธฐ๋ฒ.
๊ฒ์ UI ํจํด
- Immediate Feedback: ๋ชจ๋ ํด๋ฆญ/ํธ๋ฒ์ ์ฆ๊ฐ์ ์ธ ์๊ฐ/์ฒญ๊ฐ ํผ๋๋ฐฑ ๋ถ์ฌ.
- Visual Hierarchy: ๊ฐ์ฅ ์ค์ํ Action(์: Play Now)์ F-Pattern ์๋จ์ ๋ฐฐ์น.
- ๋ชฐ์
ํ ๋ ์ด์์: UI๊ฐ ๊ฒ์ ์ธ๊ณ๊ด์ ํ
์ค์ฒ, ํฐํธ, ํค๊ณผ ์ผ์นํด์ผ ํจ.
7. Actionable Skills for eastsea.monster Redesign
์ฆ์ ์ ์ฉ ๊ฐ๋ฅํ 3๊ฐ์ง ๊ธฐ์ :
- Fluid Typography (clamp): ๋ชจ๋ ํ์ด์ง ํฐํธ ํฌ๊ธฐ๋ฅผ
clamp๋ก ๋ณ๊ฒฝํ์ฌ ๋ชจ๋ฐ์ผ-๋ฐ์คํฌํฑ ๊ฐ ์ ํ์ ๋งค๋๋ฝ๊ฒ ํจ.
- WebP Batch Conversion: ๋ชจ๋ ๊ฒ์ ์ธ๋ค์ผ๊ณผ ์์
์ WebP๋ก ๋ณํํ์ฌ LCP ๊ฐ์ .
- Hero Video Autoplay: ์ ์ ์ด๋ฏธ์ง ๋์ ์์๊ฑฐ๋ gameplay ์์์ Hero ์น์
์ ๋ฐฐ์น (JTBD ์ ์ฉ).
Best-Practice Checklist for Game Portfolio