import {
 A, Bold, Details, Dl, H, Message, NoteBottom, NoteTop, P,
 Quote, Score, Youtube, Ul, Ol, Em, Gray, Code, Kbd, Image,
 Q, Strong, Spoiler, Strike, Line, Mark, HtmlGuideMessage, Name,
 Dt, Dd, ProgrammingGuideMessage
} from '@/components/Post';

<ProgrammingGuideMessage />

이번 글은 **개발을 위한 프로그래밍 지식 시리즈 제 6편**입니다. 마지막 글입니다. 우리는 지금까지 컴퓨터의 역사를 알아봤고 프로그래밍 언어의 흐름을 알아봤고 인터넷의 등장과 웹의 흐름을 알아봤습니다. 전문적인 지식은 아니더라도 대강이나마 살펴봤죠. 이제 우리는 **웹 프로그래밍**에 대해 파고들 시간입니다.

어차피 우리는 초보고 견문이 별로 없는 문외한들입니다. 실력이 있다면 이런 글을 보고 있지 않겠죠 아마도. 아무튼, 우리의 수준은 다 비슷비슷합니다. 높지는 않죠. 우리가 **웹 프로그래밍을 공부하기 위해서는 웹 프로그래밍이 무엇인가 정도는 알아야**겠죠. 그리고 그 안에서 어떠한 개념들이 있는지는 알고 넘어가야 비로소 배울 준비가 되었다라고 할 수 있을 겁니다.

그래서 마지막 글인 이번 글의 주제는 웹 프로그래밍입니다.

# 웹 프로그래밍
웹 프로그래밍이라는 개념이 등장한 것은 사실 그렇게 오랜 과거는 아닙니다. 웹을 프로그램의 일종이라고 보게 된 것은 얼마 안됐기 때문이죠. 웹 프로그래밍 자체는 웹 사이트를 프로그래밍하는 것을 말합니다. **웹 사이트는 단순 문서일 뿐이다**라는 관점이 대다수였던 과거와는 달리 **웹도 이제는 프로그래밍적인 접근이 가능해졌다**라는 관점이 나타났고 이에 따라 웹 프로그래머라는 직종이 나타나기 시작했고, 그들이 하는 게 바로 웹 프로그래밍입니다.

![트위터의 모습이다. 트위터 또한 웹 애플리케이션이다.](https://drive.google.com/uc?export=view&id=113f5jyD_d2shNlBjzS_5ZcsW388eLuvJ)

![우리가 흔히 보는 유튜브의 모습. 유튜브는 웹 애플리케이션이라고 할 수 있다.](https://drive.google.com/uc?export=view&id=13XmNoV7fwl2MIhU5-44NAnURGosp-8Nk)

**트위터**나 **페이스북**, **유튜브**처럼 사용자와 웹이 상호작용을 할 수 있는 서비스를 제공하는 웹 사이트들은 단순한 문서가 아니라 웹 프로그램 혹은 웹 애플리케이션이라고 부를 만한 수준의 사이트라고 할 수 있는 겁니다. 이 블로그 같은 경우를 생각해보면 이 블로그는 그냥 읽는 것만 가능하죠. 웹 프로그래밍을 통해서 만든 블로그이긴 하지만 결과물은 웹 프로그램이라고는 할 수 없죠. 이런 경우도 있습니다.

웹의 세계는 계속해서 변하고 있습니다. 위의 개념도 사실은 **확실하게 구분된 것은 아닙니다.** 앞으로 좀 더 다양한 웹 기술들이 나타날 것이고, 점점 그 경계가 깨지고 있다는 것은 확실한 것이죠.

그러니까 웹 프로그래밍이라는 것은 단순히 웹 디자인<NoteTop number='1' />이나 웹 퍼블리싱<NoteTop number='2' />을 넘어서 웹과 사용자의 상호작용이 가능한 인터랙티브한 프로그램을 구현하는 것이라고 할 수 있는 것입니다. 물론 언제나 그렇지는 않고 보통은 서비스를 개발하는 것을 목적으로 합니다.

처음에는 그냥 자바스크립트만으로 프로그래밍을 했지만 **Node.js**가 빛을 발하기 시작하면서 다양한 자바스크립트를 이용한 **라이브러리, 프레임워크**들이 나타나기 시작했습니다. **타입스크립트(TypeScript)**도 Node.js의 패키지 매니저 시스템을 이용한 **자바스크립트의 슈퍼셋 언어**입니다. 이런 것들로 인해서 자바스크립트는 상당히 강해졌다는 것이죠.

심지어는 웹 프로그래밍 뿐만 아니라 **데스크탑 프로그램**까지도 만들어낼 수 있습니다. **일렉트론(Electron)**이라는 것을 이용하면 말이죠. **리액트 네이티브(React Native)**나 **플러터(Flutter)**를 이용하면 **스마트폰 애플리케이션**도 만들 수 있습니다. 당연하게도 **게임**도 가능하긴 한데.. 이 부분은 그닥 추천되는 부분은 아닌 듯합니다.

이렇게 말을 해도 초심자인 우리는 잘 이해가 가지 않겠죠. 어쩔 수 없습니다. 우리가 이제 곧 웹을 만들고, 발전시키는 과정을 스스로 체험할 것이지만 프로그래밍의 영역에 발을 들이는 것은 **자바스크립트를 만나고 난 다음부터**일 것이고 그 뒤에 알아도 이상하지 않습니다. 그렇기 때문에 이해가 가지 않는다고 의기소침하거나 의욕을 잃을 필요는 전혀 없다는 겁니다. 처음인데 모르는 것은 그냥 **당연**합니다. 처음인데 익숙하면 그게 이상하죠.

# 웹 프로그래밍의 종류
30년도 안된 짧은 기간동안 웹 프로그래밍은 크게 발전을 해왔고 세가지의 부류로 나뉩니다.

## 프론트 엔드(Front-End)
하나는 **프론트 엔드(Front-End)**입니다. 화면에 보이는 부분을 프로그래밍하는 부류입니다. 단순히 레이아웃을 만들고 디자인을 입혀 결과물을 내는 것과는 다릅니다. 프로그램적인 기능을 구현하는 것에 초점이 맞춰져 있습니다. **프론트 엔드 개발자는 HTML, CSS, JavaScript를 전부 다룰 수 있어야** 합니다. 개개인의 디자인적 능력과는 별개로 말이죠.

프론트 엔드는 **클라이언트 사이드**라고도 합니다.

## 백 엔드(Back-End)
또 하나는 **백 엔드(Back-End)**입니다. 프론트 엔드가 보이는 화면을 개발하는 것이라면, 백 엔드는 보이지 않는 부분을 개발합니다. 정확히는 클라이언트와 서버끼리 데이터를 주고 받는데 그 데이터를 처리하는 일을 맡습니다. 보통 데이터베이스, 클라이언트와의 소통을 위한 API를 개발 합니다. 말 그대로 서버와 관련된 개발을 하는 부류입니다.

경우에 따라서는 데이터베이스는 따로 다른 사람이 개발을 하기도 합니다. 백 엔드는 **서버 사이드**라고도 합니다.

## 풀스택(Full Stak)
마지막 부류가 프론트 엔드와 백 엔드를 둘 다 할 줄 아는 **풀스택(Full Stak)**입니다. 하나만 할 줄 알아도 직업으로서 갈 길이 생기는데, 두개를 다 할 수 있다면 더욱 길이 열리게 됩니다. 풀스택 개발자가 아니더라도 **프론트 엔드 개발자와 백 엔드 개발자는 서로의 영역에 대해 어느정도는 알고 있어야** 합니다. 그래야 **원활한 소통**이 가능하고 **협업**을 이루어낼 수가 있기 때문입니다.

쉽게 말하면 둘 다 공부하면 좋다. 라는 것입니다.

## 웹 프로그래밍 언어
웹 프로그래밍에 쓰이는 언어는 기본적으로는 총 세가지입니다.

웹의 뼈대이자 마크업을 담당하는 **HTML**. 웹의 피부이자 디자인, 스타일을 담당하는 **CSS**. 웹의 근육, 뇌이자 웹에 대한 전반적인 것들 컨트롤 하는 **자바스크립트** 정도가 있겠습니다.

사실 이 언어들 말고도 웹 프로그래밍에 쓰이는 언어는 **다양한 편**입니다. **파이썬**도 그렇고 **C#**도 그렇고 **자바**도 그렇고 아무튼 다양합니다. 처음부터 이렇게 많은 걸 알 필요는 없습니다. 오히려 머리만 아프죠. 가장 일반적이고 전형적인 루트를 먼저 가보고 그 다음에 다른 길을 모색하는 것도 나쁘지 않습니다.

이게 왜 그런가하면 웹의 시장이 커지면서 다른 언어들도 **웹 개발을 지원하는 경우**가 생겨왔기 때문입니다. 이는 전부 웹의 중요성을 알아서 자신들의 영역을 확대하려고 하는 것이죠. 저는 자바스크립트로 개발을 하려고 배우고 있는 중이기 때문에 이 블로그에서도 자바스크립트에 대한 부분을 집중적으로 다룹니다.

# 힘들지도 모르는 오르막길
아무튼간에 우리는 앞으로 위에서 언급된 이 세가지의 언어에 대해 배워 갈 것입니다. 함께 말이죠. **우리는 처음부터 프로그래밍을 하지는 않습니다.** 웹 퍼블리싱부터 절차적으로 밟고 올라갈 겁니다. 갈 길이 멀지도 모릅니다. 하지만 천천히 앞으로 나아가면 생각보다 빠르게 목표지점에 도달할 수 있을지도 모르죠. 그러기 위해서는 가장 먼저 HTML부터 정복해보는 게 필요하겠죠?

**같이 공부하는 사람들이 있다면 공부는 언제나 더 즐겁습니다.** 같이 공부할 사람을 만들고 여러분과 비슷한 사람들을 만나세요. 여러분의 공부는 더 재밌어질 것이고 공부의 효율은 올라갈 겁니다.

# 공부를 하는 목적
또한 여러분들은 단순히 공부를 하는 게 아니라 **목적을 만들어야 합니다.** 목적이 없는 공부는 쉽게 지치게 됩니다. 지식을 그저 알려고 하는 건 의미가 없습니다. 사용할 곳이 있어야 비로소 의미가 있는 것이죠. 여러분들은 왜 프로그래밍을 배우려고 하시는 것일까요. 저는 모릅니다. 하지만 여러분들은 알겠죠.

그렇다면 목적을 들여다보세요. 없다면 만드세요. 무엇이든 좋습니다. **목적은 크게. 멀리 있는 것을 설정**하면 더 좋습니다.

목적이 설정되면 그 다음엔 목표입니다. 목적을 달성하기 위해 **간단한 목표**부터 만들어보세요. 저같은 경우는 일본어를 전공했고 일본어를 가르치는 웹 사이트를 만들고 싶었습니다. 그렇게 HTML을 배우고 CSS를 배우고 자바스크립트를 배우기 시작했습니다.

![주사위를 굴릴 수 있는 DiceRoll](https://drive.google.com/uc?export=view&id=1LkSIAuQ726zgrAAg_c9WPpNA_itc24Vy)

자바스크립트를 배우면서 처음으로 만든건 주사위 프로그램이었습니다. 단순했지만 어려웠죠. 높은 벽을 만났기 때문에 그 벽을 넘기 위해서 공부를 할 수 있었습니다. 그렇게 만든 프로그램은 바로 <A href='https://thediceroll.github.io/' type='normal'>DiceRoll</A> 입니다. TRPG라는 것을 할 때에 만들었던 것인데 지금도 사용하고 있습니다.

그 뒤로도 천천히 공부를 하고 있는 중입니다. 그리고 이렇게 정리를 하면 머리에 더 잘 남으니까 가이드도 작성하고 있죠. 중요한 건 이게 아니고, 우리끼리 목표를 하나 만들어봅시다. HTML을 배워서 간단한 페이지를 하나 만들어보는 겁니다. 목표도 정해졌겠다. 그럼 달려봅시다. [웹 개발을 위한 HTML 가이드 모음](/post/2021-05-02-01-complete-html-guide) 이 링크를 클릭하면 HTML 가이드의 목록을 확인할 수 있습니다.

이제부터 우리는 한 배를 탄 겁니다. 개발을 위한 프로그래밍 지식은 여기까지입니다. 추후에 필요한 내용이 있으면 업데이트를 하도록 하고 새롭게 알게 되는 내용이 있어도 업데이트를 할 겁니다. 아무튼, 여기까지 달려오느라 고생 많으셨습니다. 이제부턴 진짜 공부를 시작해봅시다.

<NoteBottom number='1' first={true}>웹을 구현하기에 앞서 기획을 세우는 것으로, 요소들의 레이아웃과 상세한 구격을 설정하는 과정을 말한다. 최종적으로 완성될 이미지를 전달하기도 하며, <A type='normal' href='https://www.figma.com/'>Figma</A> 등의 디자인 툴을 통해서 웹 퍼블리셔와 협업을 하기도 한다. 웹 디자인을 전문적으로 하는 사람을 웹 디자이너라고 한다.</NoteBottom>
<NoteBottom number='2'>디자인을 바탕으로 웹을 구현하는 것을 퍼블리싱이라고 한다. 이를 전문적으로 하는 사람을 웹 퍼블리셔라고 부른다.</NoteBottom>

이번 글은 개발을 위한 프로그래밍 지식 시리즈 제 6편입니다. 마지막 글입니다. 우리는 지금까지 컴퓨터의 역사를 알아봤고 프로그래밍 언어의 흐름을 알아봤고 인터넷의 등장과 웹의 흐름을 알아봤습니다. 전문적인 지식은 아니더라도 대강이나마 살펴봤죠. 이제 우리는 웹 프로그래밍에 대해 파고들 시간입니다. 어차피 우리는 초보고 견문이 별로 없는 문외한들입니다. 실력이 있다면 이런 글을 보고 있지 않겠죠 아마도. 아무튼, 우리의 수준은 다 비슷비슷합니다. 높지는 않죠. 우리가 웹 프로그래밍을 공부하기 위해서는 웹 프로그래밍이 무엇인가 정도는 알아야겠죠. 그리고 그 안에서 어떠한 개념들이 있는지는 알고 넘어가야 비로소 배울 준비가 되었다라고 할 수 있을 겁니다.

“ 백 엔드 ” 태그 관련 포스트 1건

개발을 위한 프로그래밍 지식 6편 - 웹 프로그래밍