UI / UX 디자인 이론 + 실전사례

UI / UX에 대해 궁금하시거나 공부를 하기 위해 들어오신 분들이시라면 의아해하실 수도 있습니다.

"개발사가 UI, UX를 가르친다고? 제대로 알기나 한가?"

저희 아몽에는 홈페이지 UI / UX 디자인팀이 존재하기에 가능한 일입니다. ​


전문적인 디자이너가 알려주는 UI, UX를 여러분들이 알기 쉽고 자세하게 알려드리도록 하겠습니다.


또한 개발팀만이 설명드릴 수 있는 UI / UX를 홈페이지에 적용한다면 어떤 식으로 가능한지에 대해서도 알려드리겠습니다.
​​

믿고 따라와 주신다면 많은 도움이 될 것이라고 자부드리며 글을 시작하도록 하겠습니다


먼저 UI에 대해 알아보도록 하겠습니다.

01. UI 디자인이란?

UI : User Interface(유저 인터페이스)

사용자와 사물기기(휴대폰) 같은 시스템 간의 상호작용이라고 생각하시면 됩니다.


예를 들어, 버튼을 눌렀을 때 혹은 마우스로 스크롤을 내리는 행위 등 내가 원하는 행동을 해서 원하는 결과를 얻는다는 것을 UI라고 부릅니다.


조금 더 쉽게 말하자면 스마트폰으로 웹툰을 넘기는 행위, 네이버로 들어가기 위해 www.naver.com과 같은 주소를 입력하는 행위 등등 사물 기기와의 대화를 UI라고 합니다.


벽에다가 말을 한다 해서 우리는 이것을 대화라고 부르지 않습니다. ​


마찬가지로 우리가 구매하기 버튼을 눌렀을 때 아무런 반응이 없다면 이것 또한 UI가 이루어지지 않았다고 생각하시면 됩니다.


그렇다면 UI 디자인은 무엇일까요?

UI 디자인이란 사용자가 사물 기기를 이용할 때 조금 더 편리하고 즐거움을 주게끔 레이아웃 구조, 색상, 모양과 같은 시각적인 것을 디자인한다를 의미합니다.


예를 들어 구매하기 버튼의 색상과 장바구니 버튼 색상의 조합을 맞춘다


혹은 사각형의 버튼을 사용했으면 통일성을 주기 위해 계속해서 사각형의 버튼을 이용한다 등등 시각적인 요소를 다루는 것을 UI 디자인이라 합니다.  


다음은 UX디자인에 대해서 알아보도록 하겠습니다.

02. UX 디자인이란?

UX : User experience (사용자 경험)

사용자가 사물기기 혹은 인터넷을 사용할 때의 경험으로부터 느끼는 감정, 느낌을 말합니다.


간혹가다 뉴스를 읽거나 페이스북 링크를 통해 들어간 사이트에서 수많은 팝업창, 광고로 불편함을 느끼거나 당황하셨던 경험이 있으실 것입니다.


또한 확인창을 누를 때 아니오 버튼이 왼쪽에 있고 확인 버튼이 오른쪽에 있더라면 사용자는 불편함을 느낄 것입니다.
​​

이를 우리는 UX 측면에서 매우 좋지 않다고 표현합니다.
​​

그렇다면 UX 디자인은 무엇일까요?

UX 디자인이란 UX 측면에서 모바일 앱 혹은 인터넷을 사용할 때 사용자가 당황하지 않도록 버튼, 이미지등 컴포넌트를 배치 / 설계하는 것을 의미합니다.
​​

홈페이지로 예를 들자면 사용자의 시선은 보통 왼쪽 대각선을 시작으로 쭉 내려옵니다. 그렇다면 기업의 로고를 가장 상단 왼쪽 위의 배치합니다.


사용자가 홈페이지를 이탈해도 로고를 보고 나가도록 설계하는 것처럼 사용자의 경험을 토대로 홈페이지를 구상하고 설계하는 것을 의미합니다.


여러분이 확인해야 할 UX check list를 알려드리도록 하겠습니다.

1

 단순성 
선택지가 많을 수록 의사결정 시간이 늘어납니다. 한페이지에는 한가지를 제시하는
1page / 1thing을 지켰는지 확인합니다.

2

 명확성 
애매모호한 카피와 디자인은 사용자에게 혼란을 줍니다. 사용자의 행동을 직접적으로 표현했는지
확인합니다.

3

 일관성 
익숙함을 주어 사용자에게 안정감을 주는지 확인합니다.

4

 유용성 
사용자가 쉽게 버튼을 누를수 있는지, 페이지 이동을 쉽게 할수 있는지 확인합니다.

혹은 사용자의 행동을 예측해, 버튼 혹은 링크등을 배치해놓은지 확인합니다.


실제로 UI / UX 디자인이 어떻게 적용되는지 아래 사례를 통해 한번 알아보도록 하겠습니다.

02. UI / UX 디자인 실제 적용 사례

최근 저희 아몽에게 홈페이지 리뉴얼을 맡긴 사례를 예를 들어 설명하도록 하겠습니다.

UI 디자인

- 2단 그리드 구조를 사용해서 이미지를 삽입했습니다.
(자칫 불필요한 여백이 생겼을 수도 있었습니다.)


- 모든 네모박스를 꼭짓점을 둥글게 처리해 부드러운 느낌을 주었습니다.
(문의하기버튼, 신청서 양식, 문의하기를 감싸고 있는 박스 등등)

UX 디자인

- 문의하기 버튼을 강조하기 위해 파란색의 배경을 사용했습니다.

- 신청서 양식을 순서대로 배치해 쓰기 쉽도록 만들었습니다.


모든 디자인에는 이유가 있고 그 디자인을 얼마나 조화롭게 사용하냐에 따라서 사용자의 경험 또한 만족되는 것입니다.


UI / UX 디자인 설계를 통해 이유 없는 디자인은 없어야 하며 고객님 혹은 고객님의 홈페이지 사용자까지 완벽하게 만족하는 결과물을 만들어 내야 합니다.



지금까지 UI / UX 디자인과 실제 홈페이지에 적용 사례까지 살펴보았습니다.

이번 글을 통해 UI, UX디자인에 대한 진입장벽을 부셨다면 대성공입니다. 추가적으로 궁금한 사항 있으시면 댓글 달아주시기 바랍니다.

​​
긴 글 읽어주셔서 감사드립니다.