웹 개발자가 되는 방법 - 웹 개발 로드맵

0. 도입

어린 마음에 게임을 만들어 보고 싶어서 게임메이커라는 툴을 이용해서 게임 개발을 시작했었다. 그때 나이가 초등학교 3학년 때였다. 게임메이커를 이용하면 함수들을 아이콘 형태로 묶어 놓은 '액션'을 끌어다가 간단하게 알고리즘을 짤 수 있어서 개발을 처음 해보는 나도 카페에서 강좌를 보면서 쉽게 따라할 수 있었다. 언어를 사용해 프로그래밍을 시작한건 아빠가 C#을 이용한 게임 개발 관련 서적을 구입해 주시고 난 뒤였다. 책에서 나온 대로 C# 개발 도구를 설치하고, Console.WriteLIne으로 'Hello, World'를 출력하는 일부터 시작했다. 본격적으로 프로그래밍은 고등학교에 올라오면서 시작했다.

나는 고등학교에 들어가면서 게임 개발을 하고 싶었다. 초등학교 때 꿈 꿔 오던, 내 상상을 자유롭게 펼칠 수 있는 세계관을 만드는게 꿈이었다. 그렇게 1학년 때 들어간 게임 동아리는 내가 생각했던 만큼 게임 개발이 나의 적성에 맞지 않음을 발견하게 되고, 나는 웹 개발자의 길로 들어섰다. 지금 나는 주로 PHP와 라라벨을 이용해서 웹 개발을 하고 있고, Node.js와 Django, JSP 등도 다루어 보았다. 그리고 React, Vue.js를 이용한 프런트엔드 개발도 하고 있기 때문에, 디자인 능력만 제외하면 뭐 나름 자칭 풀스택 개발자이다.

웹 개발을 시작하고, 웹 개발 현장에 들어와 보니까, 웹 어플리케이션에 대한 수요가 엄청나다는 것을 깨달았다. 다양한 스타트업들이 생겨나고, 창업 지원 시스템이 활발해 지면서 흔히 말하는 회사 소개 페이지, 랜딩 페이지 등의 수요가 늘어나고 있다. 그리고 '빗썸'과 같은 비트코인 거래소들이 생기면서 웹 서비스에 대한 영향력이 얼마나 큰지 알 수 있다. 얼마전에 빗썸 채용 안내를 보는데 프런트 엔드 개발하는 'Angular/React' 개발자, 백엔드는 'PHP + CodeIgniter' 개발자를 모집하더라. 4차 산업 혁명이 시작되면서 온라인 서비스가 아니라도 웹 서비스와 밀접한 관련을 전부 가지고 있기 때문에, 웹 개발을 한다면 적어도 굶어 죽을 일은 없을 것이다. (아마)

그러면 본격적으로 시작해 보자. 오늘은 웹 개발 로드맵에 대해서 소개하려고 한다.

로드맵이란?

로드맵(Road Map)은 말 그대로 '길의 지도'이다. 어떤 목적지에 가려면 어떤 길로 가야 하는지, 어떤 길이 있는지 소개해 주는 지도이다. '웹 개발 로드맵'이라고 하면 웹 개발을 하기 위해, 혹은 웹 개발자가 되기 위해 어떤 길을 거쳐야 하는지, 그리고 어떤 길들을 갈 수 있는지 소개해주는 지도라고 할 수 있다.

물론, 어떤 목적지든 도달하는 방법에 정답은 없다.

1. 시작하기

모든 웹 개발의 시작은 아주 기초적인 것부터 시작한다. 나도 HTML, CSS로 웹 개발을 시작했다. 초등학교 영재교육원에서 HTML과 관련되서 배웠던 경험이 있어서 쉽게 시작할 수 있었다. 하지만 그런 경험이 없어도 책이나 강의를 조금 보고, 직접 만들어 본다면, 누구나 쉽게 익숙해질 수 있을 것이다.

아무것도 없이, 웹 개발을 처음 시작하고, 진로 결정에 있어서 '웹 개발을 한번 경험' 정도 해보고 싶을 땐, '생활 코딩'이나 다른 온라인 강좌 플랫폼을 이용해 보는 것을 추천한다.

• 생활 코딩 HTML 강좌 : https://opentutorials.org/module/1892
• Codecademy : https://www.codecademy.com/learn/learn-html
• W3SCHOOL : https://www.w3schools.com/html/

생활 코딩은 워낙 유명한 사이트기도 하고, 강좌들이 친절한 설명과 함께 잘 되어 있기로 유명해서, 처음 시작하는 사람들에게 강력 추천하는 사이트이다. HTML 뿐만 아니라 PHP, javascript, CSS 등 다양한 언어들에 대한 강좌들도 함께 있으니, 이용해 보기 바란다.

Codecademy는 내가 처음 자바를 공부했던 사이트이다. 기본적으로는 영어로 된 사이튼데, 한국어로 번역된 사이트도 있다. (물론 번역의 정확도는 떨어져서 되도록이면 영어라도 읽어 보는 것을 추천한다.) 코드카데미는 실시간으로 주어진 문제에 대한 답을 입력하고, 채점할 수 있는 시스템이 갖추어져 있어서, 실전 개발에 빠르게 적응할 수 있다.

W3SCHOOL 같은 경우는 강좌 뿐만 아니라, 다양한 태그나 함수에 대한 설명을 사전 형식으로 잘 정리해 두었기 때문에 'MDN'과 함께 굉장히 유용한 사이트라고 할 수 있다.

<Codecademy 강의 화면>

2. 방향 정하기

웹 개발의 범주는 아주 넓다. 그만큼 웹 기술을 이용해서 할 수 있는 것들도 많고, 하고 싶은 것도 많아진다. 기업의 팀 프로젝트에 참여해서 서비스를 만드는 웹 개발자가 되려면, 무엇보다도 어떤 분야의 개발을 할지 선택하는 것이 제일 중요하다. 웹 개발 분야를 정하는 것이다.

웹 개발의 분야는 크게 3가지로 나눌 수 있다. '프런트엔드 개발', '백엔드 개발', '데브옵스 개발'. 각각에 대해 간단하게 살펴보도록 하자.

• 프런트엔드(Front-End) : 프런트엔드 개발을 웹 서비스에서 '보여지는 부분'에 관여하는 개발이다. 아주 과거에는 웹 디자인을 하고, 반응형 웹으로 제작하는 일에 그쳤지만, 지금까지도 가장 보편적으로 쓰이는 자바스크립트 라이브러리인 'jQuery'를 거쳐서 'React.js', 'AngularJS', 'Vue.js' 등의 웹 프런트엔드 프레임워크들이 생기면서 프런트엔드 개발은 사람들이 웹 서비스를 이용함에 있어서 속도적인 면과 경험적인 면에 대거 관여하게 되었다.
• 백엔드(Back-End) : 백엔드 개발은 데이터베이스를 이용해 데이터를 관리하고, 데이터를 가공하는 분야의 개발이다. 로그인, 회원가입, 게시판 등... 웹 서비스의 '기능'을 구현하는 일을 담당한다고 생각하면 된다.
• 데브옵스(Dev-Ops) : 소프트웨어 개발 방법론의 하나로, 개발(development)과 운영(operation)을 결합한 혼성어이다. 개발 담당자와 운영 담당자가 연계하여 협력하는 개발 방법론을 말한다. (by. 네이버 지식백과) 간단히 말하면 데브옵스 엔지니어들은 개발자와 운영자 사이에서 발생할 수 있는 충돌을 완화해주는 역할을 하는 사람들인것 같다.

데브옵스에 대한 용어나 내용은 나도 많이 들어보지 못한 생소한 개념이라서 지식백과의 힘을 빌렸다. 위의 정의에 대한 설명을 해보자. 일단 예를 하나 들어야 하는데, 어떤 서비스를 운영함에 있어서 개발자 혼자 개발과 운영을 하는 경우는 극히 드물다, 서비스의 규모가 커지면 커질수록, 더 많은 개발자가 필요하고, 효율적인 운영을 위해서 능력 있는 운영자가 필요하게 된다. 하지만 서비스를 운영하는 과정에서 버그가 발생하면, 그걸 수정해야 하는데 운영상의 문제로 수정하지 못하는 경우가 많다. 되게 다음과 같은 경우다.

(출처 : 디스이즈게임(This Is Game) )

속되게 말하면 개발자들은 "개발 단계에 있어서 이 기능이 왜 구현 불가능한지 기획자들에게 설명하는 일이 제일 힘든 일이라고 말한다."라는 것처럼, 개발을 하는 것과 운영을 하는 것 사이에 마찰은 빚어질 수 밖에 없고, 그것을 중개해주는 역할을 하는게 '데브옵스 엔지니어'라고 생각하면 될듯한다. (혹시 데브옵스 엔지니어링과 관련되서 오류가 있다면 댓글이나 메일을 통해서 연락주시면 좋겠습니다! ^^)

데브옵스과 관련되서는 위 사진의 원본 기사에서 도움을 많이 받았다. http://www.thisisgame.com/webzine/news/nboard/4/?n=71605 데브옵스와 관련되서는 내가 잘 모르기 때문에 자세하게 설명하지는 않겠다만, 도움이 될만한 링크들을 남겨 두도록 하겠다.

우선, 아래의 로드맵은 https://github.com/kamranahmedse/developer-roadmap에서 가져왔다. 영어로 된 문서를 부분적으로 직접 번역했다.

웹 개발자가 되는 로드맵 (2018년 버전)

아래 차트들은 웹 프론트엔드, 백엔드, 데브옵스(DevOps) 개발자가 되고자 할 때 걸어야 할 길과 익혀야 할 기술들입니다. 제자들의 시야를 넓혀 주고 가치 있는 것을 공유하고 하시는 제 옛 교수님과 함께 만들어봤죠.

어떤 식으로든 이 자료를 개선할 아이디어가 있다면 제안해주세요.

| 웹 개발 도입(기초)

웹 개발을 시작하는데에 있어서 필요한 것들이 적혀 있다. 2017년 버전에는 왼쪽의 'Git'부터 'GitHub'까지가 전부 선택 사항으로 적혀 있었는데 이제는 개발에 있어서 필수 불가결한 것들이 되었다.

• Git : 협업이나 효과적인 서비스 개발 및 운영을 위해 꼭 필요한 도구이다. 반드시 사용할줄 알아야한다.
• SSH : 내 컴퓨터의 터미널에서 서버 컴퓨터의 터미널에 접속할 수 있게 해주는 프로토콜이다. 서버에서 작업을 진행하려면 꼭 알아야한다.
• HTTP/HTTPS and APIs : 네트워크 통신과 관련된 가장 기초적인 것들이다. 그리고 API들을 다룰줄 알게되면 할 수 있는 개발의 폭도 넓어진다.
• Basic Terminal Usage : 터미널을 쓸줄 알아야 하는건 모든 개발자나 마찬가지이다. 특히 'Vim'은 꼭 쓸줄 알아야 한다.
• Learn to Research : 오류가 났을 때 인터넷을 찾아보고 스스로 해결할 수 있는 능력을 기르는게 중요하다. 제일 쉬운 해결 방법은 깃허브 이슈를 찾아 보거나 스택 오버 플로우에서 찾아보는게 있다.

| 프런트엔드 로드맵

프런트엔드 개발자를 꿈꾼다면 주목해주길 바란다. MVC, MVP, MVVM 등 다양한 디자인 패턴이 등장하면서 프런트엔드와 백엔드 사이의 경계가 분명해지고 있다. 프런트엔드 개발은 더이상 페이지 겉모습을 만드는 것에 지나지 않고, 어떤 부분을 먼저 로드해서 웹 사이트를 최적화 시킬건지, 사용자들의 입장에서 어떻게 사용하기 편하게 만들 것인지 등을 연구하는 아주 중요한 부분이라고 할 수 있다.

• HTML : Hyper Text Markup Language의 줄인 말로, 웹 페이지를 구성하는 뼈대이다. 모든 웹 페이지는 HTML로 작성되고, 브라우저는 HTML로 작성된 문서만 열 수 있다. 공식 홈페이지
• CSS : Cascading Style Sheet의 줄인 말로, 웹 페이지의 디자인과 관련된 부분을 담당한다.
• javascript : 프런트엔드 개발은 javascript가 필수이다. 웹의 역사에 javascript가 쓰이면서 사용자들은 더 다양한 경험을 할 수 있게 되었다. 프런트엔드 프레임워크가 전부 자바스크립트를 기반으로 두고 있기 때문에 javascript를 잘하면 정말 유리하다.
• Typescript : 작년에 구글에서 회사 사내 공식 언어로 'Typescript'를 체택하면서 화제가 되었었다. Typescript는 javascript의 변수에 타입을 부여하는 뭐 그런 친구이다. 그 외에도 다양한 기능들이 있고, 구글에서 사내 공식 언어로 체택하면서 앞으로의 가능성이 밝다고 볼 수 있다.
• Sass : Sass는 CSS 전처리기(Preprocessor)로서, 변수 설정이라든지, 반복문이라든지, CSS 파일을 만들 때 많은 편리한 기능을 제공한다. 개인적으로 정말 편하게 쓰고 있기 때문에 강력 추천한다.
• Webpack : 여러 css, js 파일을 하나의 파일로 묶어주는 자바스크립트 라이브러리이다. 파일이 하나로 정리 되어서 관리하기 편리하다.
• React, Angular : 프런트엔드 프레임워크 중에서는 상위권에 있는 프레임워크라고 볼 수 있다. 사실 웬만한 프런트엔드 개발은 jQuery를 써서 할 수도 있지만 사용자들에게 빠르고 정확한 서비스 제공을 원한다면 이용해보길 바란다.

| 백엔드 로드맵

웹의 백엔드는 정말 다양한 언어로 만들어 낼 수 있다. 여기 그림에는 없지만 구글에서 만든 Go언어로도 가능하다. 심지어 웹 프로그래밍에는 잘 사용되지 않는 C언어로도 HTTP 통신만 잘 이해하고 있다면 백엔드를 구축할 수 있다. 그렇기에 백엔드 개발에 있어서는

1. 어떤 언어로 개발할 것인가.
2. 어떤 데이터베이스를 이용할 것인가.
3. 웹 서버는 어떤 엔진으로 구성할 것인가, 어떤 OS로 구동할 것인가.

가 중요한 문제이다.

• Ruby : 루비는 마츠모토 유키히로가 개발한 동적 객체 지향 스크립트 프로그래밍 언어로서, 루비 언어의 가장 큰 특징이라고 하면 순수 객체 지향 언어라, 정수나 문자열 등을 포함한 데이터 형식 등 모든 것이 객체라는 것이다. 단점이 있다면 우리나라에서는 커뮤니티가 활성화가 잘 이루어져 있지 않아서 개발에 필요한 자료들을 찾기 힘들 수 있다. 일본에는 루비 개발자가 많으므로 일본어를 좀 한다면 도전해보는 것도 좋다.
• Python : Python은 오늘날 정말 유명하고, 해킹 등의 분야에서도 널리 쓰이는 인터프리터 언어이다. 개발 효율성이 높아서 많이 쓰이고 있다. 특히 Django 프레임워크를 이용하면 빠르게 웹 서비스를 구축할 수 있다. 단점이 있다면 루비와 마찬가지로 개발에 필요한 자료를 얻기 쉽지 않을 것이다. 영어를 좀 한다면 도전해볼만 하다. 그리고 무엇보다도 좀 어렵다. Python 자체의 패키지를 이용할 수 있다는 것은 큰 장점이다. Socket이라든지, Python이 내장하고 있는 패키지와 모듈들을 활용할 수 있다.
• Node.js : Node.js는 javascript로 짜여진 웹 엔진(?) (공식사이트에서는 런타임이라고 하더라)이다. 그 어떤 다른 백엔드보다 빠르게 웹 서비스를 구축할 수 있다는게 특징이다. 패키지 매니저인 npm을 통해서 하루에 수천 수만개씩 쏟아져 나오는 패키지들을 활용할 수 있기 때문에 npm으로 패키지 모듈 3~40개를 다운 받아서 조합하는 것 만으로도 멋진 웹 서비스를 만들어낼 수 있다. 스타트업에서 서비스 프로토타입을 만드는데 많이 사용한다. 초기에는 Node.js의 안정성이 떨어지는게 문제로 떠올랐지만, 지금은 뭐 그런거 같지도 않다. 작년까지는 NoSQL이 뜨면서 Node.js와 MongoDB가 자주 쓰였지만, 지금은 어떤지 모르겠다.
• PHP : 굉장히 오래된 언어이다. 웹 개발의 원조라고 할 수 있고, 낮은 진입 장벽과 수십년에 걸쳐 쌓여온 방대한 자료가 있다. 흔히 PHP가 배우기 쉽다고 해서 개발을 처음 시작하는 사람들이 많이 사용한다. 하지만 오래된 언어인 만큼 연구가 많이 되어서 보안에 취약하다는 분석이 있다. 하지만 PHP7이 나오면서 속도가 대폭 향상되고 현대의 프로그래밍 언어의 요소들도 추가되면서 써볼만한 언어가 되었다. 보안 문제는 개발자가 주의를 조금 더 기울여서 시큐어 코딩을 하면 해결할 수 있는 문제이고, 다양한 PHP 프레임워크에서도 보안 문제를 해결해 주고 있다. 나도 백엔드 개발을 PHP로 시작했기 때문에 웹개발을 처음 시작하는 사람들에게 추천한다. 데이터베이스로는 단짝 친구인 MySQL, MariaDB 등을 많이 사용한다.

어떤 언어로 백엔드 개발을 할지는 만들고자하는 서비스의 규모, 기한 등을 고려해서 선정하면 된다. 빠른 시간 내에 만들어야 하는 프로젝트라면 Node.js를 추천하고, 웹 개발을 접해보지 못했지만 시작해야 하는 경우라면 PHP를 추천한다. 그 외에 Ruby나 Python을 이용해서 개발을 해야 한다면 프레임워크로 Ruby는 Ruby On Rails, Python은 Django를 추천한다.

| 데브옵스 로드맵

3. 마치며

웹 개발을 시작하고 싶다면 우선, 내가 어떤 분야의 개발을 하고 싶은지 정해야 한다. 정하기 어렵거나 다양한 경험을 해보고 싶다면, HTML/CSS 부터 시작해 보는걸 추천한다. HTML과 CSS는 웹을 구성하는 뼈대와 같은 친구들이기 때문이다. 시간이 난다면 javascript도 조금 해보면 좋다.

게임 개발, 시스템 개발, 앱 개발... 다양한 개발이 있는데 내 생각에는 웹 개발이 제일 진입 장벽이 낮은 것 같다. 게다가 웹 프로그래밍은 (특히 프런트엔드는) 내가 개발하는 과정을 브라우저를 통해서 시각적으로 볼 수 있기 때문에 더 재미가 있는 것 같다.

이 글을 읽고 의문점이나 다른 의견이 있다면 댓글이나 메일을 통해서 의견을 주고 받을 수 있었으면 좋겠다. 그러면 오늘은 여기까지.

4. 기타

데브옵스와 관련된 링크

• 데브옵스에 대한 설명이 그림으로 쉽게 잘 되어 있음 : https://www.slideshare.net/taehyunkim73700/ndc17-devops-devops-6