웹 디자인 입문 강과 정주행 #1

기획 - 디자인 - 개발의 순서로 개발된다

---

#2 용어 정리

용어	영어 표현	설명
사용자 경험	UX	본인의 편의성에 맞게 사용해야한다.
사용자 인터페이스	UI	사용자가 접하는 화면 디자인
반응형 웹		화면 크기에 따른 반응
웹 스타일 가이드	WSG	일관성을 유지하기 위한 지침
행동 유도성	affordance	누구나 이해하고 익숙한 것
레이아웃		화면 구성 또는 배치
그리드	Gird	레이아웃을 구현하는데 필요한 가이드라인
글로벌 네비게이션 바	GNB	사이트 전체에 대한 네비게이션 바
로컬 네비게이션 바	LNB	로컬 네비게이션 바. 2depth 이하를 뜻한다.
사이드 바		해당 서비스의 다양한 기능 제공, 화면 좌 우에 배치
헤더 / 푸터		상단, 하단 영역.
콜 투 액션	CTA, Call To Action	목표 달성 버튼. 강조하고 싶은 버튼
	Label / Placeholder / Input	입력창과 그에 맞는 힌트, 라벨. 인풋창을 소개
파비콘	Favicon	상단 브라우저 탭 타이틀 옆 16x16
웹 서버 & 웹 호스팅		웹 브라우저를 띄워줄 코드, 이미지, 데이터 베이스를 저장
도메인		인터넷 상의 주소
웹 퍼블리싱		html, css, js등을 작업
크로스 브라우징		다양한 브라우저 환경에 맞게 호환하는 것 모든 브라우저에 똑같이 나오는게 아니라 정보에 소외되지 않는 것
검색 엔진 최적화	SEO	검색 엔진 최적화
구글 애널리틱스	GA	구글 웹 분석 서비스

---

#3 부트스트랩으로 웹 UI 컴포넌트 / 엘리먼트 배워보기

용어	영어 표현	설명
버튼		액션을 취하거나 링크를 거는 경우 hover / disabled / active
폼		여러가지를 입력하고 제출하는 것 Validation: 유효한지 확인
드롭다운		클릭했을 때 하위 메뉴가 나오는 것
네비게이션		원하는 페이지로 이동하는 것
네비게이션 바		네비게이션을 모아놓는 바
경로	breadcrumbs	현재 페이지의 네비게이션 체계
페이지네이션		현재 페이지 넘버를 보여주는 이전, 다음, 현 위치를 보여줘야 함. 확실하게 현재 위치를 표시해야 함
라벨		뭔가를 설명
배지		새롭거나 읽지 않은 항목을 쉽게 강조
썸네일		화면의 요약. 로딩 속도를 위해 작은 크기를 작업해줘야한다.
	Alerts	피드백 메시지를 제공하는 것
진행바		프로그레스 바
리스트		여러가지를 나열하는 것. 다양한 형식이 있다.
테이블		만약  레이블에 테이블을 사용한다면 잘못되었다.
임베드		다른 사이트의 정보를 가져와서 끼워넣는 것
모달		나오는 창
탭		여러가지를 왔다갔다
툴팁		정보를 보여주는 것
팝오버		클릭했을 때 나오는 것 많은 정보를 표시 모바일에서는 호버가 없음
아코디언		접었다 펼쳤다 하는 것
캐러셀		회전목마처럼 여러 자료를 순환시키는 것. 슬라이더라고도 부름

---

#4 레이아웃 & 그리스 시스템

웹 & 모바일, 반응성까지 고려하여 디자인이 필요

---

그리드의 4대요소

컨텐츠 폭: 컨텐츠가 들어가는 너비,
넓으면 시원해보이지만 꽉 차보일 수 있음

단의 수: grid에 포함되는 내용

거터: 단과 단 사이의 간격,

마진: 컨텐츠 폭 밖의 좌우 공간
모니터가 작아지면 좌우가 붙어버릴 수 있음

---

breakpoint: 변화점. 반응형 웹에서 특정 단계에서 너비가 바뀌는 구간.

큰 구간만 맞추고, 세세한 요소 (텍스트 등)은 꼭 맞출 필요는 없다
무조건 그리드에 맞출 필요는 없다.
특정 위치에 맞추면서 작업만 하면 상관 없다.

---

#4-1 반응형 웹디자인을 위한 최적화된 그리드 만들기

완벽한 해상도란 없다 (반응형이기 때문에

어떤 모니터로 들어와도 잘 보이면 좋다.

네이버 가로 1080, 다음 990

사이트의 목적에 따라 1920도 고려한다.
본인 모니터가 아닌 경우에서도 잘 해야한다.

글로벌 국룰 해상도는?
- 1920 1080이 국룰
- 가장 낮은 크기는 1280

가장 낮은 비율인 1280을 기준으로 잡는 것이 좋다.

컨테이너: 안에 담기는 내용물의 최대폭
추천: 1200px

컬럼, 거터
컬럼: 웹 디자인 기준 12단 (2, 3, 4, 6으로 나눌 수 있어서 나누기 쉽다)
거터: 30px 추천. (컨테이너 기준 1200기준으로 30px로 하면 한 컬럼당 72px이 됨)

컬럼이 많아지면 반응형에 반응하기 취약하다

분기점을 나눠서 

모바일은 360기준으로 작업
좌우 마진 20, 칼럼 6, 거터 16

데스크톱에서 모바일로 옮길 때, 글자가 줄바꿈되는 경우가 있기 때문에
차지하는 단수를 바꿔주는 것이 중요

---

#5 와이어프레임

와이어프레임이란: 

목적지에 도달하기까지 얼마나 효율적으로하는가
사용성에 대한 고민들

기획자가 어떤 기능을 만든다면
디자이너는 사용성을 고민해야한다.

---

게슈탈트 이론

구성 요소들을 개별적으로 보기 앞서서 윤곽이나 패턴을 본다.

유사성의 원리: 색, 모양, 크기가 같은 것을 하나로 모아서 보는 것

근접성의 원리: 근접한 것과 멀리있는것과 다르게 구분
그룹핑을 다르게 하는 것

공통영역의 원리: 박스 안의 내용을 공통영역으로 보는 것
공통 영역을 나누자.

연속성의 원리: 연속성이 있는것을 연관이 있다고 보는 것

---

같은 패턴으로 연결되기 때문에 같은 것을 보는 것.
다른 섹션이라면 다른 패턴으로 배치하는 것이 좋음

좋아보이는 것이 있으면 왜 좋은지 분석해보기