개알못인 당신이 웹개발을 시작한다면 (1)
'개'발을 '알'지 '못'하는 당신이 웹 개발을 시작한다면, 어디서부터 무얼 공부해야 할지라는 주제의 글입니다. 감히 누구도 편하게 얘기하기 어려운 주제입니다. 무능한 저 한 개인이 올바른 가이드를 제시해 드릴 수 없는 일입니다만, 무책임하게나마 감히 적어보겠습니다. 너무 신뢰하지 마시고 가벼이 읽어 주시고, 이렇게 생각하는 사람도 있구나 정도로 넘기시면 좋은 주제입니다.
간혹 주변에서 본격 웹 개발자가 되고 싶다거나, 아니면 어떤 필요에 따라 웹 개발이라는 분야에 도전해 보려는 분들이 계신데, 마땅히 추천해 드릴 자료나 가이드가 너무 부족하다는 생각이 들었습니다. 그도 그럴 것이, 아직 웹 개발이라는 분야가 빠르게 성장하고 있고, 어제는 촉망받던 기술이 오늘의 레거시가 되버리는 상황이 반복되고 있어서, 정작 전업 개발자들조차 따라가고 배우기 벅찬 상황입니다. 뭐 하나 배워 놓으면 금세 쓰레기 지식이 되고 마는 거죠. 게다가 뭐 하나의 한 분야의 같은 일을 하는 데도 다양한 기술과 방법이 숱하게 쏟아지면서 서로가 좋은 방법이라며 싸움에 가까운 토론을 벌이고 있어서 혼란스럽습니다.
이런 상황에, 누군가 새로이 웹 개발에 도전해서 무언가 간단하게나마 만들고 싶다는 생각이 있다 하더라도, 무언가를 공부하고 있으면, 다른 누군가가 나타나서, 그게 아니라 이 방법이나 이 기술을 써야 한다며 훈수를 두는데, 잘 모르는 입장에서는 팔랑귀가 펄럭여서 새로 처음부터 시작하게 되기도 합니다.
맞습니다. 더 새로운 기술과 더 나은 도구들이 분명히 있습니다. 그런데, 개발자마다 성향과 상황과 또 그들의 과거 경험에 따른 선호도가 너무도 다르고 다양해서, 잘 정리된 가이드가 나오기는 힘들어 보입니다. 지금도 없었고, 앞으로도 없을 것입니다. 이 글 역시 그런 충분한 가이드일 수는 없습니다. 이 글 역시 저 개인의 과거 경험에 따른 선호도의 나열일 뿐입니다.
상황이 이러니, 이런 방법으로 도전해 보면 어떨까요? 우선 무언가 직접 만들어서 개발한 웹서비스를 온라인에 공개해 보는 겁니다. 아무도 안 쓰더라도 상관없습니다. 나 혼자 들어가 보고, 친구들에게 링크를 보내줍시다. 들어와 보고 “이게 뭐냐?”라고 의아해하며 그냥 나가더라도 상관없습니다. 한번 만들어나 봅시다. 우아하고 최신의 기술이 아니어도 괜찮습니다. 일단 무언가 보이게 해 봅시다.
목표
이 연재의 목표는 공부해야 할 주제와 키워드를 제시하는 것입니다. 그 상세 내용은 직접 찾아보며 하셔야겠지만, 전체 적인 계획과 꾸준한 노력을 투자할 기준점을 하나 세워드리는 것이 목표입니다. 취직이나 훌륭한 개발자가 되는 것이 목표도 아닙니다. 단지 내가 공부해서 웹서비스 하나 만들어 보는 것이 목표입니다. 안 그래도 어려운 개발, 생소한 개발, 목표를 간단하게 잡아 봅시다. 거창한 대규모의 웹서비스 아닙니다. 끽해야 내 지인 모두가 쓸까 말까 한 서비스, 간단한 서비스입니다.
미리 말씀드리자면, 아무리 최대한 간단하고 얕게만 파고들더라도 긴 시간이 필요합니다. 매일 얼마만큼의 시간을 집중하느냐에 따라 다르겠지만, 수개월에서 1년이 넘게 걸릴 수도 있습니다. 이 글의 내용을 다 배우더라도 투자하는 노력에 비해 당장 눈에 보이는 결과가 보잘것없을 겁니다. 남들에게 보잘것없어도 괜찮습니다. 내 새끼는 일어서기는 커녕 제대로 앉지도 못하고, 침 질질 흘리며 하루종일 똥만 싸는데도 천재인 것 같고 하염없이 예뻐 보이는 것과 비슷합니다. 내가 만든 서비스가 온라인에 올라가면 그 뿌듯함은 남들의 평가와 무관한 행복감을 안겨줄 거예요.
간단한 일에 긴 시간을 투자하는 이유는, 그 다음 단계에 더 깊이 있는 개발을 하기위한 발판을 삼기 위해서입니다. 쉽게 무너지지 않을 기초를 쌓는 거죠. 지금은 일어서지도 못하는 아기가 언젠가는 뛰어다니며 말도 할 거예요.
세상에! 역시 내 새끼가 천재였군.
제공 가치
개발 전체 과정에 있어 필요한 주제를 최소한 한 가지씩 꼽아드리겠습니다. 많아 봐야 두세 가지 중 하나를 택하면 되게끔 알려드리겠습니다. 접근하지 말아야 할 주제도 적어드리겠습니다. 시간을 낭비하는 함정에 빠질 일을 막아드리겠습니다. 당신이 뛰어야 할 젊은 말이라면, 양 눈 옆에 가리개를 가려드리겠습니다. 앞만 보고 뜁시다. 수풀에 기어가는 뱀이 보인다고 두려워하지 말고 그냥 앞으로 뛰면 됩니다. 뱀이 기어와봤자 말보다 빠르게 움직일 수 있나요? 최단코스를 찾는라 고민하지 말기로 해요. 우리의 목표는 갈팡질팡하지 않고 목적지를 향해 가는 겁니다, 조금 돌아가더라도요.
제공하지 않는 가치
각 세세한 내용의 설명은 드리지 않습니다. 직접 해당 키워드로 찾아보시고 공부하셔야 합니다. 이 부분은 누가 대신해 줄 수 없습니다. 공부는 직접해야 합니다. 대부분의 내용은 이고잉님의 오픈튜토리얼스를 참고하면 좋은 자료가 많을 것으로 생각합니다. 인프런 사이트에 있는 강의들도 좋다고 들었습니다.
각 분야의 최고의 선택을 제시하지도 않습니다. 그저 되는 것 중에서, 제 개인이 선호하는 방법을 알려드립니다. 다른 개발자와의 의견은 얼마든지 다를 수 있습니다. 선택의 폭을 좁히는 것이 목표이지 최고 효율의 방법을 알려드리는 것이 목표는 아닙니다. 미리 귀뜀하자면, 이게 최선의 방법이다라고 주장하는 사람의 말을 듣지 말자는 겁니다. 거짓말장이이거나 아직 무지한 사람일 가능성이 높습니다. 왜냐하면 이 바닥에서 최선의 방법을 제시하기는 꽤 어렵거든요.
공부해야 할 주제
정해진 카테고리는 아닙니다만, 대략 이렇게 나눠서 공략해 볼게요. 배우다 보면 한 주제에 대해서도 다양한 방법들이 즐비합니다. 언젠가 더 진지해진다면 더 깊게 다뤄야 하겠지만, 지금은 한눈팔지 말고 아주 얕게만 빠르게 파기로 합니다. 누가 뭐라고 해도, 여기 정리한 선택만 하고, 나머지 선택은 외면해 버립시다. 이 주제들을 다 훑고 나면, 그 후에 누가 좋다고 한 기술을 더 알아보기로 합시다.
- 프론트엔드(front-end)- 이용자의 웹브라우저에서 직접적으로 보이는 부분을 다루는 기술들
- 백엔드(back-end) — 웹브라우저가 주고받는 데이터를 기록하고 가져오는 등의 뒷 단의 궂은 일을 처리하는 기술들
- 데이터베이스(database) — 백엔드가 다루는 데이터를 보관하고 검색해 오는 기술
- 네트워크(network) — 여러 컴퓨터 사이의 데이터 통신에 필요한 기술들
- 에디터/툴/버전관리 시스템(tools) — 각 주제 개발 작업에 필요한 도구들 선택과 활용
- 기초 자료 구조(data structure) — 프론트엔드나 백엔드 프로그래밍 모두에 쓰이는 기초 지식. 데이터를 원하는 형태로 찾기 좋게 연결하는 구조.
- 리눅스/도커/AWS — 백엔드와 데이터베이스를 운영할 기술과 환경
아직 이 주제들이 무얼 의미하는지 몰라도 됩니다. 오늘 글에서는 이 주제들이 무얼 의미하고 어떤 걸 키워드로 전해드릴지만 적어보겠습니다.
프론트엔드 (aka 클라이언트 측)
흔히 HTML, CSS, 자바스크립트 등의 단어를 들어보셨다면, 이 주제가 그 영역을 의미한다고 보시면 됩니다. 우리가 사용하는 웹브라우저가 이해하는 직접적인 기술들을 다루는 분야입니다. 인터넷 익스플로러, 사파리, 크롬 등의 웹브라우저들은 인터넷에서 문서를 받아와서 화면에 보이는데, 이 보이는 문서의 내용들이 들어있는 모양새라고 보시면 어떨까 합니다.
다른 거 빼고, HTML5, CSS3, JavaScript를 보시면 됩니다. 서툴지만 쉽게 얘기하면, HTML5는 웹문서 본문을 적는 텍스트 포맷이고, CSS3는 그 문서의 스타일을 다루는 속성들이며, 자바스크립트는 웹브라우저가 이해하고 실행할 수 있는 프로그래밍 언어입니다. HTML5와 CSS3는 평범히 적는 텍스트지만, 자바스크립트는 좀 더 본격적인 프로그래밍을 해야 합니다.
프론트엔드 기술만 다뤄도 내 컴퓨터에 저장한 파일로 웹브라우저 화면에 무언가를 보이게는 할 수 있습니다. 결국 나중에 백엔드와 마주쳐야 손뼉 소리가 나는 거지만요.
보통 프론트엔드에서 무언가 주문(요청)을 하고, 그 주문을 멀리서 받은 백엔드의 서버가 응답을 주고, 그 응답 내용을 웹브라우저가 화면에 표시합니다. 프론트엔드가 먼저 요청을 해서 서비스를 받는 입장이고, 백엔드가 그 요청을 받아서 작업을 처리하고 응답을 주는 입장이라서 각각 클라이언트 측(Client-side)과 서버 측(Server-side)라고도 부릅니다. 식당에 가면 손님(클라이언트)이 주문을 하고 웨이터나 웨이트리스(서버)가 주문을 받아서 주방에 전달해 요리를 만들어 다시 손님에게 가져다 주는 상황과 비슷합니다.
이 기본 기술을 편하게 잘 다루기 위해, React.js / AngularJS / Vue.js등의 다양한 추가 요소들이 있습니다. 우선은 거들떠보지도 말고, 오로지 HTML5, CSS3, 기본 JavaScript만 봅니다. 자바스크립트를 다루는 데에도 그 앞에 TypeScript를 쓴다거나 더 효과적인 도구나 언어들이 있습니다만, 역시 우선은 빠져들지 않습니다. 그냥 날것의 자바스크립트만 봅니다.
특히 프론트엔드는 엎치락 뒤치락 새로운 기술들이 하루가 다르게 뒤엎는 분야입니다. 샛길로 빠지지 않도록 각별히 주의합니다.
아직 언급할 단계는 아니지만, 이 연재의 컨셉을 미리 밝히는 의미로 말씀드리면, 이런식이 될 것 같습니다.
프론트엔드에서 처리하는 내용이 더 방대해지고, 웹서비스의 수준이 올라가면서, 이용자의 기대치도 높아졌기 때문에, 위 기본 세 기술을 그대로 써서 원하는 결과물을 만들기는 할일이 너무 많습니다. 그래서 저 3가지 기술요소들을 더 유연하고 멋지고 편하게 다루기 위해 아래의 기술들을 추가로 쓰는 상황입니다.
- 보통의 웹사이트 처럼 간단한 화면 요소들만 필요할 것 같다면 Vue.js를 공부해서 씁시다.
- 흔히 보는 웹사이트들 보다 우아하고 현란하게 바뀔 내용이 많은 경우에는 React.js를 공부해서 쓰기로 해요.
- AngularJS는 시작도 하지 말아요. 덩치 큰 괴물입니다.
이런 컨셉이라서, 분명 AngularJS를 선호하시는 분들은 싫어하실 겁니다. 앞으로도 아마도 본인이 싫어하는 내용이 보이면, 이 시리즈 전체를 폄하하시거나 공격적인 의견을 피력하실 수도 있습니다. 이해합니다. 저라도 그렇습니다. 누구나 자기가 좋아하는 것을 나쁘다고 얘기하면 불쾌한 감정이 드는 거죠.
이 글의 목표는 Vue.js / React.js / AngularJS 같은 어려운 주제들을 고르는 노력조차 줄이는 데 있습니다. 그걸 고르고 평가하고 선택하는데도 굉장한 에너지가 듭니다. 혹자는 또 이렇게 얘기할 겁니다. 저 셋을 동일 선상에 놓는 것도 이상하다고, 정확한 의미를 규정하려 하며 태클을 걸 것입니다. 그분들의 말이 정확하고 맞습니다. 하지만 이 연재에서 저는 정확성을 조금 희생해서 빠르게 크로키로 전체 흐름만을 잡도록 하겠습니다. 정밀화는 그 다음에 그리도록 합시다.
백엔드 (aka 서버 측)
백엔드는 프론트엔드에 보일 자료들을 만들어 내는 영역입니다. 자바, 파이썬, 루비 등의 언어나 스프링, 장고, 루비 온 레일스 같은 프레임워크 이름을 들어보셨다면, 그게 바로 이 영역입니다.
백엔드에서는 프론트엔드에 보여줄 HTML 문서를 그때그때 생성해서 내려줍니다. 한번 작성하고 잘 바뀌지 않는 내용들은 평범한 파일의 형태로 디스크에 저장해뒀다가 전달해주고, 그때그때 변하는 새로운 자료들은 요청시 클라이언트마다 다르게 만들어서 내려주고는 합니다. 전자를 정적(static) 페이지라고 하고, 후자를 동적(dynamic) 페이지라고 합니다. 모든 고객이 같은 걸 보는 메뉴판 같은 것을 정적(static) 자원이라고 보면 되고, 고객마다 다른 응대를 해주는 웨이터/웨이트리스의 응대 기술이 동적(dynamic)한 영역이라고 보시면 될 것 같습니다. 백엔드 개발이라 함은 대부분은 동적인 처리를 다루니 굳이 구분해서 이해하실 필요는 없습니다.
백엔드는 여러 고객의 요청을 한꺼번에 받아서 각각 제대로 처리해서 내려줘야 하는 동시성(concurrency) 처리 문제가 있어서 어려운 면이 있습니다. 요리 주문을 받은 주방에서는 요리사들이 다양한 재료를 한꺼번에 조리하면서 여러 요리가 각각 하나의 요리로 완성돼야 하는 상황과 비슷합니다. 요리사가 스테이크 요리를 하고 있는데, 파스타 요리 주문이 들어왔다고 해서 스테이크 요리에 토마토소스를 얹으면 안 되잖아요? 그렇다고 스테이크 요리가 끝날 때까지 기다렸다가 파스타요리를 시작하면 고객들은 이미 화를 내며 집에 갈 테고요. 그러니 여러 가스레인지 불마다 여러 요리가 마구 동시에 조리해야 하는데 이렇게 동시에 여러 작업을 하면서도 각각의 처리 단위가 서로 꼬이지 않게 완성되게 하는 일이 동시성 처리입니다. 동시성 처리를 잘 하면서, 성능까지 좋아야 많은 고객의 주문을 처리할 수 있기 때문에 다양하고 어려운 기술들이 많이 있습니다만, 우리의 목표는 대용량 서비스가 아닙니다. 간단한 서비스이므로, 동시성 처리를 문제없이 다루되, 빼어난 성능을 위한 기술들은 외면하도록 합시다. 동네 맛집을 운영할 거지 특급호텔 뷔페 주방을 운영할 게 아니거든요.
백엔드는 특히 성능 튜닝의 작업이 효과적으로 드러나는 분야라, 아주 사소한 영역까지 더 빠르게 개발하려는 노력이 깃드는 분야입니다만, 지금은 불필요한 잡기로 여기고 거들떠보지도 말도록 합니다.
백엔드는 특성상 프로그래밍 언어의 선택이 자유롭고 다양합니다. 앞서 언급한 대로 흔히 Java, Python, Ruby 등이 흔히 선택되고, 프론트엔드의 자바스크립트 언어를 백엔드에서 쓰는 Node.js도 있고, Go나 Swift 같은 언어도 있습니다. 제가 즐겁게 배우고 있는 Clojure도 쓸 수 있습니다만, 우선은 Python이나 Ruby중에서 고릅니다. 둘 다 가볍고 빠르게 더 많은 결과물을 만들어 낼 수 있습니다. 주변에서 Java를 권하는 사람들이 있을 텐데, 고맙다 말하고 무시합니다.
Python과 Ruby 프로그래밍 튜토리얼 사이트를 빠르게 살펴보시고, 조금이라도 더 끌리는 쪽으로 선택해서 백엔드 개발에 활용하시면 됩니다. 저 개인적으로는 Python이나 Ruby나 비슷해 보이고, 둘 중에는 루비를 선호합니다만, 적어도 국내 상황에서는 루비는 다소 식어있고, 파이썬은 꽤나 흥하고 있습니다. 파이썬의 경우 매년 열리는 컨퍼런스의 규모나 참석자 수를 보더라도 흥하고 있는 것을 알 수 있습니다. 다만, 웹 개발에는 루비 온 레일스라는 극강의 프레임워크가 루비 쪽에 있기 때문에, 딱 둘 중에 뭐다 우세를 정하기 어렵습니다. 국내 커뮤니티 규모의 측면에서는 파이썬, 웹개발의 편리함 측면에서는 루비를 선택하면 되겠습니다. 파이썬도 장고 같은 프레임워크가 잘 돼있기 때문에 아주 큰 차이는 아닐 겁니다.
다만, Java는 무시하도록 합니다. 우리가 짓고자 하는 것은 2층 목조 주택인데, 초대형 콘크리트 아파트 단지를 지을 언어를 선택할 이유는 없습니다. 그리고, 프론트엔드 개발부터 시작하신 분들은 자바스크립트 언어를 써서 백엔드 개발을 하는 Node.js를 선택하기도 합니다. 나쁘지 않습니다만 일단 제외합니다. 쉽게 접근할 수 있는 PHP를 권하는 사람도 있을 겁니다. 고맙다 말하고 무시합니다.
- Do - 루비나 파이썬 중에 골라 봅시다.
- Don’t - 자바나 PHP는 눈길도 주지 맙시다.
오늘은 여기까지
무리한 욕심에 앉은자리에서 마구 적어봤습니다. 초반에도 말씀드렸듯, 각 분야마다 아주 다양한 선택이 있습니다. 그리고 그 선택은 합리적 영역과 심리적 영역으로 마구 뒤엉켜있어서, 어느 하나가 최선의 선택이라고 얘기하기 어렵습니다. 도움이 되는 것보다, 괜한 뭇매를 맞게 될까 걱정이 앞섭니다만, 뭐 제가 적은 글이 그다지 널리 읽힐 것은 아니기에 주변 분들 보시라는 정도에서 부담 없이 적어보았습니다.
마음에 든다면 이 글을 공유해 주시고, 마음에 안든다면, 본인 마음에 드는 다른 글을 찾거나 직접 작성해서 공유해주세요.
연재가 계속되길 바라며, 오늘은 이만.
1편: 프론트엔드와 백엔드 — https://goo.gl/7GLeQN
2편: 데이터베이스와 네트워크 — https://goo.gl/d16511
3편: 기본 개발 도구 — https://goo.gl/wWgqyw
4편: 기초 자료 구조 — https://goo.gl/ch4paX
5편(끝): 리눅스, 도커, AWS — https://goo.gl/KTd8WP
덧) 이 연재가 마음에 드셨다면, 작성자의 개발 유튜브 채널에도 놀러오세요.
YouTube: hatemogi — https://www.youtube.com/channel/UCN5w8UN3Y7aXmsV5AsNpUpg
