— 프롬프트 한 문장이면, 실제 클릭 가능한 웹 페이지가 만들어집니다 —
활용 도구: Stitch · Figma · v0(Vercel) · Lovable
Chapter 1~12 를 따라오면서, 우리는 AI 와 함께 일하는 거의 모든 방법을 배웠습니다. 글·이미지·영상·발표자료를 만들게 했고(Ch.1~4), 심층 분석을 시키고(Ch.5), 나를 기억하는 비서를 만들었고(Ch.6), 문서를 통째로 읽게 하고(Ch.7), 웹 서비스를 조작하게 하고(Ch.8), 내 컴퓨터 파일을 처리하게 하고(Ch.9~10), 업무 흐름을 자동화하고(Ch.11), 조직용 AI 챗봇까지 만들었습니다(Ch.12).
이번 장은 이 책의 가장 놀라운 도약입니다. "프롬프트 한 문장을 입력하면, 실제로 클릭 가능한 웹 페이지나 모바일 앱 화면이 만들어지는 것"입니다. 호텔 예약 페이지, 포트폴리오 사이트, 행사 안내 페이지 — 이 모든 것을 프로그래밍 지식 없이, 한국어 한 문장으로 만들 수 있습니다.
"웹 페이지를 만들려면 HTML, CSS, JavaScript 를 배워야 하는 것 아닌가?" 그랬습니다. 디자이너와 개발자가 협업하여 수 주에서 수 개월이 걸리고, 외주를 맡기면 수백만 원이 들었습니다. 이제는 "호텔 예약 페이지를 만들어줘"라고 입력하면 몇 분 안에 실제 작동하는 웹 페이지가 나옵니다. 수정도 "색상 바꿔줘" 한 마디면 됩니다.
먼저, 왜 비전공자가 웹 페이지나 앱 화면을 만들 수 있어야 하는지부터 이야기해 보겠습니다.
| 장벽 | 구체적 상황 |
|---|---|
| 코딩 지식 필요 | HTML·CSS·JavaScript 등 프로그래밍 언어를 배워야 함. 비전공자에게는 수개월의 학습 필요 |
| 디자이너+개발자 협업 필요 |
디자이너가 시안을 만들고, 개발자가 코드로 구현하는 2 단계. 소통 비용과 시간이 큼 |
| 시간과 비용 | 간단한 웹 페이지도 수 주 소요. 외주 의뢰 시 수백만 원의 비용 |
| 수정의 어려움 | 색상·레이아웃 하나 바꾸려면 코드를 다시 작성해야 함. 비전공자가 직접 수정 불가 |
| 장벽 | AI 디자인 도구로 해결 |
|---|---|
| 코딩 지식 | 한국어 프롬프트 한 문장이면 웹 페이지 생성. 코딩 지식 완전 불필요 |
| 디자이너+개발자 | AI 가 디자인과 코드를 동시에 생성. 한 사람이 프롬프트만으로 완성 |
| 시간과 비용 | 수 분 내 실제 작동하는 페이지 완성. 비용 거의 없음 (무료~저비용) |
| 수정의 어려움 | "색상 바꿔줘" "버튼 추가해줘" 자연어 수정 명령으로 즉시 반영 |
기존 웹 제작은 "건축가·시공사를 고용하여 건물을 짓는 것"이었습니다. 설계도면을 그리고, 자재를 사고, 기초공사부터 마감까지 수개월이 걸렸습니다.
AI 디자인 도구는 "건축주가 한마디 하면 건물이 올라가는 세상"입니다. "2 층짜리 카페를 만들어줘. 1 층은 주문 카운터, 2 층은 좌석. 따뜻한 나무 톤으로"라고 말하면, 몇 분 안에 실제로 들어갈 수 있는 건물이 완성됩니다.
Chapter 2 에서 AI 에게 "이미지를 그려달라"고 했듯, 이제는 "실제 작동하는 웹 페이지를 만들어달라"고 합니다. 이미지는 "보기만" 할 수 있었지만, 웹 페이지는 "클릭하고 사용할 수" 있습니다.
현재 대표적인 AI 웹/앱 디자인 도구는 네 가지입니다. Chapter 1~12 에서 매 장마다 도구를 비교한 것과 동일한 구조로 정리합니다.
Stitch 는 구글이 만든 앱 디자인 도구로, 손으로 그린 스케치나 텍스트 설명을 실제 앱 UI(사용자 인터페이스)로 변환합니다. 아이디어 단계에서 빠르게 시안을 만드는 데 최적입니다.
| 항목 | 내용 |
|---|---|
| 핵심 강점 | 손그림·텍스트 → 앱 UI 즉시 변환, 구글 Material Design 자동 적용 |
| 결과물 | 앱 UI 디자인 시안 (프로토타입) |
| 코드 생성 | 미지원 — 디자인 시안까지만 (실제 배포는 불가) |
| 난이도 | ● 매우 쉬움 — 종이에 그려서 사진 찍어 올리면 됨 |
Figma 는 업계 표준 디자인 도구로, AI 플러그인을 연결하면 프롬프트로 화면을 자동 생성할 수 있습니다. 팀원 여러 명이 동시에 같은 파일을 편집할 수 있는 "실시간 협업" 기능이 가장 큰 강점입니다.
| 항목 | 내용 |
|---|---|
| 핵심 강점 | 팀 실시간 협업, AI 자동 레이아웃, CSS 코드 추출 가능 |
| 결과물 | 디자인 파일 + CSS 코드 추출 (개발자에게 전달 가능) |
| 코드 생성 | CSS 추출 가능 — 완전한 웹 페이지 코드는 아님 |
| 난이도 | ● 보통 — 디자인 도구에 익숙하면 쉽고, 처음이면 학습 필요 |
v0 는 Vercel 이 만든 도구로, 프롬프트를 입력하면 실제로 클릭 가능한 웹 페이지를 즉시 생성합니다. 생성된 페이지는 실제 배포 가능한 코드(React/Next.js)로 만들어지며, 수정도 자연어로 합니다.
| 항목 | 내용 |
|---|---|
| 핵심 강점 | 프롬프트 → 실제 작동하는 웹 페이지 즉시 생성, 바로 배포 가능 |
| 결과물 | 실제 클릭 가능한 웹 페이지 + React/Next.js 코드 |
| 코드 생성 | 완전한 코드 자동 생성 ✓ — Vercel 을 통해 바로 배포 가능 |
| 난이도 | ● 쉬움 — 프롬프트만 입력하면 됨. 코드를 볼 필요 없음 |
v0 는 "말만 하면 건물이 올라가는 마법 프린터"와 같습니다. "호텔 예약 페이지를 만들어줘"라고 입력하면, 실제로 클릭해서 들어갈 수 있는 웹 페이지가 즉시 생성됩니다. 수정도 "색상을 파란색으로 바꿔줘"라고 말하면 즉시 반영됩니다.
Chapter 2 의 AI 이미지 생성이 "보는 것"이었다면, v0 는 "사용하는 것"을 만듭니다. 이것이 이 장의 가장 혁명적인 부분입니다.
Lovable 은 가장 강력한 도구입니다. 프롬프트 하나로 화면(프론트엔드) + 서버(백엔드) + 데이터베이스(DB)까지 한 번에 생성하여, 로그인·회원가입·데이터 저장 기능까지 갖춘 완성형 앱을 만들 수 있습니다.
| 항목 | 내용 |
|---|---|
| 핵심 강점 | 프롬프트 → 화면+서버+DB 까지 한 번에 생성, 원클릭 배포 |
| 결과물 | 완성형 웹 앱 (로그인·데이터 저장·관리자 페이지 포함 가능) |
| 코드 생성 | 풀스택 코드 자동 생성 ✓ — 원클릭으로 실제 URL 배포 |
| 난이도 | ● 보통 — 프롬프트는 쉽지만, 복잡한 기능은 추가 설정 필요 |
Lovable 은 "설계·시공·인테리어·관리까지 한 번에 해주는 올인원 건설사"와 같습니다. "할 일 관리 앱을 만들어줘"라고 하면, 회원가입 기능, 할 일 등록·수정·삭제, 데이터 저장까지 모두 갖춘 완성형 앱이 만들어지고, 실제 URL 로 누구나 접속할 수 있게 배포됩니다.
v0 가 "건물 외관"(웹 페이지)을 만든다면, Lovable 은 "건물 + 배관 + 전기 + 가구"(화면 + 서버 + DB + 기능)까지 한 번에 만듭니다.
| 구분 | Stitch | Figma | v0 (Vercel) | Lovable |
|---|---|---|---|---|
| 한 줄 요약 | 냅킨 스케치 → 설계도 |
공동 작업실 |
마법 프린터 |
올인원 건설사 |
| 핵심 강점 | 손그림→UI 아이디어 시안 |
팀 협업 CSS 추출 |
프롬프트 → 실제 웹 |
프롬프트 → 풀스택 앱 |
| 결과물 | 앱 UI 시안 | 디자인 파일 | 실제 웹 페이지 | 완성형 웹 앱 |
| 코드 생성 | X | CSS 추출 | React 코드 ✓ | 풀스택 코드 ✓ |
| 배포 가능 | X | X | ✓ (Vercel) | ✓ (원클릭) |
| 추천 용도 | 아이디어 시안 초기 탐색 |
팀 프로젝트 정교한 디자인 |
웹 페이지 제작 빠른 프로토타입 |
앱 서비스 구축 DB 포함 앱 |
Chapter 1~12 에서 매 장마다 프롬프트의 핵심 요소를 정리한 것처럼, 웹/앱 디자인에도 고유한 프롬프트 레시피가 있습니다.
| 요소 | 뜻 | 질문 | 예시 |
|---|---|---|---|
| ① 페이지 유형 (Type) |
어떤 종류의 페이지인가 |
무엇을 위한 페이지인가? |
"호텔 예약 페이지" "포트폴리오 사이트" "행사 안내 페이지" |
| ② 핵심 기능 (Features) |
어떤 기능이 포함되는가 |
사용자가 무엇을 할 수 있어야 하는가? |
"검색, 날짜 선택, 결제 버튼" "프로젝트 갤러리, 연락처 폼" "일정 타임라인, FAQ 아코디언" |
| ③ 레이아웃 (Layout) |
화면 구성· 배치 지정 |
어떤 영역이 어디에 위치하는가? |
"상단 메뉴바, 좌측 필터, 카드형 목록" "히어로 이미지, 3 열 그리드" |
| ④ 디자인 스타일 (Style) |
색상·분위기· 톤 지정 |
어떤 느낌의 디자인인가? |
"미니멀, 흰색 배경, 파란색 강조" "다크 모드, 모던" "따뜻한 색감, 축제 분위기" |
| ⑤ 반응형 (Responsive) |
PC·모바일 대응 여부 |
어떤 기기에서 사용되는가? |
"PC 와 모바일 모두 대응하는 반응형" "모바일 우선 디자인" "데스크톱 전용" |
웹/앱 디자인 프롬프트의 5 요소는 "건축 설계 의뢰서"와 같습니다.
다섯 가지를 다 알려줘야 건축가가 원하는 건물을 설계할 수 있듯, AI 에게도 마찬가지입니다.
| 구분 | 짧은 프롬프트 (❌) | 구조화된 프롬프트 (✓) |
|---|---|---|
| 입력 예시 | "예약 페이지 만들어줘" |
"호텔 예약 페이지를 만들어줘. 상단에 검색바(도시, 체크인/아웃 날짜, 인원수), 중앙에 호텔 카드형 목록 (사진, 이름, 가격, 평점), 하단에 페이지네이션. 미니멀 디자인, 흰색 배경, 파란색 강조, PC+모바일 반응형." |
| 결과 | AI 가 임의로 판단한 단순한 페이지. 기능·레이아웃이 기대와 다를 확률 높음. |
5 요소가 모두 지정되어 원하는 기능·배치·디자인의 웹 페이지를 한 번에 획득. |
| 키워드 계열 | 키워드 예시 | 적합한 페이지 |
|---|---|---|
| 레이아웃 | • "히어로 이미지" — 상단 대형 이미지 • "카드형 그리드" — 항목을 카드로 배열 • "사이드바 + 메인 콘텐츠" • "풀스크린 섹션" — 화면 가득 채우는 구역 |
모든 웹 페이지에 적용 가능 |
| UI 요소 | • "검색바" "날짜 선택기" "드롭다운" • "아코디언(접기/펼치기)" • "캐러셀(슬라이드)" • "모달(팝업창)" "탭 메뉴" |
기능이 필요한 페이지 |
| 디자인 스타일 | • "미니멀" "모던" "클래식" • "다크 모드" "라이트 모드" • "글래스모피즘(유리 효과)" • "뉴모피즘(부드러운 입체감)" |
분위기·톤 지정 |
| 색상 지정 | • "흰색 배경, 파란색 강조색" • "다크 네이비 배경, 금색 포인트" • "경희대 CI 색상 (#8B0029)" • "파스텔 톤" "모노크롬" |
브랜드 통일, 분위기 설정 |
| 반응형 | • "PC 와 모바일 모두 대응하는 반응형" • "모바일 우선 디자인" • "태블릿 최적화" • "데스크톱 전용" |
기기 대응 설정 |
Chapter 1~12 와 동일한 직원/학생 분리 구조입니다.
| 업무 상황 | 추천 도구 | 프롬프트 예시 |
|---|---|---|
| 학사 — 수강신청 안내 페이지 |
v0 | "수강신청 안내 웹 페이지를 만들어줘. 상단에 일정 안내, 중앙에 단계별 절차 (아코디언 형태), 하단에 FAQ. 경희대 CI 색상, 모바일 우선 반응형." |
| 행정 — 행사 안내 랜딩 페이지 |
v0 | "교직원 워크숍 안내 페이지를 만들어줘. 히어로 이미지, 일정 타임라인, 연사 프로필 카드, 참가 신청 버튼. 미니멀, 남색 계열, 반응형." |
| 인사 — 채용 공고 페이지 |
v0 또는 Lovable |
"경희대 직원 채용 안내 페이지를 만들어줘. 상단에 기관 소개, 중앙에 채용 직종별 카드 목록, 클릭하면 상세 정보. 하단에 지원 안내. 공식적 톤." |
| 기획 — 사업 소개 원페이저 |
v0 | "DX 추진 사업 소개 원페이지를 만들어줘. 풀스크린 섹션 5 개: 비전→현황→성과→ 계획→문의. 스크롤 애니메이션, 경희대 브랜드 컬러, 반응형." |
| 전공 분야 | 추천 도구 | 프롬프트 예시 |
|---|---|---|
| 경영/경제 — 창업 랜딩 페이지 |
v0 | "스타트업 서비스 소개 랜딩 페이지를 만들어줘. 히어로 섹션(제목+CTA 버튼), 기능 3 가지 카드, 가격 비교 표, 고객 후기, 연락처 폼. 모던 디자인, 반응형." |
| 호텔/관광 — 호텔 예약 페이지 |
v0 또는 Lovable |
"호텔 예약 페이지를 만들어줘. 상단에 검색바(도시, 체크인/아웃, 인원), 중앙에 호텔 카드형 목록(사진, 이름, 가격, 평점), 하단에 페이지네이션. 미니멀, 흰색 배경, 파란색 강조, 반응형." |
| 인문/사회 — 연구 프로젝트 소개 |
v0 | "사회학 연구 프로젝트 소개 페이지를 만들어줘. 프로젝트 개요, 연구팀 프로필, 연구 성과 타임라인, 관련 논문 리스트. 학술적이고 깔끔한 디자인, 반응형." |
| 미술/디자인 — 포트폴리오 사이트 |
Lovable | "개인 포트폴리오 사이트를 만들어줘. 섹션: 자기소개, 프로젝트 갤러리(카드형 그리드, 클릭하면 상세), 기술 스택, 연락처 폼. 다크 모드, 모던, 반응형." |
| 통계 — 데이터 대시보드 |
v0 | "데이터 분석 대시보드 페이지를 만들어줘. 상단에 핵심 지표 카드 4 개, 중앙에 차트 영역 2 개(막대+라인), 좌측에 필터 사이드바. 다크 테마, 반응형." |
Chapter 2~12 에서 배운 수정 전략이 웹/앱 디자인에도 동일하게 적용됩니다.
| 문제 상황 | 원인 | 해결 방법 |
|---|---|---|
| 레이아웃이 기대와 다르다 |
레이아웃(③)을 지정하지 않았음 |
"상단 메뉴바, 좌측 필터, 중앙 카드 목록" 처럼 영역별 배치를 구체적으로 명시 |
| 색상·분위기가 맞지 않는다 |
디자인 스타일(④)이 모호했음 |
"미니멀, 흰색 배경, 파란색(#3B82F6) 강조색" 처럼 구체적 색상 코드 지정 |
| 모바일에서 깨져 보인다 |
반응형(⑤)을 지정하지 않았음 |
"PC 와 모바일 모두 대응하는 반응형으로 만들어줘" 추가 |
| 기능이 빠져 있다 |
핵심 기능(②)을 나열하지 않았음 |
필요한 기능을 하나씩 나열. "검색바, 날짜 선택, 필터, 정렬, 페이지네이션 포함" |
| 전체적으로 단조롭다 |
UI 요소를 지정하지 않았음 |
"히어로 이미지, 캐러셀, 아코디언, 탭 메뉴" 등 UI 키워드 추가 |
| 텍스트 내용이 영어로 나온다 |
언어를 지정하지 않았음 |
"모든 텍스트를 한국어로" 또는 "한국어 더미 텍스트로" 추가 |
이제 직접 해볼 차례입니다. 이 챕터의 마지막 실습입니다.
사전 준비: v0.dev 또는 lovable.dev 에 접속하세요 (무료 체험 가능).
| 항목 | 내용 |
|---|---|
| 과제 | 호텔 예약 웹 페이지를 프롬프트만으로 만들어 보세요 |
| 프롬프트 예시 | "호텔 예약 페이지를 만들어줘. 상단에 검색바(도시, 체크인/아웃 날짜, 인원수), 중앙에 호텔 카드형 목록(사진, 이름, 가격, 평점), 하단에 페이지네이션. 미니멀 디자인, 흰색 배경, 파란색 강조, PC+모바일 반응형." |
| 포인트 | 실제 클릭 가능한 웹 페이지가 즉시 생성됩니다. "색상 바꿔줘" 등 자연어 수정을 시도해 보세요. |
| 시간 | 5 분 |
| 항목 | 내용 |
|---|---|
| 과제 | 개인 포트폴리오 사이트를 만들어 보세요 |
| 프롬프트 예시 | "개인 포트폴리오 사이트를 만들어줘. 섹션: 자기소개, 프로젝트 갤러리(카드형 그리드, 클릭하면 상세 페이지), 기술 스택, 연락처 폼. 다크 모드, 모던한 디자인, PC+모바일 반응형." |
| 포인트 | Lovable 은 실제 URL 로 배포까지 가능합니다. 생성 후 동료에게 URL 을 공유해 보세요. |
| 시간 | 5 분 |
| 항목 | 내용 |
|---|---|
| 과제 | 학교 행사(축제·세미나·공연) 안내 페이지를 만들어 보세요 |
| 프롬프트 예시 | "경희대 2026 가을축제 안내 페이지를 만들어줘. 히어로 이미지, 행사 일정 타임라인, 공연 라인업 카드, 오시는 길 지도 영역, FAQ 아코디언. 축제 분위기의 따뜻한 색감, 모바일 우선 디자인." |
| 포인트 | Stitch 로 손그림 시안을 먼저 만들고 v0 로 실제 페이지를 생성하는 2 단계도 시도해 보세요. |
| 시간 | 5 분 |
| 항목 | 설명 |
|---|---|
| 결과물은 "프로토타입"으로 활용 |
AI 가 만든 웹 페이지는 아이디어 검증·시안 확인에 최적입니다. 실제 서비스로 운영하려면 보안·성능·접근성 등 추가 점검이 필요합니다. |
| 실서비스 배포 전 전문가 점검 권장 |
v0·Lovable 로 만든 페이지를 실제 서비스로 공개할 경우, 보안 취약점·개인정보 처리·서버 안정성 등을 IT 담당자의 점검을 받으세요. |
| 반응형 테스트 필수 | PC 에서 잘 보이던 페이지가 모바일에서 깨질 수 있습니다. 반드시 PC·모바일·태블릿 환경에서 모두 확인하세요. |
| 접근성 확인 | 시각장애인 등 다양한 사용자를 고려한 웹 접근성(WCAG) 기준을 확인하세요. 특히 공공기관·대학 웹 페이지는 접근성 의무 대상입니다. |
| 브랜드 가이드라인 준수 |
학교·부서의 공식 웹 페이지는 CI 색상, 로고 위치, 폰트 규정 등 브랜드 가이드라인이 있을 수 있습니다. AI 생성 후 가이드라인에 맞게 조정하세요. |
| 외부 서비스 연동 시 보안 확인 |
로그인·결제 등 외부 서비스를 연동하는 경우, 데이터 전송 구간의 보안(HTTPS 등)을 확인하세요. 학교 정보보안 정책 준수가 필요합니다. |
이 절은 이 챕터의 마지막 절입니다. 다시 한번 Chapter 1 에서 시작한 여정을 정리합니다.
| 단계 | Chapter | 핵심 주제 |
|---|---|---|
| 1 단계 생성형 AI 입문 |
Ch.1~6 | AI 에게 콘텐츠를 만들게 하고, 심층 분석을 시키고, 나만의 AI 비서를 만드는 법 |
| 2 단계 생성형 AI 활용 |
Ch.7~10 | 문서·웹 서비스·내 컴퓨터까지 AI 활용 범위를 확장하고, 지침 파일로 반복 자동화 |
| 3 단계 생성형 AI 심화 |
Ch.11~13 | 여러 서비스를 연결한 업무 자동화, 그리고 우리 조직만의 AI 챗봇 서비스를 만들고, 실제 웹/앱 서비스를 직접 구축 |
열세 장을 관통하는 세 가지 핵심 원칙:
첫째, "AI 에게 구체적으로 지시할수록, 원하는 결과에 가까워진다." Chapter 1 의 텍스트 프롬프트에서 Chapter 13 의 웹 디자인 프롬프트까지, 이 원칙은 한 번도 변하지 않았습니다.
둘째, "반복을 없앤다." 프롬프트의 반복(Ch.6), 파일 명령의 반복(Ch.10), 업무 흐름의 반복(Ch.11), 상담 업무의 반복(Ch.12), 웹 개발 과정의 반복(Ch.13) — 매 단계마다 AI 가 반복적이고 기계적인 일에서 사람을 해방했습니다.
셋째, "작게 시작하여 점진적으로 확장한다." 프롬프트 한 줄(Ch.1)에서 시작하여 블록 2 개(Ch.11), 문서 1 건(Ch.12), 한 섹션(Ch.13)으로 시작합니다. 완벽을 기다리지 말고, 지금 바로 시작하세요.
Chapter 1 에서 AI 에게 처음 말을 걸었던 그 순간, 여러분은 "AI 가 만들어준 결과물을 받는 사람"이었습니다. Chapter 13 에 이르러, 여러분은 "AI 와 함께 실제 서비스를 만드는 사람"이 되었습니다. 프로그래밍을 한 줄도 배우지 않았지만, 웹 페이지를, 앱을, 챗봇을, 자동화 워크플로우를 직접 만들 수 있게 되었습니다.
이 책은 끝나지만, 여러분의 여정은 계속됩니다. 오늘 배운 도구로, 내일의 업무를, 내일의 서비스를, 내일의 가능성을 만들어 가시기 바랍니다.