코드잇 | 비전공자를 위한 실전 UI 디자인

혹시 평소에 이런 생각한 적 있다면 주목!

대세라는 피그마, 나도 잘하고 싶은데 어디서부터 시작해야 할지 모르겠어요
디자이너랑 이야기할 때 용어도 모르겠고, 피드백을 하는 것도 어려워요
버튼 색깔 하나 고르는데도 10분 넘게 고민하게 돼요. 디자인 감각이 없는 것 같아요
내 서비스나 웹페이지, 뭔가 그럴듯하게 만들어보고 싶어요

50일 후에는, 이렇게 달라질 수 있어요

피그마 사용법과 용어를 익혀서 디자이너와 소통이 쉬워지고, 구조적인 눈이 생겨요.
이제는 ‘정렬’, ‘컴포넌트’, ‘계층 구조’ 같은 말이 자연스럽게 나옵니다.
좋은 UI의 핵심만 쏙쏙 배우고, 피그마로 직접 단정하고 예쁜 UI 화면을 만들 수 있어요.
디자인 감각이 없어도 논리와 구조로 좋은 디자인을 만들 수 있습니다.
단순히 툴 사용법만 배우는 게 아니라, 포트폴리오로 남을 ‘나만의 UI’ 결과물도 얻을 수 있어요.
무엇보다 “나도 할 수 있다”는 디자인에 대한 자신감을 얻게 될 거예요!

비전공자도 OK! 디자인 기본 원리부터 실전 프로젝트까지 완벽하게

상세 커리큘럼

화살표를 클릭해서 상세 내용을 확인해 보세요
1단계 UI 디자인 시작하기
2단계 UI 기본 다지기
3단계 UI 디자인 프로젝트
4단계 디자인 실무 배우기

음악 플레이어 디자인

아티스트명 & 곡명: 위계에 따른 폰트 스타일링 노래 컴포넌트 내에 노래 제목보다 아티스트의 이름이 너무 강조되어 있는 듯합니다. 노래 제목이 더 잘 보이도록 폰트 스타일을 수정해 주세요.
4개의 아이콘
노래 컴포넌트 내에 빠져 있는 4개의 아이콘을 채워 주세요. 아이콘의 이름은 피그마상 해당 프레임 영역의 레이어 이름을 보면 알 수 있습니다.
사이드바 메뉴명: 위계에 따른 폰트 스타일링
사이드바 내에 있는 메뉴명의 폰트 스타일링이 일관되지 않아 같은 위계의 메뉴인지 판단하기가 어렵네요. 폰트 스타일링을 수정하여 하나의 메뉴 UI인 것을 알려 주세요.
앨범 설명: 가독성을 키우는 폰트 스타일링
우측 앨범 정보 내에 있는 앨범 설명 부분의 가독성이 좋지 않아 보입니다. 폰트 스타일링을 통해 가독성을 키우고 주변과 잘 어울리도록 만들어 주세요.

자체 제작 100% 고퀄리티 강의를 경험해 보세요

성의 없는 PPT 자료? 몰아치는 학습 내용? NO! 이해를 돕는 고퀄리티 시각 자료와 상세한 강의 내용을 체험해 보세요!

공부 습관을 완성하는 코드잇만의 학습 시스템

5분 내외의 짧은 강의로 부담 없이 공부
이것저것 설치 필요없이 자체 코딩 실행기로 실습
학습 속도를 체크해주는 페이스메이커
게임하듯이 재미있게 공부하는 동기부여 시스템
궁금할 때 마다 바로 질문하고 해결하는 AI GURU
기다리지 말고 커뮤니티에 실시간 도움 요청

타사 온라인 강의 하나 가격에 4,000+ IT 강의를 무제한으로

코드잇 멤버십을 구독하면 UI 디자인 뿐만 아니라 데이터 분석, 챗GPT, IT 교양, 웹 개발 등 원하는 모든 강의를 무제한으로 수강할 수 있어요!