안녕하세요! 😊 요즘 정말 다양한 인공지능(AI) 서비스들이 쏟아져 나오고 있죠? 챗봇, 이미지 생성, 글쓰기 도구 등 종류도 너무 많아서 어떤 걸 써야 할지, 어디에서 정보를 찾아야 할지 헷갈릴 때가 많아요. 저도 처음엔 뭐가 뭔지 몰라서 헤맸던 기억이 나네요. 😅
하지만 이제 걱정 마세요! 오늘은 똑똑한 AI 비서, 구글 제미나이(Gemini)를 활용해서 우리에게 필요한 상용 AI 서비스들을 깔끔하게 정리하고, 특징과 링크까지 한눈에 볼 수 있는 나만의 제미나이 활용 웹페이지를 만들어볼 거예요. 웹 페이지를 만들고 저장하는 방법부터, 다시 열어보는 방법까지 A부터 Z까지 자세히 알려드릴 테니, 코딩 지식이 없어도 문제없습니다! ✨ 함께 나만의 AI 허브를 만들어볼까요? 🚀
1. 제미나이 활용 웹페이지, 왜 만들어야 할까요? 💡
점점 더 많은 AI 서비스가 등장하면서, 우리는 어떤 AI가 어떤 기능을 제공하는지 파악하기 어려워지고 있습니다. 이런 상황에서 제미나이 활용 웹페이지를 만드는 것은 여러모로 큰 도움이 됩니다.
- 정보의 집약: 흩어져 있는 AI 서비스 정보를 한곳에 모아 관리할 수 있습니다.
- 빠른 접근성: 브라우저 즐겨찾기나 시작 페이지로 등록하여 필요할 때마다 빠르게 AI 서비스에 접속할 수 있습니다.
- 개인 맞춤형 정리: 자신이 관심 있는 AI 서비스 위주로 목록을 구성하여, 불필요한 정보 없이 핵심만 볼 수 있습니다.
- 학습 및 비교 용이: 각 AI 서비스의 특징과 장단점을 비교하며 AI 트렌드를 파악하고 학습하는 데 유용합니다.
💡 나만의 AI 정보 허브!
여기에는 독자가 반드시 알아야 할 중요한 정보나 팁을 작성합니다. 시각적으로 구분되어 독자의 주의를 끌 수 있는 내용을 넣으세요.
여기에는 독자가 반드시 알아야 할 중요한 정보나 팁을 작성합니다. 시각적으로 구분되어 독자의 주의를 끌 수 있는 내용을 넣으세요.
2. 실전! 제미나이와 함께 AI 서비스 리스트 웹페이지 만들기 🔗
이제 제미나이와 함께 실제 웹 페이지를 만들어보는 단계입니다. 목표는 ‘주요 상용 AI 서비스 리스트와 그 특징, 링크를 담은 HTML 페이지’입니다.
STEP 2-1: 제미나이에게 웹 페이지 기획 및 코드 요청하기 💬
제미나이에게 다음과 같이 구체적으로 요청해보세요. AI는 명확한 지시를 좋아합니다!
프롬프트 예시 📝
아래 프롬프트를 ‘프롬프트 복사’ 버튼을 클릭하여 복사하신 후, 제미나이 대화창에 붙여넣고 사용하세요.
나는 '주요 상용 AI 서비스'에 대한 정보를 한눈에 볼 수 있는 개인용 웹 페이지를 만들고 싶어.
이 웹 페이지는 HTML 파일 하나로만 구성되었으면 좋겠고, CSS는 <style> 태그 안에 포함해 줘.
다음 요구사항을 반영해서 HTML 전체 코드를 작성해 줘.
1. 제목: '내 AI 서비스 가이드 봇'
2. 구성:
* 각 AI 서비스는 큰 제목(H3)으로 구분하고, 그 아래에 간략한 특징 설명과 공식 웹사이트 링크를 포함해 줘.
* 링크는 클릭하기 쉬운 버튼 형태로 디자인해 줘.
3. 디자인:
* 블루-그레이 톤으로 깔끔하게 디자인해 줘. (메인 색상: #1a73e8, 서브 색상: #e8f4fd)
* 가독성 좋은 한국어 폰트('Noto Sans KR')를 사용해 줘.
* 전체적으로 모던하고 정돈된 느낌을 원해.
4. 포함할 AI 서비스 리스트 (예시 - 최신 정보를 반영해 줘):
* ChatGPT (OpenAI): 대화형 AI 챗봇, 자연어 이해 및 생성. (링크: https://chat.openai.com)
* Google Gemini (Google): 구글의 멀티모달 AI, 다양한 형태의 정보 처리. (링크: https://gemini.google.com)
* Midjourney: 이미지 생성 AI, 고품질 예술적 이미지 생성. (링크: https://www.midjourney.com)
* DALL-E 3 (OpenAI): OpenAI에서 개발한 이미지 생성 AI로, 상세한 텍스트 프롬프트를 통해 이미지를 생성합니다. ChatGPT와 연동되어 사용성이 더욱 편리합니다.
* Notion AI: 업무 생산성 AI, 문서 작성, 요약, 아이디어 구상. (링크: https://www.notion.so/product/ai)
* Canva AI: 디자인 AI, 이미지 생성, 디자인 편집 도구. (링크: https://www.canva.com/features/ai-image-generator/)
* Perplexity AI: 질문 답변 및 정보 검색 AI, 답변 출처 제공. (링크: https://www.perplexity.ai)
* Claude 3 (Anthropic): 긴 문맥 처리 능력과 추론 능력이 뛰어난 AI 챗봇. (링크: https://www.anthropic.com/news/claude-3-family)
각 AI 서비스의 특징 설명은 2~3줄 정도로 요약해 줘.제미나이는 위 요청을 바탕으로 AI 서비스 목록과 그 특징, 링크가 포함된 완전한 HTML 코드를 생성해 줄 거예요. 생성된 코드가 길더라도 놀라지 마세요! 대부분은 디자인을 위한 CSS 코드와 콘텐츠 내용이랍니다. 😊
STEP 2-2: 제미나이가 생성한 HTML 코드 확인 및 저장하기 💾
제미나이가 보여주는 HTML 코드를 복사합니다. 이제 이 코드를 파일로 저장할 차례예요.
아래의 HTML 코드를 ‘HTML 코드 복사’ 버튼을 클릭하여 복사하신 후, 메모장 또는 텍스트 편집기에 붙여넣고 저장하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 AI 서비스 가이드 봇</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #1a73e8; /* 진한 블루 */
--secondary-color: #e8f4fd; /* 연한 하늘색 */
--text-color: #333;
--link-button-bg: #4285f4; /* 중간 블루 */
--link-button-hover-bg: #1a73e8; /* 진한 블루 */
--border-color: #ddd;
--section-bg: #f9f9f9;
}
body {
font-family: 'Noto Sans KR', sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f0f2f5; /* 연한 배경색 */
color: var(--text-color);
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1 {
color: var(--primary-color);
text-align: center;
margin-bottom: 30px;
font-size: 28px;
border-bottom: 2px solid var(--border-color);
padding-bottom: 10px;
}
h3 {
color: var(--primary-color);
font-size: 20px;
margin-top: 30px;
margin-bottom: 10px;
border-bottom: 1px dashed var(--border-color);
padding-bottom: 5px;
}
.ai-service-item {
margin-bottom: 25px;
padding: 15px;
background-color: var(--section-bg);
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.ai-service-item p {
margin-bottom: 15px;
font-size: 15px;
}
.link-button {
display: inline-block;
background-color: var(--link-button-bg);
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.link-button:hover {
background-color: var(--link-button-hover-bg);
}
</style>
</head>
<body>
<div class="container">
<h1>내 AI 서비스 가이드 봇 🤖</h1>
<div class="ai-service-item">
<h3>ChatGPT (OpenAI)</h3>
<p>대화형 AI 챗봇으로, 자연어 이해 및 생성 능력이 탁월합니다. 다양한 질문에 답변하고, 글쓰기, 번역 등 여러 작업을 수행할 수 있습니다.</p>
<a href="https://chat.openai.com" target="_blank" class="link-button">공식 웹사이트 바로가기</a>
</div>
<div class="ai-service-item">
<h3>Google Gemini (Google)</h3>
<p>구글이 개발한 멀티모달 AI로, 텍스트, 이미지, 오디오, 비디오 등 다양한 형태의 정보를 동시에 이해하고 처리할 수 있습니다.</p>
<a href="https://gemini.google.com" target="_blank" class="link-button">공식 웹사이트 바로가기</a>
</div>
<div class="ai-service-item">
<h3>Midjourney</h3>
<p>텍스트 설명을 바탕으로 고품질의 예술적인 이미지를 생성하는 AI 서비스입니다. 독특하고 창의적인 시각적 결과물을 만드는데 탁월합니다.</p>
<a href="https://www.midjourney.com" target="_blank" class="link-button">공식 웹사이트 바로가기</a>
</div>
<div class="ai-service-item">
<h3>DALL-E 3 (OpenAI)</h3>
<p>OpenAI에서 개발한 이미지 생성 AI로, 상세한 텍스트 프롬프트를 통해 이미지를 생성합니다. ChatGPT와 연동되어 사용성이 더욱 편리합니다.</p>
<a href="https://openai.com/dall-e" target="_blank" class="link-button">공식 웹사이트 바로가기</a>
</div>
<div class="ai-service-item">
<h3>Notion AI</h3>
<p>업무 및 생산성 도구인 Notion에 통합된 AI 기능으로, 문서 작성, 요약, 아이디어 구상, 번역 등 다양한 작업을 지원하여 생산성을 향상시킵니다.</p>
<a href="https://www.notion.so/product/ai" target="_blank" class="link-button">공식 웹사이트 바로가기</a>
</div>
<div class="ai-service-item">
<h3>Canva AI</h3>
<p>쉬운 디자인 도구 Canva에 내장된 AI 기능으로, 텍스트를 이미지로 변환하거나 디자인 요소를 자동 생성하는 등 디자인 작업을 돕습니다.</p>
<a href="https://www.canva.com/features/ai-image-generator/" target="_blank" class="link-button">공식 웹사이트 바로가기</a>
</div>
<div class="ai-service-item">
<h3>Perplexity AI</h3>
<p>질문 답변 및 정보 검색에 특화된 AI로, 답변과 함께 정보의 출처를 명확하게 제공하여 신뢰성 있는 정보를 얻는 데 유용합니다.</p>
<a href="https://www.perplexity.ai" target="_blank" class="link-button">공식 웹사이트 바로가기</a>
</div>
<div class="ai-service-item">
<h3>Claude 3 (Anthropic)</h3>
<p>Anthropic에서 개발한 AI 챗봇으로, 매우 긴 문맥을 처리하고 복잡한 추론 능력이 뛰어납니다. 특히 안전성과 윤리성을 강조합니다.</p>
<a href="https://www.anthropic.com/news/claude-3-family" target="_blank" class="link-button">공식 웹사이트 바로가기</a>
</div>
</div>
</body>
</html>- **메모장(Windows) 또는 텍스트에디트(Mac) 열기:** 컴퓨터에 기본으로 설치된 텍스트 편집기를 엽니다.
- **코드 붙여넣기:** 복사한 HTML 코드를 빈 문서에 붙여넣습니다.
- **다른 이름으로 저장:** ‘파일(File)’ 메뉴에서 ‘다른 이름으로 저장(Save As…)’을 선택합니다.
- **파일 이름과 형식 지정:**
- 파일 이름은 `ai_services.html` (원하는 이름으로 가능하지만, 뒤에 `.html`을 붙여야 해요!) 로 지정합니다.
- **🚨 중요! 메모장 사용자 필독!** * ‘파일 형식(Save as type)’ 드롭다운 메뉴에서 반드시 **’모든 파일 (*.*)’**을 선택해야 합니다. * ‘인코딩(Encoding)’은 **’UTF-8’**로 설정해야 한글이 깨지지 않고 제대로 표시됩니다.
- 저장할 위치는 나중에 찾기 쉬운 곳(예: 바탕화면, 문서 폴더)으로 지정하세요.
⚠️ 주의! 파일 저장 시 설정 확인!
메모장에서 `.html` 파일로 저장할 때 ‘모든 파일 (*.*)’과 ‘UTF-8’ 인코딩을 제대로 설정하지 않으면 웹 페이지가 올바르게 작동하지 않거나 한글이 깨질 수 있습니다. 꼭 다시 한번 확인해주세요!
메모장에서 `.html` 파일로 저장할 때 ‘모든 파일 (*.*)’과 ‘UTF-8’ 인코딩을 제대로 설정하지 않으면 웹 페이지가 올바르게 작동하지 않거나 한글이 깨질 수 있습니다. 꼭 다시 한번 확인해주세요!
3. 만든 웹 페이지 열어보고 활용하기 🖥️
이제 저장된 웹 페이지를 열어보고 필요에 따라 수정하는 방법을 알아보겠습니다.
STEP 3-1: 저장된 웹 페이지 열기 🖱️
저장한 `ai_services.html` 파일을 찾아 더블클릭하면, 여러분의 웹 브라우저(크롬, 엣지, 사파리 등)에서 방금 만든 웹 페이지가 멋지게 열릴 거예요! 🎉
AI 서비스 목록과 함께 각 서비스의 특징, 그리고 바로가기 링크들이 보일 겁니다. 링크 버튼을 클릭하면 해당 서비스 웹사이트로 바로 이동할 수 있어요.
STEP 3-2: 웹 페이지 수정 및 업데이트 ✍️
만들어진 페이지에 새로운 AI 서비스를 추가하거나, 기존 서비스의 특징을 수정하고 싶다면 어떻게 해야 할까요? 간단합니다!
- `ai_services.html` 파일을 마우스 오른쪽 버튼으로 클릭한 후, ‘연결 프로그램’ 또는 ‘다른 프로그램으로 열기’에서 ‘메모장’ 또는 사용하던 텍스트 편집기를 선택하여 엽니다.
- 파일이 열리면 HTML 코드 내용을 직접 수정할 수 있습니다. 예를 들어, 새로운 AI 서비스를 추가하고 싶다면 기존 AI 서비스 코드 블록을 참고하여 새로운 `` 블록을 만들고 내용을 채워 넣으면 됩니다.
- 수정이 완료되면 파일을 저장합니다.
- 웹 브라우저에서 열려있던 `ai_services.html` 페이지를 ‘새로고침(F5 키)’하면 변경된 내용이 바로 적용됩니다.
👍 꿀팁: 제미나이에게 수정 요청!
만약 어떤 부분을 어떻게 수정해야 할지 모르겠다면, 수정하고 싶은 내용을 제미나이에게 다시 알려주고 “이 내용을 HTML 코드에 추가/수정해 줘.”라고 요청하면 됩니다! 제미나이는 여러분의 든든한 코딩 도우미예요.제미나이 활용 웹페이지, 이제 나도 웹 마스터! 📝
오늘 우리는 제미나이 활용 웹페이지를 만드는 방법을 단계별로 살펴보았습니다. 수많은 상용 AI 서비스들을 한눈에 정리하고, 나만의 AI 정보 허브를 구축하는 실용적인 웹 페이지를 코딩 지식 없이도 만들 수 있다는 것을 경험하셨을 거예요! 🚀
이렇게 만든 웹 페이지는 여러분의 브라우저 시작 페이지나 즐겨찾기로 등록해두고 편리하게 활용할 수 있습니다. AI 기술의 발전은 이제 웹 페이지 제작의 문턱까지 낮춰주었죠. 오늘 배운 내용을 바탕으로 여러분만의 필요에 맞춰 다양한 웹 페이지를 제미나이와 함께 만들어보세요! 😊
자주 묻는 질문 ❓Q: 제미나이가 추천해준 AI 서비스 외에 다른 서비스를 추가하고 싶어요. 어떻게 해야 하나요?A: 👉 저장한 HTML 파일을 텍스트 편집기로 열어서, 기존 AI 서비스 코드(`` 제목, 설명, 링크 버튼)를 참고하여 새로운 AI 서비스 정보를 추가하고 저장하시면 됩니다. 코드가 어렵다면 제미나이에게 “이 서비스(이름, 특징, 링크)를 기존 HTML 코드에 추가해 줘.”라고 요청해도 좋습니다.
Q: 만든 웹 페이지를 다른 컴퓨터에서도 사용하고 싶다면 어떻게 해야 할까요?A: 👉 `ai_services.html` 파일을 USB 드라이브나 클라우드 저장 서비스(구글 드라이브, 드롭박스 등)에 넣어 다른 컴퓨터로 옮긴 후, 해당 컴퓨터에서 파일을 열면 됩니다. 인터넷이 연결된 곳에 업로드하여 주소로 접속하는 방법도 있지만, 이는 웹 호스팅이라는 추가적인 과정이 필요합니다.Q: 웹 페이지의 디자인을 더 멋지게 꾸미고 싶어요!A: 👉 제미나이에게 “이 웹 페이지의 배경색을 변경해 줘.”, “링크 버튼 디자인을 더 세련되게 바꿔줘.” 와 같이 구체적인 디자인 요청을 할 수 있습니다. CSS에 대한 기본적인 지식을 학습하는 것도 큰 도움이 됩니다.제미나이 활용 웹페이지 제작에 대해 더 궁금한 점이 있다면 댓글로 물어봐주세요~ 😊