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

Description

• UI디자인에서 타이포그래피가 주는 임팩트를 간과하고 있지는 않으신가요? 타이포그래피는 디자인이자 메시지입니다. 자칫 지루할 수 있는 텍스트 단락에서 가독성과 집중력을 높여줄 타이포그래피로 원고에 생기를 불어 넣어 봅시다.

• 타이포그래피, 색상, 그리드, 구도, 스타일링, 시각적 자료 고르기 등, 실무에서 사용 가능한 생생하고 유용한 스킬을 알려드립니다.

• 본 강의는 디자이너를 위해 만들었지만, 제품 매니저, 프론트엔드 개발자, 디자인 초보자 모두에게 도움이 될 것입니다!

[본 강의를 수강해야 하는 이유]

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

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

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

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

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

[이 과정을 통해 무엇을 얻을 수 있나요?]

각 영역별 스킬을 기르기 위해 밑바탕에 있는 이론을 배우고, 직관력을 향상시키기 위한 과제를 작업하고, 멋진 디자인을 만들기 위한 실용적인 연습을 해볼 겁니다. 각 모듈에 대한 간단한 설명은 다음과 같습니다.

1. 구도: 페이지에 요소를 배치하는 직관을 기르기 위한 실습

2. 타이포그래피: 다양한 타입 분류의 역사와 배경

3. 서체 선택 및 조합: 서체 고르는 법과 서로 잘 어울리는 서체 고르기

4. 가독성: 읽기의 원리와 우리가 선택한 서체로 사용자가 더 쉽게 읽을 수 있게 만드는 방법

5. 스타일링 & 양식: 타이포그래피에 추가할 수 있는 스타일과 이를 통해 시각적 위계를 개선하는 방법

6. 그리드 시스템: 디자인에서 사용하는 그리드의 유형과 오늘날 앱 디자인의 기술적 한계

7. 그리드 만들기: 앱 개발 시 디자인 소프트웨어에서 그리드 설정하는 방법

8. 색의 상호 작용: 서로 다른 맥락에서 직관적으로 색을 사용하기 위한 실습

9. 색의 원리: 빛의 원리와 빛이 색을 만드는 과정

10. 색 속성: 디자인에서 색을 더 유용하게 바꾸는 방법

11. 팔레트 만들기: UI에 특화된 컬러 팔레트 만드는 실제 단계

12. 시각 언어: 디자인을 도울 사진, 아이콘, 그림 및 시각 자료 고르기

[이 과정은 저를 위한 과정인가요?]

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

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

1강에서 뵙겠습니다!

- Rob

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

What You Will Learn!

• 직관적으로 더 만족스러운 구도 만들기
• UI에 특화된 컬러 팔레트 만들기
• 색 값을 파악할 수 있도록 안목 기르기
• 최신 웹 애플리케이션에 사용할 그리드 만들기
• 타이포그래피의 역사 알기
• 빛의 물리학이란?
• 적절한 서체 선택하기
• 타이포그래피 시스템 만들기
• 시각 언어 선택 또는 만들기
• 색이 다양한 맥락에 어떻게 적응하는지 파악하기
• 시각적으로 자극되는 UI 디자인 구성하기

Who Should Attend!

• 사용자 경험을 토대로 미적 감각이 뛰어난 UI를 만들고 싶은 주니어 UI 디자이너
• UI 디자인에 관심이 있는 프론트엔드 개발자
• 제품 관리자 및 매니저
• 디자인 제작에 호기심이 많은 분

TAKE THIS COURSE