ChatGPT 실무 활용기
② PRD작성-UI제작까지
사용자 중심 UX 실무에 바로 쓰는 프롬프트 만들기
지난 글에서 ChatGPT로 문제 정의부터 HMW(How Might We)까지 도출한 것에 이어, 이번에는 PRD(제품 요구사항 문서) 작성부터 MVP 화면 정의, 그리고 Readdy라는 툴을 이용해 UI 화면을 만들어본 과정을 이야기해 보겠습니다.
이번에도 서비스 콘셉트는 그대로 "목적지 주변 주차 공간 정보 제공"으로 이어갔습니다.
PRD 작성
문서 틀부터 함께 설계하기
PRD를 작성하기 전에, 먼저 "어떤 정보를 포함해야 하지?"를 ChatGPT에게 던지는 것부터 출발했습니다.
프롬프트 :
#먼저 PRD에 포함되어야 하는 주요 섹션을 제시해 줘.
그러자 깔끔한 리스트가 나왔습니다.
[결과]
개요, 문제 정의, 퍼소나 요약, 제품 목표와 경험 목표, 데이터 연동 요건, 핵심 기능 정의, 유저 플로우까지. PRD의 큰 골격을 먼저 잡아두니 앞으로 채워질 내용을 충분히 연상할 수 있었습니다.
프롬프트 :
#이대로 작성해 줘.
#표와 리스트를 활용하되, 내용을 너무 요약하지 말아 줘.
화면 설계를 위한 문서로 사용한다고 생각하고 표와 리스트 활용을 요구했는데, 그렇게 했을 때 내용을 너무 축약하는 경향을 보였던 것이 생각났어요. 그래서 내용 손실을 방지하기 위해 '너무 요약하지 말아 달라'는 요청을 추가했습니다.
[결과]
요약 없이 풍성한 작성을 요구했는데도 핵심 기능 정의 부분이 기대보다 부실하게 작성되었습니다. 이 정도로는 바로 화면을 만들기에 무리일 것 같아서, 다른 프롬프트로 내용 보완을 요청했습니다.
프롬프트 :
#HMW를 기반으로 기능 아이디어를 더 확장하고, 기능별 UX/UI 고려사항과 데이터 연동 범위까지 정리해 줘.
이 요청을 통해 얻은 결과는 만족스러웠습니다. HMW 하나당 기능 아이디어를 5개씩 뽑아냈고 우선순위까지 매겨진 리스트가 완성됐거든요. 덕분에 이후 과정이 훨씬 수월해졌습니다.
[결과]
MVP 화면 정의
정보 구성으로 화면의 뼈대 잡기
이제 본격적으로 화면 구성을 시작할 차례입니다.
프롬프트 :
#사용자 흐름을 기반으로 MVP 화면 리스트를 번호를 매겨 정리하고 각 화면에 필요한 정보 구성과 HMW/기술/데이터/검증 포인트까지 정리해 줘.
이 요청 하나로,
어떤 화면이 필요한지
어떤 기능이 담겨야 하는지
어떤 데이터를 가져와야 하는지
어떤 경험 목표를 검증할 수 있을지
한눈에 정리된 표를 얻을 수 있었습니다.
[결과]
UI 초안 생성
최적의 프롬프트로 빠르게 UI 구현하기
MVP 화면 리스트가 정리된 상태에서, Readdy라는 툴을 활용해 UI를 생성해 보기로 했습니다.
Readdy는 원래 Creatie에 있던 UI 생성 기능을 업그레이드한 AI기반 툴로, 원하는 앱/웹사이트의 기능과 스타일을 자연어로 설명하면 이를 해석하여 UI를 생성하고 즉시 사용할 수 있는 프론트엔드 코드로까지 변환해 줍니다. UI 생성을 위해서 ChatGPT, Claude, Visily, Scene.io, Figma 등 여러 툴을 테스트해 봤는데요, 같은 프롬프트를 넣었을 때 기대하는 퀄리티가 나온 툴은 Readdy가 독보적이었습니다.
UI 초안 생성을 위한 프롬프트는 이제까지의 과정을 누구보다 잘 이해하고 있는 GPT에게 요청했습니다.
프롬프트 :
#1번 앱 실행/홈 화면을 다른 AI 툴에서 그려보도록 하고 싶어.
#완성도 있는 화면 구성 요청을 위한 프롬프트를 추천해 줘.
#정보 구성 : 목적지 검색창, “간단 추천 모드" 진입 안내, 경로 기반 추천 주차장 요약 카드(Top 1~3), 현재 위치 기반 지도
#한글, 영어 두 가지로 줘.
[결과]
잘 정리된 프롬프트와 함께, 완성도 있는 화면 생성을 위한 팁도 제공해 줍니다.
이 프롬프트를 Readdy에 그대로 붙여 넣었더니 첫 번째 화면 결과물이 금세 만들어졌습니다.
프롬프트 :
#모바일 앱 홈 화면의 와이어프레임을 그려주세요.
1. 화면 최상단에는 목적지 검색창이 있습니다. (예: "어디로 가시나요?")
2. 검색창 아래에는 '간단 추천 모드' 진입 안내 배너가 있습니다. 디지털 친숙도가 낮은 사용자를 위한 쉬운 예약 안내 메시지가 포함되어야 합니다.
3. 그 아래에는 Top 3 추천 주차장이 요약 카드 형태로 가로 스크롤됩니다. 각 카드는 주차장명, 거리, 요금, 빈자리 수, 예약 가능 여부를 포함합니다.
4. 화면 하단에는 현재 위치 기반 지도가 전체 폭으로 표시되며, 추천 주차장 위치가 핀으로 나타납니다.
#전체 스타일은 심플하고 실용적이며, 사용자 친화적인 구조로 설계해 주세요.
[결과]
딱 봤을 때 이렇게까지 바로 나오네? 싶을 정도로 의도한 구조를 꽤 잘 반영했고, 심지어 더 마음에 드는 결과를 선택할 수 있도록 두 가지 버전으로 제공해 주었습니다.
물론 수정이 필요한 부분도 보이는데, 이럴 때는 이어서 원하는 수정을 요청하면 (이 또한 자연어로) 바로 반영도 해줍니다. '목적지 검색 화면' 수정을 예시로 들겠습니다.
'목적지 검색 화면' 수정 프롬프트 :
#검색창에서 특정 경로를 검색하고 난 결과 화면으로 수정해 줘.
#지도상에는 검색된 경로가 표시되어있어야 해.
#검색된 경로 근처에 주차장이 표시되어있어야 해.
[결과]
이런 방식으로 홈 화면부터 목적지 검색, 주차장 상세, 예약/입차/정산 화면까지 쭉 생성 및 수정보완을 진행했습니다.
좋았던 점, 아쉬웠던 점
이번 단계를 수행하면서 느낀 점은 이랬습니다.
좋았던 점
1) ChatGPT에게 MVP별 정보 구성을 선행시킨 것이 의도와 가까운 UI 화면을 만드는 데 확실히 도움이 되었다.
2) 요건을 이해하고 있는 ChatGPT에게 완성도 있는 화면 생성을 위한 프롬프트를 요청하고, 거기에 원하는 요소를 조금 더 추가하는 방식이 효과적이었다.
3) 정보 구성안이 디테일하지는 않았는데도, Readdy는 알아서 더 디테일한 설정을 추가해 완성도 있는 화면을 완성시켰다.
아쉬운 점
1) 무료 버전이라 그런지, 플로우가 아닌 한 화면 단위 생성만 가능해서 아쉬웠다.
2) 피그마 export 기능이 유료여서 직접 고도화까지 작업을 해보지 못했다.
3) 무료로 생성 가능한 화면 개수가 많지 않아 여러 계정을 써야 했다.
실제 프로젝트라면 구매를 고려해야 할 것 같지만 이렇게 UI 초안을 생성하고 피그마로 바로 가져가 고도화하는 식으로 활용하면 업무 속도를 확실히 줄일 수 있을 것 같다고 느꼈습니다.
다음 스텝은?
생성한 UI를 기반으로 사용성 검증 실험을 진행할 예정입니다. 특히, MVP 화면 정의 시 정리해 둔 검증 포인트를 기준으로 경험 목표 달성 여부를 체크해보려고 합니다.
지금은 AI와 함께하는 전체 프로세스를 빠르게 경험해 보는 중인데요, 각 단계 산출물을 살펴보면서 어느 부분이 더 고민이 필요한지, 원하는 결과물을 위해서 프롬프트를 어떤 식으로 정교화해야 할지 감을 잡아가는 중입니다.
