웹 프로그래밍이 뭔가요?
웹은 문서다
아래는 <Imagine + Engineer> 시리즈 목차이자 첫 글
앞선 두 글에서 전체 개발의 스펙트럼과 처음 개발에 입문한 사람이 선택하면 좋은 프로그래밍 언어에 대해서 이야기를 해보았다. 오늘 다룰 내용은 프로그래밍 중에서도 특히 웹 프로그래밍이다. 웹 프로그래밍은 비전공자가 프로그래밍을 선택했을 때 가장 많은 사람이, 그리고 가장 처음에 접하게 되는 영역이다. 그만큼 개발자 숫자도 많고, 기술의 변화 속도도 빠른 분야다. 그리고 일반인이 가장 많이 접하는 분야이기도 하다. 오늘도 분명히 여러분이 들어가셨을 페이스북이나 네이버, 그리고 이 브런치 페이지도 웹 프로그래밍의 결과물이다.
그렇다면 무엇을 배워야 우리가 매일 접하는 이런 웹페이지를 만들 수 있는 것일까?
HTML, CSS & Javascript, 웹 페이지를 꾸미자
우선 웹페이지는 크게 정적(Static)인 페이지와 동적(Dynamic)인 페이지로 구분을 한다. 정적인 페이지는 일반적으로 사용자와 상호작용이 어려운 경우가 많다. 대체로 애플리케이션 홍보용 단일 페이지가 여기에 해당하는 경우가 많다. 이런 페이지는 HTML과 CSS 만으로도 충분히 만들 수 있는 경우가 많다. HTML은 HyperText Mark-up Language의 약자인데, 아마 영어 단어가 늘어져있어서 혼란스러울 지도 모른다. 하이퍼텍스트(HyperText)는 링크를 통해서 옮겨다닐 수 있는 페이지를 의미한다. 우리가 매일 같이 만나는 그 웹페이지들이다. 우리는 이런 하이퍼텍스트를 IE, Chrome, Safari 등의 웹 브라우저를 통해서 읽는다. 쉽게 말하면 HTML 문서는 PDF 파일이고 웹 브라우저들은 전용 Reader라고 할 수 있다.
보통 글을 쓸 때 목록을 다음과 같이 만든다.
- 사과
- 감
- 배
이런 리스트를 HTML로는 아래와 같이 표현할 수 있다.
fruits.html
<ul>
<li>사과</li>
<li>감</li>
<li>배</li>
</ul>
다들 초등학교 때 한 번쯤 HTML 문서를 만져 본 기억이 있을 거라고 생각한다. HTML은 태그(tag)로 이루어져 있다. 위의 HTML '문서'에는 <ul> 태그와 <li> 태그가 있다. ul은 unordered list의 약자이고, li는 list item이겠다. 이렇게 표현해두면 브라우저는 저 문서를 읽어 들일 때 "저것이 '리스트'구나"라고 인지할 수 있다.
CSS(Cascading Style Sheets)는 이런 HTML 문서를 꾸미는 데 사용된다. 항목의 이름을 갑자기 다 빨간색으로 바꾸고 싶어 졌다면? HTML은 이름 그대로 '마크업'이기 때문에 문서 내의 요소가 어떤 역할을 하는지만 알려준다. 이제 스타일 시트인 CSS로 색깔을 준다면?
fruits.css
li {
color: red;
}
이렇게만 입력해주면 html의 모든 <li> 태그 안의 문자가 빨간색으로 바뀐다. 지면 상의 이유로 html 문서에서 어떤 식으로 css 파일을 불러오는지는 생략했다. 한 가지만 기억하자.
HTML은 문서의 구조를 잡아주고, CSS는 그 문서를 꾸며준다.
이제 여기에서 새도 날아다니고 번쩍번쩍 거리게 하고 싶다면? 이것이 자바스크립트가 하는 일이다. HTML이 구조를 잡고, CSS가 이쁘게 꾸며놓으면, Javascript가 움직이게 만든다.
프로그래밍 언어, 사용자가 입력하는 데이터를 처리하자
이제 우리가 지난 시간에 다뤘던 프로그래밍 언어가 나온다. Python, Java, Ruby, Javascript 같은 프로그래밍 언어는 사용자가 입력하는 데이터를 처리하는 역할을 한다.
form.html
<form>
<input name="name"></input>
<input type="submit" value="submit"></input>
</form>
설명을 위해 <form> 태그 안의 action이나 method 등에 해당하는 내용은 생략함
프로그래밍 언어로 넘어가자더니 왜 갑자기 다시 html 문서냐고 묻는다면? 이게 다 연관이 있다. html에는 <form>이라는 태그가 있다. <form>은 사용자의 입력을 처리하는 곳이다. 입력이라는 말이 나오자마자 <form> 태그 안의 <input> 태그가 있다. 이걸 브라우저로 실행시키면 길고 네모난 직사각형 창이 하나와 "submit"이라는 이름을 달고 있는 버튼이 하나 나온다. 네모난 창에 사용자가 문자를 입력하고, 버튼을 누르면 서버로 데이터를 전송하게 된다.
그러면 이제 프로그래밍이 일을 해야 되는 시간이다. 사용자가 "name"이라는 이름을 붙여놓은 창에 무언가 데이터를 입력했고, 이제 우리는 그 데이터를 가지고 엄청나게 많은 일을 할 수 있다. 다른 페이지로 연결시켜주기도 한다. 나중에 다시 사용하기 위해서 데이터를 저장해 둘 수도 있다. 정확히는 프로그래밍 언어로 구현해놓은 웹 프레임워크로 저런 일을 처리하는데, 프로그래밍에서는 보통 로직(Logic)이라고 부르고 '로직을 구현'한다고 한다. 파이썬(Python)은 Django와 Flask, 자바(Java)는 Spring와 Spring Boot, 루비(Ruby)는 Rails와 Sinatra, 자바스크립트(Javascript)는 Nodejs와 함께 사용하는 Expressjs가 주요 웹 프레임워크이다. 이런 프레임워크는 프로그래머가 처리해야 하는 많은 일을 간단한 코딩으로 처리할 수 있게 잘 꾸며놓은 도구이다. 물론 익숙해지기 전까지는 공부해야 하는 애물단지이긴 하다.
데이터베이스와 SQL, 내 정보는 소중하니까 지켜주자
위에서 프로그래밍 언어가 하는 일 중에 데이터를 저장하기도 한다고 했다. 정확히는 프로그래밍 언어는 데이터를 저장소까지 인도하는 역할을 한다. 그런데 한 웹 서비스가 만들어내는 데이터 양은 방대하다. 만약에 똑같은 데이터를 여러 사용자가 같이 수정하려고 한다면?
최초에 데이터베이스는 같은 데이터를 여러 사용자가 함께 관리하기 위해서 만들어졌다. 학교 도서관을 생각해보자. 책을 연체한 학생이 도서관 반납대에 가서 책을 반납했다. 연체료도 조금 물어야 했을 거다. 그리고 다시 책을 골라서 대여하는 곳에 왔는데, 연체된 내역이 있다고 한다. 이것이 통합 관리되는 데이터베이스가 없으면 생기는 현상이다.
데이터베이스는 커다란 엑셀이라고 생각하면 된다. 다만 그걸 여러 사용자가 공유하고 있다. 그리고 가능하면 비어있거나 여러 값이 들어있는 셀이 없도록 처리하려고 한다. 데이터베이스는 이것만 전문적으로 관리하는 개발자가 있을 정도로 성능에 영향을 많이 미친다. 데이터베이스 관리를 전문으로 하는 사람을 데이터베이스 관리자(DBA, Database Administrator)라고 부르는데, 경력이 쌓이면 연봉이 억대에 이른다고 하여 처음 개발을 배울 때 솔깃하곤 했다. 다만 하루 종일 엑셀을 들여다보고 있어야 된다고 생각하니 조금 지겨울 것 같다는 생각이 들었다.
시스템, 이제 서비스를 배포해보자
이제 위의 단계를 다 거쳤으면 포트폴리오로 삼기에는 전혀 문제가 없다. 웹 프로그래밍 신입 개발자로 일할 수가 있다.
그런데 지금까지 배운 걸로는 실제 사용자를 받을 수는 없다. 우리가 만든 서비스에 사람들이 접근할 수 없기 때문이다. 우리는 지금까지 만든 서비스를 서버에 '배포'하는 작업을 해야 한다. 서버는 조금 특별한 컴퓨터이다. 혹시 컴퓨터를 끄지 않고 며칠을 그냥 둔다면? 많은 경우 이유 없이 컴퓨터가 느려지는 경우가 많다. 그런데 사용자를 받는 서버 컴퓨터가 느려진다면? 그래서 서버 컴퓨터는 서버용 운영체제를 설치하게 된다. 우리가 일반적으로 아는 운영체제들인데, 윈도, 유닉스, 리눅스가 여기에 해당한다. 그런데 윈도, 유닉스 서버는 유료다. 그래서 많은 서비스가 리눅스 서버를 선택한다.
보통 리눅스 서버는 터미널로 작업을 하는데. 우리가 지금껏 사용해온 마우스 딸깍딸깍 환경과는 많이 다르다. 'cd'로 시작하는 명령어의 세계에서 리눅스 서버를 설치하고 사용자를 받을 수 있게 도와주는 Apache나 Nginx를 설치해야 한다. 여기에 데이터베이스도 설치하고 연동하는 작업도 해줘야 하겠다.
프로그래밍은 발전하고 있다
그럼 우리가 프로그래밍을 공부하기 시작해서 실제 사용자들이 사용 가능한 서비스를 만들려면 저 엄청난 것들을 다 공부를 해야 하는 것일까? 원칙적으로는 그렇게 말을 해야 할 것 같다. 하지만 프로그래밍 세계도 빠르게 발전하고 있다. 개발자들이 서비스의 기능 구현에만 집중할 수 있도록 많은 서비스가 쏟아져나오고 있다.
우선 파이썬 웹 프레임워크인 장고(Django)나 루비 온 레일즈(Ruby on Rails) 같은 경우에는 프로그래머가 코드를 작성하면 자동으로 데이터베이스에 해당하는 테이블을 설계해주고, 데이터베이스를 처리하는 SQL(Structured Query Language)을 전혀 몰라도 데이터베이스에서 데이터를 꺼내고 집어넣을 수 있게 해주고 있다.
서비스를 정식으로 릴리즈 하는데 가장 걸림돌이 되는 부분은 바로 서버에 대한 지식일 것이다. 이 부분도 아마존에서는 AWS에서 Elastic Beanstalk 이라든지 혹은 구글의 Google App Engine은 사용자가 리눅스나 시스템 관리에 대한 이해가 전혀 없더라도 매번 작성하는 코드를 서버에 올려주고, 사용자를 여러 서버로 분산시켜주는 Load Balancing이나 사용자가 갑자기 늘어났을 때 서버를 늘려주는 Auto-Scaling 같은 것들도 처리해주고 있다. 개발자는 정말 자신의 서비스를 어떻게 만들지만 고민하면 되는 시기가 오고 있는 것이다.
마무리하면서
프런트엔드의 왕좌를 Angularjs와 Reactjs가 서로 넘보며 경쟁하고 있고, 이런 프런트엔드 프레임워크를 이용하거나 혹은 모바일과 데이터를 주고받아야 한다면 REST API에 대한 공부도 필요하겠다. 그리고 요즘은 시스템 관리 쪽으로는 Docker라는 컨테이너 기술이 핫하다고 하니 이쪽에도 관심을 가지면 좋겠다. 프로그래밍은 공부해야 할 내용이 많다. 그리고 만약 처음 공부하는 사람이 이걸 다 공부할 때쯤이면 다시 무엇인가 새로운 기술이 나올 가능성이 많다. 하지만 새로 입문하는 사람에게 이런 프로그래밍 분야의 특성이 큰 장점이 되기도 한다. 요즘 핫한 프런트엔드의 Angular 2.0이나 Reactjs는 나온지 얼마 되지 않았다. 그러니 이 부분을 빠르게 공부해서 실력을 쌓으면 이 부분에서 최고 전문가가 될 수 있다는 뜻이다.
빠르게 배울 수 있는 자신이 있는 사람이라면 이 곳은 기회의 땅이 될 거고, 아니라면 트렌드를 쫓다 힘들게 프로그래밍 세상을 떠나게 될지도 모른다.
개발자가 되고 싶으신가요? 좋은 개발자에 대해서 항상 고민합니다.
