오픈신청이 완료 되었습니다.

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

Web
Design
Class

CREATOR. KimJunu

황금비율 웹 디자인

290,000 5주 과정

일정

필독 공지사항

코로나바이러스감염증-19 단계별 대응 방침 안내


안녕하세요. 리메인입니다.
현재 코로나 바이러스 감염증 19발생과 관련하여 아래와 같은 대응 방안을 시행 중에 있습니다.



단계별 대응 방침 안내


1단계 정상운영 및 방역 강화
2단계 정상운영 및 방역 강화
3단계 원격수업으로 전환

- 2단계에서 3단계로 상향시 원격수업 공지 문자가 전달 됩니다.
- 3단계에서 2단계로 하향시 오프라인 수업 공지 문자가 전달 됩니다.
* 문자공지는 클래스를 결제한 수강생분들에 한합니다.



출입에 대한 방역 수칙


1. QR 전자출입명부 작성
2. 출입시 발열 체크
3. 전 강의장 및 공간에 대한 소독 진행 (매일 오전 10:00, 오후 18:00, 저녁 23:00)
4. 강의장, 로비, 사무실 손 소독제 비치
발열 또는 호흡기(기침, 인후통, 근육통 등)등 몸이 아프면 출석하지 않습니다.
* 결석으로 인한 수업진도는 02-6080-8623으로 문의 주시기 바랍니다.



수업에 대한 방역 수칙


1. 수업시간내 전 강사 KF94 마스크 의무 착용
2. 수업시간내 전 수강생 마스크 의무 착용
3. 리메인 직원 마스크 의무 착용


리메인에서는 코로나바이러스감염증-19 의심환자 발생 시 즉시 대응할 수 있도록 운영하고 있으며,
수강생 여러분의 안전한 학습 환경 조성과 건강을 위해 최선을 다하겠습니다.

감사합니다.

모바일, 태블릿, 데스크탑 웹에 대한 지식부터
반응형까지 모두 알아보는 클래스입니다

모바일 웹부터 태블릿 데스크탑 웹, 그리고 반응형까지. 생각보다 웹 디자인에는 방대한 지식이 필요합니다. 어디서부터 어떻게 만들어야할지 고민인 분들을 위해 웹에 대한 지식을 스텝별로 이해할 수 있도록 커리큘럼을 구성했습니다. 웹이 처음인 입문자부터 주니어 디자이너분들이 수강하시면 웹에 대한 역량을 키울 수 있습니다.

5주간 3개의
미션을 진행해 볼 거예요

  • #1 그리드 시스템 만들기

    고정 레이아웃 그리드와 반응형 그리드 시스템을 제작합니다. 나아가 퍼블리셔와 레이아웃을 구조를 소통할 수 있게 됩니다.

  • #2 웹 폰트, 자간, 행간 CSS 수치값 실습

    스케치, 피그마, Xd, PSD로 작업한 폰트 관련 속성을 퍼블리셔에게 어떻게 전달할 지 수치값과 계산법을 반영해봅니다.

  • #3 아이콘, 버튼, 컬러 스타일 컴포넌트 가이드

    디자인 스타일과 컴포넌트를 디자이너 시선과 개발자 시선에서 반영할 수 있는 하나의 스타일 컴포넌트 가이드를 만들어봅니다

navigate_before
navigate_next

우리는 이런걸 배워요

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

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

  • 웹 디자인과 퍼블리싱의 상관관계 이해

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

  • 실무를 위한 스타일가이드 및 컴포넌트 제작 방법

    앞서 배운 디자인 개념을 활용해 실제 작업에서 사용할 수 있는 디자인 시스템을 구축합니다. 스타일 가이드 제작방법부터 작업한 컴포넌트를 관리하는 방법까지 배울 수 있습니다

  • 모바일 작업환경을 고려한 반응형 디자인 노하우

    모바일, 태블릿 등 다양한 매체의 작업환경을 고려한 반응형 디자인을 할 수 있는 노하우를 얻을 수 있습니다

navigate_before
navigate_next

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

웹 입문, 중급자를 위한
웹 디자인 클래스입니다

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

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

웹 디자인 직무는 모바일, 데스크탑 등의 다양한 환경에서 동일한 사용자 경험을 주는 것이 중요한 직무입니다

이러한 매체 환경을 고려할 수 있는, 퍼블리싱 지식을 가진 웹 디자이너에 대한 수요도 점점 증가하고 있습니다

웹 디자인 실무진들은
이런 고민을 하고 있어요

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

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

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

    웹 디자이너 신00

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

    웹 디자이너 민00

navigate_before
navigate_next

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

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

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

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

업계 표준 UI 제작법

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

실무를 위한 스타일가이드 및 컴포넌트 제작 방법

앞서 배운 디자인 개념을 활용해 실제 작업에서 사용할 수 있는 디자인 시스템을 구축합니다. 스타일 가이드 제작 방법부터 작업한 컴포넌트를 관리하는 방법까지 배울 수 있습니다

모바일 작업환경을 고려한 반응형 디자인 노하우

모바일, 태블릿 등 다양한 매체의 작업 환경을 고려한 반응형 디자인을 할 수 있는 노하우를 얻을 수 있습니다

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

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

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

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

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

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

클래스 스피커를 소개합니다!

안녕하세요.
클래스 스피커 김준우입니다.

안녕하세요. 디자이너 김준우입니다. 저는 리메인 아카데미와 에이전시를 운영하며 디자이너이자 프론트엔드 개발자로 다수의 기업과 프로젝트를 진행해온 실무자입니다. 제가 진행하는 클래스는 웹 디자인과 개발 단계의 상호작용을 배울 수 있도록 구성되어 있습니다. 굳이 디자인을 공부하며 코드까지 공부해야할까? 생각할 수 있지만, 웹이라는 하나의 결과물을 만들기 위해서는 웹 디자이너와 퍼블리셔가 함께 고민하는 과정이 필요합니다. 이때, 서로의 작업 방식과 사고 방식을 이해해야 비로소 심도있는 결과물이 나올 수 있습니다. 웹 디자이너와 퍼블리셔의 시선에 맞춰, 웹의 구조와 작동 방식을 이해하고 실제 업무에 적용할 수 있도록 도와드리겠습니다.

커리큘럼

  • 01. 웹 디자인을 위한 데이터값 세팅
    • 웹 업무 프로세스 알아보기
    • 해상도와 웹 사이트 너비값의 관계
    • 구글 애널리틱스로 해상도 데이터 값 도출하기
    • 최소 해상도 선정과 웹 사이트 너비 값 세팅하기
    • 그리드 시스템의 개념과 제작 요소 알아보기 *column, number of colums, gatter
    • 그리드와 컬럼 시스템의 관계 이해하기
  • 02. 개발자와 그리드로 소통하기
    • 그리드 시스템 제작해 보기
    • 그리드 시스템을 백분율로 계산하기
    • 프론트 개발자와 그리드로 소통하는 방법
    • 고밀도 해상도의 이해
    • 논리픽셀과 물리픽셀의 이해
    • 픽셀의 레스터화 과정 이해하기
    • 레스터화에 최적화된 배율 디자인 세팅하기
    • 모바일 웹 디자인 환경 세팅
    • 모바일에 최적화된 아이콘 제작방법
    • 반응형 디자인을 위한 브레이크 포인트 잡기
    • 스케치로 웹 디자인 환경 구축하는 방법
  • 03. 디자이너가 꼭 알아야 할 이미지 비율과 경량화
    • 고밀도 대응을 위한 svg 제작법
    • 웹 로딩 속도를 위한 이미지 경량화 방법
    • http 요청을 줄이기 위한 이미지 스프라이트 기법
    • 이미지 비율 가이드 만들기
    • 시스템폰트, 이미지폰트, 웹 폰트의 이해
    • 웹 안전 서체 세팅법
    • 웹 폰트의 이해와 사용법
    • 웹 폰트 경량화의 이해
    • 프로젝트에 최적화된 폰트 세팅법
  • 04. 웹 접근성을 위한 유니버셜 타이포그래피
    • 웹에 최적화된 폰트 크기
    • 자간, 행간 사용법과 CSS 계산법
    • 웹 접근성을 위한 폰트 컬러 명도대비 체크하기
    • 컴포넌트의 이해
    • 컴포넌트 시스템의 문제점
  • 05. UI 컴포넌트 제작 방법
    • 컴포넌트 구성요소
    • UI 컴포넌트와 개발 컴포넌트의 동기화
    • 개발자 시선의 컴포넌트 이해하기

우리는 이렇게 느꼈어요!

    사용후기가 없습니다.

우리는 이런 분위기로 수업해요!

navigate_before
navigate_next

클래스 수강을 위해선
이런 준비물과 프로그램이 필요해요!

  • 개인노트북 (window, mac 운영 체제 모두 사용 가능)

  • Adobe Photoshop CC (최소 CS6 이상 버전)

  • Adobe Illustrator CC (최소 CS6 이상 버전)

오시는길

  • 클래스 주소 서울 마포구 양화로6길 33 (서교동, 홍타운 2층)

현재 클래스와
함께 수강하면 더욱 좋아요!

쿨하고 깔끔한 환불정책

환불규정 안내

  • 100% 전액환불 : 개강 전까지
  • 33% 공제환불 : 강의 1/2 지나기 전 시점
  • 공제환불 불가 : 강의 1/2이 지난 시점
  • 환불은 신청한 일자 기준으로 처리되며, 강의가 시작되는 당일은 강의를 듣지 않았더라도 해당일자에 포함됩니다.

학원의 설립ㆍ운영에 관한법률 제18조 및 동법시행령 제18조 제3항 〔별표 4〕의 기준에 따른다.

expand_less expand_more