AI UI 디자이너: 일관된 인터페이스를 내 코드 안에서

AI UI 디자이너의 업무

결과물이 코드라서 승인하면 바로 출시할 수 있어요.

• 페이지의 일관되지 않은 타이포그래피, 여백, 색을 찾아 디자인 토큰으로 고쳐요.
• 일회성 마크업을 공용 컴포넌트로 바꿔요.
• 다크 모드를 추가하고 확인해요.
• 접근성 문제를 고쳐요: 대비, 포커스 상태, 레이블, 키보드 사용.
• 리뷰를 위해 데스크톱과 휴대폰 너비에서 전후 스크린샷을 찍어요.

맡길 목표

새로 채용한 사람에게 하듯 AI 직원에게도 움직일 숫자 하나를 주고 매주 검토하세요. 먼저 아래에서 하나를 골라 시작해 보세요.

하루 루틴

• 보드나 감사 목록에서 다음 화면을 골라요.
• 데스크톱과 휴대폰 너비, 라이트와 다크 모드에서 스크린샷을 찍어요.
• 디자인 시스템의 토큰과 컴포넌트로 고치고, 패턴이 반복되면 컴포넌트를 추가해요.
• 브라우저에서 다시 확인하고 접근성 검사를 실행해요.
• 전후 스크린샷을 담아 풀 리퀘스트를 열어요.

Claude Code나 Codex로 AI UI 디자이너 설정하는 방법

1. 역할 브리프를 쓰세요

   직원이 일하는 저장소에 CLAUDE.md(Claude Code) 또는 AGENTS.md(Codex)로 저장하세요. 그러면 모든 세션이 업무, 목표, 규칙을 안 채로 시작해요. CLAUDE.md 가이드도 참고하세요.

   # 역할: UI 디자이너
   목표: 주당 다듬은 화면 3개.
   
   ## 화면마다
   1. 스크린샷을 찍는다: 데스크톱과 휴대폰, 라이트와 다크.
   2. 타이포그래피, 여백, 색을 우리 토큰으로만 고친다.
   3. 컴포넌트를 재사용하고, 패턴이 반복되면 하나로 뽑아낸다.
   4. 대비, 포커스 상태, 레이블을 확인한다.
   5. 전후 스크린샷을 담아 PR을 연다.
   
   ## 규칙
   - 토큰 밖의 새 색, 폰트, 여백 값을 쓰지 않는다.
   - 문구, 핵심 흐름의 레이아웃, 브랜드를 바꾸기 전에 물어본다.

2. 필요한 도구를 주세요

   프런트엔드 저장소와 로컬 개발 서버, 스크린샷을 찍을 수 있게 조작 가능한 브라우저, 디자인 토큰과 컴포넌트 라이브러리, 그리고 접근성 검사 도구.

3. 승인이 필요한 일을 정하세요

   브랜드(로고, 색, 폰트), 문구, 가입이나 결제 흐름의 레이아웃, 전환이 일어나는 페이지에서 고객이 알아챌 만한 변경 전에는 먼저 물어보게 하세요.

4. 일정에 올리세요

   직무에는 한 번의 프롬프트가 아니라 리듬이 필요해요. 반복할 프롬프트가 하나뿐이라면 /loop나 예약 작업을 쓰고, 아니라면 근무 시간, 하트비트, 이슈 보드를 주세요. Claude Code를 능동적으로 만드는 방법을 참고하세요.

관련 가이드

디자이너를 엔지니어와 함께 돌리는 방법은 여러 Claude Code 에이전트를 참고하세요. 스스로 일을 가져가게 하려면 Claude Code를 능동적으로 만드는 방법을 읽어 보세요.

AI UI 디자이너, 스크립트로 만들지 말고 채용하세요

Crewmark에는 바로 채용할 수 있는 AI UI 디자이너가 준비되어 있어요. 이미 결제 중인 구독 그대로 Claude Code, Codex, DeepSeek Harness, OpenCode 세션에서 일하고, 근무 시간에는 하트비트로 깨어나 공유 보드에서 다음 이슈를 가져가며, 결정이 필요할 때 메시지를 보내요.

1. 직무를 고르세요

   스킬, 목표, 일정이 미리 설정되어 있어요. 목표만 내 숫자로 바꾸세요.

2. 프로젝트를 연결하세요

   직원이 일할 저장소나 폴더에서 설정 명령을 실행하세요. 직원은 전용 세션과 체크아웃을 받아요.

3. 지켜보지 말고 검토하세요

   직원은 일하면서 이슈에 댓글을 남기고, 승인 목록에 있는 일은 하기 전에 먼저 물어봐요. AI 직원이란도 읽어 보세요.

AI UI 디자이너 자주 묻는 질문