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

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

Web Style Guide
Typography
Class

CREATOR. KimJunu

웹 타이포그래피 원데이

10,000 원데이 클래스

LIVE 2.5단계에도 원격수업으로 정상진행

일정

필독 공지사항

웹 타이포그래피 가이드 편!
UI에 쓰이는 타이포그래피 가이드를 알려드립니다.

모바일, 데스크탑 등 다양한 매체 환경 속에서 편집이나 그래픽 작업에서 쓰던 폰트를 UI에 그대로 사용하고 계신가요?UI를 만들 때 쓰는 폰트에는 규칙과 가이드가 있습니다. 폰트가 출력되는 개념부터 웹 접근성에 맞는 가이드까지 알려주는 웹 스타일가이드, 타이포그래피편! 하루 4시간만에 웹 타이포그래피를 마스터해 스스로 가이드를 제작해보세요! 코로나로 집 밖에 나가기 힘든 요즘, 리메인이 온라인 라이브로 찾아갑니다! 우리 라이브로 만나요 :)

우리는 이런걸 배워요

  • 기본 폰트 사용과 웹 폰트 제작 사용하는 법

    웹에서 쓰고 싶은 폰트가 있으셨나요?기본 폰트 사용방법부터 웹 폰트 제작, 사용 방법까지 알려드립니다. 디바이스에서 내가 원하는 폰트를 사용할 수 있도록 알려드립니다.

  • 디바이스에 맞는 폰트 크기, 자간, 행간, 글자 길이 지정하는 법

    데스크탑과 모바일, 유저가 사용하는 특수한 환경 속에서 폰트의 설정을 지정하는 방법을 알려드립니다. 실무에서 실제로 쓰여지고 있는 폰트 설정 값을 비교해드리고 원리와 개념에 맞는 폰트 크기 가이드를 정립할 수 있습니다.

  • 웹 접근성에 맞는 폰트의 컬러 가이드

    모든 사용자들이 정보와 기능에 동등하게 접근할 수 있도록 하는 웹 접근성, UI 제작시 웹 접근성을 높이는 폰트 가이드를 통해 사용자의 인지에 최적화된 컬러를 사용해보세요!

  • 브라우저에서 출력되는 폰트의 원리

    출력과 그래픽 작업에서 쓰는 폰트와 브라우저에서 보여지는 폰트는 다른 원리로 출력된다는 것을 아시나요? 데스크탑/모바일 등 다양한 디바이스 환경을 고려한 폰트의 원리를 배울 수 있습니다.

navigate_before
navigate_next

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

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

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

커리큘럼

  • 01 웹 타이포그래피 가이드 #1
    • 브라우저에 폰트가 출력되는 개념
    • 기본 폰트 사용법
    • 웹 폰트 제작과 사용법
    • 폰트 단위 px, pt 이해하기
    • 디바이스에 맞는 폰트 크기 선정
  • 02 웹 타이포그래피 가이드 #2
    • 웹 자간과 퍼블리싱 자간의 이해
    • 웹 행간과 퍼블리싱 행간의 이해
    • 디바이스에 맞는 글자 길이
    • 웹 접근성에 맞는 폰트 컬러

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

웹 스타일 가이드를 만들어야 하는 디자이너분들을 위한
타이포그라피 가이드 클래스입니다.

이번 클래스에서는 사수가 없거나 가이드를 직접 만들어야하는 디자이너, 퍼블리셔 분들을 위한 웹 스타일 가이드, 타이포그래피 클래스 입니다. 디바이스라는 특수한 매체 환경 속에서 폰트 가이드를 스스로 설계할 수 있도록 타이포그래피 가이드의 개념을 알려드립니다.


혹시 UI 작업을 할 때
이런 고민을 하고 있지 않나요?

  • “내 디자인을 개발자가 구현해줬는데 폰트가 다르게 나오고 크기도 일정하지 않은것 같아요. 제가 만들었을때와 구현되었을때 똑같았으면 좋겠어요!”

    -00디자이너-

  • “사수가 없어서 스타일 가이드를 제가 만들어야해요.어떤 개념으로 어떻게 스타일 가이드를 짜야할지 모르겠어요."

    -00디자이너-

  • “그래픽 작업을 하다가 UI 디자인을 하는데 어떻게 작업을 해야할지 모르겠어요. 인쇄물이랑 UI 폰트가 달라서 기준을 어떻게 잡아야 할지 모르겠어요."

    -00디자이너-

navigate_before
navigate_next

웹 스타일 가이드, 타이포그래피 클래스의
포인트 강점

웹 스타일 가이드에 맞춰 , 폰트의 개념 부터 폰트 가이드 설계까지 실무에서 바로 사용할 수 있는 타이포그래피 가이드의 개념을 배울 수 있습니다


브라우저에서 출력되는 폰트의 원리

출력과 그래픽 작업에서 쓰는 폰트와 브라우저에서 보여지는 폰트는 다른 원리로 출력된다는 것을 아시나요? 데스크탑/모바일 등 다양한 디바이스 환경을 고려한 폰트의 개념을 배울 수 있습니다.


기본 폰트 사용과 웹 폰트 제작 사용 법

웹에서 쓰고 싶은 폰트가 있으셨나요? 기본 폰트 사용방법부터 웹 폰트 제작, 사용 방법까지 알려드립니다. 디바이스에서 내가 원하는 폰트를 사용할 수 있도록 알려드립니다.


디바이스에 맞는 폰트 크기, 자간 행간, 글자 길이 지정하는 법

실제로 구현이 가능한 디바이스에 최적화된 폰트 가이드를 알려드립니다. 실무에서 바로 적용을 할 수 있도록 폰트의 크기, 자간 행간, 글자 길이 지정하는 방법까지 폰트의 디테일한 개념을 알려드릴께요!


웹 접근성에 맞는 폰트의 컬러 가이드

모든 사용자들이 정보와 기능에 동등하게 접근할 수 있도록 하는 웹 접근성, UI 제작시 웹 접근성을 높이는 폰트 가이드를 통해 사용자의 인지에 최적화된 컬러를 사용해보세요!


온라인 라이브 클래스에서만
만날 수 있는 특별한 자료 제공 이벤트

클래스가 진행되는 동안 적극적인 참여를 해주신 10분과 SNS에 수업 후기를 적어주신 20분, 총 30분께 클래스에서 진행을 했던 ppt와 더불어 타이포그래피 가이드를 선물로 드립니다!

SNS 후기 작성시 #웹디자인 #리메인클래스 태그를 적어주셔야 확인이 가능합니다 :)

실제 클래스의 수업 자료입니다.

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

타이포그래피 가이드의 개념을 통해 디바이스에 최적화된 웹 스타일 가이드를 제작할 수 있습니다.

우리는 이렇게 느꼈어요!

    사용후기가 없습니다.

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

navigate_before
navigate_next

클래스 수강을 위해선
이런 사전 지식이 필요해요!

  • done 기초지식이 없으신 분들도 수강하실 수 있습니다.
    비전공자 분들도 따라오실 수 있는 난이도로 수업이 진행됩니다.

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

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

  • zoom 프로그램

오시는길

  • 클래스 주소 서울 마포구 양화로6길 33
  • 상세소개 2층 리메인

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

쿨하고 깔끔한 환불정책

환불규정 안내

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

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

expand_less expand_more