Codex use case
사용자 스토리로 UI 목업 만들기
제품 피드백, 이슈 스레드, 디자인 자료를 바탕으로 팀이 함께 검토하고 구현할 UI 목업을 만드세요.
Codex로 Slack, Linear, Google Drive에서 제품 피드백을 모아 사용자 스토리와 제약 조건으로 정리한 뒤, ImageGen으로 UI 목업을 만드세요. 디자인 방향이 정해지면 선택한 목업을 실제로 작동하는 프로토타입으로 구현하세요.
Best for
- 여러 곳에 흩어진 피드백을 모아 기능의 디자인 방향을 정하려는 제품 팀
- 구현에 앞서 원자료를 바탕으로 목업을 만들려는 디자인 팀과 엔지니어링 팀
- 사용자 피드백을 반영해 빠르게 개선을 거듭하려는 팀
Contents
사용자 스토리로 UI 목업 만들기
제품 피드백, 이슈 스레드, 디자인 자료를 바탕으로 팀이 함께 검토하고 구현할 UI 목업을 만드세요.
Codex로 Slack, Linear, Google Drive에서 제품 피드백을 모아 사용자 스토리와 제약 조건으로 정리한 뒤, ImageGen으로 UI 목업을 만드세요. 디자인 방향이 정해지면 선택한 목업을 실제로 작동하는 프로토타입으로 구현하세요.
Codex로 Slack, Linear, Google Drive에서 제품 피드백을 모아 사용자 스토리와 제약 조건으로 정리한 뒤, ImageGen으로 UI 목업을 만드세요. 디자인 방향이 정해지면 선택한 목업을 실제로 작동하는 프로토타입으로 구현하세요.
Related links
Best for
- 여러 곳에 흩어진 피드백을 모아 기능의 디자인 방향을 정하려는 제품 팀
- 구현에 앞서 원자료를 바탕으로 목업을 만들려는 디자인 팀과 엔지니어링 팀
- 사용자 피드백을 반영해 빠르게 개선을 거듭하려는 팀
Skills & Plugins
- 승인된 피드백 채널과 스레드에서 사용자 스토리, 사용자가 겪은 불편, 인용할 만한 발언, 아직 답을 찾지 못한 질문을 찾습니다.
- 기능 요청, 버그 보고서, 레이블, 우선순위, 프로젝트 배경을 목업 기획서에 반영합니다.
- 제품 피드백이나 디자인 요구 사항이 담긴 리서치 노트, 통화 요약, 문서, 스프레드시트, 슬라이드를 검토합니다.
- 디자인 배경 자료, 스크린샷, 디자인 시스템 참고 자료를 가져와 제품 고유의 시각적 스타일을 목업에도 반영합니다.
- ImageGen정리한 사용자 스토리와 디자인 제약 조건을 바탕으로 UI 목업과 여러 베리언트를 만들고, 구현할 때 기준으로 삼을 화면을 제시합니다.
- 선택한 목업을 실제로 작동하는 웹 프로토타입으로 구현하고, 결과가 목업과 일치하는지 확인합니다.
| Skill | Why use it |
|---|---|
| Slack | 승인된 피드백 채널과 스레드에서 사용자 스토리, 사용자가 겪은 불편, 인용할 만한 발언, 아직 답을 찾지 못한 질문을 찾습니다. |
| Linear | 기능 요청, 버그 보고서, 레이블, 우선순위, 프로젝트 배경을 목업 기획서에 반영합니다. |
| Google Drive | 제품 피드백이나 디자인 요구 사항이 담긴 리서치 노트, 통화 요약, 문서, 스프레드시트, 슬라이드를 검토합니다. |
| Figma | 디자인 배경 자료, 스크린샷, 디자인 시스템 참고 자료를 가져와 제품 고유의 시각적 스타일을 목업에도 반영합니다. |
| ImageGen | 정리한 사용자 스토리와 디자인 제약 조건을 바탕으로 UI 목업과 여러 베리언트를 만들고, 구현할 때 기준으로 삼을 화면을 제시합니다. |
| Build Web Apps | 선택한 목업을 실제로 작동하는 웹 프로토타입으로 구현하고, 결과가 목업과 일치하는지 확인합니다. |
Starter prompt
소개
제품 팀은 Slack 스레드, Linear 이슈, Google Drive의 문서와 스프레드시트, 고객 통화 메모 등 여러 곳에서 피드백을 수집합니다. 해결하려는 문제가 사용자 스토리에 명확히 드러나기도 하고, 여러 자료를 살펴봐야 문제의 컨텍스트를 파악할 수 있기도 합니다.
ChatGPT는 이런 자료에서 컨텍스트를 모아 문제를 해결할 기능의 UI 시안을 만들 수 있습니다. 시안을 검토해 방향이 적절한지 확인한 뒤에는 Codex로 해당 기능을 제품에 구현할 수 있습니다.
UI 시안 만들기
사용자 스토리가 명확하다면 그 스토리로 시작하세요. 아직 명확하지 않다면 먼저 ChatGPT와 대화하면서 여러 자료에서 컨텍스트를 모아 하나의 사용자 스토리로 정리하세요.
그런 다음 ChatGPT에 이미지 생성 기능으로 서로 다른 디자인 방향을 보여 주는 시안을 몇 가지 만들어 달라고 요청하세요. 각 시안은 제품의 기존 정보 구조를 유지하고 디자인 시스템의 제약 조건을 따라야 합니다.
필요하면 현재 UI의 스크린샷이나 Figma 파일을 참고 자료로 제공하세요.
만족스러운 시안이 나올 때까지 이 과정을 반복하세요. 변경 범위를 좁힐수록 Codex가 바로 구현 가능한 시안을 만들 가능성이 높아집니다.
시안을 프로토타입으로 구현하기
Codex로 구현할 최종 시안 이미지를 준비하세요. 기존 ChatGPT 채팅을 그대로 이어가는 대신 Codex를 선택해 새 채팅을 시작하고 이미지를 다시 첨부하세요. 그런 다음 Codex에 시안을 실제로 작동하는 프로토타입으로 구현해 달라고 요청하세요. 웹 앱을 만드는 경우 Build Web Apps 플러그인을 사용할 수도 있습니다.
Related use cases
내부 자료로 PRD 초안 작성
ChatGPT에서 $documents 스킬과 Linear, Slack, Notion, Google Drive 등 연결된 플러그인을 사용해 검토용 PRD를 작성하세요
신규 입사자 온보딩 조율하기
ChatGPT로 승인된 자료에서 신규 입사자 정보를 모으고, 온보딩 관리표 수정안과 팀별 요약 초안을 작성하세요
주간 업무 요약 작성하기
ChatGPT에 캘린더, 수정한 문서, 보낸 메시지, 업무 트래커와 프로젝트 배경 정보를 제공하세요