UI GUI 디자인 > UX UI GUI | 리메인 | 리메인 커리어
오픈신청이 완료 되었습니다.

클래스 오픈시 가입하신 핸드폰 번호로 문자를 발송 드립니다 :D
고객센터 02-6080-8623

UI GUI 디자인 VOD

360,000 162,000
55% 27,000
6개월 무이자 카드안내
🎉

바로수강 가능

클래스 정보

  • 온라인 클래스

    강의 유형

    촬영된 영상을 제공하는 클래스 입니다.

  • 평생 소장

    소장 기간

    90일간 수강가능

로그인 필요

결제기능을 이용하기 위해서는
로그인이 필요합니다.

close

카드안내

  • 신한카드

    2-3개월 무이자 할부 (5만원 이상)

  • KB국민

    2-3개월 무이자 할부 (5만원 이상)

  • 비씨(페이북)

    2-3개월 무이자 할부 (5만원 이상)

  • 삼성카드

    2-3개월 무이자 할부 (5만원 이상)

  • NH농협

    2-3개월 무이자 할부 (5만원 이상)

  • 현대카드

    2-3개월 무이자 할부 (1만원 이상)

  • 하나카드

    2-3개월 무이자 할부 (5만원 이상)

  • 롯데카드

    2-3개월 무이자 할부 (5만원 이상)

* 무이자 할부는 결제 금액 기준으로 적용됩니다.

[ 유의사항 ]
- 법인(기업), 체크, 선불, 기프트, 은행계열카드 (BC마크가 없는 NON BC카드 불가)제외 (예. 수협카드 등)
- 직계약 가맹점, 상점부담 무이자 가맹점, 특별제휴가맹점, 오프라인 가맹점, 신규 가맹점 등 일부 제외
- 본 행사는 카드사 사정에 따라 변경 또는 중단될 수 있음
- 무이자 할부 결제시 포인트, 마일리지 적립 제외
- 개인간 안전거래 이니 P2P 서비스 제외
- TASF 취급 수수료 거래 하나카드 제외
- 온라인 PG업종 해당하는 무이자로 이 외 업종은 적용 불가 (제약, 등록금, 도시가스 등)

안녕하세요.
우리 클래스를 소개합니다.

디자인 입문자를 위한
웹,UI 디자인 베이직 클래스입니다

모바일 웹부터 데스크탑 웹까지, 생각보다 방대한 지식이 필요한 웹 디자인. 어디서부터 어떻게 만들어야할지 고민인 분들을 위해 웹에 대한 지식을 스텝별로 이해할 수 있도록 커리큘럼을 준비했습니다.


웹,UI 디자인 직무에서는
이런 이슈가 있어요

웹 디자인 직무는 모바일, 데스크탑 등의 다양한 환경에서 동일한 사용자 경험을 주는 것이 중요한 직무입니다.이러한 매체 환경을 고려할 수 있는, 퍼블리싱 지식을 가진 웹 디자이너에 대한 수요도 점점 증가하고 있습니다


디자인 작업을 하다보면 이런 고민도 들어요

  • “웹 화면을 디자인하기 위해 그리드 break point 가이드를 잡거나, 화면 대지 사이즈를 잡을 때 혼자서 독학하던 내용과 실무에서의 업무가 너무 달라서 곤란했어요.”

    웹 디자이너 신00

  • “운영 디자인에서 컨텐츠 사이즈를 고려해 썸네일 가이드를 잡거나 여백을 위한 안전선을 고려하는 등 디자인 가이드에 적응하는 데 시간이 오래 걸렸어요”

    이커머스 운영 디자이너 이000

  • “웹 디자인 업무를 하면서 column이나 gutter 등 그리드 시스템에 많은 의존을 해왔는데, 실제 개발 상에서 그리드는 디자이너가 생각하는 것과는 다르게 활용되고 있었어요.”

    웹 디자이너 민00

navigate_before
navigate_next


그래서 준비한 클래스
포인트 강점, 첫 번째

웹 디자인 실무 개념을 실습을 통해 바로 경험할 수 있습니다.

웹 타이포, 그리드, 배율디자인 등의 핵심 개념

데스크탑/모바일 등 다양한 디바이스 환경을 고려해 타이포, 그리드, 배율디자인 등에 이를 반영하는 방법을 배웁니다

업계 표준 UI 제작법

웹 UI는 결국 퍼블리싱을 통해 출력 됩니다. 퍼블리싱의 특수성을 이해하고 올바른 UI를 제작할 수 있는 방법론을 전달해드립니다.

실무를 위한 GUI 컨셉 도출 방법

앞서 배운 디자인 개념을 활용해 실무에서 사용할 수 있는 GUI 요소들의 컨셉을 정리합니다. 브랜드 키워드의 컨셉을 비주얼 랭귀지로 표현하는 노하우를 배울 수 있습니다.

모바일과 데스크탑 환경을 고려한 고밀도 이미지 제작법

모바일, 데스크탑 매체의 작업환경을 고려해 고밀도 해상도의 이미지와 svg파일 제작 스킬을 배웁니다.


클래스 포인트 강점, 두 번째

웹 에이전시의 디자이너이자 퍼블리셔로 다수의 프로젝트를 진행해 온 실무 전문가, 김준우 강사님과 업계 표준 웹 디자인에 대해 배웁니다

강사님 작업물
강사님 작업물
강사님 작업물
강사님 작업물

1100명 이상의 수강생이 거쳐간 리메인 오프라인 클래스의 노하우를 그대로! 웹, UI 디자인 실무에서 가장 많이 궁금해하고, 어려워하신 부분들을 쉽고 재미있게 알려드립니다.


클래스를 마치고,
여러분은 이렇게 달라질 거에요

논리적인 이론이 뒷받침되는 웹 디자인을 제시하고,
웹의 규칙성과 특수성을 고려할 수 있게 됩니다.

  • 이론과 근거로 논리적인 설득이 가능한 웹 디자인을 만들 수 있습니다
  • 실제 코드로 개발 가능한 UI 디자인을 설계할 수 있습니다
  • 웹,모바일,태블릿 매체를 고려해 논리적인 웹디자인을 만들 수 있습니다
🙌

UI,GUI 디자인 베이직

커리큘럼

챕터 01

웹 사이트 제작을 위한 최소 해상도 선정

이론과 사례

  • 해상도 개념과 사용목적, 해상도로 디바이스 구분하기
  • 최소 해상도를 선정 해야하는 이유
  • 신규 프로젝트를 위한 최소 해상도 데이터 추출
  • 리뉴얼 프로젝트를 위한 최소 해상도 데이터 추출

실습과 풀이

  • 국내, 해외 사이트 제작을 위한 최소 해상도 선정하기
  • 최소 해상도 선정 실습 풀이

챕터 02

그리드시스템과 아트보드 세팅

이론과 사례

  • 그리드시스템을 사용하는 이유와 구성요소
  • 그리드시스템 제작방법

실습과 풀이

  • 최소 해상도보다 작은 그리드시스템 만들기
  • 포토샵,스케치,피그마, XD로 그리드 시스템 만들기

이론과 사례

  • 퍼블리셔의 시선으로 보는 그리드시스템
  • 모바일과 반응형 웹을 위한 % 단위 이해
  • UI 디자인을 위한 아트보드 세팅

챕터 03

웹 타이포그래피

이론과 사례

  • 브라우저에 폰트가 출력되는 개념과 기본 폰트 사용법
  • 웹 폰트 제작과 사용법
  • 폰트 단위(px, pt) 이해하기, 디바이스에 맞는 폰트 크기 선정
  • 데스크탑에 사용하기 좋은 본문 크기 선정하기
  • 모바일에 사용하기 좋은 본문 크기 선정하기
  • UI 디자인 작업시 꼭 알아야 할 폰트 최소 사이즈
  • 웹 자간과 퍼블리싱 자간의 이해
  • 웹 행간과 퍼블리싱 행간의 이해
  • 디자인 자간,행간과 퍼블리싱 자간, 행간 싱크로율 확인

실습과 풀이

  • 폰트 크기, 자간, 행간 CSS 수치로 바꿔보기

이론과 사례

  • 디바이스에 맞는 글자 길이와 줄바꿈
  • 웹 접근성에 맞는 폰트 컬러

챕터 04

UI 디자인 필수 지식! 고밀도 해상도의 이해

이론과 사례

  • 비트맵과 벡터 동작원리
  • 모바일 해상도 종류
  • 레티나 디스플레이(고밀도 해상도)의 원리와 장점
  • mdpi, xhdpi, xxhdpi, xxxhdpi 이해
  • 물리픽셀과 논리픽셀의 개념
  • 이미지 2x 고배율 작업이 필요한 이유
  • 포토샵(비트맵)으로 UI 디자인을 하면 안되는 이유
  • XD, Sketch, Figma (벡터)로 UI 디자인을 해야하는 이유

실습과 풀이

  • 포토샵 미션. 모바일 디자인을 위한 2x 아트보드 세팅하기
  • XD, Sketch, Figma 미션. 모바일 디자인을 위한 2x 아트보드 세팅하기

챕터 05

SVG 개념과 이미지 용량 줄이기

이론과 사례

  • 고밀도 해상도 대응을 위한 SVG 확장자, 이를 사용하면 안되는 프로젝트 환경 알아보기
  • 트래픽 개념과 이미지 용량 최적화

실습과 풀이

  • 4K 이미지 1MB 이하로 용량 줄여보기

챕터 06

아이콘과 모바일 터치 포인트 이해하기

이론과 사례

  • 아이콘 제작을 위한 아이콘 그리드와 키라인의 이해
  • 디자이너가 사용하는 메테리얼 아이콘
  • 퍼블리셔가 사용하는 메테리얼 아이콘, 모바일 디자인을 위한 터치 포인트

실습과 풀이

  • 터치 포인트에 맞는 모바일 헤더 만들어보기

챕터 07

UI 디자인을 위한 컬러 가이드

이론과 사례

  • UI 디자인을 위한 컬러 가이드의 필요성과 제작
  • 컬러 가이드 제작 방법

실습과 풀이

  • Primary, Secondary 컬러 팔레트 만들기
  • Grayscale 컬러 팔레트 만들기

챕터 08

GUI 디자인을 위한 준비

이론과 사례

  • 비주얼 디자인(GUI)을 위한 프로세스 이해, 비주얼 랭귀지로 브랜드 키워드 추출하기
  • 무드보드 작업과 레퍼런스 자료 찾기
  • 비주얼 디자인(GUI)을 위한 스타일 타일 템플릿 준비하기