웹디자인 입문 강좌 - 2

이 용어 뭔지 아세요? - 웹디자인 입문 강좌

 

- UI (사용자 경험)

  웹이나 앱, 제품을 사용하고 직감적으로 얻게되는 사용자의 경험

  디자인의 의도와 다르게 사용자가 더 편한 방식으로 찾아서 사용

 

- UI (사용자 인터페이스)

  상황에 맞는 화면 디자인

 

- responsive web

  디바이스에 따라 최적화되게 사이즈가 저절로 맞게 화면을 보여주는 기술

 

- WSG (web style guide)

  bx(브랜드 경험)를 바탕으로 더 큰 개념으로 접근하는 것이 맞지만

  하나의 사이트 내에 다양한 페이지, 일관성을 부여하기 위한 운영 및 관리지침

  신속하고 효율적인 제작 가능, 매일 새롭게 디자인과 퍼블리싱을 하며 발생되는 손실 줄임

 

- affordance (행동 유도성)

  심리학에서 출발한 개념으로 UI 디자인에 적용됨

  디자인의 의도대로 사용자의 행동을 자연스럽게 유도하는 것 (→누구나 이해하고 익숙한 것으로!)

 

- layout

  화면 구성 또는 배치

 

- grid

  레이아웃을 구현하는 데 필요한 가이드라인

 

- GNB (globla navigation bar)

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

  사이트에 방문한 유저가 다른 페이지로 이동하도록 링크를 모아놓은 것

    ex) 쇼핑몰사이트의 outer top acc

 

- LNB (local navigation bar)

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

    ex) 쇼핑몰사이트의 top 안에 서브메뉴 shirts knitwear tee

 

- 사이드 바

  = aside 라고도 함  

  해당 서비스의 다양한 기능 제공  

  대부분 좌측, 우측에 배치됨

  해당페이지에서 쉽게 다른페이지로 이동할 수 있도록 하는 기능

  반응이 취약해서 방대한 페이지를 다루는 사이트가 아니면 찾기 힘듦

    ex) 페이스북, 유튜브

 

- 헤더/푸터

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

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

 

- CTA (call to action)

  목표 달성 버튼

    ex) 결제하기, 회원가입하기

 

- input창/placeholder/label

  정보 입력창과 그에 맞는 힌트, 그리고 라벨

 

- favicon

  상단 브라우저 탭 타이틀 옆 16x16사이즈의 로고

 

- 웹 서버&웹 호스팅

  웹 서버 : 브라우저에 띄워줄 코드, 이미지, 데이터 베이스를 저장하는 공간

  웹 호스팅 : 웹 서버를 유·무료로 빌려주는 곳

 

- 도메인

  인터넷 상의 주소

 

- 웹 퍼블리싱

  디자이너로부터 전달받은 시안을 브라우저에서 볼 수 있도록 html, css, javascript 등을 이용한 코딩 작업

  

- 크로스 브라우징

  다양한 브라우저 환경에서도 사용자가 정보의 소외되지 않도록 하는 것

  (모든 브라우저에서 다 똑같이 나오는 것이 아님! 가장 많이 오해하는 것)

- SEO

  검색 엔진 최적화

  자료 수집 및 순위를 매기는 방식에 맞게 검색 결과 상위 노출시키는 작업

 

- GA (google analytics)

  google에서 제공하는 웹 분석 서비스로, 웹 사이트 트래픽을 추적하고 보고