주제 선택 이유
디자인시스템 일관성/효율성/확장성 이라는 목표하에 정립되는 건 알겠는데…
그럼 디자인시스템-!의 선구자들은 어떤 생각을 갖고 만들고 완성했는지 이해하기 위해 애플의 HIG를 하나씩 공부해 보겠습니다.
우선, 아이콘/접근성 시작-!
핵심 한 줄 정리
일관성/단순함/시각조정/대비/인식가능함/접근성 … 이것들을 항상 유념하시오.
나의 생각/관점
“애플의 규칙일 뿐, 참고만 하자”
읽고보니, 애플스토어에 등록할 앱을 만들 때 필수로 지켜야하는 정책과 같았다.
그래서 오히려 ‘아 정답이 없구나! 좋은 예시로 지금 만드는 서비스에 참고해야지-!’ 생각했다!
내용 정리
Icons
필요요소
•
인식 가능하고, 매우 단순화할 것
•
시각적 일관성 유지할 것
ㄴ 전체의 무게감을 고려하여 크기, 선의 두께의 일관성이 필요함
APPLE, HIG
•
아이콘과 텍스트 사이 간격을 일치시킬 것
•
필요시, 시각 보정할 것 (패딩 값 조정, 무조건 가운데 정렬X)
APPLE, HIG
•
필요시, Selected 값에 대한 정의할 것
•
인클루시브 디자인을 고려할 것
ㄴ 제네럴한 디자인하기 (성별차이 X)
•
필수불가결의 경우에만, 아이콘내 텍스트 포함할 것
ㄴ Include text in your design only when it’s essential for conveying meaning.
ㄴ 가장 직관적이지만, 현지화가 필요하므로 (애플에만 해당될지도…)
•
10%의 여백을 유지할 것
ㄴ 캔버스의 약 80%를 차지하는 것이 가장 이상적임
Accessibility
ㄴ 접근성이 뛰어난 서비스는 설계에 따라 개인화를 지원하고, 개인의 능력/기기 사용방식에 관계없이 모든 사람에게 뛰어난 사용자 경험을 제공함
ㄴ 접근성을 고려해야 하는 이유는, 대략 7명 중 1명은 서비스 이용에 불편함을 경험하는 장애를 갖고있음 (시력-인지-청력 저하…)
필요요소
•
접근성을 꼭 염두하고 디자인하기
접근성은 장애가 있는 사람 뿐만아니라, 모든 사람의 상황을 고려하여 필요함
◦
접근성을 고려한다는 게 뭔데?→
단순성과 인지 가능성을 우선시 하고 → 모든 디자인 결정시, 다양한 사람들의 상황을 고려하는 것
•
단순하게 만들 것
복잡한 작업을 간단하게 수행할 수 있도록 → 친숙하고 일관된 상호작용을 제공할 것
•
인지 가능하도록 만들 것
•
접근성을 테스트할 것
Interactions
필요요소
Gestures
•
멘탈모델을 고려하여 만들 것
•
단순화할 것 → 단순함이 사용성을 높임
•
제스쳐로 기능 작동시, 제스쳐 없이도 사용가능하도록 설계해야 함
ㄴ 사진촬영, 볼륨낮추기 등을 물리적 기계누름외에도 버튼으로 가능하게 해야함 (악력이 약한 사람도 있기에)
Buttons and controls
•
적어도, 44x44 pt의 기준을 지킬 것
•
일관된 스타일 계층구조를 만들고, 버튼별 상대적인 중요성을 전달할 것
ㄴ 버튼 스타일의 일관된 계층 구조를 사용하면, 사람들이 모양기반으로 버튼의 중요성을 파악할 수 있음 + 버튼과 주변 콘텐츠와 쉽게 구별할 수 있음
Text display
필요요소
•
글자가 커질 때, 잘림현상 최소화할 것
•
글자가 커질 때, 레이아웃 놓치지 말것
•
글자가 커질 때, 아이콘도 함께 커질 것
•
일관된 정보 계층 구조를 유지할 것
•
regular ~ heavy font 의 사용을 지향할 것
ㄴUltralight, Thin 및 Light 글꼴 두께는 지양할 것
•
긴 글에서 italics과 All caps는 사용하지 말 것
Color and effects
필요요소
•
색상만으로 두가지 유형을 구분하지 말것
ㄴ WHY? → 색맹을 갖고 있는 사람은 몇가지 색상의 구분이 어려움
ㄴ HOW? → 이를 최소화하기 위해, 도형의 구분을 포함하여 해소할 수 있음
ㄴ 예를 들어, 빨간색 네모 구분과 녹색 원형 구분으로…
•
색상 반전 값 테스트할 것
•
가독성을 높이기위해, 대비가 강한 색상을 사용할 것
ㄴ 텍스트, 글리프 및 컨트롤과 같은 시각적 요소의 색상 대비를 높이면 더 많은 사람들이 더 많은 상황에서 앱을 사용하도록 도울 수 있음
ㄴ WCAG(웹 콘텐츠 접근성 지침) 색상 대비 공식을 기반으로 하는 온라인 색상 계산기를 사용할 수 있음
•
애니메이션은 가급적 지양할 것
•
움직이거나 깜박이는 움직임을 만들 때 유의할 것
용어•
HIG(Human Interface Guidelines)
Apple’s Human Interface Guidelines, 애플의 디자인시스템가이드
관련 링크 단어단어 | 뜻 | 예문 |
pioneer | 개척자, 선구자 | The HIG is deeply rooted in the design principles Apple helped pioneer decades ago. |
straightforward | 간단한, 쉬운, 복잡하지 않은 (=easy) | a straightforward
process |
streamlined | 간결한 | this streamlined
approach will significantly reduce the learning curve for new users |
succinct | 간결 | |
asymmetric | 비대칭 | |
geometrically | 기하학적으로 | |
optically | 시각적으로 | |
Approximately | 대략 | |
Audit | 감사/심사/검사하다 | to check whether the election result is correct with a risk-limiting au |
hierarchy | 계층 | |
truncation | 잘림 |