<aside>
📎
참고 출처
- 8 Essential Tips for Using Figma Make: 첫 프롬프트에 작업·맥락·핵심 요소·동작·제약을 담고, 이후 수정은 작은 범위로 나누라는 Figma 공식 자료입니다.
- How to write great prompts: 명확하고 직접적인 요청, 예시 활용, 민감 정보 보호 원칙을 설명하는 Figma 공식 문서입니다.
- Explore Figma Make: 디자인·이미지 첨부, 대화형 반복 수정, 특정 영역 편집과 주석 등 현재 Figma Make의 작업 방식을 안내하는 공식 문서입니다.
- Use First Draft with Figma AI: Figma Design에서 웹·모바일의 일반적인 패턴을 기반으로 초안을 생성하고 수정하는 방식과 한계를 설명하는 공식 문서입니다.
</aside>
같은 AI 도구를 사용해도 요청 방식에 따라 결과는 크게 달라집니다. “로그인 화면을 만들어 줘”처럼 범위가 넓은 요청은 AI가 빠진 정보를 흔한 패턴으로 채우게 하고, 목적과 제약이 분명한 요청은 불필요한 추측을 줄입니다.
이번 레슨에서는 UX/UI 작업에 필요한 정보를 프롬프트로 구조화하는 방법을 익힙니다. 방향 탐색, 첫 생성, 부분 수정에 서로 다른 전략을 적용하고, 생성 결과를 검토해 다음 요청으로 바꾸는 과정까지 다룹니다. 레슨을 마치면 자신의 서비스에 사용할 마스터 프롬프트와 수정 프롬프트를 작성할 수 있습니다.
UX/UI 생성을 위한 프롬프트 엔지니어링
왜 프롬프트가 결과를 좌우하는가
- 프롬프트는 AI에게 전달하는 디자인 명세입니다.
- AI는 프롬프트뿐 아니라 학습된 일반 패턴, 도구의 기능과 제한, 첨부한 디자인·이미지 등의 맥락을 함께 바탕으로 결과를 만듭니다. 따라서 “프롬프트에 담긴 정보만 출력한다”기보다, 명시하지 않은 부분은 AI가 추측한다고 이해하는 편이 정확합니다.
- UX/UI 프롬프트의 목적은 문장을 길게 쓰는 것이 아니라 AI가 추측해야 할 핵심 결정을 줄이는 것입니다. 누구를 위한 어떤 화면인지, 무엇을 할 수 있어야 하는지, 어떤 기준을 지켜야 하는지를 명확하게 전달해야 합니다.
- 좋은 프롬프트도 도구의 한계를 없애지는 못합니다.
- 구체적인 요청은 결과의 방향을 맞추는 데 도움이 되지만, 사용성·접근성·브랜드 적합성까지 자동으로 보장하지는 않습니다. 생성 결과는 반드시 사람이 검토하고 수정해야 합니다.
작업 유형에 따라 프롬프트 전략 정하기
- 방향을 탐색할 때
- 아직 해결책을 정하지 않았다면 세부 수치를 모두 고정하지 않습니다. 서로 다른 정보 구조나 탐색 방식을 여러 개 요청하고, 비교 기준까지 함께 받습니다.
- 예: “중고 거래 앱 홈 화면을 검색 중심·카테고리 중심·개인화 피드 중심의 세 방향으로 제안하고, 탐색 속도와 신규 사용자 이해도 관점에서 장단점을 비교해 줘.”
- 첫 화면이나 플로우를 생성할 때
- 방향이 정해졌다면 작업 목표, 서비스 맥락, 플랫폼, 필수 콘텐츠, 동작, 시각 규칙, 제약을 한 번에 제공합니다. 첫 요청은 전체 기준을 세우는 마스터 프롬프트 역할을 합니다.
- 생성된 결과의 일부를 수정할 때
- 대상·문제·변경 내용·유지할 범위를 짧고 정확하게 씁니다. 여러 문제를 한꺼번에 고치기보다 한 번에 하나의 변경 목표를 다룹니다.
- 예: “로그인 화면의 기본 CTA만 수정해 줘. 버튼 높이를 48px로 맞추고 배경을 Primary/600 토큰으로 바꿔. 레이아웃, 문구, 나머지 컬러는 유지해 줘.”
좋은 UX/UI 프롬프트의 7가지 요소
| 요소 |
포함할 내용 |
확인 질문 |
| 1. 작업 목표 |
만들 결과물과 사용 목적 |
무엇을 만들어 무엇을 확인하려는가? |
| 2. 사용자·서비스 맥락 |
서비스, 주요 사용자, 핵심 과업 |
누가 어떤 상황에서 무엇을 하려는가? |
| 3. 플랫폼·화면 범위 |
웹·모바일, 기준 화면 크기, 반응형 여부 |
어디에서 보이며 어느 범위까지 만드는가? |
| 4. 콘텐츠·구조 |
실제 문구, 정보 우선순위, 필수 컴포넌트 |
반드시 보여야 할 정보와 행동은 무엇인가? |
| 5. 동작·상태 |
클릭 결과, 이동 규칙, 로딩·빈 상태·오류·성공 |
사용자 행동에 화면이 어떻게 반응해야 하는가? |
| 6. 시각 규칙·참고 자료 |
컬러·타입·간격 토큰, 컴포넌트, 참고 디자인 |
무엇을 시각적 기준으로 삼아야 하는가? |
| 7. 제약·완료 기준 |
유지할 요소, 금지 사항, 접근성, 판단 기준 |
무엇을 바꾸지 말아야 하며 언제 완료인가? |
- 모든 요소를 항상 같은 깊이로 쓸 필요는 없습니다.
- 탐색 단계에서는 1~3번을 중심으로 여지를 남기고, 구체적인 화면을 만들 때는 4~7번을 보강합니다. 프롬프트의 품질은 길이가 아니라 현재 결정해야 할 정보가 빠짐없이 들어 있는지로 판단합니다.
- 수치는 목적이 있을 때 사용합니다.
- 간격·크기·색상처럼 일관성을 위해 필요한 값은 구체적으로 씁니다. 반면 탐색 단계부터 모든 요소의 좌표와 크기를 고정하면 더 나은 대안을 발견할 가능성이 줄어듭니다.
- 웹 화면은 일반적으로 px와 반응형 조건을 사용합니다. iOS처럼 논리적 포인트를 사용하는 플랫폼이 아니라면 pt를 섞어 쓰지 않습니다.
재사용 가능한 마스터 프롬프트