AI로 만드는 발표용 반응형 웹앱 제작 가이드

전통적인 파워포인트(PPT) 발표 방식에서 벗어나, AI 도구를 활용해 반응형 웹앱으로 발표 자료를 만드는 실용적인 방법이 주목받는다. 이 방식은 자료 제작 시간을 줄이고, 다양한 기기에서 통일된 경험을 제공하며, 발표 후에도 교육 자료로 활용도를 높인다. 코딩 경험이 적은 사람도 구글 AI 스튜디오와 챗GPT 코덱스를 사용해 전문적인 발표용 웹앱을 만드는 과정을 상세히 알아본다.

발표용 웹앱이 가진 강점

발표 자료를 웹앱 형태로 만들면 여러 이점을 얻는다. 파워포인트 슬라이드 작업보다 제작 시간이 적게 들며, 특히 수정과 디자인 변경이 빠르다. 웹앱은 기본 디자인 체계를 한 번 설정하면 내용이 추가돼도 카드나 섹션이 자동으로 확장한다. 전체 디자인 변경도 AI에 요청하면 한꺼번에 반영된다.

또한 발표장에서는 대형 화면으로 자료를 보여주고, 참여자는 QR코드로 스마트폰이나 태블릿에서 같은 내용을 직접 확인한다. 화면 크기에 따라 내용이 자동으로 재배치되는 반응형 구조 덕분에 모바일용 자료를 별도로 만들 필요가 없다. 작은 글씨를 확대하거나, 링크와 참고 자료를 직접 눌러볼 수 있어 참여자의 몰입도를 높인다.

하나의 웹앱으로 다양한 역할을 동시에 수행한다. 발표 중 시각 자료, 참여자가 살펴보는 교육 자료, 발표 후 재확인하는 참고 자료, 관련 사이트 링크 모음, 그리고 출력용 배포 자료까지 된다. 특히 @media print, @page 등 인쇄용 CSS를 활용해 화면 디자인과 인쇄·PDF용 디자인을 다르게 구성하며, 페이지 나눔과 여백도 별도로 지정할 수 있다.

다음 표는 웹앱 발표 자료가 가진 주요 장점을 보여준다.

특징	파워포인트 슬라이드	웹앱 발표 자료
제작 시간	슬라이드별 디자인 및 정렬에 시간 소요	기본 디자인 후 내용 추가 시 자동 확장, 시간 절약
수정 편의성	내용 추가 시 글꼴, 도형, 이미지 등 개별 조정 필요	AI가 공통 스타일 수정 시 전체 화면에 일괄 반영
접근성	발표 자료와 별도 모바일용 제작 필요	반응형 구조로 모든 기기에서 최적화된 화면 제공
상호작용	일방적 정보 전달	참여자가 직접 확대, 링크 클릭 등 상호작용 가능
자료 활용	발표 후 PDF 변환 시 화면 디자인 유지 어려움	발표 후 참고 자료, 출력용 PDF, 링크 모음 등으로 활용도 높음
인쇄 편의성	발표 화면 그대로 인쇄 시 비효율적	인쇄용 CSS로 화면 디자인과 다른 맞춤형 출력물 생성

웹앱은 단순한 PPT 대체재가 아니라, 발표자와 참여자 모두에게 확장된 경험을 제공한다.

발표용 웹앱 제작 6단계

발표용 웹앱 제작은 6단계로 진행한다. 핵심은 아이디어를 꺼내는 단계는 자유롭게 하되, 개발을 요청하는 단계는 구체적으로 작성하는 것이다.

단계	설명	중요성
1단계: 브레인스토밍	발표할 내용을 최대한 많이 적는다. 완성된 문장이나 목차보다 생각나는 사례, 수치, 실패 경험, 주의사항을 모두 기록한다.	머릿속 생각을 제약 없이 쏟아내는 과정이다.
2단계: 강의 내용 구조화	정리되지 않은 메모를 챗GPT에 입력해 강의 주제, 청중, 시간, 목적, 핵심 메시지 등 구체적인 강의 조건을 제시한다. AI에게 내용을 삭제하지 말고 주제별로 분류하도록 요청하고, 강의 시간에 맞춰 재구성한다.	AI가 웹앱 개발 명세로 전환하기 전, 내용을 논리적으로 정리하고 다듬는 단계이다.
3단계: 개발 프롬프트 작성	구조화된 내용을 바탕으로 웹앱 개발자가 이해할 수 있는 구체적인 명세를 작성한다. 콘텐츠, 발표, 참여, 출력, 접근성, 개인정보 및 보안 조건을 상세히 명시한다.	AI가 의도에 맞는 웹앱을 생성하도록 명확한 지침을 제공한다.
4단계: 웹앱 생성 및 수정	구글 AI 스튜디오 또는 챗GPT 코덱스를 활용해 웹앱을 생성한다. AI가 생성한 초안을 보며 누락된 내용, 발표 흐름, 화면 배치, 모바일 화면, 이미지, 링크, 출력, 개인정보 순으로 한 번에 한 종류씩 수정한다.	AI 생성물의 완성도를 높이는 반복 작업이다.
5단계: 모바일, 링크, QR코드, PDF, 개인정보 점검	최종 점검을 진행한다. 특히 모바일 화면, 모든 링크 작동 여부, QR코드, PDF 저장 기능, 개인정보 노출 여부를 면밀히 확인한다.	실제 사용 환경에서의 기능 검증과 보안을 확보한다.
6단계: 웹앱 배포	구글 AI 스튜디오나 챗GPT 사이트(Sites) 기능을 활용해 웹앱을 배포한다. 배포 후에도 수정할 내용이 있다면 재배포한다.	제작된 웹앱을 실제 환경에서 사용할 수 있도록 공개한다.

AI 프롬프트 작성의 중요성

발표용 웹앱 제작 성공의 핵심은 정확하고 구체적인 프롬프트 작성에 달렸다. 단순히 “예쁜 발표용 웹사이트를 만들어 달라”고 요청하면 중요한 내용이 빠지거나, 화려하지만 발표하기 어려운 결과가 나올 수 있다. AI에게는 다음 항목을 구체적으로 요청해야 한다.

구분	요청 내용	핵심 강조점
콘텐츠 조건	원문 모든 내용 확인 가능, 사례/주의사항 삭제 금지, 핵심/상세 구분, 출처 표시, 사실 추가 금지	정보의 정확성과 완전성이 중요하다.
발표 조건	강의 흐름에 맞는 장 구분, 현재 위치 표시, 쉬운 이동, 대형 화면 가독성, 브라우저 100% 기준	발표 현장의 유용성과 조작성을 확보한다.
참여 조건	모바일 가독성, QR코드 접속, 외부 링크 즉시 열기, 펼쳐보기 기능, 링크 새 창 열림 명시	참여자의 접근성과 상호작용을 고려한다.
출력 조건	출력용 전체 정리 페이지, A4 인쇄 스타일, PDF 저장 버튼, 페이지 중간 잘림 방지, 인쇄 가독성	자료의 재활용성과 배포 용이성을 높인다.
접근성 조건	키보드 사용 가능, 명도 대비, 이미지 대체 설명, 색상 외 정보 구분, 과도한 움직임 제한	모든 사용자를 위한 포괄적 디자인을 지향한다.
개인정보 및 보안 조건	개인정보 미포함/모자이크, API 키 직접 노출 금지, 배포 전 점검 목록 표시	정보의 안전성과 신뢰성을 확보한다.

AI 모델의 문체 차이도 고려해야 한다. 과장된 홍보 문구 대신, 실제 강사의 경험을 차분하게 설명하는 문체를 요청하는 것이 좋다. 예를 들어 “실제 강사가 자신의 경험을 차분하게 설명하는 문체로 작성해 달라”는 조건을 프롬프트에 명시한다.

AI 도구 활용법

발표용 웹앱을 만들기 위해 구글 AI 스튜디오와 챗GPT 코덱스를 활용한다. 두 도구는 각각 다른 강점을 지닌다.

구글 AI 스튜디오로 웹앱 만들기

무료로 시작하거나 웹 기반 작업을 선호한다면 구글 AI 스튜디오의 Build 기능을 사용한다. 이 도구는 프롬프트를 기반으로 앱 파일 구조와 코드를 만들고, 미리보기 화면에서 결과를 즉시 확인하게 한다. 제작한 앱은 클라우드 런(Cloud Run)으로 직접 배포도 가능하다.

1. Build 화면 열기: 일반 질의응답이 아닌 웹앱 생성 및 미리보기 기능을 사용한다.
2. 모델 선택: 제미나이(Gemini) 3.6 플래시(Flash) 모델을 선택한다. 이 모델은 코드 생성과 반복 작업에 효율적이다. 복잡한 오류 시 상위 모델을 일시적으로 사용하기도 한다.
3. 프롬프트 및 원문 입력: 작성한 프롬프트와 강의 원문을 한 번에 입력한다. 이때 “제공한 모든 내용을 웹앱 안에서 확인할 수 있어야 하며, 내용을 임의로 삭제하거나 축약해서는 안 된다”는 조건을 반드시 포함한다. 약 10~15분 후 결과가 출력된다.
4. 단계별 수정: 디자인, 내용, 기능을 한 문장에 모두 섞어 요청하지 않는다. 누락된 내용, 발표 흐름, 화면 배치, 모바일 화면, 이미지, 링크, 출력, 개인정보, 최종 오류 순으로 한 번에 한 종류씩 수정한다.
5. 웹앱 배포: 미리보기 화면에서 최종 점검 후 Publish 버튼을 눌러 앱을 배포한다.

무료 사용량 관리: 무료 사용량이나 요청 한도에 도달하면 바로 유료 결제를 연결하지 않는 것이 좋다. 한도 초기화 시점을 확인하고, 무료 사용량이 다시 제공된 후 작업을 이어가는 편이 안전하다.

챗GPT와 코덱스 활용하기

챗GPT 사용자는 챗GPT에서 강의 내용을 정리한 후 코덱스(Codex)를 이용해 웹앱을 개발하는 방식을 선택한다. GPT-5.6 Sol은 코딩뿐 아니라 디자인 판단과 결과물 완성도 개선에 강점을 지닌다.

1. 개발 폴더 생성: 컴퓨터에 웹앱 개발을 위한 별도 폴더를 만든다.
2. 코덱스 실행 및 프로젝트 연결: 코덱스를 설치하고 새 프로젝트를 생성해 앞서 만든 폴더와 연결한다.
3. 프롬프트 및 원고 전달: 완성한 웹앱 제작 프롬프트와 강의 원고를 코덱스에 전달한다. 정적 웹앱이라면 처음부터 최고 수준의 추론 설정을 사용할 필요는 없다. 미디엄(Medium) 수준으로 시작하고, 복잡한 오류 발생 시 더 높은 설정을 사용한다.
4. 작업 과정 확인: 코덱스가 프로젝트 구조를 만들고 파일을 수정하며 오류를 확인하는 과정을 지켜본다. 프로젝트 규모에 따라 30분에서 1시간 정도 소요될 수 있다.
5. 사이트(Sites)로 배포: 챗GPT 사이트 기능을 활용해 코덱스에서 만든 프로젝트를 호스팅된 사이트로 전환한다. 계정과 요금제에 따라 기능 제공 범위가 달라질 수 있으므로, 사용 가능 여부를 확인한다.

이미지, 반응형 화면, QR코드, PDF로 완성도 높이기

제작한 웹앱의 완성도를 높이려면 몇 가지 요소를 세심하게 관리해야 한다.

이미지 처리

구글 AI 스튜디오에서 로컬 이미지를 직접 업로드하는 데 어려움이 있다면, 구글 클라우드 저장소에 먼저 올린 후 연결한다. 이미지 처리는 다음 순서로 진행한다.

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

챗GPT 코덱스에서는 이미지 파일을 개발 프로젝트 폴더(예: public/images)에 직접 넣고, 파일 위치와 사용할 화면, 데스크톱 및 모바일 최대 크기, 원본 비율 유지 여부, 없을 때 대체 화면, 개인정보 모자이크 여부, 대체 텍스트 등을 구체적으로 요청한다. AI가 모자이크 처리했다고 답해도 사람이 직접 다시 확인해야 한다.

반응형 화면 조정

웹앱 제작 중 화면 비율이 맞지 않을 때 당황하지 않아도 된다. 기본적으로 브라우저 화면 배율 100%를 기준으로 제작하고, 실제 발표 환경에 따라 브라우저 확대·축소를 조정한다. 개발 단계에서는 노트북 일반 화면(1920×1080), 대형 화면, 세로형 스마트폰, 가로형 태블릿 등 다양한 환경에서 확인한다.

프롬프트에 “브라우저 화면 배율 100%를 기준으로 모든 발표 화면이 잘리지 않게 해 달라”, “모바일 화면에서 가로 스크롤이 생기지 않도록 수정해 달라”고 구체적으로 요청한다. 핵심 내용은 스크롤 없이 보게 하고, 상세 내용은 펼쳐보기로 분리한다.

링크와 QR코드 활용

웹앱의 큰 장점은 자료 안의 링크가 실제 작동한다는 것이다. 사례, 서비스, 참고문헌, 영상, 설문조사 등을 링크로 연결하면 참여자가 직접 확인한다. 링크를 추가할 때는 주소 정확성, 로그인 불필요 여부, 모바일 접근성, 외부 공개 가능 여부, 새 창 열림 여부, 링크 목적 명확성 등을 확인한다.

강의 시작 화면에는 웹앱 전체 주소의 QR코드를 포함한다. 이 QR코드로 참여자가 휴대전화에서 쉽게 접속해 발표를 함께 보고, 발표 후에도 자료를 다시 확인하게 돕는다. 다만 공개용 QR코드에는 내부 문서나 개인정보가 포함된 주소를 사용하지 않는다.

출력용 PDF 페이지 구성

발표 화면을 그대로 인쇄하면 잉크 낭비, 버튼 및 메뉴 출력, 카드 잘림 등의 문제가 발생한다. 따라서 웹앱 마지막에 출력용 전체 정리 페이지를 별도로 만드는 것이 좋다. 이 페이지에는 강의 제목, 목적, 목차, 핵심 내용, 제작 과정, 프롬프트, 주의사항, 점검 목록, 참고 링크 등을 포함한다.

PDF 저장 버튼은 브라우저의 인쇄 창을 여는 방식으로 구현한다. 인쇄 화면에서는 상단 메뉴, 버튼, 애니메이션, 배경 장식 등 불필요한 요소를 제거하고, 모든 펼쳐보기 내용을 인쇄 시 펼쳐진 상태로 출력되게 한다. A4 세로 방향에 적합한 구조로 제목과 카드가 페이지 중간에서 잘리지 않게 조정한다.

실전 노하우와 최종 점검

발표용 웹앱을 만들면서 얻은 실전 노하우와 배포 전 최종 점검 사항은 다음과 같다.

실전 노하우

• 프롬프트 기술보다 원본 내용이 중요하다: 멋진 지시문보다 실제로 경험한 사례, 실패, 수정 과정, 비용, 참여자 반응 등 구체적인 내용을 충분히 제공한다. 내용이 부족하면 디자인이 좋아도 일반적인 설명만 담긴 웹앱이 된다.
• 처음부터 완벽하게 정리하지 않는다: 생각나는 내용을 먼저 모두 적고, AI에게 분류와 구조화를 맡긴다. 아이디어를 자유롭게 꺼내고, 개발 지시는 구체적으로 하는 방식이 효과적이다.
• 모든 내용을 반영하라고 반복 확인한다: AI는 보기에 좋은 결과를 위해 내용을 요약하거나 중복을 제거하기도 한다. 강의 자료에서는 비슷한 문장도 다른 사례나 의미를 담을 수 있으므로 “원문의 모든 내용이 웹앱 안에서 확인되어야 한다. 내용을 임의로 삭제하거나 축약하지 마세요”와 같은 문장을 여러 단계에서 사용한다.
• 화려한 디자인보다 발표 편의성 우선이다: 발표용 웹앱은 디자인 포트폴리오가 아니다. 제목이 명확하고, 현재 위치를 알 수 있으며, 쉽게 이동하고, 글자를 읽을 수 있어야 한다. 과도한 애니메이션은 집중도를 떨어뜨린다.
• 웹앱과 출력 자료를 하나로 만든다: 발표자료를 웹앱으로 만들었다고 해서 문서가 불필요해지는 것은 아니다. 발표 후에도 살펴볼 사람을 위해 출력용 PDF를 함께 제공하면 자료 활용도가 높아진다.
• 마지막 검수는 사람이 직접 한다: AI가 “모든 기능을 확인했다”고 답해도 실제 브라우저에서 링크 오류, 모바일 화면, 화면 잘림, 인쇄 페이지, 개인정보, 수치와 고유명사, QR코드, 배포 후 공개 범위를 사람이 직접 확인해야 한다.

배포 전 최종 체크리스트

발표용 웹앱을 배포하기 전에는 다음 항목들을 꼼꼼하게 점검해야 한다.

구분	점검 항목
콘텐츠	강의 원문 모든 내용 반영 여부, 사례/실패 경험 누락 없음, AI가 사실 추가하지 않음, 자연스러운 한국어 문장, 과장된 홍보 문구 없음
발표 기능	정해진 시간 내 설명 가능 구조 여부, 현재/다음 장 확인 용이, 브라우저 100% 화면에서 핵심 내용 보임, 발표자 조작 용이, 인터넷 불안정 시 대안 여부
모바일 화면	가로 스크롤 없음, 버튼/링크 조작 용이, 글자 크기 적정, 이미지 왜곡/잘림 없음, 외부 링크 정상 열림, 불필요한 애니메이션 축소 여부
출력/PDF	A4 문서로 자연스러운 출력, 카드/표 페이지 중간 잘림 없음, 펼쳐보기 상세 내용 출력, 메뉴/버튼 인쇄 안 됨, PDF 한글/이미지 정상 표시
개인정보/보안	개인 이름/연락처 노출 없음, 얼굴/화면 속 개인정보 처리, 내부 주소/계정 정보 포함 없음, API 키 소스 코드 미포함, 공개 가능 자료만 포함
배포	로그아웃 상태에서 정상 작동, 최종 주소로 QR코드 생성, QR코드 실제 시험, 수정 내용 공개 페이지 반영, 비용/사용량 설정 확인

발표 경험을 넓히는 선택

발표 자료를 웹앱으로 만드는 과정은 개발자만의 영역으로 여겨지곤 한다. 그러나 실제로는 코딩 지식보다 ‘전달하고 싶은 내용을 충분히 갖추었는지’와 ‘AI에게 결과물의 조건을 얼마나 구체적으로 알려주는지’가 훨씬 중요하다. 구글 AI 스튜디오나 챗GPT 코덱스를 활용하면 내용 정리, 화면 구성, 반응형 디자인, 링크 연결, 출력용 PDF, 배포까지 일련의 과정을 매끄럽게 진행한다.

웹앱이 파워포인트를 완전히 대체하지는 않는다. 발표 시간이 짧고 몇 장의 핵심 화면만 필요할 때는 파워포인트가 더 편리할 수 있다. 하지만 참여자가 자신의 휴대전화로 함께 봐야 하는 강의, 외부 링크와 실제 사례가 많은 발표, 발표 후에도 자료를 계속 공유해야 하는 교육, 내용이 자주 수정되는 강의, 발표자료와 출력용 참고자료를 함께 제공해야 하는 경우에는 발표용 웹앱을 시도해 볼 만하다.

발표자료 제작의 중심이 ‘슬라이드를 몇 장 만들 것인가’에서 ‘참여자가 내용을 어떻게 경험하고 다시 활용하게 할 것인가’로 바뀌는 것이 이 방식의 가장 큰 노하우이다.

출처

• 틸노트. PPT 대신 발표용 웹앱 만들기 — Google AI Studio와 ChatGPT Codex로 반응형 강의자료. https://tilnote.io/pages/6a6e8605e0943ceeb92e8d13