CHAPTER 13 (PRACTICE)

모바일 앱과 웹 디자인 하기

✦ ✦ ✦
— 프롬프트 한 문장이면, 실제 클릭 가능한 웹 페이지가 만들어집니다 —
활용 도구: Stitch · Figma · v0(Vercel) · Lovable
강의 실습 개요
실습 도구 v0 (Vercel), Lovable, Stitch, Figma
실습 목표 교안의 프롬프트 5요소(유형, 기능, 레이아웃, 스타일, 반응형)를 활용하여, 개발자나 디자이너 없이 내 업무와 전공에 필요한 웹페이지/앱 화면을 텍스트만으로 직접 생성해보기
💡 핵심 포인트
웹사이트나 앱을 만들려면 몇 달 동안 코딩을 배워야 한다고 생각하실 수 있습니다. 하지만 이 수업에서는 전혀 다른 방식으로 접근합니다. 다음 5가지만 한국어로 정리해보세요: 유형, 기능, 레이아웃, 스타일, 반응형.

이걸 그대로 도구에 붙여넣으면, 단 10초 만에 코드가 만들어지고, 실제로 클릭되는 웹사이트가 바로 생성됩니다. 즉, 이제는 전공이 아니어도, 디자이너여도, 아이디어만 있으면 누구나 직접 웹서비스를 만들 수 있습니다.

실습이 끝난 뒤에는 내가 만든 웹사이트의 URL을 서로 공유해보세요. 다른 분들이 만든 결과를 보면, "와, 나도 이런 걸 만들 수 있네?"라는 느낌이 훨씬 더 확실해질 겁니다.
• • •

제 1 부. 대학 직원을 위한 맞춤 실습 10선

(대상: 학사/교무/재정/행정/인사/홍보 등 대학 행정 업무 담당자)
교직원분들은 매번 외주 업체나 교내 전산팀에 의뢰하기 부담스러웠던 간단한 '행사 안내 페이지', '신청 폼', '가이드 웹사이트' 등을 AI를 통해 단 몇 분 만에 직접 제작하고 배포할 수 있습니다.

실습 01 [학사/교무] 신입생 수강신청 가이드 웹페이지 제작
상황: 매년 PDF로만 배포하던 수강신청 매뉴얼을, 모바일에서 보기 편한 웹페이지로 만들고 싶을 때.

추천 도구: v0 (즉시 웹 페이지 생성 및 배포)
▸ 프롬프트 예시:
"[페이지 유형] 신입생 수강신청 완벽 가이드 웹페이지
[핵심 기능] 단계별 신청 가이드 아코디언 메뉴, 필수 교양 과목 검색창, 학사팀 FAQ
[레이아웃] 상단 내비게이션 바, 좌측 목차, 우측 본문 설명
[디자인 스타일] 신입생에게 어울리는 밝고 경쾌한 톤, 대학 공식 색상(남색) 강조
[반응형] 스마트폰에서 글씨가 잘 보이는 모바일 최적화 반응형"
실습 02 [인사/총무] 교직원 하계 연수 신청 랜딩 페이지
상황: 구글 폼 링크만 띡 보내는 대신, 그럴싸한 연수 안내 및 신청 페이지를 만들고 싶을 때.

추천 도구: Lovable (풀스택 앱 - 입력 폼 기능 강점)
▸ 프롬프트 예시:
"[페이지 유형] 교직원 하계 워크숍 안내 및 참가 신청 페이지
[핵심 기능] 2박 3일 세부 일정 타임라인, 강사진 프로필 카드, 이름/부서/숙소 타입 선택이 가능한 신청 폼
[레이아웃] 최상단 휴양지 풍경의 히어로 이미지, 중앙 1단 구성, 하단 폼 배치
[디자인 스타일] 차분하고 고급스러운 휴양지 리조트 느낌, 여백이 많은 미니멀 스타일
[반응형] PC와 태블릿, 모바일 모두 대응하는 반응형"
실습 03 [시설/안전] 교내 시설물 고장 신고 모바일 웹 시안
상황: 학생들이 캠퍼스 내 고장 난 시설을 쉽게 신고할 수 있는 전용 앱 아이디어를 구체화할 때.

추천 도구: Stitch (손그림/텍스트로 모바일 앱 UI 빠른 생성)
▸ 프롬프트 예시:
"[페이지 유형] 시설물 고장 신고 모바일 앱 메인 화면
[핵심 기능] 현재 위치(건물명) 자동 인식 버튼, 현장 사진 업로드 버튼, 고장 유형 선택 드롭다운
[레이아웃] 상단에 큰 지도, 중앙에 사진 업로드 박스, 하단에 둥근 '신고하기' 플로팅 버튼
[디자인 스타일] 구글 머티리얼 디자인 기반, 직관적이고 신뢰감을 주는 파란색 톤
[반응형] 모바일 앱 전용 세로 화면"
실습 04 [홍보/대외] 대학 공식 축제(대동제) 라인업 안내 페이지
상황: 총학생회와 협업하여 축제 일정과 연예인 라인업을 화려하게 보여주는 페이지가 필요할 때.

추천 도구: v0 (React 기반 화려한 UI 생성)
▸ 프롬프트 예시:
"[페이지 유형] 2026학년도 대학 가을 대동제 축제 안내 웹사이트
[핵심 기능] 일자별 초청 가수 라인업 카드(클릭 시 유튜브 링크 이동), 축제 맵(Map) 이미지, 푸드트럭 메뉴판
[레이아웃] 상단에 화려한 타이틀 애니메이션, 가로로 스크롤 되는 연예인 카드 슬라이드
[디자인 스타일] 네온사인 그래픽이 돋보이는 다크 모드, 축제의 열기가 느껴지는 화려한 색감
[반응형] 모바일 접속자를 위한 모바일 우선(Mobile-First) 디자인"
실습 05 [예산/재정] 부서별 예산 집행 현황 대시보드 화면
상황: 복잡한 엑셀 데이터 대신, 한눈에 들어오는 예산 현황 모니터링 화면(대시보드)을 기획할 때.

추천 도구: Figma (AI 자동 레이아웃 활용)
▸ 프롬프트 예시:
"[페이지 유형] 대학 재무처 내부 예산 모니터링 대시보드
[핵심 기능] 부서별 예산 소진율 도넛 차트, 연간 지출 추이 꺾은선 그래프, 최근 결제 내역 테이블
[레이아웃] 좌측 사이드바 메뉴, 상단 요약 카드 4개, 하단 그래프와 표 2단 분할
[디자인 스타일] 공공기관에 적합한 보수적이고 깔끔한 화이트/그레이 톤, 가독성 높은 차트
[반응형] PC 데스크톱 전용 넓은 화면"
실습 06 [학생/장학] 장학금 모아보기 및 조건 검색 사이트
상황: 수십 개의 장학금을 조건별로 필터링해서 볼 수 있는 검색 페이지를 만들고 싶을 때.

추천 도구: Lovable (데이터베이스 및 검색 기능 연동)
▸ 프롬프트 예시:
"[페이지 유형] 재학생 맞춤형 장학금 검색 웹 애플리케이션
[핵심 기능] 소득분위/성적/전공별 필터링 체크박스, 조건에 맞는 장학금 리스트 카드, 스크랩(찜하기) 버튼
[레이아웃] 좌측 좁은 검색 필터 영역, 우측 넓은 장학금 카드 그리드 배열
[디자인 스타일] 친근하고 따뜻한 파스텔 톤, 둥근 모서리를 가진 귀여운 UI
[반응형] PC 및 모바일 반응형"
실습 07 [국제/교류] 외국인 교환학생 웰컴 북(Welcome Book) 웹페이지
상황: 한국에 처음 오는 교환학생들을 위한 다국어 지원 가이드북 사이트를 배포할 때.

추천 도구: v0 (다양한 컴포넌트 조합)
▸ 프롬프트 예시:
"[페이지 유형] 외국인 교환학생 전용 웰컴 가이드 웹페이지
[핵심 기능] 상단 언어 선택(ENG/CHN) 토글 버튼, 캠퍼스 주변 맛집 지도, 기숙사 입사 안내 슬라이더
[레이아웃] 히어로 이미지 아래 3개의 주요 카테고리(학업/생활/비자) 아이콘 버튼 배치
[디자인 스타일] 글로벌하고 세련된 매거진 스타일, 고해상도 캠퍼스 사진 활용
[반응형] 외국 스마트폰 환경에 맞춘 모바일 최적화"
실습 08 [기획/평가] 총장과 함께하는 타운홀 미팅 신청 페이지
상황: 교직원과 학생들의 의견을 수렴하는 타운홀 미팅 참여자를 모집하고 사전 질문을 받을 때.

추천 도구: Lovable (질문 등록 및 데이터 수집 폼)
▸ 프롬프트 예시:
"[페이지 유형] 총장 간담회(타운홀 미팅) 사전 등록 및 질문 접수 페이지
[핵심 기능] 행사 개요 설명, 익명 질문 등록 텍스트 박스, 참석 여부(On/Offline) 선택 라디오 버튼
[레이아웃] 화면 중앙에 팝업 형태처럼 깔끔하게 떠 있는 단일 카드(Single Card) 레이아웃
[디자인 스타일] 진중하고 포멀한 디자인, 신뢰감을 주는 타이포그래피 강조
[반응형] 태블릿 및 모바일 반응형"
실습 09 [도서관/학술] 도서관 좌석 및 스터디룸 예약 모바일 앱 시안
상황: 노후화된 도서관 예약 앱을 리뉴얼하기 위해, 타 부서나 개발팀에 보여줄 프로토타입을 그릴 때.

추천 도구: Stitch (종이에 그린 아이디어를 앱으로)
▸ 프롬프트 예시:
"(종이에 네모난 좌석 배치도와 예약 버튼을 그려서 업로드 후)
[페이지 유형] 대학 도서관 모바일 좌석 예약 앱 화면
[핵심 기능] 실시간 잔여 좌석 수 표시, 층별 도면도 확인, 시간 선택 후 '예약하기' 버튼
[레이아웃] 업로드한 손그림 이미지의 구성을 그대로 따를 것
[디자인 스타일] 학생들의 눈 피로를 덜어주는 다크 모드, 예약 가능(초록)/불가(회색) 직관적 색상
[반응형] 모바일 앱 전용"
실습 10 [입학/홍보] 고교생 대상 캠퍼스 투어 예약 웹사이트
상황: 고등학생들이 달력을 보고 직접 캠퍼스 투어 날짜를 선택해 예약하는 사이트를 만들고 싶을 때.

추천 도구: Lovable (캘린더 연동 및 예약 기능)
▸ 프롬프트 예시:
"[페이지 유형] 예비 신입생 대상 캠퍼스 투어 예약 플랫폼
[핵심 기능] 예약 가능한 날짜를 보여주는 달력(Calendar) 위젯, 투어 코스 소개 갤러리, 학교 홍보대사 프로필
[레이아웃] 상단에 학교 투어 영상 배경, 중앙에 인터랙티브 캘린더 배치
[디자인 스타일] 고등학생의 텐션에 맞는 밝고 미래지향적인 디자인, 그라데이션 컬러 버튼
[반응형] 모바일과 PC 모두 완벽히 작동하는 반응형"
• • •

제 2 부. 학부생을 위한 맞춤 실습 10선

(대상: 인문/사회/경영/경제/통계/호텔/미술 등 비전공 학부생)
코딩을 전혀 모르는 문과/예체능 학생들도 이제 조별 과제 결과물, 창업 아이디어 검증, 개인 포트폴리오를 PPT가 아닌 '실제 작동하는 웹/앱' 형태로 제출하여 압도적인 차별성을 보여줄 수 있습니다.

실습 11 [경영/경제] 창업 아이디어(MVP) 검증용 랜딩 페이지
상황: 창업 동아리에서 기획한 '1인 가구 반찬 구독 서비스'의 시장 반응을 확인하기 위해 가짜 웹을 만들 때.

추천 도구: Lovable (사전 예약자 DB 수집)
▸ 프롬프트 예시:
"[페이지 유형] 1인 가구 프리미엄 반찬 구독 서비스 출시 전 사전 예약 랜딩 페이지
[핵심 기능] 서비스 가치 제안(USP) 문구, 주간 식단표 미리보기, '출시 알림 받기' 이메일 입력 폼
[레이아웃] 시선을 사로잡는 큰 타이틀 텍스트, 하단으로 스크롤 시 3가지 핵심 장점 아이콘 배치
[디자인 스타일] 신선하고 식욕을 돋우는 오렌지/그린 톤, 스타트업 느낌의 트렌디한 디자인
[반응형] 인스타그램 광고 접속자를 위한 모바일 우선 반응형"
실습 12 [미술/디자인] 인터랙티브 3D 개인 작품 포트폴리오
상황: 미대생 졸업 전시회를 앞두고, 내 작품의 톤앤매너를 살린 나만의 웹 갤러리를 구축할 때.

추천 도구: v0 (미니멀하고 감각적인 UI 구현)
▸ 프롬프트 예시:
"[페이지 유형] 시각디자인 전공생의 개인 포트폴리오 웹사이트
[핵심 기능] 마우스 오버 시 작품 이미지가 확대되는 효과, 무한 스크롤 갤러리, 하단 컨택트(이메일) 버튼
[레이아웃] 메뉴바 없이 화면 전체를 캔버스처럼 사용하는 전체화면(Full-screen) 핀터레스트형 그리드
[디자인 스타일] 작품에만 집중할 수 있는 극도의 미니멀리즘, 완전한 검은색 배경에 흰색 폰트
[반응형] PC와 태블릿 중심의 해상도 최적화 반응형"
실습 13 [호텔/관광] 럭셔리 부티크 호텔 프로모션 웹페이지
상황: 호텔경영학 전공 '호텔 마케팅' 조별 과제로 가상의 신규 호텔 예약 사이트를 발표해야 할 때.

추천 도구: v0 (고급스러운 레이아웃 즉시 생성)
▸ 프롬프트 예시:
"[페이지 유형] 강릉 해변에 새로 오픈하는 럭셔리 부티크 호텔의 공식 프로모션 페이지
[핵심 기능] 날짜/인원 선택 드롭다운 박스, 오션뷰 객실 360도 파노라마 슬라이드, 스파 패키지 예약 버튼
[레이아웃] 상단 투명 네비게이션, 스크롤을 내리면 텍스트가 페이드인(Fade-in) 되는 고급스러운 여백 배치
[디자인 스타일] 5성급 호텔 특유의 세련된 분위기, 세리프(명조체) 폰트와 골드/베이지 톤 사용
[반응형] PC 및 모바일 반응형"
실습 14 [사회/미디어] 교내 여론조사 및 통계 시각화 대시보드
상황: 사회조사방법론 과제로 학우 500명에게 설문조사한 결과를 멋진 그래프 대시보드로 보여줄 때.

추천 도구: Lovable (데이터 시각화 및 컴포넌트 강점)
▸ 프롬프트 예시:
"[페이지 유형] 대학생 미디어 소비 행태 설문조사 결과 시각화 웹페이지
[핵심 기능] 연령대별 숏폼 시청 시간 막대 차트, 선호하는 플랫폼 파이 차트, 데이터 요약 인사이트 박스
[레이아웃] 상단에 가장 중요한 핵심 통계 숫자 3개 크게 배치, 하단에 차트들 2x2 그리드로 배열
[디자인 스타일] 뉴스레터나 언론사 데이터 기사처럼 신뢰감 있고 명확한 색상(블루/민트)
[반응형] PC와 태블릿 반응형"
실습 15 [인문/문학] 독립 출판물 및 웹소설 연재용 웹진(Webzine)
상황: 내가 쓴 단편 소설이나 시를 인스타그램이 아닌 나만의 독립된 감성 웹페이지에 연재하고 싶을 때.

추천 도구: v0 (텍스트 중심의 우아한 UI 생성)
▸ 프롬프트 예시:
"[페이지 유형] 개인 에세이 및 단편 소설을 연재하는 감성 웹진 사이트
[핵심 기능] 글 목록 리스트, 독서 모드(배경색 토글), 목차 바로가기, 댓글 남기기
[레이아웃] 좌우 여백을 넓게 주어 책을 읽는 듯한 세로 1단 레이아웃
[디자인 스타일] 따뜻한 종이 질감의 베이지색 배경, 읽기 편한 바탕체(명조체) 폰트, 서정적인 분위기
[반응형] 침대에 누워 스마트폰으로 읽기 좋은 모바일 최적화"
실습 16 [총학생회/동아리] 가을 축제 주점 메뉴판 및 모바일 주문 웹
상황: 축제 때 종이 메뉴판 대신, 테이블에 있는 QR 코드를 찍으면 메뉴를 보고 주문할 수 있는 앱을 만들 때.

추천 도구: Stitch (또는 v0 - 모바일 앱 UI 빠른 생성)
▸ 프롬프트 예시:
"[페이지 유형] 대학 축제 경영학과 주점 스마트 모바일 주문 앱 화면
[핵심 기능] 안주/주류 탭 메뉴, 메뉴별 사진 및 가격, 수량 선택(+/-) 후 장바구니 담기, 총 결제 금액 확인
[레이아웃] 배달의민족 앱처럼 상단 카테고리 탭, 중앙에 세로형 메뉴 리스트, 하단에 결제 바 고정
[디자인 스타일] 술자리 분위기에 맞는 약간 어두운 배경, 식욕을 돋우는 강조색 사용
[반응형] 스마트폰 전용 세로 화면"
실습 17 [어학/외국어] 어학 교환(Language Exchange) 매칭 플랫폼
상황: 한국인 학생과 외국인 교환학생을 1:1로 언어 교환 매칭해주는 앱 서비스의 프로토타입을 만들 때.

추천 도구: Lovable (풀스택 사용자 매칭 기능 구현)
▸ 프롬프트 예시:
"[페이지 유형] 대학 내 내외국인 언어 교환 매칭 웹 애플리케이션
[핵심 기능] 자신의 모국어와 배우고 싶은 언어 선택, 조건에 맞는 파트너 프로필 카드 스와이프, 채팅하기 버튼
[레이아웃] 틴더(Tinder)처럼 화면 중앙에 상대방 프로필 카드가 크게 보이고 하단에 O/X 버튼 배치
[디자인 스타일] 친근하고 글로벌한 느낌을 주는 다채로운 원색 사용, 둥근 모서리 UI
[반응형] 모바일 앱 최적화 반응형"
실습 18 [공통/취업] 취업 포트폴리오 노션(Notion) 대체 개인 웹페이지
상황: 남들 다 쓰는 노션 이력서 대신, 나만의 도메인과 디자인을 가진 '개발자/기획자/마케터' 이력서 웹사이트를 만들 때.

추천 도구: v0 (이력서 및 포트폴리오 즉시 배포)
▸ 프롬프트 예시:
"[페이지 유형] 마케팅 직무 취업 준비생의 개인 이력서(Resume) 및 포트폴리오 웹사이트
[핵심 기능] 한 줄 자기소개, 경력 타임라인, 다룰 수 있는 툴(Tool) 스킬 바, 진행한 프로젝트 썸네일 링크
[레이아웃] 상단에 큰 프로필 사진과 인삿말, 스크롤을 내리면 경력-스킬-프로젝트가 순서대로 나옴
[디자인 스타일] IT 스타트업 채용 담당자가 좋아할 만한 모던하고 프로페셔널한 디자인, 네이비/화이트 톤
[반응형] PC와 모바일 모두 대응하는 반응형"
실습 19 [통계/컴공 공통] 공공데이터를 활용한 혼잡도 안내 대시보드
상황: 교내 식당이나 열람실의 실시간 혼잡도를 보여주는 웹서비스 과제를 제출해야 할 때.

추천 도구: Lovable (데이터 연동 및 시각화 특화)
▸ 프롬프트 예시:
"[페이지 유형] 교내 학생식당 및 도서관 실시간 혼잡도 안내 모바일 웹페이지
[핵심 기능] 식당별 혼잡도(여유/보통/혼잡) 신호등 아이콘, 오늘 학식 메뉴판 미리보기, 도서관 잔여 좌석 프로그레스 바
[레이아웃] 상단에 탭(식당/도서관)으로 화면 전환, 중앙에 카드 형태로 장소별 현황 리스트업
[디자인 스타일] 빠르고 직관적으로 정보를 얻을 수 있는 깔끔한 대시보드 스타일
[반응형] 스마트폰 전용 모바일 웹"
실습 20 [팀 프로젝트] 팀플 결과물 영구 소장용 아카이브 웹사이트
상황: 한 학기 동안 조별 과제로 열심히 만든 PPT, 영상, 기획서를 그냥 지우기 아까워 웹에 전시하고 싶을 때.

추천 도구: v0 (복제 및 수정 용이)
▸ 프롬프트 예시:
"[페이지 유형] 한 학기 전공 팀 프로젝트 결과물 전시 아카이브 웹페이지
[핵심 기능] 프로젝트 요약 설명, 조원 프로필(역할 분담), 결과물 PDF 다운로드 버튼, 유튜브 발표 영상 임베드
[레이아웃] 중앙 정렬된 블로그 형태, 콘텐츠가 위에서 아래로 물 흐르듯 전개되는 구조
[디자인 스타일] 학술적이고 진지하면서도 세련된 흑백(Monotone) 디자인
[반응형] PC와 모바일 모두 완벽 지원"