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

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

황금비율 웹 디자인 라이브

평일 저녁반 마감임박

done
  • 5주 과정
  • 금요일
  • 09.24 ~ 10.22
  • PM 19:00 ~ 22:00

290,000원

총 결제 금액

290,000원

클래스 정보

  • 라이브 클래스

    강의유형

    Zoom으로 진행되는 라이브 클래스 입니다.

  • 1개월 과정

    수강기간

    1개월 (5주) 동안 진행되는 과정 입니다

로그인 필요

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

카드안내

  • 신한카드

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

  • KB국민

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

  • 비씨(페이북)

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

  • 삼성카드

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

  • NH농협

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

  • 현대카드

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

  • 하나카드

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

  • 롯데카드

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

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

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

🙌

Online Live: 황금비율 웹 디자인

챕터 01

웹 디자인을 위한 데이터값 세팅

  • check_circle

    웹 업무 프로세스 알아보기

  • check_circle

    해상도와 웹 사이트 너비값의 관계

  • check_circle

    구글 애널리틱스로 해상도 데이터 값 도출하기

  • check_circle

    최소 해상도 선정과 웹 사이트 너비 값 세팅하기

  • check_circle

    그리드 시스템의 개념과 제작 요소 알아보기 *column, number of colums, gatter

  • check_circle

    그리드와 컬럼 시스템의 관계 이해하기

챕터 02

개발자와 그리드로 소통하기

  • check_circle

    그리드 시스템 제작해 보기

  • check_circle

    그리드 시스템을 백분율로 계산하기

  • check_circle

    프론트 개발자와 그리드로 소통하는 방법

  • check_circle

    고밀도 해상도의 이해

  • check_circle

    논리픽셀과 물리픽셀의 이해

  • check_circle

    픽셀의 레스터화 과정 이해하기

  • check_circle

    레스터화에 최적화된 배율 디자인 세팅하기

  • check_circle

    모바일 웹 디자인 환경 세팅

  • check_circle

    모바일에 최적화된 아이콘 제작방법

  • check_circle

    반응형 디자인을 위한 브레이크 포인트 잡기

  • check_circle

    스케치로 웹 디자인 환경 구축하는 방법

챕터 03

디자이너가 꼭 알아야 할 이미지 비율과 경량화

  • check_circle

    고밀도 대응을 위한 svg 제작법

  • check_circle

    웹 로딩 속도를 위한 이미지 경량화 방법

  • check_circle

    http 요청을 줄이기 위한 이미지 스프라이트 기법

  • check_circle

    이미지 비율 가이드 만들기

  • check_circle

    시스템폰트, 이미지폰트, 웹 폰트의 이해

  • check_circle

    웹 안전 서체 세팅법

  • check_circle

    웹 폰트의 이해와 사용법

  • check_circle

    웹 폰트 경량화의 이해

  • check_circle

    프로젝트에 최적화된 폰트 세팅법

챕터 04

웹 접근성을 위한 유니버설 타이포그래피

  • check_circle

    웹에 최적화된 폰트 크기

  • check_circle

    자간, 행간 사용법과 CSS 계산법

  • check_circle

    웹 접근성을 위한 폰트 컬러 명도대비 체크하기

  • check_circle

    컴포넌트의 이해

  • check_circle

    컴포넌트 시스템의 문제점

챕터 05

UI 컴포넌트 제작 방법

  • check_circle

    컴포넌트 구성 요소

  • check_circle

    UI 컴포넌트와 개발 컴포넌트의 동기화

  • check_circle

    개발자 시선의 컴포넌트 이해하기

👋
이제부터 클래스를
자세히 소개해 볼게요.

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

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

우리는 5주간 3개의
미션을 진행해 볼 거에요 😎

#1 그리드 시스템 만들기

프로젝트를 시작할 때마다 만들게 되는 그리드. 여러분은 그리드 시스템에 대해 얼마나 알고 계신가요? 작업의 효율성을 높여주는 그리드 시스템 제작 노하우를 알려드릴게요. 고정 레이아웃 그리드와 반응형 그리드 시스템을 제작합니다. 나아가 퍼블리셔와 레이아웃, 구조에 대해 이야기하는 방법들을 소개하겠습니다.

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

폰트들이 개발된 웹 화면에서 이상하게 보이던 경험을 다들 하셨을 거에요. 내가 디자인한 폰트, 자간, 행간 값들이 화면에 그대로 보이기 위해서는 필요한 과정이 있어요. 스케치, 피그마, Xd, PSD로 작업한 폰트 관련 속성을 퍼블리셔에게 어떻게 전달할 지 수치값과 계산법을 찾는 과정을 배워볼게요.

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

웹과 모바일 환경들을 고려한 컴포넌트 가이드는 어떤 게 있을까요? 황금비율 웹 디자인 수업에서는 디자인 스타일과 컴포넌트를 디자이너 시선과 개발자 시선에서 반영하는 방법을 알려드릴게요. 배운 내용을 바탕으로 하나의 스타일 컴포넌트 가이드를 만들어봅니다.

우리는 이런 걸 배워요 ☺️
웹 타이포, 그리드, 반응형, 배율디자인 등의 핵심 개념

데스크탑/모바일 등 다양한 디바이스 환경을 고려한 타이포, 그리드, 반응형, 배율디자인 등의 핵심개념을 설명드려요. 10년 이상 경력 웹 디자인, 퍼블리싱 실무자가 뽑은 웹 디자인 표준 케이스로만 수업을 진행합니다.

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

웹 UI는 결국 퍼블리싱을 통해 출력 됩니다. 퍼블리싱의 특수성을 이해하고 올바른 UI를 제작할 수 있는 방법론을 전달해 드립니다. padding, border, radius, 폰트 사이즈와 컬러 등 퍼블리셔에게 넘기기 전 꼭 체크해야하는 요소들에 대해서도 함께 이야기 해볼게요.

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

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

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

미디어 쿼리, 부트스트랩 등 반응형 디자인 할 때 많이 들어보긴 했는데 아직 잘 이해는 안되시나요? 모바일 작업을 할 때 디자이너는 어떤 점들을 고려해야하는 지 같이 알아 보겠습니다. 모바일, 태블릿 등 다양한 매체의 작업 환경을 고려한 반응형 디자인을 할 수 있는 노하우를 배우는 시간이 될 거에요.



다음에 해당된다면 꼭 들어보세요!

  • ✔️

    업계 표준 웹 디자인 제작방법을 알고 싶어요

  • ✔️

    운영 디자인을 할 때 썸네일 가이드나 웹 그리드 만드는 기준이 궁금해요

  • ✔️

    반응형 디자인에 필요한 실무자 노하우를 배우고 싶어요

👩‍💻
강의 파트를 담당하는
강사님을 소개할께요

  • 황금비율 웹 디자인

    주말반

    김준우 강사님

안녕하세요. 디자이너 김준우입니다.

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

  • 🔥

    실무자 직강

    리메인 에이전시 대표 직강

  • 👀

    누적 수강 1,300명

    현 65기수까지 조기마감 기록

  • 📃

    이론과 실습 중심

    스텝별 미션, 실습도 함께

  • 🤭

    입문자도 수강가능

    사전지식이 없어도 수강가능

강사님 작업물

강사님 작업물

강사님 작업물

강사님 작업물

👋
먼저 수강한 분들의
후기를 들어보세요

박예은

👍5.0

웹디자인을 할때 왜 이렇게 해야 하는가를 알려주십니다. 확실히 제가 연습하면서 만들었던 것들과는 퀄리티가 차이가 납니다. 이부분을 왜 이렇게 해야 하는지를 이해하고 작업하니 결과물이 더 좋을수 밖에 없더군요. 또한 내가 만약 클라이언트를 설득을 해야 할때 어떻게 해야 하는지를.. 실무 노하우를 자세히 알려주시니 나중에 확실히 도움이 될것 같습니다. 들어도 절대 후회는 없을거라 생각합니다.

이민수

👍4.3

웹 디자인을 잘 모르는 상태에서 들었어요.. 그리드에서부터 컬러, 타이포, 등등 진짜 여기 강의 커리큘럼에 적혀있는거 다 알려주세요 :) 보통 강의 들으면 시간상 생략하고 대충 넘어가는 것들도 많은데... 그런거 하나도 없구요. 오히려 더 많이 알려주셔서 굉장히 감사했습니다. 질문하기 편한 분위기 만들어주셔서 그것도 좋았어요. 저는 굉장히 도움을 많이 받았고 궁금한 것 또한 모두 해결하고 가서 추천하고 싶은 마음에 글 남깁니다. 강의 들으실 분들도 적극적으로 질문하시면 모두 친절하게 알려주시니 많이들 얻어가셨으면 좋겠어요 :-) 선배나 회사 선임이 알려주면 그것도 좋겠지만 이 분야의 전문가인 분께 들으니 단기간이라도 훨씬 도움되더라구요. 적극 추천합니다~~

임기환

👍4.3

어제로 4주차 수업 모두 듣고 다른 분들 도움이 되실까 싶어서 후기 남겨요. 같이 수업 들으셨던 분들은 모두 웹디자인 관련 업무나, 공부를 하셨는데 저혼자만 기획쪽 업무를 하고 있었습니다. 저는 전문적인 지식보다는 디자인을 보는 감각을 키우고 싶어서 수강했었는데 이론과 실기가 적절히 섞인 진행으로 4주동안 어렵지 않게 따라 간 것 같습니다. 선생님께서 배려해주신 것도 있구요! 이론도 개념부터 실무에 접목시키는 것 까지 필요한것만 잘 집어주신거 같아요. 디자인 전공 안하셨어도, 디자인에 관심있으신 분들 듣기에 딱 좋은 수업인거 같습니다!

지영희

👍4.2

수업을 듣길 잘했어요!! ㅠㅜㅠ 천만다행 ㅠㅜㅠ! 미대를 나오지 않았던터라 디자인에 대한 갈증이 늘 해소가 되지 않은 상태로 디자인을 해왔는데 선생님 수업 듣고 웹디자인 분야를 넘어서 디자인에 대한 갈증이 채워졌습니다.ㅠㅜ 다들 너무나 당연시하게 알려주지 않았던 이론이라던가 실무에 있어서 필요한 충고 등등 덕분에 수업 듣는 내내 너무 행복했어요 ㅠㅠㅠㅠ 저희 기수는 학생이 한명도 없었고 다들 실무에서 일하는 디자이너였는데도 모두의 가려움을 긁어준 강의랄까... ^^ 정말정말 좋았습니다 > < ! 정말 디테일하게 잘 알려주셨어요~ 타 분야 디자이너인데 웹에 대해 관심이 많거나 디자인을 하는데 웹디자인은 어떤걸 고려해서 만들어야 하는지 등등 그런 질문들이 풀리지 않은 분들에게도 왕왕 추천해요!! :D 무서워하지 말아요 선생님 프로필 사진보다 더 편하신 분이에요 ㅋㅋㅋ 쌤 그동안 감사했습니다 > < 원래는 편집디자인에 관심이 많은데 쌤 덕분에 웹디자인에 대한 생각도 많아졌네요 ㅋㅋㅋ 건강하십쇼!! :D

이은지

👍4.4

정말 알찬 한달이였어요! 비 전공자여서 끝까지 할 수 있을지 의문이였는데 만족하며 나올 수 있었습니다 :) 포토샵도 모르는 기능들도 많았었는데 눈치보여 질문하지 않았는데도 센스있게 잘 알려주셔서 감사했습니다. 그리고 웹디에 있어서의 입문자들이 흔히 하는 실수 들을 HTML+CSS로 구현해서 이햬하기 쉽게 보여주셔서 말로만 설명했을 때보다​기억이 오래 남을 수 있었던 같습니다ㅎㅎ 이 강의를 통해 제가 부족한 점들이 뭔지를 잘 알았고 점차 개선할 수 있었어요! 무엇보다 선생님이 재밌게 잘 해주세요ㅋㅋㅋㅋ 강의 추천합니다!

이기현

👍5.0

저는 경력자인데도 몰랐던게 너무많아서 강의들으며 그동안 인생 헛살았구나 싶었습니다. 실무를 하면서도 그동안 누구도 가르쳐주지않았고 주먹구구식으로 해왔던 것들이 왜 그렇게 해야되는지를 알게되었고 체계가 좀 잡힌거같아요! 더 배우고싶고 4번의 수업이 너무 아쉬웠습니다. 선생님 강의 정말 잘하세요~ 인강이 빨리 나왔으면 좋겠어요ㅠㅠ

차은정

👍4.5

왠만하면 후기 잘 안쓰는데 .. 남겨봅니다. 웹디자이너로 업계에 발을 들여놓고 다년간 웹사이트를 구축하고 운영하면서 실력은 급성장 했지만, 늘 궁금했습니다. 수많은 선배 디자이너들이 던져주는 psd 파일을 분석하면서, 레이아웃, 이미지와 폰트 사이즈, 폰트의 자간, 행간 등등 디자인의 이유는 알지 못한 채, 그저 이렇게 하는 것이 보기 좋으니까라고 자기합리화하며 디자인을 하곤 했었습니다. 이 강의는 왜? 라는 질문에 답을 줍니다. 왜 레이아웃 사이즈를 이렇게 잡아야 하고, 왜 여백을 이렇게 줘야 하고, 왜 폰트 컬러를 이렇게 해야 하는지 등등에 대한 명쾌한 답을 줍니다. 자신이 디자인하고도 설명할 수 없는 디자인을, 설명할 수 있는 디자인이 되도록 만들어줍니다. 이유있는 디자인을 하고 싶으신 분들에게 강력 추천합니다. 좋은 강의로 한단계 업그레이드 시켜주신 김준우 선생님께 진심으로 감사하다는 말씀드립니다.

박기찬

👍4.3

웹디자이너로 몇년을 근무했지만 해소되지않는 "왜 이렇게 써야되는가"라는 의구심이 있었지만 각각의 견해가 다르고 막연한것들이 많았는데 명쾌한 해답들로 속시원했던 강의입니다. 많이 고민하고 다른 학원들과 같을까 걱정하며 수강했는데 진즉 들을껄 이라는 후회가 되면서 이제라도 수강해서 다행이라는 안도감이 듭니다 ! 김준우 강사님의 열성인 강의에 감동받고 힘얻어갑니다 :-)

김지우

👍4.3

전공을 하지 않고 중소기업에 취업해 사수 없이 이리치이고 저리치이며 어떠한 기준없이 일을 했었습니다 처음엔 그냥 저냥 했지만 회사가 성장해갈수록 제자리가 좁아지고 디자인을 한다는게 너무 답답했었어요 그러던중 인스타를 통해 듣게된 강의! 비록 워크숍이었지만 정말 알짜배기 정보들만 딱딱 찝어서 강의해주시니 머리속에 흩어져있던 조각조각들이 모아지면서 어떠한 기준이 잡히더라구요. 학교다닐때 잠만자던 제가 김준우 선생님 강의는 무언가에 홀린듯 시간가는줄 모르고 집중해가며 들었습니다... 정말 실무에 꼭 필요한 강의라 생각됩니다 !! 아 그리고 제가 하드가 고장나는바람에 강의자료들이 다 날라갔는데 무려 2달이나 지난 지금 수업자료들도 다시 보내주셨습니다 ㅠㅠ 감동!! 선생님께서 마지막 강의시간에 해주셨던말 "수업끝났다고 걱정하지마세요 언제든지 궁금하면 물어보세요 저 여기 있을테니까요!" 솔직히 100% 믿음가지 않았는데...이런 사후서비스? 까지 해주시니 10000%믿음에 주변 분들에게 막 퍼트려드리고 싶네요 이 강의를 통해 제가 얻어가는게 너무 많은것 같습니다~ 저와 같은 분이라면 강력히 추천해드립니다 ^^

이지민

👍4.3

나름 실무에 오래있어 다 알고 있는 내용이라 생각했는데 왜 그렇게 작업해야하는지 논리적으로 웹 기초부터 앞으로의 방향성까지 명쾌한 하게 잘 가르쳐주셨습니다. 가장 좋았던 점은 많은 디자인 학원을 다녀봤지만 이렇게 하면 예뻐요 좋은 디자인이예요라고 주관적으로 설명하지 않는다 점이 가장 좋았던 부분입니다. 강사님을 보며 정말 진심으로 대하고 열정적으로 가르쳐 주신 강의였다 생각합니다. 주니어는 물론 시니어까지 누가 들어도 강추인 수업입니다.

클래스를 마친 후
논리적인 이론이 뒷받침된 웹 디자인을 만들고
웹의 규칙성과 특수성을 고려할 수 있어요

1. 이론과 근거로 논리적인 설득이 가능한 웹 디자인을 만들 수 있습니다

2. 실제 코드로 개발 가능한 UI 디자인을 설계할 수 있습니다

3. 웹,모바일,태블릿 매체를 고려한 반응형 웹을 제작할 수 있습니다

클래스 수강을 위해서
이런 준비물이 필요해요!

  • ✔️

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

  • ✔️

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

  • ✔️

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