Design for everyone

https://uxdev.org/entry/%ED%95%9C%EA%B8%80-%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%9E%90%EA%B0%84letter-spacing-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C%EC%83%81%EB%8C%80%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%A1%B0%EC%A0%95%ED%95%98%EA%B8%B0

CSS letter-spacing의 적용:  em의 사용 권장

CSS의 경우 한글 폰트를 대상으로는 letter-spacing을 보통 -1px ~ -2px로 주는 것이 일반적입니다. 다만 이 경우 폰트 사이즈가 커지는 경우에 값을 다르게 설정해 주어야 하는 것과 같은 불편이 있습니다. 텍스트가 커져도 동일한 비율로 자간이 좁아지는 방법이 있으면 더욱 편하게 작업이 가능할 것입니다. 이럴 때를 대비해서 em 유닛을 쓰는 것을 저는 추천드립니다. 특히 적용 scope를 em 유닛을 통해서 전체 개체에 적용하게 함으로써 시간을 절약할 수 있습니다. 16px를 본문 기본 폰트 사이즈로 산정할 경우 1/16인 0.0625em를 이용하면 -1px의 효과를 전체 텍스트에 적용할 수 있습니다. 값을 더 늘려야 하는 경우 2/16 또는 1/14 등의 산술을 통해서 값을 변화시킬 수 있습니다. em은 자신 또는 직계 부모 개체의 font-size 값을 바로 상속받아 동일한 배율로 값을 산정하는 단위입니다. rem은 문서의 기본 폰트 사이즈만을 상속받으므로 여기에서의 사용은 다소 부적절합니다.

(내용추가) 동일한 %의 자간을 설정하길 원한다면, 예를 들어 모든 텍스트에 -4%의 자간을 설정하고 싶다면  0.4em을 모든 텍스트에 적용해 주면 자동적으로 상대적으로 비율이 조정되는 효과를 낼 수 있습니다.

부끄럽지만 em 유닛에 대해 오늘 처음 알았다.

✅오늘의 아티클

• (주)이니션 - 콘텐츠 서비스 시니어 모드 UI/UX 가이드라인 참고

📌핵심 내용

배경

• 기대수명 연장, 고령화 사회 진입 -> 실버산업의 중요성 대두, 실버산업 시장 발전
• 적극적이고 진취적인 스마트 시니어 문화가 지속적으로 증가하기에, 차별없고 원활한 문화향유 서비스 제공이 필요함

사용 기기

• 주로 웹보다는 스마트폰 사용

선호 장르

• 뉴스, 드라마, 서사, 가족, 멜로 장르 선호도가 높음

색상

• 고령자는 시각 감퇴로 인해 시각의 폭과 사물을 정밀하게 볼 수 있는 능력 뿐 아니라 정보 패턴 인식능력이 떨어짐
• 일반인보다 강한 색채 대비가 필요함
• 보라 남색 파랑보다 노랑 주황 빨강을 더 잘 식별함
• 명도가 높고 선명한 색 사용
• 다양한 색상 사용은 자제하고, 일관성 유지

기호

• 텍스트만 사용하는 아이콘보다는 이미지 선호, 확실한 상징성 필요
• 미니멀리즘보다는 질감을 잘 표현하는 스큐어모피즘 디자인 선호하는 경향

레이아웃

• 시각정보를 받아들이는 순서와 시간을 측정하는 eye-tracking 검사결과에 따르면 시니어 그룹의 경우는 눈동자의 움직임 횟수가 적고 특정 콘텐츠에 오래 머무는 경향이 있음 -> 콘텐츠의 양을 줄이고, 주요한 콘텐츠를 중심에 배치

관습의 수용

• 각 요소들을 배치하는 데 있어 기존의 관습을 따르는 것이 좋음 -> 일반적으로 흔히 예상하는 위치에 해당 기능을 두는 것이 좋다.

서체

• 가독성이 좋은 산세리프형 서체를 사용하고, 장식적인 서체는 지양
• 볼드체 사용으로 대비를 강하게 하여 가독성을 높여주기
• 노화로 인한 시력 감퇴가 있으므로 일반인보다는 1~2포인트 크게 사용하기
• 권장 크기는 제목의 경우 18~24포인트, 본문의 경우 12~14포인트를 권장

💭인사이트

• 고령자나 저시력자 모두를 만족시킬 수 있는 정확한 크기 제안은 불가능하기에 글자 크기를 바꿀 수 있는 기능을 제공하면 좋다.
• 정보 접근성 면에서, 고령층의 경우 의문점이나 문제가 생겼을 경우에 가족에게 문의하는 경우가 많다. 이런 방식은 제한적이므로 언제든지 도움을 줄 수 있도록 적절한 정보 제공을 어떻게 할 것인지?
• 시니어라는 단어를 직접적으로 사용하면 노인과 다른 연령층을 구분짓기에 부정적인 영향을 줄 수도 있을 듯 하다.

✅오늘의 아티클

https://pixso.net/kr/skills/game-ui-design/

📌핵심 내용

게임 UI 디자인이란?

• 게임 UI 디자인은 플레이어가 게임할 때 원활하게 플레이할 수 있게 화면을 설계하는 것. 이는 게임과 플레이어를 이어주는 다리 역할을 하며, 플레이어가 게임 상황과 플레이 메커니즘을 빠르게 이해하고 원하는 정보를 찾고 원활하게 게임을 플레이할 수 있게 합니다. 전투 플레이, 상점 구매, 캐릭터 능력치 등 게임 내 플레이어가 플레이하기 위해 보이는 시각적인 모든 부분이 게임 UI 디자인입니다.

게임 UI 디자인과 일반 UI 디자인의 차이점

• 게임 UI 디자인의 목표는 플레이어를 게임에 몰입시키고 게임 아이템이나 콘텐츠 구매를 유도하는  것입니다. 그래서 우리가 흔히 보는 일반 UI 디자인과는 차이점이 있습니다.
• 플레이어가 게임에 계속 몰입해서 즐기게 하려면 밝고 강렬한 색상, 고해상도 이미지, 매력적인 일러스트레이션, 크고 굵은 폰트 등 눈길을 확 사로잡는 비주얼을 사용해야 합니다.
• 게임 상황을 이해하고 최대한 빠르게 게임을 시작하도록 플레이어가 게임하는 데에 도움이 되는 간단한 제스처를 제공해야 합니다. 스와이프, 클릭, 탭 등 제스처를 배치하여 게임을 이어가도록 안내합니다. 게임 중간중간 짧은 튜토리얼이나 팁을 제공하여 새로운 게임 상황에서도 빠르게 적응하도록 돕습니다.
• 게임 플레이가 되는 화면 중앙에만 집중해서 플레이할 수 있도록 최대한 게임 UI을 최대한 심플하게 디자인해야 합니다.

게임 UI 디자인 10가지 원칙

게임 UI 디자인의 필수적인 요소

• 기다림을 기대감으로 바꾸는 디자인

• 빌드 용량이 가벼운 게임이 아닌 이상 리소스 패치가 불가피(네트워크 상황에 따라 짧게는 1분 이내, 길게는 10분)
• 이 때 플레이어가 이탈하지 않도록 업데이트 후 즐길 수 있는 신규 콘텐츠나 캐릭터에 대한 정보를 제공하기
• 리소스 패치 예상 시간을 보여줘 기대감을 높여주어야 함

• 선택 과부하를 줄이는 디자인

• 모바일 게임을 실행하고 처음 보는 UI 디자인은 메인 화면
• 정보를 확인하는 화면이기 때문에 장르에 따라 적게 10개에서 많게 30개가 넘는 버튼이 있음
• 이때 플레이어는 선택 과부하로 정신적 피로도가 생기고 압박받기 때문에 플레이 몰입에 방해가 됨
• 버튼 가짓수를 줄일 수 없다면 유사한 기능 혹은 요소끼리 묶어 메뉴를 제공하면 복잡성이 감소

• 가로/세로 반응형 디자인

• 대부분 모바일 게임은 가로 화면 혹은 세로 화면 한 가지 방향 UI 디자인만 제공해 불편
• 플레이어의 상황에 맞게 최적화된 화면에서 플레이하게 하면 언제 어디서든지 게임 몰입감을 높일 수 있음
• 반응성 설계 관련 지식

• 커스터마이징하는 디자인

• 플레이어마다 느끼는 게 다르기 때문에 모두를 만족하긴 어려움
• 누군가는 조작 키의 방향이 불편할 수 있음
• 왼손잡이 혹은 오른손잡이에 따라 플레이 중간 눌러야 하는 버튼을 누르기 어려울 수 있음
• 플레이 사용성을 고려하여 플레이어 개개인 맞춤 UI 커스터마이징을 할 수 있도록 환경 조성

💭인사이트

• 유저가 계속해서 게임에 몰입하게 해야 한다는 점, 아이템 구매 유도 등을 위한 눈길을 사로잡는 디자인 등 게임UI디자인과 일반적인 UI디자인의 차이점도 분명 있으나 UI디자인의 필수 요소 면에서는 공통점이 더 많다고 생각한다.
• 게임은 화려한 시각적인 효과나 그래픽 디테일에 치중하기 쉬운데, 아무리 비주얼 퀄리티가 좋다한들 실현가능성이 없다면 무용지물이라는 것이며 좋은 UI는 실현 가능성+유저+팀원에 대한 이해가 함께 고려된 UI라는 것이다.
• 개발 구현에도 편리하도록 디자인해야 하니, 개발에 관한 지식을 갖추는 것도 중요한 것 같다.
• 서비스를 이용하는 데 있어서 ‘이거 어떻게 해요?’라는 이야기가 나오면 실패한 디자이너라고 한다. 게임을 즐기는 유저가 길을 잃지 않도록 올바른 길을 만들어 주자.