🔖 2022년 2월 1주 TOP3

🔖 2022년 2월 1주 TOP3

 웹 디자인의 이상적인 글줄 길이와 라인 높이

*line length: 글줄 길이 / *line height : 라인 높이(행간)

오늘, 모래 위에 선을 긋고, 그 길이와 높이를 보고, 항상 그것을 고려하기로 약속할 것입니다! 이것은 많은 사람들이 관심을 기울이지 않는 것입니다. 텍스트를 적절하게 설정하려면 라인 높이와 글줄 길이가 중요하며 이 문서와 비디오에서는설정할 때 주의해야 할 사항을 알려주겠습니다.

데스크톱 장치에서 텍스트를 읽을 때 이상적인 글줄 길이는 60-80자이고 라인 높이는 약 1.5-1.6입니다. 항상 서체에 따라 다르며, 글줄이 짧을수록 특히 제목의 경우 라인 높이가 낮아질 수 있습니다. 무엇보다도, 그것을 가능한 한 작게, 필요한 만큼 느슨하게 만드세요.

이 기사는 텍스트를 올바르게 설정하는 기본 사항에 대한 제 미니 시리즈의 2부이며, 폰트 사이즈에 대한 내용을 다뤘습니다. 거기에서 저는 이미 폰트 사이즈, 글줄 길이, 라인 높이라는 타이포그래피의 삼위일체 개념을 다뤘습니다. 이제 두후자의 이중성을 숭배하기로 합시다.

저는 주로 웹 디자인을 위해 장시간 계속 읽는 텍스트 설정에 주안점을 두는데 모바일이나 표제 같은 디스플레이 텍스트도 다룰 것입니다.

숨겨진 목표는 무엇입니까?

잘 설정된 텍스트의 목표는 균일한 타이포그래피 조화로움(even typographic color)입니다. 그리고 색상은 파란색이나빨간색을 의미하는 것이 아닙니다. 너무 촘촘하지도 너무 헐렁하지도 않은 읽기에 좋은 텍스트를 원한다는 뜻입니다. 

아래의 예를 살펴보고 반드시 읽지 않고 보기만 해도 느끼는 것에 주의를 기울이며 제 말의 의미를 알 수 있을 것 입니다. 전화에서 이 기사를 읽는다면 글줄 길이가 데스크탑 화면을 향하기 때문에 가로 방향으로 회전하고 싶을 수도 있습니다. (이미지 참고)

위의 모든 예제는 동일한 글꼴 크기로 Inria Sans라는 동일한 폰트로 설정되었으며 약 75자 정도의 동일한 글줄 길이를갖고 있습니다. 그들을 구별하는 것은 라인 높이입니다. 따라서 얼마나 많은 영향을 미치는지, 텍스트를 얼마나 간결하게설정했는지 알 수 있습니다.

..

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

10가지 접근성 모범사례

다음 10가지 방법으로 사이트의 접근성 점수를 높여보세요

웹 최적화와 관련하여, 접근성은 누구도 언급하고 싶지 않는 주제 중 하나이지만 누구나 해야 합니다. 물론 프로젝트에 따라 접근성이 항상 최우선 순위는 아니라는 점을 언급하는 것이 중요합니다. 그러나 수많은 사람들이 사용하는 트래픽이많은 웹 사이트에는 접근 가능한 콘텐츠를 만들기 위한 전략이 필요합니다.

세계보건기구(WHO)에 따르면, 세계 인구의 15%가 일종의 장애를 안고 살고 있습니다. 당신의 웹사이트 접근하고 사용하는 데 잠재적으로 문제가 있을 수 있는 사람은 10억 명이 넘습니다.

당신이 생각해야 할 장애 유형입니다.

접근성 개선할 때, 다음과 같은 장애를 고려해야 합니다.

이를 염두에 두고 위의 모든 항목에 대해 사이트의 접근성을 개선하기 위한 10가지 모범 사례를 살펴보겠습니다.

#1: 시맨틱(Semantic) HTML의 사용

이슈:

HTML에서 시작하여 가장 일반적인 것 중 하나는 시맨틱(Semantic) HTML이 부족하다는 것입니다. 시맨틱(Semantic) 요소는 요소의 의미를 명확하게 설명하는 데 사용됩니다. div 또는 span과 같은 의미 없는 요소는 내용에 대해 아무 것도알려주지 않습니다. 스크린 리더와 보조 장치는 HTML이 설명적이지 않은 경우 콘텐츠가 무엇인지 파악하기 어렵습니다.

해결책:

header, nav, main, article, aside 또는 footer과 같은 콘텐츠를 정의하는 시맨틱(Semantic) HTML 요소를 사용합니다. 스크린 리더는 텍스트를 음성으로 변환할 뿐만 아니라 HTML 요소의 정보도 사용합니다. 추가 의미 체계를 제공함으로써 그들이 따를 수 있는 명확한 구조를 가지고 있기 때문에 그들의 일을 쉽게 할 수 있습니다.

#2:대체 텍스트 사용

이슈:

HTML을 계속 사용하는 경우, 이미지와 같은 텍스트가 아닌 요소에 대한 대체 텍스트를 생략하는 것입니다. 이러한 요소는 시각 장애가 있는 사용자가 해석할 수 없거나 어려운 시각적 단서만 제공합니다.

해결책:

항상 정보 요소에 대한 대체 텍스트를 제공합니다. 단, 장식용으로만 사용되며 추가 정보를 제공하지 않는 장식 요소(decorative elements)는 예외입니다. 이것은 링크를 보완하는 아이콘이나 배경 이미지와 같은 것일 수 있습니다. 이러한요소에 대체 텍스트를 사용하는 것은 심지어 방해가 될 수 있습니다. 

비행기 앞에 아이콘이 있는 "공항"이라는 링크가 있다고 상상해 보십시오. "공항"을 아이콘의 대체 텍스트로 정의하면 화면 판독기가 "공항"을 두 번 읽게 되어 노이즈만 증가하고 혼란만 야기합니다. 이러한 경우에는 빈 alt 태그를 사용합니다. 다른 경우에는 img 요소에 alt 태그를 사용하여 이미지에 표시할 항목을 지정합니다. 이것들은 스크린 리더에 의해 큰 소리로 읽힐 것입니다.

#3: aria 속성의 사용 

이슈:

시맨틱(Semantic) HTML과 시각적 요소에 대한 대체 텍스트를 사용하더라도 HTML은 여전히 의미가 부족할 수 있습니다. 페이지에 있는 여러 요소의 역할이나 상태는 HTML만으로는 판별할 수 없으므로, 사용 불가능한 사용자는 내용을해석하기 어렵습니다.

해결책:

적절한 경우 보조 기술에 추가 정보를 제공하기 위해 aria 속성을 사용합니다. 예를 들면요.

앞에서 우리는 장식 요소(decorative elements)의 사용에 대해서도 논의했습니다. 화면 판독기에서 장식 요소(decorative elements)를 완전히 숨겨야 하는 경우, HTML 요소에 aria-hidden="true" 속성을 사용할 수 있습니다.

..

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

디자인부채가프로덕트에미치는영향

프로덕트 및 기술 관련 쪽에 종사하는 경우 '기술 부채'라는 용어에 매우 익숙할 것입니다. 그리고 조금 덜 알려진 사촌격인  '디자인 부채'에 대해서도 들어 보셨을 것입니다.

모든 종류의 부채는 프로덕트에서 진정한 사용자 및 비지니스 가치를 제공하는 데 실질적인 위협이 될 수 있습니다. 

디자인 부채란?

프로덕트의 일관성 없는 UI, 열악한 정보 아키텍처, 불분명한 카피 및 분열된 UX로 파편화되면 이는 '디자인 부채'에 시달리고 있음을 뜻합니다.

2020년에는 b의 디자인과 출시를 주도했습니다.

2020–21년은 탈라바트에 있어 엄청난 규모의 해였으며 우리 프로덕트는 많은 새로운 기능, 기능 및 수직으로 빠르게 성숙했습니다.

프로덕트가 이렇게 빨리 성숙해지면 일부 디자인 부채가 들어오는 것이 당연하지만 너무 분명해지면 문제가 생기게 됨을인식하게 됩니다.

디자인 부채 뒤에 있는 5가지 일반적인 이유

우리의 디자인 부채가 부인할 수 없는 존재로 증가했을 때, '경험에서 디자인 부채를 줄이는 것'은 DesignOps 사명의 일부가 되었습니다.

팀이 분산되어 있는 대규모 조직에서 디자인 부채 문제를 해결하는 것은 상당히 압도적일 수 있습니다. 저의 즉각적인 응답은 대규모 감사와 부채 잔고 내역들을 만들면서 이를 사회화하는 것이었습니다. 그래서 저희 팀은 스프린트에서 Jira 티켓을 받기 시작했고 백로그가 천천히 감소하는 것을 보았습니다.

그런데 놀라운 일이 벌어지고 있었습니다. 우리는 오래된 부채를 갚으면서 새로운 부채를 빠르게 축적하고 있었습니다.  조사를 해보니 다음과 같은 사실을 알게 되었습니다.

디자인 부채는 그 자체로 문제가 아니라 우리가 프로덕트를 디자인하고 제작하는 방식에 뿌리를 둔 더 크고 훨씬 더 깊은문제의 증상입니다.

제 분석에서 저는 왜 프로덕트에 디자인 부채가 쌓이는지에 대한 5가지 일반적인 이유를 발견했습니다.

1. 여정이 아닌 기능을 위한 디자인

모든 것이 폭포수였던 시대에서 이제 애자일의 세계로 진화했습니다. 저는 반복적인 디자인을 믿고 실천하는 사람입니다. 오늘날 A/B 테스트 및 가설 기반 실험과 같은 빠른 반복, 실험 및 전술을 활용하지 않는 성공적인 프로덕트 회사의 이름을 짓는 것은 사실 어렵습니다. 이들은 매우 강력합니다.

특정 기능과 결과에 초점을 맞춘 전술을 적용하다보면 시간이 지남에 따라 이러한 전술이 전체 고객 여정에 미치는 영향을 간과하는 경향이 있습니다.

저희의 디자이너/PM이 단순히 하이파이 화면 여러 개들을 가져 와서 반복 작업을 시작하여 빠르게 움직이려고 노력하고있습니다. - 전체 여정을 보지 못한채 말이지요.

결국 반복할 때마다 약간의 마찰이 발생합니다. 시간이 지남에 따라 이러한 반복적인 변경이 일관성이 없어지고 연결되지 못한 패치가 적용된 사용자 경험이 시작됩니다. 바로 이것이 디자인 부채입니다.

2. 실제 사용자 문제를 해결하지 않을 때

오늘날의 프로덕트 세계에서 모든 사람들은 '사용자 우선', '사용자 중심', '사용자를 위한..' 등등 '사용자'라는 단어로 시작하는 진부한 표현에 대해 이야기합니다.

최고의 사용자 관심과 회사 비전을 가지고 있음에도 불구하고 대부분의 회사들이 사용자와 문제를 제대로 이해하지 못한채 프로덕트를 구축합니다.

'이들은 사용자 문제에 전혀 집중하지 않거나 비즈니스 문제를 사용자 문제로 착각하거나 최악의 경우 사용자에게 없는문제를 만들어내기도 합니다.'

다음은 팀이 'Why'를 건너뛰면서 과연 통찰력만 가지고 솔루션을 찾을 수 있는지에 대한 몇 가지 일반적인 예시들입니다.

..

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램