<aside> 📎

참고 출처

1. v0 by Vercel — 이 실습에서 프롬프트로 화면을 생성하는 데 활용할 수 있는 AI 도구입니다.
2. Figma Make — Figma 환경에서 프롬프트로 화면을 생성하는 대안 도구입니다. </aside>

앞 이론 레슨에서 프롬프트 작성의 세 원칙(구체성·맥락·시각적 디테일)과 좋은/나쁜 프롬프트의 차이를 배웠습니다. 이번 실습에서는 그 원칙을 직접 적용해 AI 도구로 화면을 생성하고, 나쁜 프롬프트와 좋은 프롬프트의 결과를 직접 비교해 봅니다. 또한 반복 개선 프로세스를 경험하며 프롬프트 감각을 기릅니다.

실습: 프롬프트로 화면 생성하고 개선하기

실습 목표와 산출물

• 실습 목표
  • 프롬프트 작성 원칙을 적용해 AI 도구로 가상 서비스의 주요 화면을 생성합니다.
  • 나쁜 프롬프트와 좋은 프롬프트의 결과를 비교하고, 반복 개선으로 품질을 높입니다.
• 최종 산출물
  • 가상 서비스/개인 서비스 의 주요 화면 2~3개 (AI 생성)
  • 화면별 프롬프트 버전 기록(나쁜→좋은→개선)과 재사용 가능한 프롬프트 테플릿

Step 1. 가상 서비스 선택과 플로우 정의

• 만들고 싶은 가상 서비스를 하나 선택합니다(예: 식물 관리 앱, 독서 기록 앱, 운동 루틴 앱, 레시피 공유 앱).
• 선택한 서비스의 주요 플로우 1~3가지를 정의하고, 각 플로우에 해당하는 화면(홈·상세·등록 등)을 골라 적습니다.

Step 2. 나쁜 프롬프트 작성과 결과 확인

• 첫 번째 화면에 대해 의도적으로 '나쁜 프롬프트'를 작성합니다(추상·모호·맥락 없음). 예: "로그인 화면 만들어줘".
• AI 도구에 입력하고 생성된 결과물의 문제점(맥락 없음·범용적 디자인·필요 기능 누락)을 분석합니다.

Step 3. 좋은 프롬프트 작성과 결과 비교

• 동일한 화면에 대해 '좋은 프롬프트'를 작성합니다. 이전 레슨의 구성 요소를 모두 포함합니다.
  • 서비스 맥락, 화면 목적, 레이아웃 구조, 컬러 시스템(HEX), 타이포그래피, UI 컴포넌트와 상태, 구체적 수치
• AI에 입력하고, 나쁜 프롬프트와 좋은 프롬프트의 결과물을 나란히 놓고 비교 분석합니다.
• 점검 질문: 두 결과의 차이가 구체성·맥락·시각 디테일 중 어떤 요소에서 비롯되는가?