반응형 웹
최적화시켜 잘리거나 너무 작아서 안 보이는 게 없도록
디바이스의 해상도에 맞도록 하는 것이 반응형 웹이다
GNB
메인메뉴라고도 할 수 있다.
사이트에 방문한 유저가 다른 페이지로 이동할 수 있도록 링크를 모아 놓은 것을 말한다.
LNB
GNB 와는 다르다 서브 메뉴를 말한다
하위 메뉴라고 할수 있다.
사이드바
페이지내에 콘텐츠를 제외하고
우측 또는 좌측에 배치한
해당 페이지에서 다른 페이지로 쉽게 이동할 수 있도록 하는 것
방대한 페이지를 다루는 페이지가 아니면 잘 찾아볼 수 없다.
네이버, 페이스북, 유튜브 에서 자주 볼 수 있다
레이아웃
구성과 화면 배치를 말한다
3단으로 할지
6단으로할지
4단으로 할지
이런 레이아웃을 말한다.
그리드
많은 페이지일수록 효율적인 레이아웃을 필요로 하는데,
엑셀 , 파워 포인트의 표 가 있다.
그런 것들처럼 웹의 표라고 생각하시면 이해하기 쉬울 것!
행동 유도성
사용자의 행동을 유도하는 것이라고 설명할 수 있는데요,
누구나 이해하고 익숙한 것이 좋다!
누가 봐도 왼쪽이 더 버튼 같다.
헤더/푸터
CTA(Call To Action)
버튼이라고 생각하면 된다. 회원가입,장바구니,구매하기 등!
인풋/ placeholder
어떤 것을 입력하는 창을 인풋이라고 하고,
힌트를 주는 것을 플레이스 홀더라고 한다.
추가로 알면 좋은 내용은 라벨!
인풋 창을 소개해주는 것
해당 라벨을 클릭하면 인풋 창에 포커스 되도록 하는 기능.
파비콘
저게 파비콘이구나 라고 알고 있으면 된다.
도메인
www. ex. com .com
인터넷 상의 주소입니다.서울 강남구 청담동 이런 것이라고 생각하시면 됩니다.
웹 서버 & 웹 호스팅
브라우저 검색창에 www.naver.com를치면
웹 서버에서 해당 도메인에 맞는 코드와 이미지를 다운로드하여서
여러분 모니터에 뿌려주는 것이다.
그러면 어딘가에 있는 코드, 이미지등을 저장하는 곳을 서버라고 한다.
웹 호스팅은 그러한 서버를 이용할 수 있도록 만든 서비스이다.
cafe24, 닷홈, 가비아 , 등등이 있다! , 운영 쇼핑몰도 cafe24를 이용해서 만들었다.
웹퍼블리싱
코드로 마크업 작업을 하는 것을 말한다.
웹 디자인 작업을 하게 되면 결과물이 나오는데,
실 사용자들은 웹사이트로 확인을 한다.
그러려면 웹 퍼블리셔, 프론트엔드 개발자가 디자인에 맞게 코드를 작업을 해주는 것을 말한다.
html, css, js언어 등으로 한다.
크로스 브라우징
많은 브라우저가 존재하는데,
브라우저에도 버전이 존재한다
예전 브라우저들을 사용하는 할머니, 할아버지 분들에게도
웹페이지가 잘 나와야 한다.
크로스 브라우징의 핵심은 정보가 소외되지 않도록 하는 것!
모든 브라우저에 똑같이 디자인이 나오는 것이 아니고 ,
기능을 아무리 짱짱하게 만들더라도 하위 브라우저에서는 구현이 불가능한 것들이 있다
그런 것들은 어쩔 수 없지만, 동일한 정보를 제공할 수 있어야 하기 때문에 그런 것들을 고려한 방식을 크로스 브라우징이라고 하는 것이다.
모두를 충족시킬 수는 없다. 포기할 부분은 포기해야 한다.
SEO
SEO 란 검색엔진 최적화인데,
해당 글의 순위가 상위에 노출되도록 하는 것입니다.
구글이나 네이버에 검색했을 때 해당 사이트가 상위에 노출되어야 사업에 유리하다.
아무리 좋은 제품을 만들어 팔고 싶어도 사이트 홍보가 되지 않으면
검색해도 노출이 안되면 유저들이 잘 모른다
우리가 SEO 작업을 할 경우는 거의 드물지만 알고 있으면 좋다.
쇼핑몰 상세페이지 등에서 통 이미지로 작업할 경우에 SEO에 불리하다!
구글이나 네이버에서 봇이 돌아다니면서 정보를 수집해야 하는데,
텍스트 정보가 아니면 불리하다는 것만 알고 있자.
GA( Google Analytics )
실무에서 종종 다루는데 , 앞으로 마케팅, 사이트 운영에 대한 실마리를 얻기 위한
객관적인 정보를 받아볼 수 있는 대시보드 서비스라고 할 수 있다.
몇 명이 들어왔는지 , 이탈율이 어떻게 되는지, 성비 비율이 어떻게 되는지
pc, 모바일 어떤 것이 더 들어오는지,어느 페이지가 가장 인기 있는지
이런 정보를 쉽게 알 수 있다. 아주 유용하다!
여담) Adobe Xd로 수업을 진행했는데.. 동아리 자체에서 나온 수업자료는 LikeLion 로고 만들기 이런 것들이여서
나는 좀더 기능 사용에 중점을 두고 수업했었는데.. 그 때는 블로그에 포스팅 할 생각이 없었어서 수업 자료가 없 다... 나중에 adobe xd로 홈페이지 구성할 때 한번 포스팅 해야겠다.