"준혁 학생 프런트엔드와 백엔드가 뭐냐면요!"
사내 코딩 교육을 시작하겠습니다! (1)
"사내 코딩 교육을 시작하겠습니다!"
"자 집중근무제 시간 동안 고생하셨습니다. 개발자 사내 교육을 시작합니다!! 모두 회의실로 모여주세요!!"
오후 4시 적막하던 사무실에 김지원 팀장님의 큰 목소리가 울려 퍼집니다. 집중근무제가 끝나고 이제 사내 교육이 시작되려나 봅니다. 아 그런데 사내 교육이 뭐냐고요? 고코더 삼촌의 회사에서는 개발자를 위해서 코딩 교육을 한답니다. 코딩은 항상 새롭게 변화하고 발전하기 때문에 끊임없이 공부하고 노력해야 하는 분야랍니다. 그래서 회사에서는 개발자들의 성장을 돕기 위해서 도움을 주고는 합니다.
"개발자 여러분들 회의실에 다들 모이셨나요.? "
김지원 팀장님의 힘찬 목소리에 따라 회사 개발자들 회의실에 모두 모였습니다. 가지런히 삼삼오오 모여 앉은 숫자를 세어보니 약 10여 명 정도 되네요. 그중에서 고코더 삼촌과 선배 개발자 김성현 그리고 신입 개발자 하유진은 맨 앞에 앉았습니다. 열심히 교육을 듣고 받아 적기 위해 노트북에 메모장 프로그램을 켜놓았습니다. 그리고 키보드 위에 손을 올리고 강사님의 기다리고 있습니다. 그리고 다른 개발자도 역시 개인의 저마다의 노트북에 강의를 적을 수 있는 기록할 수 있는 프로그램을 켰습니다. 이제 곧 교육이 시작할 거 같습니다.
"지난주에 말씀드린 것처럼 1시간 동안 코딩 교육을 하겠습니다. 오늘은 외부에서 강사님을 초대했습니다. 모두 박수로 환영해주세요. 이진현 선생님입니다."
팀장님의 소개가 끝나니 회의실 문이 열리고 곱슬머리를 가지고 안경을 끼고, 정장을 입고 선생님이 등장하였습니다.
"짝짝짝!!"
개발자들은 강사님을 향해 힘차게 박수를 칩니다. 이때 고코더 삼촌도 열심히 박수를 치는데 노트북에 이메일 한통이 날아와 화면을 덮습니다. 준혁 학생이 또다시 질문이 생긴 거 같습니다. 잠깐의 틈을 이용해 고코더는 이메일 읽어봅니다. 내용은 이렇습니다.
"삼촌! 프런트엔드, 백엔드가 뭐예요?"
삼촌 또 궁금하게 생겼어요!!
다름이 아니라 코딩이라고 구글에서 검색을 해보니깐 너무 어려운 말들이 많아요!!
특히 '프런트엔드', '백엔드'라는 말이 제일 이해가 안 가요.
코딩을 하기 위해서는 이런 것들이 꼭 필요하다고 하는데 정말 궁금해요.
잠깐 가르쳐주실 수 있을까요?
PS.
제 전화번호는 010-XXXX-XXX 에요.
혹시나 전화로 설명해주셔도 준혁이는 너무 기쁩니다.
"안녕하세요. 여러분 만나서 반갑습니다. 오늘 교육의 주제는 개발자 여러분들이 가장 친숙한 단어 프런트엔드와 백엔드에 관한 이야기입니다. 아주 기초적이지만 우리 개발자들이 꼭 알아야 하는 단어이죠. 이것에 대해 한번 아주 쉽게 누구나 이해 가능할 수 있게 설명해보려고 합니다. "
고코더 삼촌은 메일을 읽고 잠시 고민을 하던 중 강사님께서 오늘의 주제를 말씀합니다. 그런데 이게 웬걸 준혁이의 질문과 똑같은 교육 주제입니다. 고코더 삼촌은 번뜩이는 아이디어가 떠올랐는지 갑자기 손을 듭니다. 강사님에게 할 말이 있는 거 같아요.
"네! 교육을 시작하기도 전에 질문을 하시는 개발자님이 계시네요. 아! 그 유명한 고코더 개발자님이시군요. 무슨 질문이 있어서 손을 드셨을까요? "
고코더 삼촌은 머쓱한 표정으로 자리에 일어났습니다.
"아 네 다름이 아니라 제가 오늘 준혁이라는 초등학생에게 개발자가 되려면 어떻게 해야 하는지 이메일을 보내고 있거든요. 그런데 방금 또 한통의 이메일이 왔는데 이번에는 프런트엔드와 백엔드가 무엇인지 궁금하다고 마침 질문을 하는데 갑자기 좋은 아이디어가 떠올라서요!"
흥미롭다는 표정을 하는 이진현 강사님은 안경을 치켜올리며 말합니다.
"네! 준혁이란 학생은 어릴 적부터 개발자를 꿈꾸는 아이인가 보군요. 정말 기특한 아입니다. 그런데 그 아이디어가 뭘까요? 왠지 저도 알 거 같네요. 혹시 화상통화를 연결해서 같이 강의를 들어보는 건 어떨지 의견을 물으시는 거군요?"
고코더 삼촌은 미소를 지으며 대답을 이어갑니다.
"네 맞아요. 그렇게 되면 우리들도 준혁이도 모두가 기뻐하는 교육이 되지 않을까 생각합니다.!! 혹시 다른 개발자 분들의 의견은 어떠신지요."
회의실에 모인 개발자들이 서로 눈치를 보더니, 선배 개발자 김성현이 말을 꺼냅니다.
"좋네요! 미래의 개발자와 지금의 개발자가 한 자리에 모여서 강의를 듣는 거 만 큰 좋은 일에 어디겠어요.!"
하면서 박수를 치니 나머지 개발자들도 환호를 합니다. 고코더 삼촌은 좌우를 살피며 동의를 얻었다는 고개를 끄덕입니다. 그리고 준혁이에게 화상통화를 겁니다.
준혁이와의 화상통화
"안녕 준혁아! 고코더 삼촌이야 만나서 반가워 이렇게 얼굴로 보니 더 반갑구나 다름이 아니라 지금 회사에서 준혁이가 질문한 프런트엔드와 백엔드에 대한 교육을 진행하려고 한단다. 한번 같이 들어보는 건 어떠니? 선생님께서 허락하시고 아주 쉽게 설명해주신다고 하네"
스마트폰으로 화상통화를 건 고코더 삼촌이 준혁이에게 아주 친절하고 상냥하게 설명합니다.
"아.. 네네 좋아요.."
준혁이는 쑥스러운 얼굴로 화면에 반만 얼굴을 비춘 채로 대답합니다.
"그럼 선생님 말씀 잘 듣고 한번 우리 같이 이해해보자!!"
고코더 삼촌은 강사님의 얼굴이 잘 나오도록 자신의 책상 앞에 스마트폰을 거치합니다. 그렇게 시끌벅적한 회의실 조용해지고 드디어 강의기 시작됩니다.
프런트엔드와 백엔드란 강의를 시작하겠습니다.
안녕하세요!
개발자 여러분과 준혁 학생에게
재밌는 프런트엔드와 백엔드의 세계를 아주 쉽고 재밌게 설명해보려고 해요.
그리고 이 책을 읽는 학생들도 한번 잘 들어보세요.
여러분은 혹시 영화관에 가본 적이 있나요?
영화관에 가면 재밌는 영화를 항상 볼 수 있답니다.
그런데 커다란 스크린에 쏘아진 화면을 만드는 빛을 따라가다 뒤를 보면은
영화관 맨 뒤에 상영실 작은 구멍에서 빛이 발사되는 걸 볼 수 있어요.
그곳에서는 감독님과 멋진 배우들이 땀 흘려서 열심히 만든 영화가 빔프로젝트라는 기계를 통해 흘러나오고 있답니다. 이게 바로 프런트엔드와 백엔드 비유예요.
화면으로 영화가 흘러나오는 스크린이 프런트엔드
영사기에서 열심히 영화를 만들어 쏘는 것이 백엔드
이해가 안 된다고요?
걱정 마세요! 아직 설명이 끝나지 않았어요. 조금만 더 자세하게 설명해볼게요.
프런트엔드가 뭐냐면
우리가 홈페이지를 접속하면 화려한 화면들이 보일 거예요.!
보이는 부분이 바로 그게 바로 프런트엔드예요. 그런데 이 화면에는 3가지의 큰 기술이 있답니다. 바로 HTML과 JAVASCRIPT와 CSS에요. 코딩 단어가 어려우니 쉬운 비유로 설명해볼게요.!
사람의 얼굴을 3단계로 나눠 볼까요?
저는 이렇게 나눌 수 있을 거 같아요. 위에 그림처럼 처음에는
1. 앙상항 뼈대만 있는 해골이고,
2. 그다음은 살이 붙어서 우리가 볼 수 있는 흔한 얼굴의 모습이고,
3. 마지막으로 멋지게 모자도 쓰고 안경도 써서 한껏 꾸민 옷을 입은 상태로 나눌 수 있어요.
홈페이지를 사람이라고 비유하면 이렇게 뼈대와 살과 멋진 액세서리까지 갖추고 있어야 해요
만약 우리가 운동도 열심히 하고 밥도 많이 먹어서 키도 크고 살도 통통하게 쪄도 만약에 해골의 모습이라면 어떨까요? 개성도 없고 차이가 없을 거예요, 하지만 프런트엔드라는 기술이 있기 때문에 홈페이지에 접속하면 멋진 모습에 홈페이지라는 멋쟁이가 등장한답니다.
그래서 프런트엔드 개발자들이 하는 일은 우리에게 보일 멋진 모습을 꾸미는 역할을 한답니다.
예쁘게 화면을 꾸며줘야 사람들이 좋아하고 더 자주 찾아오게 돼요.
준혁이 학생은 유튜브를 좋아한다고 들었는데 유튜브에 들어가면 깔끔하게 정리된 동영상이 잘 정리되어 있고, 적절한 위치에 버튼이 있는 이유도 프런트엔드 개발자와 디자이너가 열심히 이쁘게 꾸며서 만든 작품이에요.
그리고 프런트엔드 개발자들은 화면에 보이는 것을 움직이게 만드는 역할도 해요. 그냥 보이는 거뿐만 아니라 사용자들과 소통하여서 "이 버튼을 누르면 이런 행동을 해라!"라는 식의 명령을 내리는 역할도 해요. 유튜브에서 구독을 누르면 내 구독 리스트에 채널이 추가되는 것처럼 우리와 상호작용할 수 있게 만드는 역할을 한답니다.
"우리에게 홈페이지가 이쁜 모습을 보여주기 위해
열심히 만드는 화면을 프런트엔드라고 해요"
백엔드가 뭐냐면!
백엔드는 우리 눈에 보이지 않아요!! 볼 수가 없답니다.
그런데 백엔드 개발자들은 어떤 백엔드 내용들이 있는지 API라는 걸 통해 엿볼 수 있는 방법이 있답니다. 하지만 그건 벡엔드 개발자가 되면 알 수 있을 거예요. 그래서 이번 시간에는 백엔드의 두 가지로 구성에 대해 알아볼 거예요 바로 서버와 데이터베이스예요.!
서버는 우리에게 필요한 자료들을 제공해요. 무슨 말인지 좀 더 자세히 알아볼까요? 홈페이지에 접속하면 그림도 있고, 글자도 있고, 동영상도 있을 거예요. 그걸 가지고 있는 기계가 바로 서버라는 컴퓨터에 저장되어 있어요. 마치 음식점에서 보이지 않는 주방에서 음식이 나오듯 서버라는 주방은 항상 자료들을 제공한답니다. 그래서 그걸 프런트엔드에게 전달해주는 역할을 해요. 그래서 눈에 보이지는 않지만 사실은 아주 거대한 정보들을 가지고 있어요. 그렇기 때문에 백엔드는 서버에서 사용하는 언어들이 있답니다. 자바, 파이썬, 노드 등 다양한 언어가 있어요.
그리고 사용자의 데이터를 저장하는 역할을 하는 데이터베이스가 있답니다. 데이터베이스는 우리의 모든 정보를 담고 있는 주머니와 같은 역할을 해요. 교과서에는 우리가 배워야 하는 내용들이 빼곡히 적어놓은 것처럼 서버 안에 데이터베이스라는 노트가 있고 이곳에는 모든 정보가 기록되어 있어요. 그래서 우리가 유튜브에 접속하면 어제 봤던 영상 리스트도 볼 수 있는 이유도 다 데이터베이스의 기록되어 있기 때문이에요 백엔드는 이런 데이터베이스의 정보를 꺼내와서 프런트엔드에게 준답니다. 그러면 프런트엔드는 이 정보들을 받아서 화면에 뿌려줘요 그래서 백엔드는 눈에 보이지 않는 답니다.
"보이지 않는 곳에서 우리에게 정보를 보내주는 고마운 녀석이 바로 백엔드예요"
