web grid system (웹 그리드 시스템 이해하기) - 용어

안녕하세요. 

웹디자인 기초인 웹그리드 시스템을 찾아보고 이해하면서 정리해 봅니다.

 

출처 : https://www.pnetform.com/

 

Web = World Wide Web (www) 

월드와이드웹이란, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말합니다. 간단하게 웹이라 부릅니다. 

 

소통의 창이라고도 할 수 있는데 

과거에는 한쪽 방향으로 정보를 주기만 했다면, 

현재에는 댓글도 달고, 리뷰도 달고 쌍방향으로 소통 할 수 있는 시스템입니다. 

 

Web Design 할 때 많이 사용하는 용어에 대해서 알고 갑니다. 

 

UX : 사용자 경험 (User Experience) 

UI : 사용자 인터페이스 (User Interface) 

반응형 웹 : 디바이스의 해상도에 맞게 최적화 된 화면

 

WSG (Web Style Grid) : 하나의 사이트 내에 다양한 페이지, 일관성을 부여하기 위한 운영 및 지침 

- UX/UI 디자인의 일관성을 유지하고 체계적인 디자인 시스템을 구축하기 위한 목적으로 제작되는 웹스타일 가이드는 구축을 위한 중요한 부분이기도 하지만 구축이 완료된 시점에서 운영을 위한 유지보수의 기준이 되는 UX/UI 디자인에서 핵심적 역할을 한다. 웹스타일 가이드는 원래 최초 디자인 전략과 컨셉이 결정되어 시안이 제작되고 컨펌이 이루어지면 기본적으로 만들어 지는데 프로젝트가 진행이 되면서 부분적으로 수정이 되거나 보완되는 이유로 최종 프로젝트가 완료되는 시점에 최종적으로 정리되고 최종 산출물 형태로 클라이언트에 납품된다. 

- 하나의 사이트를 여러 명의 디자이너가 진행하는데 기준을 마련하는 규칙과 같다. 

- 웹사이트의 본질적인 일관된 아이덴티티를 유지하기 위한 UX/UI 디자인 전략이다. 

 

레이아웃 : 화면 구성 또는 배치

- 레이아웃은 페이지 영역에 따른 콘텐츠 배치를 위한 가이드이다. 메인페이지와 서브페이지로 크게 나뉘고 그 안에 콘텐츠 배열을 규정한다. 

 

그리드 시스템 : 레이아웃을 구현하는데 필요한 가이드 라인

• container - 컨테이너, 컨텐츠 폭 ( 담기는 내용의 최대 폭)

• columns - 단의 수

• gutter - 단과 단사이의 간격

• margin - 옆에 있는 마진 값

그리드 시스템에 대한 자세한 내용은 여기서 참고하세요 :-) 

http://designbase.co.kr/webdesign-4/

#4 웹디자인 그리드 시스템의 모든 것?! - 웹디자인 입문 강좌

 

GNB : 사이트 전체에 대한 네비게이션 바

LNB : 하위 메뉴, 서브 네비게이션 바

사이드바 : 해당 서비스의 다양한 기능 제공

헤더푸터 : 상단에 있는 영역, 브랜드 로고부터 네비게이션 바

푸터 : 하단에 있는 회사 정보, 저작권 표기, 소셜 정보 등을 배치 

 

CTA (Call To Action) :  목표 달성 버튼 ( 장바구니, 결제하기 등)

Affordance : 행동유도성 (누구나 이해하고, 익숙한것)