[6기_사프방] 1. 수익형 블로그성 홈페이지 도전기 1편

안녕하세요. 저는 이번 처음에 6기 무지성으로 신청한… 10여년차 개발자입니다. ~~(구직중)~~

사실 처음 포부에 ‘어그로 끌어 수익 내는 블로그’ 를 계획하였죠.

하지만, ChatGPT를 접한 지 얼마 안 된 저에게 ‘어그로 끄는 방법’은 생각보다 큰 과제였고,

가능하면 주제에 맞게, 그리고 처음 포부와 많이 벗어나지 않는 방법을 며칠 고민했습니다.

저의 특기를 살려, 최대한 개발 지식이 낮은 상태에 접근이 가능하면서도, ChatGPT 무료 사용자라도 ‘어느정도’는 따라할 수 있는 방법을 생각한 끝에,

그냥 ‘수익 나는 블로그 만들기’를 선택했습니다.

하지만, 많이 사용하는 광고를 붙이는 식으로는 생각보다 흔하게 찾을 수 있습니다.

게다가 요즘 ChatGPT 로 같은 패턴의 광고성 블로그가 범람하여 광고 심사가 따다로워지고 심사 기간도 길어졌다고 알려져…

제가 선택한 방법은, 바로 ㅋㅍ 파트너스 링크를 통해 수익을 내는 방식을 선택했습니다.

광고를 붙일 위치를 고민하는 것보다는, 우리들에게 필요한 쇼핑에 관한 정보를 알려주면서, 광고성 링크를 소화시켜 ChatGPT를 통해서라도 정보력 있게, 그리고 수익성 있게 라는 저 개인적 조건에 만족할 만한 내용이었죠.

제가 원래 서론 참 길게 씁니다. 이제 시작하겠습니다.

준비물은 아래와 같습니다. 흙흙.

ChatGPT (무료로도 ‘어느정도’는 가능하지만, 유료 기준으로 설명합니다.)
블로그에 붙일 도메인 (저같은 경우는 이미 있는 도메인에 서브도메인을 사용하겠습니다.)
Github 계정 (서버와 DB는 없지만, 무료로 호스팅 됩니다. 아니면 Netify 등 타 플랫폼 사용 가능.)
구글신께 2021년 기준으로 홈페이지 빨리 만드는 방법 소환 (ChatGPT 최근 지식 베이스가 2021년까지인 거 아시죠?)

예상 예산: 도메인 평균 약 $20, ChatGPT $20 = 평균 약 $40 (부가세 제외)

ChatGPT 에게 블로그 템플릿 개발 요청하기

구글에게 2021년 홈페이지 템플릿, 그리고 강좌 등을 조사한 결과, 여러분은 이 두개만 아시면 홈페이지의 기본적인 시스템은 준비된 셈입니다.

Bootstrap 4 (이미 준비된 UI 스타일과 기능이 있어 ChatGPT에게 주는 요구사항을 덜어줍니다.)
Font Awesome 5 (아이콘을 사용하기 위해 준비된 플랫폼 중 접근성이 좋고 Bootstrap과 궁합이 좋습니다.)

따라서, ChatGPT에게 아래와 같은 프롬프트를 전달하면 되겠습니다.

FAANG* 출신의 선임 프론트엔드 개발자인 당신을 채용하여 기쁘게 생각합니다.
오늘은 블로그 스타일 홈페이지를 만들기로 하여, 아래와 같은 요구사항을 전달합니다.
요구사항을 적용한 HTML, CSS, JS 언어로 만든 템플릿을 검토를 위해 전달해 주시기 바랍니다.
제목: AI는 정보다 블로그
디자인 시스템: Bootstrap 4 와 스크립트 (스크립트 명시 안하면 이녀석이 반만 적용할 때가 있습니다)
컬러 테마: 밝은 테마, 화려하게, 청록색 계열로
아이콘은 Font Awesome 5 사용
… 그리고 나머지 여러분이 홈페이지에 들어가야 할 요구사항들을 명시

We are delighted to have hired you, a senior front-end developer from a FAANG company.
Today we've decided to build a blog-style homepage, and we've come up with the requirements below. The deliverables are HTML, CSS, and JS, and your first task is to create a template.
Be sure to follow the requirements below, and show me the source code for review.

- Title: AI is Information blog
- Design system: Bootstrap 4 with scripts.
- Color theme: Colorful light theme based on Cyan color.
- Icons will use Font awesome 5.
- (...rest of your requirements)

*FAANG: Facebook, Apple, Amazon, Netflix, Google 앞자리를 합친 미국의 주요 IT 기업 약자, 한국의 주요 IT 기업 약자인 ‘네카라쿠배’와 비슷한 용어.

추가적으로, 저같은 경우는 스타일에 사용하는 파일과 스크립트 파일을 관리하기 좋게 별도로 분리하도록 요구했습니다. 그랬더니,

이렇게 HTML 템플릿을 만들어 주고,

이렇게 스타일을 만들어 줬습니다.

하지만 여러분은 눈으로 결과를 보고 싶을 겁니다.

그래서 온라인 상에서 아주 간편하게 웹 사이트를 미리볼 수 있는 사이트를 준비했습니다.

https://jsbin.com

여기서 ChatGPT가 만들어준 HTML, CSS 를 그대로 복붙해서 넣으면,

이렇게 간단하게, 템플릿이긴 하지만, 홈페이지 하나 뚝딱 만들어줍니다.

2/2 부분 보신 분들 눈치챘을 지 모르지만, 혹시라도 미리보기 했는데 마음에 안드시면, regenerate 해도 되고, 프롬프트를 수정해서 올려도 됩니다. 무료나 유료나 일률적인 대답을 안해주고, 요구사항을 일부 빼먹은 상태에서 만들어줄 수도 있기 때문이죠.

ChatGPT 에게 가독성 좋은 링크 제작 요청하기

자, 이제 ㅋㅍ 파트너스 링크를 걸려면, 그래도 클릭하기 좋게 꾸며줘야 하지 않겠습니까?

이 쇼핑몰 링크가 무엇을 가리키는지, 무엇을 설명하는지 명시를 하면, 방문자는 클릭하기 전에 신뢰성을 확보할 수 있으니까요.

페이스북을 예를 들어보겠습니다.

이렇게 링크를 클릭하기 전 이 링크의 정보를 알 수 있다면, 방문자가 링크를 왜 클릭하는지 명분을 주는 거 아니겠습니까, 명분이.

ChatGPT에게 링크 템플릿을 요청하는 방법은 크게 2가지 방법이 있습니다.

유료 사용자인 경우 플러그인 사용(link 검색하면 나오는 link 분석 플러그인 사용)
링크 메타 분석 사이트(Meta Tags)를 사용하여 링크 제목과 설명을 ChatGPT에게 전달 (유료, 무료 모두 사용 가능)

이 중 저는 후자를 선택하여 적용하도록 하겠습니다.

여기서 원라는 링크 붙여넣어 PARSE 버튼 누르고 나오는 제목과 설명을 사용하면 됩니다.

이미지 같은 경우는 이후에 설명 드리겠습니다.

본격적으로 프롬프트를 전달하여 ChatGPT에게 링크박스 템플릿 하나 만들어달라고 합시다.

다음으로는 링크 미리보기를 위한 박스를 하나 만들어 줘. 이 박스를 클릭하면 링크로 이동하게 해 주고, 위아래 적절하게 여백을 주고, 왼쪽에 이미지, 그리고 나머지 영역에 링크 제목과 설명을 표시해 줘. 만약 이미지가 없으면, 텍스트만 나오도록 표시해 주고, 혹시 설명이 100자 넘으면, 네가 100자까지만 잘라서 표시해 줘.
내가 이런 식으로 형식을 줄 테니, 검토를 위한 소스를 보여 줘.

Next, we need a componentized template for the link preview.  Draw a box, wrap it with a border, and give it a decent margin. And on the left side, we'll have an image area of about 128px, which should be optional because some sites don't have images. And, write title and a description of the site in 100 characters or less.
If I ask you to write a blog post and you fill in the format below, please attach the above requirements to the HTML and CSS respectively.
- Link address
- Link title
- Link description, if more than 100 characters, write up to 100 characters, truncate the rest, and paste '...' at the end.
- In the 4th list, if I give you a link image, attach the image, otherwise don't attach it.

When you're ready, I'll provide you with two list formats, and attach the above link boxes to your blog site template for review, showing me the HTML and CSS code.

- The first link is to YouTube
  - https://youtube.com
  - Youtube
  - Enjoy videos!
  - https://www.youtube.com/img/desktop/yt_1200.png
- The second link is to Facebook
  - https://facebook.
   - Facebook
  - Enjoy the social!

그러면, 템플릿을 적용한 소스를 아래와 같이 보여주게 됩니다.

여기서 추가된 스타일 시트 소스도 함께 말이죠.

하지만 여러분이 개발 경험이 없어 어떻게 소스를 추가해야 할 지 모르니, 통째로 복붙하고 싶다면,

걱정 마세요! ChatGPT 에게 아래와 같은 프롬프트를 전달해 주면 됩니다.

내게 전체 소스를 보여 줘.

Show me the full souce code.

그러면 ChatGPT는 여러분이 바로 복붙에서 미리보기할 수 있는 HTML, CSS 소스를 보여줄 겁니다.

방금 소개한 온라인 웹사이트 미리보기 페이지에 HTML, CSS 소스 붙여넣고, 잘 나왔는지 확인해 보세요.

만약 결과물이 마음에 들지 않는다면, 언제든 ChatGPT에서 ‘please fix it (요구사항)’ 같은 프롬프트를 사용하여 고쳐 나가면 됩니다.

본격적으로 ChatGPT 에게 개발 시키기

준비됐으면, 이제 본격적으로 ChatGPT 에게 개발 시켜보도록 하겠습니다.

저같은 경우 아래와 같은 프롬프트를 준비했습니다. 그대로 따라하셔도 되고, 여기 어드민님이 올린 ‘만능 프롬프트’를 응용해도 되고, 선택은 여러분의 자유입니다. 최대한 빈틈없이 명시하여, ChatGPT가 실수를 최소한으로 줄여 개발을 시키면 되겠습니다. ChatGPT는 시키지 않으면 절대 적용하지 않는다는 점을 명심하세요.

보기 좋습니다. 이제 여태까지 만든 템플릿을 기반으로 개발을 시작합시다.
제가 요구하는 양식은 아래와 같습니다. 내용과 역할, 그리고 이미지나 유튜브, 링크와 그 제목, 설명 등을 명시할 테니, 아래 양식을 적용하여 블로그 내용을 넣어주면 됩니다.
(… 더 필요한 요구사항 명시)
이해했다면, ‘예’로만 대답하세요. 아니면, 다시 요구하겠습니다.

That looks great, so let's start developing the site from the template.
I'm going to give you a form like this, and you're going to fill in the title and content of your blog based on this, and if it's an image, I'm going to give you the address, and if it's a YouTube video, I'm going to give you the YouTube address, and you're going to embed this. And if it's a link, I'll say it's a link, I'll give you the link address, the title, the content, and the link image, and don't forget to apply the link template that we just created.

- Topic: This is where I will write the topic of the blog
  - Content: what I want to suggest in the blog, then you must analyze this section and apply in blog content area.
  - Role: I'll specify what role you should write in here. don't write this section.
  - Image: (If I specify it, I'll write the image address, if not, I won't.)
  - YouTube: (If I specify, I'll include the YouTube address; if not, I won't.)
  - Link n: where n is the sequence number, don't put the sequence number in the content.
    - Address: Link.
    - Title: Link.
    - Description: Link description
    - Image: Image address to attach on the left (optional)

Then analyze the form above and give me the full HTML, CSS, and JS source. 
(...other your requirements)
If you understand, just say yes, and if you say anything else, I'll revise the wording and ask again.

‘예’로만 대답했네요. 그럼 여러분이 요구한 양식과 조건을 이해했다고 보면 됩니다. 이제 본격적으로 ChatGPT에게 블로그 내용을 분석하여 넣도록 해봅시다.

홈페이지 접속하면 먼저, index.html 에 접속하기 때문에, index.html 에 넣을 내용을 넣어보도록 하겠습니다. 저는 ‘식용유와 영양’을 주제를 예를 들어 검토해 보도록 하겠습니다.

이제 주제 하나를 양식으로 적용하길 바랍니다. index.html 파일에 넣을 것이고, 다음에 더 많은 주제를 요구하겠습니다. 분석을 완성했으면 전체 HTML, CSS, JS 소스를 각각 보여주시기 바랍니다.

This time, we're going to request one topic in blog form, which we'll put in `index.html` (don't name the file), and we'll request the next topic later. Please show us the HTML, CSS, and JS, as we'll need to do a full review once the analysis is complete.

- Topic: Price and health of cooking oil sources
  - Description: Cooking oils come in a variety of sources and price ranges.
  - Role: Like a salesperson from Walmart
  - Image: https://image.pollinations.ai/prompt/Oils%20in%20Glass%20Bottles%20Glisten
  - Content: Common cooking oils used by consumers around the world and their nutritional differences
  - Role: Salesperson at the mall
  - YouTube: https://youtu.be/GuRG4mspLZI
  - Content: Health benefits and weaknesses of canola oil
  - Role: Nutritionist
  - Link: https://www.lotteon.com/search/search/search.ecn?render=search&platform=pc&q=%EC%B9%B4%EB%86%80%EB%9D%BC%EC%9C%A0&mallId=4
    - Title: Canola oil : Lotte Mart
    - Description: Search results for canola oil at Lotte Mart
    - Image: https://static.lotteon.com/p/common/assets/favicon/4/metaimg-1000.png

반드시 ‘전체 소스’라고 명시해야 아래와 같이 생략하지 않은 소스 그대로 볼 수 있습니다.