[리메인] 웹 프로페셔널 강의 학습일지 2
23.07.26 수 두번째 강의
★ 후기 : 마케팅을 하다보니 구글 애널리틱스를 사용할 때가 있는데, 모바일로 들어오는지 PC로 들어오는지는 사실 자세히 안봤던 부분이었다. 어디에서 사이트로 들어오고, 어디에 주로 머물렀으며, 어디에서 결제가 이루어 지지않고 멈췄는지는 보긴 했었는데...모바일 PC 같은경우에는 그냥 간단한 자료만 보고 광고를 돌릴때 모바일 유저가 많으니 광고를 모바일 위주로 돌려야지 정도. 다음엔 자세히 봐야지.
챕터 02 : 해상도와 그리드 개념
- 해상도 개념과 이해
- 해상도와 그리드의 상관 관계
- 그리드 시스템의 이해와 제작방법
- 그리드 시스템 제작 및 적용
1. 강의 내용
해상도의 개념
해상도는 모니터에 출력되는 픽셀의 개수를 결정하는 요소이고 많을수록 좋음
해상도의 기준은 너비가 기준이 됨
>> 디지털 텔레비전이나 디스플레이 장치 혹은 인쇄된 이미지에서 말하는 해상도란 화면을 구성하는 각각의 면이 얼마나 많은 수의 픽셀로 이루어져 있는가를 나타낸다. 여기서 말하는 픽셀이란 디지털 이미지를 이루는 가장 작은 원소를 말한다. 해상도는 전체 픽셀의 수를 의미하는 것이 아니라 특정 거리 혹은 공간 당 차지하는 픽셀의 수를 말한다. 즉, 픽셀의 밀도를 의미하는 것이다. 일반적으로 디지털 장치의 경우 해상도는 1인치 당 존재하는 픽셀 수를 의미한다. [네이버 지식백과]
픽셀의 성질 : 픽셀은 가변의 값으로 설정에 따라 물리적인 크기가 다르게 출력된다.
1920*1080이라는 것은 모니터에 가로로 1920 세로로 1080의 픽셀로 출력해 줄게라는 의미가 된다.
해상도가 낮다 = 디스플레이에 출력되는 절대적 개수가 적다는 뜻
>> 픽셀이란 : 컴퓨터, TV, 모바일 기기 등의 화면 이미지를 구성하는 최소 단위를 일컫는다. 사각형 모양으로, 그 수가 많을수록 고해상도의 선명한 이미지 표현이 가능하다. 화소라고 부르기도 하며, 하나의 점 단위를 나타낸다는 의미에서 도트라고 부르기도 한다.
해당 구간을 기준으로 디바이스를 나눌 수 있게 된다.
다른 디바이스로 넘어가는 분기점을 breakpoints 라 한다.
반응형 웹 디자인
반응형 디자인을 할 때는 언제 2단이고 언제 1단인지 가이드를 잡아야 한다.
(반응형 웹 디자인은 2단에서 1단으로 바뀌는 구간을 브레이크 포인트 분기점이라고 표현함)
Mobile first project : 모바일을 가장 많이 사용하기 때문에, 모바일을 기준으로 우선 작업을 진행 하는 것
실제로 어떤 해상도를 사용하는 지에 대한 리서치 자료를 기준으로 디바이스와 사이즈를 선정
신규프로젝트일 경우
- 국내 프로젝트 : 국내 최소 해상도 점유율 확인
- 글로벌 프로젝트 : 글로벌 최소 해상도 점유율 확인
해상도 데이터 찾아보기 : https://gs.statcounter.com/
Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share
Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly page views.
gs.statcounter.com
리뉴얼 프로젝트의 경우 : 구글 애널리틱스 분석
레이아웃 (Layout)
: 시각적 효과를 고려하여 사진, 그림, 문자 등을 지면에 배열 구성하는 일
그리드 시스템 (Grid System)
: 디자인에서 화면을 구성하는 요소들을 일관된 시스템 속에 배치하는 것으로 화면을 효과적으로 사용하기 위해 가상의 구역을 나누어 놓는 것
격자, 바둑판의 눈금을 뜻하며 판면을 수성할 때 가상의 격자 형태의 안내선을 만들어 정보에 질서와 구조를 부여한다.
- 그리드를 만드는 목적은 컬럼이라고 하는 걸 만들기 위함
Colums : 하나의 단
Gutters : 단과 단 사이의 공간 (양쪽 분배가 필요하기 때문에 짝수)
Margins : 콘텐츠와 화면의 왼쪽 오른쪽 끝부분의 여백
차분하고 고요한 느낌이라면 거터값을 넓게 사용한다. 브랜딩에 따라 디자인이 달라지며, 거터값은 결정된 부분은 아니다.
컬럼은 주로 2의 배수, 3의 배수, 4, 6의 배수가 겹쳐지는 12컬럼이나. 3, 5의 배수 15컬럼을 많이 사용한다.