우리가 보는 웹사이트는 어떻게 구현이 될까?
기획자의 개발 이해하기(1)
효율적인 협업은 프로젝트 성공의 핵심 요소다. 특히 IT 서비스 개발에 있어서 기획자가 개발자를 깊이 이해하는 것은 원활한 의사소통과 성공적인 결과물 도출에 필수적이다. 기획자는 프로젝트의 방향성과 목표를 설정하고, 개발자는 이를 기술적으로 구현하는 역할을 맡는다. 하지만 기획자가 개발의 기본 개념을 충분히 이해하지 못하면, 요구 사항이 명확하지 않거나 비현실적인 계획을 제시할 가능성이 생기게 된다. 따라서 개발 프로세스와 기술의 기초적인 부분을 이해하는 것은 기획자의 중요한 역량 중 하나이다.
서버와 클라이언트의 통신
클라이언트와 서버는 인터넷이나 네트워크를 통해 서로 상호작용하며, 기본적으로 요청(Request)과 응답(Response)의 흐름으로 이루어진다. 이는 클라이언트는 서버에 특정 작업을 요청하고, 서버는 요청을 처리한 뒤 그 결과를 클라이언트에 반환하는 구조다.
클라이언트는 서비스를 요청하는 주체로, 예를 들어, 웹 브라우저(크롬, 엣지, 사파리 등)나 모바일 애플리케이션이 클라이언트에 해당한다. 서버는 클라이언트의 요청을 처리하고, 요청된 데이터를 반환하는 역할을 한다. 이는 물리적인 컴퓨터일 수도 있고, 클라우드 상에서 동작하는 가상 서버일 수도 있다.
우리가 크롬 브라우저를 통해 구글이라는 웹사이트에 접속을 하는 과정을 예로 들어 본다면,
1. 클라이언트의 요청 (Request)
사용자가 크롬 브라우저(클라이언트)의 주소창에 google.com을 입력하면, 이 순간 브라우저 HTTP/HTTPS 프로토콜*을 사용하여 서버에 요청을 보내기 위한 준비를 시작한다. 입력된 URL은 DNS(Domain Name System)을 통해 구글 서버의 IP 주소로 변환되고, 변환된 IP 주소를 통해 브라우저는 구글 서버로 요청을 보낸다.
*프로토콜 : 서로 다른 시스템이 통신할 때 지켜야 할 규칙이나 약속. 마치 사람들이 횡단보도를 건널 때, 정해진 신호등 체계하에 빨간불과 녹색불에서 정지 또는 통과 하듯이, 컴퓨터와 네트워크 장치도 데이터를 교환할 때 정해진 규칙을 따라야 한다.
2. 서버의 처리
구글 서버는 클라이언트로부터 요청을 받으면 브라우저가 요청한 웹페이지에 해당하는 데이터를 찾은 뒤, 요청한 페이지에 필요한 HTML, CSS, 자바스크립트 파일들을 준비하여, 요청 내용을 분석하고 필요한 데이터를 포함한 응답을 생성한다.
3. 응답 (Response)
서버는 준비된 데이터를 클라이언트(브라우저)로 전달한다. 이 데이터는 대개 HTML(페이지의 구조와 내용), CSS(페이지의 스타일과 디자인), 자바스크립트(동적인 동작을 위한 코드), 이미지, 동영상 등의 미디어 파일을 의미한다.
4. 클라이언트의 렌더링
클라이언트(브라우저)는 서버로부터 받은 데이터를 처리하여 사용자에게 화면으로 보여준다. HTML을 기반으로 기본 구조를 생성하고, CSS를 적용하여 시각적인 스타일을 완성하며, 자바스크립트를 실행하여 동적인 기능을 활성화한다. 이 데이터들을 통해, 우리는 브라우저에서 웹페이지를 확인할 수 있게 된다.
HTML, CSS, JS
HTML(HyperText Markup Language) : 웹 페이지의 뼈대
HTML은 웹 페이지의 뼈대에 해당한다. 마치 사람이 뼈로 구성된 몸을 갖고 있듯, HTML은 웹 페이지의 기본 구조를 만들어주는 역할을 한다. 웹 페이지에서 보이는 텍스트, 이미지, 링크 등 모든 콘텐츠는 HTML을 통해 정의된다. 이를 통해 웹 페이지의 기본적인 틀을 만들고, 콘텐츠가 어떻게 배치될지에 대한 구조적 정의를 내린다.
CSS(Cascading Style Sheets) : 웹 페이지의 디자인
CSS는 웹 페이지의 디자인을 담당한다. CSS는 HTML로 만든 기본 구조 위에 색상, 폰트, 배경, 여백 등을 적용하여 시각적으로 표현되는 웹 페이지를 만드는 역할을 한다. HTML이 뼈대라면, CSS는 그 뼈대 위에 피부와 옷을 입히는 작업이다. 예를 들어, CSS를 사용하여 글꼴의 크기나 색상, 버튼의 크기와 위치 등을 설정할 수 있다.
자바스크립트(JavaScript) : 동적인 근육
자바스크립트는 웹 페이지에 동적인 근육을 더하는 역할을 한다. HTML이 뼈대라면, CSS는 디자인이고, 자바스크립트는 그 위에서 실제로 움직이는 기능들을 구현한다. 자바스크립트를 사용하여 웹 페이지가 단순히 정적인 콘텐츠를 표시하는 것에서 벗어나, 사용자와 상호작용하거나 동적으로 콘텐츠를 변경하는 기능을 추가할 수 있다. 자바스크립트는 웹 페이지에 활력을 불어넣어, 사용자가 직관적이고 유용한 인터랙션을 경험할 수 있도록 돕는다.
프런트엔드(Front-end) 개발자
프런트엔드 개발자는 웹 페이지의 사용자 인터페이스(UI)를 설계하고 구현한다. 이들은 웹페이지의 “앞단”이라고 불리는 부분을 책임지며, 사용자가 눈으로 보고 직접 상호작용하는 요소들을 만든다. 쉽게 말해, 웹사이트의 껍데기부터 사용자가 클릭하는 버튼, 데이터를 입력하는 인풋박스 같은 상호작용 가능한 요소들까지 모두 프런트엔드 개발자의 손을 거친다.
또한, HTML, CSS, 자바스크립트와 같은 언어를 사용하여 웹페이지의 구조를 설계하고 디자인을 적용하며, 동적인 기능을 추가한다. 이 과정에서 브라우저와 디바이스 간의 호환성을 고려하고, 빠르고 효율적인 사용자 경험(UX)을 제공하기 위해 최적화 작업도 수행한다. 또한, 백엔드에서 제공하는 데이터를 받아와 화면에 적절히 보여주는 작업도 담당한다.
특히, 자바스크립트는 프런트엔드에서는 핵심이 되는 언어로서, 웹의 요소들이 움직이고 서버와 통신을 할 수 있는 필수적인 언어이다. 프런트엔드 개발자는 순수 자바스크립트를 사용하기 보다는, 프레임워크를 통해 작업 시간을 단축한다. 순수 자바스크립트를 바닐라 자바스크립트라고 하며, 프레임워크 또는 라이브러리*를 사용하면 일일이 코딩으로 기능을 구현하기 보다는 미리 만들어 놓은 기능을 직접 구현하지 않고 가져와 사용할 수 있게 된다.
*프레임워크/라이브러리 : 다양한 클래스와 라이브러리를 통합해 개발 작업을 효율적으로 만들어주는 도구다. 이미 만들어진 코드와 구조 위에 필요한 기능을 추가하면 손쉽게 구현할 수 있도록 설계된 것이라고 보면 된다. 라이브러리와 프레임워크는 비슷한 개념이라, 기획자 입장에서는 둘을 굳이 엄격히 구분할 필요는 없다. 중요한 건 둘 다 개발 생산성을 높이는 데 도움을 준다는 점이다.
자바스크립트 프레임워크
JavaScript의 기본 기능을 잘 활용하면 많은 것을 할 수 있지만, 더 복잡한 웹 애플리케이션을 만들 때는 프레임워크나 라이브러리를 사용하면 개발 속도를 빠르게 할 수 있다. 대표적인 JavaScript 프레임워크로는 React, Vue.js, Angular가 있다.
• React
Facebook에서 개발한 프레임워크로, UI 컴포넌트 기반의 개발을 지원한다. 컴포넌트에서 복잡한 UI를 구성할 수 있는 유연한 프레임워크이다.
• Vue.js
비교적 가볍고 배우기 쉬운 프레임워크로, 반응형 웹 애플리케이션을 만들기에 적합하다. Vue는 템플릿, 컴포넌트, 라우팅 등을 쉽게 구현할 수 있게 도와준다.
• Angular
Google에서 개발한 프레임워크로, 자바스크립트나 타입스크립트 기반의 대규모 웹 애플리케이션을 구축하는 데 적합하며, 동적인 웹 어플리케이션을 구현하기 위한 프레임워크이며, html을 템플릿 언어로 사용할 수 있다.
*Node.js : 자바스크립트 런타임 환경으로, 브라우저 밖에서도 자바스크립트를 실행할 수 있게 한다. 쉽게 말해, 서버에서도 자바스크립트를 구동할 수 있는 환경을 제공하며, 프레임워크라기보다는 런타임 환경에 가깝다. 주로 서버 측(백엔드) 개발에 사용되지만, 프론트엔드와 함께 동일한 언어로 전체 애플리케이션을 개발할 수 있다는 점이 큰 강점이다.
프런트엔드 개발자는 사용자와 웹사이트 간의 가장 중요한 접점을 설계하고 구현하는 핵심적인 역할을 맡고 있다. 이들은 단순히 화면을 만드는 데 그치지 않고, 사용자와의 상호작용을 매끄럽게 하고 직관적인 경험을 제공함으로써 웹사이트나 애플리케이션의 가치를 높인다. 기술적 전문성과 더불어, 사용자 관점을 이해하고 창의적인 솔루션을 제시하는 능력이 요구되며, 이를 통해 단순한 디자인을 넘어 실질적으로 사용자가 만족할 수 있는 환경을 만들어낸다. 프런트엔드 개발자는 결과적으로 웹사이트와 서비스가 성공적으로 작동하고 사랑받을 수 있도록 기술과 창의성을 결합해 중요한 가교 역할을 수행한다.
