본문 바로가기

분류

Gabia + Cloudflare + Vercel + GitHub로 나만의 웹사이트 런칭하기 📌 시작하기 전에지난시간에 Windows 환경에서 Gemini CLI를 활용해 Next.js 프로젝트를 개발하는 방법을 배웠습니다. 이제 개발한 프로젝트를 실제로 배포하여 전 세계 누구나 접속할 수 있는 웹사이트로 만들어보겠습니다.서비스 소개graph LR subgraph "1️⃣ GitHub - 코드 저장소" GH1[📦 코드 버전 관리] GH2[🔄 협업 & 이력 추적] GH3[🤝 Vercel 연동] end subgraph "2️⃣ Gabia - 도메인 등록" GB1[🛒 도메인 구매] GB2[📝 도메인 소유권] GB3[🔧 네임서버 설정] end subgraph "3️⃣ Cloudflare -.. 더보기
🚀 NextJS + Gemini CLI로 웹 개발 시작하기 - 2일차 강의 🔄 2회차: 배포의 이해 (60분)1. 배포란 무엇인가? (10분)지금까지 우리는 "로컬 환경"에서 작업했습니다. 즉, 내 컴퓨터에서만 웹사이트를 볼 수 있는 상태죠.배포(Deploy)란 이 웹사이트를 인터넷에 올려서 전 세계 누구나 접속할 수 있게 만드는 과정입니다.배포 과정 한눈에 보기필요한 서비스들각 서비스의 역할을 이해해봅시다:서비스역할비용GitHub코드 저장소무료Vercel배포 플랫폼무료Gabia도메인 구입유료 (연 1~2만원)CloudflareDNS 관리무료Firebase백엔드 서비스소개만 (향후 확장용)Firebase란?데이터베이스, 인증, 서버 기능을 제공하는 서비스지금 강의에서는 다루지 않지만, 향후 사용자 로그인이나 데이터 저장이 필요할 때 활용할 수 있습니다2. 개발 워크플로우 이해.. 더보기
🚀 NextJS + Gemini CLI로 웹 개발 시작하기 - 1일차 강의 안녕하세요! 오늘은 Gemini CLI를 활용해서 NextJS 웹 애플리케이션을 개발하고 배포하는 방법을 배워보겠습니다. 최종 목표는 PC와 대전할 수 있는 오목 게임을 만들어서 인터넷에 공개하는 것입니다.🎯 강의 목표Gemini CLI로 AI의 도움을 받아 코드 작성하기NextJS 개발 환경 구축하기로컬에서 웹 애플리케이션 실행하기배포의 개념 이해하기소요 시간: 약 2시간난이도: 초급 (프로그래밍 경험 없어도 OK)📋 사전 준비사항이 강의를 듣기 위해 필요한 것은 딱 한 가지입니다:기본적인 컴퓨터 사용 능력 (파일 다운로드, 설치 프로그램 실행 등)그 외 모든 것은 함께 설치하면서 배워나갈 예정입니다!🚀 1회차: 개발 환경 구축 (60분)1. 기초 개념 이해하기 (15분)본격적인 설치에 앞서, 몇.. 더보기
Python 공부 방법: 초보자를 위한 효과적인 학습 과정 안녕하세요! 프로그래밍에 관심이 있지만, Python을 어디서부터 어떻게 공부해야 할지 고민이신가요? 이 블로그 포스트에서는 초보자도 쉽게 따라할 수 있는 Python 학습 과정을 소개하겠습니다. 제가 추천하는 방법은 무료 온라인 교재를 기반으로 하며, AI 도구를 활용해 개인화된 커리큘럼을 만들고, 실전 실습을 통해 지식을 쌓는 방식입니다. 단계별로 따라가 보세요!1. 온라인 교재 소개: '점프 투 파이썬'으로 기초 다지기 Python 공부를 시작할 때 가장 중요한 것은 체계적인 교재입니다. 제가 추천하는 것은 Wikidocs에서 무료로 제공되는 '점프 투 파이썬'입니다. 이 책은 프로그래밍을 처음 접하는 왕초보를 대상으로 하며, 쉽게 풀어 쓴 기초 문법과 실습 예제를 다룹니다.주요 내용: 파이썬 시작.. 더보기
Gemini 로 Blender 조정해보기 안녕하세요, 여러분! 생성형 AI가 그림을 그리고 글을 쓰는 모습에 감탄하며 "어떻게 저렇게 똑똑할 수 있지?"라는 생각을 해보신 적 있으신가요? 그 비결 중 하나가 바로 오늘 소개해 드릴 MCP(Model Context Protocol) 입니다."MCP요? 그게 뭔데요?" 라는 질문이 자연스럽게 떠오르실 텐데요. 걱정 마세요! 지금부터 MCP가 무엇인지, 왜 필요한지, 그리고 어떻게 활용되는지 아주 쉽고 친절하게 알려드리겠습니다.💡 MCP(Model Context Protocol) 란 무엇인가요?MCP(Model Context Protocol)는 쉽게 말해, 다양한 AI 모델들이 서로 대화하고 정보를 주고받을 수 있도록 표준화된 규칙이자 언어라고 생각하시면 됩니다.우리 인간이 서로 소통하기 위해 한국.. 더보기
나노 바나나: AI로 누구나 쉽게 이미지 편집하기 소개: 구글의 혁신적인 AI 이미지 편집 도구, 나노 바나나(Gemini 2.5 Flash Image)간단한 텍스트로 고품질 이미지 생성 및 편집전문 소프트웨어 없이도 창의적 결과물 제작 가능시각적 제안: 구글 로고와 밝은 바나나 아이콘 배경, 현대적이고 깔끔한 디자인나노 바나나 소개배경구글 DeepMind 개발, 2025년 8월 출시인기 이유: 빠른 속도, 캐릭터 일관성, 쉬운 접근성Gemini 앱, Google AI Studio에서 무료/유료 사용 가능주요 기능텍스트-to-이미지: 자연어로 이미지 생성부분 편집: 배경 변경, 객체 추가/제거스타일 변환: 피규어 스타일, 색상 조정SynthID 워터마크로 AI 생성 이미지 투명성 보장데모 예시문제: 평범한 셀카를 SNS용으로 업그레이드프롬프트: "이 사.. 더보기
약봉투 기록: 가족의 건강, 한 장으로 안심하세요 어머니와 병원에 갔을 때, 의사가 복용 중인 약 이름을 물으셨습니다. 모른다고 하니 입원에 필요한 기록이 부족하다고 하더군요. 그 순간, 처방전을 잃어버리거나 약 이름을 까먹는 일이 얼마나 큰 문제를 일으킬지 깨달았습니다. 약일기는 이런 순간을 위해 태어났습니다.건강 기록, 더 이상 고민하지 마세요바쁜 부모님께: 아이의 소아과 처방전을 자꾸 잃어버리시죠? 여러 자녀의 약 정보를 따로 관리하기 벅차셨나요?만성 질환 관리자께: 병원마다 흩어진 처방전을 하나로 정리하고 싶으신가요? 의사에게 정확한 약물 이력을 전달하는 게 어렵진 않으신가요?약일기, 사진 한 장이면 끝!약일기는 간단합니다. 처방전을 사진 찍거나 갤러리에서 불러오면, 모든 정보가 자동 정리됩니다. 아이, 부모님, 본인의 처방전을 각각 구분해 관리.. 더보기
나만의 AI 연구 비서, Google NotebookLM 완벽 가이드 🚀 1. NotebookLM이란 무엇인가요?Google NotebookLM은 업로드한 소스 문서만을 기반으로 작동하는 AI 기반의 연구 및 글쓰기 도구입니다. 단순히 정보를 검색하거나 일반적인 질문에 답하는 챗봇이 아닙니다. 마치 나만의 AI 연구 조교를 고용하는 것처럼, 여러분이 제공한 자료를 학습하여 그 안에서 질문에 답하고, 요약하고, 아이디어를 제안하며, 심지어 초안까지 작성해 주는 똑똑한 비서입니다.핵심 포인트:"소스 기반(Source-grounded) AI": 여러분이 제공한 문서 외의 정보는 사용하지 않습니다.Gemini 모델 기반: Google의 최신 대규모 언어 모델인 Gemini가 핵심 엔진입니다.정보 과부하 해결: 방대한 자료 속에서 핵심을 빠르게 파악하고 인사이트를 얻도록 돕습니다.. 더보기

티스토리툴바