[Web] 웹 개발이란, 웹 개발 도구

웹 개발을 통해 웹사이트 만드는 방법을 알아볼 것이다.

 

 

목차

1. 웹 개발이란?
2. 웹사이트 구조
3. 웹 개발의 10가지 종류
4. 웹사이트 개발의 4단계
5. 유용한 웹 개발 도구 9가지

 

1. 웹 개발이란?

웹 개발은 웹사이트를 만들고, 구축하고 유지 관리하는 것을 말한다.

마크업(개발자가 웹사이트를 만드는 데 사용하는 언어), 코딩(프로그래밍 언어), 네트워크 구성 및 콘텐츠 관리 시스템(CMS)이 포함된다.

 

 

2. 웹사이트 구조

웹 호스팅: 웹 호스트는 웹사이트 파일이 물리적으로 저장되는 서버

 

주소: 웹사이트 주소를 URL(Uniform Resource Locator), 도메인 이름(solearn.tistory.com)은 웹사이트의 전체 이름이고, URL은 해당 웹사이트 내의 특정 페이지 주소라는 점에서 도메인 이름은 URL과 다릅니다.

홈페이지: 방문자가 웹사이트에 들어갔을 때 가장 먼저 볼 수 있는 페이지, 사이트 전체의 나머지 웹페이지에 대한 게이트웨이 역할

 

디자인: 그래픽, 이미지, 색상, 타이포그래피, 내비게이션, 흐름 및 전반적인 사용자 환경

콘텐츠: 각 페이지에서 텍스트, SVG, PNG 등의 파일 형식으로 된 이미지와 동영상을 볼 수 있음

내비게이션: 사용자가 웹사이트의 구조와 순서를 탐색하는 방식(간단하고 직관적인 탐색 기능을 통해 사용자는 쉽고 빠르게 정보를 찾을 수 있음)

 

HTTP: 하이퍼텍스트 전송 규약(HyperText Transfer Protocol), 컴퓨터에서 서버로 온라인 웹사이트를 찾기 위한 요청을 변환하는 프로세스이다. 사용자가 검색 엔진에 키워드나 요청을 입력하면 HTTP를 통해 컴퓨터와 서버가 동일한 언어를 사용할 수 있음

 

코딩: 프로그래밍 언어로 코드를 작성하는 과정, 컴퓨터가 서로 의사소통

 

 

 

3. 웹 개발의 10가지 종류

1) 프론트엔드 개발

클라이언트측의 웹사이트에 표시되는 내용에 초점을 맞춤

시각적 요소뿐만 아니라 사용자의 요구사항 및 행동과 관련된 요소를 구현하는 업무를 담당

 

2) 백엔드 개발

사용자에게 보이지 않는 부분의 작업을 담당

사이트의 기능, 응답성 및 속도를 보장하는 보이지 않는 시스템과 구조 만듬

Python, Ruby, SQL과 같은 프로그래밍 언어에 능함

주로 서버, 운영 체제, API 및 데이터베이스에 대해 작업

보안, 콘텐츠 및 사이트 아키텍처를 위한 코드도 관리

 

3) 풀스택 개발

웹사이트 구축에 필요한 프론트엔드 및 백엔드 구성 요소를 합침

HTML, CSS 및 JavaScript를 마스터

백엔드 기술 및 데이터베이스를 능숙하게 다룰 수 있음

웹사이트가 완벽하게 기능하는 데 필요한 기능과 데이터베이스를 만들고 코딩

 

4) 웹사이트 개발

웹사이트 제작에 집중

웹사이트를 구축

 

5) 데스크톱 개발

컴퓨터에 앱을 다운로드할 때마다 데스크톱 개발자가 제작한 것과 상호 작용하게 됨

로컬 및 웹 브라우저 기반의 컴퓨터 소프트웨어 응용 프로그램을 만듬

 

6) 모바일 개발

스마트폰 및 태블릿과 같은 기기를 위한 소프트웨어를 만들고 작성하는 작업을 포함

 

7) 게임 개발

게임 아이디어를 콘솔, PC 및 모바일 게임을 위한 플레이할 수 있는 형태로 구현

 

8) 임베디드 개발

주로 내장형 시스템을 개발

냉장고의 컴퓨터 스크린에서 로봇청소기 등

 

9) 보안 개발

해커로부터 웹사이트를 보호하는 방법과 절차를 수립하는 작업을 수행

 

10) 온라인 쇼핑몰 개발

온라인 쇼핑몰을 만드는 데 필요한 프론트엔드 및 백엔드 구성 요소가 모두 포함

 

 

 

4. 웹사이트 개발의 4단계

1) 전략 세우기

• 웹사이트의 목표와 목적은 무엇인가요?
• 대상 고객은 누구이며 대상 고객이 웹사이트를 방문할 때 무엇을 하길 원하시나요?
• 어떤 종류의 웹사이트를 만들 예정인가요? (예: 온라인 쇼핑몰, 정보, 멤버십)
• 어떤 콘텐츠를 넣을 예정인가요?
• 프로젝트의 범위는 어디까지인가요? (예: 페이지, 기능, 앱)
• 메뉴 내비게이션은 어떻게 구성할 예정인가요?
• 프로젝트의 예산은 얼마인가요?

 

2) 초안 작성

와이어프레임 만들기: 프로젝트 범위에 따라 어떤 콘텐츠와 기능을 포함할지 대략적으로 제시, Figma, InVision, Slickplan 등

사이트맵 만들기: 

• 어떤 개별 페이지가 필요한가요?
• 해당 페이지에 어떤 콘텐츠를 게시할 예정인가요?
• 이러한 페이지들을 카테고리별로 구성하려면 어떻게 해야 할까요?
• 페이지 계층 구조는 무엇인가요?
• 페이지들을 어떻게 연결할 예정인가요?

3) 개발

• 웹
  • HTML, CSS 및 JavaScript를 조합하여 사용
    • HTML: Hyper-Text Markup Language는 1990년대부터 계속 사용되고 있으며 HTML5가 최신 버전
    • CSS: CSS 스타일시트를 사용하면 HTML과 같은 프로그래밍 언어의 색상, 타이포그래피 및 레이아웃을 스타일링
    • JavaScript: CSS는 사이트를 매력적으로 만든다면 JavaScript는 또 다른 재미있는 요소인 ‘기능’을 추가
  • 웹사이트 기능 관점에서 정적 또는 동적 웹사이트 중에서 선택할 수 있으며, 하이브리드 모델을 선택할 수도 있음
  • 백엔드 사이트 구조를 고려해야 함
• 백엔드
  • 데이터베이스: 서버가 데이터를 쉽게 검색할 수 있도록 데이터의 저장, 구성 및 처리가 이루어지는 곳
  • 서버: 컴퓨터를 구성하는 하드웨어 및 소프트웨어, 데이터베이스와 클라이언트 또는 웹 브라우저 간에 통신하는 데이터 요청을 전송, 처리 및 수신함
• 데이터베이스와 서버는 함께 작동하여 모든 웹사이트의 기반을 구축
  • 많은 웹사이트가 콘텐츠 관리 시스템(CMS)을 사용하여 처음부터 코드를 작성하지 않고도 동적 웹사이트를 만들 수 있음

4) 게시

• 도메인 이름이 필요
• 도메인 등록

 

5. 유용한 웹 개발 도구 9가지

 

웹 개발 도구는 웹사이트 생성 주기를 더 빨라지게 하고 쉽게 생성할 수 있도록 하는 데 도움이 됨

 

• Velo by Wix
• GitHub
• InVision
• Bootstrap
• IntelliJ IDEA

 

참고

Velo by Wix 를 활용하여 기업 수준의 사이트 및 API를 만들 수 있다.

Velo by Wix: Full-Stack Web Dev | Build Professional Web Apps

 

참고

https://ko.wix.com/blog/post/website-development