프로그래밍의 세계를 여행하는 프.알.못을 위한 안내서 #1. 집짓기로 알아보는 웹 페이지의 구조
프로그래밍의 세계를 여행하는 프.알.못을 위한 안내서 !
패스트캠퍼스 ONLINE
저 멀리 컴퓨터와는 동 떨어진 은하계 서쪽 소용돌이의 끝, 지도에는 나와 있지 않은 그 변두리 지역에 아무도 주목하지 않는 작은 프알못 행성이 있다. (…) 이 프알못 행성에는 문제가 하나 있었는데, 이 행성에 사는 사람들 대다수가 대부분의 시간동안 불행했다는 것이다. 이 문제에 대해 수많은 해결책이 제시되었는데, 이 해결책들 대부분은 주로 ‘지금은 파이썬이 핫하다느니’ ‘그래도 아직까지는 Java라느니’와 같은 의미 없는 논쟁과 관련된 것들이었다. 하지만 그건 좀 이상한 일이다. 왜냐하면 대체로 볼 때, 이 행성에 사는 사람들이 불행한 이유는 그런 논쟁에 동의하고 말고와는 크게 상관이 없었기 때문이다.
- <프로그래밍의 세계를 여행하는 프알못을 위한 안내서>
프로그래밍에 입문하는 사람들이 가장 어려워 하는 지점은 어디일까요? 객체 지향, 디버깅 등 다른 세계 일인 것처럼 여겨지는 프로그래밍 용어들? 아니면 난생 처음 서툴게 코드를 적었는데, 점 하나 잘못 찍어서 에러가 뜰 때? 혹은 프로그래밍을 시작하려는데 어떤 언어로 배우면 좋겠냐는 질문에 Python, Java, C언어 등을 나열하며 자기네들끼리 싸울 때? 아마 아닐 겁니다. 프로그래밍에 입문하는 사람들은 애초에 그런 걸 고민하는 게 아니에요. 난생 프로그래밍이 처음인 사람들은 ‘저렇게 예쁜 웹 페이지는 어떻게 하면 만들 수 있는지’ ‘프로그래밍 언어가 되게 많은 건 알겠는데, 그래서 각각 무엇에 장단점이 있는지’ ‘Java와 JavaScript는 이름이 비슷한데 왜 다르다고 하는지’ 등 생각보다 훨씬 단순하지만 아무도 제대로 알려주지 않는 이런 것들이 궁금해요.
프로그래밍의 세계에 막 도착한 당신을 환영합니다.
사실 생각해보면, 프로그래밍 공부의 중요성에 대해서 이야기하는 곳은 많습니다. 전 세계 시장을 리드하는 기업들의 대부분은 IT계열이라거나, 컴퓨팅적으로 사고하는 것이 미래에는 굉장히 중요해진다더라 같은 이야기들은 누구나 들어보았을 겁니다. 하지만 프로그래밍의 중요성도 알겠고, 공부 좀 해야 한다는 것도 알겠는데, 막상 입문하려는 사람들을 위한 친절한 가이드라인은 왜 없는 걸까요? 그래서 우리는 프로그래밍의 세계에 이제 막 도착한 프알못을 위한 안내서를 만들어보기로 하였습니다. 우리가 외국어를 배울 때 다양한 동기와 목적이 있듯, 프로그래밍을 배우는 데에도 100명의 사람이 있다면 100개의 각기 다른 목표가 있는 게 당연합니다. 프로그래밍 언어 하나를 선택해도, 각각의 목표와 쓰임이 어떻게 다른지, 무엇에 강점이 있고 무엇이 어려운지를 조금 더 편하게 알 수 있다면 우리는 보다 효과적으로 프로그래밍의 세계에 입문할 수 있을 게 분명합니다.
우리가 생각하는 프로그래밍이란 늘 이런 이미지에 갇혀 있는 것 같아요.
프로그래밍 입문하기 좋은 날ㅆ… 아니, 프로그래밍 입문하기 좋은 과목
그렇다면 이 세계에 입문하기 전에 우리는 프로그래밍이 왜 어렵게만 느껴지는지부터 시작하려 해요. 우선 ‘프로그래밍’을 구글 검색창에 쳐보면 이런 말들이 나옵니다. ‘프로그램을 만드는 일.’ 생각보다 단순하고 조금은 무성의한 정의에 힘이 빠집니다. 하지만 사실이에요. 프로그래밍이란 컴퓨터에서 동작하는 프로그램을 만드는 일을 말합니다. 물론 이 과정에서 Java나 Python과 같은 다양한 프로그래밍 언어들이 코드의 형태로 활용되는 것이고요. 정의로만 보자면 이렇게 간단한(?) 프로그래밍이 왜 입문자에게는 어렵고 멀게만 느껴질까요? 일단은 우리가 프로그래밍에 대해 갖는 이미지가 굉장히 ‘추상적’인 것들에만 머물러 있기 때문입니다. 어두운 방에 앉아 이해할 수 없는 코드를 써내려가는 개발자의 모습과 실제로 우리가 사용하는 컴퓨터 프로그램 사이에 느껴지는 거리감을 좁힐 수가 없는 것이죠. 그래서 많은 사람들이 입문자에게는 ‘프론트엔드(Front-end)’를 구성하는 가장 기초적인 언어인 HTML과 CSS를 공부해보라 말합니다.
집의 뼈대를 세우는 HTML, 아름답게 꾸미는 CSS
웹 프로그래밍에 대해 말할 때, 우리는 크게 ‘앞(Front)’과 ‘뒤(Back)’로 나누어 설명하곤 합니다. 사용자에게 직접적으로 보이는 화면을 구성하는 프론트엔드와, 사용자에게는 보이지 않는 기능과 데이터를 관리하는 백엔드가 있다고 간단히 이해하고 넘어가면 됩니다. 그리고 여기서 사용자인 우리가 인터넷을 켜거나 프로그램을 사용하면서 매일 같이 눈으로 보는 그 ‘화면들’이 프론트엔드의 영역이라고 이해하면 됩니다. 이처럼 일반 사용자의 눈에 바로 보이는 영역을 담당하는 것이 프론트엔드이기 때문에, 많은 입문자들이 프로그래밍에 입문할 때 백엔드보다는 프론트엔드 분야를 먼저 공부하고 흥미도 쉽게 느끼는 것입니다.
그리고 이 프론트엔드를 구성하는 가장 기초가 되는 언어가 HTML과 CSS입니다. HTML은 웹 페이지라는 집의 뼈대를 잡는 역할을 합니다. 어떤 건물을 짓든 기둥이 튼튼해야 집이 무너지지 않듯, HTML를 통해 먼저 골격을 잡아야, 그 안에 어떤 내용을 넣을지도 결정할 수 있는 것입니다. 여기에 CSS는 집의 장식을 덧대는 역할을 합니다. 벽에 페인트를 칠하고, 창문을 달거나, 내가 원하는 모양대로 인테리어를 할 수 있습니다. 고로 HTML이 없다면, CSS도 별다른 기능을 할 수 없습니다. 집의 형태가 정해지지도 않았는데, 장식부터 덧대는 건 불가능하니까요.
센서등을 달고 싶다면 JavaScript
이제 집 꾸미기는 대략 끝이 난 것 같습니다. 실제로 HTML과 CSS를 배우면 웹 페이지 안에서의 정적인 요소들은 모두 해결할 수 있습니다. 하지만 우리가 실제로 살고 있는 집은 그림처럼 움직이지 않는 것들로만 이루어진 것이 아닙니다. 생각해보면 비밀번호 키를 누르고 현관문을 들어서는 순간, 내가 왔음을 감지하고 자동으로 켜지는 현관의 센서등, 가스를 잘 잠그지 않으면 알아서 ‘삐-이’하고 소리를 내는 가스레인지 등 우리가 살고 있는 집에도 동적인 것들이 꽤나 많습니다. 웹 페이지 안에서 이런 역할을 담당하는 것이 바로 ‘스크립트 언어’라고 불리는 것들입니다. 마우스를 올렸다 내림에 따라, 슬라이드 형태로 이미지가 바뀌는 것이나, 가만히 있을 때는 몰랐는데 마우스를 올리면 다른 컬러로 변하는 버튼 요소들은 모두 위에 나온 ‘스크립트 언어’에 해당하는 것들을 통해 구현 가능합니다. 대표적인 예로는 JavaScript가 있죠.
이밖에도, 프로그래밍 언어는 다양한 목적에 맞게 활용되고 있습니다. 웹 페이지에서 활용할 각종 데이터는 집 바깥에 보관하는데요. 수많은 데이터를 관리하고 보관하며 필요할 때마다 끌어오는 창고를 데이터베이스(DB)라고 부릅니다. 그리고 이 데이터베이스에서 원하는 정보를 꺼내기 위해 필요한 언어가 SQL입니다. 이외에도 Python, Java, PHP와 같은 각종 언어들이 웹 페이지와 데이터베이스를 오가는 각종 업무를 위해 활용되고 있는 것이지요. 하지만 무엇보다도 중요한 건, 당신이 이 모든 프로그래밍 언어를 배워야 할 필요는 없다는 것입니다. 프로그래밍을 학습하는 데에는 누구나 자기만의 동기와 목표가 있고, 당장의 거창한 목표가 없더라도 나와 가장 관련 있고 재미있게 시작해볼 수 있을 것 같은 분야부터 조금씩 시작해보아도 아무런 문제가 없기 때문입니다.
누구나 어떤 일을 시작할 때, 첫인상이 중요하다는 말을 합니다. 프로그래밍을 배우는 것도 다르지 않습니다. 어렵고 딱딱하게만 느껴지고, 나와는 전혀 관련 없을 것 같다는 생각이 드는 분야를 선뜻 재밌게 공부한다는 건 어불성설이겠죠. 그래서 저희는 입문자에게 언제나 ‘프론트엔드’ 공부를 먼저 시작해보라 말합니다. HTML로 뼈대를 만들고, CSS로 인테리어를 해나가다보면, 당장 내가 쓰고 있는 코드가 웹 페이지를 통해 시각적으로 발전해나가는 과정을 가장 손쉽게 확인할 수 있는 분야이기 때문입니다.
프론트엔드로 프로그래밍에 입문하면서 누군가는 나만의 포트폴리오 블로그를 만들 수도 있고, 회사에서 운영하는 서비스의 개발 과정에 대해 조금 더 폭넓게 이해할 수 있을지도 모릅니다. 아니면 별다른 목적 없이 시작했다가 배움의 과정에서 내게 필요한 프로그래밍 공부가 무엇인지를 더 발견하는 시간을 가질 수도 있겠지요.
그래서 말인데요. 이제 막 프로그래밍의 세계에 도착한 당신에게 온라인으로 프론트엔드의 기초부터 실전까지 학습하는 [프론트엔드 올인원 패키지]를 추천합니다. [프론트엔드 올인원 패키지]는 HTML/CSS, JavaScript의 기초를 탄탄히 다져 시각적으로 아름다운 웹 페이지를 직접 제작할 수 있도록 하며, 나아가 프론트엔드 개발 실무에 필요한 다양한 도구들을 효과적으로 학습할 수 있도록 기본기를 탄탄히 길러드리니까요. 자세한 내용이 궁금하다면 아래 링크에서 확인해보세요. 친절하고 알기 쉽게 프론트엔드의 세계로 안내해드리겠습니다.
