📘 교육 개요
- ‘Figma와 OpenAI Codex를 활용한 AI 프로토타입 개발’ 과정은 생성형 AI 기반 서비스의 UX를 디자인하고, 인터페이스 디자인부터 코드 기반 프로토타입 제작까지 직접 수행할 수 있도록 구성된 2일(총 12시간)간의 교육 과정입니다.
- 기획자/디자이너는 Figma를 활용해 AI 인터페이스를 설계하고, OpenAI Codex를 통해 HTML/CSS/JS 코드 자동 생성 및 간단한 AI 기능 연동까지 경험해볼 수 있습니다.
- 기획자, 디자이너, 프론트엔드 개발 입문자가 AI 서비스 개발에 대한 사전지식 없이 함께 완성해나갈 수 있도록 구성했으며, 실무에서 빠르게 활용 가능한 AI 서비스 프로토타입 제작 능력을 키울 수 있습니다.
넥스트플랫폼 온디맨드 과정
교육기관의 강의 요청에 따라 강의 시수, 진행 방식을 수정할 수 있는 수요자 중심의 온디맨드 교육과정입니다. (문의: 넥스트플랫폼 동준상 / naebon@naver.com)
| 항목 | 내용 |
|---|
| 과정명 | Figma와 OpenAI Codex를 활용한 AI 앱서비스 프로토타입 개발 |
| 대상 | UI/UX 디자이너, 기획자, 프론트엔드 개발자, 스타트업 팀원 |
| 기간 | 2일 (총 12시간) |
| 목표 | AI UX 기획, 인터페이스 디자인, 코드 생성 및 프로토타입 제작 |
| 강연 | 넥스트플랫폼 동준상 |
Figma와 OpenAI Codex를 활용한 AI 프로토타입 개발 과정 교육개요
📚 상세 커리큘럼
🔹 Day 1: AI UX 이해 및 Figma를 활용한 인터페이스 설계
| 시간 | 주제 | 세부 내용 |
|---|
| 09:30~10:00 | 오리엔테이션 | 교육 목표, 역할별 기대효과, 조 구성 |
| 10:00~11:00 | AI UX 기본 개념과 패턴 소개 | 생성형 AI와 UX의 차이점, 챗봇, 요약, 추천 UI 사례 |
| 11:00~12:30 | Figma 실습 ① – 생성형 AI를 고려한 와이어프레임 | LLM 활용 서비스 구조 설계 및 화면 흐름도 |
| 13:30~15:00 | Figma 실습 ② – AI 기능 인터페이스 디자인 | 프롬프트 입력창, 결과 출력, 리디자인 포인트 |
| 15:00~16:30 | Figma 플러그인 활용과 Codex 연계 전략 | Figma → 코드 자동화 흐름 이해 (Anima, Locofy 등) |
| 16:30~17:30 | 팀별 기획안 제작 및 공유 | 간단한 AI 서비스 아이디어 정리 및 화면 설계 공유 |
Figma와 OpenAI Codex를 활용한 AI 프로토타입 개발 과정 1일차 커리큘럼
🔹 Day 2: OpenAI Codex를 활용한 프로토타입 개발 실습
| 시간 | 주제 | 세부 내용 |
|---|
| 09:30~10:30 | OpenAI Codex 개요 및 사용법 | Codex API, GPT-4 코드 생성 특징, 안전성 이슈 |
| 10:30~12:00 | Codex 실습 ① – UI 코드 자동 생성 | HTML/CSS/JS 기본 인터페이스 자동 생성 실습 |
| 13:30~15:00 | Codex 실습 ② – AI 기능 연동 프로토타입 | 사용자 프롬프트 전송 → 응답 출력 흐름 만들기 |
| 15:00~16:30 | Figma 연동 및 완성형 프로토타입 구성 | Figma 디자인 → HTML 코드화 + Codex 연동 |
| 16:30~17:30 | 결과 발표 및 피드백, 실무 적용 전략 | 팀별 발표 및 피드백, 실무 적용 시 고려사항 정리 |
Figma와 OpenAI Codex를 활용한 AI 프로토타입 개발 과정 2일차 커리큘럼
🛠️ 실습 환경 및 도구
| 항목 | 도구 |
|---|
| 디자인 | Figma (웹/데스크탑 앱), Figma 플러그인 (Anima, Locofy 등) |
| 코드 생성 | OpenAI Codex (GPT-4 with code), VSCode, CodePen |
| 배포 테스트(선택) | Replit, Netlify, Vercel 등 간단한 배포 도구 |
Figma와 OpenAI Codex를 활용한 AI 프로토타입 개발 과정에 사용되는 도구들
🎯 교육 수료 후 기대효과
- AI UX 기획을 위한 사용자 흐름 및 인터페이스 구조 설계 역량을 확보할 수 있어요.
- Figma를 통해 빠르게 시각적 AI UI를 구성하는 능력을 습득할 수 있어요.
- OpenAI Codex로 HTML/JS 기반 프로토타입 코드를 생성·조합할 수 있어요.
- 결과적으로 AI 앱 서비스의 초기 프로토타입을 스스로 제작·시연하며 실전 감각을 확보할 수 있습니다.
교육기관의 강의 요청에 따라 강의 시수, 진행 방식을 수정할 수 있는 수요자 중심의 온디맨드 교육과정입니다. 수요기관의 교육담당자께서는 언제든 편하신 방법으로 연락주세요. (문의: 넥스트플랫폼 동준상 / naebon@naver.com)
Views: 33
