UIUX 관련글 정리

UIUX 디자인 공부 순서에 대해 정리했습니다. 웹, 앱 등을 제작할 때 알아두면 논리적인, 근거가 있는 디자인을 할 수 있습니다. 더이상 맨땅에 헤딩하는 디자인이 지겹다면, 디자인을 공부하고 싶다면 꼭 읽어보시기 바랍니다.

 

 

무슨 일이든 순서를 알면, 그 일을 전체적으로 파악할 수 있습니다. 책에서도 목차가 있어서 어떤 내용이 있는지 알 수 있듯이, UIUX 디자인도 순서가 있습니다.

 

흔히 미술, 디자인을 공부하려면 정해진 방법이 없다고 생각할 수 있습니다. 1+1=2와 같이 정해진 수식으로 이루어지는 분야가 아니기 때문에 다양한 것들을 보고, 만들어보면서 자신만의 방법론이 생기기 때문입니다.

 

그러나 기본적으로 알아야할 것들은 분명 있습니다.

 

여기서 우리가 생각해야할 것은 단지 시각적으로 표현하는 디자인, 예를 들면 어떤 프로그램을 이용해서 버튼을 만드는 법을 안다든지 하는것은 상당히 위험한 공부 방법이라는 것입니다.

 

디자인이라는 말은 심미적으로 아름다운 것을 표현하는 것을 의미하기도 하지만, 설계라는 의미도 가지고 있습니다.

 

당장 표현을 하는 것도 중요하지만, 그 원리와 이유를 알지 못하면 의도한 디자인을 만들 수 없는 수박 겉핥기에 불과하게 됩니다.

 

따라서 이 글에서는 기본 개념, 논리적 근거, 설계, 표현까지  UIUX 디자인을 공부하기 위해 꼭 알아야할 것들을 소개해보겠습니다.

 

※ 이것 역시 정답이 아니며 제 나름대로 정리한 개인적인 생각이니, 다른 의견이 있다면 댓글로 피드백 부탁드리겠습니다!

 

 

 

1. 조형요소와 조형 원리 알기

 

웹디자인도 디자인이며 디자인은 미술 분야에 속합니다. 따라서 조형에 대한 기본적인 지식이 필요합니다.

 

2D든 3D든 우리가 무언가를 시각적으로 표현하려고 한다면 조형의 원리를 꼭 알아야합니다.

 

점, 선, 면으로 이루어진 조형 요소와 그것들이 어우러지면서 나타나는 조형 원리에 대한 이해가 필요합니다. 외우거나 할 필요는 없고, 그렇구나 하고 넘어가며 무의식적으로 떠올릴 수 있을 정도면 됩니다.

 

조형 요소와 조형 원리

 

이 중에서도 색은 매우 효과적인 조형 원리인데, 기본적인 배색 원리와 방법을 확인해보시면 쉽게 배색을 하실 수 있으실 겁니다.

 

색 배색을 쉽고 효과적으로하는 방법

 

 

여기까지 알면, 1차원적으로 다른 사람의 디자인을 벤치마킹하면서 본능적으로(?) 은연중에 느낌적으로(?) 디자인이 가능합니다.

 

그러나 좋은 디자인이 왜 좋은지, 논리적인 근거가 없이 그저 무한한 시안 작업을 하며 운에 맡기는 식으로 디자인을 하기 때문에 효율적이지 않습니다.

 

시안 지옥에 빠지지 않으려면, 타인에게 디자인 전문가로서 왜 이렇게 디자인을 했는지 그 의도를 논리적으로 설명할 수 있어야합니다.

 

 

 

2. UIUX에 대한 개념, 기초 지식 알기

 

웹이든 앱이든, 본인이 그 서비스에서 어떤 일을 하고 있는지 생각보다 모르는 분들이 많습니다.

 

UI가 무엇이고, UX가 무엇인지, UX를 디자인한다는 것은 무엇인지 그 특성을 아는 것 만으로도 엉뚱한 시안을 내지 않을 수 있습니다.

 

 

현재 우리가 사용하는 UI가 어디에서 왔는지, 어떤 특성을 가지는지 이해할 수 있습니다.

 

인터페이스와 UI의 종류

 

 

좋은 UI의 기준이 무엇인지, 객관적인 체크리스트를 확인해볼 수 있습니다.

 

UI를 제작할 때 고려할 점 15가지

 

어렴풋하게 알던 UX가 무엇인지, UX를 디자인한다는 것은 무엇인지 정확하게 이해할 수 있습니다.

 

 

UX와 UX 디자인 개념 이해하기

 

 

 

3. UIUX 디자인 프로세스 알기

 

UIUX에 대한 개념을 알았다고 해서 당장 디자인 작업을 할 때 적용할 수 있는 것은 많지 않습니다. 말 그대로 개념이기 때문에, 일반론이며 지침입니다.

 

이제 그 개념을 적용하기 위해서, 구체적으로 어떤 순서와 방법으로 디자인을 하면 좋을지 알아야 합니다.

 

UX를 디자인한다는 것에는 UI를 디자인한다는 것도 포함되어 있습니다. 따라서 UX 디자인 프로세스를 알면 자연히 UI를 어떻게 디자인해야할지 인사이트를 얻을 수 있습니다.

 

 

※ 구체적으로 UI 요소를 어떤 순서와 방법으로 디자인해야하는지는 글 아래부분에 있습니다. 이러한 것은 지금 단계에서는 중요하지 않습니다. 아무리 잘 만든 UI라고 해도, 서비스의 목적과 맞지 않으면 소용이 없기 때문입니다. 

 

 

시장조사부터 프로토타입까지 제품 개발의 전체 과정을 파악할 수 있습니다.

 

또한 웹, 앱, 소프트웨어, 게임 등의 제품을 만들 때 모두 통용되는 개발 방법론을 알 수 있습니다.

 

UX 디자인 프로세스(순서와 방법)

 

위의 글은 전체적인 맥락과 개발하는 과정이 어떠한지를 알 수 있지만, 구체적인 방법을 쓰지는 않았습니다.

 

 

 

구체적인 UIUX 디자인 프로세스에 대해서는 각 단계마다 정리해두었습니다.

 

UIUX 디자인 프로세스를 크게 나눠보면 아래와 같이 나뉩니다.

 

• 리서치
• 모델링
• 설계
• 제작

 

많은 디자이너분들이 이 과정에서 '제작'만을 담당했을 확률이 높다고 생각합니다. 아래에 소개해드릴 내용들은 기획자가 하는 것이 아니냐고 하실수도 있습니다.

 

그러나 이유있는 디자인을 만들기 위해서는 이러한 바탕을 꼭 알아야합니다. 기획자가 모든 것을 알아야하긴 하지만, 디자인을 어떻게 해야할지까지 알 수는 없습니다.

 

때문에 디자이너도 기획자와 마찬가지로 서비스 제작의 근거를 알아야하는 것이 맞다고 생각합니다.

 

 

 

4. 디자인 리서치, 모델링

 

디자인 리서치를 하는 방법에 대해 알 수 있습니다.

 

UIUX 디자인 리서치 방법

 

리서치를 해서 얻은 데이터를 가지고, '어떤 서비스를 만들것이다'라는 모델을 세우는 방법을 알 수 있습니다.

 

 

UIUX 모델링 기법 4가지

 

아이디어 도출은 모델링을 기반으로, 좀 더 시각적으로 데이터를 정리해서 한눈에 파악하기 쉽게 하고 보완점을 찾는 과정입니다.

 

UIUX 아이디어 도출 방법 3가지

 

여기까지 알게 되면, 데이터에 기반해서 디자인을 할 수 있기 때문에 디자인을 시작할 때 논리적인 근거를 얻을 수 있습니다.

 

 

 

5. 디자인 설계

 

그럼 이제 그 근거를 가지고 설계를 할 수 있습니다.

 

설계는 크게 2가지로 나뉩니다.

 

• 작업자간에 공유와 데이터 정리를 위한 설계 과정 : 사용자 시나리오, 스토리 보드, 정보 구조도
• 그래픽 프로그램을 이용해 화면을 구성하기 위한 설계 과정 : 와이어 프레임, 프로토타입

모델링에서 이미 서비스가 향하는 방향이 명확하다면 바로 화면을 설계해도 괜찮습니다.

 

 

하지만 목표점을 좀 더 명확하게 정리하고, 작업자간 공유를 원한다면 사용자 시나리오와 스토리보드를 작성해보는 것이 좋습니다.

 

사용자 시나리오, 스토리 보드 수행 방법

 

이후에는 추출된 정보를 바탕으로 정보의 구조를 체계적으로 정리할 수 있습니다.

 

메뉴 트리, 정보구조도 작성 방법

 

플로우 차트는 서비스의 전체 흐름을 논리적으로 파악하는데에 아주 효과적인 방법입니다.

 

플로우 차트 만드는 방법

 

여기까지는 문서 작성 프로그램이나 파워포인트로도 작성이 가능하나, 이후에 실제 화면을 설계하는 것은 관련된 그래픽 프로그램을 사용하는 것이 좋습니다.

 

 

6. 관련 프로그램 사용법

 

이제 직접 화면 단위로 디자인을 해야하는데, 그러려면 관련된 프로그램의 사용법을 알 필요가 있습니다.

 

현업에서 많이 사용하는 프로토타이핑 툴로는 다음과 같은 프로그램이 있습니다.

 

• 구글 스케치업
• 어도비 XD
• 피그마

 

이 중에서 피그마가 다른 프로그램을 압도할 만큼의 기능과 편의성을 가지고 있습니다. 다른 프로그램을 이용하던 사람들이 대부분 피그마로 갈아타는 추세이기 때문에, 피그마 사용법을 익히시기를 추천드립니다.

 

피그마 사용법 기초 튜토리얼!(가입부터 버튼 만들기까지)

 

그러나 그래픽 프로그램을 잘 다루는 것은 디자인을 잘 하는 것과 다릅니다. 프로그램을 잘 다루는 것 또한 필요한 능력이지만, 도구는 어디까지나 잘 활용해서 원하는 결과물을 내는 것에 목적이 있음을 기억해주세요.

 

사담이지만 사실 제가 UIUX 디자인을 이렇게 공부하게 된 계기도, 피그마와 관련된 글을 쓰다가 디자인 소양이 없는 상태로 단순히 툴 사용법을 적어서는 이해되는 글을 쓰기가 어렵다는 한계가 있었기 때문에 기본으로 돌아온 것입니다.

 

어떤 일이든 결국 기본이 가장 중요하게 됩니다. 그러니까 여러분들은 저처럼 두번 일하지 마시고, 당장 프로그램 사용법을 익히기보다는 차근차근 순차적으로 익히는 것을 추천드리겠습니다.

 

 

7. 화면 설계

 

이제 드디어 프로그램을 켜서 작업을 하는 단계까지 왔습니다.

 

복잡한건 누구나 싫어하고, 당장 프로그램 켜서 디자인을 하고 싶을텐데 지루하고 어려운 과정을 지나오신 분들께 정말 수고 많으셨다고 말씀드리고 싶습니다.

 

 

화면 설계 작업은 와이어 프레임으로 시작할 수 있습니다. 또한 와이어 프레임에 플로우를 더한 와이어 플로우 차트르르 이용하면 효과적인 프로토타입 테스트와 디벨롭을 반복해 완성까지 다다를 수 있습니다.

 

와이어 프레임 만드는 방법, 순서

 

핵심은 밑그림 정도로 시작해서, 계속 테스트하며 디벨롭하는 것입니다.

 

 

 

 

이 밖에 알아두면 좋은 정보들도 확인해보시면, 구현이 가능한 디자인을 할 가능성이 높아지고 시행착오가 훨씬 덜 할 것입니다.

 

팁 1 ) 디자인 트렌드, 모바일 환경 알기

 

본격적으로 화면을 설계하기 전에, 트렌드와 모바일 환경을 이해하면 시행착오를 줄일 수 있습니다.

 

 

최신 디자인 트렌드는 무엇인지 알아보면서, 래퍼런스를 수집할 때 수고를 덜 수 있습니다.

 

UIUX 디자인 트렌드 9가지

 

또한 디자인을 할 때 터치 영역 등의 모바일 환경을 알면, 불필요한 이슈나 오류를 줄일 수 있습니다.

 

모바일 콘텐츠를 제작할 때 알아야할 4가지

 

모바일 앱을 디자인한다면 안드로이드와 iOS의 정보 구조의 차이, 디자인 지침의 차이 등을 알 필요가 있습니다.

 

iOS 안드로이드 UI 디자인 패턴의 차이

 

 

iOS 디자인과 안드로이드 머티리얼 디자인 가이드의 특징

 

 

 

팁 2 ) 디자인 작업시 해상도, 그리드 시스템, 컬러 테마, 폰트

 

실제로 디자인 작업을 할 때 선행되어야 하는 지식들을 확인해보세요.

 

 

디자인 작업을 할 때 해상도 기준을 어떤 기기로 잡아야할지, 아트 보드 크기는 어떻게 해야할지 알 수 있습니다.

 

안드로이드 iOS 모바일 해상도 기준

 

데스크탑과 패드, 모바일 기기별로 그리드 시스템을 만들면 디자인의 일관성이 생깁니다. 또한 반응형 웹을 제작에 효과적입니다.

 

기기별 그리드 시스템 만드는 방법

 

서비스의 테마가 되는 색상은 어떻게 선택하는지, 폰트는 어떤 종류를 쓰면 좋을지 알 수 있습니다.

 

웹&앱 컬러 테마, 폰트 정하는 방법

 

 

팁 3 ) 공부를 계속 할 수 있는 방법

 

그림 독학 > 기초 지식 카테고리의 글과 웹디자인 카테고리의 UIUX 관련 공부글을 연재하면서 느낀 점이 있습니다.

 

미술과 디자인 관련된 서적은 많지만, 일반론을 실무에 적용하기까지는 갭이 있습니다.

 

작업 중 의문을 해결하고 실무에 바로바로 적용할 수 있는 가이드와 도구가 필요합니다.

 

이러한 점에서 가장 자세하고 체계적으로 되어있는 문서는 구글 머티리얼 디자인 가이드입니다.

 

구글이 추구하는 디자인 원칙과 실제 적용 가능한 코드까지 종합적인 정보를 얻을 수 있으니, 시간날 때 마다 차근차근 읽어보시면 유능한 디자이너가 되실 수 있다고 생각합니다.

 

 

 

긴 글 읽어주셔서 감사드립니다. 아쉬운점이나 추가해야할 것들이 있다면 보완하겠습니다. 같이 발전할 수 있으면 좋겠습니다.

 

이 글은 공지사항이라 댓글이 없지만, 글마다 댓글로 피드백 환영합니다!