총평

1. 좋았던 부분
   1. FE/서비스 기획자에게 도움이 될 것으로 보임.
      1. 디자이너가 어떤 관점으로 작업을 진행하는지 이해할 수 있어서 디자이너와 협업 경험이 많지 않은 주니어 FE/서비스 기획자가 디자이너와 협업하는데에 도움이 될것으로 보임.
      2. 반대로 디자이너와 협업경험이 많은 유관직무자 이거나, 본인의 직무가 프로덕트 디자이너라면, 디자인시스템 부분을제외하면 큰 도움은 어려울 것으로 보임.
   2. O2O 산업에 대한 도움이 될 것으로 보임.
      1. 모빌리티 UX/UI 클래스가 O2O플랫폼에 대한 전반적인 비즈니스 전략을 포함해, 프로덕트 제안점까지 얘기하고있어, 기획자로서 도움이 되는 부분이 많았음. 해당 파트는 다른 분들께도 권하고싶음.
   3. UI 디자인 이론 학습가능.
      1. UI GUI 클래스에서는, 관습적으로 받아드렸던 내용들이 그렇게 정해진 원인을 학습할 수 있었음. 실무에 크게 도움이 되는 내용이라고 보기는 어려우나 디자인에 있어서 배경 논리가 강화될 수 있는 요소로 보임.
2. 아쉬웠던 부분
   1. 집중하기 힘든 구조
      1. 한 강의에 최소 5명 이상의 강사가 있고 바뀔때마다 각자 자기소개를 다시하고, 강의 방식과 강의자료 방식이 달라 온전히 집중하기에는 아쉬움이 있었음.
      2. 강의가 주로 3~8분으로 끊겨 회차가 많은 형식으로 구성되어있으나, remain 강의 플레이어가 자동재생을 지원하지 않아, 한강한강 들을때마다 조작이 필요한 점이 집중을 흐트러트리게 함.
   2. 넓고 얕은 내용
      1. 스케치, XD, 피그마 등 다양한 디자인 툴에 대해서 한번에 다루면서 해당툴에 대한 전문적인 내용은 다루지 못하고있음.
      2. 기본적인 인터페이스 설명 및 최소한의 차이점 설명 수준.
      3. 다만 디자이너가 아니라고 할때 이정도 내용으로 협업에는 도움이 될것으로 보임.

UI GUI 강의

1. 해상도의 개념

   1. 하나의 픽셀은 하드웨어에 따라 그 사이즈가 다를 수 있다.
   2. 가로폭 해상도가 디바이스를 구분하는 기준이 됨.
      1. 320~600 : 모바일
      2. 600~1024 : 태블릿
      3. 1024~ : 데스크탑
      4. 분기점 breakpoint : 600, 1024

2. 최소 해상도를 선정해야하는 이유

   1. 하나의 웹사이트에 다양한 해상도 설정으로 들어오는 유저들이 있음.
      1. PC 최소값이 1024 인데, PC 화면을 1024 이상으로 만들면 가로스크롤바가 생기는 문제.
      2. 따라서, 해당 종류의 가장 작은 가로사이즈보다 작게 만들면 됨.
         1. eg. PC 최소값은 1024이므로 PC 버전웹사이트는 1024이하로 만들면됨.
         2. 이보다 커질 경우 좌우 나머지는 여백으로 함.
   2. 단 최소해상도의 경우 물리적으로 존재하는 최소 값을 기준으로 하는 것이 아니라, 점유율을 기준으로 하는것이 적절.
      1. eg. 현시점에 사용율이 거의없는 아이폰 3 의 가로해상도를 최소해상도로 기준으로하지 않음.

3. 신규 프로젝트를 위한 최소 해상도 데이터 추출

   1. 케이스별로 신규 프로젝트의 최소 해상도를 정하는 방식.

   

   1. region 별 통계자료를 활용함

4. 리뉴얼 프로젝트를 위한 최소 해상도 데이터 추출

   1. 애널리틱스와 연결하여 유저의 해상도를 확인함.

      

5. 그리드 시스템 사용하는 이유와 구성요소

   1. 디자인을 구성하는 컬럼들을 그리드에 맞춤.
      1. 모든 디자인적 요소를 그리드에 맞출 필요는 없음.
   2. 그리드 구성요소

      1. 컬럼 / 거터 / 넘버브 칼럼스

         

      2. 거터 : 컬럼간의 간격

6. 그리드 시스템 제작 방법

   1. 넘버오브칼럼스
      1. 넘버오브 칼럼스를 미리 정하는게 좋음.
      2. 통상 12단, 15단을 많이 씀
         1. eg 12단을 쓰면 범용성이 높음
            1. 2단을 * 6개
            2. 6단을 * 2개
            3. 3단을 * 4개 …
   2. 거터

      1. 디자인의 무드를 결정함

         

      2. 기본값은 20px로 해두고 판단해보면 좋음.

   3. 칼럼의 너비
      1. *공식 : 넘버오브 칼럼스*칼럼너비 + (넘버오브 칼럼스-1)거터 = full width
      2. 이때 full width값이 최소해상도보다 작게해야한다.
      3. 핵심은, 그리드 너비 < 최소 해상도

7. 최소 해상도보다 작은그리드 시스템 만들기

   1. 실습파일

      

8. 툴을 통해 그리드 시스템 만들기

   1. 피그마 > 프레임 > 데스크탑 > 레이아웃그리드 > 세팅 > 칼럼’ 카운트 , 거터, 위드

9. 퍼블리셔의 시선으로 보는 그리드 시스템

   

   1. 컨텐츠 위스 : 유저가 인지하게 되는 가로폭

      1. 센터정렬 기준으로 좌우에 배분되어있는 마진을 제외한 값.
      2. 풀위스 1200에 거터가 20이고 좌우에 10씩있다고하면 컨텐츠 위스는 1200 -20 = 1180

   2. 풀위스 : 제작자가 고려하는 가로폭

      1. 센터정렬 기준으로 좌우에 배분되어있는 마진을 포함한 값.
      2. 풀위스 1200에 거터가 20이고 좌우에 10씩있다고하면 풀위스는 1200

   3. 이렇게 거터를 절반나눠서 양쪽에 배분해야하는 케이스가 있으므로 거터값에는 짝수를 줘야한다. 홀수면 센터정렬이 어려움.

      

10. 모바일과 반응형 웹을 위한 % 단위 이해

    1. 퍼센트단위로 디자인을 해야 반응형 웹, 모바일 디자인을 대응할 수 있음.
       1. 픽셀단위 : 해당 픽셀을 기준으로만 출력됨. 만약 브라우저가 가로픽셀보다 작아지면 스크롤 생성.
       2. 퍼센트단위 : 브라우저 단위 기준으로 출력됨. 만약 브라우저가 줄어들면 따라서 비율이 줄어듬. 스크롤 생성되지 않음.