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

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

Web
Design
Class

CREATOR. KimJunu

Online Live : 황금비율 웹 디자인

20% 290,000원

232,000 5주 과정

할인종료까지 00 : 00 : 00

일정

필독 공지사항

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

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

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

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

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

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

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

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

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

navigate_before
navigate_next

우리는 이런걸 배워요

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

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

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

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

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

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

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

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

navigate_before
navigate_next

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

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

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

커리큘럼

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

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

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

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

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

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

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

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

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

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

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

    웹 디자이너 신00

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

    웹 디자이너 민00

navigate_before
navigate_next

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

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

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

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

업계 표준 UI 제작법

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

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

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

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

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

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

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

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

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

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

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

우리는 이렇게 느꼈어요!

  • item-comment__thum 박예은 20.08.12
    웹디자인을 할때 왜 이렇게 해야 하는가를 알려주십니다. 확실히 제가 연습하면서 만들었던 것들과는 퀄리티가 차이가 납니다. 이부분을 왜 이렇게 해야 하는지를 이해하고 작업하니 결과물이 더 좋을수 밖에 없더군요. 또한 내가 만약 클라이언트를 설득을 해야 할때 어떻게 해야 하는지를.. 실무 노하우를 자세히 알려주시니 나중에 확실히 도움이 될것 같습니다. 들어도 절대 후회는 없을거라 생각합니다.
  • item-comment__thum 이민수 20.08.12
    웹 디자인을 잘 모르는 상태에서 들었어요.. 그리드에서부터 컬러, 타이포, 등등 진짜 여기 강의 커리큘럼에 적혀있는거 다 알려주세요 :) 보통 강의 들으면 시간상 생략하고 대충 넘어가는 것들도 많은데... 그런거 하나도 없구요. 오히려 더 많이 알려주셔서 굉장히 감사했습니다. 질문하기 편한 분위기 만들어주셔서 그것도 좋았어요. 저는 굉장히 도움을 많이 받았고 궁금한 것 또한 모두 해결하고 가서 추천하고 싶은 마음에 글 남깁니다. 강의 들으실 분들도 적극적으로 질문하시면 모두 친절하게 알려주시니 많이들 얻어가셨으면 좋겠어요 :-) 선배나 회사 선임이 알려주면 그것도 좋겠지만 이 분야의 전문가인 분께 들으니 단기간이라도 훨씬 도움되더라구요. 적극 추천합니다~~
  • item-comment__thum 임기환 20.08.12
    어제로 4주차 수업 모두 듣고 다른 분들 도움이 되실까 싶어서 후기 남겨요. 같이 수업 들으셨던 분들은 모두 웹디자인 관련 업무나, 공부를 하셨는데 저혼자만 기획쪽 업무를 하고 있었습니다. 저는 전문적인 지식보다는 디자인을 보는 감각을 키우고 싶어서 수강했었는데 이론과 실기가 적절히 섞인 진행으로 4주동안 어렵지 않게 따라 간 것 같습니다. 선생님께서 배려해주신 것도 있구요! 이론도 개념부터 실무에 접목시키는 것 까지 필요한것만 잘 집어주신거 같아요. 디자인 전공 안하셨어도, 디자인에 관심있으신 분들 듣기에 딱 좋은 수업인거 같습니다!
  • item-comment__thum 지영희 20.08.12
    수업을 듣길 잘했어요!! ㅠㅜㅠ 천만다행 ㅠㅜㅠ! 미대를 나오지 않았던터라 디자인에 대한 갈증이 늘 해소가 되지 않은 상태로 디자인을 해왔는데 선생님 수업 듣고 웹디자인 분야를 넘어서 디자인에 대한 갈증이 채워졌습니다.ㅠㅜ 다들 너무나 당연시하게 알려주지 않았던 이론이라던가 실무에 있어서 필요한 충고 등등 덕분에 수업 듣는 내내 너무 행복했어요 ㅠㅠㅠㅠ 저희 기수는 학생이 한명도 없었고 다들 실무에서 일하는 디자이너였는데도 모두의 가려움을 긁어준 강의랄까... ^^ 정말정말 좋았습니다 > < ! 정말 디테일하게 잘 알려주셨어요~ 타 분야 디자이너인데 웹에 대해 관심이 많거나 디자인을 하는데 웹디자인은 어떤걸 고려해서 만들어야 하는지 등등 그런 질문들이 풀리지 않은 분들에게도 왕왕 추천해요!! :D 무서워하지 말아요 선생님 프로필 사진보다 더 편하신 분이에요 ㅋㅋㅋ 쌤 그동안 감사했습니다 > < 원래는 편집디자인에 관심이 많은데 쌤 덕분에 웹디자인에 대한 생각도 많아졌네요 ㅋㅋㅋ 건강하십쇼!! :D
  • item-comment__thum 이은지 20.08.12
    정말 알찬 한달이였어요! 비 전공자여서 끝까지 할 수 있을지 의문이였는데 만족하며 나올 수 있었습니다 :) 포토샵도 모르는 기능들도 많았었는데 눈치보여 질문하지 않았는데도 센스있게 잘 알려주셔서 감사했습니다. 그리고 웹디에 있어서의 입문자들이 흔히 하는 실수 들을 HTML+CSS로 구현해서 이햬하기 쉽게 보여주셔서 말로만 설명했을 때보다​ 기억이 오래 남을 수 있었던 같습니다ㅎㅎ 이 강의를 통해 제가 부족한 점들이 뭔지를 잘 알았고 점차 개선할 수 있었어요! 무엇보다 선생님이 재밌게 잘 해주세요ㅋㅋㅋㅋ 강의 추천합니다!

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

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