웹·UI 디자인
웹·UI 디자인 분류에 등록된 Skills입니다.
테마 팩토리 Theme Factory
슬라이드, 문서, 보고서, 랜딩 페이지에 10가지 기성 색상·글꼴 테마를 적용하거나, 새 테마를 즉석에서 생성합니다.
에디터 추천프런트엔드 디자인 Frontend Design
템플릿에 의존하지 않는 개성 있는 UI를 만들기 위한 가이드: 먼저 디자인 계획을 세우고, 요구사항과 대조해 점검한 뒤 구현합니다.
UI 상태 체크리스트 (UI States Checklist)
화면이나 컴포넌트에 필요한 모든 상태를 나열합니다. 로딩, 빈 상태, 오류, 부분 성공, 비활성, 오프라인, 권한 없음, 극단적인 내용까지 각 상태에서 사용자가 무엇을 보고 무엇을 할 수 있는지 정합니다.
웹 접근성 점검 (Web Accessibility Audit, WCAG 2.2 AA)
페이지나 컴포넌트를 WCAG 2.2 AA 수준에 맞춰 점검합니다. 키보드, 포커스, 대비, 이름과 레이블, 구조, 폼, 대화상자, 동적 업데이트, 확대, 터치 영역 크기를 다루며 지적마다 해당 성공 기준을 붙입니다.
UI 국제화 (UI Internationalization)
재설계 없이 어떤 언어든 담을 수 있는 인터페이스를 만듭니다. 메시지 카탈로그, 로케일에 맞는 서식, 글자 길이가 달라도 버티는 레이아웃, CJK와 오른쪽에서 왼쪽 지원, 올바른 URL을 가진 언어 전환을 다룹니다.
UI/UX Pro Max (UI/UX 디자인 지식베이스)
UI 스타일, 색상 팔레트, 글꼴 조합, UX 가이드라인, 차트, 기술 스택별 팁을 검색할 수 있는 디자인 지식베이스. 구현 전에 시각적 방향을 정할 때 씁니다.
라이트·다크 테마 (Light and Dark Theme)
두 테마 모두에서 올바른 라이트·다크 모드를 만듭니다. 의미 기반 색상 토큰, 시스템 설정과 수동 전환, 로드 시 잘못된 테마가 번쩍이지 않게 하기, 두 테마에서의 대비 점검까지 다룹니다.
반응형 레이아웃 디버깅 (Responsive Layout Debugging)
특정 화면 너비에서 깨지는 레이아웃의 진짜 원인을 찾습니다. 가로 스크롤, 넘침, 줄어들지 않는 flex 항목, 붙지 않는 sticky, 휴대폰의 100vh, 브라우저 UI 아래에 가려지는 고정 바를 다룹니다.
Design System (토큰과 슬라이드)
3계층 디자인 토큰(기본값, 시맨틱, 컴포넌트)을 설계하고 컴포넌트 명세를 작성하며, 토큰 규칙을 지키는 Chart.js 포함 HTML 슬라이드를 생성합니다.