AI와 함께하는 가상 제품 프로토타입 디자인(1) – 리서치

AI 도구 사용의 범위를 파악하기 위해 AI를 최대한 사용해서 가상의 제품 프로토타입을 만들어보는 것을 목표로 작업을 진행 해보기로 했습니다. 이 프로젝트는 최대한 빠른 결과물을 만들어보기 위해서 사람의 검증 단계를 최소화 했습니다.

프로토타입 초안까지는 반나절정도 걸린 것 같네요.(사용 방법과 도구를 찾는 시간을 포함) 몇 번의 반복으로 이 프로세스가 익숙해지고 저만의 프롬프트가 정리되면 좀더 빠르게 정리할 수 있게 되겠죠.

1.가상의 제품 설정과 가설(with Chat GPT)

먼저 GPT에게 제가 처음 생각했던 발상을 간단하게 설명하고 제품의 이름과 기본 설명을 추천 받았습니다. 프로젝트 시작에서 검증 단계를 최소화한다고는 했지만 제가 생각하는 내용과 GPT가 생각한 내용이 일치 하지 않는 포인트가 있기 때문에 내용은 한번 더 다듬어야 합니다.

시작: 흩어져있는 가전·가구의 AS기록, AS예약, 기사님 명함을 매번 하나씩 찾는 행동이 귀찮다고 느껴졌습니다

가상의 제품 이름: Keep it Home

제품 설명:

기억할 필요 없는 가전 관리 — 우리집 제품 관리의 모든 기록을 하나로 묶는 서비스. 집 안의 가전 AS 이력을 단일 플랫폼에서 관리할 수 있도록 설계한 모바일 서비스입니다. 브랜드별로 흩어진 제품 정보, 보증기간, 수리 기록, 알림 등을 하나의 구조로 통합해 사용자가 유지보수 현황을 쉽게 파악할 수 있도록 하는 것이 핵심 목표입니다.

2.가상의 사용자 인터뷰(with Chat GPT)

사용자 인터뷰는 사용자가 겪는 문제(Pain point)를 정의하고 이후 만들어질 화면에 반영 하기 위해 필요한 단계 입니다. 사람의 실제 경험을 인터뷰 할 수 있으면 좋겠지만 시간과 환경 여건상 어려울 경우에는 각자 사용하는 LLM 도구로 내용을 정리할 수 있습니다. 저는 ChatGPT로 킵잇홈을 위한 사용자 인터뷰를 진행 해봤습니다.

*최소 3명 이상의 인터뷰를 진행하는 것이 좋지만 지금 하는건 가상 제품 프로젝트이기 때문에 빠른 진행을 위해 1명만 진행 했습니다.

*사용자 인터뷰 목적: 사용자의 행동, 문제 발생 패턴, 심리적 장벽, 기존 방식의 한계를 파악하기 위함

2.1.가상 인터뷰 설정 준비물

인터뷰를 할 때 AI 모드 느낌(장황하게 늘어놓는 설명)을 지우기 위해 퍼소나, 역할 규칙, 인터뷰 진행 규칙을 작성하고 시작하는 것이 좋습니다.

1) 퍼소나 설정

이름: 김지현
나이: 34세
직업: 직장인
가구원: 2인

2) 규칙 설정

역할 규칙 예시) 모든 답변은 다음 규칙을 반드시 따른다:

문장은 짧고 자연스럽게, 실제 사람이 말하는 톤으로 말한다.
경험 중심으로 말하며, 기억이 불완전해도 그대로 표현한다.
절대 분석·요약·추론·정리·조언을 하지 않는다.
3~5문장 이내로만 대답한다. (실제 인터뷰처럼 짧게)

인터뷰 진행 규칙 예시)

내가 질문하면, 당신은 지정된 페르소나의 관점으로만 답한다.
질문 하나에 답변 하나씩만 한다.
결론·요약을 시도하지 않는다.
절대 스스로 다음 질문을 만들거나 인터뷰를 주도하지 않는다.

2.2. 인터뷰 진행

규칙 설정 후 킵잇홈의 핵심 메시지인 “”에서 10개의 질문을 만들어 진행합니다.

2.3. 인터뷰 결과 분석

인터뷰 결과는 감정적인 경험, 행동 기반의 경험, 기존 방식의 한계, 문제의 근본 원인을 중심으로 정리하고, 그 내용에서 핵심 Pain point를 정의 합니다

정리 예시) 반복 포인트

AS 관련 정보(모델명, 구매일, AS 연락처)가 여러 곳에 흩어져 있어서 한 번에 찾기 어렵다.
쇼핑몰 계정/주문내역을 기억 못 해서 반복 검색해야 한다.
문제 발생 시 초기 정보 수집(모델명, 사진, 구매정보) 자체가 매번 처음부터 다시 시작이다.

핵심 Pain points

제품별 AS/구매/보증 정보를 한 곳에 자동으로 정리해주는 기능: 핵심은 “흩어져 있다”이므로 통합 관리가 최우선.
구매 정보(날짜·구매처)를 빠르게 찾을 수 있는 구조: 반복 로그인·검색·스크롤 등 시간 소모를 제거해야 함.
문제 발생 시 즉시 행동(AS 요청)까지 이어지는 단일 플로우 제공: “정보 찾기 + 연락처 찾기 + 예약”을 하나로 묶어야 불편이 사라짐.

➡ 정보 단일화, 보증기간 확인, 영수증/AS 정보 빠른 조회

3. 화면 흐름 정의

3.1. 핵심 기능

사용자 문제에 대한 가설을 빠르게 검증하기 위해 브랜드 경험, 고급 기능과 같은 ROI가 낮은 요소는 우선 제외하고 Pain point를 해결하기 위한 최소 기능만 정리합니다.

제품 등록: 제품명, 구매일, AS연락처/보증기간, 영수증 이미지, 메모
제품 목록: 등록 제품 목록을 카드 형태로 확인(제품명, 보증기간 D-day, 최근 수정일), 제품명 검색
제품 상세: 제품 기본 정보, 영수증 이미지 보기, AS 연락처, 메모, 보증 만료 D-day
입력-수정 플로우: 등록 → 수정 → 삭제
푸시 알림 또는 내부 알림: 단일 이벤트 기반(보증 만료 30일 전)

3.2.화면 Top level

홈(제품 목록)
제품 등록
제품 상세
설정(기본 프로필, 알림 On/Off)

3.3. IA

Information Architecture를 AI로 생성해주는 도구는 아직 없는 것으로 알고 있어서 GPT와 제미나이에게 요청하고, 이해가 쉽고 필요한 정보만을 정리 했습니다.

(1) IA Tree

GPT가 구조를 시각적으로 표현해준 것이 직관적이라 사용하기로 했습니다.

(2) Content Mapping

같은 프롬프트로 chat gpt는 간결한 정리를 하고 다음 요청을 선택 하도록 하는 반면 제미나이는 입력 필드 상세 내용까지 한꺼번에 작성합니다. 지금 단계에서는 간결한 정보만을 두고 진행 하겠습니다.

화면	콘텐츠	기능
홈	제품 카드	상세 진입
홈	검색	제품명 검색
제품 등록	입력폼	등록 저장
제품 상세	기본 정보	수정/삭제
제품 상세	영수증 이미지	확대 보기
설정	알림 설정	만료 30일 전 알림 On/Off

4. 화면 구성하기

4.1. 와이어프레임 레벨 IA 트리

여기서 AI는 화면별 와이어프레임 레이아웃 기준까지 잡아서 말하지만 지금 단계에서 집중할 내용은 아니기 때문에 GPT가 작성한 내용에서 더 추가하거나 삭제할 것은 없는지 한번 더 와이어프레임 화면 구성을 읽습니다.

4.2. 화면 구성 예시 (홈: 제품 목록)

구성을 정리하거나 써내려가며 화면이 머릿속으로 그려질 정도의 내용을 작성했습니다.

1) 상단 바

앱 타이틀 또는 로고
우측: 설정 아이콘

2) 검색 영역

검색 입력창(placeholder: 제품명을 입력하세요)
Clear 버튼(선택)

3) 제품 카드 목록

썸네일(없으면 아이콘)
제품명(글자)
보증 만료 D-day(글자)
최근 수정일(Secondary)
Arrow 아이콘(상세 이동)

*Empty State: “아직 등록된 제품이 없습니다” + CTA “제품 등록하기”

4.3. 컴포넌트 스펙 예시(홈: 제품 목록)

프로토타입으로 만들 모든 페이지에 대해 대략적인 화면 구성을 정리하고, 그 다음에는 컴포넌트 상세 스펙을 요청 합니다. 화면 구성을 할 때 상세 스펙도 함께 작성할 수도 있지만 저는 단계별로 진행 하는 것이 단계별로 정보를 정리하는 것을 선호하여 구분 작성 합니다. 이 것을 모든 화면에 대해 정리해두면 GPT가 프로토타입에 필요한 컴포넌트 목록을 정리 할 수 있습니다.

1) 화면 목적

등록된 제품 목록 조회
제품명 검색 및 상세 이동
제품 등록 플로우 진입

2) 상단 바

구성 요소: 앱 타이틀 또는 로고, 설정 아이콘
인터랙션: 설정 아이콘 클릭 → 설정 화면 이동

3) 검색

구성 요소: Input field, Clear 버튼(X 아이콘)
기능: 입력 시 실시간 필터링 (제품명을 기준으로 부분 일치)
Placeholder: “제품명을 입력하세요”
예외: 공백 입력 시 전체 목록 표시

4) 제품 카드

제품명: 글자(Primary)
보증일: 글자(Secondary, e.g.2026년 7월 30일까지 D-365)
아이콘: arrow(>)
클릭 액션: 상세 화면 이동

*Empty State: “등록된 제품이 없습니다” + CTA “제품 등록하기”

4) FAB(+버튼)

아이콘: add(+)
위치: 오른쪽 하단 고정
클릭 액션: 제품 등록 화면 이동

5) 피드백

검색 결과 없음 상태
로딩(스켈레톤 카드 3~5개)
데이터 없음(empty)

4.4. Flow Chart

앞서 정리한 화면 구성과 컴포넌트 스펙을 영어로 변환하고, 그 내용을 피그잼의 ‘Make templates and diagrams’ 기능을 사용하여 플로우 차트를 생성 했습니다(예시: 홈 화면) AI가 그린 플로우 차트를 보며 각 화면/기능이 어디서 시작되고 어디서 끝나는지, 조건(Yes/No)이 어떻게 이어지는지를 확인합니다.

IA 트리, 화면 구성, 컴포넌트 스펙, 플로우 차트가 정리 되었으니 이제 가볍게 프로토타입을 만들어보겠습니다.

5.프로토타입

화면 구성과 컴포넌트 스펙으로 간단한 화면 정의 문서를 만들었습니다. 저는 워드 파일로 저장했고 피그마 메이크는 영어 자연어를 더 정확하게 인식하기 때문에 Chat GPT에게 문서의 내용을 영어로 바꿔달라는 요청을 했습니다.

피그마 메이크가 5개 화면의 내용을 읽고 결과를 만들어낸 시간은 3분이네요. 생각했던 것보다 빨라서 놀랐습니다. 결과물은 정말 요청했던 내용에 충실하게 만들어져있네요. 예외 케이스도 잘 반영 되어 있습니다. 내가 생각한 것을 구현하려면 화면 구성 내용을 간단하지만 최대한 분명하게 작성하는 것이 중요할 것 같습니다.

요청 내용에 적혀 있던

구매일 field:
-Type: Date picker
-Required: Yes

라는 내용을 읽고 Date picker 캘린더도 구현 되어 있습니다.

인풋에 내용을 모두 입력하고 저장을 누르면 제품의 상세 화면이 표시 됩니다. (DB나 API 연결 없이 화면 구현만 되어 있기 때문에 실제로 저장되지는 않습니다)

홈 화면에 등록된 제품 카드에 약간의 수정을 더해봤습니다.

뱃지 형태로 D-206 이라고 적혀 있던 것을 글자로 바꿔달라는 간단한 요청이었는데 바로 반영을 해주네요.

피그마 메이크는 베타 상태인 걸로 알고 있는데 이 정도의 구현이라면 실제 제품 전체 화면을 만들기에는 무리가 있지만 핵심 기능만 빠르게 내부에서 볼 프로토타입을 만들어 보기에는 충분한 수준이라고 생각 됩니다. (플로팅 버튼이 화면을 벗어나있다는 것과 같은 작은 문제 등등)

이제 다음은 프로토타입의 비주얼 UI를 AI와 함께 해볼 계획입니다.