50일 안에 UI 디자인 실무 역량을 기르는

반짝 집중 UI 챌린지

모집 기한

4월 27일 ~ 5월 14일

챌린지 진행 기간

5월 14일 ~ 7월 3일 (50일)

학습 목표

2개의 메인 프로젝트를 내 손으로 완성해요.

UI 구성 요소별 38개의 실습을 진행해요.

좋은 UI의 원리를 이해하고 디자이너의 눈을 길러요.

수강 혜택

강의 요약집 포함 6개의 혜택 제공

수료시 7만원 상당 1개월 멤버십 제공

현직자 20문답으로 알아보는 취업 실전 팁

10만원 이상 혜택에 취업 실전 팁까지 모두 드려요

참여만 해도 쏟아지는 혜택! 챌린지 수료하고 이 모든 혜택을 받아가세요

참여 혜택

모든 강의 무제한 수강

참여 혜택

피그마 핵심 단축키 모음집

참여 혜택

출석 체크와 학습 독려 알림

성공 혜택

링크드인 등록 가능한 공식 수료증 발급

성공 혜택

7만원 상당 1개월 학습 연장권

성공 혜택

현직자 20문답으로 알아보는 취업 실전 팁

방대한 UI 디자인 공부

어떻게 시작해야 할지 모르겠다면?

라이브러리

그리드

피그마

폰트

아이콘

프로토타입

여백

라이브러리

그리드

피그마

폰트

아이콘

프로토타입

여백

폰트

아이콘

I.A

컬러

레이아웃

명도

UI 컴포넌트

폰트

아이콘

I.A

컬러

레이아웃

명도

UI 컴포넌트

명도

피그마

프로토타입

UI 컴포넌트

반응형 디자인

여백

I.A

명도

피그마

프로토타입

UI 컴포넌트

반응형 디자인

여백

I.A

챌린지를 해야하는 이유

단 50일 안에 실무에 통하는 UI 역량을 완성하세요

좋은 UI의 원리를 이해하고
디자이너의 눈을 길러보세요

UI 구성 요소별 38개의 실습을 완료하고
기본기를 탄탄하게 다져보세요

2개의 메인 프로젝트를
내 손으로 완성해보세요

강의 소개

UI 디자인이 어렵게 느껴진다면 이 영상을 꼭 보세요

디자인 베이스가 없어도 OK!

2개의 메인 프로젝트
내 손으로 UI 디자인 완성

PROJECT 1

음악 플레이어 디자인: 폰트와 아이콘 프로젝트

아티스트명 & 곡명: 위계에 따른 폰트 스타일링

노래 컴포넌트 내에 노래 제목보다 아티스트의 이름이 너무 강조되어 있는 듯합니다. 노래 제목이 더 잘 보이도록 폰트 스타일을 수정해 주세요.

4개의 아이콘

노래 컴포넌트 내에 빠져 있는 4개의 아이콘을 채워 주세요. 아이콘의 이름은 피그마상 해당 프레임 영역의 레이어 이름을 보면 알 수 있습니다.

사이드바 메뉴명: 위계에 따른 폰트 스타일링

사이드바 내에 있는 메뉴명의 폰트 스타일링이 일관되지 않아 같은 위계의 메뉴인지 판단하기가 어렵네요. 폰트 스타일링을 수정하여 하나의 메뉴 UI인 것을 알려 주세요.

앨범 설명: 가독성을 키우는 폰트 스타일링

우측 앨범 정보 내에 있는 앨범 설명 부분의 가독성이 좋지 않아 보입니다. 폰트 스타일링을 통해 가독성을 키우고 주변과 잘 어울리도록 만들어 주세요.

PROJECT 2

랜딩페이지 클론 디자인

컬러, 폰트, 레이아웃 준비하기

규칙적인 컬러, 중요도를 구분할 수 있는 폰트, 깔끔한 레이아웃 배치로 일관성 있고 위계가 분명한 랜딩페이지를 만들어 봐요.

정리된 스타일로 컴포넌트 제작

컴포넌트를 잘 사용하면 비슷한 속성을 가진 요소들을 효율적으로 만들 수 있어요. 이전에 만들어 둔 기초적인 UI의 베리어블과 스타일을 활용해서 나머지 컴포넌트도 만들어 봅시다

9개 섹션으로 페이지 구성

히어로 섹션, 고객사 목록, 캘린더 목록, 다양한 도구 목록, 링크 입력란, 요금제 안내, 고객 리뷰, 보안 인증, CTA까지 아홉 개의 섹션을 직접 만들어 봐요

프로토타입으로 디자인 점검

드디어 마지막 단계에 왔습니다! 프로토타입으로 보면서 페이지의 흐름이 자연스럽고, 디자인이 어색한 곳이 없는지 체크해 주세요.

UI 구성 요소별

38개의
실습을 확인해 보세요

실습을 통해 UI 요소에 대한 이해와 피그마의 핵심 기능까지 습득하게 될 거예요

Figma 기본

디지털 명함 만들기

Figma 기본

스킬 UI 만들기

Figma 기본

나만의 이력서

일관성

구독 페이지

스타일

주식 차트 UI

셀렉션 컬러

아바타 컬러 수정

셀렉션 컬러

codebnb 랜딩페이지

컴포넌트

후기 목록 UI

컴포넌트

codebnb 숙박 목록

컴포넌트 네스팅

강의 목록 페이지

스마트 셀렉션

비디오 스트리밍 사이트

오토 레이아웃

검색 엔진 UI

오토 레이아웃

codebnb 숙박 목록

컨스트레인트

로그인 페이지

컨스트레인트

codebnb 숙박 상세

플러그인

codebnb 콘텐츠 채우기

그라디언트

산 풍경

이펙트

광고 배너

이펙트

SNS 광고

프로토타입

codebnb 완성하기

Figma 기본

디지털 명함 만들기

Figma 기본

스킬 UI 만들기

Figma 기본

나만의 이력서

일관성

구독 페이지

스타일

주식 차트 UI

셀렉션 컬러

아바타 컬러 수정

셀렉션 컬러

codebnb 랜딩페이지

컴포넌트

후기 목록 UI

컴포넌트

codebnb 숙박 목록

컴포넌트 네스팅

강의 목록 페이지

스마트 셀렉션

비디오 스트리밍 사이트

오토 레이아웃

검색 엔진 UI

오토 레이아웃

codebnb 숙박 목록

컨스트레인트

로그인 페이지

컨스트레인트

codebnb 숙박 상세

플러그인

codebnb 콘텐츠 채우기

그라디언트

산 풍경

이펙트

광고 배너

이펙트

SNS 광고

프로토타입

codebnb 완성하기

여백

좌석 선택

여백

여성 의류 모아보기

정렬

날씨 UI

정렬

결제 UI

크기

OpenLRN 사이트

크기

클라우드 스토리지 서비스

프로젝트

EasyTalk 랜딩페이지

뉴트럴 컬러

알람 설정 UI

프라이머리 컬러

makeit 취미 활동 플랫폼

컬러

장바구니 UI

컬러 베리에이션

airoom 숙박 서비스 UI

컬러

성공/경고/실패 알림 UI

컬러

캘린더 UI

프로젝트

대시보드 UI

폰트

CodeitBlog 홈 화면 UI

텍스트 스타일링

CodeitBlog 상세 UI

아이콘 라이브러리

메일 서비스 UI

아이콘

쇼핑몰 UI

여백

좌석 선택

여백

여성 의류 모아보기

정렬

날씨 UI

정렬

결제 UI

크기

OpenLRN 사이트

크기

클라우드 스토리지 서비스

프로젝트

EasyTalk 랜딩페이지

뉴트럴 컬러

알람 설정 UI

프라이머리 컬러

makeit 취미 활동 플랫폼

컬러

장바구니 UI

컬러 베리에이션

airoom 숙박 서비스 UI

컬러

성공/경고/실패 알림 UI

컬러

캘린더 UI

프로젝트

대시보드 UI

폰트

CodeitBlog 홈 화면 UI

텍스트 스타일링

CodeitBlog 상세 UI

아이콘 라이브러리

메일 서비스 UI

아이콘

쇼핑몰 UI

50일 UI 챌린지를 완주하면

이런 역량을 갖출 수 있어요

챌린지 미션 토픽

1단계

UI 디자인 기초

UI 디자인의 기본 개념과 Figma의 사용법을 익히며 디지털 명함과 이력서를 만드는 방법을 배웁니다.

좋은 UI 디자인

UI 디자인 원칙과 일관성, 위계 등의 개념을 다양한 실습을 통해 학습합니다.

2단계

Figma 핵심 기능

실무 프로젝트로 배우는 효율적 디자인 시스템

codebnb 프로젝트를 기반으로 변수, 스타일, 컴포넌트, 오토 레이아웃 등 Figma의 핵심 기능을 익힙니다. 랜딩 및 숙소 페이지를 실습하며 일관된 디자인 시스템을 빠르게 구성하는 방법을 배웁니다.

디자인 완성도를 높이는 시각 효과와 인터랙션

그라디언트, 이펙트 등 시각 효과로 디자인 완성도를 높이고, 프로토타입 기능으로 인터랙션을 구현합니다. SNS 이미지 제작과 프로젝트 마무리로 실전 감각을 다집니다.

3단계

UI 디자인을 위한 컬러

컬러의 원리부터 실전까지, UI 디자인의 시작

컬러 표현 방식과 대비 개념 등 컬러의 기초 이론을 배우고, HSB, HEX 값과 같은 컬러 표현 방식 이해, 뉴트럴 컬러와 프라이머리 컬러를 중심으로 실제 UI에 어떻게 적용하는지 실습합니다.

실용적인 컬러 확장과 세컨더리 컬러 활용법

베리에이션과 세컨더리 컬러로 디자인을 더 풍부하게 구성하는 법을 다룹니다. 숙소 선택, 캘린더 등 다양한 UI에 색상으로 정보를 전달하는 실습이 포함되어 있습니다.

대시보드 UI로 마무리하는 컬러 실전 프로젝트

마지막에는 대시보드 UI 디자인 프로젝트를 통해 배운 컬러 지식을 종합적으로 적용해보며 토픽을 마무리합니다.

4단계

UI 디자인을 위한 폰트와 아이콘

텍스트로 완성하는 UI, 폰트 스타일링의 기본과 실전

폰트 선택부터 텍스트 스타일링 원리(크기, 두께, 간격 등)를 학습하고, 블로그 UI 등 다양한 예제에 적용해 봅니다.

직관적인 UI를 위한 아이콘 이해와 활용

아이콘의 개념과 좋은 아이콘의 조건(단순함, 직관성, 일관성)을 배우고, 라이브러리 사용법과 실전 적용법을 익힙니다. 메일 서비스, 쇼핑몰 UI 등에서 아이콘을 효과적으로 배치하고 구성하는 방법을 다룹니다.

실전 프로젝트로 마무리하는 UI 디자인

최종 과제로 메신저와 음악 플레이어 UI를 직접 디자인하면서, 앞서 배운 텍스트와 아이콘 스타일링을 종합적으로 적용해보는 단계입니다.

5단계

UI 디자인을 위한 레이아웃

레이아웃의 핵심 원리, 영역부터 시작하기

레이아웃을 이해하기 위해 가장 먼저 UI를 영역 중심으로 보는 시각을 익히고, 그 영역을 시각적으로 드러내는 기본 개념을 배웁니다.

여백·정렬·크기로 구성하는 탄탄한 UI 구조

레이아웃의 세 가지 핵심 기술인 여백, 정렬, 크기를 단계별로 학습합니다.

랜딩 페이지 레이아웃 구성하기

마지막에는 웹페이지 전체 레이아웃을 구성하고, 랜딩 페이지를 직접 설계해봅니다.

6단계

UI 디자인 프로젝트 : 랜딩 페이지 클론 디자인

Calendly 클론 프로젝트로 시작하는 실전 UI 디자인

실습 중심의 프로젝트로, 실제 서비스 형태의 UI를 클론 디자인하며 학습을 시작합니다. 간단한 소개와 수강 가이드를 통해 전체 흐름을 파악할 수 있어요.

준비부터 구성까지, 단계별로 따라가는 UI 설계 과정

컬러, 폰트, 레이아웃 등 디자인 요소들을 하나씩 준비하고, 컴포넌트와 섹션을 차례대로 제작하며 디자인 설계 과정을 체계적으로 따라갈 수 있도록 구성되어 있습니다.

챌린지로 만드는 놀라운 성장

하루 5분, 50일이면 실력이 달라집니다

전문가 20인의 노하우로 탄생한

5분 내외 강의

*교육부 공식 블로그 - 마이크로러닝의 효과

하루, 한 주, 한 달 마침내 목표 달성까지

챌린지 완주를 위한
전용 대시보드

출석 체크, 학습 독려 알림과 미션으로

4배 더 꾸준한 학습

챌린지 안내

UI 디자인 공부가 막막하다면
지금 바로 챌린지에 참여하세요

STEP 1

챌린지는 무엇인가요?

코드잇 챌린지는 50일 동안 매일 출석하며 학습 습관을 기르고,
동기부여를 통해 높은 학습 완주율을 이끌어내는 집중 프로그램이에요

챌린지 기간

5월 14일 ~ 7월 3일 (50일)

STEP 2

어떻게 참여하나요?

[챌린지 참여하기] 버튼 클릭

코드잇 2개월 멤버십 결제

챌린지 참여 완료

모집 기간

4월 27일 ~ 5월 14일

STEP 3

챌린지 성공은 어떻게 하나요?

43일 이상 출석 (최대 7일 결석)

챌린지 필수 토픽 전부 수료

챌린지 시작/종료 시 후기 2회 제출

이런 점들이 특히 좋았어요

코드잇 UI 과정에 만족한 생생한 사용자 후기

그동안 디자인에 대해 막연하게 느꼈는데, 피그마 사용법뿐만 아니라 UI 디자인 핵심도 알 수 있어 좋았습니다.

양갱2

Figma 처음 입문해서 사용할 때는 어떻게 해야 할지 막막했는데, 이렇게 영상으로 순서대로 알려주니 너무 좋네요.

MilkT

디자이너랑 협업할 일이 많아서 보게 되었는데, 좀 더 전문적으로 이야기할 수 있는 이론들이 도움이 되었습니다.

lullul

강의마다 실습이 있어서 바로 적용해보는 과제들의 퀄리티가 높아서, 만들어진 완성작이 정말 뿌듯했어요.

yelming

자주 묻는 질문

궁금한 점이 있으세요?