박람회 준비를 위한 첫 랜딩페이지 제작 경험
소개
이번 프로젝트는 처음 배운 내용을 바로 실전에서 활용해보고 싶다는 마음에서 시작되었습니다. 정부지원금을 받아 박람회에 참여하게 되면서, 방문자에게 정보를 안내해줄 랜딩페이지가 필수였고, 이를 직접 만들어보고 싶다는 욕구도 강했습니다.
랜딩페이지는 박람회 부스에서 사람들에게 기업 정보, 서비스 설명, 문의 링크를 빠르게 제공하기 위한 핵심 도구입니다. 처음에는 막막했지만, 배운 내용을 토대로 실제 페이지를 만들어보면서 ‘바로 적용해보는 경험’의 중요성을 크게 느꼈습니다.
또한, 박람회 하루 전날 급히 페이지가 필요해지면서 짧은 시간 안에 AI 도구를 활용해 최대한 빠르고 정확하게 결과물을 만들어내는 상황을 온몸으로 겪었습니다. 이 과정이 이번 경험을 더욱 특별하게 만들어주었어요. 정부지원금을 받고 박람회에 참여하게 되면서, 방문자에게 정보를 전달할 랜딩페이지와 간단한 홈페이지가 필요해졌습니다. 첫 번째 강의 시간에 배운 내용을 바로 적용해보고 싶어 시도하게 되었고, 구글 제미나이와 구글 페이지를 활용해 작업을 진행했습니다.
진행 방법
랜딩페이지 제작 과정은 단순히 페이지를 만드는 것이 아니라, 구성 기획 → 콘텐츠 생성 → 페이지 디자인 → 게시 테 스트 순서로 진행되었습니다. 특히 Google Gemini와 Google Sites의 조합은 빠른 제작에 큰 도움이 되었습니다.
1. 사용한 도구
구글 제미나이(Gemini): 문구 작성, 콘텐츠 구조 설계, 아이디어 생성
구글 페이지(Google Sites): 실제 랜딩페이지 제작 및 시각적 구성
2. 활용 방식 상세 설명
Gemini로 랜딩페이지에 들어갈 헤드라인, 소개 문구, 버튼 문구, 서비스 설명 등을 빠르게 생성했습니다.
“박람회 방문객이 5초 안에 핵심을 알 수 있는 문구”라는 목표로 여러 버전을 생성해 비교했습니다.
Google Sites에서는 Gemini에서 만든 문구를 기반으로 섹션(헤더, 소개, 혜택 안내, 문의 섹션)을 구성했습니다.
직관적이지만 기능이 은근히 많아, 이미지 배치·레이아웃 선택·버튼 링크 등을 직접 만져보며 익혔습니다.
특히 급박했던 부분은 "내일 박람회인데 페이지가 없어요!"라는 현실적 상황이었고, 이때 Gemini가 콘텐츠 생성 시간을 엄청나게 단축해주었습니다.
3. 사용한 프롬프트 전문
사본
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025 희망리턴 소상공인 리스타트 페어</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Noto Sans KR', 'sans-serif'],
},
colors: {
brand: {
dark: '#1e3a8a', /* Navy form Logo text */
primary: '#3b82f6', /* Sky Blue from Logo graphic */
secondary: '#f97316', /* Orange from A Zone */
accent: '#10b981', /* Green from C Zone */
light: '#f0f9ff'
}
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'slide-up': 'slideUp 0.8s ease-out forwards',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-15px)' },
},
slideUp: {
'0%': { transform: 'translateY(50px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
}
}
}
}
}
</script>
<style>
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1e3a8a;
}
::-webkit-scrollbar-thumb {
background: #3b82f6;
border-radius: 4px;
}
.glass-panel {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}
.glass-dark {
background: rgba(30, 58, 138, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(to right, #2563eb, #0ea5e9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-bg {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
position: relative;
overflow: hidden;
}
.hero-shape {
position: absolute;
background: linear-gradient(45deg, #3b82f6, #60a5fa);
opacity: 0.1;
border-radius: 50%;
}
</style>
</head>
<body class="text-slate-800 font-sans overflow-x-hidden bg-slate-50">
<!-- Navbar -->
<nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md border-b border-slate-200 shadow-sm">
<div class="container mx-auto px-6 py-3 flex justify-between items-center">
<a href="#" class="flex items-center gap-2">
<!-- Logo Placeholder -->
<div class="w-8 h-8 bg-brand-primary rounded-lg flex items-center justify-center text-white font-black transform rotate-3">H</div>
<span class="text-xl font-bold text-brand-dark tracking-tight">희망리턴 <span class="text-brand-primary">패키지</span></span>
</a>
<div class="hidden md:flex space-x-8 font-medium text-sm">
<a href="#overview" class="text-slate-600 hover:text-brand-primary transition">행사 개요</a>
<a href="#programs" class="text-slate-600 hover:text-brand-primary transition">주요 프로그램</a>
<a href="#zones" class="text-slate-600 hover:text-brand-primary transition">부스 안내</a>
<a href="#schedule" class="text-slate-600 hover:text-brand-primary transition">일정표</a>
</div>
<a href="#register" class="bg-brand-dark text-white px-5 py-2 rounded-full text-sm font-bold hover:bg-blue-800 transition shadow-lg shadow-blue-900/20">
참관 신청
</a>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-bg pt-32 pb-20 min-h-screen flex items-center relative">
<!-- Decorative Shapes -->
<div class="hero-shape w-96 h-96 -top-20 -left-20 animate-pulse-slow"></div>
<div class="hero-shape w-[500px] h-[500px] bottom-0 right-0 bg-orange-400/10 animate-float"></div>
<div class="container mx-auto px-6 relative z-10">
<div class="flex flex-col lg:flex-row items-center gap-16">
<div class="lg:w-1/2 animate-slide-up">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-blue-100 shadow-sm mb-6">
<span class="w-2 h-2 rounded-full bg-brand-secondary animate-pulse"></span>
<span class="text-sm font-bold text-brand-dark">2025. 11. 20(목) ~ 11. 21(금)</span>
</div>
<h1 class="text-5xl lg:text-6xl font-black leading-tight mb-2 text-brand-dark">
희망리턴<br>소상공인
</h1>
<h1 class="text-5xl lg:text-6xl font-black leading-tight mb-6 gradient-text">
리스타트 페어
</h1>
<p class="text-xl text-slate-600 mb-8 leading-relaxed font-medium">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded font-bold text-base align-middle mr-2">TURN AROUND</span>
소상공인의 새로운 도약을 응원합니다.<br>
성공적인 재기, 그 희망의 시작을 함께하세요.
</p>
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-4 bg-white p-4 rounded-xl shadow-md border border-slate-100 min-w-[200px]">
<div class="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-brand-primary">
<i class="fa-solid fa-map-location-dot text-xl"></i>
</div>
<div>
<p class="text-xs text-slate-500 font-bold">장소</p>
<p class="text-sm font-bold text-slate-800">성남 코리아디자인센터<br>B1F 전시장</p>
</div>
</div>
<div class="flex items-center gap-4 bg-white p-4 rounded-xl shadow-md border border-slate-100 min-w-[200px]">
<div class="w-10 h-10 bg-orange-50 rounded-full flex items-center justify-center text-brand-secondary">
<i class="fa-regular fa-clock text-xl"></i>
</div>
<div>
<p class="text-xs text-slate-500 font-bold">관람 시간</p>
<p class="text-sm font-bold text-slate-800">10:00 ~ 17:00</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2 relative">
<!-- Visual Graphic Area -->
<div class="relative animate-float">
<!-- Main Infographic Card -->
<div class="glass-panel rounded-3xl p-8 relative z-20">
<div class="flex justify-between items-center mb-8">
<h3 class="text-2xl font-bold text-brand-dark">전시 규모 및 구성</h3>
<span class="px-3 py-1 bg-brand-primary/10 text-brand-primary rounded-full text-xs font-bold">총 70여개 업체</span>
</div>
<div class="grid grid-cols-2 gap-6 mb-8">
<div class="bg-slate-50 rounded-2xl p-5 text-center hover:bg-blue-50 transition duration-300">
<div class="text-4xl font-black text-brand-secondary mb-1">23+</div>
<div class="text-sm font-medium text-slate-600">A ZONE<br>식음료/반려동물</div>
</div>
<div class="bg-slate-50 rounded-2xl p-5 text-center hover:bg-blue-50 transition duration-300">
<div class="text-4xl font-black text-brand-primary mb-1">29+</div>
<div class="text-sm font-medium text-slate-600">B ZONE<br>생활/공예/뷰티</div>
</div>
<div class="bg-slate-50 rounded-2xl p-5 text-center hover:bg-blue-50 transition duration-300">
<div class="text-4xl font-black text-brand-accent mb-1">18+</div>
<div class="text-sm font-medium text-slate-600">C ZONE<br>창업/기술/홍보</div>
</div>
<div class="bg-slate-50 rounded-2xl p-5 text-center flex flex-col justify-center items-center hover:bg-blue-50 transition duration-300">
<i class="fa-solid fa-calendar-check text-3xl text-slate-400 mb-2"></i>
<div class="text-sm font-medium text-slate-600">사전등록 접수중</div>
</div>
</div>
<div class="h-48 w-full">
<canvas id="zoneChart"></canvas>
</div>
</div>
<!-- Floating Elements -->
<div class="absolute -right-6 -top-6 bg-white p-4 rounded-2xl shadow-xl animate-bounce z-30" style="animation-duration: 3s;">
<div class="flex items-center gap-3">
<div class="bg-yellow-100 p-2 rounded-full text-yellow-600">
<i class="fa-solid fa-star"></i>
</div>
<div>
<p class="text-xs font-bold text-slate-500">스페셜 이벤트</p>
<p class="font-bold text-slate-800">명사 초청 강연</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Programs Section -->
<section id="programs" class="py-24 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<span class="text-brand-primary font-bold tracking-wider text-sm uppercase">Experience</span>
<h2 class="text-3xl md:text-4xl font-black text-slate-800 mt-2 mb-4">부대 프로그램</h2>
<p class="text-slate-500 max-w-2xl mx-auto">관람객과 예비 창업자를 위한 특별한 힐링과 체험의 시간</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="group bg-white rounded-3xl p-1 border border-slate-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 overflow-hidden">
<div class="bg-gradient-to-br from-purple-500 to-indigo-600 h-48 rounded-t-[20px] relative flex items-center justify-center overflow-hidden">
<i class="fa-solid fa-wand-magic-sparkles text-6xl text-white/20 absolute top-4 right-4"></i>
<div class="text-white text-center z-10">
<i class="fa-solid fa-cards text-4xl mb-3"></i>
<h3 class="text-2xl font-bold">타로 체험</h3>
</div>
</div>
<div class="p-8">
<p class="text-slate-600 mb-4 leading-relaxed">
궁금했던 것들을 털어내고 마음속 이야기를 들여다볼 수 있는 힐링 타임.
</p>
<span class="inline-block px-3 py-1 bg-purple-50 text-purple-600 rounded-lg text-sm font-bold">#심리상담 #힐링</span>
</div>
</div>
<!-- Card 2 -->
<div class="group bg-white rounded-3xl p-1 border border-slate-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 overflow-hidden">
<div class="bg-gradient-to-br from-brand-secondary to-orange-500 h-48 rounded-t-[20px] relative flex items-center justify-center overflow-hidden">
<i class="fa-solid fa-pen-nib text-6xl text-white/20 absolute top-4 right-4"></i>
<div class="text-white text-center z-10">
<i class="fa-solid fa-brush text-4xl mb-3"></i>
<h3 class="text-2xl font-bold">캘리그라피</h3>
</div>
</div>
<div class="p-8">
<p class="text-slate-600 mb-4 leading-relaxed">
전문 캘리그라퍼를 통해 내가 좋아하는 문구나 명언을 남겨보는 특별한 시간.
</p>
<span class="inline-block px-3 py-1 bg-orange-50 text-orange-600 rounded-lg text-sm font-bold">#나만의문구 #기념품</span>
</div>
</div>
<!-- Card 3 -->
<div class="group bg-white rounded-3xl p-1 border border-slate-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 overflow-hidden">
<div class="bg-gradient-to-br from-blue-500 to-cyan-500 h-48 rounded-t-[20px] relative flex items-center justify-center overflow-hidden">
<i class="fa-solid fa-camera text-6xl text-white/20 absolute top-4 right-4"></i>
<div class="text-white text-center z-10">
<i class="fa-solid fa-camera-retro text-4xl mb-3"></i>
<h3 class="text-2xl font-bold">AI 포토부스</h3>
</div>
</div>
<div class="p-8">
<p class="text-slate-600 mb-4 leading-relaxed">
희망리턴 소상공인 리스타트 페어만의 특별한 프레임으로 남기는 소중한 추억.
</p>
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-600 rounded-lg text-sm font-bold">#인생네컷 #추억저장</span>
</div>
</div>
</div>
</div>
</section>
<!-- Zone Info (Infographic Map Style) -->
<section id="zones" class="py-24 bg-slate-50 relative overflow-hidden">
<div class="container mx-auto px-6 relative z-10">
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/3">
<h2 class="text-3xl font-black text-brand-dark mb-6">전시관 구성 <span class="text-brand-primary">안내</span></h2>
<p class="text-slate-600 mb-8">
다양한 분야의 소상공인들의 우수한 제품과 서비스를 만나보세요. 총 3개의 테마 존으로 구성되어 있습니다.
</p>
<div class="space-y-4">
<div class="flex items-center gap-4 bg-white p-4 rounded-xl shadow-sm border-l-4 border-brand-secondary">
<div class="bg-orange-100 p-3 rounded-lg text-brand-secondary">
<i class="fa-solid fa-utensils text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg">A ZONE</h4>
<p class="text-sm text-slate-500">식음료 / 디저트 / 반려동물</p>
</div>
<div class="ml-auto font-bold text-2xl text-slate-200">01</div>
</div>
<div class="flex items-center gap-4 bg-white p-4 rounded-xl shadow-sm border-l-4 border-brand-primary">
<div class="bg-blue-100 p-3 rounded-lg text-brand-primary">
<i class="fa-solid fa-shirt text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg">B ZONE</h4>
<p class="text-sm text-slate-500">소품 / 공예 / 의류 / 뷰티</p>
</div>
<div class="ml-auto font-bold text-2xl text-slate-200">02</div>
</div>
<div class="flex items-center gap-4 bg-white p-4 rounded-xl shadow-sm border-l-4 border-brand-accent">
<div class="bg-green-100 p-3 rounded-lg text-brand-accent">
<i class="fa-solid fa-rocket text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg">C ZONE</h4>
<p class="text-sm text-slate-500">교육 / 창업 / 홍보 / 전자</p>
</div>
<div class="ml-auto font-bold text-2xl text-slate-200">03</div>
</div>
</div>
</div>
<div class="lg:w-2/3">
<!-- Stylized Map Visualization -->
<div class="bg-white rounded-3xl p-8 shadow-lg border border-slate-200 relative h-full min-h-[400px]">
<h3 class="text-center font-bold text-slate-400 mb-8 text-sm tracking-widest">EXHIBITION FLOOR PLAN</h3>
<div class="grid grid-cols-12 grid-rows-6 gap-4 h-[300px]">
<!-- Entrance -->
<div class="col-span-2 row-span-2 flex items-center justify-center">
<div class="text-center">
<i class="fa-solid fa-arrow-right-to-bracket text-3xl text-red-500 mb-2 animate-pulse"></i>
<div class="text-xs font-bold text-red-500">입구</div>
</div>
</div>
<!-- Brand Booth -->
<div class="col-span-4 row-span-3 bg-slate-100 rounded-xl flex flex-col items-center justify-center border-2 border-slate-200 border-dashed">
<i class="fa-solid fa-crown text-slate-400 text-2xl mb-2"></i>
<span class="font-bold text-slate-500">브랜드 홍보관</span>
</div>
<!-- A Zone -->
<div class="col-span-3 row-span-3 bg-orange-50 rounded-xl border border-orange-100 flex flex-col items-center justify-center hover:shadow-md transition cursor-pointer group">
<span class="text-2xl font-black text-brand-secondary mb-1 group-hover:scale-110 transition">A</span>
<span class="text-xs text-orange-400 font-bold">Food & Pet</span>
</div>
<!-- B Zone Top -->
<div class="col-span-3 row-span-2 bg-blue-50 rounded-xl border border-blue-100 flex flex-col items-center justify-center hover:shadow-md transition cursor-pointer group">
<span class="text-2xl font-black text-brand-primary mb-1 group-hover:scale-110 transition">B</span>
<span class="text-xs text-blue-400 font-bold">Life & Beauty</span>
</div>
<!-- B Zone Bottom -->
<div class="col-span-3 row-span-2 col-start-7 row-start-4 bg-blue-50 rounded-xl border border-blue-100 flex items-center justify-center hover:shadow-md transition">
<span class="text-xs text-blue-300">B ZONE 확장</span>
</div>
<!-- A Zone Bottom -->
<div class="col-span-3 row-span-2 col-start-3 row-start-4 bg-orange-50 rounded-xl border border-orange-100 flex items-center justify-center hover:shadow-md transition">
<span class="text-xs text-orange-300">A ZONE 확장</span>
</div>
<!-- C Zone -->
<div class="col-span-2 row-span-5 col-start-11 row-start-1 bg-green-50 rounded-xl border border-green-100 flex flex-col items-center justify-center hover:shadow-md transition cursor-pointer group">
<span class="text-2xl font-black text-brand-accent mb-1 group-hover:scale-110 transition">C</span>
<span class="text-xs text-green-600 font-bold text-center">Tech<br>& Biz</span>
</div>
<!-- Rest Area -->
<div class="col-span-2 row-span-1 col-start-11 row-start-6 bg-yellow-100 rounded-xl flex items-center justify-center">
<span class="text-xs font-bold text-yellow-600">휴게공간</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Schedule Timeline -->
<section id="schedule" class="py-24 bg-brand-dark text-white relative overflow-hidden">
<!-- Background Graphic -->
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10 pointer-events-none">
<div class="absolute top-10 left-10 w-64 h-64 bg-blue-500 rounded-full blur-3xl"></div>
<div class="absolute bottom-10 right-10 w-80 h-80 bg-brand-secondary rounded-full blur-3xl"></div>
</div>
<div class="container mx-auto px-6 relative z-10">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-black mb-4">무대 운영 일정</h2>
<p class="text-blue-200">2일간 펼쳐지는 희망과 도약의 무대</p>
</div>
<div class="relative max-w-4xl mx-auto">
<!-- Center Line -->
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-800 rounded-full"></div>
<!-- Day 1 Item 1 -->
<div class="flex justify-between items-center mb-12 w-full group">
<div class="w-5/12 text-right pr-8">
<h4 class="text-xl font-bold text-white group-hover:text-brand-primary transition">Opening & 개회식</h4>
<p class="text-blue-300 text-sm mt-1">행사의 시작을 알리는 오프닝 세레모니</p>
</div>
<div class="w-2/12 flex justify-center relative">
<div class="w-12 h-12 bg-white rounded-full border-4 border-brand-primary flex items-center justify-center z-10 shadow-[0_0_15px_rgba(59,130,246,0.5)]">
<span class="text-brand-dark font-bold text-xs">10:00</span>
</div>
</div>
<div class="w-5/12 pl-8">
<div class="inline-block px-3 py-1 bg-blue-900 rounded-full text-xs font-bold text-blue-300 border border-blue-700">11. 20 (목)</div>
</div>
</div>
<!-- Day 1 Item 2 -->
<div class="flex justify-between items-center mb-12 w-full group">
<div class="w-5/12 text-right pr-8">
<div class="inline-block px-3 py-1 bg-blue-900 rounded-full text-xs font-bold text-blue-300 border border-blue-700">11. 20 (목)</div>
</div>
<div class="w-2/12 flex justify-center relative">
<div class="w-12 h-12 bg-brand-secondary rounded-full border-4 border-orange-300 flex items-center justify-center z-10 shadow-[0_0_15px_rgba(249,115,22,0.5)]">
<span class="text-white font-bold text-xs">13:00</span>
</div>
</div>
<div class="w-5/12 pl-8">
<h4 class="text-xl font-bold text-white group-hover:text-brand-secondary transition">명사 초청 강연</h4>
<p class="text-blue-300 text-sm mt-1">박지훈 변호사와 함께하는 인사이트</p>
</div>
</div>
<!-- Day 1 Item 3 -->
<div class="flex justify-between items-center mb-12 w-full group">
<div class="w-5/12 text-right pr-8">
<h4 class="text-xl font-bold text-white">우수사례 경진대회</h4>
<p class="text-blue-300 text-sm mt-1">소상공인 성공 노하우 공유</p>
</div>
<div class="w-2/12 flex justify-center relative">
<div class="w-12 h-12 bg-white rounded-full border-4 border-brand-primary flex items-center justify-center z-10">
<span class="text-brand-dark font-bold text-xs">14:00</span>
</div>
</div>
<div class="w-5/12 pl-8"></div>
</div>
<!-- Day 2 Item -->
<div class="flex justify-between items-center w-full group">
<div class="w-5/12 text-right pr-8">
<div class="inline-block px-3 py-1 bg-blue-900 rounded-full text-xs font-bold text-blue-300 border border-blue-700">11. 21 (금)</div>
</div>
<div class="w-2/12 flex justify-center relative">
<div class="w-12 h-12 bg-white rounded-full border-4 border-brand-primary flex items-center justify-center z-10">
<span class="text-brand-dark font-bold text-xs">17:00</span>
</div>
</div>
<div class="w-5/12 pl-8">
<h4 class="text-xl font-bold text-white">Closing</h4>
<p class="text-blue-300 text-sm mt-1">이틀간의 여정 마무리</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-900 text-slate-400 py-12 text-sm border-t border-slate-800">
<div class="container mx-auto px-6 text-center">
<div class="flex justify-center items-center gap-8 mb-8 flex-wrap opacity-80 grayscale hover:grayscale-0 transition duration-500">
<!-- Logos (Text Placeholder for accessibility) -->
<div class="h-8 flex items-center font-bold text-white text-lg gap-2">
<span class="w-4 h-4 bg-red-500 rounded-full inline-block"></span> 중소벤처기업부
</div>
<div class="h-8 flex items-center font-bold text-white text-lg gap-2">
<span class="w-4 h-4 bg-blue-500 rounded-full inline-block"></span> 소상공인시장진흥공단
</div>
<div class="h-8 flex items-center font-bold text-white text-lg gap-2">
<span class="w-4 h-4 bg-indigo-500 rounded-full inline-block"></span> (사)한국서비스표준진흥원
</div>
</div>
<p class="mb-2">장소: 성남 코리아디자인센터(KDC) B1F 전시장 (성남시 분당구 양현로 322)</p>
<p class="opacity-60">© 2025 Hope Return Small Business Restart Fair. All rights reserved.</p>
</div>
</footer>
<script>
// Zone Chart
const zoneCtx = document.getElementById('zoneChart').getContext('2d');
new Chart(zoneCtx, {
type: 'doughnut',
data: {
labels: ['A ZONE (식음료/반려동물)', 'B ZONE (생활/공예)', 'C ZONE (교육/전자)'],
datasets: [{
data: [23, 29, 18], // Based on image counts approximately
backgroundColor: ['#f97316', '#3b82f6', '#10b981'],
borderWidth: 0,
hoverOffset: 15
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
usePointStyle: true,
font: { family: 'Noto Sans KR', size: 11 }
}
}
},
cutout: '75%'
}
});
</script>
</body>
</html>프롬프트에는 랜딩페이지의 목적, 고객층, 필요 문구 스타일 등을 포함해 보다 현실적인 문구를 얻는 데 도움이 되었습니다.
4. 이미지 및 캡처 화면
https://gemini.google.com/share/0fcc89ab0255
Gemini의 구성 제안, Google Sites의 편집 화면 캡처 등을 포함해 기록해두었습니다.
5. 코드 또는 구성 요소 (선택)
필요 시 HTML 조각이나 커스텀 스타일도 넣을 수 있으나, 이번에는 Sites 기본 기능만으로 충분했습니다.
사용한 도구
구글 제미나이(Gemini)
구글 페이지(Google Sites)
활용 방식
Gemini를 활용해 랜딩페이지의 문구, 구성 아이디어, 필요한 요소들을 생성했습니다.
Google Sites로 실제 랜딩페이지를 구성하며 박람회 전에 빠르게 배포해야 하는 상황이어서 즉시 적용했습니다.
블로그 글도 동시에 써야 하는 상황이라 Gemini의 도움을 많이 받았습니다.
사용한 프롬프트 전문
https://gemini.google.com/share/f2b43b6331ee
이미지 및 캡처 화면
https://gemini.google.com/share/0fcc89ab0255
https://gemini.google.com/share/248da1e82b19
코드 또는 구성 요소
(필요 시 코드 블록 추가 가능)
결과와 배운 점
이번 경험을 통해 단순히 페이지를 만든 것을 넘어, AI 도구가 실전에서 얼마나 강력하게 생산성을 높여주는지를 몸소 깨달았습니다.
1. 배운 점
처음에는 생소한 Google Gemini 사용이 너무 어렵게 느껴졌지만, 실제로 문구를 생성하고 반복 수정하면서 금방 익숙해졌습니다.
"짧은 시간에 많은 것을 배웠다"는 느낌보다, 짧은 시간에 ‘바로 활용했다’는 데 의미가 더 컸습니다.
박람회 당일을 앞두고 빠르게 작업해야 했기에, AI의 도움은 선택이 아니라 필수였다는 걸 느꼈습니다.
2. 시행착오
Google Sites 게시 과정에서 “홈페이지 계정이 없다”는 오류가 떠서 한동안 당황했습니다.
로그인 계정 문제, 소유자 권한 문제 등을 확인하느라 시간이 꽤 걸렸습니다.
이를 계기로 “미리 한 번 테스트 게시를 해보는 게 정말 중요하다”는 것을 배웠습니다.
3. 앞으로의 발전 가능성
여전히 여러 페이지 연결 방식(내비게이션 구성 등)이 어려워 추가 학습이 필요 합니다.
박람회가 끝난 후에는 이번 랜딩페이지를 브랜드 소개용 홈페이지로 확장해보고 싶은 마음이 생겼습니다.
Google Sites 말고 Notion, Wix, Webflow도 비교해볼 계획입니다.
4. 독자에게 전하고 싶은 메시지
랜딩페이지 만들기는 생각보다 어렵지 않습니다. 특히 Gemini 같은 AI 도구를 잘 활용하면 누구나 빠르게 만들 수 있습니다!
“완벽하게 만들어야지!”보다 “일단 만들어보자!”가 훨씬 큰 배움을 준다는 걸 이번에 느꼈습니다.
처음에는 구글 제미나이가 어렵게 느껴졌지만, 짧은 시간에 많은 내용을 배우면서 자신감이 생겼습니다.
빠른 작업이 필요한 상황에서도 유용하게 활용할 수 있음을 깨달았습니다.
시행착오
Google Sites에서 페이지 게시 시, "홈페이지 계정이 없다"는 메시지가 떠 게시가 되지 않는 오류를 겪었습니다.
도움 필요한 부분
여전히 여러 페이지 연결 방법이 어려워 추가 학습이 필요합니다.
앞으로의 계획
박람회 후 랜딩페이지를 브랜드 페이지로 확장하고 싶습니다.
Google Sites의 상세 기능을 더 익혀 스스로 페이지를 다룰 수 있게 하는 것이 목표입니다.
도움 받은 글 (옵션)
저번주 강의
