6-1. AWS에 배포하여 미리보기
드디어 우리가 만든 웹 서비스를 세상에 공개할 시간입니다! 우리는 전세계에 우리가 만든 서비스를 공개하기 위해 AWS(아마존 웹 서비스)를 사용하려고 합니다.
💡 아마존닷컴의 클라우드 컴퓨팅 사업부. 현재 클라우드 컴퓨팅 분야에서 압도적인 세계 1위를 차지하고 있으며 2022년부로 16주년을 맞는 다국적 기업이자 역사상 가장 큰 IT 및 클라우드 기업 중 하나로 마이크로소프트, Apple, Google과 함께 MAGA의 일원이다.
AWS 회원가입
아래 주소에 접속하여 회원가입을 진행합니다. 아래와 같이 이메일 주소와 계정 이름(영문)을 입력하여 진행합니다.
AWS 회원가입: https://portal.aws.amazon.com/billing/signup
사용자 암호를 입력합니다.
개인으로 선택하고 이름. 전화번호, 주소를 입력합니다. 주소는 영문으로 입력해야하니 네이버 영문주소 기능을 사용하세요.
결제정보를 입력합니다. 통상적으로 1달러가 결제되나 최대 2주후 환불됩니다.
카드 정보 입력시 아래 추가적인 정보를 요구할 수 있습니다.
휴대폰으로 전화번호 SMS 인증을 합니다.
기본 지원 - 무료 플랜을 선택합니다.
완료하였습니다! 위에서 기입한 정보로 로그인을 진행합니다.
AWS 콘솔에 접속하여 정보를 확인할 수 있습니다.
나만의 도메인 구입하기
이제 나만의 주소(도메인)를 구입할 차례입니다. 도메인은 AWS Route 53 에서 구입할 수 있습니다.
AWS Route 53: https://us-east-1.console.aws.amazon.com/route53/v2/home
좌측 메뉴 - 도메인 - 등록된 도메인을 클릭하고 [도메인 등록] 버튼을 클릭합니다.
이곳에서 원하는 도메인 이름을 선택할 수 있습니다. 여러분들의 취향에 맞는, 서비스에 어울리는 도메인 이름을 검색하여 가용한 도메인을 선택할 수 있습니다. [장바구니에 추가] 버튼을 눌러 도메인을 선택합니다.
💡 도메인 구입시 1년마다 금액을 지불해야합니다. 도메인 뒤에 붙는 이름(.com, .net 등)마다 가격이 상이하며 .com 의 경우 1년에 12미국달러의 요금이 청구됩니다. 도메인 구입시에는 프리티어 요금제가 적용되지 않습니다.
도메인 구입하는 사람의 연락처를 입력하고 [계속] 버튼을 클릭합니다.
마지막으로 연락처를 확인하고 아래 사항을 추가로 선택합니다.
- 도메인 자동 갱신: 1년마다 자동으로 결제가 되며 도메인 사용기간이 자동 연장될지 여부, [활성화] 선택시 자동 결제/연장
이용약관을 확인하시고 [주문 완료] 버튼을 클릭하면 1시간내에 도메인이 세팅완료 됩니다. (이메일로 알림을 줍니다)
저장공간(S3) 만들기
우리가 만든 웹 서비스를 배포하기 위해 AWS의 수많은 서비스 중 S3(Simple Storage Service, 간편 저장 서비스)를 이용하려고 합니다.
AWS S3: https://s3.console.aws.amazon.com/s3/buckets?region=ap-northeast-2
💡 이제부터 사용하는 모든 기능들은 유료 기능이므로 가격을 살펴보신 후 진행하시길 권장드립니다. S3 가격 정책: https://aws.amazon.com/ko/s3/pricing/
새로 가입하신 분들은 1년간 한정된 서비스에 한해 프리티어 요금을 사용하실 수 있습니다. 프리티어는 1년간 한도내에서 무료로 사용해 볼 수 있는 시스템입니다. (참고: https://inpa.tistory.com/entry/AWS-💰-프리티어-요금-폭탄-방지-💸-무료-사용량-정리#S3)
[버킷 만들기] 버튼을 클릭하여 소스코드를 저장할 공간(버킷)을 생성합니다.
버킷 이름은 위에서 구입한 도메인 이름과 동일하게 입력합니다. (예: 5pistudio.com)
퍼블릭 액세스 차단 설정에서 모든 퍼블릭 액세스 차단의 체크를 해제하여 누구나 웹 서비스에 접속할 수 있도록 설정합니다.
새로 생성한 버킷(예제에서는 5pitudio.com)을 클릭합니다.
정적 웹 사이트 호스팅 설정
상단의 [속성] 탭을 클릭합니다. 가장 아래 정적 [웹 사이트 호스팅] 섹션에서 [편집] 버튼을 클릭합니다.
정적 웹 사이트 호스팅 상세페이지에서 아래와 같이 설정합니다. 설정 완료 후 [변경 사항 저장] 버튼을 클릭합니다.
- 정적 웹 사이트 호스팅: [활성화]
- 호스팅 유형: [정적 웹 사이트 호스팅]
- 인덱스 문서: [main.html] → 홈페이지 HTML 파일 이름과 일치해야 함!
아래와 같이 접속 주소(버킷 웹 사이트 엔드포인트)가 생성되었다면 성공입니다! 이 접속 주소를 소중히 간직하세요!
버킷 권한 설정
상단의 [권한] 탭을 클릭합니다. 버킷 정책에서 [편집] 버튼을 클릭하고 아래와 같이 입력합니다.
[버킷-이름]을 우리가 위에서 만든 버킷 이름으로 대체합니다. (예제에서는 5pistudio.com)
[변경 사항 저장] 버튼을 클릭합니다.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::[버킷-이름]/*"
]
}
]
}
버킷 정책이 아래와 같이 되었다면 성공입니다. (버킷 이름은 도메인에 따라 다를 수 있습니다.)
소스코드 업로드하기
이제 본격적으로 소스코드를 업로드할 시간입니다. 상단의 [객체] 버튼을 클릭합니다. 객체 메뉴에서는 파일을 업로드할 수 있습니다.
우리가 만들었던 파일들을 통째로 선택하여 드래그 앤 드랍하여 업로드합니다. 드래그 앤 드랍 후 파일을 확인하고 [업로드] 버튼을 클릭합니다.
이제 위에서 소중히 간직했던 접속주소를 복사하여 브라우저 주소표시줄에 붙여넣고 접속합니다. 모든 기능들이 잘 동작하는지 확인합니다.
6-2. 도메인과 웹 서비스 연결하기
Route 53 대시보드에서 시작합니다.
Route 53 대시보드: https://us-east-1.console.aws.amazon.com/route53/v2/home
좌측 메뉴 - 호스팅 영역을 클릭하여 구입한 도메인을 확인합니다.
💡 Route 53의 호스팅 영역 서비스를 사용할 경우 월 소액의 요금이 청구됩니다. 요금정책: https://aws.amazon.com/ko/route53/pricing/
호스팅 영역은 생성된 시점과 그 후로 매월 다음 달 1일에 요금이 청구됩니다. 테스트를 허용하기 위해 생성 후 12시간 이내에 삭제된 호스팅 영역에 대해서는 요금이 부과되지 않습니다. 하지만 해당 호스팅 영역에 대한 쿼리에는 여전히 아래와 같이 요금이 부과됩니다.
호스팅 영역 하나에는 10,000개의 레코드가 포함됩니다. 영역당 10,000개를 초과하는 각 레코드에는 월 0.0015 USD의 요금이 부과됩니다.
구입한 도메인을 클릭하고 [레코드 생성] 버튼을 클릭합니다. 빠른 레코드 생성 창에서 해야할 것은 아래와 같습니다.
- 레코드 이름: 빈칸
- 레코드 유형: A - IPv4 주소 및 일부 AWS 리소스로 트래픽 라우팅
- 별칭: 활성화
- 트래픽 라우팅 대상
- S3 웹 사이트 엔드포인트에 대한 별칭
- 아시아 태평양(서울) [ap-northeast-2]
- s3-website.ap-northeast-2.amazonaws.com (빈칸 클릭시 자동완성됨)
- 라우팅 정책: 단순 라우팅
- 대상 상태 평가: 아니오
[레코드 생성] 버튼을 클릭하여 레코드를 생성하면 최대 24시간 안에 도메인 연결이 완료됩니다. 여러분들의 도메인으로 접속하여 잘 접속되는지 체크합니다!
6-3. 검색 엔진 최적화(SEO)를 통한 웹 서비스 노출 극대화
이제 사용자들은 우리가 만든 웹 서비스의 주소를 알면 그 주소를 주소표시줄에 입력하여 접속할 수 있게 되었습니다. 그러나 사람들은 보통 주소를 쳐서 들어오는 것이 아니라 구글, 네이버에 검색해서 들어오는 경우가 대부분이죠? 검색이 잘되기 위해서는 우리는 검색 엔진 최적화(SEO, Search Engine Optimization)를 해주어야 합니다.
💡 SEO는 "검색 엔진 최적화"를 의미합니다. 쉽게 말해 구글, 빙 등 검색엔진에서 사업과 관련된 제품이나 서비스를 사람들이 검색할 때 가시성을 높이기 위해 사이트를 개선하는 과정을 의미합니다. 검색 결과에서 페이지를 더 잘 볼수록 관심을 끌고 잠재 고객과 기존 고객을 비즈니스로 끌어들일 가능성이 높아집니다.
메타 태그 수정하기
메타 태그는 웹페이지가 어떤 웹페이지인지 검색 엔진(구글, 네이버 등)에게 설명하는 역할을 하는 태그입니다. 간단히 말하면 웹페이지의 이력서라고 할 수 있겠네요.
💡 메타 태그(meta tag)는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미합니다. 이러한 웹페이지의 메타 정보는 주로 HTML의 <meta>요소를 통해 마크업을 하며, HTML 문서 내에서 <head>요소 아래 배치되므로 일반 유저가 보게되는 웹페이지의 컨텐츠에는 아무 영향을 주지 않습니다. 반면에 검색엔진과 같은 기계들이 웹페이지를 읽어야할 때는 메타 태그의 내용들이 해당 서비스에서 어떻게 표시될지를 결정하는 매우 핵심적인 요소가 됩니다. 출처: https://www.daleseo.com/html-meta-tags-for-seo
메타 태그를 쉽게 확인하는 방법은 아래 서비스를 사용하는 방법입니다.
Meta Tags: https://metatags.io
조회할 페이지의 주소를 입력할 수 있는 칸이 있고 입력한 주소가 각 플랫폼에서 어떻게 보여지는지 확인할 수 있습니다. 우리가 만든 웹 서비스의 메타 태그를 확인해보면 다음과 같이 아무것도 없는 것을 볼 수 있어요.
Meta Tags 웹사이트에서 먼저 수정해서 미리보기할 수 있습니다. 왼쪽 METADATA에 정보들을 입력하면 실시간으로 반영된 결과를 확인할 수 있습니다.
다 완성되었다면 오른쪽 위에 [GENERATE META TAGS] 버튼을 눌러 메타 태그를 생성할 수 있습니다. 아래와 같은 HTML 태그가 나오죠.
위의 태그를 복사해서 main.html 의 <head> 안에 붙여넣기 합니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Primary Meta Tags -->
<title>빵형의 홈페이지</title>
<meta name="title" content="빵형의 홈페이지">
<meta name="description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://5pistudio.com/">
<meta property="og:title" content="빵형의 홈페이지">
<meta property="og:description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
<meta property="og:image" content="">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="http://5pistudio.com/">
<meta property="twitter:title" content="빵형의 홈페이지">
<meta property="twitter:description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
<meta property="twitter:image" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
붙여넣은 메타 태그를 잘 살펴보시면 og:image 와 twitter:image 의 content 가 비어있는 것을 볼 수 있는데요. 페이스북, 트위터, 카카오톡에 링크를 공유할 때 보여지는 이미지를 변경할 수 있습니다. 일단 우리가 사용할 이미지를 만들거나 다운로드 받아주세요. 저는 아래와 같은 이미지를 사용하겠습니다!
이 이미지를 AWS S3에 업로드합니다. 업로드가 완료되면 이 이미지를 클릭하여 객체 개요를 확인할 수 있는데 객체 개요에 객체 URL을 복사합니다.
복사한 URL을 og:image, twitter:image 의 content 안에 복사합니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Primary Meta Tags -->
<title>빵형의 홈페이지</title>
<meta name="title" content="빵형의 홈페이지">
<meta name="description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://5pistudio.com/">
<meta property="og:title" content="빵형의 홈페이지">
<meta property="og:description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
<meta property="og:image" content="https://s3.ap-northeast-2.amazonaws.com/5pistudio.com/training.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="http://5pistudio.com/">
<meta property="twitter:title" content="빵형의 홈페이지">
<meta property="twitter:description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
<meta property="twitter:image" content="https://s3.ap-northeast-2.amazonaws.com/5pistudio.com/training.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
메타 태그를 붙여넣는다고해서 페이지의 모양의 달라지진 않습니다. 그러나 검색 엔진이 검색할 때 메타태그를 보고 참고하여 사람들에게 노출시키죠. 메타 태그를 업데이트했으니 이제 AWS S3 버킷에 다시 업로드하여 변경사항을 적용합니다.
다시 한 번 metatags.io 웹사이트에서 도메인을 입력하고 결과를 확인합니다. 카카오톡에 붙여넣어도 아래와 같이 보입니다.
6-4. 웹 서비스 수익화를 위해 광고 신청하기 (구글 애드센스)
광고를 게재할 수 있는 플랫폼은 여러개가 있습니다. 구글 애드센스말고도 카카오 애드핏 등의 광고를 통한 수익 창출 방법이 있는데 먼저 구글 애드센스 신청방법을 알아보겠습니다.
구글 애드센스: https://www.google.com/adsense/start/
[시작하기] 버튼을 눌러 구글 아이디로 로그인합니다. 좌측 메뉴에서 [사이트] 버튼을 클릭하고 [사이트 추가] 버튼을 클릭합니다.
우리가 구입한 도메인을 입력하고 [저장하고 계속하기] 버튼을 클릭합니다.
다음과 같은 화면에서 코드를 추가하라는 메시지가 뜹니다. 코드를 선택하여 복사하고 모든 html 파일 아래쪽에 붙여넣기합니다.
- /part2/index.html
- /part3/index.html
- /part4/index.html
- /part5/index.html
- /main.html
모든 파일을 저장하고 AWS S3에 다시 업로드하여 변경사항을 적용합니다.
그리고 [검토 요청] 버튼을 클릭합니다.
위와 같은 메시지가 뜨면 보통 5일에서 1개월 이내 신청이 완료됩니다. 애드센스 신청이 거절되는 경우가 종종 있는데 신청한 웹사이트의 내용이 부족하거나 부적절할 경우 승인이 거절되는 경우가 많습니다. 더 많은 서비스와 컨텐츠가 있을 수록 승인기간이 짧아지고 승인될 확률이 높아집니다.
신청한지 10시간만에 메일을 받았습니다. 거절 당했네요. 이유는 컨텐츠 부족입니다. 구글 애드센스 신청은 “애드 고시”라고 부를만큼 승인 절차가 까다롭습니다. 승인받기 위해서는 더 예쁜 디자인과 많은 서비스를 추가해야할 것 같습니다. 더 많은 컨텐츠를 추가하고 [검토 요청] 버튼을 눌러 다시 검토를 요청할 수 있습니다.
💡 구글 애드센스 신청 꿀팁! 위 예시처럼 컨텐츠가 부족할 경우 심사가 거절되는 경우가 있는데요. 한 번에 성공하지 못했다고 실망하지 마세요. 컨텐츠를 보완해서 다시 심사를 요청할 수 있습니다. 그러나! 여러 번 검토 신청할 수록 심사기간이 오래걸리고 너무 남용하면 계정 정지 패널티를 받을 수도 있다고 하니 주의하시고요!
만약 여러분들이 운영하는 티스토리 블로그가 있다면 티스토리 블로그로 승인을 받은 후 똑같은 도메인 아래 하위 도메인(xxx.xxx.com)으로 심사를 건너뛰는 방법도 있습니다!
6-5. 웹 서비스 수익화를 위해 광고 신청하기 (카카오 애드핏)
카카오 애드핏은 구글 애드센스보다 심사가 간단하고 바로 광고를 삽입할 수 있습니다.
먼저 아래 페이지에 접속하여 카카오 아이디로 로그인하고 카카오 애드핏 회원가입을 진행합니다.
회원가입: https://adfit.kakao.com/join
카카오톡 챗봇 구독을 신청하시면 카카오애드핏 채널의 챗봇을 통해 계정의 리포트를 매일 수신하실 수 있습니다. 카카오톡에서 카카오애드핏 채널을 추가하신 후 구독하실 수 있습니다.
회원가입을 완료하면 아래와 같은 내 계정목록 화면을 보실 수 있습니다.
[애드핏 매체 등록하기] 버튼을 클릭하여 매체 등록을 진행합니다.
아래와 같이 입력하고 [등록] 버튼을 클릭합니다.
- 매체명: 여러분의 웹서비스 이름
- 매체 유형: Web
- 매체 URL: 웹 서비스 도메인 주소를 입력하고 [매체 URL 변경] 버튼 클릭
- 매체 카테고리: 생산성 - 도구 (이 부분은 컨텐츠에 따라 변경될 수 있습니다)
등록 완료 페이지를 확인하고 [광고단위 생성] 버튼을 클릭합니다.
위에서 만든 매체를 선택하고 [다음] 버튼을 클릭합니다.
[배너]를 선택합니다.
아래와 같이 입력하고 [다음] 버튼을 클릭합니다.
- 광고단위명: “배너광고”라고 입력합니다. 만약 광고를 여러개 삽입할 경우 서로 다른 이름을 사용해주세요!
- 유형선택: 배너 광고의 크기와 유형을 선택합니다. 좌측의 미리보기로 광고 모양을 볼 수 있습니다.
- PC: 데스크탑
- M: 모바일
- PC/M: 데스크탑/모바일 겸용
- 옵션사항: (?) 물음표 아이콘 위에 마우스를 올려 옵션을 미리 볼 수 있습니다. 전부 미설정이 기본 설정입니다.
- 특정 소재 타입 허용: 기본값으로 설정합니다.
광고 단위 생성이 완료되었습니다. 아래 쪽의 광고 스크립트를 복사하여 main.html 아래쪽에 붙여넣기 합니다
... 생략 ...
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5332065285612783"
crossorigin="anonymous"></script>
<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "DAN-O4HovrPcjGWtusiQ"
data-ad-width = "300"
data-ad-height = "250"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</body>
</html>
Live Preview를 통해 확인합니다. 아래와 같이 나온다면 성공입니다. 만약 바로 나오지 않더라도 당황하지 마시고 잠시 기다리신 다음 새로고침 버튼을 눌러주세요.
카카오 애드핏의 매체 심사는 보통 영업일 기준 3일 안에 심사가 완료됩니다. 심사가 완료되면 아래와 같은 이메일을 받으실 수 있습니다.
6-6. 나만의 웹 서비스에 광고 삽입하여 수익내기
광고가 왼쪽에 치우쳐져 있어 보기 안좋네요. 아래 코드와 같이 입력하여 광고 위치를 수정하겠습니다.
... 생략 ...
<div class="text-center mt-3">
<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "DAN-O4HovrPcjGWtusiQ"
data-ad-width = "300"
data-ad-height = "250"></ins>
</div>
</main>
저장한 파일을 모두 AWS S3에 업로드합니다. 그리고 주소에 다시 접속하면 아래처럼 광고가 보이는 것을 알 수 있습니다.
좌측메뉴 - 대시보드 및 광고관리 - 매체 관리 화면에서 예상 수익을 볼 수 있습니다.
좌측 메뉴 - 지급 요청에서 광고 수익을 지급받을 수 있습니다. 확정 적립금이 5만원 이상인 경우부터 지급이 가능하며 매월 21일부터 말일까지 요청 가능합니다.
아래는 웹 서비스 배포 직후 하루동안의 수익을 캡쳐한 것입니다.