최근에 '인클루시브 디자인 패턴'이라는 책을 읽었다. 아무래도 퍼블리싱-디자인에 가까운 내용이고 대부분의 사용자가 모바일 기기를 사용하며 제공하는 서비스가 아주 다이나믹한(그래서 이 책에서 자주 언급하는 스크린 리더와 전혀 어울리지 않는), 그리고 인터넷 속도의 저점이 매우 높은 우리나라에는 어울리지 않는 내용이 많았다. 하지만 그 중에서도 충분히 주의깊게 읽어 볼만한 내용들이 있었기에 그 내용들을 지금의 내가 가진 생각과 더불어 간략하게 적어두려고 한다.
인클루시브 디자인
인클루시브 디자인이란 타깃이 아니라고 생각되는 소수의 사용자, 그러니까 흔히 말하는 장애인, 고령자, 다른 언어를 사용하는 외국인 등이다. 따라서 우리나라에서는 당연하게 무시하는 스크린 리더 사용자를 포함한다. 이전 어느 웹툰 회사에서 본인들의 사이트에 ARIA 태그 등을 작성하여 표준을 지켰다고 자랑하는 이야기를 본 적이 있는데, 스크린 리더 사용자는 웹툰을 보지 못하는데 무슨 의미가 있었는지 모르겠다(나중에 소설도 제공하여 성공적인 작업이었을거라는 생각도 들었지만 결국 앱으로 제공하더라). 아무튼 이러한 사용자들을 위해 퍼블리싱 및 디자인 중에 어떤식으로 생각하고 진행해야 하는지에 대한 내용이다.
1. 이미 표준으로 채택된 태그를 적극 활용
정말 오래전부터 대부분의 FE 개발자들은 div와 span만을 사용한다. 어차피 스타일이나 스크립트가 적용되기 때문인데, 이러한 습관을 고쳐 button이나 nav, ul-li 등의 표준 태그를 사용하는 것을 권하고 있다. 이 내용은 html5가 화두되었을 때부터 많은 개발자들이 이야기해온 내용이다. 나도 별다른 이견이 없고, 최대한 고쳐나가고 있다. 특히 이런 작업들은 SEO에도 큰 영향을 미치기에 인클루시브 디자인과 관련 없이 중요한 작업이라고 생각한다.
2. ARIA 어트리뷰트를 이용하여 역할을 할당
ARIA 어트리뷰트는 표준화된 태그로 '장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션에 더 쉽게 접근'할 수 있도록 작성되는 일종의 데이터다. 나는 이것에 대해 굉장히 부정적인 편이다. 첫번째로 이것을 지키는 웹 사이트가 극히 드물다. 남들이 안 한다고 하지 말아야 한다는 것은 아니지만 이미 모두가 포기한 것을 지키는 것 또한 불필요한 개발이다. 두번째, 우리나라에서 제공하는 사이트는 대부분 아주 다이나믹하여 단순 리더기로는 작동이 불가능하다. 쇼핑몰이나 컨텐츠 제공 사이트는 당연하고, 뉴스 기사 진입의 시발점인 포털 사이트조차도 화면을 스와이프하고 '더보기' 버튼을 누르는 등, 이미 스크린 리더기 따위로는 범접할 수 없는 괴물이 되어버렸다. 이러한 상황에서 극소수라고 표현할수도 없는, 직접 세는게 더 빠를 사용자를 위해 노력을 들여야 할까라고 묻는다면 아니라고 답할 것이다.
3. 키보드 사용자를 위한 TabIndex 할당
꽤나 여러 부분에 걸쳐 나오는 내용인데, 이 부분은 쉽게 놓치지만 아주 중요한 내용이라고 생각한다. 특히 관리자(admin) 프로젝트나, 상품 구매 정보를 입력하는 페이지에서는 간단한 태그 입력으로 UX를 아주 확실하게 증진시킬 수 있을 것이다. 별 생각 없이 기억 한편에 넣어뒀던 태그지만 나도 앞으로는 더 신경 써보려고 한다.
4. 핀치줌을 막지 말자
meta태그를 이용해 개발 및 QA의 편의성을 위해 핀치줌을 막는 경우가 아주 많다. 하지만 시력이 좋지 않은 사용자에게는 재앙이 될 수 있을 것이다. 개인적으로 화면이 깨질 것을 우려해 일단 막는 스타일인데, 잘 읽어 보니 맞는 말이다. 하지만 가끔 생길 이상한 기기의 이상한 문제 때문에 할 추가 작업을 생각하면 머리가 아프다.
5. 폰트 크기를 고정값으로 작성하지 말자
현재 재직중인 회사에 입사하고 알게된 내용 중 하나다. 대부분의 경우 디자인 시안에 맞춰 12pt와 같은 폰트 크기 고정값을 사용하는데, 이를 1.2rem과 같은 방식으로 쉽게 처리하는 방법이 있다. 바로 html 태그 폰트 사이즈를 62.5%로 잡는 것이다. 브라우저의 기본 폰트 사이즈가 16px인데, html 태그의 폰트사이즈를 62.5%로 잡으면 기본 폰트 사이즈가 10pt가 된다. 이 상태에서 기본 폰트 사이즈에 비례한 크기를 제공하는 rem을 이용하면 1rem = 10px이 된다. 이렇게 잡아두면 폰트뿐 아니라 이미지, 영역 등 제공하는 모든 컨텐츠의 크기를 알맞게 조절할 수 있다. 심지어 이 책에서 나오는 내용 중 하나인 폰트 크기에 맞는 행간도 제공할 수 있다.
6. 난독증/색맹을 위해 디자인하자
이 부분에 대한 내용은 아래와 같다.
- 충분한 자간
- 단락(한줄)의 폭 제한
- 양쪽 맞춤 제거
- 기본 언더라인 스타일 대신 백그라운드를 이용한 언더라인 노출로 글자 겹침 방지
- 색상만으로 구분하지 말 것 (언더라인 등 추가, 이탤릭)
이 중 특히 와닿았던 내용은 백그라운드를 이용한 언더라인이었다. 인터넷 기사를 제공하는 몇몇 언론사 사이트에는 이미 제공되고 있는 것으로, 난독증 환자들에게 치명적인 문자 겹침을 해결할 수 있을 뿐 아니라 내용을 강조하는데 있어서도 아주 강력한 방법이다.
7. SEO 처리를 위한 스키마
JSON-LD, JSON for Linking Data 태그를 이용해 페이지의 내용에 대해 요약한 스크립트를 작성하면 구글 검색엔진에서 별점이나 가격, 위치 등을 검색 결과에 표시해준다. 이는 사용자를 위함이기도 하지만 사용자가 검색엔진에서 진입할 확률도 높여준다.
이번 프로젝트를 진행하며 나도 이 JSON-LD 값을 추가했다. 하지만 아직 구글 검색 결과에 적용되지 않아 이게 되는건가 마는건가 싶다. 특히 SSR을 제공하지 않는다면(서버 템플릿을 이용한다면) 추가하기가 굉장히 복잡하고 골치아픈 값이라 상품을 팔거나 리뷰 노출이 명확한 사이트가 아니라면 고민해봐야 할 것 같다.
8. 버튼 등 인터렉션이 일어날 때 사용자에게 피드백
이는 최근 아주 많이 사용되는 Ripple 버튼이 있다. 크게 어려운 구현은 아니지만 사용자에게 아주 좋은 경험을 줄 수 있는 요소라고 생각한다. 이와 같은 그룹으로 묶을 수 있는 스켈레톤 UI도 이미 굉장한 효과가 있음을 직접 경험했다. 구현도 생각보다 어렵지 않으니 최대한 추가할 수 있도록 할 예정이다. 하지만 디자인 요소이기에 내 마음대로 결정할 수 없다는게 아쉬운 문제다.
마지막으로
앞서 말했듯 우리나라의 실정, 특히 FE 개발자로서는 별로 와닿지 않는 내용이 많아 굳이 추천하지 않는 책이다. 무엇보다 너무 재미가 없다. 완전히 새로운 내용도 아니고 깊게 생각할 내용도 많지 않고... 뭐 누군가에게는 큰 도움이 될 수 있는 책이겠지...
'ECMAScript | TypeScript' 카테고리의 다른 글
| tRPC와 함께하는 Next.js 백엔드 개발 (0) | 2023.03.02 |
|---|---|
| 하이브리드 웹과 BF캐시 (1) | 2022.09.09 |
| Vue.js 2.x SSR시 computed 객체와 template 렌더링 문제 (0) | 2022.07.30 |
| 썸네일과 썸네일 서버 로직에 대해 (1) | 2022.04.03 |
| FE개발자로서 못해준 이야기 2 - 컴포넌트 (3) | 2022.01.18 |