문돌이가 소개하는,
필수 웹 개발 용어 7선

안녕, 나는 문돌이 B다. 오랜만에 찾아왔다.

혹시 일하는 경우든, 다른 경우든 전문 개발자와 이야기를 해본 사람?

나의 경우 개발에 대해 전혀 모르던 시절, 전문 개발자와 개발 이야기를 한 적이 있었다.

분명 같은 한국어로 대화하고 있는데, 중간중간 힌디어가 섞인 느낌이다.

 

 

이 힌디어를 알아듣기 위해

B가 비개발자를 위한 필수 웹 개발 용어 7선을 정리했다.

GitHub (깃허브)

web-developer-terms-1

(깃허브의 공식 마스코트인 옥토캣)

 

Git과 GitHub 많이 들어본 단어가 아닌가?

우선 깃을 간략히 설명하자면, 백업과 협업에 매우 유용하게 사용할 수 있는 아주 쩌는 도구다.

GitHub는 이런 깃을 지원하는 저장소 서비스다.

 

국내뿐 아니라 세계의 매우 매우 많은 개발자들이 이 저장소 서비스를 사용하고 있다. 백악관(맞다. 미국의 그 White House)이나 서울시도 GitHub를 사용하고 있다. 거짓말이 아니다.

어떤 사람은 GitHub를 개발자들의 ‘페이스북’이라고 표현하기도 한다.

조금 과장해보자면 당신이 아는 개발자들은 모두 GitHub를 사용하고 있을 것이다.

워드프레스

web-developer-terms-2

(일본에서 시작된 워드프레스 마스코트 ‘와푸(wapuu)’)

 

누구나 자기 홈페이지를 만들어보려 했던 사람은, 분명히 한 번은 워드프레스라는 이름을 들어 보게 된다.

 

워드프레스는 그야말로 ‘웹의 왕자’격

(올해 초 워드프레스로 만들어진 세계 웹사이트의 비율이 30%를 넘어서 버림..)

워드프레스는 전 세계 웹을 주도하고 있는 설치형 블로그로 우리나라의 티스토리, 네이버 블로그, 이글루스 같은 것과 비슷하다. (하지만 내부는 완전히 다르다)

원래 워드프레스는 단순히 글을 좀 더 웹에서 편하게 쓰게 하기 위한 블로그였다.

하지만 일반적인 블로그와 정말 다른 점 하나는 ‘오픈소스’ 여서 누구든지 이를 개조하고, (혹은 개선에 참여하고) 발전시킬 수 있다는 것이다.

 

특히 ‘플러그인’이라는 개념은 놀라웠는데, 내가 예를 들어 내 네이버 블로그에 날씨 위젯을 넣으려 한다면?

네이버 블로그는 정해진(이미 자기들이 만든) 위젯을 사용하도록 한다. (예전에는 유료로 파는 아이템들도 있는 것 같았다..)

 

하지만 워드프레스는 이를 사용자들끼리 만들도록 토대를 만들어놓고, 그것들을 거래하는 ‘플랫폼’을 만들었다.

그래서 그냥 내가 원하는 디자인의 날씨 위젯을 만들어서 넣거나, 다른 사람이 만든 날씨 위젯 플러그인을 무료로 가져다 붙이면 된다. (이 과정이 솔직히 네이버 블로그의 많은 것들보다 쉽다)

 

이런 오픈소스 생태계의 믿음을 가지고 워드프레스는 발전하여 현재까지 왔다.

아래는 워드프레스를 만든 automatic사의 사훈

 

We don’t make software for free, we make it for freedom.

(찡..)

프론트엔드, 백엔드

web-developer-terms-3

(출처: Devhumor)

 

‘안녕하세요. 저는 프론트엔드 개발자에요.’

‘아이고, 저는 백엔드 개발자입니다.’

프.. 론트? 이건 대체 무슨 뜻이길래 자신을 저렇게 소개하는 것일까?

웹에 보이는 화면을 프론트엔드(Front-end)라고 부른다. 즉, 프론트엔드 개발자들은 사용자들이 보는 화면을 만든다. 하버 홈페이지에 있는 항구 블록들과 밑에 아티클 등 화면을 만드는 사람이 프론트엔드 개발자이다.

 

 

그렇다면 백엔드(Back-end)는?

백엔드(Back-end) 개발자들은 이와 반대로 사용자들에게 보이지 않는 것을 만든다.

 

예를 들어, 하버 뉴스레터 구독을 신청해보자. (링크)

보이지는 않지만 이메일 주소 정보가 하버 데이터베이스에 저장되고 분류된다. 이런 영역을 백엔드라고 부른다.

그렇다고 프론트와 백엔드는 완전히 동떨어진 영역은 아니다.

 

한 영역만 다루는 것이 아니라 두 영역 모두 어느 정도의 지식과 기술이 있는 개발자들도 많다.

서버

web-developer-terms-4

예를 들어 철수와 영희가 서로 먼 나라에 떨어져 있지만, 철수가 자신이 그린 그림을 너무너무 공유하고 싶다고 생각해보자.

그럼 철수는 그림을 일단 ‘캔버스’에 잘 그리고, ‘배달원’에게 먼 나라에 있는 영희에게 전달해 달라고 요청한다.

 

여기서 서버는 ‘캔버스’이고, 전달해주는 ‘배달원’은 우리가 너무나도 소중하게 쓰고 있는 인터넷이다.

별거 아니지 않은가?

어쨌든 이 ‘캔버스’ 의 종류는 참 다양한데, 이것 역시 사실 우리가 평소에 쓰는 노트북이나 데스크톱과 별반 다르지 않다.

파일을 읽고 쓰고, 인터넷으로 전달만 해주면 된다.(가끔은 변경하고)

 

그래서 보통 웹 개발을 할때는, 자신의 컴퓨터에 개발 전용 서버(localhost)를 설치해두고, 이를 이용해 개발을 마친 뒤, 실제 웹 서버에 배포를 하게 된다.

HTML, CSS, JAVASCRIPT

web-developer-terms-5

(죄송합니다 싸이 형님.. 안티는 아니에요 / 출처: 싸이 뉴페이스 뮤직비디오)

 

HTML, CSS, JAVASCRIPT 3 총사는 웹을 구성하는 큰 기둥들이다.

HTML은 웹사이트의 요소를 브라우저에게 알려준다.

조금 더 쉽게 이야기해보자면 크롬에게 ‘이거는 이미지고, 저거는 링크야.’ 이렇게 알려주는 역할을 한다.

 

CSS는 HTML을 꾸며준다. 이 텍스트는 핑크색이고, 저 타이틀의 폰트 크기는 100으로 하는 등의 기능을 한다.

마치 HTML이라는 기본적인 뼈대에 살(응? 이건 좀 무서운데…?)과 옷을 입히는 것과 같다.

JAVASCRIPT는 웹에 움직임을 부여한다. 버튼을 누르면 다른 웹페이지가 열리고, 이것을 누르면 파란색으로 변하거나, 저것을 누르면 화면이 움직이는 등의 기능을 부여할 수 있다.

 

옷 입기를 마친 후, 어울리는 포즈나(갑자기?) 움직임을 취하는 것이다.

 

예를 들어, 싸이가 해골에서(HTML) 메이크업을 하고 보라색 옷을 갖춰 입은(CSS) 다음에 ‘I want some new face~!’하고 춤을 추는(JAVASCRIPT) 것이다.

 

이렇게 3 총사가 다 모여 제 역할을 하면 따끈따끈한 웹이 완성된다.

React, Angular, Vue

web-developer-terms-6

React라는 말을 웹 개발을 정말 몰라도 그래도 한 번은 들어봤을것이다…

 

왜냐면 페이스북이 만들고 그렇게 주야장천 홍보해대니..

(사실 React가 유명해진 이유에는, 이게 너무 좋아서, 홍보하는 사람이 더 많은 요인도 있다)

React, Angular, Vue가 등장함으로써 (정확히는 Node.js)

프론트엔드 개발 시대의 제자백가 시대 혹은 르네상스 시대가 열렸다고 봐도 무방하다.

 

Node.js 기반의 npm은, 다른 사람의 파일들을 이제 너무 쉽게 가져다 쓸 수 있게 해준 점이다.

이를 바탕으로 React 등의 오픈소스 프레임워크가 등장하게 되었고, 바야흐로 블록처럼 웹도 이것저것 가져다가 조립을 하는 게 너무 일반적인 현상이 되었다.

시작은 Angular였다.

하지만 느렸다. 처음 나온 Angular JS는

그리고 Angular 홈페이지에도 적혀있다 싶이, 웹보다 앱을 위한 것이었다 (HTML enhanced for web apps! )

그때 엄청난 녀석이 등장했다.

 

React (두둥!)

이는 여러 장점이 있었지만, 일단 프레임워크가 아닌 라이브러리로 가벼웠다.

그리고 다른 복잡한 것 없이 사용자가 보이는 부분만 처리하게 집중되어있어서

Angular에 비해 상대적으로 배우기가 너무 쉬웠다.

 

 

이는 곧 웹 제자백가 시대의 1차전에서 리액트 진영의 대승을 의미했고, 엄청난 수의 사용자를 확보하였다.

이는 현재까지도 유효하여 프론트엔드 진영에서 가장 큰 커뮤니티를 형성하고 있다.

이는 곧 웹 제자백가 시대의 1차전에서 리액트 진영의 대승을 의미했고

이는 현재까지도 유효하여 프론트엔드 진영에서 가장 큰 커뮤니티를 형성하고 있다.

아, 하나더. 2018년의 다크호스는 Vue.js라는 친구이니 주목하시길.

Stack overflow(스택 오버플로우)

web-developer-terms-8

개발자들에게 굉장히 친숙하면서도 굉장히 보기 싫은 error들….

 

많은 개발자들은 해답을 찾지 못하면 구글 신에게 물어보거나 Stack overflow에 들어가 본다. (구글 신에게 물어봐서 Stack overflow에 들어오는 경우도 빈번하다)

(아.. 신이시여)

 

Stack overflow는

개발자들 사이에서는 네이버의 ‘지식 in’같은 역할을 한다.

Stack overflow에는 세계의 여러 개발 고수들이 활동하고 있다.

예를 들어, Lv4 정도의 개발 세계에 갓 가입한 개발자가 ‘고수님 오류가 나는데, 아무리 해도 해결방법을 모르겠네요..’하고 올리면 Lv70의 고렙 개발자가 ‘아 이거는 이렇게 해봐.’하고 친절히 알려준다.

 

개발자 관련 Survey도 진행하기 때문에 전 세계 개발자들의 연봉 같은(솔직히 제일 궁금한 주제다) 재밌는 통계도 확인해 볼 수 있다.

Summary
프로그래밍은 사실 뜨개질 만큼 쉽다 (치프메이트 이야기 1)
Article Name
프로그래밍은 사실 뜨개질 만큼 쉽다 (치프메이트 이야기 1)
Description
안녕, 나는 문돌이 B다. 오랜만에 찾아왔다. 일하는 경우든, 다른 경우든 전문 개발자와 이야기를 해본 사람? 나의 경우 개발에 대해 전혀 모르던 시절, 전문 개발자와 개발 이야기를 한 적이 있었다. 분명 같은 한국어로 대화하고 있는데, 중간중간 힌디어가 섞인 느낌이다.
Author