하이미디어아카데미 인재개발원

국가기간

영상(프리미어&애펙)을 활용한 웹&앱 UI/UX디자인

본 과정은 다양한 종류의 디지털 환경에서 제공되는 스마트 기기에 적용 가능한 서비스에 대하여 사용자 경험과 니즈를 분석하여 서비스와 콘텐츠를 사용 목적과 용도에 맞게 최적화하여 정보 설계, UI 설계, 화면 설계 등을 하는 능력을 함양시킵니다.

개강일 :

평일5월 19일

교육기간 : 총

95일

모집인원 : 총

22명

누구나 무한한 창의력을 발휘할 수 있는 PHOTOSHOP: Photoshop은 사진 편집 및 합성부터 디지털 페인팅,
애니메이션, 그래픽 디자인에 이르기까지 거의 모든
크리에이티브 프로젝트에서 없어서는 안 될 프로그램으로
일상적인 편집 작업에서 크리에이티브 한 아이디어가
떠오르는 즉시 자유롭게 표현할 수 있습니다.

세상을 디자인하다!: 포스터, 패키지, 배너, 웹 사이트 등 대부분 디자인 프로젝트가 Photoshop을 통해 탄생합니다. 사진과 텍스트를 결합하여 새로운 이미지를 만들 수 있고, 레이어와 마스크를 제한 없이 사용할 수 있으며, 스타일러스와 터치로 제어하는 브러시로 페인팅할 수 있도록 교육합니다.

디자이너를 꿈꾸고 있다면!: 혁신적인 신기능을 탑재하고, 어도비의 이미지레디(ImageReady) 등과 같은 다른 프로그램과의 연계도 강화하는 등 그래픽디자이너와 포토그래퍼, 웹디자이너, 비디오와 필름 제작자 등이 최고 품질의 화상을 효율적으로 제작, 관리할 수 있도록 기능이 강화된 프로그램을 교육합니다.

ILLUSTRATOR를 통한 다양한 작품세계: 일러스트 디자인, 캐릭터 디자인, CI, 인쇄/출판, 편집디자인,
제품디자인, 웹디자인 등 다양한 분야에서 폭넓게 사용되고
있으며, 기술이 발달함에 따라 활용 범위도 넓어져가고
있습니다. 벡터 그래픽 소프트웨어의 대표 프로그램인 일러스트는 디자인 업무의 폭을 넓혀 나가기 위한 필수 코스입니다.

폭넓은 디자인 가능한 능력 배양: 기본 사용법을 정확하게 익히고, 다양한 예제를 통해 디자인 실무활용도를 높여 일러스트, 캐릭터, CI, 인쇄/출판, 편집, 웹 등의 다양한 현장에서 사용할 수 있는 일러스트 디자인 능력을 키울 수 있습니다.

크리에이티브 한 타이포 그래피: 문자 툴을 사용하여 로고 등을 제작할 수 있어서 웹 사이트 같은 디자인 초안을 생성할 수 있습니다. 다양한 스타일로 편집할 수 있어 메시지를 효과적으로 전달하기에 최적의 타이포그래피 디자인을 만들 수 있습니다.

피그마와 개발 환경 이해하기: 피그마는 개발자가 만든 툴입니다. UI 디자인 스케치, 프로토타이핑 및 협업을 위한 디자인 도구 Figma(피그마)의 기본적인 사용법과 실무 활용법에 대해 교육합니다. 개발 환경에 웹퍼블리싱 적합하게 구현되다 보니 그 특성을 고스란히 담고 있습니다. 디자이너와 개발자의 소통을 도와주는 기능이 많습니다. 개발자가 참조할 수 있는 정보를 주는 ‘개발 툴바’가 있으며, 마우스 툴바로도 수치값을 확인할 수 있어 가이드라인이 없어도 빠른 작업이 가능합니다. CSS를 이해하고 계시다면 피그마를 좀 더 잘 사용하실 수 있습니다.

개발자와 소통하는 디자이너: 레이어, 버튼, 컴포넌트, 오토 레이아웃 등 다양한 디자인 리소스의 네이밍을 개발 환경에 맞게 만들어서 개발자에 전달합니다. 모바일 앱은 운영체제 및 디바이스별로 다양한 해상도 및 밀도를 가지고 있습니다. 그리고 이렇게 만들어진 이미지는 개발자에게 적합하게 전달되어 원활히 개발될 수 있는 점이 중요합니다. 피그마는 디자인 산출물 추출 및 전달을 원활히 할 수 있도록 Export를 체계적으로 할 수 있으며, Inspect 탭을 통해 개발자가 참조할 수 있는 코드 및 지정 이미지를 다운로드 할 수 있게 합니다

디자인 프로세스를 반영한 사용성과 인터페이스: UI/UX 디자인은 이미지 디자인으로 끝나는 것이 아니라 지속적으로 하나의 플로우 및 태스크를 완수하기 위한 시스템을 기획 설계하는 개념을 기반으로 화면이 디자인됩니다. 따라서 이미지만을 보정하기 위한 프로그램이 아닌, 디지털 프로덕트(모바일 앱, 웹 등)의 워크 프로세스 및 고유의 디자인 프로세스를 감안한 기능 및 인터페이스로 구성된 전문 UI/UX 디자인 프로그램이 필요하며, 피그마는 이러한 점을 잘 파악하여 실무 중심의 워크 프로세스에 적합하게 설계된 프로그램입니다.

피그마의 장점!: 웹서비스이기 때문에 다운로드 없이 사용이 가능하고 운영체제에 구애받지않습니다. 피그마는 웹 기반 프로그램으로서 온라인 실시간 작업이 이루어진다는 장점이 있습니다. 따라서 구글에서 문서나 프레젠테이션을 공유해서 실시간 작업하는 것과 같은 개념으로 기획 디자인 설계 등이 기본적으로 공유됩니다. 또한 팀 라이브러리를 활용하면 디자인 컴포넌트 관리 및 효율적인 리소스 매니지먼트도 가능합니다.

UI/ UX에 대한 이해를 바탕으로 한 실무 중심의 웹퍼블리싱: 사용자의 요구에 따라 빠르고 다양하게 변화하는 웹상에서
UI/ UX를 이해하고, 웹퍼블리싱 기본 언어 및 현장에서
사용되는 다양한 마크업을 중심으로 페이지를 설계할 수
있도록 기술을 양성하는 과정입니다.

차세대 웹 서비스의 언어, HTML5: HTML5.0은 웹개발 생산성 향상 및 차세대 웹 어플리케이션 플랫폼으로 대부분의 웹 브라우저들은 HTML5와 호환이 되도록 지원하고 데스크탑뿐만 아니라 반응형 웹, 어플리케이션, 키오스크 화면 등의 제작에도 사용됨으로써 차세대 웹 서비스 플랫폼으로 중요한 언어입니다.

웹표준 퍼블리싱을 구현하다!: 웹 접근성의 개념과 웹 표준 문법을 이해하고 다양하고 유용한 실무 스킬과 팁을 활용한 웹사이트를 제작하며, HTML+CSS+JAVA Script로 웹 콘텐츠의 구조와 표현, 동작을 명확하게 분석하고, 웹표준을 준수하여 웹사이트를 디자인하고, 사용자와의 상호작용을 향상시킬 수 있는 기술력을 양성하는 과정입니다.

트렌드를 반영한 철저한 실무 위주의 교육!: 영상편집 및 동영상 제작에 있어서 반드시 필요한 프리미어와 애프터 이펙트를 활용하여 다양한 영상 콘텐츠 제작이 가능한 실무자 양성을 목표로 합니다.

강력한 동영상 편집 툴, 프리미어: 영화, 광고, 유튜버 등 다양한 분야의 영상 제작에 광범위하게 활용되는 프로그램입니다. 영상 편집 과정을 간편하고 효율적으로 셋업 할 수 있고 작업 방식 또한 편리하고 직관적입니다. 어도비 애프터 이펙트와 호환하여 무궁무진한 결과물을 제작할 수 있는 강력한 툴입니다.

임팩트 있는 영상 제작 툴, 애프터 이펙트: 애니메이션, CG 제작 등 영상을 생동감 있게 만들어주는 프로그램입니다. 기본 제공되는 다양한 애니메이션은 물론 원하는 모션을 디테일하게 표현할 수 있습니다. 또한 영상에서 원하지 않는 요소를 제거하거나 3D 개체를 제작하는 등 상상력을 현실로 구현할 수 있는 강력한 툴입니다.

01
콘텐츠 사례 분석

02
플랫폼 별
광고 컨셉 기획

03
디자인
제작 구성

04
광고제작

05
광고 실행하기

과정을 수료하면 어떠한 작업을 하는지 궁금한가요?
수강생분들의 포트폴리오를 소개합니다.

TAMBURINS UI Interaction

김ㅇ지

SUBWAY - UX/UI Moblie App

권ㅇ윤

AWA Exhibition Mobile Application UX/UI Design

정ㅇ하

NETFLIX - UX/UI Concept

류ㅇ은

BOOSTED Mobile App - UX/UI Concept

서ㅇ미

Michelin Guide UX/UI Mobile Concept

서ㅇ하

Aesop Web & Mobile App UIUX Design

박ㅇ진

Airbnb Mobile App - UX/UI Concept

변ㅇ영

Dreamworks UX/UI App Design

권ㅇ지

ArtMap UX/UI Concept

최ㅇ영

커리큘럼

사용자 경험 조사	서비스·경험 디자인 환경조사 서비스·경험 디자인 관찰조사
프로토타입 개발	프로토타입 기초 데이터 수집 및 스케치 프로토타입 제작 및 사용성 테스트 서비스 경험 디자인 시나리오 개발
디지털디자인	시각디자인 리서치 조사 시각디자인 리서치 분석 시안 디자인 개발 기초 시안 디자인 개발 응용 시안 디자인 개발 심화 디자인 구성요소 설계 디자인 구성요소 응용 디지털디자인 프로젝트 설계 디자인 구성요소 제작
UI/UX디자인	스마트 문화 앱 UX 설계 스마트 문화 앱 UI 디자인
프로젝트 완료	디지털디자인 사후관리 프로젝트 완료 최종보고 프로젝트 완료 결과 보고서 작성 프로젝트 완료 자료 정리
영상편집	프리미어 프로 애프터이펙트
온라인 콘텐츠	시각디자인의 이해 색채디자인 기획 배색(색채디자인) 아이덴티티 디자인 개발 레이아웃 디자인 디자인 아이디어 발상 기초