1부 · 정적 홈페이지 개요
0:08홈페이지를 만드는 과정을 한번 살펴보려고 합니다. 실질적으로 저희가 홈페이지를 만드는 방법은 여러 가지가 있는데 저희가 오늘 목표로 하고 있는 것은 정적 홈페이지를 만드는 겁니다. 정적 홈페이지는 기존에 워드프레스나 이런 것과 다르게 이미 다 세팅돼 있는 그런이 홈페이지의 내용을 사람들에게 그대로 제공을 해 주는 그런 서비스로서 조금 있다 살펴보겠지만 일반 워드프레스 홈페이지와는 약간 장단점이 서로간에 있는 그런 서비스입니다.
0:43일단은 먼저 저희가 몇 가지를 좀 같이 살펴보고 이론적으로 좀 알아본 후에 홈페이지를 만드는 과정도 같이 한번 보도록 하겠습니다. 많은 사람들에게 홈페이지가 왜 필요한가라고 하는 그런 말을 듣곤 합니다. 요즘은 SNS가 대세고 SNS를 통해서 사람들이 많은 소식들을 전달받는데 굳이 홈페이지가 필요하냐라고 하는 거죠.
홈페이지와 SNS는 무엇이 다른가
1:05홈페이지와 SNS는 서로 장단점이 있어요. 먼저 SNS를 살펴본다면 SNS의 가장 큰 장점은 바로 빠르다라고 하는 거죠. 한 사람이 어떤 SNS에 글을 올리면 그것의 확산 속도가 무척이나 빠릅니다. 그리고 그것이 바이럴을 탔을 때 또 파급 효과 그런 것들도 상당히 많이 있죠.
1:26어, 그리고 또 SNS의 가장 큰 장점은 뭐냐면 찾아오는 서비스라고 하는 거예요. 누군가 글을 썼을 때 내가 그 글을 보기 위해서 그 사람에게 가야 되는 것이 아니라 그 사람의 글이 나에게 이렇게 직접 찾아와서 알림이라든가 이런 것들을 통해서 볼 수 있다라고 하는 거죠. 자, 반면에 홈페이지라고 하는 것은 내가 찾아가야만 볼 수 있는 그런 서비스입니다.
1:48그렇기 때문에 속도 면에서는 SNS랑은 비교할 수 없을 정도로 그 느릴 수 있고요. 그리고 또 엄밀하게 말하면 누군가가 찾아와서 보지 않는다라고 하면 그 홈페이지가 있는지조차도 모를 수 있겠죠. 반면에 홈페이지의 가장 큰 장점이 뭐냐면 히스토리가 저장이 된다라고 하는 거고요.
2:08내가 보여 주고 싶은 형태로 순서로 이런 것들을 보여 줄 수 있다라고 하는 겁니다. 반면에 SNS는 내가 분명히 보기는 봤는데 이전에 어디서 봤더라, 언제 봤더라. 그것을 찾기 위해서 페이스북이라든가 이런 것들을 계속해서 올려보면서 찾는 그런 경험들이 다 있을 거예요. 그래서 홈페이지는 한 자리에 있지만 자료를 체계적으로 저장하는 그런 장점이 있고 또 필요에 따라서 내가 어떤 자료를 찾아보고자 할 때 그것을 정확하게 찾아볼 수 있다라고 하는 그런 장점이 있죠.
2:39그래서 중요한 것은 뭐냐면 뭐가 필요하다, 필요 없다의 개념이 아니라 홈페이지와이 SNS가 같이 협업을 하게 됐을 때 저희는 상당히 큰 시너지를 낼 수가 있다라고 하는 거죠. 그래서 먼저 저희가 어떤 홈페이지에 컨텐츠를 올리고 그것을 SNS로 다른 사람들에게 이렇게 전달하고 그 SNS에는 그 홈페이지로 갈 수 있는 링크를 달아서 사람들이 더 많은 정보를 보기를 원한다면 그 링크를 타고 홈페이지에 들어와서 그 홈페이지 내용을 살펴보며 체계적으로 뭔가를 학습하거나 전달할 수 있는 그런 과정을 사용하는 것이 상당히 중요하다고 봅니다.
홈페이지에 접속하면 벌어지는 일 — DNS와 웹 서버
3:21자, 그리고 이것도 알아두면 도움이 되는데요. 자, 저희가 어떤 홈페이지에 방문한다라고 했을 때 그 백그라운드에서 일어나는 그런 일들을 한번 이렇게 정리해 보았습니다. 먼저 내 컴퓨터에 웹 브라우저, 크롬이라든가 사파리 또는 엣지 이런 브라우저를 통해서 그 주소창에닷컴이라고 하는 주소를 쳤다라고 하면은요. 그렇게 쳤다고 해서 이것이 바로 그 홈페이지로 갈 수 있는 것이 아니고요.
3:50실질적으로 그 홈페이지는 어느 서버의 컴퓨터 공간이라고 생각을 해 볼 수가 있습니다. 그런데 그 각각의 컴퓨터에는 그 주소가 있는데 그 컴퓨터 주소는 이런 것처럼 여기 주 숫자로 돼 있는 그런 주소를 사용을 합니다. 자, 그래서 저희가 알고 있는닷컴이라고 하는 사이트를 저희가 직접 바로 갈 수가 없고이 주소를이 숫자로 된 IP 주소를 알아야 되는데 도메인과 IP 주소에 매칭된 주소를 가지고 있는 서버가 DNS 서버, 도메인 네임 서버라고 하는 곳이 있습니다.
4:22그래서 이곳에 들러서이 실제 그 IP 주소를 제공을 받고 그 주소로 이렇게 방문을 하게 되고요. 그렇게 되면 거기에서 웹 서버라고 하는 것이 저희의 방문한 요청 그 요청을 받고 정보들을 제공을 해 주면 그 정보들이 코드로 구성이 돼 있고요. 그것이 저희의 컴퓨터에 웹 브라우저에서 그 코드를 따라서 그림과 글씨 이런 것들을 디자인들 레이아웃을 구성하여서 실질적으로 저희가 홈페이지를 보게 되는 겁니다.
동적 vs 정적 — 음식점과 푸드코트
4:50또 여기 웹 서버에서도 동적 홈페이지라고 하는 것이 있고 정적 홈페이지라고 하는 것이 있는데요. 뭐 손쉽게 얘기를 하자면 동적 홈페이지는 음식점이라고 생각을 해 볼 수가 있습니다. 웹 서버라고 하는 카운터가 있고요. 그래서 여기에서 음식을 주문을 하면 그 중간에서 실질적으로 음식을 만드는 데이터베이스라고 하는 곳에 연락을 하는 그런 사람이 있습니다.
5:17그래서 예를 들어서 짜장면 한 그릇 그렇게 요청을 하게 된다면이 웹 프로그래밍이 데이터베이스에 접속을 해서 짜장면 한 그릇에 대한 자료를 요청을 하게 되고요. 그렇게 했을 때 여기에서 자료를 제공을 받아서 어 실질적으로 그 저희에게 이렇게 서빙을 하게 되는 그런 과정으로이 저희가 홈페이지를 볼 수 있는 것이 바로이 동적 홈페이지고요.
5:41반면에 정적 홈페이지라고 하는 것은 푸드 코트처럼 음식을 미리 다 만들어 놓고 정리해 놓고 전시해 놓고 내가 가서 원하는 거를 바로 받아서 나올 수 있도록 그런 구성이 바로 이런 정적인 홈페이지입니다. 자,요 부분에 대해서는 조금 있다 다시 한번 또 살펴보도록 하겠습니다. 자, 그래서 실질적으로 저희가 웹사이트 홈페이지를 만들기 위해서는 필요한 준비들이 있는데요.
홈페이지를 만들기 위한 준비
6:06첫 번째는 뭐 목적이 당연히 필요하겠죠. 어떤 홈페이지를 만들 것이냐. 그리고 그 홈페이지에 어떤 사람들이 들어올 것이냐. 그리고 그것에 맞추어서 내가 무엇을 보여 줄 것이냐라고 하는 그런이 컨텐츠에 관련된 거. 그리고 실질적으로 그것을 어떻게 구성을 할 것인가라고 하는 유저 인터페이스, 유저 익스피리언스에 대한 그런 부분들이 있고요. 이것은 저희가 개인적으로 준비를 해도 되는 것이죠.
6:31자, 그리고 나서 또 준비를 해야 될 것이 그 웹사이트에 도메인을 저희가 구매를 해야 되고요. 또 실질적으로 어디에다가 그 집을 홈페이지를 세울 것인가를 찾아서 호스팅이라고 하는 서비스를 저희가 또한 구매를 해야 됩니다. 자, 그리고 어떤 식으로 실질적으로이 홈페이지를 만들 것이냐라고 하는 거. 그다음에 어떤 모양으로 보여 줄 것이냐라고 하는 거.
6:55그리고 어떻게 하면 그 잘 관리할 수 있는지에 대한 그런 것들. 자, 그래서 중요한 것은 뭐냐면 기본 자료들이나 계획들을 세우고 실질적으로는 도메인과 호스팅에 대한 계획을 그리고 어떤 제작 방식을 가지고 만들 것이냐라고 하는 계획을 저희가 준비를 해야 됩니다. 자, 홈페이지를 만드는 가장 대표적인네 가지 방법이 있는데요.
홈페이지 만드는 네 가지 방법
7:18그중에 첫 번째는 웹빌더입니다. Wix라고 해서 가장 유명한 그런이 사이트죠. 어, 실질적으로 저희가 문서를 편집하듯이 그냥 손쉽게 편집을 해서 만들 수 있는 그런이 사이트고요. 또 여기에서는 뭐 Squarespace라든가 이런 걸 통해서 음식점의 그런 메뉴, 오더라든가 이런 것들까지 연결시켜서 사용할 수 있는 그런 형식의 방법입니다.
7:43그래서 실질적으로 어떤 페이지를 만드는 것은 어, 상당히 쉬운 그런이 서비스고요. 반면에 비용은 다른 데에 비해서 좀 비싼 비용을 지불해야만 합니다. 그리고 중요한 것은 뭐냐면 매달 구독료 체제로 이루어지고 만약에 내가 여기에 사이트를 만들었다가 다른 곳으로 옮기기로 그렇게 결정을 했다라고 하면 그곳에 가서 새로 만들어야 되는 그런 종속성 이런 것들이이 웹빌더의 특징이라고 볼 수가 있습니다.
8:09반면에 워드프레스나 이런 것처럼 그 CMS라고 하는 컨텐츠 매니지먼트 시스템이라고 하는 어 이런 서비스를 통해서 만들 수 있고요. 자, 이것은 조금만 공부하면 나름 준수한 그런이 사이트를 만들 수 있습니다. 마찬가지로 호스팅을 하는데이 서비스를 제공해 주는 그런 기초 베이스먼트가 있기 때문에 그것에 대한 비용이 발생을 할 수 있고요.
8:33반면에 이것을 좀 약점이라고 한다면 저희가 잘 관리를 해 주지 않으면 해킹에 대한 위험이 좀 상당히 많이 있게 됩니다. 자, 그리고 저희가 만들려고 하는 것은 이제 정적 사이트고요. 정적 사이트는 Hugo를 비롯해서 여러 가지 그런 서비스들이 있습니다. 자, 초기에 진입 장벽이 좀 있어요. 어떤 환경을 직접 내가 구성을 해야 되고 이러한 어려움들이 좀 있지만 반면에 비용은 거의 제로에 가까운 그런 비용과 또 매우 빠르고 해킹에 그런 위험이 거의 없는 그런 서비스를 제공할 수 있다라고 하는 것이 가장 큰 장점으로 보입니다.
9:09자, 그리고 일반적으로 뭐 네이버 블로그라든가 이런 것을 통해서 저희가 어떤 홈페이지 비슷하게 나의 자료를 제공할 수 있는 그런 방법들도 있죠. 어떤 면에서 보면은 가장 쉽죠. 이미 다 플랫폼이 만들어져 있고 나는 글만 쓰면 되기 때문에요. 가입도 무료고 그런데 중요한 것은 이제 내가 꾸미고자 하는 그런 것을 내 마음대로 꾸밀 수 없다라고 하는 거죠.
9:32그래서 일반적으로 어떤 비즈니스를 하셔서 메뉴라든가 이런 것들을 직접 오더할 수 있는 그런 것들을 할 때는이 Squarespace라든가 이런 데를 어 상대적으로 좀 많이 쓰는 편이고요. 그리고 일반적으로는 그 CMS 워드프레스나 그리고 정적 홈페이지이 두 가지를 가지고 홈페이지를 구성하는 그런 경우가 많이 있습니다.
동적·정적 홈페이지 장단점 비교
9:56자, 동적 홈페이지와 정적 홈페이지 설명을 이전에 했지만 다시 한번 설명을 해 본다면 동적 홈페이지는 일단 웹 서버와 그리고 데이터베이스를 가지고 있습니다. 그리고이 둘 사이에 연결을 통해서 어 웹 서버에서 요청을 받은 것을이 데이터베이스에서 검색하고 관리하는 그런 애플리케이션 프로그램이 구성이 되어 있습니다.
10:18자, 그렇기 때문에 가장 큰 장점으로는 웹으로 접속을 해서 모든 것들을 관리할 수 있다라고 하는 것이 있고요. 또 내가 수정을 하면 즉각적으로이 실시간 반영이 된다라고 하는 거. 그리고 로그인이라든가 댓글, 뭐 이런 검색들 이런 것들에 대한 기능들이 기본적으로 제공이 되기 때문에 상당히 편리하고 또 데이터베이스를 사용하기 때문에 어떤 나의 자료에 양이 많아졌을 때에도 상대적으로 관리하기가 편한 시스템입니다.
10:46반면 단점이라고 하는 것은 웹 서버, 애플리케이션, 데이터베이스이 접속할 수 있는 그런 것들이 많이 있기 때문에 상대적으로 해킹에 대해서 상당히 좀 취약하고요. 그리고 어떤 기능들을 여기다 집어넣기 위해서 플러그인이라고 하는 것을 많이 사용을 하는데 그런 플러그인도 업데이트가 제대로 안 돼 있을 때 그 보안의 취약점을 많이이 발생을 시키곤 합니다.
11:09자, 그리고 반면에 정적인 홈페이지는 어 심플하게 웹 서버 하나만 존재합니다. 그리고이 웹 서버 안에 이미 마크다운이나 이런 것들로 그 파일들이 다 구축이 돼 있고요. 그리고 내가 요청을 하기 이전에 이미 다 정리되 있는 것들을 제가 요청하자마자 바로 보여 줄 수 있는 그런 기능을 가지고 있습니다.
11:30그렇기 때문에 여기에서는 속도가 빠르다고 하는 그런 장점이 있고요. 또 아까 동적 홈페이지에 약점이었던 해킹의 위험성에서 많이 벗어나 있는 그런 서비스고요. 반면에 기본적으로는 내가 코드를 직접 작성을 하거나 하는 작업들을 해야 되고 그것을 올리고 또 빌드하는 데까지 시간이 뭐 1분에서 2분 정도 이렇게 실시간으로 이루어지지 않는다라고 하는 단점들도 있기는 있습니다.
11:57자, 그러나 무엇보다도 이제 가장 큰 장점이라고 하는 것은 도메인 비용을 제외하고는 거의 무료로이 홈페이지를 만들 수 있다라고 하는 것이 장점이고요. 그리고 저희가 하려고 하는 것 중에 하나는 이것을 바이브 코딩을 이용해서 이것을 작성을 하게 되면 실질적으로 제가 봤을 때 동적 홈페이지에서 구현하기 어려운 것들조차도이 정적 홈페이지에서 구현할 수 있는 그런 가능성들이 있다라고 하는 것이 나름 장점이라고 이렇게 생각이 됩니다.
Hugo로 만드는 흐름과 필요한 계정
12:22그래서 저희는이 정적 홈페이지 그중에서 Hugo라고 하는 그런이 정적 홈페이지 생성기를 사용해서 홈페이지를 만들 계획을 가지고 있습니다. 자, Hugo 정적 홈페이지를 만드는 그런 과정을 간단하게 생각을 해 본다면은요. 먼저 설계도 뭐 준비를 해야 되겠죠.
12:43그리고 나서 홈페이지를 만들 수 있는 환경을 갖춰야 됩니다. 구글에서 만든 고라고 하는 프로그래밍 언어가 있고요. 그리고 또 Node.js라고 하는 그런 환경. 또 작업을 하다 보면 파이썬이나 이런 환경들도 좀 필요하건 합니다. 자, 그리고 그런 환경이 갖춰진 위에 Hugo라고 하는 그 정적 홈페이지 생성기를 설치를 하고요.
13:05그리고 거기에 테마를 입혀서 홈페이지를 완성을 하게 되고요. 그리고 이것은 지금 여기까지는 내 로컬 컴퓨터 안에서 벌어지는 일이고 이것을 온라인에 올려야 되는데 저희가 GitHub를 사용을 할 겁니다. GitHub는 쉽게 얘기해서 뭐 자재 보관소 그리고 백업 그리고 어떤 변경된 히스토리들을 저장하는 보관소라고 하시면 되겠고요.
13:26그래서 창고로 자재 창고 정도로 생각을 해 보시면 될 거 같고요. 실질적으로 이것을 사람들한테 제공하는 것으로는 그 Cloudflare 페이지라고 하는 그런 서비스를 활용을 하게 될 겁니다. 자, 그래서 저희가 중요한 것은 로컬에 이런 환경과 Hugo 그리고 Hugo 템플릿을 직접 설치를 하고요. 그리고 GitHub에 자료를 올리기 위해서 GitHub 계정이 필요하고 Cloudflare 페이지라고 하는 서비스를 이용하기 위해서 cloudflare.com이라고 하는 사이트에이 서비스를 또 받기 위해서 저희가 그 계정을 하나를 만들어야 됩니다.
Hugo와 테마 고르기
14:04자, Hugo라고 하는 서비스는 마크다운 형태 문서를 홈페이지 형태로 만들어 줄 수 있는 그런 기능을 가지고 있습니다.이 이 Hugo라고 하는 서비스가 그 구글의 고 언어, 고랭귀지를 가지고서 만들어진 그런이 프로그램이고요. 쉽게 얘기해서 그리고이 Hugo는 쉽게 얘기해서 코어 핵심 프로그램이고 그리고 그것을 여러 레이아웃으로 이렇게 보여 줄 수 있도록 만들어 주는 것이 테마라고 하는 겁니다.
14:32테마에는 여러 개가 있는데 그중에서 gohugo. 거기에 테마 사이트에 들어가 보면 지금 현재 한 275개 정도의 그런 테마들이 이렇게 공유가 돼 있고요. 이것 외에도 그런 템플릿을 다운받을 수 있는 것들은 여러 군데가 있습니다. 그래서 저희는 Hugo라고 하는 정적 홈페이지 생성기를 설치하고 내가 원하는 그런 테마를 다운받아서 그것을 바탕으로 홈페이지를 구축을 하게 될 겁니다.
AI Agent와 Gemini Gems 인터뷰
14:58자, 이렇게 생각하면이 홈페이지를 만드는 것이 상당히 복잡한 것처럼 보일 것 같은데요. 그럼에도 불구하고 제가 해 보니까 지금은 AI 에이전트를 사용해서이 정적 홈페이지를 완성하는데 상당히 많은 도움을 받을 수 있다라고 하는 겁니다. 그래서 지금 저희가 어떤 식으로 구성을 할 거냐면 먼저 Gemini Gems로 미리 준비되 있는 그런 홈페이지 자료를 위한 인터뷰가 있습니다.
15:27제가 특별히 개인 홈페이지 소규모 업체 홈페이지 교회 홈페이지에 해당하지 않는 그런 일반 범용 홈페이지를 위한 그 자료 수집을 위한 인터뷰를 Gems로 만들어 놨고요. 그래서이 Gems를 사용해서 뭐 예를 들어서 만들기를 원하는 홈페이지에 대해 간단히 소개해 주세요. 자료 수집을 위한 인터뷰를 시작하실 수 있습니다라고 해서 보명 홈페이지 인터뷰는 아무거나 일단 집어넣으시면 될 거 같아요.
15:51교회 수련의 홍보를 위한 홈페이지를 만들고 싶어요라고 하면 자, 이렇게 인사를 하고 여기에서 먼저 작업을 본격적으로 시작하기 전에 몇 가지 확인하고 싶습니다라고 해서 질문이 이렇게 나오는데요. 특별히 그 질문에이 제안이라든가 이런 것들도 있어서이 Gemini Gems와 함께 그 번호로 어떤 답을 선택을 하든지 아니면 직접 여기에 내가 원하는 것을 써 나가면서 같이 브레인스토밍을 할 수 있는 그런 형태로이 Gems를 구성을 해 놨습니다.
16:19예를 들어서 제가 설립한 기관의 홈페이지를 만든다라고 하면 이렇게 진행이 보이면서 100%까지 자료가 다 준비가 될 때까지 계속해서 이제 질문을 해 나가고요. 그런 질문에 대한 대답들을 해 나가면서 최종적으로 여기 100%가 완료가 되면 이렇게 마크다운 형식으로 그 자료가 정리된 것을 보실 수 있고요.
16:47여기에서 복사 버튼을 누르시면 어 자료를 복사하실 수 있습니다. 자, 이렇게 해서 자료를 준비를 하면 될 것 같고요. 그리고 나서는 에이전트를 가지고서 실질적으로이 홈페이지들을 만들어 나가는데 제가 해 보니까 클로드 코드로 사용하시거나 아니면은 코덱스 코덱스를 사용하시면 좀 더 좋겠지만 만약에 유료 구독을 하지 않으신 분들 같은 경우는 구글에 안티그래비티를 사용하시면 에이전트 기능을 어느 정도 이렇게 사용하실 수 있기 때문에 그것을 통해서 미리 설치해야 되는 것들을 도움을 받아서 설치하실 수가 있습니다.
17:23자, 그리고 그 에이전트를 통해서 그 홈페이지의 내용들을 수정하고 보완하고 그런 식으로 이제 작업을 하고 그것을 GitHub에 올리면서 계속해서 버전 관리를 하고요. 그리고 그것을 Cloudflare라고 하는 사이트에서 배포하는 그래서 사람들은 배포된 그런 홈페이지들을 볼 수 있도록 그렇게 구성을 할 계획입니다.
17:46그래서 여기에서 에이전트와 함께 이런 작업들을 해 나가기 때문에 예를 들어서 워드프레스라든가 이런 것들은 내가 배워서 그런 것들을 만들어야 되는데 이것은 에이전트의 도움을 받아서 함께 만들어 나가는 그런 성취감도 또 느껴 보실 수 있으리라 생각이 됩니다. 자, 그리고 내용 중에 나왔던 GitHub라고 하는 사이트에 대해서 간단하게 좀 설명을 드리면 먼저 Git이라고 하는 것이 있습니다. 이 버전 관리 시스템이거든요.
Git과 GitHub이란
18:16서 내가 어떤 것들을 수정했다라고 하는 것들을 계속해서 메모로 이렇게 남겨 놓으면 나중에 만약에 뭐가 잘못됐으면 그 이전 이력으로 돌아갈 수도 있고요. 그리고 어떤 새로운 기능을 추가를 해 보고 싶은데 기존 코드를 수정하다가 잘못될 거 같아서 걱정이 되시는 분들 같은 경우는 거기서 브랜치라고 하는 기능을 통해서 따로 테스트를 해 보고 그리고 제대로 작동을 하면 병합이라고 하는 것을 통해 가지고 다시 이 하나로 합칠 수 있는 그런이 버전 관리 시스템으로 개발자들이 사용하는 가장 기본적인 그런 기술 중에 하나입니다.
18:47자, 그리고 GitHub라고 하는 것은 이런 Git 보관소라고 생각을 하실 수 있고요. 또 실질적으로 저희가 파일들을 여기에 그 온라인에 올려 놓고 그리고 거기서 바로 직접 홈페이지 서비스도 할 수 있지만 음 단점이라고 한다면 무료로 저희가 제공받을 수 있는 공간이 1GB이기 때문에 여기에서는 그 자료를 보관만 하고 그리고 다음에 나오는 그 Cloudflare라고 하는 서비스에서 실제 빌드 과정을 거쳐서 사람들에게 홈페이지를 제공을 하는데 또 이 Cloudflare라고 하는 서비스가 또 좋은 것이 뭐냐면 전 세계에 여러 브랜치들이 있어서 저희의 그 자료들을 올리게 되면 전 세계에 있는 브랜치에 그 자료들이 공유가 되고 사람들은 자기에게 가장 가까운 브랜치에 있는 곳에 있는 자료들을 내려받아서 볼 수 있기 때문에 속도가 상당히 더 빠르게 볼 수 있다라고 하는 장점이 있어서 저희가요 시스템을 가지고서 작업을 할 계획입니다.
SEO와 디자인 개선 툴 예고
19:50그리고 마지막에는 그 SEO, AEO, GEO 즉 구글 서치라든가 이런데 어떻게 하면 좀 더 잘 뛸 수 있는지. 그리고 요즘 같은 경우는 AI가 주로 검색을 하는데 AI의 검색에 잘 노출될 수 있도록 하는 거. 그리고 실제 저희가 작성한 내용들이 답변으로 이렇게 사용될 수 있는 그런 것들도 어 잠깐 한번 살펴보도록 하겠습니다.
20:13그리고 저희가 템플릿을 사용을 하지만 실질적으로 이 템플릿에도 어느 정도 한계가 있어요. 그래서 요즘 새로 나온 그런 여러 서비스들이 있는데 getdesign.md라고 하는 사이트에서는 이미 유명한 그런 사이트들의 그 디자인 컨셉들을 정리해 놓고 있어서 여기에 있는 그런 디자인 소스들을 가져다가 저희의 홈페이지에 적용을 해 볼 수 있겠고요.
20:36또 Hallmark라고 하는 것과 taste skill이라고 하는 것은 일반적으로 AI를 가지고서 홈페이지를 만들 때 어떤 문서를 만들 때 그 슬롭이라고 하는데 너무 AI 틱스러운 AI들만의 어떤 그런 규칙들이 있어서 평범한 그런 AI가 만든 것처럼 보여주는 그런 것들을 좀 개선해 주는 그런 스킬들입니다.
20:58그래서 이런 것들도 활용을 해서 저희가 홈페이지를 조금 더 더 나은 형태로 이렇게 바꿀 수 있도록 하는 내용도 같이 한번 살펴볼 예정입니다. 그래서 이 강좌가 쉽게 생각하면 아주 짧게 손쉽게 만들 수 있다고 볼 수도 있고요. 아니면 좀 다를 것들이 있어서 그런 것들을 약간의 문턱은 좀 있는 그런 강좌가 될 거 같습니다.
21:21그렇지만 중요한 것은 뭐냐면 저희가 이것을 한번 해보고 나면 바이브 코딩에 대한 그런 어떤 기초적인 것들도 같이 한번 생각을 해 볼 수 있고요. 또 실질적으로 다른 사람들이 만들어 놓은 그런 리포지토리를 GitHub의 리포지토리라고 다른 사람들이 소스를 만들어서 올려 놓은 그런 것들을 저희가 다운받아서 저희 것에 적용을 할 수 있는 그런 기술들도 가지게 될테니까 아주 좋은 경험이 될 거라고 생각이 됩니다.
21:47같이 한번 어 잘 해 봤으면 좋겠습니다. 감사합니다.
2부 · 홈페이지를 만들기 전 준비물
21:51지난 시간에 이어 실제로 무료 정적 홈페이지를 만들어 보는 그런 시간을 갖도록 하겠습니다. 여기에 매뉴얼에 나와 있는 대로 진행을 하도록 하겠습니다. 일단 준비물은 AI 에이전트 기능을 사용할 수 있는 도구 안티그래비티나 그 클로드 코드 또는 어 ChatGPT Codex 같은 그런 것들을 사용하실 수도 있고요.
22:12또는 커서나 Windsurf, VS Code 등을 이렇게 사용하실 수 있습니다. 자, 저는 그 안티그래비티 IDE와 또 클로드 코드를 가지고서 동일한 과정을 이 두 개의 툴을 사용해서 작업을 해 보도록 하겠습니다. 먼저 안티그래비티 IDE를 다운로드 받으셔야 되는데요. 안티그래비티 IDE는 브라우저에서 antigravity.google 사이트에 들어오시면 프로덕트라고 하는 메뉴에서 안티그래비티 IDE를 저희가 다운로드 받을 겁니다.
Antigravity IDE 내려받아 설치하기
22:40안티그래비티 IDE 다운로드를 누르시면 여기서 조심해야 될 것이 지금 이것은 안티그래비티 2.0을 다운받는 버튼이고요. 아래로 내리시면 안티그래비티 CLI 그리고 안티그래비티 IDE가 따로 있습니다. 그래서 안티그래비티 IDE에서 Download for Apple Silicon 눌러서 저는 다운을 받겠고요.
23:06자, 다운을 받으시면 이렇게 화면이 나타납니다. 자, 그래서 이것을 애플리케이션에다가 드래그해서 집어넣으시면 맥에서는 설치가 가능하고요. 만약에 윈도우즈를 사용하시는 분은 여기에서 Download for x64를 클릭을 하신 다음에 다음 받은 것을 더블 클릭해서 계속 Next 눌러 주시면 다운로드가 가능하실 겁니다.
23:31클로드 코드는 유료 버전이기 때문에 아마 클로드 코드로 작업을 하실 분들은 이미 유료로 설치가 돼 있으리라 생각이 되어서 설치하는 방법은 생략하도록 하겠습니다. 안티그래비티를 다 설치하고 나서 실행을 시키게 되면 이렇게 Open Folder라고 하는 버튼을 통해서 작업하려고 하는 폴더를 지정을 하게 됩니다.
작업 폴더 열기와 화면 구성
23:55그래서 저는 workspace의 새로운 폴더 구분하기 쉽게 홈 A라고 폴더를 생성해서 열기를 누르시면 여기에 홈 A라고 하는 것이 나옵니다. 자, 안티그래비티 화면을 간단하게 설명을 드리면 여기에 좌측에 여러 메뉴가 있습니다. Explorer는 그 폴더 안에 파일과 폴더의 내용을 볼 수 있도록 이렇게 구성이 되어 있고요.
24:19여기서 새로운 파일 또는 새로운 폴더를 생성할 수 있습니다. 자, 그리고 가운데는 그 파일의 내용을 보는 에디터 영역이고요. 그리고 오른쪽에는 에이전트 영역이라고 에이전트와 직접 대화하면서 원하는 것을 실행할 수 있도록 그렇게 구성이 되어 있습니다. 자, 이것은 이렇게 배치를 해 놓고요. 자, 클로드 코드에서 새로 생성을 하나를 하신 다음에 클로드 코드도 여기 밑에 보시면 폴더를 연결시킬 수 있는 그런 버튼이 있습니다.
24:48그래서 작업 디렉토리를 지정을 하는데요. 폴더 열기를 해서 여기도 마찬가지로 새로운 폴더를 하나 만들어서 홈 C라고 이렇게 구성을 하도록 하겠습니다. 자, 그래서 화면을 이렇게 구성을 해서 저희가 에이전트를 사용해서 그 홈페이지를 만들 거기 때문에요.
25:09어떻게 사용할 수 있는지 구분해서 보여 드리기 위해서 이렇게 한꺼번에 두 개를 띄워 놓고 지금 작업을 하는 것을 보여 드리는 것입니다. 원하는 방법대로 나는 안티그래비티만 사용하겠다 또는 나는 클로드만 사용하겠다라고 해서 사용을 하시면 되겠고요. 왼쪽에 이 매뉴얼을 보면서 오른쪽에서 같이 작업을 해 나갈 겁니다.
GitHub 리포지토리 만들기
25:30자, 이렇게 에이전트를 사용할 수 있는 도구를 구성을 했고요. 그다음에 두 번째는 GitHub의 리포지토리를 하나를 만들어야 됩니다. 단어는 좀 어렵지만 실제로 해보면 그렇게 어려운 것은 없고요. github.com이라고 하는 사이트로 접속을 하게 됩니다. 자, 브라우저를 하나 띄우셔서요. 자, github.com 들어가시면 이렇게 나오는데 여기에서 먼저 Sign up 구글로 로그인 그리고 원하는 계정을 선택을 하시면 자, 이렇게 연결을 하는 계속을 눌러 주시면 들어가실 수 있고요.
26:03자, Username을 지정하라고 합니다. 원하는 이름을 지정하시고 Create account 누르시면 자, 이렇게 화면이 나옵니다. 이 중에서 여기에서 Create repository 그래서 나의 저장소를 하나를 만드는 건데요. 리포지토리를 하나를 만들어서 이름을 홈 A라고 이렇게 지정을 했습니다. 자, 그리고 Create repository.
26:24자, 그러면 이렇게 리포지토리의 주소가 나오는 것을 보실 수 있고요. 자, 두 군데에다가 만들 거기 때문에 리포지토리를 하나를 더 만들어 보도록 하겠습니다. All repositories. 여기에 My repositories 보시면 지금 홈 A라고 하는 리포지토리가 하나 만들어져 있고요.
26:46New repository 해서 이번엔 홈 C라고 해서 하나를 더 만들어 보도록 하겠습니다. 안티그래비티와 클로드 각각의 그 리포지토리를 별도로 이렇게 만든 거고요. 자, 그래서 여기에 보시면 이 주소를 나중에 기억해서 사용을 하시면 되겠습니다. 자, 그래서 GitHub 리포지토리를 하나를 만들었고요. 자, 그리고 나서 Cloudflare를 통해서 저희가 이 홈페이지를 그 개시를 하게 될 건데요.
Hugo 테마 고르기 — Hugo Blox
27:12이것은 뭐 나중에 작업을 하면서 만들어 보도록 하겠습니다. 자, 그리고 저희가 Hugo라고 하는 툴을 사용해서 그 홈페이지를 만들 겁니다. 그런데 Hugo에는 여러 가지 테마들이 있는데요. 그 테마들 중에서 내가 마음에 드는 그런 테마를 하나를 골라 주시면 되겠습니다. Hugo 테마 고르기 가이드라 그래 가지고 제가 현재 있는 그 275개의 그런 테마를 용도별로 이렇게 정리를 해 놓은 사이트가 있는데요.
27:40자, 저희는 지금 음, 개인 홈페이지를 중심으로 한번 만들어 보려고 합니다. 여러분들이 다른 홈페이지를 그 만들려고 하신다면 그 여기에서 어떤 종류의 홈페이지를 원하시는지 보시면 되겠고요. 저희는 개인 홈페이지인데 그냥 범용적으로 사용할 수 있는 기업 서비스 랜딩이라고 하는 것을 한번 골라서 자 Hugo Blox Hugo Plate 유니버셜 여러 개의 템플릿과 그 템플릿의 그런 용도 설명들 그리고 데모보기 해 가지고 이런 식으로 구성할 수 있다라고 하는 것을 이 샘플로 이렇게 제공을 하고 있는데요. 이 Hugo Blox라고 하는 그 테마를 가지고 한번 만들어 보도록 하겠습니다.
Gemini Gems로 자료 수집 인터뷰
28:18그래서 이 테마의 이름이 Hugo Blox라고 하는 것을 기억하고 계시면 되고요. 자, 그리고 이제 실질적으로 저희가 만들 준비물은 돼 있는데 어, 어떤 내용으로 만들 것인지 그것을 자료를 구성하기 위해서 제가 미리 Gemini Gems를 가지고 인터뷰를 하나를 만들어 놨습니다.
28:39개인 홈페이지를 만드실 분은요 링크를 가지고서 Gemini를 사용하시면 되겠고요. 그리고 뭐 소규모 사업체, 교회 홈페이지 기타 다른 홈페이지를 만들시기를 원하는 그런 종류를 제가 네 개의 인터뷰를 만들어 놨는데 개인 브랜드 홈페이지를 한번 클릭을 해보서 보시면 자, 이렇게 나옵니다.
29:02개인 홈페이지 자료 수집 인터뷰 당신의 이름과 한 마디 소개를 입력해 주세요. 그러면 인터뷰가 시작됩니다라고 설명이 나와 있습니다. 참고로 Gemini Gems를 사용해서 인터뷰를 만든 이유는 여러분이 Gemini를 통해서 많은 것들을 질문하고 이렇게 하셨을 텐데 그랬던 여러분의 메모리가 여기에 기록이 돼 있습니다.
29:26그래서 이 인터뷰를 할 때 여러분을 잘 알고 있는 인터뷰가 여러분에 대해서 질문하는 그런 것으로 생각을 하시면 되겠고요. 그럼 좀 더 나은 그런 결과물들이 나올 거라고 생각이 듭니다. 자, 여기 밑에 보시면 플래시라고 하는 것이 있고요. 여기서 그 사고 모델 3.1 Pro 어떤 거든지 상관이 없는데 플래시보다는 아무래도 사고 모델이 좀 더 나을 것 같으니까 사고 모델로 놓고 작업을 하겠고요.
29:54자, 여기에서 이제 답을 당신의 이름 자, 이런 식으로 나에 대한 한마디 말을 가지고 제출을 누르시면 자, 이렇게 인터뷰가 시작이 됩니다. 아이디어 제한 마음이 착한 사람이라는 슬로건을 바탕으로 방문자에게 신뢰감을 주고 함께 일하고 싶은 따뜻한 전문가 크리에이터의 톤앤매너로 브랜딩을 잡아 나가면 매우 매력적인 홈페이지가 될 것 같습니다라고 제안을 해 주었고요.
30:14그리고 여기에서 이제 인터뷰를 어떤 식으로 할 건지 간단하게 할 건지 아니면 일반적으로 할 건지 아니면 좀 더 딥하게 할 건지 이것을 고르실 수 있는데요. 아무래도 그 딥하게 할수록 이 아래로 내려갈수록 더 그 자세한 자료들을 얻을 수 있기 때문에 좋을 거라고 생각이 들고 만약에 그냥 간단하게라고 하신다면 1번을 선택을 하시면 되겠습니다.
30:43그래서 이 밑에다가 답을 넣어 주시는데요. 저는 2번을 눌러서 일반적인 길이에 그런 인터뷰를 해 보도록 하겠습니다. 자, 그러면 여기서 이제 질문이 이렇게 나오고요. 그리고 위에 보면 진행이라고 해서 지금 10%의 데이터를 구성했다라고 하는 것을 얘기하고 있습니다. 그래서 이것이 100%가 될 때까지 얘가 질문을 하고 제가 그것에 대해서 답을 하면서 그 인터뷰가 진행이 되는 거고요.
31:10어, 참고로 여기에 나와 있는 것 중에 하나를 선택하셔도 되고 아니면 여기서 얘기하는 것처럼 알아서 추천해 줘. 또는 여기 밑에다가 내가 여기에는 없는 내가 원하는 그런 답을 직접 타이핑해서 넣으시면 다음으로 이렇게 진행을 하게 되겠습니다. 자, 저는 미리 작업을 해 놓은 것을 가지고서 진행을 해 보도록 하겠습니다.
31:33자, 이게 제가 미리 작업을 해 놨던 그런 내용이고요. 계속 진행률이 진행이 되면서 그 자료들이 점점 쌓여 나가는 것을 보실 수 있습니다. 이렇게 작업을 다 맞추고 100%가 되면 이 하단에 마크다운이라 그래서 내용이 정리가 돼 있는 부분을 보실 수 있고요. 여기 위에 복사 버튼이나 또는 이것을 다운로드 할 수 있는 버튼이 있습니다.
31:57자, 여기까지 진행이 되었다면 이제 준비는 다 갖춰진 것입니다. 알고 있으면 도움이 되는 내용은 지난 시간에 동영상을 참고하시면 될 것 같고요.
3부 · AI Agent로 홈페이지 만들기
32:07자, 이제 AI 에이전트를 이용해서 정적 홈페이지를 만들기. 이 방법을 같이 한번 사용해 보도록 하겠습니다. 여기에 보시면 여섯 개 프롬프트가 있습니다.
프롬프트 ① PLAN.md 만들기
32:18그 여섯 개 프롬프트를 가지고 저희가 실질적으로 이제 홈페이지를 만드는 과정을 살펴보도록 하겠습니다. 자, 첫 번째 이 프롬프트의 내용을 복사해서 여기 복사 버튼이 있으면 복사 버튼을 누르셔도 되고요. 아니면 전체를 선택해서 복사를 하신 후에 안티그래비티에서 일단 붙여 넣어 주시고 내용을 보시면 Gemini Gems 홈페이지 제작용 인터뷰 자료를 바탕으로 현재 폴더에 PLAN.md 파일을 만들어 줘.
32:47그리고 시프트를 누른 상태에서 엔터를 누르시면 이렇게 칸을 바꾸실 수 있고요. 여기에서 이 마크다운 아까 인터뷰를 했던 이 내용을 복사를 해서 여기에 붙여 넣어 줍니다. 자, 그리고 제출하기를 눌러 주시면 안티그래비티에서는 여기에서 이제 작업하는 내용을 보실 수 있고 이쪽에 파일이 생성이 되는 것을 보실 수 있습니다.
33:08자, 마찬가지로 클로드에서도 먼저 내용을 이렇게 붙여 놓고요. 아까 여기에 있었던 이 프롬프트를 위에 붙여 놓도록 하겠습니다. 자, 그리고 실행을 시켰습니다. 자, 여기에 안티그래비티는 이것을 실행을 할까요라고 하는 자, 제가 안티그래비티 같은 경우 제가 작업했던 다른 어, 프로젝트에 의해서 이렇게 위치가 지정이 되어 있는데 거기가 아니라 홈 A에 생성해 달라고 이렇게 요청을 했습니다.
33:39자, 클로드 같은 경우는 이 내용을 PLAN.md로 생성했다라고 이렇게 나오고요. 그리고 내용이 이렇게 쭉 나와 있는 것을 보실 수 있습니다. 참고로 여기 위에 클로드의 경우는 여기에 점점점을 눌러 보시면 파일이라고 하는 것이 있고요. 여기서 보시면 지금 현재 작업하는 폴더에 구성이 파일과 폴더들의 내용들을 보실 수 있습니다. 안티그래비티에서도 여기에 PLAN.md라고 하는 파일을 현재 만들어 놓았습니다.
프롬프트 ② Hugo와 테마로 홈페이지 구성
34:07자, 그럼 두 번째 이 내용을 복사를 해서 마찬가지로 집어넣고요. 자, 그런데 PLAN.md 파일의 내용을 바탕으로 Hugo 정적 홈페이지 생성기와 테마 이름 아까 저희가 이 테마 이름을 Hugo Blox라고 하는 템플릿을 사용하겠다라고 이렇게 얘기를 했는데 Hugo Blox 템플릿을 사용하여 현재 폴더에 홈페이지를 구성해 줘라고 하는 명령을 제출하겠고요.
34:34마찬가지로 클로드에서도 그 내용을 그대로 제출을 해 보겠습니다. 자, 이렇게 클로드가 허용 권한을 요청하는 그런 창이 나오는데요. 여기서 항상 허용을 눌러 주시고요. 또는 여기 밑에 보면 편집 자동 수락이라고 하는 것이 있는데 여기서 이것을 자동으로 눌러 놓으면 얘가 저에게 이렇게 질문을 하지 않고 계속이어서 작업을 하도록 시킬 수가 있습니다.
34:58자동 모드를 한번 활성화시켜 놓고 작업을 시키도록 하겠습니다. 자, 안티그래비티도 이렇게 이제 질문을 하는데요. 내용을 보면 GitHub에 있는 Hugo Blox 리포지토리에서 파일들을 가져다가 설치하겠다라고 하는 내용이고요. Yes → Submit 허락을 하면 작업을 진행을 하게 됩니다. 자, 참고로 저희가 그 AI 에이전트를 사용한다라고 하는 것은 뭐냐면 똑똑한 비서를 시켜서 이런 작업을 한다라고 하는 거거든요.
35:23자, Hugo Blox의 Hugo Blox 스타터라고 하는 GitHub 리포지토리를 또 실행을 한다라고 하는 거고요. 저희는 Hugo라고 하는 정적 홈페이지 생성기를 사용을 하고 그것을 예쁘게 꾸밀 수 있는 Hugo Blox라고 하는 그런 템플릿을 사용을 하는데 저희가 그것을 직접 다운로드를 받아서 설치를 하는 것이 아니라 에이전트에게 내가 Hugo라고 하는 것과 Hugo Blox라고 하는 테마를 사용하겠다라고 하는 것을 알려주면 얘가 그것을 검색해서 그 인터넷에서 또는 그 리포지토리에서 찾아서 다운로드를 받아서 직접 설치를 하는 그렇게 이렇게 작업을 직접 해 줄 수 있는 그런 기능을 가지고 있습니다.
AI Agent가 하는 일과 토큰 사용량
36:08저희가 보통 그 질문할 때 사용하는 AI 챗봇은 머리를 가지고 있지만 이렇게 뭘 다운받아서 직접 실행을 시키면서 작업을 할 수 있는 그런 기능을 가지고 있지 않거든요. 그래서 저희가 에이전트라고 하는 그런 기능을 가진 프로그램을 사용을 하는데 지금 현재 가장 유명한 것이이 클로드 코드입니다. 클로드 코드인데이 클로드 코드는 그 유료를 결제를 하는 사람만 사용할 수 있는 그런 기능이기 때문에 클로드 코드를 가지고서 작업을 하면 상당히 편하게 작업을 할 수 있고 내가 만약에 아직 유료 구독을 하기는 어려우신 분들은이 안티그래비티가이 에이전트 기능을 일부 제공을 해 줍니다.
36:47그래서 어느 정도 한까지 사용할 수 있기 때문에 그 무료 버전으로도 직접이 안티그래비티 IDE라고 하는 안티그래비티 에이전트를 사용해서 작업을 해 나갈 수 있는 겁니다. 그래서 안티그래비티는 이렇게 질문하는 것들이 있으면 지금 노드를 설치하고 그 버전을 확인을 하는데 작업들을 하고 있고요.
37:08계속해서 승인을 눌러 주시면이 작업이 가능합니다. 저희가 이번 시간에는이 에이전트만을 사용해서 제가 직접 무엇을 하지 않고 에이전트에게 명령을 해서 작업을 하도록 그렇게 시키고 있는데요. 자, 이것은 이제 중요한 것이 여기서 보시면 토큰을 지금 이만큼 사용하고 있다라고 하는 내용이 나오고 있습니다. 그래서 안티그래비티 같은 경우도이 작업을 하는데 토큰을 사용하는데 계속이 에이전트 기능만 무한정 사용할 수 있는 것이 아니기 때문에이 다음 시간에는 저희가 토큰의 사용을 좀 줄이고이 홈페이지를 작업할 수 있는 그런 방법도 같이 한번 살펴보도록 하겠습니다.
Implementation Plan 확인하고 의견 달기
37:43자, 안티그래비티가 지금 Implementation Plan이라고 하는 파일을 하나를 만들었다라고 이렇게 나와 있습니다. 그래서 이거를 클릭을 해 보시면 홈페이지 구축관 해 가지고 이렇게 내용이 쭉 나와 있습니다. 그래서 기존에 제공된 그 Hugo 팀의 위젯을 최대한 활용하여서 설계됩니다. 내용은 PLAN.md를 사용한다라고 나와 있고요.
38:06그리고 연락처 섹션에 들어갈 카카오톡 채널 및 오픈 프로필 링크 주소를 알고 계신다면 알려 주시기 바랍니다. 자, 이것은 뭐 나중에 작업을 해도 괜찮고요. 만약에 여기다 직접 내가 알고 있다라고 하는 것을 알려 주려면이 마우스를 가져다 댔을 때 나오는요 댓글창 여기에다가 클릭을 해서 내용을 입력하실 수 있습니다. 자, 그리고 그 Hugo Blox 템플릿을 초기화한 다음에 뭐 SEO를 설정하고 그리고 내용을 이렇게 디스크립션을 입력하고 뭐 소개, 메인 페이지 이런 식으로 구성을 하겠다라고 하는 그런 내용이고요.
38:42그래서 여기에서 만약에 내가 수정하기를 원하는 것이 있으시면 아까 보여 드렸던 것처럼 마우스를 가져다 대면 여기에 이렇게 댓글창이 나오니까 여기서 수정을 할 내용을 입력을 하시면 되겠습니다. 자, 여섯 가지 주요 섹션으로 이렇게 홈, 히어로 그 활동, 강연, 블로그, 문의가 있는데 예를 들어서 여기에서 2와 3을 하나로 합쳐죠.
39:04뭐 이런 식으로 해서 Add comment를 눌러 놨다고 하면 얘가 그것을 참고해서 작업을 하게 됩니다. 그래서 이것을 보시고 Proceed라고이 버튼을 눌러 주시면 작업을 이제 시작을 하게 됩니다. 자, 지금 클로드 같은 경우도 생성된 파일 여덟 개 그리고 명령 세 개이 내용을 이렇게 보시면 이런 파일들을 지금 만들고 있다라고 하는 것을 보실 수 있고요.
39:33지금 저자 프로필과 블로그 콘텐츠를 만들고 있는 중이라고 나와 있습니다. 자, 여기에서도 Accept this time → Submit 눌러 주시고요. 자, 그럼 이쪽에 이렇게 폴더를 만들고 여러 가지 파일을 만들어 놓은 것을 보실 수 있고요. 여기서 뭔가 파일이 수정이 되면 Accept All이라고 하는 버튼을 눌러서 수정된 파일을 저장을 해 주시면 되겠습니다. 자, 이렇게 시간이 좀 지나면 모든 것이 다 완료가 되어서 그 결과가 나오게 됩니다.
구축 완료 보고서
39:59안티그래비티의 IDE에서는 Walkthrough라고 해서 구축 완료 보고서를 이렇게 작성을 해 놓았고요. 그리고 클로드에서도 Hugo 0.164.0 버전을 사용해서 Hugo Blox 테마를 사용한 사이트를 구축했다라고 이렇게 보고서가 나와 있습니다. 이제이 다음에 세 번째 로컬 서버를 실행해서 홈페이지를 띄워 줘라고 하는 것을 명령을 내릴 건데요.
프롬프트 ③ 로컬 서버 실행
40:25자, 이것은 참고로 여기에 보면 실행 방법이라고 하는 이런 명령들이 있습니다. 그래서 클로드에서는 여기서 실행 버튼을 누르면 이것이 실행이 될 수 있고요. 안티그래비티에서도 터미널에서이 명령을 내리면 이웃 사이트요 홈페이지를 통해서 그 실제 로컬 서버를 실행해서 그 내용을 볼 수 있다라고 이렇게 안내하고 있습니다.
40:46자, 그런데 그냥 여기에다가 로컬 서버를 실행해서 홈페이지를 띄워 줘라고 명령을 에이전트하게 보내 보도록 하겠습니다. 자, 그러면 여기서 그 Hugo 서버를 실행을 하고요. 그리고이 localhost 1313번 이것을 실행하겠다라고 허용 승인을 지금 부탁을 하고 있습니다.
결과 확인 — Antigravity와 Claude 비교
41:10그래서 오픈 하게 되면 자 안티그래비티로 만든 웹사이트입니다. 자 그런데 여기에서 보시면 일단 사진도 얘가 알아서 만들어 놓은 거고요. 이름도 틀렸죠. AI 리서치 사이언티스트라고 이렇게 나와 있고요. 에듀케이션도 물론 잘못되어 있습니다. 지금요 내용은 그 PLAN.md에서 나왔던 그 내용과 동일할 것으로 생각을 하는데 어쨌든 이런 형태 자 바이오, 페이퍼, 톡, 뉴스 메뉴들은 이렇게 만들어져 있지만 아직 상태는 그렇게 별로 좋아 보이지가 않습니다.
41:45자, 마찬가지로 클로드에서도 동일한 명령을 내려보도록 하겠습니다. 지금 1313번이 여기서 지금 사용되고 있기 때문에 다른 방법으로 지금 띄울 것 같습니다. 다른 포트를 띄워서 지금 하겠다라고 이렇게 나와 있고요. 여기에 1314번으로 해서 이렇게 띄워진 것을 보실 수 있습니다. 자, 이렇게 열기 버튼이 나와 있고요.
42:07포트를 1314로 바꾼 이유는 이미 사용되고 있기 때문에 바꿨다라고 해서 내용이 나와 있습니다. 열기 버튼을 한번 눌러 보면은요. 지금 요쪽으로 이렇게 보인 거 같은데 여기에서 새로 열어 보도록 하겠습니다. 1314번 안티그래비티로 만든 사이트 그리고 클로드 만든 사이트입니다.
42:29자, 똑같은 테마를 사용을 했지만 에이전트의 그 기능에 따라서 약간 다른 형태의 그런 홈페이지를 만든 것을 보실 수 있습니다. 자, 그럼에도 불구하고 지금 폭이 늘어났을 때는 메뉴가 나와 있고요. 또 폭이 줄어들면 이렇게 햄버거 메뉴로 모바일 상태로 나오는 것을 보실 수 있고 다크 모드와 라이트 모드 이런 것을 구현해 준 것을 보실 수 있습니다.
42:53안티그래비티도 마찬가지로 모바일에서는 이렇게 메뉴로 햄버거 메뉴로 나오고 또 다크 모드, 라이트 모드 이런 식으로 구성되는 것을 보실 수 있습니다. 여기서 가장 중요한 것은 뭐냐면 어쨌든 기본 틀이 되는 홈페이지를 얘가 만들어 줬다라고 하는 것이 가장 중요한 부분입니다.
바이브 코딩으로 고쳐 나가기
43:14첫 번에 나오는 것이 내 마음에 딱 들지 않는다고 해서 실망할 필요가 없이 이제부터는 이것을 바이브 코딩을 통하여서 직접 수정해 달라고 요청하는 그런 작업들을 하실 수가 있습니다. 예를 들어서 안티그래비티에게 자 나의 이름은 박기현이야 첫 페이지의 내용을 PLAN.md 파일을 기준으로 정확하게 확인하고 구성해 줘라고 이렇게 명령을 내리면 PLAN.md 파일을 바탕으로이 index.md 첫 번째 페이지에 그 내용을 얘가 수정을 하게 됩니다.
43:43자, Accept All 누르게 되면 자, 메인 카피 자, 이런 부분을 수정을 했다라고 이렇게 얘기를 하는 거 같은데요. 한번 새로 고침을 해서 자, 여기에 보면 이름이 이렇게 나왔고요. 근데 이쪽은 아직도 고쳐 주지를 못했네요. 자, 사진을 제공을 해 주면 얘가 그것을 가지고서 수정을 할 수 있고요.
44:05만약에 사진이 당장 없다면 사진은 실루엣 회색 형태의 그림 파일로 수정해 줘라고 이렇게 명령을 내려 보겠습니다. 자, 그럼 얘가 이렇게 그림을 직접 만들어서 여기에 적용을 시켜 줄 거고요.
44:27자, 프로필 사진 교체, 사진 및 소개 내용 수정. 자, 이런 식으로 대화를 해 나가면서 얘와 함께 수정을 해 나가실 수 있습니다. 자, 서버를 리스타트하고 있고요. 자, 작업을 하는 동안 클로드가 만든 것을 한번 보도록 하겠습니다. 나름대로 깔끔하게 이렇게 만들어 줬고요. 자, 참고로 여기 최신글 블로그를 얘가 세 개를 임의로 만들어서 올려 놓았습니다.
44:51연락처. 어, 어떤 퀄리티로만 보면 사실 안티그래비티보다는 클로드가 좀 더 나은 것이 사실입니다. 그렇지만 어쨌든 저희는이 첫 페이지를 만들고 나서이 에이전트와 같이 대화하면서 그 내용들을 수정을 해 나가면 음, 좀 더 나은 퀄리티의 어, 홈페이지를 만드실 수 있을 거라고 봅니다.
프롬프트 ④ GitHub 업로드 환경 구성
45:12자, 그리고 일단 이렇게 만들어진 홈페이지를 웹상에 올려 보도록 하겠습니다. 지금 이것은 저희가 로컬 서버 여기 localhost라고 돼 있는 것은 로컬 서버 내 컴퓨터에서만 보여질 수 있는 거고요. 다른 사람들은 볼 수 없는 건데 이제 이것을 웹에 올려서 다른 사람들도 볼 수 있는 그런 사이트로 만들 수 있도록 그렇게 작업을 해 보도록 하겠습니다.
45:37자, 이때는 여기에 이제 내 리포지토리 주소 GitHub 리포지토리 주소가 필요하고요. 그래서 아까 만들었던 리포지토리. 자, 여기에 홈 C는 클로드 리포지토리니깐요. 이것을 복사를 해서 클로드에다가 붙여 놓고요 내용을 복사해서 붙입니다.
46:01그리고 엔터를 누르시면 작업을 하게 될 거고요. 그리고 안티그래비티에서도 마 리포지토리에 A요 주소를 복사해서이 리포지토리에 업로드 할 수 있도록 환경을 구성해 줘라고 하면 그러면 각자 또 이렇게 진행을 하고 있습니다. 자, 여기에서이 리포지토리에 접근할 수 있는 권한을 얘가 물어보게 될 거거든요.
46:22자, 여기에 지금 이게 나왔는데요.이 리포지토리에 업로드 할 수 있도록 깃 환경을 모두 완료했고요. 그리고 주소를 그 리포지토리 주소로 설정을 했고요. 그리고 커밋을 완료했다라고 하는 것은 아까 여기에 49개 변경한 사항들이 있었는데 그것을 다 패키징해서 업로드 할 수 있는 준비를 해 놨다라고 하는 겁니다.
GitHub 인증 ① 웹 브라우저 로그인
46:45자, 그리고 나서 이제 이게 업로드하는 명령어인데요. 기본적으로 맨 처음에 이것과 연결할 수 있는 권한을 인증을 해야 되는 그런 것이 있습니다. 그래서 아무나 내 리포지토리에 들어가서 변경을 하거나 수정을 하지 못하도록 하기 위한 거고요. 여기에서이 명령을 수행해 줘.
47:09자, 그러면 얘가 수행을 하게 되고요. 음, 터미널을 한번 사용을 해야 되겠군요. 자, 터미널은 여기에서 Terminal → New Terminal을 하게 되면 이렇게 명령을 직접 입력할 수 있는 그런 것이 나옵니다. 자, 여기서 복사를 해서 이게 지금 권한을 요청하는 그 내용이고요. 자, 그래서 붙여 넣게 한 다음에 엔터를 누르시면 어디에다가 할 거냐?
47:31GitHub를. 그래서 github.com 여기서는 그 화살표로 위아래 오르 내리면서 선택하실 수 있고 그냥 GitHub에서 엔터를 쳐 주시면 다음으로 넘어가고요. https로 할 건지 ssh로 할 건지 하는데 HTTPS로 선택을 하시면 되겠고요. 자, Login with a web browser 그리고 Paste an authentication token, 그 인증 토큰 입력하는 방법이 두 가지가 있는데 먼저 여기서 Login with a web browser를 한번 실행을 해 보겠습니다.
48:01자, 그러면 여기 있는 번호가 이렇게 나오는데요.요 번호를 복사를 해 놓으시고요. 그리고 여기에 팔로우 링크 클릭을 하시면 자, 이렇게 나오고요. Continue. 여기에 번호를 입력하는 것을 붙여 넣기 하게 되면 인증이 됩니다. 자, 그래서 권한을 부여를 하게 되고요.
48:23그리고 이메일로 인증하는 번호를 한 번 더 받으라고 그렇게 얘기를 하고 있습니다. 자, 그래서 자, Gmail에 들어가 보시면 이렇게 verification code라고 하는 것이 있는데이 번호를 복사해서 여기에 붙여 놓어 주시고 Verify 하면 연결이 완료가 됩니다. 자, 그러면 이렇게 진행이 되게 되고요. 그리고 이렇게 진행이 되면 아까 여기 홈 A라고 하는이 리포지토리에 들어가서 보시면 이렇게 파일들이 올라가 있는 것을 보실 수 있습니다.이 홈 C는 아직 파일이 올라가 있지 않기 때문에 요렇게 주소가 나와 있는 빈 리포지토리 형태가 나와 있는데 파일이 업로드가 되면 이렇게 여러 개 파일들이 GitHub 리포지토리에 올라가게 되고요.
GitHub 인증 ② Personal access token
49:06자, 클로드에서도 얘를 자, 워스 로그인 코드 복사를 하셔서 자, 요게 터미널인데요. 터미널 상태에서 gh auth login 하시면 아까 나왔던 것처럼 GitHub.com 그래서 GitHub 선택하시고 HTTPS 선택하시고 이번에는 그 인증 토큰을 가지고 사용하는 방법을 한번 보도록 하겠습니다.
49:34자, 인증 토큰은 여기에 GitHub에서 여기 오른쪽에 보면 아이콘 내비게이션 메뉴가 있는데 여기에 세팅에 들어가셔서 아래로 쭉 내리시면 Developer settings이라고 하는 것이 있습니다. 자, 그리고 여기에서 그 Personal access token이라고 하는 것이 있고요. 그중에서 Tokens (classic)을 클릭을 하시면 여기에서 토큰을 새로 만드실 수 있고요.
49:58그래서 클래식 클래식을 선택하시고 여기에서이 토큰을 사용할 이름을 지정을 해 주시면 되고요. 그래서 그냥 이렇게 똑같이 이름을 지정을 하겠습니다. 그리고이 토큰의 만료일 이것을 언제까지 할 건지 그래서 이것은 그냥 No expiration 해서 만기가 없도록 그렇게 하고요.
50:18그리고 repo 이것을 체크를 하시면 repo만 체크를 하시면 Generate token 자 그러면 이렇게 토큰이 나오게 되고요.이 이 토큰은 여기서 창을 닫으면 다음에는 다시 볼 수가 없습니다. 그렇기 때문에 그이 토큰은 반드시 저장을 해 놓으셔야 되고요. 자, 그래서 여기에서 토큰을 선택하시고 엔터를 누르면 토큰 값을 붙여 넣어라고 나와 있고요.
50:42여기서 붙여 넣기 해 주시고 엔터 누르시면 자, 이렇게 됩니다. 자, 그 상태에서 요것을 실행을 해 주시면 동일한 결과값들을 보실 수 있습니다. 자, 그렇게 하고 리포지토리에서 C를 실행을 시켜 보면 얘도 마찬가지로 이렇게 파일들이 들어와 있는 것을 보실 수 있습니다. 자, 그리고 그다음 작업은 현 프로젝트에 대한 제작 매뉴얼과 문제 보고서를 파일로 docs 폴더에 작성해 줘.
프롬프트 ⑤ 매뉴얼·오류 보고서 만들기
51:10작업이 진행될 때마다 자동으로 업데이트 되도록 해 줘.이 이 파일을 루트 폴더에 있는 README 파일과 링크를 연결해 줘라고 하는 내용을 집어넣어 보도록 하겠습니다. 자, 이것은 홈페이지를 직접 제작하는 것과는 상관이 없는 내용이지만 중요한 것은 저희가 홈페이지를 만들 때이 홈페이지가 어떤 과정을 통해서 만들어졌는지에 대한 내용들, 그리고 홈페이지를 만들다가 어떤 발생한 오류라든가 이런 것들이 있을 때 그런 것들을 문서로 저장을 하고 업데이트를 하는 그런 구조를 만들기 위해서 하는 것입니다.
51:48자, 그리고 여기에 보시면 모든 프로젝트에는 루트 폴더에 README라고 하는이 파일이 있는데요.이 파일과 연결을 해서 바로 그쪽으로 이동하면서 확인할 수 있도록 할 수 있 그렇게 지금 구조를 만들어 놨고요. 그리고 매번 수정을 할 때마다 여기에 업데이트를 해서 이것을 내가 직접 제작하지 않고 에이전트가 알아서 업데이트를 할 수 있도록 그렇게 구성을 하는 프롬프트입니다.
52:10자, 그럼 여기서 보시면 세 개의 파일 매뉴얼과 이슈, 그리고 README 파일을 수정하겠다라고 이렇게 나와 있고요. 자, 이렇게 되면 여기에 변경점이 세 개가 있다라고 표시가 돼 있습니다. 자, 그리고 홈페이지 제작에 다음 명령은 내 리포지토리에 푸시해 줘라고 하는 명령을 만들어 봤습니다.
프롬프트 ⑥ push — git add·commit·push
52:34여기서 푸시라고 하는 것은 아까 여기에 있던 이것은 지금 내 로컬에 있는 파일들이고요. 그리고 이곳은 내 리포지토리에 있는 파일들이죠. 자, 푸시라고 하는 것은 내 로컬에 있는 파일들 중에 변경된 파일들을 GitHub의 리포지토리로 업로드하는 것을 푸시라고 그렇게 얘기를 합니다.
52:54그래서 그 명령을 이렇게 해 주면 되고요. 그런데 이것을 여기에다 명령을 하지 않고 실질적으로 저희가 이 터미널 환경에서 이것을 하는 방법을 한번 설명을 드리도록 하겠습니다. 먼저 git add -A라고 하는 명령을 내립니다. 자, 이것은 마치 저희가 이삿짐을 싸는 거를 생각을 하시면 좋은데요. 애드라고 하는 것은 박스에다가 변경된 모든 사항들을 패키징하는 집어넣는 것이라고 생각을 하시면 됩니다.
53:23자, 그리고 나서 모든 변경 사항을 이 패키지에다 집어넣었다면 저희가 그다음에 해야 되는 것은 커밋을 하는 건데요. 커밋은 쉽게 얘기해서 이 뒤에 큰따옴표 안에 있는 내용으로 레이블을 박스에다 붙이라고 하는 뜻입니다. 자, 그래서 여기에 매뉴얼 및 오류 보고서 생성이라고 그렇게 집어넣어 주시면 지금 레이블을 붙여서 지금 이제 발송할 준비가 돼 있는 상태입니다.
53:50자, 그럼 여기에 숫자는 없어졌고요. 자, 그 상태에서 git push라고 하는 명령을 내리게 되면 그러면 얘가 이제 그 파일들을 업로드를 하게 되고요. 여기에 들어가서 새로 고침을 해 보시면 docs 폴더가 새로 만들어졌고요. 매뉴얼 및 오류 보고서 생성이라고 하는 레이블이 붙어 있고요. 이 안에 두 개의 파일이 이렇게 만들어져 있는 것을 보실 수 있습니다.
만들어진 문서 살펴보기
54:14그래서 그 내용을 간단하게 보면 프로젝트 개요 개발 환경은 Hugo라고 하는 것을 사용을 했고요. 그리고 필수 도구가 Node.js npm Hugo라고 하는 이런 것들. 그다음에 특별히 이 Hugo는 extended 버전이라고 이게 그 Hugo를 좀 더 확장 버전인데 어떤 것들은 이것이 없으면 작동을 안 하는 그런 경우들이 있습니다.
54:35자, 그리고 주요 폴더 구조가 있고요. 커스텀 가이드 그리고 또 이슈 보고서에는 컨택트 블록 렌더링 오류 여기에서 어떤 렌더링의 문제가 있었던 거 같고요. 그리고 처음에 한번 인증을 안 하고 푸시를 했을 때 그 인증 실패했던 그런 것들이 있었습니다. 자, 마찬가지로 여기서 매뉴얼과 보고서 C에서도 홈페이지 C에서도 이것을 지금 작성을 하고 있고요.
55:03클로드는 음, 가장 먼저 CLAUDE.md라고 하는 파일을 만들고 그리고 작업을 하는데요. 이 CLAUDE.md라고 하는 것이 설정 사항을 저장하는 그런 문서라고 보시면 되겠습니다. 그래서 가장 먼저 참고하는 그런 문서라고 생각을 해 보시면 되겠습니다. 좀 클로드가 작업을 할 때 좀 꼼꼼하게 하는 그런 특성이 좀 있는 거 같아요.
55:28문제 보고서 그리고 갱신 규칙 뭐 이런 것들 다 만들어 놓고요. 이렇게 보고를 하고 있습니다. 커밋이 세 개가 쌓였습니다. 푸시는 여전히 권한 문제로 막혀 있습니다라고 나와 있네요. 자, 그럼 얘도 여기에서 한번 해 볼까요? git add -A git commit -m 매뉴얼 및 오류 보고서 특성 그리고 git push 자 그러면 얘도 다 업로드를 했다라고 이렇게 나와 있고요.
55:58마찬가지로 여기서 가서 한번 보시면 C에 docs라고 폴더를 만들어서 이렇게 매뉴얼 여기서는 좀 더 자세하게 나와 있네요. Hugo extended 버전을 사용을 했고 Hugo Blox라고 하는 테마를 사용했고 스타일은 Tailwind CSS라고 하는 것을 사용을 했고요. 서체는 Noto Serif KR Noto Sans KR 그래서 제목과 본문을 제목은 명조 본문은 고딕체 형태로 썼고 그리고 배포는 GitHub를 사용해서 배포한다라고 이렇게 나와 있습니다.
56:29그리고 여기서 고라고 하는 것은 구글에서 만든 프로그래밍 언어인데요. 이 Hugo가 이 고라고 하는 언어로 만들어진 그런 프로그램입니다. 그래서 설치를 어떻게 했는지 아주 자세하게 이렇게 구성이 돼 있는 것을 보실 수 있고요. 폴더 구조 그리고 홈페이지 내용. 지금 제가 이것을 하느라고 사용한 버전이 Opus 5이기 때문에 아마 훨씬 더 좀 정교한 그런 작업들을 해 놓은 것을 보실 수 있습니다.
56:59자, 그리고 오류 보고서도 한번 보면 한글 웹폰트 전혀 로딩되지 않은 메인 문구가 없음, 모니섹션 영어 문구가 섞여서 나오고 이런 것들 그런 오류들을 다 이렇게 표시하고 있는 것을 보실 수 있고요. 이것이 저희가 작업을 하다 보면 계속해서 이제 업데이트가 되는 것을 또 보실 수 있을 겁니다.
4부 · Cloudflare 배포와 디자인 개선
57:22지난번에 그 개요에서 살펴봤던 것처럼 이 GitHub는 단순히 파일의 저장소입니다.
57:29그리고 저희가 이것을 실질적으로 Cloudflare라고 하는 사이트에 Pages라고 하는 그 기능을 사용해서 웹에 개시를 하려고 하고 있고요. 자, 그래서 Cloudflare에서 웹에 개시하는 그런 방법을 보여 드리도록 하겠습니다. 자, 먼저 Cloudflare 사이트에 로그인을 해 주시고요. 여기서는 그냥 구글로 로그인을 하시는 것이 가장 편합니다.
Cloudflare 대시보드와 리포지토리 연결
57:53네, 여기서 계정을 선택을 해 주시고요. 자, 이렇게 Cloudflare 대시보드 상태로 이렇게 들어오게 됩니다. 자, 그러면 여기에서 왼쪽에 Build / Compute 클릭하시고 자, Workers & Pages를 선택을 하시면 이렇게 화면이 나와 있습니다. 자, 여기서 Create application. 그리고 이 윗부분을 지나서 여기 밑에 Pages라고 하는 것에 Get started를 클릭하시고요.
58:15그리고 저희가 하려고 하는 것이 GitHub에 그 깃 리포지토리를 불러오는 거니까 위에 있는 이 Get started를 선택하시고 GitHub 어카운트 지금 다른 것이 제가 연결이 돼 있는데요. Add account 해서 여기에 아까 저희가 올라왔던요 홈 A, C가 있는 그 계정 Only select repositories를 선택을 하고요.
58:44Select repositories. 그리고 나서 일단 A를 먼저 선택을 하겠습니다. A를 선택하고 그리고 Authorize 해 주시면 자, 요렇게 화면이 나오는데요. 여기에서 몇 가지 지정을 해야 될 것들이 있습니다. 자, 일단 JIWU라고 하는 제 GitHub 그 계정이 연결이 돼 있고요. 그리고 지금 여기에 홈 A라고 하는 것이 있습니다.
빌드 설정 — 프레임워크·명령·HUGO_VERSION
59:06그래서 홈 A를 체크를 해 주시면 그리고 Begin setup. 자, 그러면 홈 A에 main 브랜치가 선택이 돼 있고요. 그리고 프레임워크는 여기에서 Hugo 저희가 Hugo로 홈페이지를 만드는 거기 때문에 Hugo를 선택을 해 주시고요. 그리고 커맨드는 hugo --gc --minify 자 요것은 그대로 써 주셔야 됩니다. 내용을 써 주시고요.
59:32그리고 밑에 환경 설정 여기에서 어 환경 변수를 설정을 하는데요. 변수를 변수의 이름이 HUGO_VERSION. 그리고 여기에서 한 가지를 먼저 검사를 해야 될 것이 있는데 자 여기에 보시면 터미널에서 hugo version이라고 이렇게 명령을 내리면 여기에 Hugo 버전이 어떻게 돼 있는지가 나옵니다.
59:52그래서 0.164.0 이것이 지금 버전인데요. 0.164.0 이것을 넣어 주시고 Save and Deploy. 자, 그럼 여기서 얘가 체크를 쭉 하게 됩니다. 자, 이렇게 에러가 생기면 뭔가 문제가 있는 거고요. 만약에 문제가 있을 때는 여기서 Copy log를 눌러서 여기에다가 자, Cloudflare Pages 서비스에 내 리포지토리를 등록하려고 하는데 아래와 같은 에러가 나 확인해 줘라고 해서 그 에러 메시지를 붙여 놓아 주면 빌드 과정에서 발생한 에러입니다.
빌드 에러 해결하기
1:00:27본인 Cloudflare 환경은 빌드시 기본적으로 pnpm을 사용하여 패키지를 설치하는데 package.json의 명시된 버전과 이 파일에 고정된 버전이 서로 맞지 않아 충돌을 일으켰다라고 그렇게 얘기를 하네요. 자, 그래서 다음 단계 터미널에서 다시 한번 코드를 푸시해 주세요.
1:00:48그래서 이거를 복사를 해서 터미널에서 붙여 놓고 실행을 누르면 자, 이렇게 돼 있고요. 자, 그 상태에서 다시 Change settings 해서 한 번 더 Save and Deploy. 자, 그러면 네. 자, 이렇게 넘어가게 되면 이렇게 해서 여기에 자, 이렇게 주소가 나오게 됩니다. 일단 한번 실행을 해 보시고요. 어, 자, 그러면 이렇게 이것은 지금 내 로컬에서 뜨는 것이 아니라 웹에서 뜨고 있는 그런 상황입니다.
두 번째 사이트 배포
1:01:14즉 홈페이지가 개시가 된 거고요. 자, 이것은 나중에 또 수정을 해서 하는 작업을 해 보도록 하겠습니다. 자, 마찬가지로 여기에서도 자, Cloudflare에서 다시 한번 Workers & Pages 홈 A가 있는데요. 새로 하나를 또 만들도록 하겠습니다. 아래 있는 페이지에 Get started 그리고 깃 리포지토리를 불러오는 것을 하고요.
1:01:35여기에서 계정을 아래에 보시면 여기에 지금 C가 있으니까 C를 클릭을 해 주시고 세이브. 자, 그러면 여기에서 JIWU가 계정으로 나오고요. 홈 C를 선택을 해서 비인 방법은 똑같습니다. Hugo를 선택을 하시고 hugo --gc --minify 그리고 public 그리고 변수를 HUGO_VERSION 0.164.0 똑같이 실행을 했으니까 요거 맞을 거고요.
1:02:08그리고 Save and Deploy. 자, 클로드는 아까 그 패키지 문제 없이 그대로 잘 진행이 되는 것을 보실 수 있습니다. 자, 그럼 여기도 이렇게 주소가 나오고요. 주소를 클릭을 해 보시면 자, 이렇게 에러 메시지가 나오게 되면 자, 좀 기다렸다가 새로 고침을 해 보시면 이렇게 홈페이지가 뜨게 되는데요. 지금 여기에서는 이렇게 모양이 갖춰져서 떴는데 여기서는 이렇게 이상하게 글씨만 나오고 만약에 그림이 제대로 안 나온다고 하면 여기에 이 주소를 집어넣고 Cloudflare Pages에서 그 이 도메인을 받았는데 설정을 수정해 달라고 그렇게 요청을 하시면 됩니다.
baseURL 문제와 재배포
1:02:47자, 참고로 여기에 설정에는 baseURL이라고 하는 그런 설정이 있습니다. 그래서 그 설정을 수정해 달라고 이렇게 요청을 하시면 자 이렇게 baseURL를 수정해 달라고 이렇게 요청을 했더니 클로드가 404 에러가 있는데 그 원인을 baseURL이라고 지정을 했고요. 그러는 가운데에서 헤더 파일에 깨져 있는 것이 발견이 돼서 그것도 함께 수정을 해 준 것을 보실 수 있습니다.
1:03:12로컬 수정만으로는 사이트가 고쳐지지 않는다라고 이렇게 나와 있고요. 자, 그래서 이것을 또 다시 한번 GitHub의 커밋과 푸시를 해야 되는데요. 이번에는 명령을 그 터미널이 아니라 그냥 명령으로 한번 해 보도록 하겠습니다. 자, 커밋 푸시를 해 줘라고 이렇게 명령을 내리게 되면 아까 여기서 했던 3단계 git add, git commit, 그리고 git push 이 3단계를 얘가 권한을 확인한 후에 이렇게 푸시까지 해 주는 것을 보게 됩니다. 이 정적 홈페이지는 로컬에서 수정을 하고 그것을 GitHub의 저장소에다 올려 놓고 그리고 Cloudflare에서 이것을 디플로이 개시를 하는 거기 때문에 변경되는데 약간의 시간이 필요합니다.
1:03:57그래서 어 푸시를 한 다음에 한 1, 2분 정도 지난 후에 새로 고침을 해 보면 그러면 변경된 사항들을 보실 수가 있습니다. 자, 이렇게 변경된 사항들을 이제 이것은 이것도 마찬가지로 웹에서 직접 볼 수 있는 겁니다. 자, 이렇게 하면 홈페이지가 웹에 개시가 되게 되는 거고요.
도메인 연결과 디자인 개선 툴
1:04:17그리고 만약에 원하시면 여러분이 그 도메인을 구매를 해서 이 사이트를 그 도메인과 연결을 하면 어, 진짜로 그 여러분의 도메인으로 홈페이지를 서비스를 하실 수 있게 되겠습니다. 자, 여기에서 이제 한 가지만 더 해보도록 하겠습니다. 매뉴얼 하단에 보면 디자인에 도움을 받을 수 있는 툴을 소개하는 그런 코너가 있는데요.
getdesign.md로 디자인 바꾸기
1:04:37자, 첫 번째는 getdesign.md라고 하는 사이트를 활용하는 방법입니다. getdesign.md라고 하는 사이트를 한번 방문을 해 보도록 하겠습니다. 자, 이 사이트에는 약 70여 개의 유명한 웹사이트들의 샘플이 그 설정들이 들어가 있습니다. 그래서 이 중에서 하나를 고르시면 자, 예를 들어서 테슬라 사이트를 이렇게 선택을 하시면 여기에 다운로드.md라고 하는 파일이 있습니다.
1:05:08이것을 다운로드 받을 수 있는데요. 이것을 누르셔서 자, 그럼 다운로드가 됐고요. 다운로드 받은 요 파일을 design-tesla.md라고 하는 파일을 여기에 이렇게 드래그를 했습니다. 자, 그럼 design-tesla.md라고 하는 파일이 올라갔고요. 홈 A에 지금 집어넣습니다. 자, 그리고 이 이름을 복사를 해서 여기에 design-tesla.md 파일을 사용해서 내 홈페이지 디자인을 개선해 줘라고 이렇게 명령을 내려 보겠습니다.
1:05:38참고로 지금 현재 홈페이지는 이런 모양으로 구성이 돼 있고요. 자, 이 명령을 내리게 되면 참고로 테슬라 사이트에 들어가서 보시면 테슬라 사이트는 이런 식으로 구성이 돼 있습니다. 자, 이런 디자인 컨셉을 가지고서 지금 수정을 하고 있는데요. 여기에 또 Implementation Plan이라고 해서 테슬라 스타일 홈페이지 리디자인 구현 계획 해서 이렇게 쭉 또 나와 있습니다.
1:06:05자, 그래서 여기에서 Proceed 또는 여기 Proceed를 눌러 주시면 여기에 메인 화면을 가득 채울 시네마틱 배경 이미지를 생성하여 배치합니다라고 나와 있고요. 첫 번째 섹션 히어로 배너와 같이 그 첫 화면에 가장 위에 있는 이것을 히어로 섹션이라고 이렇게 얘기를 하는데요. 히어로 섹션에 대한 그런 아이디어들 뭐 이런 것들을 지금 했습니다.
1:06:30자, 그래서 Accept를 눌러 주시면 그것에 맞춰서 지금 파일들을 수정을 해 나가고 있는 것을 보실 수 있고요. 자, 이렇게 Walkthrough 완료 보고서를 작성을 했습니다. 요 배너를 만들었고요. 자, 그래서 여기에 변경된 사항들이 있으니까 커밋하고 푸시해 줘. 자, 그러면 여기에 내용들을 업데이트를 하게 되고요. 그리고 자, 푸시 권한 인증 오류가 발생했다고 나와 있네요.
1:06:55여기 토큰 인증이 필요하거나 현재 터미널 환경에서 인증 정보가 캐시되어 있지 않기 때문입니다라고 나와 있습니다. 자, 그러면 여기에서 git push를 한번 실행을 해 주시면 아까 여기 터미널에서 로그인을 해 가지고 여기에 정보가 안 들어가 있었는지도 모르겠네요. 자, 새로고침을 한번 해 보시면 자, 이런 식으로 변경된 모습을 보실 수가 있습니다. 마찬가지로 여기에서 다른 사이트들의 그 디자인 컨셉을 가지고도 수정을 하실 수 있고요.
1:07:25예를 들어서 애플 자, 이렇게 다운로드가 됐다면 얘도 마찬가지로 이렇게 집어 놓으시고 디자인.md 파일을 참고해서 디자인을 수정해 줘라고 하면 마찬가지로 또다시 수정을 하게 될 겁니다. 그래서 여러분이 원하시는 그런이 디자인을 여기서 다운로드 받아서 그것을 가지고서 나의 홈페이지를 개선을 하실 수도 있고요. 또 슬롭이라고 하는 것이 있습니다.
AI 슬롭과 개선 스킬 — Hallmark·taste skill
1:07:47홈페이지를 만드는 방법을 에이전트들이 학습을 할 때 뭐 비슷한 것을 가지고서 계속 학습을 하다 보니까 AI가 만든 것들이 디자인들이 비슷비슷하게 이렇게 만들어진다라고 하는 거죠. 그래서 그런이 슬롭을 개선하기 위한 그런 서비스들이 있습니다.
1:08:09자, 여기 보시면 그중에 Hallmark라고 하는 것이 있고 그리고 taste skill이라고 하는 것이 있는데요. 이것은 GitHub 리포지토리들입니다. 즉 다시 말해서 누군가가 저희가 이 GitHub에 올렸던 것처럼 이것을 올리고 공개를 해서 사용할 수 있도록 하는 거죠. 자, 그래서 이것을 복사해서 클로드에게 GitHub 리포지토리 중 이 taste skill에 그 스킬을 사용해서 내 홈페이지에 디자인을 개선해 달라고 이렇게 요청을 해 보겠습니다.
1:08:37자, 여기선 애플식으로 바꾼다라고 하는 것을 진행을 시켰고요. 어, 제가 철자를 조금 잘못 썼나 보네요. 아이자가 더 들어갔군요. 똑똑한 에이전트라서 그 실제 저장소를 찾아서 내용을 검증한 후에 사용을 하겠다고 이렇게 얘기를 하고 있습니다. 자, 여기 위에는 Accept All 눌러 주시고요.
1:08:59그러면 이렇게 다시 또 변경된 파일들이 생기고 있고요. 자, 과한 연출 금지를 지시합니다. 자, 여긴 다 수정이 됐고요. 참고로 여기에서 그 클로드로 만든 것이 좀 더 글씨가 정돈된 것처럼 보이게 되는데요. 그리고 안티그래비티에서 만들었던 것은 글씨가 조금 규모가 좀 없이 이렇게 좀 어수선한 그런 느낌을 지금 받고 있습니다.
폰트와 글자 크기 다듬기
1:09:21자, 그래서 여기에다가 한 가지를 좀 더 넣어 보도록 하겠습니다. 일단 먼저 애플 스타일로 바뀐 것이 어떻게 되는지 한번 보도록 하죠. git add -A, 기 그리고 git push. 새로 고침을 하면 이렇게 수정이 된 것을 보실 수 있습니다. 디자인 조금 어색하긴 하네요.
1:09:44자, 메뉴가 아직 작동을 안 하고 있고요. 자, 폰트를 Noto Serif KR 제목 명조체고요. 그리고 Noto Sans KR 고딕체를 사용해 달라고 이렇게 얘기를 했고요. 글자 크기가 너무 큰 거 같아서 약간 좀 줄여 달라고 그렇게 얘기를 했고요. 또 현재 메뉴가 제대로 작동하지 않는데 확인해 달라고 그렇게 요청을 했습니다.
1:10:06종을 완료했다고 나와 있고요. 자, git add -A git commit -m "…" git push. 자, 새로 고침을 해 보시면 이렇게 글씨를 제목은 명조체 그리고 내용은 고딕체로 이렇게 수정을 해 놓았습니다. 글자 크기는 좀 마음에 안 드는데 어쨌든 이런 형식으로 수정이 가능하다라고 하는 것을 보여 드렸고요.
1:10:28메뉴도 아까 여러 개가 있었는데 단순하게 이렇게 해서 제대로 작동할 수 있도록 그렇게 구성이 되어 있습니다. 자, 이렇게 하나하나 보면서 내 마음에 안 드는 거, 그리고 내가 구현하고 싶은 것들을 요청을 하면서 수정을 해 나가시면 되겠습니다. 자, 지금 여기에서도 taste skill이라고 하는 것을 사용해서 개선해 달라고 그렇게 요청을 했는데 그 taste skill 중에서는 감사를 하는 그런 기능이 있습니다.
taste skill의 감사(audit) 기능
1:10:49그래서 거기에서 일단 디자인 리드를 사역 교육, 개인 브랜딩 그리고 목회자, 선교사, 따뜻한 정갈 에디토리얼 언어 뭐 이런 것들을 설정을 했고요. 그리고 스킬 자체가 과한 연출 금지를 지시합니다. 그래서 그거를 바탕으로 이 사이트를 감사를 하고 그리고 그 내용들 중에서 무조건 적용하는 것이 아니라 여기서 보면 오히려 나빠지는 것들은 적용하지 않고 그렇게 해서 여러 가지 작업을 해 놓았습니다.
1:11:25그래서 여기 결과 발견한 거 조치한 거 뭐 또 오류가 좀 있었던 거 같아요. 그런 것들도 얘가 수정을 해서 업데이트를 했고요. 그리고 3단 카드 해체하는 거, 배경 이미지. 글래스모피즘 패럴랙스 스크롤 관성이 스킬 자체 기준을 초과했다라고 나와 있고요. 폰트를 교체를 했네요. 한글 글리프가 없습니다.
1:11:48자, 그래서 결과 푸시 완료 문서도 이렇게 업데이트했다라고 이렇게 나와 있고요. 자, 들어가서 한번 확인을 해 보시면 자, 이런 툴들을 사용해서 홈페이지 디자인을 개선할 수 있는 그런 방법도 있습니다. 참고하시고요. 한 번씩 시도를 해 보셨으면 좋겠습니다. 자, 오늘은 여기서 마치도록 하겠습니다. 감사합니다.