[지식루프 웹개발] 001. 웹 개발자가 하는 일과 웹사이트 작동 원리

웹 개발 입문 가이드

웹 개발자는 무엇을 하나요?

웹 개발자의 주된 역할은 웹사이트를 만드는 것입니다. 하지만 이것이 전부는 아닙니다. 웹 개발자는 다양한 복잡도의 웹사이트를 구축하며, 사용자에게 보이는 부분과 보이지 않는 부분 모두를 다룹니다. 또한 웹 서비스라고 불리는 특별한 형태의 프로그램도 만들 수 있습니다.

웹사이트는 어떻게 작동할까요?

브라우저에 naver.com을 입력하면 화면에 네이버 웹사이트가 나타납니다. 이 과정에서 무슨 일이 일어나는 걸까요?

친구에게 전화 거는 것과 같은 원리

웹사이트를 방문하는 것은 친구에게 전화를 거는 것과 비슷합니다.

전화 통화의 과정:

1. 친구의 전화번호를 누릅니다
2. 연결이 되면 인사를 하고 대화를 시작합니다
3. 친구가 답변을 해줍니다
4. 서로 대화를 주고받습니다

웹사이트 방문 과정:

1. 브라우저에 주소(예: naver.com)를 입력합니다
2. 브라우저가 해당 회사의 컴퓨터에 요청을 보냅니다
3. 그 컴퓨터가 웹사이트 코드를 응답으로 보내줍니다
4. 브라우저가 받은 코드를 해석해서 화면에 표시합니다

URL과 HTTP 프로토콜

브라우저 주소창에 입력하는 주소를 URL(Uniform Resource Locator)이라고 합니다. 이때 브라우저는 HTTP(HyperText Transfer Protocol) 또는 HTTPS(보안이 강화된 버전)라는 표준화된 방식으로 통신합니다.

때로는 주소 앞에 https://가 보이는데, 이는 브라우저와 서버 간의 통신이 암호화되어 있다는 의미입니다.

클라이언트와 서버

• 클라이언트(Client) / 프론트엔드(Front-end): 브라우저를 사용하는 우리
• 서버(Server) / 백엔드(Back-end): 웹사이트를 저장하고 제공하는 원격 컴퓨터

이 전체 과정은 몇 밀리초 만에 완료되기 때문에 웹사이트 방문이 매우 빠르게 느껴집니다.

웹 개발에 필요한 3가지 핵심 언어

웹 개발자가 되려면 반드시 알아야 할 세 가지 표준화된 프로그래밍 언어가 있습니다.

1. HTML (HyperText Markup Language)

용도: 웹사이트의 내용과 구조를 정의

HTML은 웹사이트의 기본 골격을 만드는 언어입니다. 어떤 텍스트가 들어갈지, 이미지는 어디에 위치할지, 사용자가 정보를 입력할 수 있는 양식은 어떻게 구성할지 등을 결정합니다.

콘텐츠가 없으면 웹사이트는 의미가 없기 때문에, HTML은 가장 중요한 언어라고 할 수 있습니다.

2. CSS (Cascading Style Sheets)

용도: 웹사이트의 디자인과 스타일을 담당

HTML만으로는 기능적이지만 보기에 아름답지 않은 웹사이트가 만들어집니다. CSS는 이런 문제를 해결해줍니다.

CSS로 할 수 있는 것들:

• 텍스트 색상을 보라색이나 빨간색으로 변경
• 요소에 그림자 효과 추가
• 전체적인 레이아웃과 디자인 조정

기술적으로는 선택사항이지만, 거의 모든 웹사이트에서 사용됩니다.

3. JavaScript

용도: 웹사이트에 상호작용 기능을 추가

JavaScript를 사용하면 웹사이트를 더욱 동적으로 만들 수 있습니다.

JavaScript로 할 수 있는 것들:

• 버튼을 클릭했을 때 팝업창 표시
• 사용자 입력에 따른 실시간 반응
• 복잡한 상호작용 구현

구글 독스나 구글 스프레드시트 같은 복잡한 웹 애플리케이션도 이 세 언어로 만들어집니다. 이런 사이트들은 마이크로소프트 워드와 같은 기능을 브라우저에서 제공하는데, 여기서 JavaScript가 중요한 역할을 합니다.

실제 웹사이트 코드 확인해보기

어떤 웹사이트든 마우스 우클릭 후 "페이지 소스 보기"를 선택하면 실제 코드를 볼 수 있습니다. 네이버 같은 큰 웹사이트는 수많은 코드가 있어서 처음엔 복잡해 보일 수 있지만, 차근차근 배워나가면 이해할 수 있습니다.

그 코드 안에서 HTML, CSS, JavaScript를 모두 찾아볼 수 있는데, 이것이 바로 화면에 보이는 웹사이트를 만들어내는 기술들입니다.

---

웹 개발은 이 세 가지 핵심 언어를 중심으로 시작됩니다. 각각의 역할을 이해하고 단계별로 학습해 나간다면, 여러분도 멋진 웹사이트를 만들 수 있게 될 것입니다.