AI 코딩 에이전트를 위한 UI 프롬프트 쓰는 법

1. 컴포넌트 이름 말고 사용자 목표부터 시작하기

누가 어떤 일을 끝내려고 하는지, 왜 중요한지 말하세요. UI 용어는 그 동작이 그 역할에 맞을 때만 붙이세요. 컴포넌트 이름은 하나의 가능한 해결책일 뿐, 제품의 목표가 아니에요.

• 나쁜 예: 예쁜 글래스모피즘 대시보드를 추가해 줘.
• 더 나은 예: 상담팀 리더가 미해결 티켓을 찾고, 긴급도를 파악하고, 현재 필터를 잃지 않으면서 다음 티켓을 열 수 있게 도와주세요.

2. 행동, 상태, 범위를 설명하기

무엇이 화면을 열고, 각 동작 후에 무엇이 바뀌고, 어떻게 닫히고, 무엇이 꼭 저장돼야 하는지 설명하세요. 가능한 경우라면 로딩, 빈 화면, 오류, 성공, 재시도, 취소, 권한 상태도 포함하세요.

3. 행동으로 패턴을 고른 다음 스타일과 모션 더하기

화면 모습은 그릴 수 있는데 이름을 모를 때 이 지도를 쓰세요. 고르기 전에 비슷한 패턴들을 비교해 보세요. 행동, 시각 스타일, 모션은 따로따로 결정해서, 예쁘게 해달라는 요청이 제품 동작을 몰래 바꾸지 않게 하세요.

4. 에이전트가 확인할 수 있는 완료 기준 적기

중요한 규칙은 눈으로 확인할 수 있는 통과/실패 기준으로 바꾸세요. 해당하는 경우 키보드 사용, 초점 표시, 상태 안내 읽기, 작은 화면, 확대, 모션 줄이기, 로딩, 실패, 재시도, 데이터 저장을 모두 점검하세요.

5. 코드를 요청하기 전에 프로젝트 상황 알려주기

이미 쓰고 있는 스택, 디자인 시스템, 재사용 컴포넌트, 데이터 소스, 라우트, 범위 안의 파일 이름을 알려주세요. 바뀌면 안 되는 것도 에이전트에게 말해 주세요. 에이전트는 고치기 전에 실제 프로젝트와 테스트를 직접 살펴봐야 해요.

6. 결정 사항이 드러나는 프롬프트 구조로 쓰기

좋은 순서는 이래요: 결과, 사용자와 상황, 행동, 상태, 내용과 데이터, 시각 방향, 접근성, 프로젝트 제약, 완료 기준, 그리고 범위 밖 작업. 추측한 내용이나 미해결 질문은 숨기지 말고 표시하세요.

• 결과: 이 작업이 끝나면 누가 무엇을 할 수 있어야 하나요?
• 행동과 상태: 흐름이 어떻게 시작되고, 바뀌고, 끝나고, 실패하고, 다시 살아나나요?
• 확인: 결과가 잘 작동한다는 걸 보여줄 정확한 증거는 뭔가요?