PLUS X UI 마스터패키지 수강생에게 제공되는 특별한 혜택
UI 실무 마스터패키지를 구매한 수강생들에게 10만원 상당의 피그마 강의를 무료로 제공합니다.

[1+1+1 이벤트 : 9월 24일 쿠폰 2종 자동 발급][쉐어엑스]플러스엑스 UI 실무 마스터 패키지
정가1,236,000
할인 금액(-60%) 747,000
현재 판매가489,000

월 40,750원

* 12개월 무이자 할부 시

New Release

Plus X의 최신 프로젝트를 기반으로,
프로젝트 리뷰를 꾸준한 업데이트로 전해드립니다.

24-25 Award Wins 4관왕에 빛나는,
최신 프로젝트 설계 여정의 전반을 상세하게 담아냈습니다.


BX와 UX의 유기적 경험 설계를 통해 브랜드 경험을 강화하고, 개인화된 경험을 선사하는 UX 전략과
실 구축 단계의 디자인까지 하나의 궤
로 이어지는 프로젝트 리뷰를 공유합니다.

ImageSlide<b span style="color:#FF6400;">STEP 1.</b> <b>AARRR 프레임워크를 활용한 서비스 진단</b>
STEP 1. AARRR 프레임워크를 활용한 서비스 진단
실리콘밸리에서 널리 사용되는 해적지표를 기반으로 서비스 현황과 방향성을 도출합니다.
ImageSlide<b span style="color:#FF6400;">STEP 2.</b> <b>GA 데이터를 활용한 방향성 검증과 분석  </b>
STEP 2. GA 데이터를 활용한 방향성 검증과 분석
GA (구글 애널리틱스) 데이터를 기반으로 퍼널 단계별 전환율을 분석하고, 명확한 서비스 개선점을 도출합니다.
ImageSlide<b span style="color:#FF6400;">STEP 3.</b> <b>휴리스틱 사용성 평가를 통한 방향성 도출</b>
STEP 3. 휴리스틱 사용성 평가를 통한 방향성 도출
해적 지표를 기반으로 명확한 평가 목적을 설정하고, 우수 사례의 구조적 특징 분석 및 벤치마킹을 통해 설계 논리를 강화합니다.
ImageSlide<b span style="color:#FF6400;">STEP 4.</b> <b>정량적, 정석적 분석 기반의 UX/UI Direction </b>
STEP 4. 정량적, 정석적 분석 기반의 UX/UI Direction
퍼널별 개선점과 키데이터, 방향성을 바탕으로 전략적인 UX 개선 포인트를 구조화합니다.
ImageSlide<b span style="color:#FF6400;">STEP 5.</b> <b>모바일 환경에 적합한 디자인 엘리먼츠 정의</b>
STEP 5. 모바일 환경에 적합한 디자인 엘리먼츠 정의
BX 디자인 엘리먼츠를 기반으로 모바일 친화적인 디자인 엘리먼츠를 정의하는 과정을 공유합니다.
ImageSlide<b span style="color:#FF6400;">STEP 6.</b> <b>UX 방향성을 기반으로 한 A/B 시안 개발 </b>
STEP 6. UX 방향성을 기반으로 한 A/B 시안 개발
2가지의 디자인 시안을 기반으로 고객사와 소통을 통해 최종 시안에 대한 의사 결정을 진행합니다.
ImageSlide<b span style="color:#FF6400;">STEP 7.</b> <b>비주얼 자산을 반영한 일관된 서비스 경험 설계</b>
STEP 7. 비주얼 자산을 반영한 일관된 서비스 경험 설계
브랜드 아이덴티티와 사용자 인터페이스를 연결하여,
일관된 브랜드 경험을 선사하는 서비스 경험 설계를 공유합니다.

전략적 분석과 차별화된 브랜드 경험을 토대로
UI 디자인을 고도화하는 과정까지 밀도 있게 공유합니다.


전략 프레임워크를 기반으로 한 A/B 디자인 시안의 진행 과정부터
최종 구축 단계의 디자인까지 세부적으로 살펴보며 플러스엑스의 일하는 방식을 경험하세요.

ImageSlide<b>비주얼 자산 기반의 아이콘 세트와 룩앤필 구성</b>
비주얼 자산 기반의 아이콘 세트와 룩앤필 구성
사용자에게 일관된 경험을 선사하기 위해, 비주얼 자산을 기반으로 한 UI 아이콘 세트를 개발하고, UI Shape을 설정하여 독창적인 룩앤필을 구성합니다.
ImageSlide<b>효율적인 운영을 위한 AI 활용 프리셋 이미지 · 영상 제작 </b>
효율적인 운영을 위한 AI 활용 프리셋 이미지 · 영상 제작
서비스 내 콘텐츠의 품질을 높이고 효율적인 생산과 운영을 지원하기 위해, AI를 활용해 감도 높은 이미지와 영상을 제작하여 콘텐츠의 완성도와 일관성을 강화합니다.
ImageSlide<b>A/B 시안의 세부 요소와 상세한 디벨롭 프로세스 </b>
A/B 시안의 세부 요소와 상세한 디벨롭 프로세스
A/B 두 가지 시안의 화면 구조와 디자인 의도를 토대로 사용자 경험을 반영한 설계 요소를 살펴본 뒤, 그것이 최종 결과물로 발전하는 디벨롭 과정을 단계별로 탐구합니다.
ImageSlide<b>새로운 디지털 경험을 선사하는 메인 영역 개발  </b>
새로운 디지털 경험을 선사하는 메인 영역 개발
기존 메인 탭의 레거시한 정보를 정리하고, 브랜드 경험을 디지털 환경으로 옮겨와 브랜드와 상품, 콘텐츠를 유기적으로 결합한 메인 탭의 고도화 과정을 공유합니다.

2026년에도 지속적인 업데이트 확정.

꾸준히 만나는 최고의 인사이트 그리고 단 하나의 마스터 패키지

플러스엑스가 엄선한 최고의 디자인 프로젝트 리뷰를
2026년에도 변함없이, 플러스엑스답게 전해드리겠습니다.

Plus X가 준비한
4가지 UI 강의를 모두 담은 패키지

UI 디자인 프로세스, UI 디자인 기초, UI 디자인 협업, UI 인터렉션 디자인
4개 강의를 평생 수강 가능한 패키지로 Plus X의 UI 디자인 노하우를 마스터합니다.

Plus X가 일하는 방식을
경험할 수 있는 15가지 실무 사례

플러스엑스의 실무 프로젝트를 바로 옆에서 보는 것처럼 자세하게,
그동안 공개되지 않았던 내부 자료와 다양한 실무 사례들을 공유합니다.

내 프로젝트에 바로 적용 가능한
8가지 UI 템플릿 문서

10년 이상의 UI실무 경험이 담긴 플러스엑스의 내부 템플릿 문서를
바로 활용 가능한 형태로 공유합니다.

연 2회, 업계 최정상 실무진이 전하는
최신 프로젝트 디테일과 디자인 인사이트

연 2회 꾸준히 업데이트 되는 플러스엑스 최신 프로젝트의
프로세스 디테일과 인사이트로 업계 최정상의 사고 방식을 경험하세요.
Summary

UI 디자이너에게 필요한 모든 디테일을 담은 4개의 개별 코스를
실무 마스터 패키지로 한 번에 수강하세요.



We plus experience for your brand.

Plus X (Plus X Creative Partner) 는 브랜드와 소비자가 만나는 모든 접점을 설계하며,
BX, UX/UI, 크리에이티브 테크 전반에 걸친 통합 디자인 솔루션을 제안합니다.


29CM, YG, Adobe, Musinsa, SKT 등과 함께 423개 이상의 프로젝트 진행

iF · Reddot 등 글로벌 디자인 어워드 213개 수상과 Behance Selected 작품 133개 선정

Plus X Share X

최고의 기업들과 성공적인 UI 디자인 프로젝트를 만들어온
Plus X UI 팀의 업무 프로세스를 그대로 공유합니다.

그동안 많은 분들께 저희의 디자인 작업을 공유해왔고 그 과정에서 저희도 성장했습니다.
이번에는 강의를 통해 업무 프로세스를 더 자세히, 더 많은 분들과 나누고자 합니다.

layout-205-image-carousel
layout-205-image-carousel
layout-205-image-carousel
layout-205-image-carousel
layout-205-image-carousel
layout-205-image-carousel
layout-205-image-carousel
layout-205-image-carousel

Instructor
안녕하세요.
Plus X UI 디자인 팀입니다.


플러스엑스 UI 디자인팀은 서비스를 통해
브랜드만의 가치를 사용자 경험으로 만드는 팀으로서
브랜드와 사용자간의 모든 상호작용 요소에 대해
고민하고, 일관성있는 경험을 만드는 것에 집중합니다.

본 강의에서는 플러스엑스의 UI 디자인 프로세스와 노하우,
UI 디자이너에게 필요한 전반적인 내용을 체계적으로 정리해서
저희가 실제로 디자인한 UI 프로젝트 사례를 통해서
최대한 디테일하게 알려드리기 위해 노력했습니다.

일관성있는 브랜드와 사용자 경험을 위해 고민하는 디자이너 분들과
좋은 프로덕트를 만들기 위해 고민하는 모든 분들께
플러스엑스 UI 디자인 팀의 이야기가 도움이 되길 바랍니다.

UI Portfolio

온라인 서비스를 통해 브랜드 경험을 전달하고,
사용자 경험에 감성을 더합니다.


Share How

현직 디자이너, 예비 디자이너분들의
설문조사를 기반으로 준비했습니다.

BX 디자인 준비
ImageSlide
ImageSlide
ImageSlide

Roadmap

UI 디자이너에게 필요한 모든 디테일을 체계적으로 정리해서
하나의 커리큘럼으로 구성했습니다.

BX 패키지 커리큘럼

플러스엑스의 UI 디자인을
Full 프로세스로 경험할 수 있는 가장 합리적인 선택

모든 강의는 개별 강의로 수강하실 수 있습니다.
전체 과정을 한 번에 배우고 싶으신 분들은 본 패키지 강의를 구매하시면 더욱 저렴하게 수강할 수 있습니다.

* 2023년 6월 판매가 기준

Project Case

15개의 실제 UI 디자인 사례들을 디테일하게 살펴보며
최적의 사용자 경험을 만들기 위한 체계적인 방법을 알려드립니다.

  • Part 1. UI 디자인 프로세스

ImageSlide<b><font color=#fff> Case 1   <br>      제안 프로젝트로 알아보는<br> 브랜드 아이덴티티      </b></font>
Case 1
제안 프로젝트로 알아보는
브랜드 아이덴티티

제안 프로젝트를 통해 브랜드를 분석하고, 디자인 원칙을 설정하여 UI 디자인에 녹여내는지 알아봅니다.

ImageSlide<b><font color=#fff> Case 2   <br>      구축 프로젝트로 알아보는<br> UI 디자인 노하우     </b></font>
Case 2
구축 프로젝트로 알아보는
UI 디자인 노하우

실제 구축 디자인을 진행할 때 고려하는 사항과 플러스엑스의 UI 디자인 노하우에 대해 알아봅니다.

ImageSlide<b><font color=#fff> Case 3   <br>     비핸스, 인스타, 자사 웹사이트로<br> 알아보는 PR 디자인 제작      </b></font>
Case 3
비핸스, 인스타, 자사 웹사이트로
알아보는 PR 디자인 제작

비핸스에서 전체 프로젝트 중 90%인 109개의 셀렉을 받은 플러스엑스의 PR 제작 방법에 대해 알아봅니다.

  • Part 2. UI 디자인 기초

ImageSlide<b><font color=#fff> Case 1   <br>      커머스 앱 사례로 보는<br>  해상도 변화     </b></font>
Case 1
커머스 앱 사례로 보는
해상도 변화

디바이스 운영체제에 따라 사용되는 해상도 및 효율적인 화면 베리에이션 작업에 대해 알아봅니다.

ImageSlide<b><font color=#fff> Case 2   <br>     웹/앱 UXUI 실제 구축 사례로<br> 알아보는 해상도 활용     </b></font>
Case 2
웹/앱 UXUI 실제 구축 사례로
알아보는 해상도 활용

프로젝트 특성에 따른 디자인 최적화에 필요한 해상도 설정 및 해상도 테스트 방식을 실무 사례를 통해 소개합니다.

ImageSlide<b><font color=#fff> Case 3   <br>     PC/모바일 웹 사이트 작업 사례로<br> 알아보는 그리드 활용     </b></font>
Case 3
PC/모바일 웹 사이트 작업 사례로
알아보는 그리드 활용

해상도별로 사용되는 그리드가 다른 만큼 사용성을 유지하기 위해 플러스엑스가 그리드를 사용하는 방식에 대해 알아봅니다.

ImageSlide<b><font color=#fff> Case 4   <br>     PC/모바일 웹 사이트 작업 사례로<br> 알아보는 그리드 활용     </b></font>
Case 4
PC/모바일 웹 사이트 작업 사례로
알아보는 그리드 활용

플러스엑스 내부 프로젝트를 통해 새로운 그리드 시스템을 디자인에 어떻게 녹여내었는지 살펴봅니다.

ImageSlide<b><font color=#fff> Case 5   <br>     이커머스 앱 디자인 사례를 통해<br> 알아보는 화면 구조와 구성요소     </b></font>
Case 5
이커머스 앱 디자인 사례를 통해
알아보는 화면 구조와 구성요소

화면 구조를 이루고 있는 구성요소에는 어떤 것들이 있는지에 대해 살펴보고 디자인 스타일 확립에 영향을 미치는 요소에는 어떤 것들이 있는지 알아봅니다.

ImageSlide<b><font color=#fff> Case 6   <br>     웹사이트 UI 구축 사례로 알아보는 구성요소의 활용     </b></font>
Case 6
웹사이트 UI 구축 사례로 알아보는 구성요소의 활용

화면을 구성하는 각 요소들은 어떤 역할로 활용되고 있는지 어떤 컨셉으로 통일성을 갖추고 있는지에 대해 알아봅니다.

  • Part 3. UI 디자인 협업

ImageSlide<b><font color=#fff> Case 1   <br>      프로젝트 사례로 알아보는<br> 플러스엑스의 네이밍 룰     </b></font>
Case 1
프로젝트 사례로 알아보는
플러스엑스의 네이밍 룰

실제 구축 디자인을 진행할 때 고려하는 사항과 플러스엑스의 네이밍 룰에 대해 알아봅니다.

ImageSlide<b><font color=#fff> Case 2   <br>      실제 제작 방법으로 알아보는<br> UI 디자인 가이드     </b></font>
Case 2
실제 제작 방법으로 알아보는
UI 디자인 가이드

플러스엑스의 디자인을 개발자에게 잘 전달해주기 위해서는 어떤 방식으로 UI 디자인 가이드를 제작하고 활용하는지 알아봅니다.

ImageSlide<b><font color=#fff> Case 3   <br>     웹/앱 UXUI 실제 구축 사례로<br> 알아보는 이미지 운영 가이드    </b></font>
Case 3
웹/앱 UXUI 실제 구축 사례로
알아보는 이미지 운영 가이드

실제 구축 프로젝트를 사례로 플러스엑스의 이미지 운영 가이드 제작 방식에 대해 알아봅니다.

  • Part 4. UI 인터랙션 디자인

ImageSlide<b><font color=#fff> Case 1   <br>      다양한 사례를 통해 알아보는 인터랙션 디자인의 기본원리     </b></font>
Case 1
다양한 사례를 통해 알아보는 인터랙션 디자인의 기본원리

실제 구축 디자인을 진행할 때 고려하는 사항과 플러스엑스의 네이밍 룰에 대해 알아봅니다.

ImageSlide<b><font color=#fff> Case 2   <br>      모션에 대한 이해를 기반으로 디자인 프로토타입 제작      </b></font>
Case 2
모션에 대한 이해를 기반으로 디자인 프로토타입 제작

애니메이션에 대한 이해를 바탕으로 실제 디자인 예시를 가지고 프로토타입을 통해 인터랙션을 구현해봅니다.

ImageSlide<b><font color=#fff> Case 3   <br>      인터랙션 가이드 작성법과 실제 개발을 위한 커뮤니케이션 방법     </b></font>
Case 3
인터랙션 가이드 작성법과 실제 개발을 위한 커뮤니케이션 방법

실제 구축 프로젝트를 사례로 플러스엑스의 인터랙션 디자인 가이드 제작 방식에 대해 알아봅니다.


Share All

실제 프로젝트에서 사용하는
8개의 문서 파일을 모두 공유합니다.

플러스엑스에서 10년 이상의 경험을 통해 검증해 온 노하우를 내 실무에 바로 활용해 보세요

ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide

[1+1+1 이벤트 : 9월 24일 쿠폰 2종 자동 발급][쉐어엑스]플러스엑스 UI 실무 마스터 패키지
정가1,236,000
할인 금액(-60%) 747,000
현재 판매가489,000

월 40,750원

* 12개월 무이자 할부 시

Plus X Share X 모든 강의는 한 번 결제로 기간 제한 없이 평생 수강할 수 있습니다.

Curriculum

Part 1.
UI 디자인 프로세스

플러스엑스 UI 디자인에 대한 소개와 제안과 구축 프로세스를 통해 실제로 플러스엑스 UI 디자이너가
어떻게 프로젝트를 진행하는지에 대해 알아보고, 완료된 프로젝트의 PR 방법에 대해 알아봅니다.

  • Chapter1. 플러스엑스 UI 디자인

    플러스엑스 UI 디자인에 대한 소개와 그 동안 진행한 대표 프로젝트에 대해 알아봅니다.

1. Plus X, UI 디자인에 대하여
플러스엑스 UI 디자인에 대한 소개 및 차별점을 알아보고, 추구하는 방향성을 살펴봅니다.
2. Plus X, UI 디자이너
플러스엑스의 UI 디자인팀에 대한 소개와 인재상 및 포트폴리오 제작시 유의할 점에 대해 알아봅니다.
3. Plus X, UI 대표 프로젝트
10년 이상 쌓아온 플러스엑스 UI 디자인의 대표 프로젝트의 뒷 이야기와
플러스엑스가 생각하는 파트너사에 대해 알아 봅니다.
  • Chapter2. 플러스엑스 UI 프로세스

    제안-구축-PR등 플러스엑스 UI 디자이너가 실제로 진행하는 업무들을 알아보고,
    프로젝트 진행 시 중요하게 생각하는 점은 무엇인지에 대해 살펴봅니다.

1. Plus X, UI 디자인에 대하여
UI 디자인의 전반적인 업무 프로세스와 실제 UX맴버들과
어떻게 프로젝트를 진행하는지에 대해 소개합니다.
2. Plus X, UI 제안 프로세스
데스크 리서치에서 부터 아이데이션, 디자인 컨셉 도출, 디자인 시안 작업까지
브랜드 아이덴티티 찾고 UI 디자인에 녹여내어 디자인을 제안하는 방법에 대해 배워봅니다.
3. Plus X, UI 구축 프로세스
일관성있는 사용자 경험을 만들기 위한 구축 프로세스를 알아 보고,
실제 디자인 페이지 작업시 UI 디자이너로서 유의할 점에 대해 알아봅니다.
4. Plus X, PR 디자인
플러스엑스가 PR 디자인을 중요하게 생각하는 이유와
UI 디자인만의 PR 디자인의 노하우를 소개합니다.

Part 2.
UI 디자인 기초

디자인을 시작하기에 앞서, 논리적인 디자인 구축에 필요한 해상도, 그리드와 레이아웃 그리고 구성요소에 대한 기초 지식을 배웁니다.
또한, 각 챕터별 실무 사례를 바탕으로 플러스엑스 UI 디자이너는 프로젝트에서 기초 지식을 어떻게 활용하는지 알아봅니다.

  • Chapter1. UI 디자인 기초 지식

    UI 디자인을 진행하기에 앞서 기초 지식 필요성에 대해 알아봅니다.

1. 기초 지식의 중요성
UI 디자인을 시작하기에 앞서 기초 지식의 중요성과
논리적이고 설득력 있는 디자인을 하기 위해 어떤 기초 지식이 필요한지 살펴봅니다.
  • Chapter2. 해상도

    해상도와 관련된 기본 개념부터 다양한 실제 사례를 통해 플러스엑스가 해상도를 설정하는 방법에 대해 알아봅니다.

1. 사용자 환경의 이해
해상도에 대한 가장 기본적인 개념을 시작으로 관련 용어와 개념에 대해 알아보고,
사용자들이 가진 환경에 대해 알아봅니다.
2. 작업 환경에 대한 이해
변화하는 사용자 환경에 대응하기 위해 UI 디자이너가 알아두어야 하는 작업 환경에 대해 알아보고,
UI 디자이너라면 생각해야 하는 다양한 해상도 기준과 활용 방식에 대해 알아봅니다.
3. Plus X와 해상도
다양한 시각에서 프로젝트를 바라보고 구체적인 해상도 방향성을 정하여
파트너사의 서비스 니즈에 맞는 플러스엑스의 해상도 설정 프로세스를 소개합니다.
  • Chapter3. 그리드와 레이아웃

    그리드와 레이아웃의 개념적 접근부터 활용까지 이해하고, 플러스엑스의 작업에서 활용한 그리드에 대해 알아봅니다.

1. 그리드에 대한 이해
그리드 시스템을 이해하기 위한 기본 용어들과 해상도 크기에 따른 그리드 활용 방법과
8 포인트 그리드 시스템과 같은 전반적인 그리드 시스템 개념에 대해 이해합니다.
2. 레이아웃에 대한 이해
그리드 개념을 바탕으로 레이아웃을 생성하고, 게슈탈트 이론에 포함된 5가지 법칙을 토대로
서비스가 추구하는 사용성에 맞는 레이아웃을 생성할 수 있는 시각을 길러봅니다.
3. Plus X와 그리드
고객사 서비스의 목적과 특성에 따른 플러스엑스의 그리드 활용 방식과
실무에서 사용한 그리드에 대해 소개합니다.
  • Chapter4. UI 구조와 구성요소

    화면을 이루는 구성요소의 기능과 역할 그리고 요소별 디자인 특징에 대해 알아봅니다.

1. UI 구조의 이해
화면 구성요소들을 그룹핑해주는 가장 기본적인 UI 구조에 대해 알아보고,
각 파트를 이루고 있는 대표적인 구성요소들에 대해 알아봅니다.
2. 구성요소의 이해
설계에서 요구하는 기능들을 익숙한 사용성을 갖춘 창의적인 요소로 그려내기 위해
알아두어야 하는 기본요소의 활용 방법과 구성요소의 특징들에 대해 살펴봅니다.
3. Plus X와 구성요소
플러스엑스 UI 팀에서 진행한 프로젝트 중 특징적인 구축 사례를 통해
서비스 화면 구조 및 구성요소에 대해 분석해봅니다.

Part 3.
UI 디자인 협업

수많은 기업과의 협업을 통해서 쌓아온 가장 효율적인 UI 디자인 워크플로우를
네이밍 룰, UI 개발 가이드, 이미지 운영 가이드, QA 등 실제적인 방법과 예시를 통해 공유합니다.

  • Chapter1. 협업의 중요성

    협업에 대한 개념을 이해하고 플러스엑스가 생각하는 협업의 가치와 중요성에 대해 살펴봅니다.

1. 협업의 가치
플러스엑스의 프로젝트 진행 과정을 바탕으로 협업에 대한 개념을 이해하고
가치와 중요성에 대해 알아봅니다.
2. 협업을 잘하기 위한 방법
UI 디자이너들이 기획자, 개발자와
협업을 잘하기 위한 방법은 무엇이 있는지 알아봅니다.
  • Chapter2. Plus X UI 디자이너들의 협업

    플러스엑스 UI 디자이너들이 어떤 방식으로 협업을 하는지
    네이밍 룰, 협업 툴, 디자인 가이드, QA 등 플러스엑스의 작업 방식을 통해 알아봅니다.

1. 플러스엑스의 네이밍 룰
효율적인 협업을 하기 위해서 플러스엑스에서는 어떠한 규칙을 바탕으로 협업을 하는지
플러스엑스의 Folder, File, Layer, Asset의 네이밍 룰을 소개합니다.
2. 협업 툴
플러스엑스의 UI 디자이너들은 어떠한 툴을 사용하고 활용하여 협업을 진행하는지
커뮤니케이션, 업무관리, 디자인 툴로 나눠 알아봅니다.
3. UI 디자인 가이드
디자인 가이드의 개념과 디자인 가이드 제작 시 고려해야할 점을 알아보며,
플러스엑스에서는 UI 디자인 가이드를 어떤 방식으로 제작을 하고 활용을 하여
협업을 하는지 알아봅니다.
4. QA: Quality Assurance
QA의 중요성과 진행 시 고려해야할 점을 바탕으로 플러스엑스에서는
QA를 어떤 방식으로 진행하고 협업을 하는지 자세히 알아봅니다.
  • Chapter3. 프로젝트 완료 이후의 협업

    플러스엑스에서는 프로젝트 완료 이후에 더 다양하고 많은 파트너사와 협업을 하기 위해 무엇을 하는지 알아봅니다.

1. 프로젝트 완료 이후의 협업
플러스엑스에서는 다양한 파트너사와 협업을 하기 위해
프로젝트 완료 이후에 무엇을 하는지 알아봅니다.

Part 4.
UI 인터랙션 디자인

플러스엑스의 실제 사례를 통해 좋은 인터랙션에 대한 기준을 세우고 Figma, XD를 활용해 직접 만들어 봅니다.
구현을 위한 가이드를 제작하고 커뮤니케이션하는 방법까지 알아봅니다.

  • Chapter1. 인터랙션 디자인 이해

    인터랙션 디자인이란 무엇이고, 좋은 인터랙션 디자인에 대한 기준을 제시합니다.

1. 인터랙션 디자인이란?
인터랙션 디자인에 대한 개념, 디자이너의 문제 해결 방식, 문제 접근 방법,
그리고 플러스엑스에서는 어떻게 인터랙션에 대해 접근하는지 알아봅니다.
2. 인터랙션 디자인 구성요소
인터랙션을 구성하는 요소에 대해 알아보고
모션, 공간, 시간 등에 대해 알아봅니다.
3. 좋은 인터랙션 디자인의 기준
좋은 인터랙션 디자인이란 무엇인지
플러스엑스만의 기준을 세우고 예시를 통해 알아봅니다.
  • Chapter2. 인터랙션 디자인 방법

    개발환경에 대한 기초적인 이해를 바탕으로 인터랙션의 기초 원리와 디자인 진행 시 접근하는 방법 등을 알아보고 실습해 봅니다.

1. 애니메이션에 대한 이해
인터랙션 디자인에서 중요하게 여겨지는 UI 애니메이션에 대해
알아보고 이를 통한 인터랙션 디자인 기본원리를 살펴봅니다.
2. 프로토타입을 통한 디자인 테스트
실무 사례를 통한 프로토타입의 필요성을 알아보고
툴을 이용해 프로토타입 디자인을 함께 제작해봅니다.
  • Chapter 3. 인터랙션 디자인 구현 방법

    실제 개발 구현 시, 커뮤니케이션 및 가이드 제작 방법, 애니메이션 소스 사용법 및 제작법 등 실제 구축단계에 필요한 것에 대해 알아봅니다.

1. 인터랙션 디자인 개발
인터랙션 디자인 시 타 부서와 커뮤니케이션하는 방법에 대해 알아보고
이를 토대로 디자인 개발 가이드 작성법을 알아봅니다.
2. 애니메이션 소스 활용
애니메이션 소스를 활용하여 마이크로인터랙션 소스 제작 및 적용 방법을 알아보고
이를 실제 개발 환경에 맞게 추출하고 사용하는 방법을 알아봅니다.

Part 5.
NEW Plus X 프로젝트 리뷰

플러스엑스의 UI 프로젝트 디테일을 연 2회 꾸준한 업데이트로 공유합니다.
디테일한 프로젝트 리뷰와 그 안에서 전해드리는 디자인 인사이트로 업계 최정상의 사고 방식을 경험하세요.

  • 프로젝트 리뷰 1 : 국내 대형 패션 커머스 플랫폼

    24-25 Award Wins 4관왕에 빛나는, 플러스엑스 최신 프로젝트 설계 여정의 전반을 상세하게 알아봅니다.

1. UX 프로젝트 리뷰 : 국내 대형 패션 커머스 플랫폼
다양한 방법론을 통합해 UX 개선 포인트를 구조화하는 사고 방식을 학습하고,
브랜드의 새로운 인상을 사용자 경험에 녹여내는 전략적인 경험 설계 과정 전반을 공유합니다.
2. UI 프로젝트 리뷰 : 국내 대형 패션 커머스 플랫폼
새롭게 정립한 브랜드의 인상과 전략적인 UX 방향성을 유기적으로 결합해
일관되고 차별화된 브랜드 경험을 정의하는 UI 디자인 과정을 상세하게 공유합니다.

Tool

Figma, XD 툴을 활용한 프로토타이핑 시연을 진행합니다.

· [Part 4. UI 인터랙션 디자인] 파트의 일부 클립에
프로토타이핑 시연이 포함됩니다.

· Adobe XD, Figma 설치 후 따라하면서 수강하시길 권장하나, 따라하지 않고 영상만으로 학습하셔도 인터랙션 디자인에 대해 
이해하시는 데 무리가 없습니다.

· 본 강의에서는 툴을 제공하지 않습니다.

· XD와 Figma는 2023년 4월 기준 최신 버전으로 진행됩니다.

· Figma 무료 버전으로 수강 가능합니다.

· 시연은 Mac으로 진행됩니다. 이외의 환경에서도 수강 가능하나
일부 단축키 등이 다를 수 있습니다.

For You

이런 분들께 추천합니다.


Interview
어떤 마음으로
이 강의를 준비했나요?
수년간 다양한 파트너사와 프로젝트를 진행하면서, 그 동안 다듬고 정리해 온 플러스엑스 UI 디자인만의 업무 프로세스와 노하우를 주니어분들의 입장에서 효과적으로 학습하실 수 있게 담으려고 노력했습니다.

커리큘럼을
어떻게 만들었나요?
단순히 방법론적으로 접근하는 것이 아닌 실무에서 저희는 UI 디자인을 어떻게 진행하는지, 디자인 관점에서 실제 화면을 제작할 때 꼭 필요한 내용들을 위주로 강의를 제작했습니다. 수강생분들이 UI디자인을 진행하면서 생겼던 고민들을 해소할 수 있었으면 좋겠습니다.

이 강의를 듣고 나서 수강생들이
무엇을 얻어갈 수 있을까요?
플러스엑스의 UI 디자인팀이 어떻게 프로젝트를 진행하고 무엇을 중요하게 생각하는지 최대한 디테일하게 많은 내용을 공유드리고자 노력하였습니다. 플러스엑스가 파트너사와의 협업을 통해 보다 훌륭한 결과물을 만들어 내듯이 이 강의를 통해 수강생 여러분들이 한단계 성장하는 계기가 되었으면 좋겠습니다.
Recommendation