개발을 위한 프로그래밍 지식시리즈는 프로그래밍 공부를 하기에 앞서 알아서 나쁠 것 없는 정보들을 먼저 접하는 것으로부터 구상했습니다. 컴퓨터와 프로그래밍의 역사를 들여다보고 인터넷과 웹의 역사를 들여다보는 것이 목적입니다. 시리즈의 포스트를 모아둔 글은 이 링크로 넘어가시면 됩니다.
이번 글은 개발을 위한 프로그래밍 지식 시리즈 제 6편입니다. 마지막 글입니다. 우리는 지금까지 컴퓨터의 역사를 알아봤고 프로그래밍 언어의 흐름을 알아봤고 인터넷의 등장과 웹의 흐름을 알아봤습니다. 전문적인 지식은 아니더라도 대강이나마 살펴봤죠. 이제 우리는 웹 프로그래밍에 대해 파고들 시간입니다.
어차피 우리는 초보고 견문이 별로 없는 문외한들입니다. 실력이 있다면 이런 글을 보고 있지 않겠죠 아마도. 아무튼, 우리의 수준은 다 비슷비슷합니다. 높지는 않죠. 우리가 웹 프로그래밍을 공부하기 위해서는 웹 프로그래밍이 무엇인가 정도는 알아야겠죠. 그리고 그 안에서 어떠한 개념들이 있는지는 알고 넘어가야 비로소 배울 준비가 되었다라고 할 수 있을 겁니다.
그래서 마지막 글인 이번 글의 주제는 웹 프로그래밍입니다.
웹 프로그래밍
웹 프로그래밍이라는 개념이 등장한 것은 사실 그렇게 오랜 과거는 아닙니다. 웹을 프로그램의 일종이라고 보게 된 것은 얼마 안됐기 때문이죠. 웹 프로그래밍 자체는 웹 사이트를 프로그래밍하는 것을 말합니다. 웹 사이트는 단순 문서일 뿐이다라는 관점이 대다수였던 과거와는 달리 웹도 이제는 프로그래밍적인 접근이 가능해졌다라는 관점이 나타났고 이에 따라 웹 프로그래머라는 직종이 나타나기 시작했고, 그들이 하는 게 바로 웹 프로그래밍입니다.
트위터나 페이스북, 유튜브처럼 사용자와 웹이 상호작용을 할 수 있는 서비스를 제공하는 웹 사이트들은 단순한 문서가 아니라 웹 프로그램 혹은 웹 애플리케이션이라고 부를 만한 수준의 사이트라고 할 수 있는 겁니다. 이 블로그 같은 경우를 생각해보면 이 블로그는 그냥 읽는 것만 가능하죠. 웹 프로그래밍을 통해서 만든 블로그이긴 하지만 결과물은 웹 프로그램이라고는 할 수 없죠. 이런 경우도 있습니다.
웹의 세계는 계속해서 변하고 있습니다. 위의 개념도 사실은 확실하게 구분된 것은 아닙니다. 앞으로 좀 더 다양한 웹 기술들이 나타날 것이고, 점점 그 경계가 깨지고 있다는 것은 확실한 것이죠.
그러니까 웹 프로그래밍이라는 것은 단순히 웹 디자인1이나 웹 퍼블리싱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 입니다. TRPG라는 것을 할 때에 만들었던 것인데 지금도 사용하고 있습니다.
그 뒤로도 천천히 공부를 하고 있는 중입니다. 그리고 이렇게 정리를 하면 머리에 더 잘 남으니까 가이드도 작성하고 있죠. 중요한 건 이게 아니고, 우리끼리 목표를 하나 만들어봅시다. HTML을 배워서 간단한 페이지를 하나 만들어보는 겁니다. 목표도 정해졌겠다. 그럼 달려봅시다. 웹 개발을 위한 HTML 가이드 모음 이 링크를 클릭하면 HTML 가이드의 목록을 확인할 수 있습니다.
이제부터 우리는 한 배를 탄 겁니다. 개발을 위한 프로그래밍 지식은 여기까지입니다. 추후에 필요한 내용이 있으면 업데이트를 하도록 하고 새롭게 알게 되는 내용이 있어도 업데이트를 할 겁니다. 아무튼, 여기까지 달려오느라 고생 많으셨습니다. 이제부턴 진짜 공부를 시작해봅시다.
1웹을 구현하기에 앞서 기획을 세우는 것으로, 요소들의 레이아웃과 상세한 구격을 설정하는 과정을 말한다. 최종적으로 완성될 이미지를 전달하기도 하며, Figma 등의 디자인 툴을 통해서 웹 퍼블리셔와 협업을 하기도 한다. 웹 디자인을 전문적으로 하는 사람을 웹 디자이너라고 한다.
2디자인을 바탕으로 웹을 구현하는 것을 퍼블리싱이라고 한다. 이를 전문적으로 하는 사람을 웹 퍼블리셔라고 부른다.
글을 읽고 혹은 읽으면서 하고 싶은 말이 있다면 아래의 덧글창에 적어주시면 됩니다. 최대한 빠르게 확인하고 답변을 드리겠습니다. 이 글을 보신 모든 분들의 하루가 좋은 하루이길 바랍니다.