UX/UI 디자인을 위한 구조화된 프롬프트 기법
구조화된 프롬프트 기법은 거대언어모델(GPT 등)을 활용해 특정 목적의 UX/UI 디자인 결과물을 생성하기 위해 요청을 체계적으로 구성하는 방법론입니다. 명령, 맥락, 예시, 출력 데이터의 4가지 원칙을 조합해 언어모델이 높은 정확도와 일관성을 갖춘 결과를 제공하도록 설계됩니다. 이러한 구조화 기법은 사용자의 요구를 명확히 전달하고 AI의 응답 품질을 높이는 데 핵심적입니다. 프롬프트의 구조화는 복잡한 디자인 작업을 체계화하고 효율적으로 진행할 수 있는 토대를 제공합니다.
타입A: 명령 + 출력 데이터
가장 단순한 형태의 프롬프트로, 명령과 결과에 대한 명확한 지시만 포함합니다. 이 유형은 빠르고 간단한 작업을 수행할 때 적합합니다.
[프롬프트 예시]
명령: “모바일 앱 로그인 화면을 위한 3가지 레이아웃 아이디어를 제시해. 간결한 레이아웃이어야 하며, 사용자 편의성을 극대화해.”
출력:
- 레이아웃 A: 중앙에 큰 로그인 버튼과 하단에 계정 찾기 링크.
- 레이아웃 B: 소셜 로그인 옵션과 일반 로그인 버튼을 병렬 배치.
- 레이아웃 C: 로그인 폼 위에 브랜드 로고를 배치하고, 하단에 ‘회원가입’ 버튼 추가.
[출력 예시]
레이아웃 A:
- 구성: 화면 중앙에 큰 로그인 버튼과 상단에는 앱의 브랜드 로고, 하단에는 ‘계정 찾기’ 및 ‘비밀번호 찾기’ 링크.
- 장점: 로그인 버튼이 강조되어 주요 작업을 쉽게 수행할 수 있으며, 계정 복구 옵션이 바로 보여 사용자 불편을 줄임.
레이아웃 B:
- 구성: 상단에 소셜 로그인 버튼(예: Google, Facebook)과 일반 로그인 버튼을 병렬 배치, 하단에는 ‘회원가입’ 버튼 추가.
- 장점: 다양한 로그인 옵션을 한눈에 제공해 선택의 폭을 넓히고, 새로운 사용자에게 가입 경로를 명확히 제시.
레이아웃 C:
- 구성: 상단에는 브랜드 로고와 환영 문구, 화면 중앙에는 이메일 및 비밀번호 입력 필드, 하단에 ‘로그인’ 및 ‘회원가입’ 버튼.
- 장점: 전통적인 로그인 흐름을 따르면서도 브랜드와 사용자 친화성을 강화.
타입B: 명령 + 맥락 + 출력 데이터
맥락 정보를 추가하여 명령에 구체성과 방향성을 더합니다. 디자인 작업의 배경을 제공해 좀 더 적합한 결과를 도출합니다.
[프롬프트 예시]
명령: “생산성 앱의 대시보드 화면을 설계해 줘. 직관적이고 미니멀한 디자인으로 작업해 줘.”
맥락: 일정관리와 우선순위에 따른 업무 정리를 중요하게 생각하는 20-30대 직장인을 위한 생산성 앱이야.
출력:
- 일정 관리 섹션: 상단에 캘린더와 할 일 목록 표시.
- 작업 우선순위 섹션: 드래그 앤 드롭 방식으로 항목 정렬 가능.
- 추가 기능: ‘오늘의 목표’를 강조하는 별도 영역 배치.
[출력 예시]
생산성 앱 대시보드 설계: 직관적이고 미니멀한 디자인 레이아웃 구성
# 헤더 (상단 바)
- 앱 로고: 좌측 상단에 간단한 로고 또는 앱 이름 표시.
- 날짜 및 시간: 헤더 중앙에 현재 날짜와 시간 표시.
- 설정 아이콘: 우측 상단에 사용자 설정 및 알림 액세스를 위한 아이콘.
# 일정 관리 섹션 (상단)
- 캘린더
– 화면의 상단 중앙에 위치.
– 월간/주간/일간 보기 전환 가능.
– 현재 날짜 강조 (예: 색상 강조 또는 테두리 표시). - 할 일 목록
– 캘린더 하단에 “오늘의 일정” 및 “다가오는 일정”을 미리 보기 형식으로 나열.
– 각 일정 항목에는 시간, 제목, 완료 체크박스 표시.
# 작업 우선순위 섹션 (중단)
- 드래그 앤 드롭 목록
– 카드 형태로 작업 표시.
– 각 작업 항목에 우선순위(높음, 중간, 낮음)를 색상 또는 라벨로 표시.
– 사용자가 손쉽게 순서를 변경할 수 있도록 드래그 앤 드롭 방식 지원.
- ‘추가’ 버튼
– 새로운 작업 항목 추가 버튼(+)은 우측 하단에 둬서 직관성을 높임.
# 오늘의 목표 섹션 (하단)
- 별도 강조 영역
– 화면 하단 또는 우측에 “오늘의 목표” 강조 영역 배치.
– 최대 3개의 주요 목표를 설정 가능하며, 각각 상태(진행 중, 완료)를 나타내는 체크박스 포함.
- 시각적 피드백
– 목표 완료 시 애니메이션 효과(예: 체크박스 클릭 시 불꽃 효과).
- 추가 기능
– 다크 모드: 직장인의 다양한 작업 환경에 맞게 다크/라이트 모드 전환 지원.
– 알림 배너: 중요한 일정이나 우선순위 작업에 대해 상단에 간단한 알림 배너 표시.
타입C: 명령 + 맥락 + 예시 + 출력 데이터
구체적인 예시를 포함해 원하는 결과물의 형태와 의도를 명확히 전달합니다. 복잡하거나 추상적인 작업에 특히 유용합니다.
[프롬프트 예시]
명령: 직관적인 도서 추천 인터페이스 디자인을 제안해 줘.
맥락: 우리는 신규 독서 앱을 개발 중이야. 타깃 사용자는 18-35세의 젊은 세대가 대상이야.
예시: ‘Goodreads’의 추천 섹션과 같이 간결하지만 세부 필터링 옵션이 있는 사례를 참고해.
출력:
- 추천 도서 카드: 각 책 표지, 제목, 평점 포함.
- 필터링 옵션: 장르, 저자, 평점 순 정렬 버튼 제공.
- 인터페이스 레이아웃: 사용자의 이전 독서 데이터를 기반으로 추천 책 표시.
[출력 예시]
직관적인 도서 추천 인터페이스 디자인 제안
1. 추천 도서 카드
# 구성 요소
- 책 표지 이미지 (비율 3:4)
- 책 제목 (강조된 타이포그래피)
- 별점 평점 (1~5점, 평균값과 사용자 리뷰 수 표시)
- 간단한 태그 (예시: “베스트셀러”, “신간”, “추천 장르” 등)
- ‘저장하기’, ‘읽고 싶어요’ 버튼 추가
# 카드 상호작용
- 터치하면 팝업/새 페이지로 상세 정보 (줄거리, 독자 리뷰) 제공
- 스와이프로 다음/이전 추천 도서 탐색
2. 필터링 옵션
- 장르 필터: 드롭다운 또는 태그형 선택 메뉴 (예시: “SF”, “로맨스”, “역사”, “자기 계발”)
- 저자 필터: 입력창 또는 인기 저자 태그
- 평점 순 정렬: 슬라이더로 최소 평점 설정 (예시: 4.0 이상)
- 추천 방식 선택:
– “읽은 책과 비슷한 책”
– “유행 중인 책”
– “커뮤니티가 많이 읽은 책”
3. 인터페이스 레이아웃
- 상단 헤더:
– “오늘의 추천” 섹션
– 개인화된 문구 (예시: “OOO님, 이런 책은 어때요?”)
- 중앙 섹션:
– 추천 도서 카드가 스크롤 가능한 가로 슬라이드 형태
– “다음 추천 보기” 버튼으로 추가 로드
- 하단 섹션:
– 추천 옵션 및 필터링 도구
– 필터 적용 시 실시간 반영
4. 특별 기능
- 소셜 기반 추천: 친구가 읽은 책/좋아요 누른 책 표시
- 챗봇 도우미:
– “어떤 기분인가요?” 또는 “요즘 관심 있는 주제는?”과 같은 질문으로 맞춤 추천 - 읽은 책 데이터 시각화:
– 사용자의 장르/저자 선호도 그래프 제공
5. 미적 요소
- 젊은 세대에 맞는 미니멀한 디자인
- 부드러운 모션 효과 (카드 이동, 필터 반영 시 애니메이션)
- 밝은 컬러 테마와 다크 모드 제공
이 디자인은 개인화된 경험과 직관성을 중시하여 젊은 세대의 니즈에 맞도록 설계되었습니다.
타입D: 명령 + 입력 데이터 + 출력 데이터
명령과 함께 구체적인 입력 데이터를 제공하여 결과물의 정밀도를 높입니다. 사용자 데이터나 기존 정보 기반 작업에 적합합니다.
[프롬프트 예시]
명령: “다음 사용자의 피드백 데이터를 참고해 e-커머스 웹사이트의 제품 추천 레이아웃을 개선해 줘.
입력 데이터: 1) 주요 문제: 추천 항목이 너무 많아 과부하를 느낌. 2) 개선 요구: 3~5개의 주요 추천만 보여줄 것.”
출력:
- 주요 추천 섹션: 상단에 3개의 제품만 강조.
- 추가 추천 섹션: ‘더 보기’ 버튼으로 나머지 항목 숨김.
- 레이아웃 배치: 추천 제품을 가로 슬라이더 형식으로 표시.
[출력 예시]
개선된 제품 추천 레이아웃 설계
1. 주요 추천 섹션
- 위치: 웹사이트의 상단, 사용자 시야 범위 내(Above the Fold).
- 추천 항목 수: 최대 3개.
- 디자인 요소:
– 각 제품은 카드 형식으로 표시(이미지, 이름, 가격 강조).
– 제품 간 간격을 적절히 두어 깔끔한 디자인 유지.
– CTA(Call-to-Action) 버튼 추가(예: “구매하기” 또는 “장바구니에 추가”).
2. 추가 추천 섹션
- 구현 방식: ‘더 보기’ 버튼을 통해 추가 제품을 가려놓음.
- 동작 방식:
– ‘더 보기’ 클릭 시 가로 슬라이더 확장 또는 새 섹션 표시.
– 추가 항목을 적재적소에 나열해 사용자가 과부하를 느끼지 않도록 유도.
3. 레이아웃 배치
- 가로 슬라이더 형식:
– 주요 추천 제품을 한 화면에 담아 수평으로 스크롤 가능.
– 양쪽 화살표 버튼으로 탐색 지원.
– 슬라이더 하단에 점(Indicator)을 추가해 현재 위치를 표시. - 반응형 디자인:
– 데스크톱: 가로로 3개 배치.
– 태블릿/모바일: 가로로 1~2개 배치.
4. UX 향상 요소
- 개인화 추천: 사용자의 최근 검색/구매 데이터를 기반으로 추천 항목 선별.
- 로딩 시간 최소화: Lazy loading으로 추가 추천 항목 로드 속도 최적화.
- 시각적 강조: 주요 추천 제품에 약간의 애니메이션(예: 강조 효과) 추가.
이 레이아웃은 사용자 피드백을 적극 반영해 주요 제품에 집중도를 높이고, 추가 항목을 깔끔하게 분리해 가독성과 사용성을 향상시킬 것입니다.
이 네 가지 타입의 구조화된 프롬프트 기법은 UX/UI 디자인에서 효율적이고 창의적인 결과를 도출하며, AI와의 협업 효율성을 극대화하는 데 중요한 도구가 됩니다.
* AI를 활용한 UX/UI 디자인에 대한 다양한 정보와 소통을 원하는 분은
오픈 채팅방에서 함께 많은 디자이너 분들과 만나실 수 있습니다 : )
