# 웹디자인 개념 이해하기 [잡오브브라더스의 실무 이야기]

저자: 잡오브브라더스 (홈페이지 제작 에이전시) · 게시: 2023-08-30 · 수정: 2023-08-30 · 원문: https://job.ontoblog.com/blog/%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%9E%A1%EC%98%A4%EB%B8%8C%EB%B8%8C%EB%9D%BC%EB%8D%94%EC%8A%A4%EC%9D%98-%EC%8B%A4%EB%AC%B4-%EC%9D%B4%EC%95%BC%EA%B8%B0/

> **요약**: 안녕하세요. 잡 오브 브라더스 에서는 모바일, 태블릿, 데스크톱 등 웹디자인 설계 및 제작을 진행하고 있습니다. 오늘은 지난시간에 소개드린 UI/UX 디자인에 이어 웹디자인 개념 에 대해 이해하기 쉽도록 정리하여 설명드리려고 합니다. 다양한 웹 브라우저로 접속 및 사용이 가능한 웹사이트를 제작하기 위해 웹 페이지를 구축하는 모든 과정 을 의미합니다.

안녕하세요.

![웹디자인 개념 이해하기 잡오브브라더스의 실무 이야기](/uploads/naver/jobofbrothers/223197796338-1.webp)

**잡 오브 브라더스** 에서는 모바일, 태블릿, 데스크톱 등

## 다양한 디바이스 환경을 고려하여

## 사용자가 보다 쉽고 원활하게 접근할 수 있도록

웹디자인 설계 및 제작을 진행하고 있습니다.

오늘은 지난시간에 소개드린 UI/UX 디자인에 이어

**웹디자인 개념** 에 대해 이해하기 쉽도록 정리하여

설명드리려고 합니다.

## **웹디자인**  **이란?**

다양한 웹 브라우저로 접속 및 사용이 가능한

웹사이트를 제작하기 위해

## 디자인 원칙과 기술을 사용하여

**웹 페이지를 구축하는 모든 과정** 을 의미합니다.

웹디자인 개념의 핵심은 **사용자 경험(UX)을 개선하고**

## 시각적으로 다양한 볼거리를 제공하는

## 기능적 요소와 미적 요소가 결합된 웹 페이지를

**제작** 하는데 있으며 이를 위해 정보 구조 설계부터

레이아웃, 색상 선택, 그래픽 디자인, 폰트 등

다양한 요소를 고려하여 진행하게 됩니다.

![웹디자인 개념 이해하기 잡오브브라더스의 실무 이야기](/uploads/naver/jobofbrothers/223197796338-2.webp)

## 웹 디자인  **디바이스 유형**

웹디자인 영역에 포함되는 디지털 디바이스는

**데스크톱부터 모바일, 태블릿 등 스마트 기기** 까지

우리가 일상생활에서 이용하는 제품들을

떠올려볼 수 있는데요.

**잡 오브 브라더스** 에서는

## 어떤 기기로 접속하더라도 원활하게 동작할 수 있는

**웹사이트를 구축하는 것에 집중** 합니다.

어느 환경에서든 원활한 동작으로 사용자의 니즈를

충족시켜줄 수 있는 웹페이지를 제작하는데에는

**반응형 웹 디자인** (Responsive Web Design, RWD)과

**적응형 웹 디자인** (Adaptive Web Design, AWD)

두가지 방법 중에서 각각의 장단점을 고려하여

선택 진행하는 것이 보편적입니다.

## **반응형**  **웹 디자인** (Responsive Web Design, RWD)

PC, 스마트폰, 태블릿 PC 등 사용자가 접속하는

## 디스플레이의 환경(화면의 크기)에 따라

## 웹사이트 디자인과 레이아웃이 자동으로

**다시 정렬** 되는 기술입니다.

PC용/모바일용을 각각 제작할 필요가 없으며

하나의 웹사이트로 다양한 디바이스에 대응하여

**일관된 콘텐츠 경험을 제공** 할 수 있다는

장점이 있지만

방문할 때마다 모든 리소스를 다운받게 되어

로딩속도가 느리다는 점이 다소 아쉬운 부분입니다.

![웹디자인 개념 이해하기 잡오브브라더스의 실무 이야기](/uploads/naver/jobofbrothers/223197796338-3.webp)

## **적응형**  **웹 디자인** (Adaptive Web Design, AWD)

웹에 접속한 기기의 해상도 정보를 인식하여

해당 디스플레이에 **최적화된 웹을 출력하도록**

## 다양한 화면 너비에 맞춰 하나하나

**별도로 디자인** 하는 방법입니다.

모바일 버전 디자인과 데스크탑 버전 디자인이

각각 따로 진행됩니다.

접속기기별로 최적화된 웹사이트가 출력되기 때문에

**가독성이 높고 로딩이 빠르다** 는 장점이 있지만,

모바일 버전과 데스크탑 버전 등 모든 환경에 맞춰

각각 디자인 작업을 진행해야 하기 때문에

**많은 시간이 소요될 수 밖에 없다는 것** 을

염두해두어야 합니다.

![웹디자인 개념 이해하기 잡오브브라더스의 실무 이야기](/uploads/naver/jobofbrothers/223197796338-4.webp)

지금 보는 사이트가 반응형인지 적응형인지

궁금하신 분들을 위해 확인할 수 있는

간단한 방법을 소개해드리겠습니다.

## 창 크기를 변경할 때 실시간으로 크기에 맞춰

**레이아웃이 변한다면 반응형 웹 디자인,**

## PC일 때와 Mobile일 때 새로고침 후

## 주소창에 나타나는 URL이 예를들어

## www.never.com / m.naver.com 같이 변경된다면

**적응형 웹 디자인이 적용된 것이라고 볼 수 있습니다.**

---

## **좋은 웹디자인**  **을 위한**  **BEST 참고 사이트**

※각각의 이미지를 클릭하시면 해당 사이트로 이동됩니다

## **GDWEB** — (https://www.gdweb.co.kr/main/)

우리나라에서 운영하는 사이트로

실제 구현된 웹사이트를 확인하고

국내 웹 디자인 트렌드를 파악하기 좋습니다.

![웹디자인 개념 이해하기 잡오브브라더스의 실무 이야기](/uploads/naver/jobofbrothers/223197796338-5.webp)

## **Awwwards** — (https://www.awwwards.com/)

해외에서 개발된 실제 웹사이트를

확인할 수 있습니다.

![웹디자인 개념 이해하기 잡오브브라더스의 실무 이야기](/uploads/naver/jobofbrothers/223197796338-6.webp)

## **DBCUT** — (https://www.dbcut.com/)

국내 신규 오픈 웹사이트를 업종별, 평가별로

필터링해 확인할 수 있습니다.

![웹디자인 개념 이해하기 잡오브브라더스의 실무 이야기](/uploads/naver/jobofbrothers/223197796338-7.webp)

◆◆◆

이상으로 웹디자인 개념과 방법 그리고

추천 사이트까지 공유드려보았는데요.

**잡 오브 브라더스** 는 웹개발 뿐만 아니라

## 웹사이트 소유자와 사용자의 니즈를

**모두 충족할 수 있는 웹디자인** 또한

차별화된 전력과 기술력으로

완성도 높게 제작해드리고 있습니다.

웹개발부터 디자인까지 전문인력들이

더 나아가 그 이상을 생각하며 **'형제의 일처럼'**

책임감을 가지고 작업하는

**잡 오브 브라더스** 만의 밀도 있는 서비스를

경험해보세요.

귀사의 든든한 파트너로서 처음부터 끝까지

함께하겠습니다.

감사합니다.

![웹디자인 개념 이해하기 잡오브브라더스의 실무 이야기](/uploads/naver/jobofbrothers/223197796338-8.webp)

![클릭하시면 전화연결 됩니다](/uploads/naver/jobofbrothers/223197796338-9.webp)

## 출처·근거

- [원문: 네이버 블로그](https://blog.naver.com/jobofbrothers/223197796338) — 잡오브브라더스 (2023-08)