brunch

라이킷 22 댓글 공유 작가의 글을 SNS에 공유해보세요

You can make anything
by writing

C.S.Lewis

웹개발 용어 소개

개발사 웰그래피가 알려드립니다.

by 오픈모바일 Aug 08. 2024

웹개발은 웹사이트나 

웹 애플리케이션을 만드는 과정으로, 

기획 단계에서부터 디자인, 구현, 테스트, 배포, 

유지보수까지의 전 과정을 아우릅니다.


웹개발을 통해 사용자와 상호작용할 수 있는 

다양한 기능과 콘텐츠를 제공하는 것을 목표로 합니다.


웹개발은 크게 프론트엔드(Front-end)와 

백엔드(Back-end)로 나눌 수 있습니다.


프론트엔드는 사용자 인터페이스와 관련된 부분을

백엔드는 서버와 데이터베이스를 포함한 서버 측 기능을 담당합니다.


웹개발은 디자인, 기능성, 사용자 경험 등을 

통합하여 원활하고 직관적인 웹 환경을 제공하는 것을 목표로 합니다.



브런치 글 이미지 1


웹개발 용어 ①: HTML


HTML(HyperText Markup Language)은 

웹의 구조를 정의하는 언어입니다.

HTML 요소는 태그(Tag)로 표시되며, 

각 태그는 웹페이지에서 특정한 역할을 한다. 


HTML 파일은 일반적으로 .html 확장자를 가지며, 

웹 브라우저는 이를 해석해 문서 구조를 시각적으로 렌더링합니다.


HTML은 텍스트, 이미지, 비디오, 링크, 목록 등 

다양한 유형의 콘텐츠를 포함하며,

메타 데이터(Metadata)를 통해 문서의 특성을 정의할 수 있습니다.


더 나아가, HTML5는 네이티브 멀티미디어 지원, 

새로운 입력 유형, 향상된 웹 스토리지 등 다채로운 기능을 

제공하여 어플리케이션 개발을 용이하게 합니다.



웹개발 용어 ②: CSS


CSS(Cascading Style Sheets)는 

HTML로 만든 웹페이지의 시각적 표지를 

정의하는 스타일링 언어로, 

텍스트의 글꼴, 색상, 간격, 

레이아웃 구조 등을 설정할 수 있습니다.


CSS를 이용하면 HTML 코드로부터 

스타일 정보를 분리하여 코드의 

가독성과 유지보수성을 높일 수 있습니다. 


CSS는 선택자(Selector)와 

선언 블록(Declaration Block)으로 구성됩니다.


CSS는 외부 스타일시트, 내부 스타일시트, 

인라인 스타일 등 여러 방법으로 HTML 문서에 적용가능합니다.


특정 조건에서 스타일을 다르게 정의할 수 있는 

미디어 쿼리(Media Query)를 통해 

반응형 디자인(Responsive Design)을 구현할 수 있습니다.


이로 인해 하나의 웹페이지가 다양한 디바이스와 

화면 크기에서도 최적의 사용자 경험을 제공할 수 있도록 합니다.



브런치 글 이미지 2


웹개발 용어 ③: JavaScript



JavaScript는 웹페이지에 동적 기능을 

부여하는 프로그래밍 언어입니다.


JavaScript는 웹 브라우저에서 실행되며, 

이벤트 기반 프로그래밍(Event-driven Programming)을 지원하여 

사용자 행동(클릭, 스크롤, 입력 등)에 따라 다양한 반응을 생성할 수 있습니다.


예를 들어, 폼 검증, 콘텐츠 업데이트, 

애니메이션, 데이터 페칭 등을 JavaScript로 구현할 수 있습니다.


JavaScript는 DOM(Document Object Model)을 조작하여

HTML 요소를 생성, 삭제, 수정할 수 있으며,

Ajax(Asynchronous JavaScript and XML)를 사용해 

페이지 전체를 로드하지 않고 웹 서버와 통신할 수 있는 

비동기식 데이터 처리가 가능합니다. 


또한, 모듈화 및 스코프(Scope) 개념을 통해 

코드를 체계적으로 관리할 수 있습니다.


웹개발 용어 ④: 백앤드(Back-end)와 

프론트엔드(Front-end)


백엔드(Back-end)와 프론트엔드(Front-end)는 

웹개발에서 반드시 알아야 할 용어입니다.


프론트엔드는 

주로 HTML, CSS, JavaScript 등을 사용해 구현되며,

프론트엔드 개발자는 웹페이지 디자인을 실제 코드로 구현하고 

사용자 경험(UX)을 최적화합니다.


백엔드는 

웹 애플리케이션의 서버 측 부분을 담당합니다.

백엔드 개발자는 주로 서버 언어(Python, Node.js, Ruby 등), 

데이터베이스 시스템(MySQL, MongoDB 등), 

그리고 API를 사용해 서버와 클라이언트 간의 데이터 상호작용을 관리합니다.


브런치 글 이미지 3


웹개발 용어 ⑤: 데이터베이스(Database)


데이터베이스(Database)는 대량의 정보를 효율적으로 

저장, 검색, 수정, 삭제할 수 있게 해주는 체계적인 데이터 저장소로, 

웹 애플리케이션에서 중요한 역할을 합니다.


데이터베이스는 관계형 데이터베이스(Relational Database, RDBMS)와 

비관계형 데이터베이스(NoSQL)로 분류합니다.


데이터베이스를 통해 웹 애플리케이션은 

사용자 정보, 상품 데이터, 트랜잭션 기록 등 

다양한 종류의 데이터를 효율적으로 처리하며, 


이를 통해 사용자 맞춤형 콘텐츠 제공, 실시간 검색, 

대규모 데이터 분석 등 다양한 기능을 구현할 수 있습니다.



웹개발 용어 ⑥: API


API(Application Programming Interface)는

소프트웨어 간의 상호작용을 가능하게 하는 인터페이스로, 

특정한 기능을 수행하는 명령어, 함수, 프로토콜 등을 정의해주는 기능을 가지고 있습니다.


웹개발에서는 특히 RESTful API와 같은 웹 API가 빈번히 사용됩니다.


REST(Representational State Transfer)는 

HTTP를 통해 클라이언트와 서버 간의 통신을 

표준화한 아키텍처 스타일로, 웹 리소스를 URI로 식별하고, 

GET, POST, PUT, DELETE 등의 HTTP 메서드를 통해 리소스를 조작할 수 있습니다.


REST통해 웹 애플리케이션은 서로 다른 시스템 간에 

데이터를 주고받을 수 있습니다.


개발자는 복잡한 기능을 직접 구현할 필요 없이 

API를 통해 손쉽게 활용할 수 있습니다.


API는 클라이언트와 서버 간의 데이터 일관성을 유지하고, 

모듈화된 코드를 통해 확장성과 재사용성을 높이는 데 중요한 역할을 합니다.


브런치 글 이미지 4

웹개발 용어 ⑦: 프레임워크와 라이브러리


프레임워크와 라이브러리는 

웹개발에서 코드의 재사용성과 

효율성을 높이는 데 중요한 도구로, 

개발자들이 일관된 방식으로 문제를 

해결할 수 있게 도와줍니다.


프레임워크는 애플리케이션 아키텍처를 제공하고, 

특정한 패턴이나 구조를 따르도록 강제하는 큰 틀로, 

표준 규칙과 기능을 제공하여 개발 속도를 높이고 유지보수를 용이하게 합니다.


프론트엔드 프레임워크로는 React, Angular, Vue.js 등이 있으며, 

백엔드에서는 Django, Ruby on Rails, Express 등이 대표적입니다.


프레임워크와 라이브러리는 개발자가 반복적인 작업을 줄이고, 

검증된 코드를 활용할 수 있게 하여 

높은 품질의 소프트웨어를 더욱 빠르고 안정적으로 개발할 수 있게 해줍니다.



웹개발 용어 ⑧: Git, Github


버전관리는 소프트웨어 개발에서 코드의 변경사항을 

체계적으로 관리하기 위한 시스템으로, 

개발자가 협력하여 작업하고 코드를 추적할 수 있게 해줍니다.


Git은 분산 버전관리 시스템(DVCS)으로, 

각 개발자가 독립적으로 작업한 후 변경사항을 

중앙 저장소에 병합(Merge)하는 방식으로 관리됩니다.


Git은 브랜치(Branch)를 통해 서로 다른 기능이나 

버그 수정 작업을 독립적으로 진행할 수 있고, 

커밋(Commit)을 통해 변경사항을 기록할 수 있습니다.


GitHub는 Git 저장소를 호스팅하는 웹 기반 서비스로, 

원격 저장소(Remote Repository)를 제공하며, 

협력 개발을 위한 풀 리퀘스트(Pull Request), 

이슈 트래킹(Issue Tracking), 코드 리뷰(Code Review) 

등의 기능을 지원합니다.


이를 통해 개발자들은 서로의 코드를 검토하고 통합하며, 

프로젝트의 변경사항을 명확하게 기록하고 관리할 수 있습니다.


버전관리는 코드의 일관성을 유지하고 문제 발생 시 

빠르게 원인을 파악하고 복구할 수 있도록 하여, 

안정적이고 효율적인 소프트웨어 개발을 가능하게 합니다.



많은 도움이 되셨나요?


앱/웹사이트 개발사 웰그래피는


대기업에서 10년이상 근무한 풀스텍 개발자들이


직접 기획부터 개발까지 하는 개발사입니다.


앱/웹사이트 개발 문의만 해주신다면,


원스탑 시스템으로 


빠르고 정확하게 개발을 해드리겠습니다.


빠른견적, 빠른기획, 빠른개발, 빠른납품이 


강점인 개발사-웰그래피






작가의 이전글 보엠스튜디오 전관대여 서비스란?

브런치 로그인

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari