노트북LM, Gemini, 구글 사이트 활용한 "행복경영 이야기"의 홈페이지 제작

1. 소개

제 사명은 "모든 사람들의 행복한 성공을 돕는다" 입니다. 그래서 앞으로 "행복한 성공, 자기 경영, 디지털 시니어의 AI가 바꾼 일상"에 대한 책을 쓰고 있고, 또한 강의를 준비하고 있습니다. 그래서 제 강의를 알릴 홈페이지를 만들고 싶었고, 구기모님(생소님)의 1차 발표 사례를 따라 했습니다.

https://sites.google.com/view/happymanagement

2. 진행 방법

(1) 사용한 도구

  • ChatGPT / Gemini / Claude : Deep Research 사용하여 강의에 필요한 지식 조사

  • Grok / perplecity : 강의에 필요한 지식 조사

  • NotebooLM : 지식 소스 업로드 후 각 웹페이지 제작 프롬프트 작성

  • Gemini : 각 웹페이지의 코드 소스 작성

  • Book Creator : 제가 쓴 책의 미니북 6개 제작

  • Google Sites : "행복경영 이야기" 홈페이지의 7개 웹페이지 작성(홈페이지, 자기 점검, 자기 경영, 행복한 성공, 디지털 시니어, 디지털북, 연락처 및 구독)

(2) 구체 진행 내용

1) 강의에 필요한 지식 조사 : ChatGPT / Gemini / Claude / Grok / perplecity의 Deep Research
등 활용하여 지식 조사

  • 각 LLM에 강의에 필요한 각종 지식 조사해달라고 요청

흰색 배경에 한국어 텍스트
  • 각 LLM에서 각종 지식 소스를 찾아줌(해외 자료 및 영상 포함)
    - ChatGPT의 Deep Research 결과 사례

한국 뉴스 기사의 스크린 샷

2) 5개 LLM에서 찾은 지식 소스를 Notebook LM에 업로드 (총84개)

  • LLM에서 찾은 소스들(웹사이트 주소, PDF 파일, 유튜브 URL 등)을 하나씩 업로드(84개)
    - 참고로 Notobook LM 무료 사용중인데, 출처 100개 이상 업로드 가능했음

한국어 앱의 스크린 샷

3) Notebook LM에서 홈페이지 첫 페이지 작성을 위한 프롬프트 요청

  • 구기모님(생소님) 작성한 홈페이지 내용과 유사한 페이지 만들 수 있는 프롬프트 요청
    - 프롬프트 요청한 내용

파란색 배경을 가진 한국 텍스트의 이미지

- Notebook LM이 만들어준 프롬프트 내용 일부

한국 뉴스 기사의 스크린 샷

4) Notebook LM에서 만든 프롬프트를 Gemini의 Canvas에 넣어 각 페이지의 코스 소스 작성

  • 첫페이지인 "홈페이지 " 코드 작성 요청(예시)

한국어로 쓰여진 한국 노래
  • 첫페이지인 "홈페이지 " 코드"와 "미리 보기" 예시

중국어 텍스트 편집기의 스크린 샷
한국어 텍스트가있는 웹 사이트의 스크린 샷
  • 2번째부터 7번째 페이지까지의 동일한 방법으로 페이지 작성
    - Notebook LM에서 웹페이지 만들 프롬프트 만들어 달라고 요청, Gemini에 프롬프트 넣어서 코드 소스 작성

    - 2번 자기 점검, 3번 자기 경영, 4번 행복한 성공, 5번 디지털 시니어, 6번 디지털 북, 7번
    연락처 및 구독 페이지의 코드 소스 작성. 반복 및 수정에 많은 시간이 소요됨

텍스트가 포함 된 한국 웹 사이트는 지금 AA를 시작합니다

5) Google Sites 도구에서 각 페이지 코드 소스를 삽입하여 홈페이지 사이트 완성

  • Google Sites 화면

중국어로 웹 사이트의 스크린 샷
  • 홈페이지 화면 작성 완료(7개의 웹페이지)
    - 6번째 "디지털북" 페이지에 북크리에이터에서 만든 6권의 미니북 삽입

    한국어 웹 사이트의 홈페이지

    - 버튼을 누르면 반응형으로 이미지가 보이도록 해서 깔끔하게 처리(도로시J님의 조언)

    .imgur(https://imgur.com/)라는 곳에 가서 이미지를 넣고 URL를 만들어 붙임

    한국 사업의 구조를 보여주는 다이어그램

    - 7개 각 페이지의 이미지 제작 및 페이지 수정하여 완성

    한국어 웹 사이트의 홈페이지

https://sites.google.com/view/happymanagement

3. 결과와 배운 점

(1) 배운점
- 각종 LLM 활용하여 강의에 필요한 여러 지식 조사
- Notebook LM에 지식을 업로드한 후, 웹사이트 제작에 필요한 프롬프트 작성 방법
- Gemini를 통해 웹페이지를 만들 코드 소스 및 미리보기 만드는 방법
- Google Sites 도구를 통해 웹사이트 페이지 작성 방법

(2) 시행착오 및 추가 작업할 내용
- 만들어준 웹페이지 내용과 디자인이 마음에 들지 않아 계속 Gemini에서 코드 소스 반복 수정
- 두번째 "자기 진단" 페이지에서 평가를 하여 "결과 보기"를 보아야 하나 작동이 안됨. 그리고 7페이지의 "블로그, 페이스북, 인스타그램" 버튼도 작동이 안됨 → 제대로 "게시"를 하지 않아 발생한 것이었음. 도로시J 스터디장님 도움을 받아 게시하니 잘 작동함.
- 마지막 "연락처 및 구독" 페이지에서 "구독 신청하기" 버튼을 누르면 구독 신청할 수 있도록
추가 작업 필요(현재는 신청하는 페이지만 만듬)
- 디자인 감각을 동원하여 보다 매력적이고 깔끔한 홈페이지 제작 필요

(3) 앞으로의 계획
- AI 활용하여 내 강의 컨텐츠(자기 경영, 행복한 성공 등)의 업그레이드
- 시니어를 위한 쉽게 AI를 활용할 수 있는 교안 작성

4. 도움 받은 글

  • 스터디장님 두분과 스터디원분들의 열정에 감동하여 저도 열심히 하고 있습니다.

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요