인클루시브 디자인
-
인쇄물이 아닌 웹에 알맞는 디자인적 사고는 무엇일까? 인클루시브 디자인이다. 이는 모든 사용자를 포괄 할 수 있는 디자인적 사고방식을 의미한다.
-
단순히 화면에 출력하는 것 뿐만 아니라 사용자가 처한 상황을 다각도로 고려하는 사고방식.
버튼을 예로 들면?
-
하나의 버튼을 다음과 같이 2가지 형태로 구현 가능하다.
-
이미지형태의 버튼이라고 가정하자.
<div onClick={handleClick} class="button"></div>
<button onClick={handleClick} class="button"></button>
.button{
background : url('../images/button')
}
- div태그로 만들었을 때 발생 할 수 있을 문제점
- 이미지를 확대하거나 축소(웹에서 확대, 축소기능) 하면 => 이미지가 깨지는게 아닌가?
- 사용자가 네트워크 사용량을 아끼려고 브라우저에서 이미지 로딩 옵션을 끈다면?
- div 태그는 키보드로 포커스를 주거나 조작 할 수 없다.
- 스크린 리더는 div태그를 => 버튼으로 인식하지 못한다.
- button 태그는
- 크기조절이 가능하다.
- 스크린리더 인식, 포커스를 줄 수 있다.
- 스타일적용, 유지보수가능, 간단하다.
문서
문서형식
-
Doctype : 웹 페이지는 하나의 문서다. 문서 형식 선언이라고도 하며, 웹 페이지에게 내가 만드는 혹은 사용하는 이 문서가 어떤 형식인지 알려주는 것.
-
Doctype은 매우 중요하다. => Doctype 선언이 누락되면 브라우저는 예측할 수 없는 잘못된 동작을 일으 킬 수 있고, 표준을 준수하지 않는 비호환모드로 전환된다.
-
최근에는 HTML5 선언방식을 많이 사용하는 추세
참고) DOCTYPE 선언방식 : https://sdsupport.cafe24.com/reference/html/doctype.html
lang
-
사용된 언어를 알려줌
-
페이지 안에서 언어를 전환 할 수도 있음. => html에 적용된 lang은 전체 페이지 언어이고, 각각의 body 안에 태그들에 lang 속성을 설정 가능함.
-
스크린 리더가 이를 통해 언어를 인식하기 때문에 매우 중요함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multilingual Page</title>
</head>
<body>
<p lang="en">Hello, world!</p>
<p lang="es">Hola, mundo!</p>
<p lang="fr">Bonjour, le monde!</p>
</body>
</html>반응형 디자인
-
특정 디바이스의 특정 뷰포트 (디바이스에 맞는 미디어 쿼리 중단점)을 기준으로 하는 설계는 의미가 없다.
-
대신 처음부터 완전히 유연한 설계를 해야하며, 콘텐츠가 레이아웃을 망치는 경우에만 중단점을 삽입해야 한다. (콘텐츠 중단점, 조정점이라고 함)
-
반응형 디자인에서 핀치줌은 중요함 => 줌인, 줌아웃을 했을 때 레이아웃이 깨진다면? 잘못된 디자인임. position fixed와 같이 레이아웃을 고정시키는 디자인은 피해야 한다.
폰트크기
-
데스크톱 브라우저는 기본적으로 16px을 기본 폰트크기로 설정 => 이를 상대단위를 통해 조절하는 방식이 적절하다.
-
뷰포트 단위로 텍스트 크기를 조정 할 수도 있다. => 브라우저 전체 페이지 기능으로 확대되지 않음
-
이런식으로 설정해줘야함.
-
뷰포트의 장점 => 뷰포트에 따라 알아서 계산해준다 !!
-
상대단위로 했을 때 => 미디어 쿼리에 따라 종단점 설정 후 해당 종단점마다 em, rem으로 폰트 사이즈가 변경되는데, 실제로 사용하면 조금 끊어지는 느낌이 들 때가 있음.
body {
font-size: calc(1rem + 1vw); /* Combines a base size with a responsive size */
}
h1 {
font-size: calc(1.5rem + 2vw); /* Larger text that still scales with the viewport */
}점진적 향상
- css, js가 없는 상황에서도 콘텐츠를 볼 수 있어야 한다.
자원관리
-
font를 로드할 때 발생하는 두가지 현상
-
FOIT(Flash Of Invisible Text) : 폰트가 완전히 로드되기 전까지는 사용자는 텍스트를 볼 수 없다.
- 사용자 정의 웹 글꼴이 완전히 로드되어 적용될 때까지 브라우저는 텍스트를 숨깁니다.
- 이 기간 동안 사용자에게는 텍스트가 있어야 할 자리에 공백이 표시됩니다.
- FOIT는 일부 브라우저가 대체 글꼴을 일시적으로 표시하지 않기 위해 웹 글꼴을 사용할 수 있을 때까지 텍스트를 숨기도록 선택하기 때문에 발생합니다.
- FOUT(Flash Of Unstyled Text) : 폰트가 로드되기 전에 대체 폰트로 텍스트를 보여준다.
- 브라우저는 처음에 대체 글꼴을 사용하여 텍스트를 표시합니다.
- 사용자 정의 웹 글꼴이 로드되면 대체 글꼴이 원하는 사용자 정의 글꼴로 대체됩니다.
- 이로 인해 스타일이 없거나 스타일이 다른 텍스트가 잠깐 깜박입니다.
- Font display 속성과 preload를 통해 이를 해결 할 수 있다.
- font-display: auto;(기본값) — 브라우저가 최선의 접근 방식을 결정합니다.
- font-display: block; — 글꼴이 로드될 때까지 텍스트가 표시되지 않으므로 FOIT가 발생할 수 있습니다.
- font-display: swap; — 글꼴이 로드될 때까지 대체 텍스트를 표시하여 FOUT을 발생시킵니다.
- font-display: fallback; — swap과 유사하지만 텍스트가 표시되지 않는 기간이 더 짧습니다.
- font-display: option; — 글꼴이 빠르게 로드되지 않으면 대체를 사용합니다.
- preload
<link rel="preload" href="customfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> -
Font Face Observer와 같은 라이브러리도 사용 가능함.
-
Next에서의 font FOUT 핸들링 방법
- Using next/font Utility => swap 방식으로 대체폰트 설정하게 해줌
// pages/_app.js or _app.tsx
import { Roboto } from 'next/font/google';
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
display: 'swap', // Ensures FOUT by showing fallback text until the font loads
});
function MyApp({ Component, pageProps }) {
return (
<div className={roboto.className}>
<Component {...pageProps} />
</div>
);
}
export default MyApp;
- preload 적용하는 방법
<!-- Add this in the _document.js or _document.tsx file -->
<Head>
<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
</Head>- Font Face Observer
// Install Font Face Observer
// npm install fontfaceobserver
import { useEffect } from 'react';
import FontFaceObserver from 'fontfaceobserver';
function MyApp({ Component, pageProps }) {
useEffect(() => {
const font = new FontFaceObserver('CustomFont');
font.load().then(() => {
document.documentElement.classList.add('custom-font-loaded');
});
}, []);
return <Component {...pageProps} />;
}
export default MyApp;title, main
-
title => 접근가능이름, 브라우저 탭 레이블 검색엔진 결과 링크에 사용됨 (아주 중요하다)
-
페이지에 대한 간결한 요약 문구, 검색어로 입력할 가능성이 이는 단어를 포함하면 좋다.
-
main => 스크린 리더가 인식하고 소통 할 수 있는 영역을 의미. 뷰가 렌더링되는 곳에 딱 한번만 사용되어야 한다.
건너뛰기 링크
-
Skip Link. 사용자의 편의성을 위해 존재. 키보드 사용자들에게 메인요소로 이동 할 수 있는 편리한 방법임
-
포커스를 받았을 때만 나타나고, active되면 main content로 이동함.
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
text-decoration: none;
} /* 초기에는 화면밖에 */
.skip-link:focus {
top: 0;
left: 0;
} /* focus를 받으면 나타남 */
단락
폭
-
보편적으로 한 줄의 길이로 45 ~ 75자를 권장.
-
1rem은 소문자 m의 너비와 대략 같다. 60 rem 단락의 폭은 60이라 말할 수 있으며, 읽기 편한 길이
-
이렇게 지정해놓으면, 폰트크기에 상대단위로 지정한 폭도 늘어남.
main {
max-width : 60rem;
}정렬
- text-align : left 사용할 것.
행간
-
line-height : 행간은 문자사이의 공백의 1.5배 보다 커야한다.
-
글자가 16px이라면, line-height는 24px이상이여야 읽기 편하다. 단위가 없는 비율을 지정한다.
p {
font-size : 1rem;
line-height : 1.5;
}포커스 표시
-
HID(HUMAN INTERFACE DEVICE) 관점에서 인터페이스를 바라보기.
-
어떤 요소에 키보드 접근성을 지원하게 한다면?
- 그 요소가 포커스를 받을 수 있어야 함.
- 요소가 화면에 보여야 함.
- 요소의 현재 포커스 상태도 눈에 보여야 함.
- 포커스를 받았을 때 기본 스타일을 수정 할 수도 있다.
