시작하기 전에

오늘 워크샵에서 여러분이 알아야 할 딱 세 가지

그라운드 룰

편하게 참여하기 위한 세 가지 약속입니다. 부담 없이 읽어보세요.

오늘의 목적

이번 워크샵에서 여러분이 경험할 세 가지입니다.

왜 필요한가

화면을 먼저 보여줘야 하는 진짜 이유

오늘의 핵심 흐름

문제정의부터 화면 확정까지, 오늘 워크샵에서 경험할 전체 프로세스입니다

프로토타입과 하네스의 역할 차이

두 접근 방식은 서로 경쟁하는 것이 아니라, 각각의 역할이 명확히 구분됩니다

사례 데모: 하나의 요구사항이 화면이 되는 과정

이미 하네스 엔지니어링으로 만들었던 화면을, 같은 요구사항으로 빠른 프로토타입 방식으로 다시 만들어본 사례입니다

MD 디리스팅 관리 화면 — 프롬프트 예시

아래는 실제 사용된 화면 생성 프롬프트입니다. 사용자, 문제, 데이터, 판단 기준, 핵심 액션이 모두 담겨 있어 AI가 실무적인 화면을 만들 수 있었습니다.

📋 복사해서 붙여넣기

너는 유통 MD 업무를 이해하는 시니어 프로덕트 디자이너이자 프론트엔드 프로토타입 개발자다.

MD용 디리스팅 관리 페이지 프로토타입을 만들어줘.

목적은 MD가 중분류별 디리스팅 후보를 확인하고, 삭제 등록 또는 관찰 등록한 뒤,
센터재고·점포재고·취급률 변화를 추적하고 이력관리할 수 있게 하는 것이다.

주 사용자는 편의점/리테일 MD다. 사용자는 디리스팅 대상 상품을 판단해야 하지만,
지금 당장 재고 때문에 삭제하지 못하는 상품도 있어 후보 관리와 재고 추적을 함께 해야 한다.

현재는 기존 대시보드, 상품 목록, 수기 파일 등으로 나눠 관리하고 있다.

성공 기준은 삭제 후보 확인, 일괄 처리, 관찰 등록, 재고 변화 추적,
상태 이력관리가 한 화면 흐름에서 가능한 것이다.

절대 틀리면 안 되는 기준:
센터재고 < 100만원 AND (점포재고 < 2,500만원 OR 취급률 < 15%)

2단계는 삭제 등록이고, 3단계는 관찰 등록이다. 삭제 등록과 관찰 등록을 섞지 마라.
"소진율 90%", "잔여재고 30개", "잔여수량 기준" 표현은 사용하지 마라.

업무용 대시보드 스타일로 KPI 카드, 필터, 테이블, 상태 배지, 액션 버튼, 기준 설명 영역,
mock data를 포함해 데스크톱 기준의 시연 가능한 웹 프로토타입으로 만들어줘.

만들어진 화면에서 확인할 포인트

• 누가 쓰는 화면인지 보이는가?
• 어떤 업무 문제를 푸는지 보이는가?
• 필요한 데이터와 액션이 들어가는가?
• MD와 의견을 나눌 수 있는 수준인가?
• AI가 임의로 추측한 부분은 없는가?

사례를 보고 판단한 보완 필요사항

처음 정리한 요구사항만으로도 화면 방향은 잡을 수 있습니다. 하지만 AI에 넣어 실무 화면을 만들려면 더 구체적인 답변이 필요합니다

8가지 문제정의 질문

AI에게 화면을 만들어달라고 하기 전에, 이 8가지 질문에 먼저 답해보세요

이미 생각하고 있던 화면을 만들어보기

각자 만들고 싶은 화면을 하나 정하고, 8가지 질문에 답한 뒤 AI에 넣어봅니다

어떤 화면을 선택할까요?

아래 중 하나를 골라서 시작해보세요. 여러분의 업무에서 반복적으로 마주치는 것을 선택하는 것이 가장 좋습니다.

작성할 내용 (3가지)

1. 8가지 질문 답변 — 위에서 정한 화면을 기준으로 Q1~Q8에 답해보세요
2. 화면 생성 프롬프트 — 아래 템플릿에 답변을 채워 넣으세요
3. 화면이 나온 뒤 보완해야 할 점 — AI가 만든 화면을 보고 무엇이 빠졌는지 메모하세요

화면 생성 프롬프트 템플릿

아래 템플릿을 활용해 v0, Claude, Gemini에 입력할 화면 생성 프롬프트를 작성합니다

📋 복사해서 붙여넣기

너는 유통 MD 업무를 이해하는 시니어 프로덕트 디자이너이자
프론트엔드 프로토타입 개발자입니다.

아래 요구사항을 바탕으로 업무용 화면 프로토타입을 만들어 주세요.

1. 만들고 싶은 화면: [1번 답변]
2. 해결하려는 문제: [2번 답변]
3. 주요 사용자: [3번 답변]
4. 사용 상황: [4번 답변]
5. 현재 대체재와 한계: [5번 답변]
6. 성공 기준: [6번 답변]
7. 사용자가 계속 쓰게 만들기 위한 핵심 기능: [7번 답변]
8. 추가 맥락과 제약: [8번 답변]
9. 필요한 화면: [9번 답변]
10. 절대 틀리면 안 되는 업무 기준: [10번 답변]

화면은 업무용 대시보드처럼 명확하게 구성해 주세요.
실제 업무처럼 보이는 mock data를 포함해 주세요.
필터, 목록, 상세, 상태값, 핵심 액션 버튼을 포함해 주세요.
사용자가 다음 행동을 판단할 수 있게 구성해 주세요.
MD와 화면을 보며 커뮤니케이션할 수 있는 수준으로 만들어 주세요.

어느 AI에 넣을까요?

화면이 나온 뒤 수정 요청하기

첫 화면은 완성본이 아닙니다. 찰흙처럼 계속 다듬어 가는 것이 바이브코딩의 핵심입니다

왜 수정이 중요한가

처음 결과가 마음에 들지 않아도 걱정 마세요. 찰흙처럼 계속 다듬을 수 있습니다. 사용자 피드백을 가정해 빠르게 수정해보는 과정이 핵심입니다.

수정 요청 예시 프롬프트

📋 복사해서 붙여넣기

현재 화면을 아래 피드백에 맞춰 수정해 주세요.

1. 체크박스 기반 일괄 처리 기능 추가
2. 목록 상단에 전체 선택, 선택 수 표시, 일괄 처리 버튼 추가
3. 상태값을 더 명확한 배지로 표시
4. 화면 상단에 판단 기준을 도움말 박스로 표시
5. 상세 화면에 변경 이력을 타임라인 형태로 표시
6. 다음 액션 버튼을 명확히 표시

망쳐도 괜찮습니다 — 우리에겐 되돌리기가!

화면이 깨지거나 원하지 않는 방향으로 수정됐나요? 걱정 마세요. 대부분의 AI 도구는 이전 버전으로 되돌릴 수 있습니다.

하네스 엔지니어링 설명

빠른 프로토타입 다음 단계 — 확정된 화면을 운영 가능하게 만드는 방법

프로세스 흐름

오늘의 마무리

오늘 워크샵에서 여러분이 가져가실 것들

오늘 배운 것 체크리스트

• 빠른 프로토타입과 하네스 구현의 차이를 이해했다
• 8가지 문제정의 질문에 답할 수 있다
• 화면 생성 프롬프트 템플릿을 사용할 수 있다
• AI가 만든 화면을 보고 수정 요청을 할 수 있다
• 내 업무에서 바이브코딩으로 만들 화면을 하나 정했다