나만 모르고 있는 UI 디자인을 위한 10가지 원칙
안녕하세요 디자이너 마디 합니다
자 우리가 일상생활에서 손에서 빼놓을
수 없는게 보조 바로 뽀 발 핸드폰이
줘 그럼 이 모바일 디자인을 하는
ui 디자이너가 디자인을 할 때 가장
많이 하는 실수 혹은 당연히 알아야
되는 기초적인 10가지 팁 빠르고
간단하게 하나하나 알아 볼 거고
추후에 제가 각각의 카테고리별로
영상을 제작해서 올려드리도록
하겠습니다
모바일 디자인을 진행하실 때는
텍스트를 1 배수진 으로 12 폰트
이상 그리고 이 배수로 는 24 폰트
이상을 써주셔야 시 가독성이 좋습니다
모바일 디자인이 화면이 작다 보니까
자꾸 폰트를 줄이시는 분들이 있는데요
텍스트는 위쪽으로 접근하는게 아니라
가독성을 중점으로 접근하기 때문에
밑쪽 보다도 그리 잘 보이게 내용을
잘 보이게 디자인을 해 주시는게 가장
중요합니다
두번째로는 바로 버턴 입니다 우리가
디자인을 할 때 버튼 사이즈를 너무
작게 하시는 분들이 있어요
그래서 가끔 모바일을 활용하다 보면
터치나 잘 안되는 경우도 있습니다
그래서 우리가 손가락 두께를 어느정도
고려해서 버튼 간의 거리가 비나 버튼
사이즈를 고려해서 넉넉하게 되지 않을
해주셔야 됩니다
그래야지 사용자들이 디자인을 활용할
때 터치를 했을 경우 오류가 발생하지
않거나 아내가 원하는 터치의 목적지로
이동할 수 있는 이런 것들을
디자이너들이 다 제공할 수 있겠죠
아이콘을 직접 그리실 때 는 이
아이콘의 모두 통해 감을 주셔야
되는데요
아이콘을 5개 10개 이렇게 그리실
때 는 모두 통일감 있게 잘 그리시는
데 50개 100개 이렇게 아이콘 의
개수가 많아 지면서 점점 통일감이
깨지는 경우가 굉장히 많아요
아이콘은 단순 그림의 목적이 아니고
이 사이트의 전체적인 분위기를
디테일한 요소에서 나타낼 수 있는
부분이기 때문에 통일감 있게 모든
아이콘을 스타일을 다 맞춰 주시는게
좋습니다
그리고 한다는데 더 나아가면 은 이제
아이콘의 컨셉을 전체적으로 묻히는
이런 디자인도 하시게 될 거에요 제가
앞에서 카테고리별로 영상 따로 따로
하나씩 더 상세하게 올린다고
말씀드렸죠 그때 아이콘 파티 영상
제작할 때 컨셉의 관련된 내용도 함께
업로드 해 드리도록 할게요
매 번째로는 접근성이 폰트 컬러
입니다 이 접근성이 라는건 폰트
말고도 아이폰이나 라인이나 버튼 나
뭐 기타 디자인 요소에도 답 포함이
되어 있는 내용인데 우선 오늘은 폰트
내용만 좀 가지고 이야기를 할 거구요
번트 컬러를 굉장히 연하게 사용하시는
분들이 있는데 그렇다면 시각적으로
불편함이 있으신 분들은 내용 파악
자체가 불가능하기 때문에 접근성이
4.5 대일 이상 컬러를 활용해
주시면 좋습니다
다섯번째로 는 통일감 없는
스타일입니다
우리가 레이아웃을 디자인할 때 집값도
쓰고 라운드 도 쓰고 이렇게 내 눈에
맞게끔 각각의 요소들을 통일 강 없이
기준 없이 디자인을 하게 되면은
사이트에서 풍기는 이미지 자체가
라운드가 들어가서 약간 몽글몽글
부드러운 느낌이 남 지 아니면 식각
으로 딱 그리드 있게 정렬 돼 보이는
g2 무 바에 디자인의 정체성이
없겠죠 그래서 전체적으로 디자인을
하실 때는 한 가지의 기조를 잡고 그
스타일로 6 통일감 있게 디자인
해주시는게 좋아요 이거는 pc 디자인
웹 디자인 도 마찬가지입니다
여섯번째로 는 개 충 구조입니다
여기서는 폰트와 버튼 두 가지 예시를
한번 보여드리도록 할게요
우리가 개 층 구조 라고 하는것은 강
중 약 약 중 강 이런식으로 중요도에
따라서 디자인을 나타내는 표현 방법
이에요 우선 버튼을 먼저 설명을
드리면 요렇게 버트 내는 다양한 계층
구조 들이 있습니다
물론 사이즈로 도 대충 구조 나타낼
수 있지만 오늘은 핵심만 보는거 기
때문에 이런 스타일로 계층 구조를
나타냅니다
버튼은 우리가 딱 하나 2개만 사용
한다고 생각하시는 분들이 많은데
버튼이 동시에 5 개 혹은 네 개
혹은 두 개 이렇게 한번에 여러 개가
나타나는 경우가 있어요 이때 바로
버튼에 개 충 구조로 9분을 지어
줘야 됩니다
앞에 보이시는 예시 화면 처럼
로그인이나 혹은 달력 혹은 기타 다른
사이트에서 도 굉장히 많은 버터 4개
충 구조들이 존재를 하고 있어요
그래서 항상 여러개 버튼의 동시에
노출될 때는 이 중요도에 따라서
디자인을 다르게 해 주셔야 됩니다
그다음 폰트입니다 폰트 의 계층
구조는 컬러로 줄 수도 있고 볼드
날에 길로 를 줄 수도 있고 혹은
콘테 크기로도 줄 수도 있습니다
우리가 강조하고자 하는 부분을 누각
시키고 약간 중요도가 낮은 부분을
다운 시켜 주는 이런 폰트의 강약
계층 구조도 디자인에 있어서 아주
기본기를 나타내는 중요한 요소 니깐
꼭 학습하여 서 내꺼로 만드시기
바랍니다
자 그래서 이제 폰트 하고 버튼의
계층구조를 조합해서 보면 화면과
같습니다
어떤가요 실제 페이지 디자인에 버튼과
텍스트에 대한 계층 구조를 나타내
니까 훨씬 더 강하고 약하고 가
명확하게 디자인 데서 표현되는 걸
확인해 볼 수 있겠죠
으
태국 번째로는 하다 내비게이션 입니다
앞에 있는 아이콘이 몰드 타는 아이콘
인지 아시는 분 있으신가요 전 책부터
설명을 들으면 메뉴 공간 촬영 링크
날씨 아이콘입니다
어때요 텍스트 가 없으니까 전혀 무슨
아이콘 인지 인지 가 안 됐죠
자 그럼 반대로 앞에 있는 이 아이콘
텍스트 가 없어도 대충 어떤 아이콘
위치 우리는 다 알고 있죠
홈 메뉴 마이페이지 침 더보기 그저
이처럼 우리가 일반적으로 평상시에
많이 보던 아이콘은 텍스트 가 없어도
됩니다
근데 앞에서 보셨던 것처럼 약간 생선
아이콘들은 당연히 텍스트가 들어가야
되어 아이콘과 텍스트가 좁은 영양의
들어가서 지저분하다고 텍스트를 그냥
빼버리면 당연히 안되겠죠
그리고 하단 내비게이션의 아이콘이
5개 이상 들어가면 은 가독성이
굉장히 안 좋고 혼란을 유발합니다
앞에 지금 3개의 아이콘이 있죠
자 그 다음 4개로 바뀌었죠
그 다음 5 개 로 바뀌었죠
그다음 6개로 바뀌었죠 어때요 6개
부터 복잡해지기 시작하죠 그 다음에
7 개까지도 우리가 넣는 곳을 볼
수가 있어요
어떤가요 상당히 복잡한 걸 우리가
확인해 볼 수가 있겠죠 이처럼 조금
모바일 파면 해서 많은 요소를
집어넣은 다고 해서 절대 좋은게
아니에요 그러면 이런 말씀들을 하시죠
이럴땐 어떻게 하고 저럴 때 어떻게
하고 이럴 땐 어떡할 거냐 중요도에
따라서 뺄 건 빼고 넣을 건 더 하죠
모든 사용자가 그 불필요한 걸 다 볼
필요도 없구요 그래서 디자인 ui 는
사실 넣는거 는 쉬워요 빼는게 어렵죠
논리적인 구성으로 이거를 빼는 순간
다르 대체 수단이 있어야 되니까 거죠
[음악]
여덟번째 로는 콘텐츠 간의 여백
입니다
모바일 디자인을 하시면서 여백을 좀
좋게 쓰시는 분들이 있는데요 여백은
최대한 여유롭게 넓게 넓게 잡아
주시면 됩니다 컨텐츠 시간 의 여백이
좇다 보면 은 노스 요소가 하나
하나씩 집중이 안되고 복잡해 지는
경향이 있어서 오히려 가독성을 많이
해칩니다
그리고 여백에 넓으면 스크롤을 훨씬
많이 해야 되지 않느냐 이런
말씀해주시는 분들이 있는데요 5 피쉬
매는 그럴 수도 있다고 생각이 드는데
모바일에서는 전혀 의미가 없습니다
화면에 보이시는 것처럼 사실 길이
차이가 그렇게 많이 나는 것도 아니고
사용자 들의 모바일 패턴을 보면 은
손가락으로 쓱 하는 순간 한번에 배
천 픽셀을 드르륵 하고 내려가 잖아요
그래서 이 길이가 몇 만 픽셀 차이가
나는거 아닌 이상에는 실제로 화면
보시면 하니 300 픽셀 밖에 차이가
안 나요 저정도 차이를 포기하고
가독성에 집중 시키는 게 훨씬 더
좋죠 스코 를 기리는 사실
모바일에서는 무의미 합니다 여러분들
9 번째로는 바로 정보 컨텐츠 간의
그룹핑 입니다 여덟번째 에서 나온
여백과 좀 관련이 있는 얘기인데요
여백이 좁거나 뭔가 단을 9분하지
않으면 이 컨텐츠가 4 정보가 그룹핑
이 전혀 안 돼 보이죠 그래서 이런
것들을 방지하기 위해서 컨텐츠가 4
중간에 단어로 한번 끊어 주는 방법도
있구요 컨텐츠 속에서도 라인으로 9분
점을 요렇게 줄 수도 있습니다
그리고 라인을 오히려 빼고 각각의
섹션의 여백 얼 줘서 그룹핑 을 줄
수도 있고 이번에는 컨텐츠가 4
라인을 줘서 여백을 강제로 벌리는
방법도 있어요 마지막으로 바닥에 몇
을 깔아서 컨텐츠가 4 분리를 강제로
시키는 방법도 gg 입니다
당면의 색깔은 굉장히 연 해야되요
그리고 또하나 아주 많은 정보를
그룹핑 으로 효과적으로 주는 방법이
있죠 바로 카드 ui 초 이 카드
ui 도 활용해 보면 좋을 것 같아요
자 그리고 마지막입니다 바로
레이아웃이 줘 모바일 화면이 좋기
때문에 레이어 자체를 너무 잘게
쪼개기 보다는 금주의 큼직하게 당
얼이 감으로 레이아웃을 잡아 주시는게
훨씬 더 가독성도 좋고 하나하나 집중
있게 사용자에게 전달할 수 있습니다
그러니까 니 모바일 같은 좁은
화면에서 너무 잘게 쪼개 지 마세요
페이지가 길고 더 잘게 쪼개 지면은
굉장히 복잡해서 전혀 눈에 안들어와요
아셨죠
오늘 이렇게 해서 모바일 디자이너가
ui 디자인을 할 때 고려해야 할
10가지 기초 4 같이 한번
알아봤는데요 사실은 하나하나
카테고리별로 보면은 정말 설명할 때
너무 많은데 10개를 좀요 약하다
보니 많은 부분이 좀 빠져 있습니다
추후에 제가 오늘 10가지 팁 에서
각각의 섹시한 목차 별로 영상 따로
따로 하나씩 녹화해서 업로드 할
거니까요 그때 조금 더 상세한 내용도
를 보실 수 있을 것 같아요 오늘
영상도 많은 도움이 되셨다면 좋아요
구독 알림 감사합니다 신입 분들이
많은 도움이 좀 되셨으면 좋겠네요
안녕히 계세요
