안녕하세요. 웹과 모바일 UI/UX, 브랜딩, 패키지 등 다방면으로 활동하고 있는 디자이너 오정복입니다. 여러분들이 배우실 UI/UX 디자인은 웹디자인 안에 자리 잡고 있는 내용입니다.

UI/UX란 무엇인가

UI/UX는 무엇일까요? UI는 유저 인터페이스의 약자며, UX는 유저 익스피리언스의 약자입니다. 사용자가 직관적으로 웹사이트의 다른 페이지로 이동하기 쉽게 만들어 주는 것을 UI, 그것을 행하면서 얻는 경험을 UX라고 쉽게 이야기 할 수 있습니다.

UI를 통해 버튼을 누르거나 마우스를 가져가거나 하는 행동들이 모여 다른 개체에서 동일하게 작용하겠구나 하는 것이 UX라는 것이죠. 웹디자인은 크리에이티브한 작업이지만 예술적인 부분보다는 인터페이스를 만드는 기술과 디자인을 접목시켜 사용자가 좀 더 효과적이고 편리하게 이용할 수 있도록 만드는 상업적 결과물입니다.

UI 디자인은 그러한 부분에서 사용자에게 조금 더 쉽고 간편하게 제공되어야 합니다.

합리적인 경험을 위한 인터페이스

웹사이트가 추상적인 예술작품처럼 무엇이 무엇이고 ? 어떤게 어떤것인지 모르게 만들면 안타까운 일들이 일어날 겁니다. 그러니 UI는 일관성과 편리성과 사용자 수준 등에 맞게 레이아웃을 구성하고, 폰트, 컬러, 애니매이션 효과 등으로 방향을 알려줘야 하죠.

그러한 과정을 거처 합리적인 경험(UX)를 할때 좋은 웹사이트가 탄생되게 됩니다!

그래서 이번 클래스에서는 웹과 모바일 UI/UX에 강력한 기능을 제공하는 어도비XD 툴에 대한 숙련도를 높여 완벽한 경험을 위한 디자인을 알려드리겠습니다.

STEP 1. 기본기 익히기

제일 먼저 어도비 XD 홈 화면과 작업창을 살펴보며 기본기를 익혀요. 웹과 모바일의 해상도부터 웹디자인 전에 꼭 알아두어야 할 레이아웃, 폰트 등에 대해 차근차근 알려드릴게요.

STEP 2. 필요한 구성요소 디자인하기

웹사이트에 꼭 필요한 메뉴를 디자인해 볼 거예요. 상단 메뉴부터 하단 메뉴까지! 또한 서브 메뉴는 물론 문의하기 페이지까지 다뤄봅니다.

STEP 3. 다양한 인터렉션 디자인

웹을 생기있게 만들어주는 다양한 디자인과 인터렉션 기법을 배웁니다. 첫인상을 움직이는 인트로 화면을 만들고, 뉴스 컨텐츠에 주로 적용되는 스크롤하면 나타나는 효과, 오버레이 기능으로 열리는 사이드 메뉴 등을 만들어봐요!

STEP 4. 서체와 라인을 이용해 감각적인 웹 디자인

매력적인 서체와 깔끔한 라인을 이용해 감각적인 웹 디자인을 하고, 슬라이드되는 인터렉션까지 해봅니다.

STEP 5. 원스크롤 방식의 웹사이트 디자인

원스롤 방식의 웹사이트를 만들어봐요. 하이피델리티로 가는 방법과 모바일 버전으로 디자인하기까지 모두 담았습니다.

STEP 6. 다양한 컨셉의 디자인

지금까지 익힌 것들을 활용해 뷰티 브랜드 컨셉의 감각적인 웹사이트와 화이트 컨셉의 뮤직 앱을 디자인해볼게요. 화려한 인터렉션 기법을 활용하면 더욱 완벽한 디자인을 할 수 있을 거예요!

하이피델리티 디자인을 위해

실무에서 사용하는 실제 UI/UX 를 알려드리니 엄청난 도움이 될 거예요. 큰 틀부터 디테일한 것까지 놓치지 마시고 많이 얻어가셨으면 좋겠습니다!