[Day 17] 웹 & 베리언트 실습

📍목차
1. 웹이란?
2. 웹 기초용어
3. 웹 기본 구성

---

1. 웹이란?

월드 와이드 앱(World Wide Web)은 전 세계에 퍼져 있는 인터넷 정보들을 서로 거미줄처럼 연결해준다. 

즉, 인터넷에 연결된 사용자들이 서로의 정보를 주고받을 수 있는 공간을 의미한다. 

웹 1.0	1990년대 초반 ~ 2000년대 초반	정보 제공 중심  사용자 경험 제한적 (읽기)
웹 2.0	2000년대 중반 ~ 현재	참여와 소통 중심 사용자가 콘텐츠를 생상하고 공유하는 양방향 (읽기, 쓰기)
웹 3.0	2020년대 초반 ~ 미래	분산화와 개인 중심 블록체인 기술을 이용해 데이터를 분산화하고 탈중앙화하여 개인이 데이터 주권을 가진다 (읽기, 쓰기, 소유)

 

[웹 종류]

- PC web

- Moble web

- Resposive web

---

2. 웹 기초 용어

GNB (Global Navigation Bar)	LNB (Local Navigation Bar)	SNB (Side Navigation Bar)	FNB (Foot Navigator Bar)
웹 사이트 전체에 똑같이 적용되는 네비게이션 바	GNB를 클릭하거나 마우스를 호버했을 때 노출되는 하위 메뉴	메뉴와 서브 메뉴를 제외한 나머지 메뉴 보통 좌우에 위치	웹사이트 가장 하단에 위치하는 메뉴

 

---

3. 웹 기본 구성

1) 헤더: 웹사이트의 최상단을 뜻한다. 

GNB가 있는 위치, 보편적으로 헤더의 왼쪽 상단에는 로고를 넣어 홈페이지로 이동 가능한 링크를 넣는다.

 

2) 푸터: 웹사이트의 최하단을 뜻한다. 

FNB가 있는 위치, 컨텍스 정보와 카피라이트 등 웹사이트의 정보 기입

 

3) 브레드 크럼: 방문자가 길을 잃지 않게 하기 위한 빵가루로 길을 표시한다는 뜻

현재 위치한 페이지가 어딘지 단계별로 나타내는 구성요소

 

---

4. 웹 개발

* 디자이너는 리서치-전략 부분부터 참여한다. (페르소나, IA)

* 웹개발자

프론트엔드	디자이너가 만든 GUI를 사용자가 보여지는 영역과 경험으로 직접적으로 구현
백엔드	보이지 않는 데이터 처리,  저장, 사용자 정보 등의 영역 개발을 담당
데브옵스	빠르게, 안정적으로 소프트웨어를 서비스 할 수 있게 하는 것

 

---

실습 내용

 

실습 1. property 제작

 

1. 스타벅스 어플 클론

 

2. 올리브영 버튼 제작

 

실습 2. 신용카드 결제페이지 / 계산요소 인터페이스 디자인