본문 바로가기

Course

[한글자막] UI 디자인 부트캠프: 타이포그래피, 색상 및 그리드 완벽 마스터 과정

UI 디자인 부트캠프
: 타이포그래피, 색상
및 그리드 완벽
마스터 과정

디자인 안목을 높이고 직관력을
향상시켜 아름다운 UI 디자인을
만들어 봅시다! 타이포그래피, 색상,
그리드, 구도, 스타일링, 시각적 자료
고르기 등, 실무에서 사용 가능한
유용한 스킬들을 모두 마스터하세요.

배울 내용

직관적으로 더 만족스러운 구도 만들기

색 값을 파악할 수 있도록 안목 기르기

타이포그래피의 역사 알기

UI에 특화된 컬러 팔레트 만들기

최신 웹 애플리케이션에 사용할 그리드 만들기

빛의 물리학이란?

Rob Sutcliffe

UI Designer & Developer


이런 분들에게 추천해요

사용자 경험을 토대로 미적 감각이 뛰어난 UI를 만들고 싶은 주니어 UI 디자이너

UI 디자인에 관심이 있는 프론트엔드 개발자

제품 관리자 및 매니저

디자인 제작에 호기심이 많은 분

✅ UI디자인에서 타이포그래피가 주는 임팩트를 간과하고 있지는 않으신가요? 타이포그래피는 디자인이자 메시지입니다. 자칫 지루할 수 있는 텍스트 단락에서 가독성과 집중력을 높여줄 타이포그래피로 원고에 생기를 불어 넣어 봅시다.
✅ 타이포그래피, 색상, 그리드, 구도, 스타일링, 시각적 자료 고르기 등, 실무에서 사용 가능한 생생하고 유용한 스킬을 알려드립니다.
✅ 본 강의는 디자이너를 위해 만들었지만, 제품 매니저, 프론트엔드 개발자, 디자인 초보자 모두에게 도움이 될 것입니다!

[본 강의를 수강해야 하는 이유]
멋진 사용자 경험을 만드는 데 있어 가장 중요한 측면은 아름다운 UI입니다. 미적 감각이 조금만 향상되더라도 사용자의 경험에 커다란 영향을 미칩니다.

웹 애플리케이션을 디자인하고 계시다면, 애플리케이션의 브랜드,스타일, 사용성과 사용자 경험에 영향을 미칠 타이포그래피, 색상, 구도에 대한 결정을 내리시고 계실 겁니다. 타이포그래피와 색상을 섬세하게 사용할 수 있다면 충분한 개성을 부여할 수 있기 때문에 다른 효과가 필요하지 않습니다. 지루한 텍스트 단락에 생기를 불어넣을 수 있으며, 사용자가 읽는 것을 더 쉽거나 어렵게 만들 수 있습니다. 몇 가지 간단한 결정이 애플리케이션을 성공시킬 수도 있고 망칠 수도 있습니다.

우리가 웹 애플리케이션에서 보는 것의 95%는 타이포그래피(typography)입니다. 모든 디자인 결정에 영향을 주죠. 하지만 타이포그래피를 제대로 배우기 위해 시간을 투자하는 사람은 거의 없습니다.

색(Color) 은 디자인에 있는 것들을 구별할 수 있게 해줍니다. 색이 없었다면 디자인에서 어떤 것도 구별할 수 없을 겁니다. 하지만 색은 디자인에서 가장 감정적인 연결고리를 갖고 있으며, 사용법과 맥락에 따라 아주 다르게 보이기 때문에 쉽게 카테고리화 할 수가 없습니다. 우리도 당연히 색을 사용해야 하므로, 이 과정을 통해 색을 제대로 사용하는 법을 배워봅시다.

그리드(Grid)는 디자인을 균일하게 만듭니다. 그리드만 제대로 사용해도 디자인을 바로 더 전문적으로 만들 수 있습니다. 하지만 종이에서도 보기 좋고 웹에서도 보기 좋은 그리드를 만들려면 최근 웹 개발의 한계와 이점을 이해하고 있어야 합니다.


[이 과정을 통해 무엇을 얻을 수 있나요?]
각 영역별 스킬을 기르기 위해 밑바탕에 있는 이론을 배우고, 직관력을 향상시키기 위한 과제를 작업하고, 멋진 디자인을 만들기 위한 실용적인 연습을 해볼 겁니다. 각 모듈에 대한 간단한 설명은 다음과 같습니다.
● 구도: 페이지에 요소를 배치하는 직관을 기르기 위한 실습
● 타이포그래피: 다양한 타입 분류의 역사와 배경
● 서체 선택 및 조합: 서체 고르는 법과 서로 잘 어울리는 서체 고르기
● 가독성: 읽기의 원리와 우리가 선택한 서체로 사용자가 더 쉽게 읽을 수 있게 만드는 방법
● 스타일링 & 양식: 타이포그래피에 추가할 수 있는 스타일과 이를 통해 시각적 위계를 개선하는 방법
● 그리드 시스템: 디자인에서 사용하는 그리드의 유형과 오늘날 앱 디자인의 기술적 한계
● 그리드 만들기: 앱 개발 시 디자인 소프트웨어에서 그리드 설정하는 방법
● 색의 상호 작용: 서로 다른 맥락에서 직관적으로 색을 사용하기 위한 실습
● 색의 원리: 빛의 원리와 빛이 색을 만드는 과정
● 색 속성: 디자인에서 색을 더 유용하게 바꾸는 방법
● 팔레트 만들기: UI에 특화된 컬러 팔레트 만드는 실제 단계
● 시각 언어: 디자인을 도울 사진, 아이콘, 그림 및 시각 자료 고르기


[이 과정은 저를 위한 과정인가요?]
이상적으로는 웹사이트와 앱을 디자인 해본 경험이 이미 좀 있으실 겁니다. 이 과정의 모든 측면은 초심자를 염두에 두고 만들어졌지만, 디자인을 이미 만들어 본 경험이 있다해도, 더 많은 걸 배워 가실 수 있습니다. 또한, 몇몇 디자인 소프트웨어 프로그램 사용법을 알고 계시는 게 좋습니다. 저는 피그마를 추천 드리지만, 어도비 XD, 인비젼 스튜디오(Invission Studio), 스케치와 같은 유사 소프트웨어도 괜찮습니다.

이 과정은 디자이너를 두고 만들어졌지만, 프론트엔드 개발자 또는 제품 매니저에게도 도움이 될 겁니다. 별도 심의 없는 환불 보증이 있으며, 구체적인 질문이 있으실 경우 저에게 연락주시기 바랍니다.

1강에서 뵙겠습니다!
- Rob

강의를 들으시고 강의와 관련하여 궁금하신 점은 무엇이든 Q&A에 남기실 수 있지만, 꼭 영어로 내용을 남겨 주세요. 그래야 상세한 답변을 드릴 수 있습니다. :)

평생 이용권9.5시간 동영상
TV&모바일 엑세스 강의 수료증