서론
4월의 시작인 오늘은 본격적인 Project에 들어가기 앞서 WEB에 대한 기초를 다지고 WEB의 필수적인 기본 구성을 알아보고 적용해보는 시간을 가졌다.
WEB
World Wide Web은 전 세계에 퍼져 있는 인터넷 정보들을 서로 거미줄처럼 연결
즉, 인터넷에 연결된 사용자들이 서로의 정보를 주고받을 수 있는 공간을 의미
> 🌐 WEB 1.0 : 정보 제공 중심(Static Web)
- 시기 : 1990년대 초반 ~ 2000년대 초반
- 특징
정적(Static) HTML Page로 구성되어 있으며, 사용자가 Contents를 읽기만 가능
Data는 중앙 서버에 저장되어 있으며, 정보 흐름이 일방향적 (제공자→사용자)
Page 간 상호작용이 거의 없고, 댓글이나 사용자 참여 기능 부족
대부분 기업 또는 개인이 만든 Web Site로 구성- 한계 : 상호작용이나 사용자 참여가 거의 없고, 정보 소비만 가능
> 🌐 WEB 2.0 : 참여와 소통 중심(Social Web)
- 시기 : 2000년대 중반 ~ 현재
- 특징
사용자가 Contents를 생산하고 공유하는 양방향 Web
Data와 Application이 중앙 서버에 집중되어 있지만, 사용자가 Contents 제작에 적극 참여
Social Media와 Vlog 등을 통해 실시간으로 소통 가능
Web Application의 발전으로 동적(Dynamic) Contents와 상호작용 강화
AJACX, JavaScript 등으로 비동기 Data 처리와 UI 개선
※ 페이스북과, 인스타그램 등 우리가 자주 사용하는 앱이 여기에 해당 됨
> 🌐 WEB 3.0 : 분산화와 개인 중심(Semantic Web/Decentralized Web)
- 시기 : 2020년대 초반 ~ 미래
- 특징
Blockchain 기술을 이용해 Data를 분산화하고 탈중앙화하여 개인이 Data 주권을 가짐
AI와 MachineLearning을 활용하여 의미 기반 웹(Semantic Web)을 구현
Web Application이 Data 간 연결과 의미를 자동으로 이해하여 더 스마트한 정보 제공
DApp(탈중앙화 Application)과 DAO(탈중앙화 자율 조직) 등 Blockchain 기반 Application 활성화
NFT, DeFi 등 디지털 자산과 금융 서비스의 탈중앙화
WEB 기초용어
> GNB(Global Navigation Bar)
Web Site 전체에 똑같이 적용되는 Navigation Bar이며, 어떤 Page를 Click해도 공통으로 쓸 수 있는 Menu, 보통 Web Site 최상단에 위치하고 있어 Main Menu라고도 불림
> LMB(Local Navigation Bar)
GNB를 Click하거나 마우스를 Hover했을 때 노출되는 하위 Menu, LNB의 Local은 Web Site 중 특정 영역으로 한정한다는 의미가 있어, Serve Menu라고도 함
> SNB(Side Navigation Bar)
보통 Main Menu와 Serve Menu를 제외한 나머지 Menu를 SNB라고하며 보통 왼쪽이나 오른쪽에 위치하고 있어 Side라고 표현
> FNB(Foot Navigation Bar)
Web Site에서 가장 하단에 위치하는 Menu, GNB처럼 Site 내 모든 Page에 공통으로 노출되는 Menu로 가장 하단에 위치하고 있어 Foot이라고 표현, Footer라고도 함
WEB 기본구성
> Header, Footer
- Header는 Web Site의 최상단을 뜻함
GNB가 있는 위치이기도 하며, Header의 왼쪽 최상단에는 홈페이지로 이동 가능한 Link를 넣는 것이 보편적이며 이는 보통 Web Site의 Logo로 표현
Header에는 검색창, GNB, 홈페이지 연결 Link가 포함되어야 함- Footer는 Web Site의 최하단을 뜻함
FNB가 있는 위치이기도 하며, Contact 정보와 Copywrite 등 Web Site의 정보를 기입
> Bread Crumb
Bread Crumb은 직영하면 "빵가루"라는 뜻
헨젤과 그레텔 동화와 같이 길을 잃지 않기 위해 지나온 길에 빵가루를 뿌려 표시하는 것처럼, 복잡한 Web Site 안에서 방문자가 길을 잃지 않도록 현재 위치한 Page가 어디인지 단계별로 나타내는 구성요소
보통 Main Contents 영역 상단에 위치
WEB 종류
- PC Web
PC나 노트북을 통해 Contents를 접함
해상도는 1024px 이상을 지원- Mobile Web
Mobile의 Web Browser는 휴대폰 제조사에 따라서 다름
www라는 Host Name을 m을 넣어서 m.naver.com으로 표기
Mobile 해상도는 Device에 따라 다름- Responsive Web
PC나 Mobile이나 소스가 하나
Device에 맞춰 반응해서 UI를 표현하는 방식
WEB을 만드는 사람들
- 기획자
아이디어 발견
Research
전략
Wireframe- Design
Wireframe
GUI Design
Prototyping & Guide line 제작- 개발
Front/Backend
Debugging
Test
적용해보기
위에서 배운 내용을 토대로 기존에 내가 구상해본 Web이 구성요소가 다 포함되어있는지 분석해보고 개선을 해보았고, Web/App을 Clone Design을 진행하는 시간을 가졌다.
▼ 아래는 내가 'Figma'를 통해 제작한 'Meow' Web Site와 Clone Design이다.
<'Meow' Web Design, Clone Design>
WEB에 대한 기초를 다지고 필수요소를 알아보는 과정을 통해 기존에 내가 제작했던 WEB의 개선점을 발견할 수 있었고 이 과정을 통해 개념이해를 더욱 쉽게 할 수 있는 시간이었다. Clone Design도 진행해보며 좋은 Web Design이란 어떤 것인가에 대해 더욱 깊이 생각할 수 있었고, 모방은 창조의 어머니라는 말이 있듯이 나도 좋은 Designd을 하고 싶다는 생각이 더욱 깊어지는 수업이었다.
