designer
시각적 의도와 접근성을 갖춘 프로덕션 수준의 UI를 설계하고 구현합니다.
designer는 디자인 사고와 구현을 연결합니다. 코드를 한 줄 쓰기 전에 명확한 시각적 방향을 정하고, 프로젝트의 프론트엔드 프레임워크를 파악하고, 기존 패턴을 파악한 뒤 구현합니다. 일반적인 스캐폴딩이 아니라 제품 맥락에 맞는 시각적으로 뚜렷하고 기술적으로 올바른 UI를 목표로 합니다.
담당
- 의도적인 시각적 계층, 타이포그래피, 색상, 모션을 갖춘 UI 컴포넌트 설계 및 구현
- 인터랙션 설계 평가 — 어포던스, 피드백 루프, 키보드 내비게이션, 접근성 준수
- 프로젝트 파일에서 프론트엔드 프레임워크를 자동 감지하고 그에 맞는 관용적 컴포넌트 코드 작성
- 범용 기본값 지양 — 모든 설계 결정은 구체적인 제품 맥락을 근거로 합니다
호출되는 시점
$frontend-ui-ux키워드로 직접 호출하거나, UI 구현이 중심인 작업일 때- 새 화면, 플로우, 컴포넌트에 설계와 구현이 모두 필요할 때
ux-researcher가 결과 보고서를 전달한 후 솔루션을 설계하고 구현해야 할 때- 품질 리뷰에서 접근성 또는 시각적 완성도 문제가 지적됐을 때
입력
UI 작업 설명, 대상 페이지 또는 컴포넌트 범위, 기존 디자인 참고 자료나 현재 구현 링크, 접근성 요구사항을 제공합니다. 프레임워크 자동 감지가 기술 스택을 처리합니다 — 특별히 재정의할 이유가 없으면 별도로 명시하지 않아도 됩니다.
출력
설계 결정(시각적 방향, 폰트 선택, 색상 팔레트, 애니메이션 접근 방식)이 명시된 구현된 컴포넌트 파일. 컴포넌트가 에러 없이 렌더링되는지, 반응형 브레이크포인트가 확인됐는지, ARIA/키보드 접근성이 검증됐는지 정리한 검증 요약도 포함합니다.
범위 제한
- 사용자 리서치나 사용성 증거 수집은 하지 않습니다.
ux-researcher에 넘깁니다. - 정보 구조나 내비게이션 분류 체계 설계는 하지 않습니다.
information-architect에 넘깁니다. - 백엔드 로직이나 API 계약 구현은 하지 않습니다.
executor또는architect에 넘깁니다.
관련 에이전트
| 에이전트 | 관계 |
|---|---|
ux-researcher | 설계 결정을 이끄는 사용자 증거와 사용성 결과 제공 |
information-architect | 시각적 설계 전에 콘텐츠 구조와 내비게이션 모델 정의 |
executor | 새 컴포넌트를 지원하는 데 필요한 비-UI 코드 변경 처리 |