Open in app

Sign in

Write

Sign in

웹 개발을 시작하기에 알아야하는 가장 기초적인 지식

스터디 자료

John Cho
14 min readFeb 1, 2020
오랜만이군..

2월부터 디자이너를 위한 웹 개발 스터디를 진행하기로 했다. (자의다) 아무래도 스터디 시간 내에 설명할 수 있는 분량에는 조금 한계가 있어서, Medium에 시리즈로 글을 올려볼까 생각한다.

일단 첫번째 글은 웹 개발을 시작하기에 알아야하는 가장 기초적인 지식, 즉 Web 101이겠다.

여기서 다루는 내용

  1. Front-End? Back-End?
  2. 웹 Front-End를 이루고 있는 기술
  3. HTML, CSS 문법
  4. 도메인, 호스팅, 배포

Front-End? Back-End?

‘웹 개발은 크게 프론트엔드 개발과 백엔드 개발로 나눌 수 있다.’ 고는 하지만 이 영역의 깊이가 너무 각각이라서 이렇게 큰 분류로 나누는 것이 그렇게 의미가 있나싶다. 아래 내용은 웹에 한정된 내용이라는 점은 참고하시길 바란다.

Front-End 개발은 유저와 상호작용이 일어나는 인터페이스 전체를 개발한다. 주로 사용하게 되는 언어는 HTML, CSS, JavaScript 정도이긴 한데, 이는 언어를 의미할 뿐이고 실제로는 더 많은 내용을 다룬다.

Back-End 개발은 유저에게는 보이지 않는 튼튼한 서버와 인프라를 구축한다. 서비스를 구현할 때 서버의 역할도 매우 중요하기 때문에, 어떤 형태의 서버를 이용할 지부터 시작해서 서버 구조, 데이터 구조 등 다양한 측면을 포괄적으로 다룬다.

여기서도 세분화하게 쪼개면 UX 엔지니어, FE 엔지니어, SRE, DevOps, Graphics Engineer 등 다양한 분포로 쪼갤 수 있지만 여기서는 편의상 FE 개발과 BE 개발로만 나누도록 하겠다.

두 영역 모두 중요하다는 점을 다시 알아두면 좋겠다. 어떤 서비스든 FE만 가지고 무언가를 하거나 BE만 가지고 무언가를 할 수는 없고 서로의 영역을 적절히 조화롭게 어우러지게 서비스를 만들어야한다.

웹 Front-End를 구성하는 기술들

우선 유저들이 웹을 사용하는 시나리오를 생각해보자.

  1. 스마트폰을 잠금 해제한다.
  2. 브라우저 (Safari, Chrome 등)를 실행한다.
  3. 주소창을 클릭한다.
  4. 접속하고자 하는 사이트의 도메인을 입력한다
  5. 완료 버튼을 누른다.
  6. 웹 사이트가 화면에 노출된다.
  7. PROFIT!

여기서 굵게 표시한 것들은 중요하니 먼저 설명해보도록 하겠다.

브라우저

브라우저는 유저가 웹 페이지에 접근하여 콘텐츠를 소비하기위해 사용하는 프로그램이다. 국가별로 브라우저 점유율이 다르지만 지금은 Chrome이 고공 행진을 하고 있다.

https://gs.statcounter.com/

스탯 카운터의 자료를 아주 신뢰할 필요는 없지만 글로벌 트렌드가 이렇구나 정도로 생각해주면 좋겠다. 현재 메인 스트림에 있는 브라우저는 다음과 같다.

  1. Chrome (Google)
  2. Safari (Apple)
  3. Edge (Microsoft)
  4. Samsung Internet (Samsung, Mobile Only)
  5. Whale (네이버, 웨일 많이 써주세요!)
  6. Firefox (Mozilla Foundation)
  7. Opera (Opera Software)
  8. Internet Explorer (Microsoft, 한국에서는 점유율 높습니다)

현재 Chrome이 1위이기는 하나, 유저가 어떤 브라우저로 접근할 지 모르기 때문에 서비스를 개발할 때에는 항상 여러 브라우저에서 체크해본다. 이 작업을 크로스 브라우징이라고 부른다.

보통 한국에서 크로스 브라우징으로 대응하는 범위는

  1. Chrome
  2. Safari
  3. Edge
  4. Samsung Internet
  5. Internet Explorer 11
  6. Android 4.4+

정도이다. IE 11이나 Android 4.4는 레거시 브라우저에 속하기는 하지만 유저층이 아직도 꽤 높기 때문에 지원하고 있다.

유저가 웹 페이지에 접근할 때는 보통 브라우저로 접근하지만, WebView 등의 특수한 상황도 있기 때문에 보통 개발자가 ‘유저가 내 사이트에 접근하는 도구’를 표현할 때는 유저 에이전트 (User-agent, UA) 라고 표현한다.

HTML, CSS, JavaScript, Web Assembly (WASM)

HTML

여러분들이 웹에서 볼 수 있는 언어는 위 4가지 언어다. (디테일하게 따지면 SVG나 MathML 등도 이야기할 수 있겠지만 지금은 위 4가지만 알아두고 넘어가자..) 여기서도 Web Assembly는 다루지 않을 예정이며 HTML, CSS, JavaScript에 대해서만 소개하도록 하겠다.

HTML은 웹에서 의미를 담당한다. 의미를 담당한다는 건 여러분들이 문서를 작성할 때나 웹 어플리케이션을 작성할 때 올바른 HTML을 작성해야 유저들이 불편함 없이 웹 콘텐츠에 접근하여 사용할 수 있다는 것을 의미한다.

특히 검색 엔진이 콘텐츠를 가져갈 때 (크롤링이라고 부른다) 의미있는 HTML을 사용하여 검색 엔진이 더 콘텐츠를 잘 크롤링해갈 수 있게 할 수 있고, 보조공학기기 (AT)를 이용하는 장애인이 더 웹 콘텐츠에 잘 접근할 수 있게 만들어 준다.

또한 브라우저에서 기본으로 지원하는 일부 동작들은 올바른 HTML을 사용할 때만 동작하기 때문에 여러분들이 브라우저의 도움을 받으면서 웹 페이지를 구현하고 싶다면 올바른 HTML은 선택이 아닌 필수다.

CSS

CSS는 웹에서 표현을 담당한다. 여기서 말하는 표현이란 말 그대로 화면에서 보여주는 모든 것을 의미하며, 기초적인 폰트 수정 / 레이아웃 교체 등의 간단한 작업부터 애니메이션 구현, 테마 구현 등 많은 포인트에서 CSS를 사용하게 된다.

때로 HTML / CSS를 배우다 보면 HTML의 일부 요소들을 ‘표현’ 목적으로 사용하고 싶은 경우가 종종 발생하는데, HTML은 의미를 나타낼 뿐이지 표현 목적과는 다르다는 점에 대해서 유의하시길 바란다.

이 개념이 지금은 아주 헷갈리겠지만 추후에 CSS에 익숙해지면 금방 터득할 수 있다. (그리고 이게 노가다라는 사실도 금방 알게될 것이다)

자바스크립트

자바스크립트는 웹에서 동작을 담당한다. 자바스크립트가 없는 HTML과 CSS만으로 유저와 상호 작용하는 데에는 분명한 한계점이 있기 때문에 여러분들이 조금이라도 욕심이 있다면 자바스크립트를 배우는 것을 추천한다.

예를 들어 현재 스터디에서 목표로 하고 있는 li.me 사이트를 만든다고 할 때 자바스크립트로는 이런 일들을 해야한다.

  1. 유저가 스크롤 하는 행위를 캐치한다.
  2. 스크롤의 움직임에 따라서 다른 CSS 값을 부여한다.
  3. 스크롤이 특정 요소에 도달했을 때 해당 요소를 고정한다.
  4. 유저가 동영상 목록을 클릭하면 레이어 모달을 노출시켜준다.

어떻게 보면 ‘논리적인 계산 행위'가 필요한 모든 작업에서 자바스크립트를 이용해야한다. Modern Front-End 에서는 자바스크립트를 좀 더 폭 넓게 사용하지만, 해당 내용은 추후에 더 자세하게 다루도록 하겠다.

화면 (스크린)

화면은 유저가 사용하는 물리적 영역을 의미한다.

Front-End 개발자는 유저의 환경을 강제할 수 없기 때문에 유저가 어떤 스크린을 사용하는 지, 스크린 크기는 어떤 지, 색 표현력은 어떤 지, 픽셀 표현력은 얼마나 좋은 지를 모두 대응하여 작업을 진행해야한다.

기존에는 단순하게 Desktop, Mobile로 나누는 경향이 있었지만, 현재는 스크린 크기가다양하고 태블릿 환경도 고려해야하기 때문에 이제 사이트를 Desktop이냐 Mobile이냐로 나누는 것은 그렇게 생산적이지는 않다.

또한 브라우저의 크기를 바꾸는 것 또한 가능하기 때문에, 설령 13인치 스크린을 위한 Desktop 페이지를 개발했다고 하더라도 유저가 실제로 어떻게 브라우저를 사용하는 지는 예측할 수 없다.

유저가 실제로 보고 있는 영역을 viewport라고 부른다.

반응형 웹 디자인 (Responsive Web Design)은 한 사이트에서 유저가 사용하는 환경에 따른 최적의 인터페이스를 제공한다는 개념에서 출발한 디자인 방법론이다.

어떤 환경에서 접근하더라도 최상의 사용성을 제공해주는 것이 목표다.

따라서 Front-End 개발자는 개발을 하거나 디자인을 진행할 때 디자이너와 충분한 협의를 통해 레이아웃을 어떻게 잡을 지, 폰트 사이즈는 어떻게 할 지 등을 결정하면 추후에 좋은 업무 관계를 이어갈 수 있을 것이다.

또한 프로젝트 초기부터 반응형 웹 디자인을 고려하며 작업하는 것과 추후에 대응하는 작업은 비용 차이가 꽤 크기 때문에 반응형 웹 디자인을 잘 이해하고 작업하기를 바란다.

HTML, CSS 문법

HTML

HTML은 HTML 파일 내에 작성하며, 기본 템플릿은 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>사이트의 제목</title>
</head>
<body>
  <p>사이트의 콘텐츠</p>
</body>
</html>

이제 여러분들은 위 템플릿을 적절히 수정해나가면서 HTML을 작성해나갈 것이다.

HTML은 여러 요소 (Element)로 구성되어 있는데, 이 요소들은 HTML 버전에 따라 호환하는 것이 다르기 때문에 HTML을 되도록 최신 버전으로 유지하는 것이 중요하다. 예를 들어 앞으로 가장 많이 쓰게 될 DIV 라는 요소를 작성해보자.

<div>콘텐츠</div>

하나의 요소는 크게 세가지 구성을 가진다.

  1. 여는 태그 <div>
  2. 내용 콘텐츠
  3. 닫는 태그 </div>

때로 닫는 태그를 생략할 수 있는 요소가 있는데, 그런 요소들을 빈 요소 (void element)라고 부른다.

<input>

요소를 더 세밀하게 제어하기 위해 속성과 속성 값을 추가할 수 있다. 앞으로 종종 다루겠지만 모든 요소에서 공통으로 많이 쓰이는 속성은 id 속성과 class 속성이다.

두 속성의 가장 큰 차이점은 id 속성은 중복 사용이 불가능하고 class 속성은 중복 사용이 가능하다는 점이다.

<div id="text-area"> ID는 중복해서 사용할 수 없습니다. </div><div class="title-area">Class는 중복해서 사용할 수 있습니다.</div>
<div class="title-area">Class는 중복해서 사용할 수 있습니다.</div>

따라서 id 속성은 유니크 값을 부여해서 해당 요소를 식별해야할 때 주로 사용하고, class 속성은 같은 스타일을 가지는 요소들에 CSS를 부여하거나 동작을 부여할 때 사용한다.

특정 요소에서 어떤 속성이 가능한 지에 대해서는 MDN 문서를 보는 걸 권장한다. 또한 대부분의 요소에 대한 의미도 함께 설명해주기 때문에 MDN 문서를 보면서 이해하는 것이 중요하다. (번역 안되어 있으면 직접 번역해도 되고, 나에게 말해줘도 좋다)

예를 들어 div 요소는:

https://developer.mozilla.org/ko/docs/Web/HTML/Element/div

CSS

CSS 없이 HTML을 사용하는 건 가능하지만, HTML 없이 CSS를 사용하는 건 불가능하다. CSS는 HTML과 밀접한 관계를 가지고 있기 때문에 올바른 HTML을 작성하는 것이 추후에 CSS 작업 공수를 크게 줄여준다.

브라우저에 기본적으로 정의되어있는 CSS 속성이 일부 있다. 이는 HTML이 문서를 표현하기 위한 언어였기 때문에, HTML만 작성하더라도 전체 페이지가 문서처럼 보일 수 있도록 지원하는 것이다. 또한 아까 말했지만 CSS가 표현 영역 전체를 차지하기 때문에 HTML을 표현해주기 위해서는 CSS가 기본적으로 선언되어 있어야한다.

예를 들어서 문장을 표현하는 요소인 P 요소의 기본 스타일은 아래와 같다.

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

이렇듯 브라우저가 미리 선언해두는 CSS 속성들을 User-agent Stylesheet 라고 부른다. CSS는 셀렉터와 속성, 속성값으로 구성된다.

셀렉터 (Selector)는 어떤 요소에 해당 스타일을 부여할 지 결정한다. 위 예제에서는 p 요소에 스타일을 부여한다.

속성과 속성값은 요소에 적용할 스타일을 결정한다. CSS의 꽃이기도 하고, 이 내용은 스터디 당일에 더 자세히 다루겠지만 첫날 다룰 속성들은 크게 아래와 같다.

Layout - Box
* width
* height
* margin
* padding
* border
* displayfont 관련
* font-size
* line-height
* font-family
* color
* text-shadowLayout - 자유 위치 지정
* position
* left
* top
* right
* bottom
* z-indexLayout - 유동형 레이아웃
* display: flex
* flex-direction
* flex-wrap
* order
* justify-content
* align-itemsAnimation
* transform
* translate투명도
* opacity배경
* background
* background-color
* background-image
* background-repeat
* background-size

CSS는 실제로 해보면서 감을 익히는 게 중요하니 스터디 당일에 연습해보도록 하자. (첫날은 레이아웃은 다루지 않을 수도 있다)

도메인, 호스팅, 배포

여러분들이 만든 사이트를 제3자에게 보여주려면 호스팅 서버를 구축하고, 해당 서버에 배포한 후에 도메인을 연결해주는 작업이 필요하다. 우선 ‘이런 게 필요하구나!’ 정도로 이해해주어도 좋겠다.

서버는 단순히 생각하면 24시간동안 돌아가는 컴퓨터다. 각 컴퓨터가 네트워크에 연결되면, 해당 컴퓨터와 다른 컴퓨터가 통신하기 위해서 IP 주소가 할당된다. 모든 컴퓨터는 IP 주소가 있어야 다른 컴퓨터와 통신이 가능하다.

IP 주소는 IPv4와 IPv6 두가지 종류가 있는데, 우리가 기존에 사용하던 건 대부분 IPv4고 지금은 IPv6를 더 많이 활용한다. (자동차 번호가 4자리에서 6자리로 늘어나고, 이제 7자리로 늘어난 것처럼 IP 주소도 할당된 걸 다 사용해서 자릿수가 늘어났다)

예를들어 IP 주소는 이렇게 생겼다.

IPv4인 경우
127.0.0.1 (당신의 로컬 개발환경의 IP다)IPv6인 경우 
2001:0DB8:0000:0000:0000:0000:1428:57ab
2001:0DB8:0000:0000:0000::1428:57ab
2001:0DB8:0:0:0:0:1428:57ab
2001:0DB8:0::0:1428:57ab
2001:0DB8::1428:57ab

같은 네트워크에 연결되어있고, 상대방의 IP 주소를 알면 해당 IP 주소로 접근하는 것이 가능하다. (스터디 시간에 실습해보겠다)

여러분들의 집에 있는 컴퓨터도 24시간 실행시켜놓은 상태로 고정 IP 주소를 받아서 돌리면 외부 네트워크에서 접근하는 것이 가능하지만, 구태여 그러고싶지 않다면 클라우드 서비스를 이용하는 것을 추천한다.

개인적으로는 GCP (Google Cloud Platform)를 주로 사용하는 편이다. 특정한 공간에 서버를 두고, 해당 서버를 호스팅 목적으로 사용하면서, 해당 서버에 작업한 코드를 올리는 작업을 배포라고 칭한다. (물론 현실세계의 배포는 달리는 마차에서 바퀴 빼고 다 교체하거나, 바퀴마저 교체하는 경우도 있다, 어떻게 달리지?)

모든 사람들이 Naver의 IP를 외워서 접근하기는 어렵기 때문에, 더 쉽게 접근하기 위해서 IP 주소와 도메인 주소를 연결시켜놓는다. 예를 들어 https://naver.com 이라고 입력하면, 해당 도메인과 연결되어있는 IP 주소를 찾아가서 접속하게 된다.

또한 서비스가 커질 수록 호스팅 비용도 커지기 때문에, 같은 도메인이라고 할 지라도 여러개의 호스팅 서버를 사용하고 여러개의 IP 주소와 연결해둬서 유저가 접속하는 시점에 가장 원활하게 접속 가능한 서버에 연결시키는 등의 작업도 진행한다. 이런 작업은 대부분 인프라 엔지니어와 백엔드 엔지니어가 진행한다. (클라우드 쓰면 자동으로 해주기도 한다)

마무리

아마도 분량조절에 실패하지 않았다면 위 내용으로 3시간 정도 진행하게 될 예정이다. (실습도 할테니) 정리하다보니 웹 사이트를 하나 개발하기 위해 생각보다 많은 지식이 필요하구나 싶기도 하고, 일부 내용은 생략한 것들도 많아서 내용을 더 채워볼까 싶기도 하다.

하지만 일단 이정도 내용만 알아두면 기본적인 개발은 시작 가능하니 일단 이렇게 진행해보도록 하자!

--

--

John Cho
John Cho

Written by John Cho

1.95K Followers
221 Following

Staff Software Engineer

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams