성공적인 ui디자인을 위한 10가지 원칙

모바일 UI를 디자인하는 기초적인 10가지 사항

모바일 디자인 팁

1.폰트
모바일 디자인을 할 시 1배수로는 12폰트 이상
2배수의 경우에는 24폰트 이상을 사용해 주어야 
가독성이 좋다 모바일 디자인의 디바이스 크기가 작다보니
디자인을 하는 과정에서 자연스럽게 크기를 줄이는 경우가 있는데
텍스트는 미적으로 접근하는것이 아닌 
가독성을 중점으로 접근해야하는 분야이다
그렇기 때문에 텍스트 크기에 각별한 주의를 기울이며
화면을 구성하는것이 중요하다

2.버튼사이즈
디자인을 할때 버튼 사이즈를 너무 작게하는 사람들이 있다
이로인해 가끔 모바일 디바이스를 사용할때 터치가 잘 안되는 경우가 종종있다
그렇다 보니 버튼간의 간격이나 사이즈를 잘 고려하여 넉넉하게 디자인 해주는것이
중요하다 
그래야 사용자들이 터치를 했을 경우
오류가 발생하지 않거나 
터치 이후의 내가 원하는 목적지로 이동할수 있는 기능을
제공받게 될것이다

3.아이콘 스타일
아이콘을 직접 그리는 경우에는 아이콘에 전반적인 통일감을 주는것이 중요하다
아이콘을 5~10개 정도 그릴때는 통일감을 잘 준수해서 그리지만 
50~100개 정도로 아이콘의 갯수가 많아지는 경우에는 
통일감이 사라지는 경우가 많다
아이콘은 단순 그림의 목적이 아닌 사이트의 전체적인 
분위기를 디테일한 요소에서 나타낼수있는 부분이기 때문에
통일감있게 모든 아이콘의 스타일을 맞춰주는것이 좋다

4.접근성 폰트 컬러
폰트컬러를 굉장히 연하게 만드는 형식으로 디자인 하는 경우가
종종있다 이런 경우 시각적으로 불편함이 있으신 분들은 내용 파악 자체가 불가능 하기때문에
접큰성4.5:1이상의 컬러를 활용해주면 좋다

5.통일감없는 스타일

레이아웃을 디자인 할때 직각과 라운드를 나의 시각에만 의존해서 
통일감없이 디자인 하게 되는 경우 사이트에서 풍기는 이미지가
라운드가 들어가서 몽글몽글 부드러운 느낌이 나는지
아니면 직각으로 딱 정렬되어 보이는지 모바일 디자인의
정체성이 사라진다 
그래서 전체적으로 디자인을 하는경우 한가지의 기준점을 잡고 
그 스타일로만 통일감 있게 디자인 해주는것이 중요하다
이 부분은 pc디자인 웹디자인도 동일하다

6.버튼폰트의 계층구조

계층구조라 함은 강,중,약 / 약,중,강 이런식으로 중요도에 따라서 디자인을 나타내는 표현 방식이다

우선 버튼을 먼저 설명하자면 버튼에는 다양한 계층구조들이 존재를 한다

사이즈 혹은 스타일별로 폰트의 계층구조를 만들어줄수있다

디바이스 하나가 만들어질때 버튼을 하나 혹은 두개만 사용한다고 생각하시는 분들이 많은데

버튼을 동시에 5개 혹은 4개 혹은 2개 이렇게 한번에 여러개가 나타나는 경우가 있다 

이때 바로 버튼의 계층구조로 구분을 지어줘야 된다

 

여러개의 버튼이 노출되어야 하는 경우에는 중요도에 따라서 버튼을 다르게 해주어야 한다

이 다음은 폰트의 계층 구조이다 

폰트의 계층 구조는 컬러로도 줄 수 있고 볼드나 레귤러로도 줄수가 있다으며

폰트의 크기로도 줄수가 있다 

우리가 강조하고자 하는 부분을 부각시켜 만들어 줄수 있으며 

중요도가 낮은 부분은 다운 시켜주는 폰트의 강약 계층구조도 디자인에 있어서 기본기를 나타내는 중요한 요소이므로 

학습하여 내 것으로 만드는것이 중요하다 

 

폰트와 버튼의 계층구조를 조합해보면 위의 화면과 같다 

실제 페이지 디자인의 버튼과 텍스트에 대한 계층구조를 나타내니깐 일단 훨씬 강하고 약하고가 명확하게 디자인되어 

디자인이 표현되는 걸 볼 수 있다 

 

 

7.하단 네비게이션 

 

사진상의 아이콘이 어떠한것을 표현하는 아이콘인지 알아볼수 있겠는가?

메뉴,공간,촬영,링크,날씨 아이콘순으로 정렬된 메뉴바 이다

텍스트가 없으므로 우리는 전혀 무슨 아이콘인지 구분이 명확하지 않아진다 

 

 

그럼 반대로 앞에 있는 이 아이콘이 텍스트가 없어도 우리는 대충 알수가 있다 

홈,메뉴,마이페이지,찜,더보기 이다 

이처럼 우리가 일반적으로 평상시에 많이 보던 아이콘은 텍스트가 없어도 된다 

 

 

하지만 앞에서 설명한것과 같이 약간 생소한 아이콘들은 당연히 텍스트가 들어가야 하는것이 맞다

아이콘과 텍스트가 좁은 영역에 들어가서 텍스트를 뺴버리면 당연히 안되는것이 맞다 

하단 네비게이션에 아이콘이 5개 이상 들어가면 가독성이 굉장히 안좋고 혼란을 유발한다

3개 / 4개 / 5개 / 6개 / 7개 까지도 넣는곳을 볼수가 있다..

하지만 복잡하다 

 

"좁은 모바일 화면에서 많은 요소를 집어 넣는다 해서 절대 좋은것은 아니다"

중요도에 따라서 뺄건 빼주고 넣을건 넣어준다

 

 

"모든 사용자가 그 불필요한 요소들을 볼 필요 또한 없다" 

 

그래서 디자인 ui는 빼는게 어려운 과제중 하나이기도 하다(논리적인 구성으로 인터페이스 하나가 나와야하기 때문이다)

디자인 하나를 빼는 순간 대체수단이 있어야 하므로 생기는 고민중에 하나이기도 하다 

 

 

8. 컨텐츠간의 여백 

 

모바일 디자인 시 여백을 좁게 사용하는 사람들이 종종 있다 

여백은 최대한 여유롭게 넓게 넓게 잡아주는것이 좋다 

컨텐츠간의 여백이 좁다 보면 요소하나하나가 집중이 안되며 복잡해지는 경향이 있다

이로인해 가독성이 많이 떨어진다 

 

(여백이 늘어나는 만큼 스크롤을 많이 해야하는것 아닌가?)

라는 의견이 생길수도 있다 하지만 그렇게 많은 차이가 나는것 또한 아니다 

자료상으로 보여지는것 처럼 길이 차이가 미미한 수준으로 길어지므로 

사용자들의 모바일 사용 패턴을 보면 손가락으로 한번 미는순간 

한번에 몆천 픽셀이  드르륵 내려간다 

 

그래서 디바이스의 길이가 몇만픽셀 이상 차이가 나는것이 아니라면 

실제 화면을 보면 2~300픽셀 가량 정도밖에는 차이가 안난다 

이 정도 차이를 포기하고 가독성에 집중시키는 게 훨씬 더 좋다 

 

스크롤 길이는 사실 모바일 에서는 무의미 하다고 봐야한다 

9.컨텐츠간의 그룹 

 

정보 컨텐츠 간의 그룹핑이다여덟번째에서 나온 여백과 좀 관련이 있는 이야기인데 

여백이 좁거나 단을 구분하지 않으면 이 컨텐츠 간의 정보가 그룹핑이 전혀 안 돼어 보인다 

 

 

그래서 이러한 현상을 방지하기 위해 컨텐츠의 중간에 단을 삽입하여 한번 끊어주거나 컨텐츠 사이에서도 라인으로 구분점을 만들어주는 등의 방식이 있다 

 

라인을 빼고 각각의 섹션의 여백을 줘서 그룹핑을 줄 수도 있고 이번에는 컨텐츠 간의 라인을 줘서 여백을 강제로 벌리는 방법도 있다 

마지막으로는 바닥의 면을 깔아서 컨텐츠 간의 간격을 강제로 분리시키는 방법 도 있다 

단 면의 색상은 굉장히 연해야 한다

 

많은 정보를 그룹핑으로 효과적으로 주는 방법이 있다 

바로 카드 ui이다 

이 카드 ui도 활용해보면 도움이 많이 될것이다 

 

10. 레이아웃

마지막으로는 레이아웃이다 

모바일은 화면이 좁기 떄문에 레이아웃 자체를 너무 잘게 쪼개기 보다는

큼직큼직하게 덩어리 감으로 레이아웃을 잡아주는것이 훨씬 더 가독성도 좋고 

하나하나 집중 있게 사용자에게 전달할 수 있다 

그러므로 모바일같은 작은 화면에서 너무 잘게 쪼개지 말라는 의견이다

 

페이지가 길고 잘게 쪼개지는 경우 굉장히 복잡해져서 디자인이 전혀 눈에 안 들어온다