웹디자인 관련 용어들

[바다]

1. 레이아웃 (Lay-out)

텍스트, 이미지, 버튼등 여러가지 요소를 정해진 공간안에서 효과적으로 배치하는 것을 말한다.

2. 목업 (Mock up)

간단히 설명하면 실제로 구현되는 형태를 가르킨다. 웹사이트와 같은경우 PC나 모바일 등의 디바이스화면에 목업작업을 하여 시연을 하고자 한다. 목업의 스타일도 다양하기 때문에 트렌드에 부합하는 목업을 통해 작업된 시안을 보다 효과적으로 시연할 수 있다.

3. 그리드 (Grid)

사전적인 의미는 "격자"로서 그리드를 기준으로 일관된 레이아웃을 구현하는데 필요하다. 특히 페이지가 많은 웹사이트에서 그리드는 효과적인 컨텐츠 구성에 필수이며, 반응형 사이트와 같이 해상도에따른 컨텐츠 재구성도 그리드를 기반으로 이루어 지게된다.

4. 스타일 가이드 (Style Guide)

웹스타일 가이드라고도 많이 불리는데, 웹디자인을 하기 위한 기본적인 디자인 아이덴티티와 컴포넌트 전반을 지칭하는 말로서 텍스트, 컬러, 버튼, 줄 간격 등 여러 가지 기준을 통해 디자인/퍼블리싱/개발에 디자인적으로 일관성을 유지하기 위한 필수요소이다.

5. GNB (Global Navigation Bar)

간단히 말하면 메인 메뉴를 지칭함. 1 depth의 메인 메뉴에 대한 Bar로서 보통 최상단에 위치한다.

6. LNB (Local Navigation Bar)

서브메뉴를 말하는데 보통 2 depth메뉴(이하)를 말한다. 통상적으로는 좌측에 위치했는데 최근에는 중앙에 위치하는 형태도 많아졌다. 간혹 LNB의 "L"를 "Left"로 함께 사용하기도 한다.

7. 파비콘 (Favicon)

상단 브라우저 탭 타이틀 옆에 위치한 16x16px사이즈의 아이콘 형태를 말함. 웹사이트 구축 시 별도록 디자이너가 준비해야 될 필요가 있다. 통상적으로 CI나 BI를 넣는다.

8. 톤 앤 매너 (Tone&Manner)

웹사이트 전반의 디자인 스타일과 방향성에 대한 느낌을 말하는 것으로서 스타일 가이드가 구체적인 디자인 형태를 가이드화 시킨 거라면, 톤 앤 매너는 포괄적인 디자인에 대한 느낌을 말하는 것에 가깝다.

9. 유지보수

웹사이트 구축 이후에 사이트를 운영하는 과정을 말하는 것으로서, 유지보수 혹은 사이트 운영 이라고도 말하며, 유지보수 범위에는 예를 들어, 배너 교체, 이미지 교체, 문구 수정 등 비교적 간단한 업무가 포함되어 있다. 때때로 상황에 따라 범위가 큰 부분은 별도 프로젝트로 계약하여 운영하기도 한다. 보통 구축이 끝나면 유지보수 범위에 대해 논의 후 견적가를 정하여 일정기간 단위로 계약을 한다.

10. 플랫디자인 (Flat Design)

그라데이션과, 질감, 구체적인 묘사를 배제한 미니멀하고 심플한 형태의 디자인을 말한다.  플랫 디자인의 장점으로는 벡터 기반의 디자인 요소로 다양한 모바일 디바이스에 대응하기 위한 디자인 관리가 용이하고, 직관이다. 반대 용어로 "스큐어 모 피즘"을 예를 들 수 있다.

11. 푸터 (Footer)

웹사이트 최하단에 Bar형태로 위치한다. 보통 Copyright문구와 주소, 개인정보 취급방침, 인증 마크 등등이 삽입되어있다.

12. 웹서버 (Web Server)

웹서버는 간단히 비유하자면 웹상에 있는 PC로 보면 된다.

13. 웹 호스팅 (Web Hosting)

간혹 웹 서버와 혼동되기도 하는데, 웹 호스팅은 웹 서버를 이용한 서비스로서 보통 웹사이트를 호스팅 서비스를 통해 웹사이트를 띄운다고 보면 이해가 쉽다. 사이트 규모에 따라 호스팅의 서비스도 천차만별이다.

14. 도메인 (Domain)

인터넷상의 컴퓨터 주소를 알기 쉬운 영문으로 표현한 것. 예) www.brunch.co.kr / www.naver.com

15. CSS

디자이너라면 최근에 종종 접하게 되는 용어로써 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트라고 보면 된다. 예를 들어 CSS를 통해 웹사이트에 적용된 폰트 크기나 스타일을 일괄적으로 간단히 수정할 수 있다. 보통 태그로 직접 입력하는 방법이 있고 기존의 스타일시트를 가져와서 적용하는 방법 등이 있다.

16. 제이쿼리(JQuery)

자주 쓰이는 Javascript소스를 모아놓은 라이브러리라고 보면 되는데 디자인으로 치면 포토샵 텍스쳐 소스나, 브러시 소스 같은 것으로 비유해도 되겠다. 제이쿼리를 통해 필요할 때마다 해당되는 소스를 간단한 태그로 적용할 수 있고 무엇보다 모든 브라우저와 디바이스에 동일하게 보인다는 장점이 있다.

17. 크로스 브라우징 (Cross Browse)

웹사이트 구축을 하면, 모든 브라우져 (익스플로어, 크롬, 사파리 등)를 만족시키게 하는 것. 크로스 브라우징은 웹사이트 구축 테스트에서 꼭 필요한 과정이다.