공개 노트

PPT 대신 발표용 웹앱 만들기-Google AI Studio와 ChatGPT Codex로 반응형 강의자료 제작하는 방법

2026-08-02Views 652약 11분생성형 AI 활용

요약: Google AI Studio와 ChatGPT Codex를 활용해 PPT 대신 반응형 발표용 웹앱을 만드는 과정을 정리했습니다.
강의 내용 구성과 프롬프트 작성부터 이미지, QR코드, PDF 저장, 배포와 개인정보 점검까지 단계별로 소개합니다.
코딩 경험이 많지 않아도 실제 발표와 강의에 활용할 수 있는 웹앱을 제작하도록 돕는 실전 가이드입니다.

이번 포스팅을 통해 만들 최종 결과물입니다. 외부 발표 자료를 바이브코딩으로 더 빠르고 쉽게 만들 수 있습니다.

구글AI스튜디오

ChatGPT Codex

저는 외부에서 발표를 하거나 강의를 할 때 감마나 파워포인트 슬라이드가 아니라, 발표 내용을 하나의 웹앱 형태로 만들어 활용해 보고 있습니다.

처음에는 발표자료를 굳이 웹앱으로 만들 필요가 있을까 싶었습니다. 하지만 실제로 만들어 발표해 보니 생각보다 장점이 많았습니다.

무엇보다 슬라이드를 한 장씩 만들고 정렬하는 것보다 제작 시간이 적게 들었습니다. 발표장에서는 큰 화면으로 보여줄 수 있고, 수강생은 스마트폰이나 태블릿으로 같은 내용을 직접 확인할 수 있었습니다. 화면 크기에 따라 내용이 자동으로 재배치되는 반응형 구조라서 발표자료를 별도로 모바일용으로 다시 만들 필요도 없었습니다.

발표가 끝난 뒤에는 강의 내용을 다시 확인할 수 있는 자료로 활용할 수 있고, 출력용 페이지를 함께 구성하면 PDF로 저장해 참고자료로 배포할 수도 있습니다.

이번 글에서는 코딩을 전문적으로 배우지 않은 사람도 발표용 웹앱을 만들 수 있도록 제가 실제로 사용한 과정과 시행착오를 단계별로 정리해 보겠습니다.

1. 서론: PPT 대신 발표용 웹앱을 만든 이유

1. 슬라이드보다 수정과 디자인 변경이 빠릅니다

파워포인트는 내용을 추가할 때마다 글자 크기, 도형 위치, 이미지 배치와 페이지 간 균형을 다시 맞춰야 합니다.

반면 웹앱은 기본 디자인 체계를 한 번 정해 놓으면 내용이 추가되더라도 카드와 섹션이 자동으로 확장됩니다. 전체 디자인을 바꾸고 싶을 때도 다음과 같이 요청할 수 있습니다.

전체 카드의 모서리를 조금 더 둥글게 만들고, 제목과 본문의 간격을 넓혀 주세요.

AI가 공통 스타일을 수정하면 전체 화면에 한꺼번에 반영됩니다.

물론 처음부터 완벽하게 나오지는 않습니다. 그래도 슬라이드 20장을 각각 수정하는 것보다는 훨씬 빠른 경우가 많았습니다.

2. 발표장과 모바일에서 같은 자료를 볼 수 있습니다

발표자는 프로젝터나 대형 모니터로 화면을 보여주고, 참여자는 QR코드로 접속해 자신의 스마트폰에서 같은 자료를 볼 수 있습니다.

글자가 작거나 발표 화면이 잘 보이지 않는 참여자는 자신의 기기에서 화면을 확대할 수 있습니다. 링크, 참고자료, 사례 화면도 직접 눌러볼 수 있어 일방적으로 화면을 바라보는 발표보다 참여도가 높아지는 것을 경험했습니다.

반응형 웹 디자인은 화면 크기와 기기의 특성에 따라 레이아웃을 조정하는 방식입니다. 모바일 접근성을 함께 고려할 수 있다는 점도 장점입니다.

3. 발표자료와 출력용 참고자료를 하나로 만들 수 있습니다

웹앱 안에는 발표용 핵심 문장만 보여주고, 자세한 설명은 펼쳐보기나 별도 상세 영역에 배치할 수 있습니다.

따라서 하나의 웹앱으로 다음 역할을 동시에 수행할 수 있습니다.

발표 중 보여주는 시각자료
참여자가 직접 살펴보는 교육자료
발표 이후 다시 확인하는 참고자료
관련 사이트에 바로 접속하는 링크 모음
출력하거나 PDF로 저장하는 배포자료

특히 마지막에 출력용 전체 정리 페이지를 별도로 구성하면 발표 화면과 문서형 자료를 함께 제공할 수 있습니다.

웹에서는 @media print, @page 등의 인쇄용 CSS를 사용해 화면용 디자인과 인쇄·PDF용 디자인을 다르게 만들 수 있습니다. 페이지 나눔과 여백도 별도로 지정할 수 있습니다.

2. 만드는 법: 발표용 웹앱 제작 과정

발표용 웹앱 만드는 방법 한눈에 보기

전체 제작 과정은 다음 여섯 단계로 나눌 수 있습니다.

발표하고 싶은 내용을 모두 꺼내기
AI로 강의 내용과 순서를 구조화하기
웹앱 개발용 프롬프트 만들기
Google AI Studio 또는 Codex에서 웹앱 생성하기
화면을 보며 한 가지씩 수정하기
모바일·링크·QR코드·PDF·개인정보 점검하기

핵심은 다음과 같습니다.

아이디어를 꺼내는 단계는 자유롭게 하고, 개발을 요청하는 단계는 구체적으로 작성합니다.

1단계. 발표하고 싶은 내용을 브레인스토밍으로 정리하기

발표용 웹앱을 만든다고 하면 디자인이나 프로그램부터 생각하기 쉽습니다. 하지만 가장 먼저 해야 할 일은 내가 발표하고 싶은 내용을 최대한 많이 꺼내 놓는 것입니다.

처음부터 완성된 문장이나 정교한 목차를 만들 필요는 없습니다.

생각나는 내용을 다음처럼 적어도 됩니다.

발표자료를 웹앱으로 만들었음
PPT보다 수정이 편했음
휴대전화에서도 볼 수 있었음
처음 QR코드를 보여주니 반응이 좋았음
출력용 내용도 필요했음
이미지 넣을 때 오류가 있었음
개인정보가 화면에 노출되지 않도록 확인해야 함

저는 이 과정을 일종의 브레인 덤프 또는 브레인스토밍으로 생각합니다. 머릿속에서 문장을 다듬느라 중요한 경험을 빠뜨리기보다, 우선 생각나는 사례와 시행착오를 모두 입력하는 방식입니다.

“두서없이 입력하면 항상 AI의 결과가 좋아진다”라고 하는 연구가 있다고 합니다. 다만 좀 더 인공지능이 이해하기 쉽도록 생각을 충분히 꺼낸 뒤 AI를 이용해 다시 구조화하는 2단계 작업에 있습니다.

제가 권하는 순서

생각나는 내용을 제한 없이 적습니다.
사례, 수치, 실패 경험, 주의사항까지 모두 넣습니다.
AI에게 내용을 삭제하지 말고 주제별로 분류하도록 합니다.
분류된 내용을 강의 시간에 맞춰 재구성합니다.
마지막으로 웹앱 개발용 명세로 변환합니다.

2단계. ChatGPT로 강의 내용 구조화하기

정리하지 않은 메모를 ChatGPT에 입력한 후, 바로 웹앱을 만들어 달라고 하기보다는 먼저 강의 내용과 흐름을 설계하는 것이 좋습니다.

이때 반드시 알려줘야 할 정보가 있습니다.

강의 주제
강의를 듣는 사람
전체 강의 시간
강의에서 전달하려는 핵심 메시지
참여자가 강의 후 할 수 있어야 하는 행동
반드시 포함해야 할 사례와 내용
강사의 문체와 말투
발표와 실습의 비율
질의응답 시간
결과물을 웹앱으로 만들 예정이라는 점

다음 프롬프트를 기본 틀로 사용할 수 있습니다.

강의 구조화 프롬프트

아래에 제가 발표하고 싶은 내용을 정리하지 않은 상태로 입력하겠습니다.

당신은 강의 기획자이자 교육 콘텐츠 편집자입니다.
입력한 내용을 임의로 삭제하거나 축소하지 말고, 먼저 전체 내용을 주제별로 분류해 주세요.

강의 조건은 다음과 같습니다.

- 강의 주제:
- 주요 청중:
- 청중의 관련 경험 수준:
- 전체 강의 시간:
- 강의 목적:
- 강의 후 참여자가 할 수 있어야 하는 것:
- 발표와 실습의 비율:
- 질의응답 시간:
- 반드시 포함해야 할 사례:
- 사용하면 안 되는 개인정보 또는 기관 정보:
- 문체: 자연스러운 한국어 존댓말
- 피해야 할 표현: 과도한 감탄, 과장된 홍보 문구, 근거 없는 최고·혁신·완벽 등의 표현

결과는 다음 순서로 작성해 주세요.

1. 전체 강의의 핵심 메시지
2. 청중이 가장 궁금해할 질문
3. 시간대별 강의 구성
4. 각 장의 제목과 핵심 내용
5. 실제 사례를 넣을 위치
6. 참여자에게 질문하거나 직접 눌러보게 할 부분
7. 마무리 요약
8. 웹앱 제작에 필요한 화면 구성
9. 출력용 자료에 포함할 전체 내용
10. 원문에는 있지만 강의 구조에 아직 반영되지 않은 내용

사실이나 사례를 새로 만들어내지 마세요.
정보가 부족한 부분은 임의로 작성하지 말고 [추가 확인 필요]라고 표시해 주세요.

다음은 제가 작성한 원문입니다.

[여기에 메모와 자료 전체 입력]

자연스러운 문체를 별도로 요청해야 합니다

개인적으로는 발표문이나 블로그 글을 정리할 때 ChatGPT 5.5가 조금 더 자연스러운 한국어 문장을 만드는 경우가 있었습니다. 반면 일부 모델(제미나이)은 다음과 같은 과장된 문장을 반복하는 경우가 있었습니다.

이제 교육의 미래가 완전히 바뀝니다.
놀라운 혁신을 직접 경험해 보세요.
단 한 번의 클릭으로 모든 것이 완성됩니다.

발표자료에 이런 표현이 반복되면 실제 경험을 전달하는 글이라기보다 광고 문구처럼 보일 수 있습니다.

따라서 프롬프트에 다음 조건을 넣는 것이 좋습니다.

실제 강사가 자신의 경험을 차분하게 설명하는 문체로 작성해 주세요.
과장된 수식어와 추상적인 홍보 문구를 사용하지 마세요.
짧은 문장과 구체적인 사례를 중심으로 작성해 주세요.
같은 의미의 결론을 반복하지 마세요.

특정 모델이 항상 더 자연스러운 문장을 만든다고 일반화하기는 어렵습니다. 다만 모델마다 문체 차이가 있으므로, 결과를 확인한 뒤 원하는 말투를 구체적으로 다시 요청하는 과정이 필요했습니다.

3단계. 발표용 웹앱 개발 프롬프트 만들기

강의 내용이 정리되었다면 다음 단계에서는 이를 웹앱 개발자가 이해할 수 있는 명세로 변환합니다.

단순히 “예쁜 발표용 웹사이트를 만들어 주세요”라고 하면 중요한 내용이 빠지거나, 디자인은 화려하지만 발표하기 어려운 결과가 나올 수 있습니다.

다음 항목을 구체적으로 요청해야 합니다.

콘텐츠 조건

원문의 모든 내용을 웹앱에서 확인할 수 있어야 함
요약 과정에서 사례와 주의사항이 삭제되지 않아야 함
핵심 내용과 상세 내용을 구분할 것
출처가 필요한 내용은 출처 위치를 표시할 것
사실을 임의로 추가하지 않을 것

발표 조건

30분 강의 흐름에 맞춰 장을 구분할 것
현재 어느 장을 보고 있는지 알 수 있을 것
발표자가 다음 내용으로 쉽게 이동할 수 있을 것
대형 화면과 노트북 화면 모두에서 읽기 쉬울 것
브라우저 화면 배율 100%를 기준으로 제작할 것

참여 조건

모바일에서도 모든 내용을 읽을 수 있을 것
QR코드로 접속할 수 있을 것
외부 링크를 바로 열 수 있을 것
필요하면 내용을 펼치거나 접을 수 있을 것
링크가 새 창에서 열리는지 명확하게 표시할 것

출력 조건

마지막에 출력용 전체 정리 페이지를 둘 것
A4 문서에 적합한 인쇄용 스타일을 적용할 것
PDF 저장 버튼을 제공할 것
카드나 표가 페이지 중간에서 어색하게 잘리지 않도록 할 것
배경과 장식 요소를 줄여 인쇄 가독성을 높일 것

접근성 조건

키보드만으로 주요 메뉴와 버튼을 사용할 수 있을 것
글자와 배경의 명도 대비를 충분히 확보할 것
이미지에 대체 설명을 넣을 것
색상만으로 정보를 구분하지 않을 것
움직임이 지나치게 많지 않을 것

WCAG 2.2는 키보드 접근, 명도 대비, 초점 표시 등 웹 콘텐츠 접근성에 필요한 기준을 제시합니다. 발표용 웹앱도 교육자료인 만큼 접근성을 처음부터 제작 조건에 포함하는 것이 좋습니다.

개인정보 및 보안 조건

이름, 연락처, 이메일, 얼굴 등 개인정보가 포함되지 않을 것
사례 화면에 개인정보가 있으면 모자이크 처리할 것
소스 코드에 API 키를 직접 넣지 않을 것
배포 전 개인정보 점검 목록을 표시할 것
외부 공개가 곤란한 자료는 넣지 않을 것

공개 주소로 배포한 웹앱은 누구나 볼 수 있다고 가정하는 것이 안전합니다. 검색 노출 여부와 별개로, 공개하면 곤란한 정보는 애초에 웹앱에 넣지 않는 것이 좋습니다.

발표용 웹앱 통합 제작 프롬프트

다음 프롬프트는 Google AI Studio와 ChatGPT Codex에서 공통으로 사용할 수 있도록 구성했습니다.

당신은 교육용 웹앱을 설계하고 개발하는 시니어 UX 디자이너이자 프론트엔드 개발자입니다.

아래의 강의 원고를 기반으로 30분 분량의 발표용 반응형 웹앱을 제작해 주세요.

[프로젝트 목적]
이 웹앱은 파워포인트를 대신하여 외부 강의에서 화면으로 발표하고,
참여자가 QR코드로 접속해 자신의 스마트폰에서도 함께 볼 수 있도록 하는 자료입니다.
발표가 끝난 뒤에는 참고자료와 출력용 자료로도 사용할 수 있어야 합니다.

[청중]
- 주요 청중:
- 청중의 관련 경험 수준:
- 예상 인원:
- 주요 사용 기기: 발표장 대형 화면, 노트북, 스마트폰

[강의 조건]
- 총 강의 시간: 30분
- 본 발표:
- 사례 시연:
- 참여 또는 질문:
- 마무리 및 질의응답:

[가장 중요한 콘텐츠 원칙]
1. 아래에 제공하는 강의 원고의 모든 내용을 웹앱에서 확인할 수 있게 해 주세요.
2. 내용을 임의로 삭제하거나 축약하지 마세요.
3. 첫 화면과 각 장에서는 핵심 내용을 간결하게 보여주되,
   상세 내용은 카드, 펼쳐보기, 탭 등의 방식으로 모두 확인할 수 있게 해 주세요.
4. 원문에 없는 수치, 사례, 연구 결과, 기관명은 새로 만들지 마세요.
5. 불확실한 내용은 [추가 확인 필요]로 표시해 주세요.
6. 과장된 광고 문구를 사용하지 말고, 실제 강사의 경험을 전달하는 자연스러운 한국어 존댓말을 사용해 주세요.

[전체 화면 구조]
1. 시작 화면
   - 강의 제목
   - 한 문장 소개
   - 강의에서 다룰 내용
   - 전체 웹앱 접속용 QR코드
   - 시작 버튼

2. 전체 목차
   - 장별 제목
   - 예상 소요 시간
   - 현재 위치 표시

3. 각 장의 발표 화면
   - 장 제목
   - 핵심 메시지
   - 주요 사례
   - 발표자가 설명할 세부 내용
   - 필요한 경우 펼쳐보기 기능
   - 이전 장과 다음 장 이동 버튼

4. 참여 영역
   - 참여자에게 던질 질문
   - 직접 눌러보거나 확인할 링크
   - 관련 참고자료

5. 마무리 화면
   - 핵심 내용 요약
   - 바로 실천할 수 있는 단계
   - 주의사항
   - 질의응답 안내

6. 출력용 전체 정리 화면
   - 강의 내용을 문서 형태로 처음부터 끝까지 정리
   - 웹앱의 마지막 장에 배치
   - A4 세로형에 적합한 구조
   - PDF로 저장 버튼 제공
   - 인쇄 시 메뉴, 버튼, 애니메이션, 배경 장식은 제거
   - 제목과 각 절이 페이지 중간에서 부자연스럽게 나뉘지 않도록 처리
   - 브라우저의 인쇄 기능을 활용하여 PDF로 저장할 수 있게 구성

[디자인]
특정 브랜드의 화면을 그대로 복제하지 마세요.
다만 Apple의 디자인 원칙에서 강조하는 명확한 목적, 단순성, 일관성,
시각적 위계, 다양한 환경에 대한 유연성을 참고해 주세요.

2026년의 현대적인 웹 디자인 감각을 반영하되 유행 요소를 과도하게 사용하지 마세요.
넓은 여백, 명확한 타이포그래피, 정돈된 카드, 절제된 애니메이션을 사용해 주세요.
장식보다 콘텐츠의 가독성과 발표 흐름을 우선해 주세요.

- 기본 화면 배율: 브라우저 100%
- 대형 발표 화면에서 핵심 문장이 한눈에 들어와야 함
- 모바일에서는 한 열 구조로 자연스럽게 변경
- 긴 문장은 적절히 나누되 원문 내용은 삭제하지 않음
- 화면 전환 애니메이션은 짧고 절제되게 적용
- 사용자가 동작 감소 설정을 사용하면 애니메이션을 최소화

[접근성]
- 시맨틱 HTML 사용
- 키보드 탐색 가능
- 명확한 포커스 표시
- 충분한 색상 대비
- 이미지 대체 텍스트 제공
- 버튼의 기능을 텍스트로 명확히 표시
- 색상만으로 상태를 구분하지 않음

[링크]
- 제공된 외부 링크를 정확히 연결
- 외부 링크는 새 창에서 열기
- 링크가 작동하지 않을 경우를 대비해 주소 복사 기능 제공
- 링크를 임의로 생성하지 않음

[이미지]
- 제가 제공하는 이미지를 우선 사용
- 이미지 파일은 프로젝트 내부 assets 폴더에서 불러오기
- 이미지 비율을 임의로 늘리거나 찌그러뜨리지 않기
- 얼굴, 이름, 연락처, 주소 등 개인정보가 보이면 모자이크 처리
- 모바일용 이미지 크기도 최적화
- 이미지가 없어도 레이아웃이 무너지지 않도록 처리

[개인정보 보호]
- 이름, 연락처, 이메일, 계정 정보, 내부 문서번호 등 공개가 곤란한 정보를 표시하지 않음
- 개인정보가 포함될 가능성이 있는 화면에는 배포 전 확인 표시
- API 키나 비밀값을 클라이언트 코드에 포함하지 않음

[기술 조건]
- 현재 개발 환경에서 안정적으로 작동하는 기술을 사용
- 불필요하게 복잡한 데이터베이스나 로그인 기능을 추가하지 않음
- 정적인 강의자료에 실시간 AI 기능을 임의로 추가하지 않음
- 오류가 발생해도 나머지 강의 내용을 볼 수 있게 구성
- 로딩 속도를 고려하여 이미지와 자원을 최적화

[검수 기준]
완성 후 다음 항목을 직접 점검하고 결과를 알려 주세요.

1. 원문의 내용이 모두 반영되었는가
2. 누락된 사례나 주의사항이 없는가
3. 30분 강의 흐름에 적합한가
4. 브라우저 100% 화면에서 잘리는 내용이 없는가
5. 모바일 화면에서 가로 스크롤이 생기지 않는가
6. 모든 버튼과 링크가 작동하는가
7. PDF 저장 화면이 A4에 맞게 정리되는가
8. 개인정보가 노출되지 않는가
9. 키보드만으로 주요 기능을 사용할 수 있는가
10. 배포 후 오류가 발생할 가능성이 있는 부분은 무엇인가

먼저 전체 구조와 파일 계획을 세운 후 개발을 시작하세요.
개발이 끝나면 변경된 파일과 실행 방법, 배포 방법을 설명해 주세요.

[강의 원고 시작]

여기에 정리한 강의 원고 전체를 입력합니다.

[강의 원고 끝]

Apple은 2026년 디자인 원칙에서 목적, 유연성, 단순성, 완성도, 책임, 친숙함 등을 강조하고 있습니다. 단순히 Apple 화면처럼 보이게 하는 것이 아니라, 중요한 내용이 무엇인지 분명히 하고 불필요한 요소를 줄이는 원칙을 참고하는 것이 핵심입니다.

3. 도구별 제작 방법

1. Google AI Studio로 발표용 웹앱 만드는 방법

무료로 시작한다면 Google AI Studio의 Build 기능을 활용할 수 있습니다. 디자인적으로는 여전히 구글이 더 나은 것 같습니다. 유료 사용자의 경우에도 구글AI스튜디오를 고려해보실만 합니다.

Google AI Studio 사용방법은 이전 포스팅을 참고해주세요

제가 권하는 기본 순서는 다음과 같습니다.

1단계: Google AI Studio의 Build 화면을 엽니다

일반적인 질의응답 화면이 아니라 웹앱을 생성하고 미리 볼 수 있는 Build 기능을 사용합니다.(위와 같은 화면을 볼 수 있습니다)

Google AI Studio는 프롬프트를 기반으로 앱의 파일 구조와 코드를 만들고, 오른쪽 미리보기 화면에서 결과를 확인할 수 있도록 지원합니다. 제작한 앱은 Cloud Run으로 직접 배포할 수도 있습니다.

2단계: Gemini 3.6 Flash를 선택합니다

발표용 웹앱과 같이 비교적 명확한 구조의 프로젝트는 처음부터 가장 비싼 모델을 선택할 필요가 없습니다.

Gemini 3.6 Flash는 코드 생성과 반복적인 에이전트 작업을 고려해 설계된 모델이며, 이전 Flash 계열보다 낮은 비용과 토큰 효율성을 강조하고 있습니다.

다만 복잡한 오류가 반복되거나 전체 구조를 크게 변경해야 할 때는 상위 모델을 한시적으로 사용하는 방법도 있습니다.

오른쪽 위 설정 버튼(톱니바퀴 모양)을 누르면 모델 선택 화면이 나옵니다. 보통은 기본 선택이 3.6 Flash로 되어 있습니다.

3단계: 프롬프트와 원문을 한꺼번에 입력합니다

그리고 이 화면에서 일반 챗봇에 입력하듯 앞서 작성한 프롬프트를 한번에 입력하고 I'm feeling lucky 버튼을 클릭합니다.

여기서 가장 중요한 문장은 다음과 같습니다.

제공한 모든 내용을 웹앱 안에서 확인할 수 있어야 하며, 내용을 임의로 삭제하거나 축약해서는 안 됩니다.

이 조건이 없으면 AI가 전체 내용을 보기 좋게 요약하는 과정에서 중요한 사례, 시행착오, 주의사항을 빼는 경우가 있습니다.

또한 다음 조건도 반드시 넣는 것이 좋습니다.

마지막 장에 출력용 전체 정리 페이지를 만들고, PDF로 저장할 수 있는 버튼을 추가해 주세요.

이렇게 입력하면 대략 10~15분 후 결과가 화면에 출력됩니다.

4단계: 한 번에 한 종류씩 수정합니다

첫 결과를 보고 다음과 같이 수정합니다.

모바일에서 제목이 너무 크게 보입니다. 모바일 제목 크기만 조정해 주세요.

출력용 페이지에서 카드가 중간에 잘립니다. 인쇄 시 카드 내부에서 페이지가 나뉘지 않게 수정해 주세요.

3장의 내용 중 원문에 있던 비용 관련 주의사항이 빠졌습니다. 원문을 다시 대조하고 반영해 주세요.

디자인, 내용, 기능을 한 문장에 모두 섞어 요청하면 수정 범위가 커지면서 이미 잘 작동하던 부분까지 바뀔 수 있습니다.

가능하면 다음 순서로 나누어 수정하는 것이 좋습니다.

누락된 내용
발표 흐름
화면 배치
모바일 화면
이미지
링크
출력과 PDF
개인정보
최종 오류

5단계: 발표용 웹앱 배포 방법

Google AI Studio에서 제공하는 배포 기능을 활용하여 쉽게 배포할 수 있습니다.

최종 미리보기 확인 (개인정보 점검, 모든 링크 테스트, 모바일 화면 확인, 출력용 페이지 PDF 저장)
왼쪽 상단의 퍼블리시 버튼을 클릭
Get stared 클릭
원하는 URL주소 입력 후 Publish your app 클
30초 가략 기다리면 배포가 완료되고 App URL 주소가 나옵니다. Visit를 눌러 실제 접속해볼 수 있습니다.
혹시 수정하실 부분이 있으시면 수정 후 재배포(republish) 버튼을 클릭하여 재배포 하시면 됩니다.

팁: 무료 사용량이 끝났을 때 바로 결제하지 않습니다

여러 번 수정하다 보면 무료 사용량이나 요청 한도에 도달할 수 있습니다.

Google AI Studio의 무료 이용과 Gemini API의 유료 이용은 구분해서 살펴봐야 합니다. 모델과 계정에 따라 적용되는 요청 한도도 달라질 수 있으며, 현재 한도는 AI Studio의 사용량 화면에서 확인할 수 있습니다.

개인적으로는 급한 프로젝트가 아니라면 한도를 다 썼다는 이유만으로 바로 유료 결제를 연결하는 것은 권하지 않습니다. 반복 수정 과정에서 예상보다 많은 사용량이 발생할 수 있기 때문입니다.

화면에 표시된 한도 초기화 시점을 확인하고, 무료 사용량이 다시 제공된 이후 작업을 이어가는 편이 안전합니다. 유료로 전환한다면 반드시 예산 알림과 사용량 제한을 먼저 설정하는 것이 좋습니다.

2. ChatGPT 사용자: GPT-5.6 Sol과 Codex 활용하기

ChatGPT 사용자는 ChatGPT에서 내용을 정리한 후 Codex를 이용해 웹앱을 개발하는 방식을 사용할 수 있습니다.

GPT-5.6 Sol은 코딩뿐 아니라 디자인 판단과 결과물의 완성도 개선을 주요 강점으로 제시하고 있습니다. 복잡한 전문 업무를 위한 모델이며, ChatGPT에서는 Medium, High 등의 추론 설정으로 제공됩니다.(코덱스에서 ChatGPT 무료 사용자의 경우 제한적으로 미디엄까지 사용할 수 있습니다.)

1단계: 개발되는 웹앱 개발을 위한 별도의 폴더를 컴퓨터에 하나 만듭니다.

위치나 이름은 상관 없이 별도로 잘 관리할 수 있는 폴더를 하나 컴퓨터에 만듭니다. (지워지면 마음이 아프니 바탕화면에 dev - presentation 같은 폴더를 만드는 것도 좋습니다)

2단계: Codex를 실행합니다

코덱스 사용방법은 이전에 블로그로 따로 정리를 하지 못하였습니다. 추후 이 내용도 정리해보겠습니다.

좀 쉽게 설명해보면

코덱스를 컴퓨터에 설치합니다.
코덱스에서 새 채팅 클릭합니다.
새 채팅을 클릭한 후 프로젝트를 클릭하고 새 프로젝트를 선택합니다.
프로젝트 만들기에서 아까 만들어 놓은 폴더를 선택합니다.
그리고 완성한 웹앱 제작 프롬프트와 강의 원고를 Codex에 전달합니다.

발표용 정적 웹앱이라면 처음부터 최고 단계의 추론 설정을 사용할 필요는 없습니다. 우선 Medium 수준으로 전체 앱을 만들고, 복잡한 오류나 대규모 구조 변경이 필요한 경우에만 더 높은 설정을 사용하는 편이 비용을 관리하기 좋았습니다.

3단계: 완료될 때까지 작업 과정을 확인합니다

Codex는 프로젝트 구조를 만들고, 파일을 수정하고, 실행 오류를 확인하는 과정을 거칩니다.

프로젝트 규모와 작업량에 따라 시간이 꽤 걸릴 수 있습니다. 제 경우에는 약 30분~1시간 안팎이 소요된 적도 있었습니다. 이는 정해진 시간이 아니라 프로젝트 복잡도와 실행 환경에 따른 경험치입니다.

중간에 작업을 중단하기보다 어떤 파일을 만들고 어떤 오류를 수정하는지 확인한 뒤, 결과 화면을 보고 추가 지시를 내리는 편이 좋습니다.

4단계: Sites를 이용해 배포합니다

ChatGPT Sites는 웹사이트와 경량 웹앱을 만들고, 미리 보고, 게시하고, 공유할 수 있는 기능입니다. Codex에서 만든 호환 프로젝트를 별도의 복잡한 배포 절차 없이 호스팅된 사이트로 전환할 수도 있습니다.

별도의 어려움 없이 사이트에 배포해줘 라고 코덱스에 입력하면 배포까지 마칠 수 있습니다.

다만 계정과 이용 중인 요금제 또는 워크스페이스에 따라 기능 제공 범위가 다를 수 있으므로 실제 화면에서 Sites 사용 가능 여부를 확인해야 합니다.

4. 완성도 높이기: 이미지·반응형 화면·QR코드·PDF

1. Google AI Studio에서 이미지가 잘 들어가지 않는 경우

Google AI Studio에서는 로컬 컴퓨터에 있는 이미지 파일을 웹 화면에 직접 드래그앤드롭했을 때 업로드가 오래 걸리거나, 파일이 정상적으로 반영되지 않는 경우가 있었습니다.

이럴 때는 필요한 이미지를 Google의 클라우드 저장소에 먼저 올린 뒤 연결하는 방법을 사용할 수 있습니다. 다만 클라우드 저장소를 이용하더라도 파일 권한이나 주소 형식에 따라 이미지가 정상적으로 표시되지 않는 경우가 있었습니다.

따라서 이미지가 반드시 필요한 웹앱이라면 다음 순서로 작업하는 것을 권합니다.

우선 이미지 없이 전체 웹앱의 구조와 디자인을 완성합니다.
각 이미지가 들어갈 위치를 플레이스홀더로 표시합니다.
웹앱의 주요 기능이 정상적으로 작동하는지 확인합니다.
마지막 단계에서 이미지를 한 장씩 추가합니다.
배포된 화면에서도 이미지가 정상적으로 보이는지 다시 확인합니다.

ChatGPT Codex에서 이미지를 넣는 방법

Codex에서는 사용할 이미지 파일을 개발 프로젝트의 폴더에 직접 넣고, 해당 파일의 위치와 사용할 화면을 구체적으로 알려주는 방식이 비교적 잘 작동했습니다. 그리고 익명화 처리가 필요할 경우 그 부분도 잘 처리 되었습니다.

예를 들어 프로젝트 안에 다음과 같은 이미지 폴더를 만들 수 있습니다.

public/images/

이미지 파일은 다음과 같이 관리합니다.

public/images/lecture-example-01.png

그다음 Codex에 다음과 같이 요청합니다.

프로젝트의 public/images 폴더에 있는
lecture-example-01.png 이미지를 3장 사례 화면에 넣어 주세요.

이미지의 원본 비율을 유지하고,
데스크톱에서는 최대 너비 900px로 표시해 주세요.

모바일에서는 화면 너비에 맞게 자연스럽게 축소하고,
가로 스크롤이 발생하지 않도록 해 주세요.

이미지가 로드되지 않더라도 전체 레이아웃이 무너지지 않게 해 주세요.

이미지에 이름, 얼굴, 전화번호, 이메일 등 개인정보가 보이면
외부에 공개되지 않도록 식별하기 어려운 수준으로 모자이크 처리해 주세요.

Codex에서 이미지를 넣을 때는 단순히 “이 이미지를 넣어 주세요”라고 요청하기보다 다음 정보를 함께 알려주는 것이 중요합니다.

정확한 이미지 파일명
이미지가 저장된 폴더 경로
이미지를 넣을 장이나 화면
데스크톱에서의 최대 크기
모바일 화면에서의 표시 방식
원본 비율 유지 여부
이미지가 없을 때의 대체 화면
개인정보 모자이크 여부
이미지 대체 텍스트

예를 들어 다음처럼 더 구체적으로 요청할 수 있습니다.

public/images/lecture-process-02.jpg 이미지를
‘전체 제작 과정’ 장의 오른쪽 설명 영역에 넣어 주세요.

데스크톱에서는 이미지와 설명을 2열로 배치하고,
모바일에서는 이미지가 설명보다 먼저 보이는 1열 구조로 변경해 주세요.

이미지 비율은 유지하고 자르지 마세요.
이미지 아래에는 ‘발표용 웹앱 제작 과정 예시’라는 설명을 넣어 주세요.

현재 작동하는 내비게이션과 다른 장의 디자인은 변경하지 마세요.

이미지를 안정적으로 반영하려면 파일 위치와 사용할 화면을 정확하게 지정하는 것이 가장 중요했습니다.

또한 AI가 모자이크 처리를 했다고 답하더라도 실제 이미지에서 얼굴, 이름, 연락처와 내부 정보가 충분히 가려졌는지는 사람이 직접 다시 확인해야 합니다.

2. 화면 비율이 맞지 않을 때 수정하는 방법

웹앱을 제작하면서 당황하는 순간이 내가 제작한 앱이 화면 비율이 잘 맞고 그 부분을 수정하라고 해도 잘 안되는 경우가 발생할 때 입니다. 이때는 너무 걱정하지 않으셔도 됩니다. 현재 컴퓨터 화면을 기준으로 맞추다보니 화면 비율이 안 맞은 것이지 그 웹페이지의 비율을 조절하면 화면이 맞기 때문입니다.

그래서 전반적으로 특정 해상도에 맞춰서 통일감 있게 작성하는게 중요합니다.

저는 다음과 같은 기준을 권합니다.

브라우저 화면 배율 100%를 기본으로 제작하고, 실제 발표 환경에서 필요한 경우 브라우저 확대·축소를 조정한다.

개발 단계에서는 최소한 다음 환경을 확인하는 것이 좋습니다.

노트북 일반 화면
1920×1080 대형 화면
세로형 스마트폰
가로형 태블릿
브라우저 확대 125%
브라우저 축소 90%

다음과 같이 요청할 수 있습니다.

브라우저 화면 배율 100%를 기준으로 모든 발표 화면이 잘리지 않게 해 주세요.

각 장의 핵심 내용은 세로 스크롤을 지나치게 많이 하지 않아도 보이도록 구성하되,
내용을 삭제하지 말고 상세 내용은 펼쳐보기로 제공해 주세요.

모바일 화면에서는 가로 스크롤이 생기지 않도록 수정해 주세요.

웹앱은 파워포인트처럼 모든 내용을 한 화면에 강제로 넣을 필요가 없습니다. 발표 중 바로 보여줘야 하는 핵심 내용과 참여자가 나중에 확인할 세부 내용을 구분하는 것이 중요합니다.

3. 링크와 QR코드를 적극적으로 활용하기

웹앱의 장점 중 하나는 발표자료 안의 링크가 실제로 작동한다는 점입니다.

사례자료, 관련 서비스, 참고문헌, 영상, 설문조사 등을 연결하면 참여자가 주소를 다시 검색하지 않아도 됩니다.

링크를 넣을 때는 다음을 확인해야 합니다.

주소가 정확한지
로그인 없이 열리는지
모바일에서도 열리는지
외부 공개가 가능한 자료인지
새 창에서 열리는지
링크 이름만 보고 목적을 알 수 있는지

강의 시작 화면에는 웹앱 전체 주소의 QR코드를 넣는 것이 좋았습니다.

저는 시작할 때 다음과 같이 안내했습니다.

오늘 발표자료는 웹앱으로 만들었습니다. 화면의 QR코드로 접속하시면 휴대전화에서 같은 내용을 함께 보실 수 있습니다. 발표가 끝난 뒤에도 다시 확인하실 수 있습니다.

참여자는 강의를 들으면서 관련 링크를 직접 눌러볼 수 있고, 발표가 끝난 뒤에도 자료를 다시 볼 수 있었습니다.

다만 공개용 QR코드에는 내부 문서나 개인정보가 포함된 주소를 사용해서는 안 됩니다. 강의 전에는 반드시 다른 계정이나 로그아웃 상태에서도 링크가 정상적으로 열리는지 확인해야 합니다.

4. 출력용 PDF 페이지는 마지막에 따로 만듭니다

발표 화면을 그대로 인쇄하면 다음과 같은 문제가 발생합니다.

배경색 때문에 잉크 사용량이 많아짐
버튼과 메뉴가 함께 출력됨
카드가 페이지 중간에서 잘림
큰 제목 때문에 페이지 수가 지나치게 늘어남
펼쳐보기 안의 내용이 출력되지 않음

따라서 웹앱의 마지막에는 출력용 전체 정리 페이지를 따로 만드는 것이 좋습니다.

출력용 페이지에는 다음 내용을 넣습니다.

강의 제목과 목적
전체 목차
각 장의 핵심 내용
실제 제작 과정
사용한 프롬프트
오류와 해결 방법
비용 관련 주의사항
배포 전 점검 목록
참고 링크
작성일과 버전

PDF 버튼은 우선 브라우저의 인쇄 창을 여는 방식으로 만드는 것이 비교적 안정적입니다.

출력용 페이지의 ‘PDF로 저장’ 버튼을 누르면 브라우저 인쇄 창이 열리게 해 주세요.

인쇄 화면에서는 다음 요소를 숨겨 주세요.
- 상단 메뉴
- 이전·다음 버튼
- QR코드
- 불필요한 배경 장식
- 애니메이션
- 화면용 고정 버튼

A4 세로 방향으로 설정하고,
제목과 카드가 페이지 중간에서 잘리지 않게 해 주세요.
모든 펼쳐보기 내용은 인쇄 화면에서 펼쳐진 상태로 출력되게 해 주세요.

완전한 한 번 클릭 PDF 파일 생성 기능은 별도 라이브러리나 서버 처리가 필요할 수 있습니다. 일반적인 교육자료라면 잘 정리된 인쇄 화면과 브라우저의 PDF 저장 기능이 오히려 오류가 적은 경우가 많았습니다.

5. 발표용 웹앱을 만들며 얻은 실전 노하우

첫째, 프롬프트 기술보다 원본 내용이 중요했습니다

AI에게 멋진 지시문을 쓰는 것보다 내가 실제로 경험한 사례, 실패, 수정 과정, 비용, 참여자 반응을 충분히 제공하는 것이 더 중요했습니다.

내용이 부족하면 디자인이 아무리 좋아도 일반적인 설명만 담긴 웹앱이 됩니다.

둘째, 처음부터 완벽하게 정리하려고 하지 않았습니다

생각나는 내용을 먼저 모두 적고, AI에게 분류와 구조화를 맡겼습니다.

다만 최종 개발 프롬프트에서는 대상, 시간, 목적, 필수 내용과 검수 기준을 명확히 작성했습니다.

즉, 아이디어를 꺼내는 단계는 자유롭게 하고, 개발을 지시하는 단계는 구체적으로 하는 방식이 가장 효과적이었습니다.

셋째, 모든 내용을 반영하라고 반복해서 확인했습니다

AI는 보기 좋은 결과를 만들기 위해 내용을 요약하거나 중복이라고 판단한 부분을 제거하기도 합니다.

하지만 강의자료에서는 비슷해 보이는 문장도 서로 다른 사례나 의미를 담고 있을 수 있습니다.

그래서 다음 문장을 여러 단계에서 사용했습니다.

원문의 모든 내용이 웹앱 안에서 확인되어야 합니다. 내용을 임의로 삭제하거나 축약하지 마세요.

넷째, 화려한 디자인보다 발표하기 편한 구조가 중요했습니다

발표용 웹앱은 디자인 포트폴리오가 아닙니다.

제목이 명확하고, 현재 위치를 알 수 있고, 다음 장으로 쉽게 이동하며, 글자를 읽을 수 있어야 합니다. 애니메이션이 많거나 투명한 효과가 과도하면 오히려 발표 집중도를 떨어뜨릴 수 있습니다.

다섯째, 웹앱과 출력자료를 하나로 만들었습니다

발표자료를 웹앱으로 만든다고 해서 문서가 필요 없어지는 것은 아닙니다.

오히려 발표 이후 다시 살펴볼 사람을 위해 출력용 PDF를 함께 제공했을 때 자료의 활용도가 높아졌습니다.

여섯째, 마지막 검수는 사람이 직접 해야 합니다

AI가 “모든 기능을 확인했다”고 답하더라도 실제 브라우저에서 직접 눌러봐야 합니다.

특히 다음 항목은 반드시 사람이 확인해야 합니다.

링크 오류
모바일 화면
화면 잘림
인쇄 페이지
개인정보
수치와 고유명사
QR코드
배포 후 공개 범위

6. 발표용 웹앱 배포 전 최종 체크리스트

콘텐츠 점검

강의 원문의 모든 내용이 반영되었는가
사례와 실패 경험이 누락되지 않았는가
AI가 사실을 임의로 추가하지 않았는가
문장이 자연스러운 한국어로 작성되었는가
과장된 홍보 문구가 남아 있지 않은가

발표 기능 점검

정해진 시간 안에 설명할 수 있는 구조인가
현재 장과 다음 장을 쉽게 확인할 수 있는가
브라우저 100%에서 핵심 내용이 보이는가
발표자가 조작하기 어려운 기능은 없는가
인터넷 연결이 불안할 때 사용할 대안이 있는가

모바일 화면 점검

가로 스크롤이 발생하지 않는가
버튼과 링크를 쉽게 누를 수 있는가
글자 크기가 지나치게 작지 않은가
이미지가 찌그러지거나 잘리지 않는가
외부 링크가 정상적으로 열리는가
불필요한 애니메이션이 줄어드는가

출력과 PDF 점검

A4 문서로 자연스럽게 출력되는가
카드와 표가 페이지 중간에서 잘리지 않는가
펼쳐보기의 상세 내용도 출력되는가
메뉴와 버튼이 인쇄되지 않는가
PDF에서 한글과 이미지가 정상적으로 보이는가

개인정보와 보안 점검

개인 이름과 연락처가 노출되지 않는가
얼굴과 화면 속 개인정보가 처리되었는가
내부 주소와 계정 정보가 포함되지 않았는가
API 키가 소스 코드에 들어 있지 않은가
공개해도 되는 자료만 포함되어 있는가

배포 점검

로그아웃 상태에서도 정상적으로 열리는가
최종 주소로 QR코드를 만들었는가
QR코드를 실제 스마트폰으로 시험했는가
수정한 내용이 공개 페이지에 반영되었는가
비용과 사용량 설정을 확인했는가

결론. PPT를 대체하는 것이 아니라 발표 경험을 확장하는 방법

발표자료를 웹앱으로 만드는 것은 개발자만 할 수 있는 작업이라고 생각하기 쉽습니다.

하지만 실제로 해보니 가장 중요한 것은 코딩 지식보다 내가 전달하고 싶은 내용을 충분히 가지고 있는가, 그리고 AI에게 결과물의 조건을 얼마나 구체적으로 알려주는가였습니다.

Google AI Studio나 ChatGPT Codex를 활용하면 발표자료의 내용 정리, 화면 구성, 반응형 디자인, 링크 연결, 출력용 PDF 페이지, 배포까지 하나의 흐름으로 진행할 수 있습니다.

웹앱이 파워포인트를 완전히 대신한다고 생각하지는 않습니다. 발표 시간이 짧고 몇 장의 핵심 화면만 필요한 경우에는 파워포인트가 더 편할 수 있습니다.

다만 다음과 같은 강의라면 발표용 웹앱을 한 번 시도해 볼 만합니다.

참여자가 자신의 휴대전화로 함께 봐야 하는 강의
외부 링크와 실제 사례를 많이 보여주는 발표
발표 후에도 자료를 계속 공유해야 하는 교육
내용이 자주 수정되는 강의
발표자료와 출력용 참고자료를 함께 제공해야 하는 경우

저 역시 처음부터 완성된 웹앱을 만든 것은 아닙니다. 내용을 입력하고, 결과를 확인하고, 빠진 내용을 보완하고, 화면 비율과 이미지를 여러 차례 수정했습니다.

그 과정을 거치면서 발표자료 제작의 중심이 “슬라이드를 몇 장 만들 것인가”에서 “참여자가 내용을 어떻게 경험하고 다시 활용하게 할 것인가”로 조금씩 바뀌었습니다.

이 점이 제가 발표용 웹앱을 만들면서 얻은 가장 큰 노하우였습니다.

자주 묻는 질문

코딩을 몰라도 발표용 웹앱을 만들 수 있나요?

AI에게 강의 내용, 화면 구조, 기능과 검수 기준을 구체적으로 제공하면 기본적인 발표용 웹앱을 만들 수 있습니다. 다만 링크, 개인정보, 모바일 화면과 PDF는 사람이 직접 확인해야 합니다.

Google AI Studio와 Codex 중 어느 것이 더 좋은가요?

무료 또는 간단한 웹 기반 제작을 원한다면 Google AI Studio부터 시작할 수 있습니다. 프로젝트 파일을 직접 관리하고 세밀하게 수정하려면 ChatGPT에서 기획한 뒤 Codex를 활용하는 방식이 편리할 수 있습니다.(그냥 ChatGPT 사용하세요 편합니다)

발표용 웹앱 제작에는 시간이 얼마나 걸리나요?

원고가 이미 정리되어 있다면 기본 화면은 비교적 빠르게 만들 수 있습니다. 다만 누락된 내용, 모바일 화면, 이미지, 애니메이션과 PDF를 수정하는 과정에서 추가 시간이 필요합니다.

웹앱을 만들면 발표자료도 자동으로 PDF가 되나요?

발표 화면과 인쇄 화면은 구조가 다르므로 출력용 페이지와 인쇄용 CSS를 별도로 요청하는 것이 좋습니다. PDF 저장 버튼은 브라우저의 인쇄 기능을 여는 방식으로 구현할 수 있습니다.

발표자료를 공개할 때 가장 주의할 점은 무엇인가요?

개인정보, 내부 주소, 비공개 링크, API 키와 이미지 속 식별정보를 확인해야 합니다. 공개 주소는 누구나 접근할 수 있다고 가정하고 자료를 구성하는 것이 안전합니다.

예시 웹앱 개발에

사용한 프롬프트: 인터랙티브 웹앱 통합 제작 프롬프트

당신은 교육 콘텐츠 기획, 인터랙티브 웹 디자인, 프론트엔드 개발을 모두 수행할 수 있는 시니어 UX 디자이너이자 프론트엔드 개발자입니다.

아래에 제공하는 강의 원고를 바탕으로 30분 분량의 발표용 반응형 웹앱을 제작해 주세요.

이 웹앱은 일반적인 정보 제공용 홈페이지나 홍보용 랜딩페이지가 아니라, 대형 화면에서 진행되는 외부 강의를 위한 인터랙티브 웹 프레젠테이션입니다.

발표자는 노트북과 프로젝터 또는 대형 모니터에서 웹앱을 사용하고, 참여자는 첫 화면의 QR코드로 접속하여 자신의 스마트폰이나 태블릿에서 같은 내용을 함께 확인합니다.

발표가 끝난 뒤에도 참여자가 다시 접속해 강의 내용을 확인하고, 외부 링크에 접속하며, 마지막 출력용 페이지를 PDF로 저장할 수 있어야 합니다.

1. 작업 시작 방식

먼저 현재 개발 환경과 프로젝트 파일을 확인해 주세요.

기존 프로젝트가 있다면 정상적으로 작동하는 구조와 기능을 최대한 유지하면서 개발해 주세요.

기존 프로젝트가 없다면 발표용 정적 웹앱에 적합한 안정적인 프로젝트를 새로 구성해 주세요.

React, TypeScript, Vite 기반 구성을 우선 검토하되, 현재 실행 환경에서 더 안정적인 방식이 있다면 그 방식을 선택해도 됩니다. 다른 방식을 선택할 경우 그 이유를 간단히 설명해 주세요.

바로 코드를 작성하기 전에 다음 내용을 먼저 정리해 주세요.

전체 화면 구성
장별 시각적 연출 계획
콘텐츠와 컴포넌트의 분리 방법
애니메이션 구현 방식
반응형 구현 방식
출력용 페이지 구현 방식
개인정보 보호 방법
생성하거나 수정할 주요 파일

계획을 세운 후 실제 개발을 진행해 주세요.

2. 강의 기본 정보

강의 제목: PPT 대신 발표용 웹앱 만들기
강의 부제: Google AI Studio와 ChatGPT Codex로 반응형 강의자료 제작하기
전체 강의 시간: 30분
주요 청중: 생성형 AI를 이용해 발표자료를 만들고 싶은 비개발자와 현장 실무자
청중의 경험 수준: ChatGPT 또는 Gemini를 사용한 경험은 있으나 웹 개발 경험은 많지 않음
발표 방식: 설명, 실제 경험 공유, 제작 과정 시연, 참여자 모바일 접속
주요 사용 환경:
- 1920×1080 대형 발표 화면
- 1366×768 노트북
- 태블릿
- 375px 이상의 스마트폰
기본 브라우저 화면 배율: 100%
문체: 실제 강사가 자신의 경험과 시행착오를 차분하게 설명하는 자연스러운 한국어 존댓말

강의 목적

참여자가 강의를 들은 후 다음 내용을 이해할 수 있어야 합니다.

발표자료를 웹앱으로 제작하는 장점을 설명할 수 있다.
정리되지 않은 메모를 강의 구조로 변환할 수 있다.
Google AI Studio와 Codex에 입력할 개발 프롬프트를 작성할 수 있다.
발표용 웹앱에 반응형 화면, 애니메이션, QR코드, 링크, PDF 기능을 포함할 수 있다.
완성된 웹앱을 검수하고 외부에 배포할 수 있다.

3. 가장 중요한 콘텐츠 원칙

다음 조건은 디자인보다 우선합니다.

아래에 제공하는 강의 원고의 모든 내용을 웹앱에서 확인할 수 있게 해 주세요.
원문의 내용을 임의로 삭제하거나 과도하게 축약하지 마세요.
각 장의 발표 화면에는 핵심 내용을 간결하게 보여 주세요.
자세한 설명은 펼쳐보기, 상세 카드, 탭, 팝오버 또는 출력용 페이지에서 모두 확인할 수 있게 해 주세요.
원문에 있는 실제 경험, 실패 사례, 비용 관련 주의사항, 수정 방법을 유지해 주세요.
원문에 없는 연구, 수치, 사례, 기관명, 인물명과 기능을 새로 만들지 마세요.
불확실한 내용은 임의로 보완하지 말고 [추가 확인 필요]라고 표시해 주세요.
비슷해 보이는 내용도 실제 의미와 사례가 다르면 삭제하지 마세요.
제목만 비슷한 경우 반영된 것으로 판단하지 말고 세부 내용까지 포함되었는지 확인해 주세요.
완성 후 원문과 웹앱을 항목별로 다시 대조해 누락된 내용을 확인해 주세요.

문체 원칙

다음과 같은 과장된 홍보 표현은 사용하지 마세요.

혁신적인
완벽한
놀라운
압도적인
새로운 시대를 여는
모든 것을 해결하는
단 한 번의 클릭
누구나 즉시 완성
교육의 미래를 바꾸는
상상을 현실로 만드는

실제 강사가 자신의 경험, 장점, 한계와 시행착오를 설명하는 자연스러운 한국어 문장으로 작성해 주세요.

짧고 명확한 문장을 사용하되, 구체적인 사례와 주의사항을 삭제하지 마세요.

4. 전체 강의 시간 구성

시작 및 참여자 접속: 1분
웹앱을 만들게 된 이유와 장점: 4분
전체 제작 과정: 4분
강의 내용 구조화와 프롬프트 작성: 6분
Google AI Studio와 Codex 활용: 6분
실제 제작 시연: 4분
문제 해결과 기능 활용: 3분
최종 점검 및 마무리: 2분

전체 장을 순서대로 진행했을 때 약 30분 안에 발표할 수 있도록 구성해 주세요.

5. 전체 장 구성

다음 13개 장으로 구성해 주세요.

시작 화면
왜 PPT가 아니라 웹앱이었을까
실제로 달라진 발표 방식
전체 제작 과정
생각나는 내용을 모두 꺼내기
메모를 강의 구조로 정리하기
개발 프롬프트에 반드시 넣을 내용
Google AI Studio 활용 방법
ChatGPT와 Codex 활용 방법
실제 제작 시연
자주 발생하는 문제와 수정 방법
이미지·링크·QR코드·PDF 활용
배포 전 최종 점검과 마무리

각 장에는 다음 요소를 포함해 주세요.

장 번호
장 제목
예상 발표 시간
핵심 메시지
화면에 표시할 핵심 내용
상세 발표자 설명
관련 사례 또는 주의사항
필요한 경우 참여자 질문
필요한 경우 복사 가능한 프롬프트
이전 장 버튼
다음 장 버튼
목차 이동 버튼

6. 시작 화면 구성

첫 화면은 발표장에서 즉시 사람들의 시선을 끌 수 있어야 합니다.

다음 요소를 포함해 주세요.

강의 제목
강의 부제
강의의 핵심을 보여주는 한 문장
강의에서 다룰 네 가지 주요 내용
웹앱 접속용 QR코드
주소 복사 버튼
발표 시작하기 버튼
전체 목차 보기 버튼
출력용 자료 보기 버튼

최종 배포 주소가 입력되지 않았다면 가짜 QR코드를 만들지 말고 다음 플레이스홀더를 표시해 주세요.

배포 후 최종 주소의 QR코드가 표시됩니다.

배포 URL은 코드 여러 곳에 반복해서 작성하지 말고 환경설정 파일이나 상수 한 곳에서 관리해 주세요.

최종 URL을 입력하면 QR코드와 주소 복사 기능이 함께 갱신되도록 구성해 주세요.

외부 유료 QR코드 API는 사용하지 마세요.

7. 발표 및 내비게이션 기능

다음 기능을 구현해 주세요.

현재 장 번호와 전체 장 수 표시
전체 발표 진행률 표시
이전 장과 다음 장 이동
전체 목차 열기와 닫기
목차에서 원하는 장으로 이동
현재 장을 목차에서 명확하게 강조
키보드 왼쪽·오른쪽 방향키로 장 이동
Home 키로 시작 화면 이동
Escape 키로 열린 목차나 상세 화면 닫기
새로고침 후에도 현재 장을 가능한 한 유지
URL hash 또는 안정적인 상태 관리 방식 활용
빠르게 장을 이동해도 화면이나 애니메이션이 겹치지 않음
발표자가 현재 위치를 잃지 않도록 일관된 내비게이션 제공
고정 메뉴가 본문이나 버튼을 가리지 않음

발표 화면에서 핵심 메시지는 가능한 한 첫 화면 안에서 확인할 수 있어야 합니다.

세부 설명이 길 경우 세로 스크롤을 자연스럽게 허용하거나 펼쳐보기 영역으로 분리해 주세요. 내용을 삭제해 한 화면에 강제로 맞추지 마세요.

8. 전체 디자인 방향

이 웹앱은 사람들의 눈에 확실히 띄어야 하며, 일반적인 문서형 웹페이지보다 시각적으로 풍부하고 화려해야 합니다.

다만 장식을 많이 넣는 것 자체를 목표로 하지 말고, 애니메이션과 시각적 변화가 핵심 내용과 발표 순서를 강조하도록 설계해 주세요.

전체적으로 다음과 같은 결과를 지향해 주세요.

전문 디자이너가 발표 목적에 맞게 직접 제작한 인터랙티브 웹 프레젠테이션
콘퍼런스 키노트와 디지털 매거진을 결합한 느낌
크고 명확한 한국어 타이포그래피
넓은 여백과 의도적인 비대칭
강한 제목과 짧은 핵심 문장
장의 성격에 따라 달라지는 다양한 레이아웃
발표장에서도 구분되는 명확한 대비
시선의 이동 경로가 명확한 정보 구조
화면 전체를 적극적으로 사용하는 구성
현대적이지만 유행을 과도하게 따라가지 않는 디자인
화려하지만 발표 내용은 쉽게 읽을 수 있는 디자인

특정 브랜드나 기존 웹사이트를 그대로 복제하지 마세요.

Apple의 화면을 그대로 따라 하지 말고, 명확성·일관성·시각적 위계·유연성이라는 원칙만 참고해 주세요.

색상은 한 가지 주 강조색과 2~3개의 보조색을 사용해 주세요. 색상 체계는 전체 장에서 일관되게 유지하되 장별 배경이나 강조 방식에 변화를 줄 수 있습니다.

각 장의 내용과 목적에 따라 다음 표현 방식을 다양하게 활용해 주세요.

대형 타이포그래피
편집 디자인형 비대칭 레이아웃
좌우 분할 비교
단계형 타임라인
프로세스 흐름도
큰 숫자와 짧은 핵심 문장
이미지와 설명의 조합
체크리스트
카드 선택형 상호작용
스크롤 반응형 콘텐츠
화면 전체를 활용하는 장면 전환

모든 장을 동일한 제목과 둥근 카드 3개 구조로 반복하지 마세요.

9. 피해야 할 전형적인 AI 생성 디자인

결과물이 생성형 AI가 자동으로 만든 흔한 랜딩페이지처럼 보이지 않도록 해 주세요.

특히 다음 요소를 관성적으로 사용하지 마세요.

보라색과 파란색을 섞은 흔한 네온 그라데이션
의미 없이 떠다니는 빛나는 구체
추상적인 블롭과 배경 입자
모든 요소를 반투명 카드로 만드는 과도한 글래스모피즘
모든 장에서 반복되는 동일한 3열 카드
지나치게 큰 둥근 모서리
모든 버튼을 캡슐형으로 만드는 구성
의미 없이 빛나는 테두리
과도한 그림자와 블러
필요 없는 대시보드형 숫자 카드
동일한 아이콘을 반복하는 기능 소개
과도한 그라데이션 글자
AI를 상징한다는 이유로 넣는 로봇·뇌·회로 이미지
내용과 관계없는 3D 오브젝트
모든 내용을 작은 카드 안에 가두는 구성
제목 아래에 추상적인 홍보 문장을 반복하는 구성
모든 장에 동일한 페이드인 효과를 적용하는 방식

글래스모피즘이나 그라데이션이 내용 전달에 실제로 도움이 되는 일부 영역에서는 제한적으로 사용할 수 있지만, 기본 디자인 언어로 사용하지 마세요.

10. 장별 시각적 연출

13개 장이 모두 비슷하게 보이지 않도록 다음 방향을 참고해 주세요.

1장. 시작 화면

화면을 크게 사용하는 대형 타이포그래피
제목이 문장 또는 단어 단위로 순차 등장
QR코드와 시작 버튼은 약간의 시간차를 두고 등장
과하지 않은 배경 선 또는 도형 움직임
시작 버튼을 누르면 다음 장으로 자연스럽게 전환

2장. 왜 웹앱인가

제작과 수정, 반응형, 발표 이후 활용이라는 세 가지 핵심 장점
카드가 단순히 나열되는 대신 순차적으로 확장되거나 연결
핵심 문장을 크게 강조

3장. 발표 방식의 변화

기존 슬라이드와 웹앱을 좌우로 나눈 비교 화면
양쪽 콘텐츠가 서로 다른 방향에서 등장
차이점이 순차적으로 강조

4장. 전체 제작 과정

6단계 프로세스가 연결선과 함께 순차적으로 완성
현재 설명 중인 단계가 크게 강조
모바일에서는 세로 타임라인으로 변경

5장. 내용 꺼내기

정리되지 않은 메모가 하나씩 쌓이는 연출
메모가 이후 구조화된 자료로 바뀔 것이라는 흐름을 시각적으로 표현
실제 메모 예시는 코드 블록이나 메모지 형태로 표시

6장. 강의 구조화

흩어진 메모가 목차와 시간표로 재배치되는 느낌
청중, 시간, 목적, 문체 등 필수 입력 항목이 순서대로 활성화
구조화 전과 후를 비교할 수 있게 구성

7장. 개발 프롬프트 조건

콘텐츠, 발표, 참여, 출력, 보안 영역을 서로 다른 시각적 구조로 표현
각 영역을 선택하면 상세 조건이 나타나는 방식 적용 가능
‘모든 내용을 반영할 것’이라는 문장을 가장 강하게 강조

8장. Google AI Studio 활용

입력, 생성, 확인, 수정, 배포의 작업 흐름
단계별 화면이 이어지는 구조
무료 사용량과 과금 주의사항은 별도 경고 영역으로 표시

9장. ChatGPT와 Codex 활용

내용 기획에서 파일 제작, 검수, 배포로 이어지는 흐름
폴더 또는 코드 구조를 지나치게 기술적으로 보이지 않게 시각화
모델 비용과 작업시간 관련 주의사항을 함께 표시

10장. 실제 제작 시연

프롬프트 입력
기본 웹앱 생성
수정 프롬프트 실행
모바일·링크·PDF 확인

위 네 단계를 화면 전환 또는 단계 선택형으로 보여 주세요.

실제 Google AI Studio나 ChatGPT 화면을 그대로 복제하지 말고 중립적인 인터페이스로 표현해 주세요.

11장. 자주 발생하는 문제

문제 카드를 선택하면 해결 프롬프트가 나타나는 인터랙션
내용 누락, 화면 잘림, 모바일 오류, 이미지 오류, 문체, PDF 문제를 구분
선택된 문제의 해결 과정이 명확하게 보이도록 구성

12장. 이미지·링크·QR코드·PDF

네 가지 기능을 각각 직접 확인할 수 있는 데모형 화면
이미지 확대 예시
링크 복사 피드백
QR코드 영역
PDF 저장 버튼

13장. 최종 점검

체크리스트가 순서대로 완료되는 연출
마지막에 핵심 메시지가 크게 등장
PDF로 저장, 프롬프트 보기, 처음부터 보기 버튼 제공

11. 애니메이션 효과

단순한 페이드인 효과만 반복하지 말고 화면의 목적에 따라 다양한 효과를 사용해 주세요.

장 전환

앞으로 이동할 때와 뒤로 이동할 때 전환 방향 구분
제목이 먼저 등장하고 핵심 콘텐츠가 이어서 등장
3~5개의 전환 방식을 정해 일관된 규칙으로 순환
전환 시간은 약 300~700ms 범위에서 조절
발표를 지연시키는 긴 애니메이션은 사용하지 않음
애니메이션이 끝나기 전에도 내비게이션을 사용할 수 있어야 함

콘텐츠 등장

카드와 항목이 짧은 간격을 두고 순차적으로 등장
프로세스는 1단계부터 순서대로 활성화
비교 화면은 좌우에서 서로 다른 방향으로 등장
핵심 숫자에는 카운트업 또는 강조 확대 효과 적용 가능
체크리스트는 확인 표시가 순서대로 완성
연결선은 진행 방향에 맞춰 그려지는 효과
이미지가 자연스럽게 확대되며 등장
긴 문장은 의미 단위로 순차 노출 가능
제목과 본문이 같은 순간에 모두 나타나지 않도록 시각적 순서 제공

사용자 반응 효과

카드에 마우스를 올리면 미세하게 상승하거나 깊이가 변함
버튼을 누를 때 명확한 눌림 상태 제공
링크와 복사 버튼을 누르면 짧은 성공 메시지 표시
목차 항목에 마우스를 올리면 해당 장의 성격이 드러나는 강조 효과
진행률이 장 이동에 따라 부드럽게 변화
펼쳐보기는 높이와 투명도가 자연스럽게 변화
QR코드 주변에는 과하지 않은 주목 효과 적용
현재 선택 상태는 애니메이션뿐 아니라 색상과 형태로도 구분

스크롤 반응

한 장 안에서 스크롤이 필요한 경우 선택적으로 다음 효과를 활용해 주세요.

화면에 들어온 콘텐츠의 순차 등장
주요 이미지의 매우 약한 패럴랙스
스크롤 위치에 따라 단계 활성화
현재 화면에 보이는 요소에만 애니메이션 적용
이미 지나간 요소가 계속 반복해서 움직이지 않음

패럴랙스와 스크롤 효과는 글자 가독성을 방해하지 않는 범위에서만 사용해 주세요.

12. 애니메이션 기술 조건

CSS 애니메이션과 브라우저 기본 기능을 우선 활용
필요한 경우 Framer Motion, Motion 또는 현재 프로젝트에 적합한 가벼운 라이브러리 한 가지 사용
무거운 애니메이션 라이브러리를 여러 개 중복 설치하지 않음
transform과 opacity 중심으로 구현
불필요한 레이아웃 재계산을 발생시키는 애니메이션 최소화
빠르게 장을 이동해도 이전 애니메이션이 남지 않도록 처리
애니메이션 중 화면 요소가 겹치거나 사라지지 않도록 처리
저사양 노트북과 일반 스마트폰에서도 부드럽게 작동
장식용 애니메이션이 버튼 클릭을 가로막지 않도록 설정
초기 로딩 속도를 고려해 자원 최적화
출력 화면에서는 모든 애니메이션과 트랜지션 제거

애니메이션을 추가하기 위해 앱의 안정성과 발표 조작성을 희생하지 마세요.

13. 반응형 및 기기별 재구성

화면 크기가 바뀔 때 단순히 줄바꿈만 하지 말고 콘텐츠 구조 자체가 자연스럽게 재구성되도록 해 주세요.

데스크톱

2열, 비대칭 그리드, 화면 분할 등 다양한 레이아웃 활용
1920×1080 화면에서는 여백만 커지지 않도록 콘텐츠 크기와 배치를 함께 확장
핵심 문장은 발표장 뒤에서도 읽을 수 있을 정도로 크게 표시

노트북

1366×768에서 고정 메뉴와 핵심 콘텐츠가 겹치지 않음
세로 공간이 부족하면 상세 설명을 펼쳐보기로 분리
주요 버튼이 화면 아래로 완전히 밀려나지 않도록 구성

태블릿

가로와 세로 화면을 모두 지원
내비게이션이 본문을 가리지 않음
복잡한 비대칭 레이아웃은 논리적인 1~2열 구조로 변경

모바일

375px 너비에서 가로 스크롤이 발생하지 않음
한 열 구조로 변경
데스크톱의 좌우 콘텐츠 순서를 논리적인 세로 순서로 재배치
표는 카드 또는 항목별 비교 형태로 전환
긴 프로세스는 세로 타임라인으로 전환
마우스 오버 기능은 터치·탭·펼쳐보기 기능으로 대체
코드 블록은 코드 영역 내부에서만 가로 스크롤 허용
버튼과 링크는 터치하기 충분한 크기 확보
모바일에서는 불필요한 배경 애니메이션과 패럴랙스 축소 또는 제거
효과보다 가독성과 조작성을 우선

CSS의 clamp(), 유동형 그리드, 적절한 미디어 쿼리 또는 컨테이너 쿼리를 활용해 자연스러운 크기 변화를 구현해 주세요.

14. 참여자 기능

다음 기능을 포함해 주세요.

QR코드로 웹앱 접속
주소 복사 버튼
모바일에서 모든 강의 내용 확인
상세 내용 펼쳐보기
외부 참고 링크 열기
외부 링크는 새 창에서 열기
noopener noreferrer 적용
링크의 목적을 텍스트로 명확하게 표시
링크가 없는 경우 가짜 주소를 임의로 만들지 않음
프롬프트 코드 블록 복사 버튼
복사 성공과 실패 상태 표시
모바일에서도 프롬프트와 출력용 페이지 확인 가능
필요하면 참여자 질문 또는 간단한 선택 영역 표시

사용자의 입력 결과를 외부 서버에 저장하는 기능은 추가하지 마세요.

15. 실제 제작 시연 화면

10장에는 다음 네 단계를 보여 주세요.

강의 원고와 개발 프롬프트 입력
생성된 기본 웹앱 확인
누락된 내용을 찾는 수정 프롬프트 실행
모바일 화면, 링크, QR코드와 출력용 PDF 확인

각 단계에는 다음을 포함해 주세요.

단계 번호
단계 제목
실제 수행할 행동
핵심 프롬프트
복사 버튼
발표자가 설명할 주의사항

실제 AI 서비스의 로고와 화면을 그대로 복제하지 말고, 중립적인 제작 과정 화면으로 구성해 주세요.

라이브 생성이 오래 걸리는 상황을 고려하여 다음 흐름도 안내해 주세요.

전체 프롬프트 입력 → 생성 시작 확인 → 미리 준비한 초안으로 이동 → 수정 프롬프트 실행 → 최종 결과 확인

16. 시연용 수정 프롬프트

웹앱 안에서 다음 프롬프트를 복사할 수 있게 제공해 주세요.

누락된 내용 점검

제가 처음 제공한 강의 원고와 현재 웹앱의 내용을 항목별로 대조해 주세요.

원문에는 있지만 웹앱에 반영되지 않은 문장, 사례, 단계, 수치, 주의사항과 프롬프트를 모두 찾아 먼저 누락 목록을 작성해 주세요.

제목만 비슷한 경우에는 반영된 것으로 처리하지 말고 실제 세부 내용이 포함되어 있는지 확인해 주세요.

기존 디자인, 내비게이션, 애니메이션과 정상 작동하는 기능은 유지하면서 누락된 내용만 적절한 장과 출력용 페이지에 추가해 주세요.

수정 후 어떤 내용을 어느 장에 추가했는지 알려 주세요.

화면 잘림 및 반응형 점검

현재 웹앱을 다음 화면 크기에서 점검해 주세요.

- 1920×1080
- 1366×768
- 768px 태블릿
- 375px 모바일
- 브라우저 화면 배율 100%

제목, 본문, 카드, 표, 이미지, 버튼과 고정 메뉴가 잘리거나 겹치는 부분을 수정해 주세요.

모바일에서는 가로 스크롤이 발생하지 않아야 합니다.

기존 강의 내용을 삭제하거나 임의로 축약하지 마세요.
한 화면에 내용이 너무 많으면 상세 내용을 펼쳐보기로 이동해 주세요.

AI 템플릿 디자인 제거

현재 웹앱이 생성형 AI가 만든 흔한 랜딩페이지나 템플릿처럼 보이는 부분을 먼저 찾아 목록으로 정리해 주세요.

특히 다음 요소가 있는지 확인해 주세요.

- 보라색·파란색 중심의 흔한 네온 그라데이션
- 반투명 유리 카드의 반복
- 의미 없이 떠다니는 추상 도형
- 모든 장에서 반복되는 동일한 카드 배열
- 지나치게 둥근 모서리
- 불필요한 네온 테두리
- 동일한 페이드인 애니메이션의 반복
- 내용과 관계없는 장식용 아이콘과 3D 오브젝트

기존 콘텐츠와 정상 작동하는 기능은 유지하면서 디자인을 다시 구성해 주세요.

13개 장이 각각의 내용에 맞는 서로 다른 레이아웃과 시각적 연출을 갖도록 하되, 전체 색상, 타이포그래피와 내비게이션 체계는 일관되게 유지해 주세요.

전문 디자이너가 발표 목적에 맞게 제작한 인터랙티브 웹 프레젠테이션처럼 수정해 주세요.

과장된 문체 수정

현재 웹앱의 전체 한국어 문장을 검토해 주세요.

과도한 감탄, 추상적인 홍보 문구와 근거 없는 최고·완벽·혁신 표현을 제거해 주세요.

실제 강사가 자신의 경험, 장점, 한계와 시행착오를 차분하게 설명하는 자연스러운 한국어 존댓말로 수정해 주세요.

구체적인 사례, 수치, 단계와 주의사항은 삭제하지 마세요.

개인정보 점검

현재 프로젝트의 화면, 콘텐츠 데이터, 이미지, 파일 경로와 소스 코드를 개인정보 보호 및 외부 공개 관점에서 점검해 주세요.

다음 정보가 포함되어 있는지 확인해 주세요.

- 개인 이름
- 얼굴
- 전화번호
- 이메일
- 주소
- 계정명
- 내부 문서번호
- 실제 사례 웹앱 주소
- 비공개 링크
- API 키
- 비밀값
- 로컬 컴퓨터 사용자명
- 전체 로컬 파일 경로
- 기관을 불필요하게 식별할 수 있는 정보

발견한 내용을 파일명과 위치별로 먼저 목록화해 주세요.

필요한 부분은 삭제, 익명화, 플레이스홀더 처리 또는 모자이크 처리해 주세요.

PDF 출력 점검

출력용 전체 정리 페이지를 A4 세로 PDF 저장 기준으로 점검해 주세요.

상단 메뉴, 화면용 내비게이션, 이전·다음 버튼, QR코드, 복사 버튼, 애니메이션과 장식용 배경은 인쇄에서 제외해 주세요.

모든 상세 내용은 펼쳐진 상태로 출력해 주세요.

카드, 표, 이미지와 코드 블록이 페이지 중간에서 부자연스럽게 잘리지 않게 해 주세요.

장 제목은 가능한 한 새 페이지에서 시작하고 한글 문장과 코드가 종이 밖으로 넘치지 않도록 수정해 주세요.

기존 발표 화면 디자인은 변경하지 말고 print CSS를 중심으로 수정해 주세요.

17. 이미지 적용

사용자가 제공한 이미지는 프로젝트 내부 폴더에서 불러오도록 구성해 주세요.

권장 폴더 예시:

public/images/

조건은 다음과 같습니다.

파일 경로를 명확하게 관리
원본 이미지 비율 유지
이미지가 찌그러지거나 과도하게 잘리지 않음
데스크톱과 모바일에서 적절한 최대 크기 적용
필요한 경우 확대해서 볼 수 있는 기능 제공
모든 이미지에 적절한 한국어 대체 텍스트 제공
이미지가 없어도 레이아웃이 무너지지 않음
얼굴, 이름, 연락처, 이메일, 주소, 계정 정보가 있으면 공개하지 않음
개인정보가 의심되는 이미지에는 배포 전 확인 표시
사용자가 모자이크를 요청한 경우 식별하기 어려운 수준으로 처리
이미지 처리 결과는 사람이 다시 확인할 수 있도록 안내

이미지를 임의로 외부 서버에 업로드하거나 공개 저장소에 전송하지 마세요.

18. 개인정보와 보안

실제 사례로 사용한 기존 웹앱의 URL은 화면, 코드, 주석, 메타데이터와 출력용 페이지에 표시하지 마세요.

다음 정보도 표시하지 마세요.

개인 이름
전화번호
이메일
주소
계정 정보
내부 문서번호
기관 내부 시스템 주소
비공개 문서 링크
로컬 컴퓨터 사용자명
전체 로컬 파일 경로
API 키
토큰
비밀값

이 웹앱은 정적인 강의자료이므로 실시간 AI API 호출 기능은 추가하지 마세요.

API 키가 필요한 기능을 임의로 추가하지 마세요.

개인정보를 자동으로 공개하거나 임의로 모자이크한 뒤 안전하다고 단정하지 말고, 배포 전 사람이 확인해야 하는 항목을 표시해 주세요.

19. 콘텐츠와 파일 구조

강의 내용과 화면 컴포넌트를 분리해 주세요.

강의 문구는 비개발자도 한곳에서 쉽게 수정할 수 있게 구성해 주세요.

권장 구조 예시:

src/
  components/
    PresentationLayout
    SlideNavigation
    ProgressIndicator
    TableOfContents
    ExpandableSection
    CopyPromptButton
    QRCodeSection
    ProblemSolutionCard
  data/
    lectureContent
    prompts
    appConfig
  pages/
    PresentationPage
    PrintPage
  styles/
    global
    presentation
    print
public/
  images/

현재 프로젝트 상황에 맞게 조정할 수 있습니다.

다만 다음 조건을 지켜 주세요.

강의 원고가 한곳에 모여 있음
배포 URL을 한곳에서 수정 가능
프롬프트를 별도 데이터로 관리
발표 화면과 출력 화면의 스타일 분리
한 장을 수정해도 다른 장이 깨지지 않음
사용하지 않는 코드와 import를 남기지 않음
불필요한 패키지를 설치하지 않음

20. 출력용 전체 정리 페이지

웹앱의 마지막 또는 별도 경로에 출력용 전체 정리 페이지를 만들어 주세요.

출력용 페이지에는 다음 내용을 모두 포함해 주세요.

강의 제목과 부제
강의 목적
전체 목차
13개 장의 핵심 내용
각 장의 상세 발표자 원고
Google AI Studio 활용 방법
ChatGPT와 Codex 활용 방법
통합 웹앱 제작 프롬프트
반복 수정용 프롬프트
이미지와 링크 적용 방법
애니메이션과 반응형 제작 조건
개인정보 보호 조건
배포 전 최종 점검표
작성일과 버전 표시 영역

PDF로 저장 버튼을 누르면 브라우저의 인쇄 창이 열리도록 해 주세요.

인쇄 조건

A4 세로
적절한 상하좌우 여백
명확한 제목과 본문 위계
메뉴, 내비게이션, QR코드, 복사 버튼 숨김
화면용 버튼 숨김
애니메이션과 트랜지션 제거
장식용 배경과 그림자 최소화
모든 펼쳐보기 내용 출력
카드와 표가 페이지 중간에서 잘리지 않음
장 제목은 가능한 한 새 페이지에서 시작
이미지가 종이 밖으로 넘치지 않음
코드 블록이 페이지 너비 안에 들어오도록 처리
한글 줄바꿈이 정상적으로 작동
흑백 인쇄에서도 내용을 구분할 수 있음
배경색 없이도 정보 구조를 이해할 수 있음

완전한 서버 기반 PDF 생성 기능은 추가하지 말고 우선 window.print()와 print CSS를 활용해 안정적으로 구현해 주세요.

21. 접근성 및 동작 감소 설정

화려한 디자인과 애니메이션을 적용하더라도 접근성을 훼손하지 마세요.

다음 조건을 적용해 주세요.

시맨틱 HTML 사용
키보드만으로 모든 주요 기능 사용 가능
명확한 focus-visible 스타일
본문과 배경의 충분한 명도 대비
이미지 대체 텍스트 제공
아이콘 버튼에 접근 가능한 이름 제공
버튼의 기능을 텍스트로 명확하게 표시
색상만으로 선택과 상태를 구분하지 않음
빠르게 깜박이는 효과 금지
지속적으로 반복되는 움직임 최소화
자동으로 움직이는 요소가 있으면 일시정지 또는 정지 가능
애니메이션 없이도 모든 정보와 상태를 이해할 수 있음
키보드 포커스가 화면 전환 때문에 사라지지 않음
목차나 모달을 열었을 때 초점 이동과 닫기 기능 제공
모바일 터치 영역은 충분한 크기로 구성

prefers-reduced-motion: reduce를 반드시 반영해 주세요.

동작 감소 설정에서는 다음 효과를 제거하거나 최소화해 주세요.

패럴랙스
큰 이동
확대와 축소
자동 재생
순차 등장 지연
반복 애니메이션
장식용 배경 움직임

22. 성능과 안정성

정적 발표자료에 적합한 안정적인 구조 사용
불필요한 데이터베이스, 로그인과 회원가입 기능 추가 금지
외부 유료 API 사용 금지
이미지와 정적 자원 최적화
초기 로딩 속도 관리
지연 로딩이 필요한 이미지에만 적용
발표 중 인터넷 연결이 불안정해도 현재 로드된 내용은 계속 볼 수 있게 구성
오류가 발생해도 나머지 장을 확인할 수 있게 처리
브라우저 콘솔에 불필요한 오류를 남기지 않음
애니메이션으로 인한 메모리 누수 방지
빠르게 장을 이동해도 타이머와 이벤트가 중복되지 않음
저사양 노트북에서도 발표가 가능하도록 최적화
모바일에서 애니메이션 수와 복잡도를 줄임
모든 기능이 애니메이션 완료를 기다리지 않고 작동

23. 배포 관련 구성

현재 환경에서 지원되는 배포 방법을 기준으로 안내해 주세요.

Google AI Studio 환경이라면 미리보기와 지원되는 Google 배포 절차를 설명해 주세요.

Codex 또는 로컬 프로젝트 환경이라면 다음 내용을 설명해 주세요.

로컬 실행 방법
production build 방법
생성된 빌드 파일 위치
정적 호스팅 또는 지원되는 Sites 기능에 배포하는 방법
배포 URL을 설정하는 위치
QR코드를 최종 URL로 변경하는 방법
배포 후 다시 확인할 항목

배포를 자동으로 진행하기 어려운 환경에서는 임의로 완료했다고 주장하지 말고 사용자가 수행해야 하는 단계를 명확히 안내해 주세요.

24. 완성 후 자동 검수

개발이 끝나면 다음 항목을 직접 점검해 주세요.

콘텐츠

13개 장이 모두 존재하는가
제공한 원문의 모든 핵심 내용과 상세 내용이 반영되었는가
누락된 사례, 단계, 수치와 주의사항이 없는가
원문에 없는 사실이 추가되지 않았는가
과장된 홍보 문구가 남아 있지 않은가
한국어 문장이 자연스러운가

발표 기능

전체 흐름이 30분 강의에 적합한가
이전·다음·목차 이동이 작동하는가
키보드 방향키와 Home·Escape 키가 작동하는가
진행률과 현재 장 표시가 정확한가
빠르게 이동해도 화면과 애니메이션이 겹치지 않는가

디자인

첫 화면이 발표장에서 즉시 시선을 끌 수 있는가
13개 장의 레이아웃이 모두 같은 카드 구조로 반복되지 않는가
애니메이션이 내용 전달에 도움이 되는가
단순한 페이드인 효과만 반복되지 않는가
전형적인 보라색 AI 랜딩페이지처럼 보이지 않는가
과도한 글래스모피즘과 추상 장식이 없는가
화려한 화면에서도 제목과 본문을 쉽게 읽을 수 있는가
전문 디자이너가 편집한 프레젠테이션처럼 보이는가

반응형

1920×1080, 브라우저 100%에서 핵심 내용이 잘리지 않는가
1366×768 노트북에서 내비게이션이 콘텐츠를 가리지 않는가
태블릿 가로·세로에서 레이아웃이 안정적인가
375px 모바일에서 가로 스크롤이 없는가
모바일 버튼과 링크를 쉽게 누를 수 있는가
모바일에서 불필요한 애니메이션이 줄어드는가

기능

모든 내부 버튼이 작동하는가
외부 링크가 새 창에서 열리는가
주소와 프롬프트 복사 버튼이 작동하는가
QR코드가 최종 배포 URL을 사용하는가
URL이 없을 때 플레이스홀더가 표시되는가
출력용 페이지가 모든 내용을 포함하는가
PDF 저장 버튼이 인쇄 창을 여는가

출력

A4 세로 출력이 정상적인가
카드, 표, 이미지와 코드 블록이 부자연스럽게 잘리지 않는가
모든 상세 내용이 출력되는가
메뉴, 버튼, QR코드와 애니메이션이 인쇄되지 않는가
한글이 깨지거나 겹치지 않는가

개인정보 및 보안

실제 사례 웹앱 주소가 노출되지 않는가
개인 이름, 얼굴, 연락처와 이메일이 노출되지 않는가
로컬 사용자명과 파일 경로가 노출되지 않는가
API 키와 비밀값이 포함되지 않는가
외부 공개가 곤란한 자료가 포함되지 않는가

접근성과 성능

키보드만으로 주요 기능을 사용할 수 있는가
포커스 표시가 명확한가
동작 감소 설정이 작동하는가
애니메이션이 없는 상태에서도 모든 내용을 이해할 수 있는가
저사양 환경에서 심각한 끊김이 없는가
브라우저 콘솔에 불필요한 오류가 없는가

문제가 발견되면 다음 기준으로 분류해 주세요.

발표 또는 배포를 막는 문제
발표 전에 수정하는 것이 좋은 문제
선택적으로 개선할 문제

발표와 배포를 막는 문제부터 수정한 후 다시 검수해 주세요.

25. 개발 검증

현재 프로젝트에서 사용할 수 있다면 다음 검증을 실행해 주세요.

타입 검사
lint
production build

오류가 발생하면 원인을 확인하고 수정한 후 다시 실행해 주세요.

검증을 실제로 실행하지 못했다면 실행했다고 주장하지 말고, 사용자가 직접 실행해야 하는 명령을 안내해 주세요.

26. 완료 후 보고할 내용

개발이 끝나면 다음 내용을 정리해 주세요.

구현한 주요 기능
적용한 전체 디자인 콘셉트
장별로 다르게 적용한 시각적 연출
사용한 애니메이션 방식
모바일에서 줄이거나 제거한 효과
생성하거나 수정한 주요 파일
강의 문구를 수정할 파일
프롬프트를 수정할 파일
이미지를 추가할 폴더
배포 URL을 입력하는 위치
QR코드를 변경하는 방법
로컬 실행 방법
production build 방법
출력용 PDF 확인 방법
개인정보 보호를 위해 처리한 내용
아직 사람이 직접 확인해야 하는 항목
배포 시 주의사항

27. 강의 원고

아래 원고를 기준으로 모든 내용을 웹앱에 반영해 주세요.

원고가 길더라도 임의로 삭제하거나 축약하지 말고, 발표 화면의 핵심 내용과 상세 설명을 구분하여 전체 내용을 확인할 수 있게 해 주세요.

[강의 원고 시작]

여기에 앞서 작성한 30분 발표용 13개 장 전체 원고를 붙여 넣어 주세요.

[강의 원고 끝]