웹 개발의 기초 과정

eeensu·2023년 8월 21일
0

용어 정리와 팁

목록 보기
1/26
post-thumbnail

웹 개발은 크게 프론트엔드(클라이언트 측)와 백엔드(서버 측) 두가지로 나뉘어져 있다. 프론트엔드는 사용자 인터페이스와 사용자 경험을 개발하고, 백엔드는 네트워크 관리와 데이터 처리를 담당한다.



프론트엔드

1단계- 기획 및 설계

고객(클라이언트)에게 사이트 개발을 의뢰받는다. 이렇게 개발 의뢰를 접수한 개발사는 고객의 요구에 맞게 기획안을 작성한다. 웹 사이트 또는 웹 애플리케이션의 목적과 기능을 정의하고, 사용자 인터페이스(UI)의 레이아웃과 디자인을 계획한다. 이 단계에서는 고객과 유저의 요구사항을 파악하고 웹 사이트의 구조를 설계해야한다.


2단계 디자이너와 퍼블리셔에 전달

고객의 요구에 맞게 작성한 기획안을 토대로 디자이너가 화면에 보여질 UI(User Interface)를 디자인한다. 이렇게 완성된 디자인 이미지를 퍼블리셔(Publisher)에게 전달하며 퍼블리셔는 인터넷 문서인 HTML(Hyper Text Markup Language)을 작성하고 CSS(Cascading Style Sheets)를 이용해 화면의 모양을 잡아 정적인 웹 문서를 완성한다.


3단계 동적인 요소 개발

이렇게 완성된 웹 문서는 단순히 웹 브라우저에서 보이기만 할 뿐 동작은 하지 않는다. 예를 들어 HTML로 만든 문서의 메뉴 바에 마우스 포인터를 올렸을 때 서브 메뉴가 펼쳐지는 동작이 일어나게 하려면 자바스크립트(Javascript)를 적용해야한다. 여기까지 정리하면 HTML, CSS, 자바스크립트등을 이용해 사용자(사이트 방문자)의 눈에 보이는 부분까지 개발하는 것을 프런트엔드 개발이라 부른다. 이렇게 완성된 프론트 웹을 서버 개발자에게 전달한다.




백엔드

1단계 - 기획 및 설계

웹 애플리케이션의 목적과 요구사항을 분석하여 어떤 기능과 데이터가 필요한지 결정한다. 프로그래밍 언어, 프레임워크, 데이터베이스 등의 기술 스택을 선택한 후 서버 아키텍처와 데이터베이스 스키마를 설계하여 구조를 정의한다.


2단계 - 개발 및 구현

선택한 기술 스택을 사용하여 백엔드의 핵심 기능을 구현한다. 데이터베이스를 구축하고, 비즈니스 로직을 개발하며, API를 설계한다. 또한 추가적으로 사용자의 보안과 인증, 권한 부여 등의 시스템을 구현할 수 있다. 그 후 API 문서화를 수행하여 클라이언트 개발자들이 API를 이해하고 사용할 수 있도록 한다.


3단계 - 테스트 및 배포

서버 성능 최적화를 위해 필요한 조치를 취하고, 데이터베이스 쿼리를 최적화한다. 테스트를 거친 후 개발한 백엔드 코드를 실제 환경에 배포하여 사용자들이 접근하고 사용할 수 있게 준비한다. 또한 유지보수를 위해 새로운 기능 추가와 버그 수정을 지속적으로 수행한다.




프론트엔드와 백엔드는 웹 개발의 두 가지 주요 영역이며, 두 영역의 협업을 통해 완성도 높은 웹 애플리케이션을 구축할 수 있다.

하지만 이후 기술이 발전함에 따라, 최신식 웹 개발은 사용자의 경험과 동적인 웹페이지에 중점을 두어 접근한다. 이러한 변화는 기존의 프론트엔드 개발방법으로는 한계가 있었기에 이에 맞춰 새로운 기술이 등장했다. React, Vue, Angular가 이와 같은 기술들이다. 이러한 프레임워크들의 등장으로 인해 웹 개발은 더욱 효율적이고 동적인 방향으로 발전하고 있다.

profile
안녕하세요! 26살 프론트엔드 개발자입니다! (2024/03 ~)

0개의 댓글