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

웹개발자는 웹땔감이라고도 조롱을 자주 당합니다. 그만큼 당장은 진입이 쉽고 배우기에 난이도도 낮습니다. 누구라도 원하는 기능 한두개쯤은 하루만에 구현할 수 있죠. 문제는 그것을 진짜 '잘'해내냐에 달렸습니다. 웹표준을 몰라도 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] -> [서비스 배포]

풀스택 개발자

주로 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

UX디자이너를 본업으로 하고 있어서, 잘못 쓰신 부분을 집고 가고 싶어지네요. UI 기획자을 하위기획자라고 쓰신 것은 처음 들어본 워딩입니다. 기획업무에 상위/하위가 어디있을까요? 마치, 밑단 작업이나 하는 업무처럼 쓰셔서... 물론 회사마다 하는 UI기획을 하는 팀의 업무가 다르겠지만, 단순히 PPT나 기타 프로그램에 와이어프레임이나 플로우를 정리하는 것 뿐 아니라, UX 방향성을 정립하고, 제품이나 서비스의 전략을 기획하기도 합니다. 디자이너가 고민한다고 쓰신 동선 또한 UX/UI디자이너가 당연히 고민해야 할 일이구요. 서비스 또한 여러가지 방법론을 적용하여 기획을 하고, 중간 중간 사용성테스트를 통해 사용성이나 새 서비스에 대해 검증을 하기도 합니다.

입문자를 위한 웹/모바일 개발 개념잡기