#03 코딩을 시작해 봅시다
여러분들은 어떤 목적으로 코딩을 배우고 싶으신가요? 코딩을 배우고자 하는 목적은 다양하겠지만, 아마 대부분의 많은 사람들이 게임이나 웹, 앱 서비스를 만들어 보기 위해 코딩 공부를 시작했을 것입니다.
그리고 코딩 공부를 시작한 대부분의 사람들은 C언어, Java 등 특정 코딩 언어에만 집중해서 긴 시간을 소요하는 경우가 많습니다. 이러한 공부 방법은 초보자에게는 낯설고 어려워 코딩 자체에 대한 흥미가 떨어져 중도에 포기하게 되는 경우가 많습니다. 눈에 보이는 결과물이 나오기까지 오랜 시간이 걸리다 보니 이 공부를 꼭 해야 하나 싶은 생각을 하게 됩니다.
이런 위험 요소를 미리 차단하여 초심을 잃지 않고 결과물이 나올 때까지 코딩 공부를 이어갈 수 있도록 3번째 클래스로 찾아왔습니다.
수퍼씨와 조코딩이 함께하는 코딩 클래스 3번째 시간, ‘코딩 공부 순서’를 알아보도록 하겠습니다.
가장 쉽고 익숙한 웹(Web)으로 시작해봅시다.
처음 코딩 공부를 시작하시는 사람들에게는 가장 쉽고 익숙한 웹(web)에서부터 시작하는 것을 추천합니다.
웹이란, 인터넷 익스플로어, 크롬, 사파리 등 브라우저①를 통해 접속할 수 있는 모든 사이트를 의미합니다. 대표적으로 네이버, 구글 등이 있습니다.
웹 개발로 코딩 공부를 시작하는 방법의 장점은 아래와 같습니다.
1) 인터넷을 사용해보았다면 누구나 익숙함
2) 상대적으로 다른 개발에 비해 난이도가 낮음
3) 개발에 도움을 주는 편리한 도구가 많이 제공됨
4) 조금만 배우면 전 세계 누구나 이용할 수 있는 ‘웹 사이트’라는 결과물을 만들 수 있음
5) 웹으로 개발한 서비스는 PC, 스마트폰, 태블릿, TV 등 다양한 기기에서 활용됨
그렇다면 웹 개발은 어디서부터 어떻게 시작할 수 있을까요?
그전에 웹 개발 분야에 대해 간단히 알아보겠습니다.
① 브라우저 : 인터넷상에서 웹 사이트에 연결해 주는 소프트웨어
웹 개발 ‘Front-End’ 와 ‘Back-End’
웹 개발은 크게 2가지로 나눌 수 있습니다. 웹에서 보이는 화면을 구성하는 Front-End(Client Side)②와 화면에 보이는 정보를 저장, 처리, 가공하는 Back-End(Server Side)③입니다.
로그인하는 상황을 예시로 각각의 개념을 살펴보겠습니다.
로그인 화면(Front-End)에서 ID와 Password를 입력하면 그 정보가 서버(Back-End)로 전송됩니다.
서버(Back-End)에서는 데이터베이스④(Back-End)에서 ID와 Password 정보를 확인합니다.
ID와 Password 정보가 일치하면 로그인 성공 화면을 표시하라고 전송, 우리는 화면(Front-End)에서 로그인이 성공된 모습을 볼 수 있습니다.
② Front-End(Client Side) : 앞단, 네트워크로 연결된 서버로부터 정보를 제공받는 컴퓨터 화면
③ Back-End(Server Side) : 뒤단, 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템
④ 데이터베이스 : 여러 사람이 공유하여 사용할 목적으로 체계화해 통합, 관리하는 데이터의 집합
프론트 엔드(FRONT-END) -> 백엔드(BACK-END) 순으로 공부하세요.
‘프론트 엔드’는 필요한 사전 지식이 상대적으로 적고 코딩한 그대로 모니터에 바로 출력되기 때문에 비교적 쉽게 개발할 수 있습니다.
크게 HTML, CSS, JavaScript 3개의 언어 지식이 필요한데요. 3개라서 많다고 느껴질 수 있지만, 각각의 개념들이 유기적으로 연결되어 있습니다. 그리고 HTML, CSS는 마크업 언어⑤라고 불리는데, 개발자들에게는 개발 언어로 인정도 못 받을 정도로 간단한 언어랍니다.
처음 듣는 분들은 생소하고 어려울 것입니다. 여러분이 그림을 그리는 상황에 비유해서 설명해보겠습니다.
먼저 ‘HTML’이라는 언어는 그림을 그릴 때 연필과 같습니다. 어떻게 그릴지 전체적인 밑그림을 그리는 언어입니다. 웹으로 예를 들어 본다면 홈페이지 제목은 어떻게 할지, 로그인 창 위치 정하기 등 기본적인 것들의 뼈대를 만들어주는 언어입니다.
다음으로 CSS는 색을 입히는 물감과 같습니다. HTML로 그린 뼈대에 본격적으로 각기 다른 색을 입히고 위치도 조금씩 수정하면서 보기 좋게 만드는 역할을 하는 언어입니다.
마지막으로 JavaScript는 이 결과물들을 웹사이트에서 움직이는 요소로 만들 수 있는 언어입니다.
이것들을 공부하는 순서는 먼저 가장 쉽고 간편한 HTML, CSS를 함께 활용하며 화면을 그려본 다음, Javascript를 공부하는 방법을 추천합니다.
프론트엔드의 기초적인 부분만 할 수 있다면 네이버, 구글 지도, 또는 실시간 채팅과 같이 프론트엔드에 한 줄만 붙여도 나타낼 수 있는 API⑥들이 많습니다. 따라서 이런 것들만 잘 조합할 수만 있다면 상당히 활용가치 있는 서비스를 만들 수 있습니다. 앞으로 조코딩과 함께 직접 만들 수 있는 과정을 배워보도록 하겠습니다.
⑤ 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
⑥ API : 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
프로그래밍 언어의 기초(만)를 배우세요.
프론트엔드의 개념이 어느 정도 잡혔다면 프로그래밍 언어의 기초를 배웁니다. 프로그래밍 언어를 초기부터 깊이 배울 필요는 없습니다. 언어는 사실 깊게 공부하기 시작하면 끝이 없습니다. 하지만 우리는 활용하여 결과물을 만들어내는 것이 목표이기 때문에 최소한의 활용가치가 있는 언어의 변수⑦, 조건문⑧, 반복문⑨, 함수⑩의 개념까지만 학습할 예정이고 이 방법을 추천드립니다.
⑦ 변수 : ~는 ~다의 개념 ex) ID = “jocoding”
⑧ 조건문 : 만약 ~라면 ex) ID/PW가 일치하면 로그인 성공 표시
⑨ 반복문 : ~를 n 번 반복해라 ex) 앞으로 이동 10번 반복
⑩ 함수 : a를 넣으면 b가 나옴 ex) 공격력이 5이면 대미지가 50
프레임워크를 이용해 백엔드를 배우세요.
다음으로는 프레임워크를 이용해 백엔드를 배우는 것을 추천합니다. 프레임워크는 개발을 좀 더 쉽게 할 수 있도록 도와주는 도구입니다.
그리고 프레임워크의 종류도 굉장히 많습니다. 개발자의 취향에 따라 선택의 폭이 다양합니다.
가장 적은 공부 양으로 빠르게 서비스를 만들고 싶다면?
ð Ruby 언어를 활용한 Ruby on Rails⑪ 학습
빅데이터, AI에 관심이 많다면?
ð Python 언어를 활용한 Django⑫ 학습
새로운 언어를 배우고 싶지 않다면?
ð JavaScript 언어를 활용한 Node.js⑬ 학습
이렇게 프론트엔드, 프로그래밍 언어, 백앤드 프레임워크를 순차적으로 공부하면 웹사이트를 만들 수 있게 됩니다. 만들어 보고 싶은 웹 서비스를 단기간의 프로젝트 형식으로 만들어 보며 차근차근 실력을 업그레이드해간다면 빠르게 나도 모르게 스킬이 생기고, 자연스럽게 IT 서비스에 대한 전반적인 개념이 잡히게 됩니다.
⑪ 루비로 작성된 MVC 패턴을 이용하는 오픈 소스 웹 프레임워크
⑫ 파이썬으로 작성된 오픈 소스 웹 애플리케이션 프레임워크로, 모델-뷰-컨트롤러 패턴을 따름
⑬ 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼
| 조코딩 | 저의 경험을 바탕으로 작성된 내용입니다. 저는 웹, 또는 앱 서비스를 만들고 싶어 프로그래밍을 시작했고, 처음 시작할 때 C언어가 가장 기본이라는 정보에 따라 C언어부터 공부를 시작했습니다. 그런데 제게는 너무 어려웠고 코딩에는 재능이 없다는 생각이 들어 프로그래밍 공부를 그만두려고도 했었습니다. |
그런데 웹을 배우고 나서보니 제가 만들고 싶어 했던 웹, 앱 서비스를 만드는 과정에 C언어의 어려운 개념은 필요하지 않았고, 생각보다 훨씬 쉽고 재미있게 만들 수 있었습니다. 그래서 코딩 공부를 시작한다면 처음에는 웹을 중심으로 공부해야 더욱 흥미롭게 이어갈 수 있을 거라고 생각합니다.
또, Front-End(Client Side), Back-End(Server Side) 등 기본적인 것들은 다른 개발에서도 사용되기 때문에 웹을 공부해 둔다면 앱이나 게임 등 기타 다른 개발로 넘어갈 때 역시 많은 도움이 됩니다.
