요즘 프로그래밍을 배우고자 하시는 분들이 많은 것 같습니다. 웹/모바일 개발의 경우 기술적인 난이도가 높지는 않습니다. 다만, 알아야 할 것이 방대하고 넓습니다. 그래서 입문 하시는 분들이 개념 잡는 것을 어려워 하는 것 같습니다.

웹개발자는 웹땔감이라고도 조롱을 자주 당합니다. 그만큼 당장은 진입이 쉽고 배우기에 난이도도 낮습니다. 누구라도 원하는 기능 한두개쯤은 하루만에 구현할 수 있죠. 문제는 그것을 진짜 '잘'해내냐에 달렸습니다. 웹표준을 몰라도 HTML마크업을 만들 수 있지만, 웹표준을 아는 사람이 만들면 더 빠르고 가벼운 문서, 널리 읽히는 문서, 유지보수가 쉬운 문서를 만들 수 있겠죠. 메모리관리, 자료구조나 디자인패턴에 대해 몰라도 프로그램을 작동하게는 만들 수 있지만 그것을 아는 사람이 장기적으로는 훨씬 더 성장 가능성이 높고 대규모 서비스를 만들 가능성이 높아집니다.

어쨌든 오늘은 그런 '잘'해야 하는 것에 대한 이야기를 하려는건 아니구요.

웹서비스나 모바일 서비스가 돌아가는 원리와 구조에 대해서만 간단하게 소개드리고자 합니다. 아주 러프하게만 작성하는 글입니다. 자세한 내용을 하나씩 언급하자면 그 양이 아주 많습니다.

프론트엔드와 백엔드

---

먼저, 프론트엔드와 백엔드의 개념을 알아야 합니다.

웹의 기본 개념은 통신입니다. 네이버를 이용한다고 가정해보겠습니다. 우리가 스마트폰이나 노트북을 이용해서 네이버에 접속을 하면 먼저 www.naver.com라고 브라우저의 주소창에 입력합니다. 그러면 해당 주소와 연결된 DNS서버에서 네이버의 웹서버 IP주소를 알려줍니다. 우리가 접속할 수 있는 모든 웹서버는 고유의 IP주소를 가지고 있습니다. 그럼 해당 웹서버에 접속이 되면 우리가 원하는 정보들(HTML, CSS, JavaScript, 이미지 등)을 요청합니다. 그러면 서버는 요청에 응답해서 관련 정보들을 다시 우리의 스마트폰이나 노트북으로 보내줍니다.

원리는 간단합니다. 깊게 들어가면 더 복잡하지만 큰 원리는 '클라이언트에서 뭔가를 요청하고, 서버에서는 그 요청에 대한 응답을 다시 보내주고', 그걸 주고받고주고받고 이게 클라이언트와 서버가 통신을 하는 가장 기초적인 행동입니다.

프론트엔드

---

프론트엔드에 대응하는 기기는 누구나 들고 다니는 스마트폰, 태블릿PC, 노트북과 같은 기기들이 있습니다. 한마디로 서버에 무언가를 요청해 받아와서 우리 눈앞에 뿌려지는 기기들이 프론트엔드 단말기(에서 돌아가는 웹브라우저)들이라고 보시면 이해하기가 쉽습니다.

웹을 기준으로 설명드리면 브라우저에 HTML과 CSS로 화면을 그려줍니다. 우리가 보는 웹페이지들의 디자인이나 모양은 전부 HTML과 CSS로 그려져 있습니다. 그리고 필요한 이미지들도 있겠죠. 사진도 뜨고, 아이콘도 뜨고 그러잖아요? 그리고 끝으로 HTML과 CSS로 그려진 웹페이지에 생명을 불어넣는 자바스크립트(JavaScript)가 있습니다.

프론트엔드의 개발은 HTML로 웹페이지의 구조를 만들어서 내용물을 넣고, CSS로 HTML페이지의 디자인을 한 뒤, 자바스크립트를 이용해서 뭔가 움직이게 만들거나, 서버에 데이터를 요청해서 받아오는 작업을 하게 됩니다.

모바일앱의 경우 앞에서 설명한 HTML, CSS, JavaScript로 만드는 경우도 있지만, 네이티브로 만드는 경우도 있습니다. 네이티브는 말 그대로 안드로이드는 코틀린이나 Java와 같은 언어로(자바와 자바스크립트는 완전히 별개의 언어입니다), 아이폰은 스위프트나 오브젝티브C와 같은 언어로 개발합니다. 스마트폰 OS마다 특화된 언어들이 있습니다. 네이티브 앱을 개발하면 HTML, CSS, Javascript로 개발할때보다 개발 자원은 많이 소모되지만 훨씬 미려하고 부드러운 UI와 기기에 더 깊이 접근하여 더욱 다양한 앱을 만들 수 있습니다.

백엔드

---

웹개발에서 백엔드는 서버쪽에서 돌아가는 것들이라고 생각하시면 이해가 쉬울까요? 우리가 노트북이나 스마트폰으로 네이버에 접속하면 네이버 서버에 이것저것 요청합니다. 네이버 서버는 부지런히 돌아갑니다. 로그인이 돼 있다면 로그인 처리도 해야되고, 이런저런 정보들도 데이터베이서에서 가져와서 화면에 뿌려줘야 하고요.

서버에서 뭔가 부지런히 '돌아가는'그런 것들을 만드는 일련의 과정이 백엔드 개발이라고 보시면 됩니다.

프론트엔드에서는 자바스크립트가 UI와 데이터 통신 관련된 것들을 처리한다고 했습니다. 백엔드에서도 부지런히 돌아가는 언어가 있는데, 흔히 우리가 알고 있는 PHP, 자바(JSP), 파이썬, 루비 같은 언어들이 백엔드 서버에서 돌아갑니다. 클라이언트에서는 PHP, JSP 소스코드를 볼 수 없겠죠?

과거에는 웹개발자라고 하면 주로 이 백엔드 개발자들을 말했습니다. 자바(JSP)개발을 하거나 PHP개발을 하는 사람들을 일컬었죠. 그러나 최근에는 클라이언트에서 처리할 수 있는게 많아지고 백엔드는 API 엔드포인트를 잡아주는 역할에 그치면서 프론트엔드 개발자들의 비중과 역할이 매우 커졌습니다.

그리고 서버에는 이용자들이나 컨텐츠의 정보들이 저장되는데 그 정보들의 집합을 데이터베이스라고 합니다. MySQL이나 MSSQL과 같은 도구들을 쓰겠죠. 서비스의 가치를 가늠하는 가장 핵심적인 자산이기도 합니다. 백엔드 개발자들은 데이터베이스에 CRUD(만들고, 읽고, 수정하고, 삭제하고)하는 작업을 가장 반복적으로 많이 하게 됩니다.

JSON과 XML

---

로그인을 한다고 가정해보죠. 클라이언트(웹브라우저)에서는 URL주소에 파라미터를 붙이거나 http 헤더에 관련 정보들을 서버쪽으로 보냅니다. 그리고는 로그인을 해달라고 요청을 합니다. 여기까지가 프론트엔드가 하는 역할이죠.

그러면 서버에서는 호출된 URL과 들어온 파라미터 정보를 가지고 백엔드의 스크립트 언어를 실행합니다. 몇가지 조건이 들어맞으면 데이터베이스를 뒤집니다. 데이터베이스를 뒤져서 들어 온 값들이 맞으면 로그인 되었다고 다시 클라이언트에게 정보를 보내줍니다. 여기까지가 백엔드가 하는 역할입니다.

그럼 다시 클라이언트에서는 서버에서 넘어 온 값을 가지고 그에 맞는 화면을 뿌려줍니다.

여기서 잠깐. 서버에서 -> 클라이언트로 값을 보내 줄 때 그 값은 당연히 어떤 데이터 뭉치겠죠. 그 데이터 뭉치의 형태는 서버와 클라이언트가 약속한 형태이어야 합니다. 과거에는 XML을 가장 많이 썼는데, 요즘은 대부분 JSON을 씁니다. JSON의 구조는 정말 심플합니다. 키와 값의 쌍으로 이루진 데이터 덩어리 입니다. 이를테면 "아이디", "jongsiksong", 그리고 "로그인 성공 여부", "success" 이런식으로 키와 값의 쌍이 넘어옵니다. 그러면 클라이언트에서는 그 json값을 받아서 필요한 화면을 뿌려주는 것입니다.

[웹사이트 사용자] -> [웹브라우저] -> [HTML, CSS, JavaScript] -> [파라미터 out] 여기까지가 프론트엔드쪽에서 백엔드에게 데이터를 요구하는 과정입니다.

[파라미터] -> [서버사이드스크립트 실행] -> [데이터베이스작업] 여기까지가 프론트엔드에서 넘어 온 파라미터와 요구사항을 토대로 데이터베이스를 뒤지는 작업입니다.

[데이터베이스에서 값 추출] -> [서버사이드스크립트 결과값] -> [JSON 결과값] 여기까지가 백엔드에서 만든 결과값을 다시 프론트엔드로 돌려주는 과정입니다.

[JSON결과값] -> [자바스크립트로 관련 비지니스 로직 처리] -> [HTML, CSS, JavaScript로 필요한 화면 그려주기] -> [사용자] 여기까지가 서버에서 넘어 온 값을 가지고 사용자에게 화면을 뿌려주는 과정입니다.

이런 일련의 과정으로 웹/모바일 서비스는 작동합니다. 깊게 들어가면 더 공부할 것이 많지만 이런 큰 흐름을 알고 있어야지 수월하게 서비스를 구축할 수 있습니다. 처음 입문하는 분들은 부분적인 기능의 구현이나 지엽적인 언어의 몇가지 부분만을 가지고 개발에 진입하기 때문에 전체적인 개발의 흐름을 알지 못하면 벽에 부딪혀서 한참을 고생하게 됩니다.

관련 직군과 직업

---

웹서비스 구축 프로세스 (워터폴의 경우)

---

[비지니스 기획, 상위기획] -> [화면 및 UI 기획, 하위기획] -> [인프라 구축] -> [디자인 및 퍼블리싱] -> [프론트엔드 및 백엔드 개발, DB 구축] -> [QA] -> [서비스 배포]

관련 직군

---

비지니스 기획자 : 사업 기획을 합니다. 서비스를 이용해서 어떻게 사업을 키워나가고 돈을 벌지 기획하는 사람입니다. 상위 기획자라고도 합니다. 업계가 돌아가는 방식이나 돈 나오는 구멍을 잘 찾아내야 합니다. 여러가지 지표와 숫자들을 토대로 마케팅, 영업, 경영전략도 수립합니다.

화면 및 UI기획자 : 하위기획자라고도 말합니다. 서비스에 필요한 화면들을 파워포인트 따위에 그려서 개발자와 디자이너들이 업무를 수월하게 진행할 수 있도록 초기기획하는 사람들입니다. 이 직군은 가장 욕을 많이 먹고 디자이너나 개발자들과 가장 많이 부딪히는 직군이기도 합니다.

그 이유는 실제로 '그 존재 자체가 필요하다 아니다'라는 오래된 논쟁에서 출발합니다. 개발자나 디자이너 출신이 이 직군을 맡으면 꽤 괜찮은데 많은 숫자가 개발이나 디자인을 해본 적 없는 사람들이 맡고 있습니다. 심지어 비디자이너나 비개발자 출신이 화면 기획을 하게 되면, 웹에 대한 기술이나 이해력이 떨어져서 실무자들과 굉장히 많이 충돌합니다. 이 사람들이 많이 하는 이야기가 '네이버 처럼 해주세요'. '구글은 되던데요' (...)

디자이너 : 디자이너는 웹서비스나 모바일 서비스의 화면을 디자인합니다. UI뿐만 아니라 이용자들의 동선(UX)도 고려해야 합니다. 그래서 실력이 모자란 화면 기획자들과 자주 부딪히기도 합니다. 웹디자이너는 심미적으로 예쁘게 화면을 그려내는 능력 뿐 아니라, 프론트와 백엔드 기술에 대한 이해력도 가지고 있으면 그 가치는 더욱 높아집니다. 최신 트렌드도 잘 알면 좋구요. 더 나은 UX가 있는데 그걸 몰라서 복잡한 UX를 만들거나, 이상한 UI를 만들어내서 서버 리퀘스트를 폭발적으로 증가시키면 그건 나쁜 디자이너가 됩니다. 화면을 예쁘게 그리는 건 기본이지요.

퍼블리셔 : 퍼블리셔는 디자이너가 만든 디자인을 실제 웹페이지로 만드는 작업을 합니다. HTML, CSS만 작업하는 초짜 퍼블리셔들도 있고, 동적인 화면처리를 자바스크립트를 작성해가면서 해내는 고급 퍼블리셔도 있습니다. 그리고 최근 추세는 프론트엔드개발과 퍼블리싱이 합쳐지는 추세입니다. 퍼블리셔의 실력은 정말 천차만별입니다. 컴퓨터 사이언스에 해박한 사람부터, 학원에서 한두달 배운 코더까지.. 이 사람들은 디자이너의 화면이 브라우저나 기기에 구애받지 않고 모든 곳에서 잘 표현되도록 하는 것이 1차 목표이며, 웹표준과 웹접근성에 대한 전문적인 지식도 있어야 합니다.

프론트엔드 개발자 : 화면단에서 벌어지는 모든 일을 처리하는 개발자입니다. 백엔드에 데이터를 요구하고 백엔드에서 날아오는 데이터를 받아서 화면에 뿌려줍니다. 최근 클라이언트 웹브라우저들의 성능과 기능이 고도로 발달했기 때문에 이들 업무가 상당히 많아졌습니다. 최근 웹개발의 프론트엔드와 백엔드의 비중을 따져보자면 프론트가 7 백엔드가 3이라고 해도 과언이 아닙니다. 최근 페이스북이나 구글과 같은 회사도 풀스택을 지향하는 프론트엔드 개발자를 위주로 채용하고 있습니다. Angular, ReactJS, Vue.js와 같은 프레임워크와 라이브러리들의 발달로 프론트엔드는 황금시대를 맞고 있습니다.

백엔드 개발자 : 과거에는 하는 역할이 많았지만 최근에는 데이터베이스에 접근해서 API엔드포인트를 만드는 직군으로 변화한 것 같습니다. 어떤 곳은 하루종일 DB쿼리문만 짜는 곳도 있고요. 데이터베이스와 붙어 사는 직군이라고 볼 수 있습니다. 우리나라 백엔드 개발에서는 아직도 전통적인 자바가 강세를 보이고 있습니다. 해외에서는 파이썬의 인기가 높습니다. 아마도 구글 때문인 듯 합니다. 페이스북은 백엔드 개발에 여전히 PHP를 고수하고 있습니다.

DBA : 데이터베이스를 전담하는 직군입니다. 데이터베이스를 설계하고 관리하며 보안을 책임집니다. (물론 보안 담당자는 따로 있겠지만) 그리고 데이터베이스의 성능을 관리하는 등 데이터베이스와 관련된 모든 부분을 책임집니다. 백엔드 개발자들이 데이터베이스에 접근해서 CRUD업무를 한다지만 데이터베이스 또한 제대로 공부하자면 그 양이 엄청나게 방대하기 때문에 규모가 큰 곳은 전문 직군인 DBA를 보유하게 됩니다.

QA : 서비스의 완성 단계에서 최종 품질 관리를 하는 사람들입니다. 서비스의 품질이나 결함을 찾아내서 개발자나 디자이너, 퍼블리셔에게 수정을 요구합니다. QA를 통과하지 못하면 제품은 배포되지 못합니다. 즉, 제품은 소비자에게 공개될 수 없습니다.

풀스택 개발자

---

주로 1인 기업 창업자나, 취미 개발자들이 많습니다. 기획-퍼블리싱-프론트-백엔드-DBA-인프라구축 업무를 혼자서 다 진행합니다. 그리고 디자인 감각이 있다면 이 사람들은 혼자서 서비스의 기획 - 디자인 -퍼블리싱 - 프론트와 백엔드 개발 - DB관리 까지 혼자서 진행합니다.

웹이 우리나라에 소개되던 1990년대에는 웹마스터라는 사람들이 있었습니다. 그때도 어떻게 보면 풀스택 개발자가 있었습니다. 그러나 웹 기술이 지금처럼 방대하지는 않았습니다. 대충 이미지를 만들어서 썰어내고 썰어낸 이미지는 TABLE태그로 쪼개서 집어넣고, PHP나 Perl 코드안에 HTML 코드를 뒤죽박죽으로 섞어서 작업하던 시절이었습니다.

그러나 지금은 JSP나 PHP코드에 HTML 코드를 떡칠해서 웹페이지를 곧장 만드는 허접한 곳은 없다고 보시면 됩니다. MVC패턴으로 확실하게 개발하고 백엔드는 API 엔드포인트를 잡아주고 프론트엔드는 (비지니스로직을 포함하는)V를 관리하게 되었습니다.

가장 간단한 것들만 러프하게 소개드렸는데도 내용이 꽤 길어졌습니다. 각 분야 별로 제대로 소개를 드리자면 책 몇권으로도 부족하고 연재 기간에 몇년이 들어갈지도 모릅니다. 그만큼 내용 자체는 방대합니다. 2018년 웹개발 로드맵을 전반적으로 보시고 싶으시면 다음 링크를 참고하세요.

2018년 웹개발 로드맵
https://github.com/devJang/developer-roadmap/blob/master/readme.md