Part 1. 초보자도 가능한 웹 개발 기초와 실습

카테고리 없음

Part 1. 초보자도 가능한 웹 개발 기초와 실습

digital520 2024. 4. 4. 10:21

1-1. 웹 서비스 수익 확인하기

구글에 여러가지 웹 서비스를 검색하여 예상 방문자 수, 예상 페이지 조회수를 통해 예상 수익을 계산할 수 있습니다. 구글에 “온라인 메모장”이라고 검색해서 가장 상단에 나오는 웹사이트에 들어가봅시다.

온라인 메모장 웹 서비스

오른쪽과 아래쪽에 구글 광고가 삽입되어 있습니다. 이 페이지의 월간 방문자 수와 페이지 조회수를 예측해주는 웹사이트인 시밀러 웹(https://www.similarweb.com)에서 트래픽을 확인해보겠습니다.

이 웹사이트의 2022년 9월 기준 월간 방문자(Total Visits)는 557.9K로 55만 방문자이며 방문자 당 둘러본 페이지 수(Page per Visit)는 1.47개 입니다. 월간 총 페이지 조회수는 아래처럼 계산할 수 있습니다.

월간 페이지 조회수 = 월간 방문자 수 x 방문자 당 둘러본 페이지 수

이 온라인 메모장의 월간 페이지 방문수는 55만 곱하기 1.47 = 808,500회 입니다. 이 숫자를 구글 애드센스 웹사이트에 들어가 예상 수익을 계산해봅시다.

연간 10만 달러(한화 약 1억 4,200만원)를 벌 수 있습니다. 페이지 방문자, 페이지 조회수, 광고 수익 모두 예상 수치이니 보수적으로 잡아 1년에 약 1억원 정도 벌 수 있다고 생각하면 되겠네요.

날씨 웹 서비스

AccuWeather(https://www.accuweather.com)라는 웹 서비스를 살펴봅시다. 역시 구글 애드센스가 삽입되어 있습니다. 단순하게 날씨를 보여주는 웹사이트입니다.

마찬가지로 시밀러웹에서 트래픽을 조사해봅시다.

2022년 9월 총 방문자 수 588.3M(5억 8천만명), 방문자당 페이지 방문 수 2.5페이지로 엄청난 트래픽을 자랑합니다. 총 페이지 방문수는 5억 8천만 곱하기 2.5 = 14억 5천만 회입니다. 이 숫자가 너무커서 구글 애드센스에서 예상 수익을 계산할 수가 없군요. 구글 애드센스에서는 월간 페이지 뷰 1천만까지만 예상 수익을 계산할 수 있습니다.

월별 페이지 조회수가 1천만일 때 연 예상 수익이 130만 달러(18억원)이므로 14억 5천만 조회수일 때는 어림잡아 18억원 곱하기 145를 하면 됩니다. 약 2,610억원 정도 되네요. 보수적으로 잡아 연 2,000억원 정도의 광고 수익을 올릴 수 있을 것으로 보입니다.

1-2. 실무 웹 개발과 수익형 웹 개발의 차이점에 대해 알아보기

웹 개발자 직군 정리

출처 https://emptydream.tistory.com/3918

웹 개발자 직군 정리 - 백앤드, 프론트 앤드, 퍼블리셔 등

의외로 업계 종사자 중에서도 모르는 사람들이 꽤 많아서 나름대로 정리를 해 봄. 이것은 개인의 경험을 정리한 것이고, 조직에 따라 상황에 따라 다른 기준이 적용될 수 있으므로 딱 정답이라

emptydream.tistory.com

프론트엔드 개발자 Front-end developer
1. 사용자에게 보이는 로직 부분을 담당 (JavaScript)
2. 로그인 페이지에서 사용자가 아이디, 비밀번호를 전부 잘 입력했는지, 비밀번호가 8자리 이상인지 등을 확인
3. 프론트엔드 개발을 도와주는 라이브러리
  1. jQuery
  2. React.js
  3. Vue.js
백엔드 개발자 Back-end developer
1. 서버에서 웹 서비스가 돌아가는 로직 개발 담당
2. 사용자 로그인 시도시 아이디, 비밀번호 일치하는지 확인
3. 백엔드 개발에 사용하는 언어
  1. Node.js
  2. Python (Django, Flask)
  3. Java (Spring)
  4. GO
데이터베이스 개발자 Database developer
1. 데이터를 어떻게 효율적으로 저장할지 설계하는 역할
2. 아이디, 비밀번호를 어떤 데이터 타입으로 저장하고 암호화할지 설계
3. 데이터베이스 종류
  1. Oracle
  2. MySQL (MariaDB)
  3. MongoDB
웹 퍼블리셔 Web publisher
1. 사용자에게 보이는 디자인 부분을 담당 (HTML, CSS)
2. 로그인 화면에서 아이디, 비밀번호 텍스트박스, 로그인 버튼을 예쁘게 보이도록 꾸미고 배치
3. 퍼블리싱을 도와주는 프레임워크
  1. Bootstrap
  2. Material Design
  3. Tailwind CSS

☝ 우리 수업에서는 프론트엔드와 퍼블리싱 부분을 다룹니다. 특히 프론트엔드 입문 부분에 집중할 예정이고 퍼블리싱 부분은 이미 구현되어 있는 코드를 쉽게 가져다 사용할 수 있는 방법에 대해 알아볼거에요!

1-3. 웹 개발 프로그래밍 언어 및 툴에 대해 알아보기

출처 https://morioh.com/p/8ae9a2ad64a7

How To Make A Website Using HTML CSS And JavaScript Step By Step

Here in this video, you will learn how to make this website design using HTML, CSS and JavaScript. At the top there is a navigation bar with logo and navigation menu. Website's background looks very nice because of angle shape and gradient color.

morioh.com

자바스크립트 JavaScript

프론트엔드 로직 작성에 있어 절대 빠질 수 없는 언어

Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다. 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.[1] 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력이라고 볼 수 있다.

나무위키 발췌

document.write("Hello, world!"); // HTML 문서에 출력된다.
alert("Hello, world!"); // 알림창으로 출력된다.
console.log("Hello, world!"); // 보통 F12(또는 Ctrl+Shift+I / macOS의 경우에는 ⌘+⌥+I)를 누르면 보이는 콘솔 창에 출력된다.

HTML

보이는 부분의 뼈대, 정확하게는 프로그래밍 언어가 아닌 마크업 언어라고 부름.

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        Hello, world!
    </body>
</html>

CSS

보이는 부분의 디자인, 정확하게는 프로그래밍 언어가 아닌 스타일시트 언어라고 부름.

body {
  margin-left: 200px;
  background: #5d9ab2 url("img_tree.png") no-repeat top left;
}

.center_div {
  border: 1px solid gray;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  background-color: #d0f0f6;
  text-align: left;
  padding: 8px;
}

삼형제를 모두 합치면? 이런 형태가 웹의 기본 구조

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin-left: 200px;
  background: #5d9ab2 url("img_tree.png") no-repeat top left;
}

.center_div {
  border: 1px solid gray;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  background-color: #d0f0f6;
  text-align: left;
  padding: 8px;
}
</style>
</head>

<body>

<div class="center_div">
  <h1>Hello World!</h1>
  <p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>

<script>
document.write("Hello, world!");
alert("Hello, world!");
console.log("Hello, world!");
</script>

</body>
</html>

1-4. 가장 쉬운 개발 툴 설치 및 개발 환경 세팅

Visual Studio Code 설치

비주얼 스튜디오 코드(이하 VSCode)는 개발자들이 가장 많이 사용하는 코드 에디터(코드 작성용 메모장)중 하나입니다. 코딩을 도와주는 다양한 플러그인을 무료로 제공하고 자동완성 기능 등이 내장되어 있습니다.

이곳에서 VSCode를 다운로드 받아주세요.

https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

첫 번째 파일 만들기

코드를 작성하기 위해서는 일단 파일을 만들어야 합니다. 먼저 바탕화면에 part1 폴더를 만들고 그안에 3개의 파일을 만들어줍니다. 우리는 매번 똑같이 아래와 같은 파일을 만들거예요.

index.html
sciprt.js
style.css

파일 이름에서도 알 수 있지만 html 파일은 HTML을 작성하기 위해 만든 것이고, js 파일은 JavaScript, css파일은 CSS를 작성하기 위해 만들었습니다. 이 파일들을 한 폴더 안에 넣어주세요.

첫 번째 코드 작성하기

index.html 파일에 아래와 같은 HTML 코드를 입력해봅니다.

<h1>Hello, world!</h1>

우리가 작성한 결과를 보기위해서는 두 가지 방법이 있습니다. 먼저 탐색기(맥: Finder)를 열어 우리가 작성한 index.html 파일을 더블클릭하여 브라우저(구글 크롬 브라우저 권장)로 열어줍니다.

VSCode 확장 프로그램 설치

VSCode의 확장 프로그램을 설치하여 더 쉽게 미리보기를 할 수 있습니다. 왼쪽의 [확장] 메뉴에서 Live Preview를 검색하고 [설치] 버튼을 눌러줍니다. 설치가 완료되면 index.html 탭으로 전환하여 오른쪽 상단의 [미리보기 표시] 아이콘(돋보기 모양)을 눌러줍니다. 이 확장 프로그램을 설치하면 실시간으로 미리보기하며 개발할 수 있어요!

1-5. 복사+붙여넣기로 첫 번째 웹 사이트 만들기

💡 앞으로의 강의를 위해 구글 크롬 브라우저를 설치해주세요!

우리는 이미 만들어진 웹사이트에 들어가서 웹사이트를 복사 붙여넣기해서 첫 번째 웹페이지를 만들어 볼겁니다. 제가 미리 만들어놓은 아래 사이트로 들어가주세요.

http://fc-examples-blog.s3-website.ap-northeast-2.amazonaws.com

Blog Template · Bootstrap v5.2

Sample blog post January 1, 2021 by Mark This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected. This is some additional para

fc-examples-blog.s3-website.ap-northeast-2.amazonaws.com

소스코드 보기

웹 개발자들이 가장 많이 사용하는 기능 중에 소스코드를 확인하는 기능이 있습니다. 크롬 브라우저 상단 메뉴에서 [보기] - [개발자 정보] - [소스 보기] 메뉴를 클릭하여 소스코드를 확인할 수 있어요. (또는 페이지에서 마우스 오른쪽 클릭 [페이지 소스 보기] 메뉴를 선택하여 소스코드를 볼 수 있습니다)

이 소스코드를 전체선택하고 복사(Ctrl + C) 후 index.html에 붙여넣기(Ctrl + V)하면 끝! 이제 다시 Live Preview를 통해 미리보기 해볼까요? (또는 탐색기에서 index.html 파일을 더블클릭하여 열어주세요)

1-6. 첫 번째 웹 사이트 구조 이해하기

출처: https://vertex-academy.com/tutorials/en/create-first-web-page/

How Do You Create Your First Web Page? • Vertex Academy

В этой статье вы познакомитесь с простыми HTML-тегами и создадите свою первую веб-страницу. Мы уверены, что у вас обязательно получится!

vertex-academy.com

설정을 담당하는 head

head는 페이지의 설정을 담당합니다. 제목, 링크, 스타일 등이 들어있지요. 제목을 한 번 바꿔볼까요?

태그 역할

title	페이지 제목
link	CSS 파일 또는 글씨체 경로 지정
style	CSS 작성

내용이 들어있는 body

실제 내용은 body(몸통)에 들어있습니다. 이것저것 바꿔보면서 한 번 미리보기해봐요.

💡 HTML에서 띄어쓰기와 줄바꿈은 페이지에 아무런 영향도 주지 않습니다. 단순히 보기 편하기 위해서 들여쓰기, 줄바꿈을 해요. 들여쓰기를 하기 위해서는 키보드의 Tab을 누릅니다. 줄바꿈을 하는 HTML 태그는 <br/> 입니다.

1-7. 나만의 웹 서비스 개발을 위한 기획 단계

사람들이 많이 검색하는 것(필요로하는 것)이 무엇인가

사람들이 많이 검색하고 우리 서비스에 들어와야 우리가 돈을 많이 벌 수 있겠죠? 따라서 먼저 우리가 해야할 것은 사람들이 가장 많이 검색하는 단어를 알아보는 것입니다. 우리는 구글 트렌드에서 인기 검색어를 미리보기 할 수 있습니다.

구글 트렌드: https://trends.google.com/trends/

Google 트렌드

2023년 올해의 검색어 Google 트렌드 데이터를 통해 한 해를 살펴보세요.

trends.google.com

그리고 일자별로 검색어를 여러개 비교할수도 있죠.

이미 만들어진 서비스 찾아보기

우리가 계산기를 만들기로 결정했다고 합시다. 이제 어떤 계산기들이 있는지 살펴보는 시간이죠. 구글 또는 네이버에 “계산기”라고 검색하여 다른 서비스들을 벤치마크 합니다.

어떤 기능을 추가할 것인가 기획하기 (우리만의 강점 부각하기)

다른 사람과 완전히 똑같은 서비스를 만들면 경쟁력이 없겠죠? 똑같은 계산기를 만들더라도 디자인이 더 이쁘다면 사람들이 더 좋아할 것입니다. 또는 똑같은 메모장이라도 저장기능이 있어서 다음에 방문했을 때 전에 써놓은 것이 다시 보인다면 더 좋겠죠. 똑같은 타이머라도 이전에 설정한 시간이 저장되어 있다면 좋겠죠.

검색 엔진 최적화하기

서비스를 만들어서 배포했다면 검색이 잘되도록 최적화하는 작업이 있다면 사람들이 검색했을 때 우리가 만든 서비스를 더 많이 찾을 수 있을거에요.

이 온라인 메모장의 월간 페이지 방문수는 55만 곱하기 1.47 = 808,500회 입니다. 이 숫자를 구글 애드센스 웹사이트에 들어가 예상 수익을 계산해봅시다.

현재글Part 1. 초보자도 가능한 웹 개발 기초와 실습

digital520

Today :
Yesterday :

digital520