시작하며,
KWDC24에서 기억에 남았던 3개의 세션들 중 두 번째 세션을 이야기해보겠다
세션 중 유일한 디자인 세션이었다
앱 개발자라면 응당 화면 디자인에도 시간을 쏟게 된다
따라서 개발자라 할지라도 디자인에 대한 인지는 중요하다고 생각한다
그래야 디자이너의 디자인을 그대로 서비스에 적용할 수도, 디자이너 없이도 화면을 설계할수도 있다
그런 의미에서 이번 디자인 세션은 기대를 많이 했다
무려 Apple의 디자이너님의 세션이었기에, Apple이 가지는 아름다운 UI에 관련된 무언가라도 들어보고 싶었다
세션 02 : 모두를 위해 디자인하기
"포괄적인 디자인은 모두에게 좋다"
사람들은 우리들이 만든 배려 깊은 디자인을 느낀다
앱이 얼마만큼의 가치를 주는지, 앱이 얼마나 나를 위하는지
두 가지 중 후자의 경험이 좋음에 따라 이들이 앱의 코어 유저가 된다고 한다
어떻게 하면 모두를 위해 디자인할 수 있을까?
- 다양한 스토리를 들려주세요
- 고정관념을 피하세요
- 접근성을 사용하세요
- 문화에 맞게 현지화하세요
- 색상을 주의깊게 사용하세요
- 자기 표현을 할 수 있도록 도와주세요
다양한 스토리를 들려주세요
우리가 앱을 가장 먼저 마주하는 곳은 앱스토어 상세 페이지이다
상당히 많은 정보가 들어있고, 그 중 이미지 (스크린샷)은 다양한 이야기를 녹여서 보여줄 수 있는 창구 중 하나이다
콘텐츠를 넣을 수도 있고, 앱의 시나리오를 녹일 수도 있다
세션에서는 간단하게 투두리스트를 예시로 설명해주셨다
전형적인 미국인의 일과를 담은 투두리스트 스크린샷 그대로 인도에서 앱을 런칭한다면 인도인의 일과와는 맞지 않아 잘 와닿지 않을 거라는 것이다
따라서 우리는 각 문화에 맞게, 카테고리에 맞게 스크린샷을 재구성하고, 스토리를 들려주어야 한다고 한다
어떤 시나리오로 앱을 사용할 수 있는지, 어떤 특징을 가지는지를 한 눈에 보여줄 수 있는 방안을 고민해보는 것도 좋을 듯 하다
고정관념을 피하세요
가장 간과하기 쉬운 고정관념은 성별이다
성별은 스펙트럼이기에 여성과 남성으로 나누는 이분법적인 분류는 고정관념이다
언어나 아이콘을 사용할 때 젠더중립적인 걸 선택하는 게 좋다고 한다
He or She → They
Hey guys → Hey everyone
젠더중립적인 아이콘은 SF Symbol에서 제공하고 있다고 한다
*SF Symbol : Apple에서 제공하는 벡터 기반 아이콘 라이브러리
두 번째로, Ableism은 특정 능력이 정상적이라는 고정관념이다
어떠한 능력도 정상적이라는 것은 아니다
Insance, crazy 등은 장애와 관련된 단어를 나타내는데,
이런 단어를 쓰는 것보다는 radiculasly 등의 단어를 사용하는 게 좋다
(아예 쓰지 말라는 것은 아님!!)
그리고, 우리의 고정관념을 깨부시는 데에 도움이 될 멘트를 해주셨다
"삶의 경험에서 다양성을 찾으세요"
접근성을 사용하세요
고정관념에서 언급한 Ableism과 연관이 있다
시각 장애인에겐 오디오, 청각 장애인에겐 자막이라는 접근성을 지원하는 것이다
장애를 가진 사람들도 나의 앱을 사용할 수 있다는 가능성을 가지고 접근성을 확장하는 게 좋다
Dynamic Type
앱에서 Dynamic Type이라는 게 있다
시스템에서 텍스트 크기를 조절하면 앱에서도 시스템 설정에 따라 텍스트와 UI 등이 조절되는 기능이다
제대로된 API를 사용하면 자동으로 텍스트 크기, 두께 등을 변경할 수 있다
텍스트뿐 아니라 UI도 제대로 다이나밀 타입이 적용되는지 확인해야 한다
참고 사이트 | Dynamic Type 시작하기 - WWDC24
VoiceOver
VoiceOver는 화면을 보지 않아도 기기의 인터페이스를 경험할 수 있게 해주는 스크린 리더이다
시각 장애를 가진 사람들만 쓰는게 아니라 일반 사람들도 VoiceOver 기능을 사용한다
SF Symbol을 사용하면, VoiceOver이 SF Symbol에 지정된 이름을 읽어준다
그러나 아이콘에 description을 적어주면, VoiceOver는 지정된 description을 읽어주므로 사용자 경험 향상에 도움을 줄 수 있다
gear button (SF Symbol)
→ account setting button (description)
그리고 VoiceOver는 시스템 기본 설정 때문에 위에서부터 읽어주는데, 이때 중요한 버튼들(글쓰기, 새로고침 등)의 위치에 따라 해당 버튼이 읽히길 기다리는 데에 꽤 오랜 시간이 소요될 수도 있다
이런 중요한 버튼들처럼 특정 컴포넌트를 먼저 읽어줄 수 있도록 설정할 수도 있다
문화에 맞게 현지화하세요
50%의 세계 인구는 두 개 이상의 언어를 사용하고, 이제 언어 번역은 매우 중요한 기능으로 자리잡았다
그에 따라 사용하는 언어와 살고있는 문화에 맞게 디자인을 변역하는 것은 중요하다
힌디어는 오른쪽 정렬하는 것처럼 레이아웃도 변경해줘야 한다
글을 읽는 방향에 따라 텍스트와 버튼의 배치, 레이아웃 전반, 하단탭바의 순서 등등이 재배치될 수 있다
심지어는 아이콘에서도 텍스트 정렬 등이 변경될 수 있다
이 부분은 SF Symbol을 쓰면 localization으로 알아서 변경해준다고 한다
(이 세션을 들으면서 평소에는 무심하게 쓰던 SF Symbol이 점점 대단하고 존경할만한 라이브러리가 되었다..!)
문화마다 전화번호도 서로 다른 포맷을 가지고, 통화 표시하는 위치도 서로 다르다
특정 문화권의 속담, 밈, 관용어 등을 쓰고 있는지도 확인해봐야 한다
우리나라 속담 : 양반은 못되겠네
→ 영어로 어떻게 번역하지?
첫 번째 "다양한 스토리를 들려주세요"와 연결되는 내용인데, 앱스토어 스크린샷 이미지에 대해서도 현지에 맞게 사진을 구성하면 좋다
식문화라면 미국은 햄버거, 피자 등의 음식 사진으로, 한국이라면 비빔밥, 찌개 등의 음식 사진으로 구성하면 유저들에게 더 와닿을 것이다
Apple Style Guide
Apple Style Guide를 참고하면 어떤 것을 유념해야 하는지 확인할 수 있다고 한다
색상을 주의깊게 사용하세요
문화마다 색상이 가지는 의미가 다르다
빨간색은 대체로 부정적인 의미를 가지지만, 중국에서는 좋은 의미를 가지고 일부 문화권에서는 사랑의 의미를 가지기도 한다
그에 반해 초록과 파랑은 긍정의 이미지를 가지고 있다
"결제완료" 글자
우리나라 : 주로 초록, 파랑 계열의 색상
홍콩 : 빨강 계열의 색상
색각 이상
5%의 사람들이 색각 이상(색맹, 색약)을 경험한다고 한다
우리는 흔히 적록색맹, 청황색맹으로 알고있지만 색맹도 스펙트럼으로 구분된다
UI에서 너무 색에 의존하고 있지 않는지 고민할 필요가 있다
동일한 UI에 색상만 다른 것보단, 서로 다른 아이콘을 사용하는 것이 좋다
(만일 서로 다른 기능임에도 동일한 UI에 색상만 다르다면, 서로 다른 아이콘을 사용하는 것은 어떤 기능인지 명시하기 위한 목적도 있다)
색상 대비율
아이폰에는 "고대비 모드" 가 있다
기본 모드와 고대비 모드에서 해당 색상이 잘 보이는지 확인해야 한다
최소 대비율 = 4.5 : 1
최소 대비율은 4.5 : 1이라고 하지만, 이것은 대략적인 가이드이다 (WCAG 표준의 최소 기준)
4.5 : 1을 만족하더라도 실제로 잘 인식 안되는 컬러들도 있고, 반대의 경우도 있다
(아래가 좋은 예시인지는 모르겠지만 열심히 만들어봤다)
대비율은 스스로 확인해가면서 잘 판단해야 한다
자기 표현을 할 수 있도록 도와주세요
문화마다 다른 전화번호 형식과 이름 형태 등 여러 다른 환경을 가진 사람들이 있다
입력폼에서 "특수문자는 입력이 불가합니다", "8자 이상 입력하세요" 보다는 더 풀어서 설명해주는 게 좋다고 한다
(문화에 따라 전화번호 사이에 ‘-’을 입력하는 게 당연할수도 있기 때문인 듯 하다)
이름
문화권에 따라 이름+성+성 일 수도, 이름만 쓸 수도 있다
한국은 성+이름이고, 순서도 다른 문화권과는 다르다
first name, last name을 입력하게 하는 폼 보다는 이름, 닉네임 을 적는 폼이 누구에게나 더 감정적으로 다가갈 수 있다
마치며,
"Human, Humanity"
이것이 애플에서 가장 큰 디자인 철학이라고 한다
모두를 위해 디자인한다는 것은 비롯 앱에만 국한되는 것은 아니다
기존에 웹 개발할 때에도 웹 표준을 준수해야한다는 이야기를 들은 적이 있고, 실제로 <div> 태그를 남발하지 않고 텍스트 등을 구분할 수 있도록 노력하고 있다
그러나 아직까지는 앱에서 접근성 측면에 대해서는 고려해본 적이 없는 듯 하다
(iOS 앱 개발할 때 SF Symbol을 애용했다는 것 말곤,,,)
접근성 측면, 즉 VoiceOver나 아이콘 Localization, Dynamic Type 같은 부분은 개발자가 더 집중적으로 챙겨주어야 하는 부분이니만큼 더 자세히 공부해보면 좋을 것 같다
VoiceOver 기능이 가장 흥미로운데, 현재 출시되어 있는 Velog-log 앱에 적용해보면 재밌을 듯 하다 (화이팅)
