Codex use case
사용자 스토리를 UI 목업으로 전환
제품 피드백, 이슈 스레드, 디자인 컨텍스트를 팀이 검토하고 구현할 수 있는 목업으로 바꾸세요.
Codex를 사용해 Slack, Linear, Google Drive에서 제품 피드백을 수집하고 일관된 사용자 스토리와 제약 조건으로 정리한 다음 ImageGen으로 UI 목업을 생성하세요. 방향이 정해지면 목업을 실제로 작동하는 프로토타입으로 전환하세요.
적합한 대상
- 흩어진 피드백을 기능의 시각적 방향으로 구체화하려는 제품 팀.
- 구현 전에 원본 자료를 바탕으로 한 목업을 만들려는 디자인 및 엔지니어링 팀.
- 사용자 피드백을 바탕으로 빠르게 반복 개선하려는 팀.
Contents
사용자 스토리를 UI 목업으로 전환
제품 피드백, 이슈 스레드, 디자인 컨텍스트를 팀이 검토하고 구현할 수 있는 목업으로 바꾸세요.
Codex를 사용해 Slack, Linear, Google Drive에서 제품 피드백을 수집하고 일관된 사용자 스토리와 제약 조건으로 정리한 다음 ImageGen으로 UI 목업을 생성하세요. 방향이 정해지면 목업을 실제로 작동하는 프로토타입으로 전환하세요.
Codex를 사용해 Slack, Linear, Google Drive에서 제품 피드백을 수집하고 일관된 사용자 스토리와 제약 조건으로 정리한 다음 ImageGen으로 UI 목업을 생성하세요. 방향이 정해지면 목업을 실제로 작동하는 프로토타입으로 전환하세요.
관련 링크
적합한 대상
- 흩어진 피드백을 기능의 시각적 방향으로 구체화하려는 제품 팀.
- 구현 전에 원본 자료를 바탕으로 한 목업을 만들려는 디자인 및 엔지니어링 팀.
- 사용자 피드백을 바탕으로 빠르게 반복 개선하려는 팀.
스킬 및 플러그인
- 승인된 피드백 채널과 스레드에서 사용자 스토리, 문제점, 인용문, 미해결 질문을 검색합니다.
- 기능 요청, 버그 보고서, 라벨, 우선순위, 프로젝트 컨텍스트를 가져와 목업 브리프에 반영합니다.
- 제품 피드백이나 디자인 요구사항이 담긴 리서치 노트, 통화 요약, 문서, 스프레드시트, 슬라이드를 읽습니다.
- 디자인 컨텍스트, 스크린샷, 디자인 시스템 참고 자료를 가져와 목업이 제품의 시각 언어에서 벗어나지 않도록 합니다.
- ImageGen종합된 사용자 스토리와 디자인 제약 조건을 바탕으로 UI 목업, 베리언트, 시각적 기준을 생성합니다.
- 선택한 목업을 실제로 작동하는 웹 프로토타입으로 전환하고 구현 결과가 목업과 일치하는지 검증합니다.
| Skill | Why use it |
|---|---|
| Slack | 승인된 피드백 채널과 스레드에서 사용자 스토리, 문제점, 인용문, 미해결 질문을 검색합니다. |
| Linear | 기능 요청, 버그 보고서, 라벨, 우선순위, 프로젝트 컨텍스트를 가져와 목업 브리프에 반영합니다. |
| Google Drive | 제품 피드백이나 디자인 요구사항이 담긴 리서치 노트, 통화 요약, 문서, 스프레드시트, 슬라이드를 읽습니다. |
| Figma | 디자인 컨텍스트, 스크린샷, 디자인 시스템 참고 자료를 가져와 목업이 제품의 시각 언어에서 벗어나지 않도록 합니다. |
| ImageGen | 종합된 사용자 스토리와 디자인 제약 조건을 바탕으로 UI 목업, 베리언트, 시각적 기준을 생성합니다. |
| Build Web Apps | 선택한 목업을 실제로 작동하는 웹 프로토타입으로 전환하고 구현 결과가 목업과 일치하는지 검증합니다. |
시작 프롬프트
소개
제품 팀은 Slack 스레드, Linear 이슈, Google Drive 문서나 스프레드시트, 고객 통화 노트 등 다양한 소스에서 피드백을 수집하는 경우가 많습니다. 해결하려는 문제를 보여 주는 명확한 사용자 스토리가 있을 때도 있지만, 관련 컨텍스트가 이런 소스에 흩어져 있을 때도 있습니다.
ChatGPT는 이 컨텍스트를 모아 문제를 해결할 기능의 UI 목업으로 구체화할 수 있습니다. 방향을 검증한 후에는 Codex가 이를 제품에 구현할 수 있습니다.
시각적 기준 만들기
명확한 사용자 스토리가 있다면 그것부터 시작하면 됩니다. 없다면 먼저 ChatGPT와 대화하면서 여러 소스에서 컨텍스트를 수집하고 이를 종합해 사용자 스토리로 만들 수 있습니다.
그런 다음 ChatGPT에 이미지 생성을 사용해 서로 다른 방향의 목업을 몇 가지 만들어 달라고 요청할 수 있습니다. 목업은 제품의 정보 아키텍처를 유지하고 디자인 시스템 제약 조건을 따라야 합니다.
필요하다면 현재 UI의 스크린샷이나 Figma 파일을 참고 자료로 제공할 수 있습니다.
만족스러운 목업이 나올 때까지 이 과정을 반복하세요. 변경 범위를 좁고 명확하게 정할수록 Codex가 바로 구현할 수 있는 목업을 생성할 가능성이 높습니다.
목업을 프로토타입으로 전환하기
Codex에 구현을 맡길 최종 목업 이미지를 사용하세요. ChatGPT 채팅을 그대로 이어 가지 말고 Codex를 선택해 새 채팅을 시작한 다음 이미지를 다시 첨부하세요. 그런 다음 Codex에 목업을 구현해 실제로 작동하는 프로토타입으로 전환해 달라고 요청하세요. 웹 앱을 빌드하는 경우에는 필요에 따라 Build Web Apps plugin을 사용할 수 있습니다:
관련 사용 사례
신규 입사자 온보딩 조율
ChatGPT를 사용해 승인된 신규 입사자 정보를 수집하고, 트래커 업데이트와 팀별 요약 초안을 작성하며, 모든 내용을 보내기 전에 검토할 수 있도록 환영 공간...
내부 자료를 바탕으로 PRD 초안 작성
ChatGPT에서 $documents 스킬과 Linear, Slack, Notion, Google Drive 등의 연결된 플러그인을 사용하여 필수 섹션, 타임라인...
회의 준비 브리프 작성하기
ChatGPT에서 Calendar, Drive, Slack, Gmail을 사용해 회의 전에 승인된 출처를 수집한 뒤 목표, 안건, 질문, 메모 템플릿의 초안을 작성하세요.