Full transcript
0:00AI가 나오면서 이제 컴퓨터를 정말
0:02못 하시는 분도, 나이 드신 분도
0:04누구나 홈페이지를 직접 만들 수
0:06있습니다. 한 글만 알면 돼요. 원래
0:09홈페이지 하나 만들려면 이런 복잡한
0:11코딩을 할 줄 알아야 됐거든요.
0:12이제는 AI에게 말로만 설명하면
0:15코딩은 AI가 알아서 해 줍니다.
0:17여러 AI 중에서도 클로드는 바이브
0:19코딩 능력이 뛰어나다고 평가받고
0:21있는데 오늘은 클로드를 이용해서 제
0:24개인 홈페이지를 처음부터 직접 만들어
0:26보고 다른 사람도 접속할 수 있도록
0:29인터넷에 배복까지 해 보도록
0:31하겠습니다. 혹시 클로드가 처음이신
0:33분들은 제가 지난주에 올린 클로드
0:35기본 사용법 영상을 먼저 보고 오시면
0:38훨씬 쉽게 따라오실 수 있습니다.
0:40홈페이지를 만들 때 프롬프트 창에
0:43이렇게 간단하게 회사 소개 홈페이지
0:45만들어 줘라고 하면 만들어 줍니다.
0:48하지만 오늘은 클로드의 아르티팩트
0:50기능을 이용해서 홈페이지를 만들어
0:52보도록 하겠습니다. 아티팩트는 왼쪽
0:55메뉴에 아티팩트 메뉴가 보이는데 혹시
0:59안 보이시는 분들은
1:01왼쪽 하단에 프로필을 선택하고요.
1:07설정에 들어가서
1:09기능에 들어가시면 여기 시각 자료의
1:11아티팩트와
1:13인라인 시각화가 활성화되어 있는지
1:16확인해 보시면 좋겠습니다. 대부분
1:18활성화되어 있을 거예요. 자, 그러면
1:21아티팩트를 한번 들어가 볼게요.
1:23클로드의 아티팩트 기능은 클로드가
1:25만든 웹사이트, 문서, 코드 같은
1:28결과물을 화면에서 바로 확인하고
1:30수정할 수 있는 기능입니다. 이전에
1:33아티팩트 사용하셨던 분들은 아티팩트로
1:35만들었던 결과물들을 리스트로 볼 수
1:36있습니다. 새 아티팩트 클릭하면 여러
1:41카테고리가 나옵니다. 근데 클로드
1:43유료 버전 사용하시는 분들은
1:45아르티팩트 버튼을 클릭해도 요리에
1:47나오지 않더라고요. 저희는이 중에서
1:49웹밋 및 웹사이트를 만들 거잖아요.
1:52예. 이것을 선택해 볼게요. 저는
1:55이렇게 간단하게 입력해 볼게요. 나는
1:57누나티 유튜브 채널 운영하고 있는
2:00IT 강사면서 유튜버야. 나를
2:02소개하는 웹사이트 만들어 줘. 전송해
2:04볼까요? 그러면 이런 가이드가 나올
2:07수 있습니다. 여기서 마음에 드는
2:11어떤 가이드가 있다면 선택하시면
2:13돼요. 만약에 마음에 드는게 없다면
2:15건너뛰기 누르시면 됩니다.
2:18그러면 이런 기회관을 만들어 줬어요.
2:22클로드를 처음 사용하시는 분들은
2:25여러분들에 대한 데이터가 없기 때문에
2:28여러분과 관련 없는 내용들이 있을 수
2:30있는데 저 같은 경우는 클로드를 자주
2:32이용하기 때문에 제가 어떤 스타일인지
2:34알아서 이렇게 그에 맞는 기회관을
2:37만들어 줬네요. 만약에 이것이 마음에
2:40안 든다면 여러분들이 직접 쓰셔도
2:42되는 거죠. 이렇게 한번 써
2:43보겠습니다. 샵을 통해서 이제 제목을
2:45썼죠. 홈페이지 이름은 누나이고 소개
2:48문구는 누구나는 나무 모르는 아이를
2:50쉽게 알려 드립니다. 그리고 유튜브
2:53주소 여기다 입력했고요. 혹시
2:55여러분들이 가지고 있는 SNS 주소가
2:57있다면 입력하시면 되겠고 혹시
2:59없으시면 이거는 지우셔도 되는 거죠.
3:02그리고 어떤 소개를 할 거냐면 저는
3:04세 개를 소개할 건데 제 채널은 AI
3:08활용법과 실무, IT팁과 유튜브
3:12운영법이 세 가지를 소개하고 있죠.
3:14그리고 대표 영상이이 링크 주소로
3:17나왔으면 좋겠고 최근에 출관한 도서
3:20소개했으면 좋겠어요. 그래서 누구나는
3:22나 모르는 클로드 누구나는 나 모르는
3:24재미나이이 두 책을 소개했고요. 강의
3:27문의할 때 여러분 핸폰 주소를 쓰셔도
3:29좋겠습니다. 전속 눌러 볼게요. 자,
3:31그랬더니 이런 홈페이지가 오른쪽에
3:34만들어졌습니다. 아티팩트를 이용하면
3:36이렇게 오른쪽에 수정되는 내용을 볼
3:38수 있는게 특징이죠. 근데이 디자인과
3:40스타일이 마음에 안 둘 수 있어요.
3:42그럴 때는 어떤 스타일로 바꿔 줘라고
3:45할 수 있는 거죠. 뭐 예를 들어서
3:46미니멀하고 신뢰감에 있는 느낌으로
3:49전송 해도 되겠죠. 아니면 그 외에
3:52화려하고 에너지 넘치는 느낌으로
3:54아니면 뭐 따뜻하고 손씨 느낌으로
3:56이렇게 한 다음 전송 눌러도 되겠죠.
3:58하지만 이런 문구를 쓰기가
4:01초보자분들한테는 쉽지 않습니다.
4:03그래서 초보자분들한테 가장 쉽게
4:07스타일을 바꿀 수 있는 방법은
4:08여러분들이 좋아하는 홈페이지 주소를
4:11복사하는 거예요. 토스가 있고 애플이
4:13있고 뭐 우아한 형제들 홈페이지가
4:15있고 여기는 월드비드 홈페이지가
4:17있습니다.이 중에서 여러분들이
4:20좋아하는 스타일 주소를 복사하는
4:22거예요. 저는 애플 스타일이 주소를
4:24복사한 다음에
4:27이렇게 부탁을 해 볼게요.이 사이트
4:30스타일로 수정해 줘.라고 하면이
4:32사이트를 분석해서 그와 비슷한
4:35디자인을 만들어 줍니다. 조금
4:37기다리니까. 네. 이런 스타일을
4:39만들어 줬어요.
4:41느낌이 애플 스타일 같나요? 괜찮은
4:44거 같아요. 깔끔하게 만들어 줬네요.
4:47근데이 이미지가 들어가 있지
4:49않잖아요. 그리고 저는이 책 그림이
4:53여기에도 나왔으면 좋을 거 같아요.
4:55네. 그럴 때 이미지를 첨부하는
4:57거죠. 플러스 버튼 누른 다음에 파일
5:00또는 사진 추가 눌러서 소스에 있는네
5:04장의 사진을 이렇게 추가해 보도록
5:07하겠습니다. 책 사진 두 가지가
5:08있고요. 그리고 프로필 사진 있고
5:10썸네일 사진 있죠? 그래서이네 가지
5:13사진을
5:14다 선택한 다음에 열기 눌러
5:17보겠습니다. 첨부됐죠? 그리고 이렇게
5:19입력해 보겠습니다. 소개에 첨부한
5:22프로필 사진 넣어 주고 대표 영상에
5:25첨부한 유튜브 영상 썸네일 넣어주고
5:27링크도 넣어 줘. 이와 같이. 그리고
5:30AI 베스트 셀러 도수 집필에
5:34여기 있죠. AI 베스트 셀러 도수
5:36집필. 각각 누구나는 나모르는 클로드
5:39책 표지. 누구나는 나음 모은 재미나
5:41책 표지를 넣어 줘라고 해
5:43보겠습니다. 전송. 네. 이렇게
5:47이미지가 첨부가 됐고
5:52썸네일도 추가가 됐네요. 플레이
5:54누르면 영상이 재생되겠죠. 그리고
5:56여기도 마찬가지죠. 이렇게 만든
5:59홈페이지가 스마트폰에서 어떻게
6:01나오는지 카톡으로 공유해 볼게요.
6:03오른쪽에 점점점 두 가지가 있는데
6:05산출물 개시 선택해 보겠습니다.
6:07그리고 게시 및 링크 복사를 선택한
6:10다음에요 링크가 자동으로 생겼죠.이
6:12이 링크수를 복사한 다음 카톡으로
6:16공유를 하면 카톡에서 접속해
6:19보겠습니다.
6:21네. 모바일에서도 이렇게 예쁘게 잘
6:23나오잖아요. 근데 이제 문제가
6:25있어요. 한번 보세요. 클로드 링크로
6:27공유한 것들은 누구나 다이 홈페이지를
6:31클로드가 만든지 알아요. 어떻게
6:32알죠? 상단 하단에이 클로드 틀이
6:35나오잖아요. 클로드 무료 버전으로
6:38사용했던 분들은 링크가 안 걸릴 수도
6:40있습니다. 이렇게 해서 링크 열기를
6:44터치해야 링크가 걸릴 수도 있어요.
6:46이렇게
6:49영상도 재생이 돼야 되는데
6:51링크가 이렇게 다시 나오죠. 근데 전
6:55똑같은 프롬프트로 클로드 유료
6:58버전으로 만들었어요. 이거는 링크가
7:01잘 됩니다. 링크가 유튜브 나오고
7:04강의 문의할 때 하단으로 연결되고
7:07그다음에 영상도 재생이 되죠. 근데
7:10유료 버전이나 무료 버전이나 상단에
7:13이렇게 틀이 나온다는게 문제인 거죠.
7:16그러면 이것을 한번 해결해 보도록
7:18하겠습니다. 제가 클로드 무료
7:20버전으로 홈페이지를 만들어 보니까 두
7:22가지 아쉬운 점이 있었는데 첫 번째는
7:24조금만 사용해도 한도가 도달해요.
7:27하단에 링크를 추가하려고 프롬프트로
7:29입력했더니 사용량이 초과되었다고
7:31나오고 다시 후에 다시 하라고
7:33메시지가 나오네요. 두 번째는 간혹
7:36이렇게 프롬프트로 이미지를 첨부할 때
7:39이미지 삽입이 안 될 수 있습니다.
7:42아까는 이렇게 되는데요. 홈페이지를
7:44제대로 만들고 싶다면 클로드 프로
7:47유료 버전으로 테스트해 보시면
7:49좋겠습니다. 클로드에서 만든이
7:51홈페이지를 공유할 때 두 가지 방법이
7:53있는데 오른쪽에 점점점 누른 다음에
7:56아까 산출물 개시했잖아요. 이렇게는
7:59쉽게 카톡으로 또 다른 곳에 이렇게
8:02공유할 수 있는데 문제는
8:05상단에 클로드 로고가 나오고 클로드
8:09틀 안에 홈페이지가 있다는 것을
8:11확인할 수 있잖아요. 나는 이런 틀이
8:14아닌 깔끔하게 홈페이지를 만들고 싶다
8:16한다면 두 번째 방법인 복사업 버튼
8:20누른 다음에 HTML 형식으로
8:23다운로드 하셔야 됩니다. 자, 그럼
8:25볼게요.
8:28깔끔하게 되어 있죠? 틀이 없죠.
8:33스마트폰으로 공했을 때도 틀이 나오지
8:35않습니다. 근데 문제는 우리
8:38컴퓨터에서선 볼 수 있다는 거예요.
8:39다운이 우리 컴퓨터 다운로드 폴더에
8:43HTML 파일이 저장이 됐습니다.
8:45이것을 누구나 볼 수 있게 하려면
8:48웹스팅에 올려야 되는데 그러려면
8:50비용이 발생돼요. 근데 오늘은 무료로
8:54공유할 수 있는 방법을 알려
8:56드릴게요. 깃허브를 이용하는 건데
8:59검색해서 깃브를
9:02입력해 보세요. 깃터브 들어가
9:05볼게요.이 기터브는 우리가 앱을
9:08만들거나 웹사이트 파일을 저장하고
9:11공유하고 관리할 수 있는 온라인
9:13공간이라고 보시면 됩니다. 사인업에서
9:16구글로 회원 가입하시고 로그인하시면
9:19되겠는데 저는 회원 가입되었기 때문에
9:22구글로 로그인하겠습니다.
9:25먼저 여러분의 방을 만들어야 되는데를
9:28선택하신 다음에
9:31오른쪽에 영어로 입력하시면 돼요.
9:35저는 누나니까 NIT로 하겠습니다.
9:38그리고 퍼블릭으로 활성화되어 있는지
9:41확인하신 다음에 크리에이트
9:43선택하겠습니다.
9:46그럼 보세요. 여러분들의 방이
9:48만들어졌습니다.
9:50여기서 업로딩 앤 ex스팅 파일
9:54요거를 클릭한 다음에 아까 다운받은
9:58그 파일을 여기에 업로드하시면
10:00됩니다. 추주 유어 파일 선택한
10:03다음에 그 파일이 어디 있죠?
10:05다운로드 폴더에 있습니다. 근데 그냥
10:07업로드하시면 안 되고이 파일명을
10:10인덱스.html로
10:12바꾸셔야 돼요. 오른쪽 버튼 누른
10:14다음에 이름 바꾸기.
10:18그래서 ingdex.html
10:23엔터 더블 클릭
10:27업로드가 잘 됐어요. 커밋 체인지
10:32선택하겠습니다.
10:35네. 올라갔어요. 정상적으로. 그럼
10:37몇 가지만 세팅하시면 되는데 상단에
10:40세팅 메뉴 선택한 다음에 페이지
10:44선택하시고요. 여기 넌을 선택한
10:47다음에 메인으로 바꾸시면 됩니다.
10:50세이브 누르시면 돼요.
10:53그다음 마지막으로 액션에 들어가신
10:56다음에 페이지 빌드 있죠? 요거를
10:59클릭해 볼게요. 네.요 요 링크
11:02추소가 여러분들의 홈페이지 주소가
11:05되는 거예요. 그럼이 링크를 클릭해
11:07볼게요. 그러면 이렇게 홈페이지가
11:11만들어진 것을 확인할 수 있고이
11:13주소가 고유값입니다. 이것을 카톡으로
11:16공유하시거나 하시면 클로드 틀 없이
11:20깔끔한 홈페이지를 볼 수 있습니다.
11:23클릭 한번 해 볼까요? 하나씩. 네.
11:26그리고 유튜브 링크 잘되고
11:30영상도 클릭해서 이렇게 바로 계장되는
11:33것을
11:34>> 볼 수 있습니다. 클로드가 어렵게
11:37느껴지시나요? 또 클로드를 처음부터
11:39체계적으로 배우고 싶은데 어떻게
11:42배워야 할지 모르신 분들을 위해서
11:45누구나는 나만 모르는 클로드 책을
11:47출관했습니다. 처음부터 시작해서
11:50실수까지 영상 보시면서 따라할 수
11:52있으니까 한번 참고해 보세요.