웹 및 UI 디자인
웹 및 UI 디자인에 등록된 Skills입니다.
프런트엔드 디자인 Frontend Design
템플릿에 의존하지 않는 개성 있는 UI를 만들기 위한 가이드: 먼저 디자인 계획을 세우고, 요구사항과 대조해 점검한 뒤 구현합니다.
테마 팩토리 Theme Factory
슬라이드, 문서, 보고서, 랜딩 페이지에 10가지 기성 색상·글꼴 테마를 적용하거나, 새 테마를 즉석에서 생성합니다.
알고리즘 아트 Algorithmic Art
주제를 생성 예술 선언문으로 쓴 뒤, 시드 전환·파라미터 슬라이더·PNG 내보내기가 있는 p5.js 인터랙티브 작품으로 만들어 줍니다.
UI Styling (shadcn/ui + Tailwind)
shadcn/ui와 Tailwind CSS로 접근성 좋은 반응형 인터페이스를 만드는 가이드. 다크 모드, 테마 설정, 캔버스 기반 비주얼 디자인 접근법도 다룹니다.
반응형 레이아웃 디버깅 (Responsive Layout Debugging)
특정 화면 너비에서 깨지는 레이아웃의 진짜 원인을 찾습니다. 가로 스크롤, 넘침, 줄어들지 않는 flex 항목, 붙지 않는 sticky, 휴대폰의 100vh, 브라우저 UI 아래에 가려지는 고정 바를 다룹니다.
웹 접근성 점검 (Web Accessibility Audit, WCAG 2.2 AA)
페이지나 컴포넌트를 WCAG 2.2 AA 수준에 맞춰 점검합니다. 키보드, 포커스, 대비, 이름과 레이블, 구조, 폼, 대화상자, 동적 업데이트, 확대, 터치 영역 크기를 다루며 지적마다 해당 성공 기준을 붙입니다.
디자인 테이스트 프런트엔드 Design Taste Frontend
템플릿 같지 않은 랜딩 페이지, 포트폴리오, 리디자인을 에이전트가 만들게 합니다. 요구를 읽고 '디자인 리드'를 밝히고, 세 개의 다이얼을 정하고, 맞으면 실제 디자인 시스템을 고르고, 엄격한 출시 전 점검을 거칩니다.
Penpot UI/UX 디자인 (Penpot MCP 사용)
Penpot의 MCP 서버를 통해 Penpot 안에서 웹·모바일·데스크톱 인터페이스를 설계합니다. 디자인 시스템 점검, 컴포넌트·접근성 규칙, 플랫폼별 크기를 갖추고 있습니다.
UI 상태 체크리스트 (UI States Checklist)
화면이나 컴포넌트에 필요한 모든 상태를 나열합니다. 로딩, 빈 상태, 오류, 부분 성공, 비활성, 오프라인, 권한 없음, 극단적인 내용까지 각 상태에서 사용자가 무엇을 보고 무엇을 할 수 있는지 정합니다.
웹 디자인 리뷰어 (Web Design Reviewer)
실행 중인 웹사이트의 레이아웃, 반응형, 접근성, 일관성 문제를 점검하고, 최소한의 변경으로 소스 코드를 고친 뒤 다시 확인합니다.
디자인 엔지니어링 Design Engineering (Emil Kowalski)
Emil Kowalski의 디자인 엔지니어링 방식으로 UI를 검토하고 만듭니다. 애니메이션을 넣지 말아야 할 때, 이징과 시간, 스프링, clip-path, 제스처, 성능, 접근성을 다루며 검토는 'Before / After / Why' 표로 돌려줍니다.
Design System (토큰과 슬라이드)
3계층 디자인 토큰(기본값, 시맨틱, 컴포넌트)을 설계하고 컴포넌트 명세를 작성하며, 토큰 규칙을 지키는 Chart.js 포함 HTML 슬라이드를 생성합니다.
UI/UX Pro Max (UI/UX 디자인 지식베이스)
UI 스타일, 색상 팔레트, 글꼴 조합, UX 가이드라인, 차트, 기술 스택별 팁을 검색할 수 있는 디자인 지식베이스. 구현 전에 시각적 방향을 정할 때 씁니다.
라이트·다크 테마 (Light and Dark Theme)
두 테마 모두에서 올바른 라이트·다크 모드를 만듭니다. 의미 기반 색상 토큰, 시스템 설정과 수동 전환, 로드 시 잘못된 테마가 번쩍이지 않게 하기, 두 테마에서의 대비 점검까지 다룹니다.
UI 국제화 (UI Internationalization)
재설계 없이 어떤 언어든 담을 수 있는 인터페이스를 만듭니다. 메시지 카탈로그, 로케일에 맞는 서식, 글자 길이가 달라도 버티는 레이아웃, CJK와 오른쪽에서 왼쪽 지원, 올바른 URL을 가진 언어 전환을 다룹니다.
Web Artifacts Builder
TypeScript, Tailwind CSS, shadcn/ui로 복잡한 독립형 React 웹 아티팩트를 만듭니다.
애니메이션 만들기 Animate
올바른 순서로 처음부터 애니메이션을 만듭니다. 애초에 움직여야 하는가, 목적은 무엇인가, 어떤 도구인가, 어떤 속성인가, 어떤 곡선과 시간인가, 중단과 퇴장은 어떻게 하는가. 코드를 쓰며, 움직이면 안 되는 것에는 애니메이션을 넣지 않습니다.
UI 망가뜨리기 Break UI
현실적으로 가장 나쁜 데이터로 컴포넌트를 스트레스 테스트합니다. 아주 긴 이름, 줄바꿈이 안 되는 이메일, 한 글자 이름, 빠진 필드, 1,284명의 멤버, 빈 목록. 무엇이 깨졌는지, 왜인지, 각각의 해결책을 보고하고 고치기 전에 멈춥니다.
하이엔드 비주얼 디자인 High-End Visual Design
고급 디자인 에이전시처럼 디자인하도록 가르칩니다. 사이트를 '비싸 보이게' 하는 글꼴, 여백, 그림자, 중첩 카드 구조, 모션 곡선을 구체적으로 정하고, 값싸 보이는 AI 기본값의 금지 목록도 함께 줍니다.
기존 프로젝트 리디자인 Redesign Existing Projects
다시 만들지 않고 기존 웹사이트나 앱을 고급스럽게 끌어올립니다. 기술 스택을 살피고, 글꼴, 색, 레이아웃, 상태, 콘텐츠를 'AI 흔한 패턴' 관점에서 점검한 뒤 우선순위대로 필요한 곳만 고칩니다.
애니메이션 용어집 Animation Vocabulary
움직임 효과를 자기 말로 설명하면 정확한 이름을 알려 줍니다. '팝오버가 열릴 때 통통 튀는 느낌'은 Pop in, 'iOS에서 끝까지 당기면 되돌아오는 스크롤'은 Rubber-banding입니다. 디자이너에게 요청하거나 AI에게 프롬프트를 쓸 때 편합니다.