UX/UI를 위한 AI 프롬프트 디자인 : 예시 기법
예시 기법(Example-based Techniques)
예시 기반 기법은 거대언어모델(LLM)에 특정 작업이나 요구사항을 명확히 전달하기 위해 한 개 또는 여러 개의 예시를 제공하여 AI 모델이 해당 데이터를 학습해 유사한 결과물을 생성하도록 유도하는 프롬프트 엔지니어링 방식입니다. 이 기법은 제공된 예시와 유사한 작업 맥락에 적합하고, 일관성 있는 결과를 얻는 데 효과적입니다.
UX/UI 디자인에서 이 기법은 피드백 작성, 아이디어 생성, 사용자 시나리오 설계, UX 라이팅 등 거의 대부분의 태스크에서 활용될 수 있습니다. 제공하는 예시의 수량에 따라 One-Shot Prompting(단일 예시 제공)과 Few-Shot Prompting(여러 예시 제공)의 형태로 구분할 수 있습니다. 이 기법은 제공된 예시 데이터를 통해서 AI 모델의 이해를 도와 보다 요청에 적합한 답변을 유도하여 UX/UI 디자인 프로세스 단계에서 생성되는 각 결과물의 적합도 수준을 높일 수 있습니다.
One-Shot Prompting 기법
One-Shot Prompting 기법은 거대언어모델(LLM)이 하나의 예시를 기반으로 유사한 패턴의 응답을 생성하도록 유도하는 프롬프트 엔지니어링 방식입니다. 이 기법은 사용자가 모델에게 제공하는 예시 하나만으로 맥락을 이해하고 요구사항에 부합하는 결과물을 생성하도록 돕습니다.
One-Shot Prompting의 주요 장점은 간결성과 효율성에 있습니다. 단순한 작업이나 특정 형식의 답변이 필요한 경우, 다수의 예시 없이도 일관된 결과를 얻을 수 있습니다. 특히 UX/UI 프로세스에서 반복적으로 이루어지는 단계별 과정마다 이전에 작업 된 좋은 결과 사례와 데이터를 활용할 수 있습니다. 이 기법은 낮은 학습 비용과 시간으로 일관성 있고 높은 정확성을 유지할 수 있어 비교적 가볍고 빠른 문제 해결에 활용하는 것이 적합합니다.
UX/UI 디자인 프롬프트 요청 예시 (1)
#디자인 피드백 요청
: 다음의 #예시를 참고해서 #요청에 대한 디자인 피드백을 작성해 줘.
#예시:
– 문제: 버튼이 너무 작아 사용자가 클릭하기 어렵습니다.
– 해결 방안: 버튼 크기를 44px 이상으로 확대하여 터치하기 쉽게 만드세요.
– 기대 효과: 사용자 접근성이 향상되고, 클릭 오류가 줄어들 것입니다.
#요청
: 검색 필드가 모바일 화면에서 작아 불편하다는 피드백’에 대한 문제, 해결 방안, 기대 효과를 작성해 줘.
[프롬프트에 대한 답변]
문제: 검색 필드가 모바일 화면에서 크기가 작아 입력이 어렵고 가독성이 떨어집니다.
해결 방안: 검색 필드의 높이를 48px 이상으로 확대하고, 내부 여백(padding)을 늘려 입력 공간을 확보하세요. 또한, 글자 크기를 최소 16px로 설정해 가독성을 높이세요.
기대 효과: 사용자 입력 경험이 개선되고, 모바일 사용자의 편의성과 만족도가 증가할 것입니다.
UX/UI 디자인 프롬프트 요청 예시 (2)
#사용자 경험 개선 아이디어 요청
: 다음의 #예시를 참고해서 #요청에 대한 사용자 경험 개선 아이디어를 작성해 줘.
#예시:
– 문제: 내비게이션 바가 복잡하여 사용자가 원하는 기능을 찾기 어렵습니다.
– 개선 방안: 내비게이션 바를 단순화하고 주요 기능을 드롭다운 메뉴로 재구성하세요.
– 기대 효과: 사용자가 원하는 기능을 더 빠르게 찾을 수 있어 만족도가 증가할 것입니다.
#요청
: 모바일 앱의 필터 옵션이 잘 보이지 않아 사용자가 불편을 겪는 상황’에 대한 문제, 개선 방안, 기대 효과를 작성해 줘.
[프롬프트에 대한 답변]
문제: 모바일 앱의 필터 옵션이 잘 보이지 않아 사용자가 원하는 옵션을 찾거나 활용하기 어려움을 겪고 있습니다.
개선 방안: 필터 옵션을 화면 상단 또는 고정된 위치로 이동시켜 시각적 노출을 강화하세요. 또한, 필터 옵션의 크기와 버튼을 확대하고, 직관적인 아이콘과 라벨을 추가해 사용자가 쉽게 인식할 수 있도록 개선하세요.
기대 효과: 사용자가 필터 옵션을 빠르게 인지하고 활용할 수 있어 탐색 효율성이 향상되고 앱 사용 만족도가 높아질 것입니다.
UX/UI 디자인 프롬프트 요청 예시 (3)
#UI 구성 요소 정의 요청
:다음의 #예시를 참고해서 #요청에 대한 UI 구성 요소를 정의해줘
#예시:
– 구성 요소 이름: 검색 바
– 구성 요소 유형: 텍스트 입력 필드
– 기능: 사용자가 검색어를 입력하고 결과를 필터링
– 위치: 화면 상단
#요청
: 로그인 버튼의 UI 구성 요소를 위와 동일한 형식으로 정의해줘.
[프롬프트에 대한 답변]
구성 요소 이름: 로그인 버튼
구성 요소 유형: 버튼
기능: 사용자가 계정에 로그인하기 위해 클릭하는 동작 수행
위치: 화면 우측 상단 또는 로그인 화면의 중앙 하단
One-Shot Prompting 기법은 간단한 작업에서 빠르고 정확한 결과를 얻을 수 있어 UX/UI 디자인 실무에서 생산성을 높이는 유용한 도구로 활용됩니다.
Few-Shot Prompting 기법
Few-Shot Prompting 기법은 거대언어모델(LLM)에 여러 개의 예시를 제공하여 모델이 원하는 작업의 맥락과 패턴을 더 잘 이해하고 일관성 있는 응답을 생성하도록 유도하는 프롬프트 엔지니어링 방식입니다. UX/UI 디자인에서는 이 기법을 사용해 보다 다양한 의견 수렴 또는 복잡한 작업을 수행하는 데 도움을 받을 수 있습니다.
Few-Shot Prompting은 다수의 예시를 활용해 모델이 특정 스타일, 논리 구조, 또는 기대하는 결과물의 형식을 학습하도록 도와줍니다. 이는 One-Shot Prompting보다 명확성과 예측 가능성이 높아, 보다 정교하고 복합적인 작업에 적합합니다. UX/UI 설계 작업에서는 사용자 페르소나 생성, 피드백 정리, 컴포넌트 라이브러리 구축 등과 같은 반복적이고 체계적인 작업에 활용될 수 있습니다.
UX/UI 디자인을 위한 프롬프트 예시 (1)
#디자인 피드백 작성 요청
: 아래 #예시를 참고해서 #요청에서 제공된 문제에 대한 디자인 피드백을 작성해줘
#예시 1:
– 문제: 버튼 텍스트가 작아 가독성이 떨어짐.
– 해결 방안: 텍스트 크기를 16px로 확대하고, 굵은 글꼴을 사용하세요.
– 기대 효과: 가독성이 향상되어 사용자 만족도가 증가할 것입니다.
#예시 2:
– 문제: 메뉴가 화면 상단에 고정되어 있지 않아 스크롤 시 접근이 어려움.
– 해결 방안: 고정 네비게이션 바를 추가해 언제든 접근 가능하도록 설정하세요.
– 기대 효과: 사용자 편의성이 개선되고 탐색 시간이 단축될 것입니다.
#요청
: 검색 결과 필터가 사용자에게 명확하지 않다는 피드백’에 대한 문제, 해결 방안, 기대 효과를 위와 동일한 형식으로 작성해줘.
[프롬프트 결과]
문제: 검색 결과 필터가 직관적이지 않아 사용자가 옵션을 이해하거나 활용하기 어렵습니다.
해결 방안: 필터 옵션에 직관적인 아이콘과 명확한 라벨을 추가하고, 필터 상태를 실시간으로 반영하는 시각적 피드백(예: 선택된 옵션 하이라이트)을 제공하세요.
기대 효과: 사용자가 필터 옵션을 쉽게 이해하고 활용할 수 있어 검색 경험이 개선되고, 사용자 만족도가 높아질 것입니다.
UX/UI 디자인을 위한 프롬프트 예시 (2)
#사용자 페르소나 작성 요청
: 아래 예시를 참고하여 사용자 페르소나를 작성해 줘.
#예시 1:
– 이름: 김유나
– 나이: 29세
– 직업: 마케팅 매니저
– 목표: 직관적인 인터페이스를 통해 빠르게 데이터를 정리하고 보고서를 작성하고 싶음.
– 고통점: 복잡한 UI로 인해 필요한 데이터를 찾는 데 시간이 걸림.
#예시 2:
– 이름: 박현수
– 나이: 35세
– 직업: 소매업 관리자
– 목표: 매장 관리에 필요한 주요 데이터를 한 화면에서 쉽게 확인하고 싶음.
– 고통점: 데이터가 여러 화면에 분산되어 있어 업무가 비효율적임.
#요청
: ‘교육용 앱을 사용하는 대학생 사용자’에 대한 페르소나를 위와 같은 형식으로 작성해 줘.”
[프롬프트 결과]
이름: 이지훈
나이: 22세
직업: 대학생 (경영학과 3학년)
목표: 강의 내용을 쉽게 이해하고, 학습 자료를 정리하며 시험 준비를 효율적으로 하고 싶음.
고통점: 학습 자료가 앱 내에서 비직관적으로 배치되어 있고, 원하는 강의 자료를 찾는 데 시간이 많이 소요됨.
UX/UI 디자인을 위한 프롬프트 예시 (3)
#UI 구성 요소 정의 요청
: 아래 예시를 참고해 UI 구성 요소를 정의해 줘.
#예시 1:
– 구성 요소 이름: 검색 바
– 구성 요소 유형: 텍스트 필드
– 기능: 검색어를 입력하고 관련 결과를 필터링.
– 위치: 화면 상단.
#예시 2:
– 구성 요소 이름: 필터 버튼
– 구성 요소 유형: 버튼
– 기능: 검색 결과를 필터링 옵션에 따라 정렬.
– 위치: 검색 바 오른쪽.
#요청
: 로그인 화면의 ‘비밀번호 재설정 링크’ 구성 요소를 위와 같은 형식으로 작성해줘.”
[프롬프트 결과]
구성 요소 이름: 비밀번호 재설정 링크
구성 요소 유형: 링크 텍스트
기능: 사용자가 비밀번호를 잊었을 때, 비밀번호 재설정 페이지로 이동할 수 있도록 안내.
위치: 로그인 버튼 아래 또는 로그인 필드 하단.
Few-Shot Prompting 기법은 다양한 UX/UI 작업에서 일관성과 정교함을 보장하며, 모델이 복잡한 요구사항을 충족하는 데 유용한 도구로 활용됩니다.
* AI를 활용한 UX/UI 디자인에 대한 다양한 정보와 소통을 원하는 분은
오픈 채팅방에서 함께 많은 디자이너 분들과 만나실 수 있습니다 : )
해당 콘텐츠는 유훈식 님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
모비인사이드의 뉴스레터를 구독해보세요
