인쇄물이 아닌 웹에 알맞는 디자인적 사고는 무엇일까? 인클루시브 디자인이다. 이는 모든 사용자를 포괄 할 수 있는 디자인적 사고방식을 의미한다.
단순히 화면에 출력하는 것 뿐만 아니라 사용자가 처한 상황을 다각도로 고려하는 사고방식.
하나의 버튼을 다음과 같이 2가지 형태로 구현 가능하다.
이미지형태의 버튼이라고 가정하자.
<div onClick={handleClick} class="button"></div>
<button onClick={handleClick} class="button"></button>
.button{
background : url('../images/button')
}
- 이미지를 확대하거나 축소(웹에서 확대, 축소기능) 하면 => 이미지가 깨지는게 아닌가?
- 사용자가 네트워크 사용량을 아끼려고 브라우저에서 이미지 로딩 옵션을 끈다면?
- div 태그는 키보드로 포커스를 주거나 조작 할 수 없다.
- 스크린 리더는 div태그를 => 버튼으로 인식하지 못한다.
- 크기조절이 가능하다.
- 스크린리더 인식, 포커스를 줄 수 있다.
- 스타일적용, 유지보수가능, 간단하다.
Doctype : 웹 페이지는 하나의 문서다. 문서 형식 선언이라고도 하며, 웹 페이지에게 내가 만드는 혹은 사용하는 이 문서가 어떤 형식인지 알려주는 것.
Doctype은 매우 중요하다. => Doctype 선언이 누락되면 브라우저는 예측할 수 없는 잘못된 동작을 일으 킬 수 있고, 표준을 준수하지 않는 비호환모드로 전환된다.
최근에는 HTML5 선언방식을 많이 사용하는 추세
참고) DOCTYPE 선언방식 : https://sdsupport.cafe24.com/reference/html/doctype.html
사용된 언어를 알려줌
페이지 안에서 언어를 전환 할 수도 있음. => 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 */
}
font를 로드할 때 발생하는 두가지 현상
FOIT(Flash Of Invisible Text) : 폰트가 완전히 로드되기 전까지는 사용자는 텍스트를 볼 수 없다.
- 사용자 정의 웹 글꼴이 완전히 로드되어 적용될 때까지 브라우저는 텍스트를 숨깁니다.
- 이 기간 동안 사용자에게는 텍스트가 있어야 할 자리에 공백이 표시됩니다.
- FOIT는 일부 브라우저가 대체 글꼴을 일시적으로 표시하지 않기 위해 웹 글꼴을 사용할 수 있을 때까지 텍스트를 숨기도록 선택하기 때문에 발생합니다.
- 브라우저는 처음에 대체 글꼴을 사용하여 텍스트를 표시합니다.
- 사용자 정의 웹 글꼴이 로드되면 대체 글꼴이 원하는 사용자 정의 글꼴로 대체됩니다.
- 이로 인해 스타일이 없거나 스타일이 다른 텍스트가 잠깐 깜박입니다.
- font-display: auto;(기본값) — 브라우저가 최선의 접근 방식을 결정합니다.
- font-display: block; — 글꼴이 로드될 때까지 텍스트가 표시되지 않으므로 FOIT가 발생할 수 있습니다.
- font-display: swap; — 글꼴이 로드될 때까지 대체 텍스트를 표시하여 FOUT을 발생시킵니다.
- font-display: fallback; — swap과 유사하지만 텍스트가 표시되지 않는 기간이 더 짧습니다.
- font-display: option; — 글꼴이 빠르게 로드되지 않으면 대체를 사용합니다.
<link rel="preload" href="customfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Font Face Observer와 같은 라이브러리도 사용 가능함.
Next에서의 font FOUT 핸들링 방법
// 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;
<!-- 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>
// 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 => 스크린 리더가 인식하고 소통 할 수 있는 영역을 의미. 뷰가 렌더링되는 곳에 딱 한번만 사용되어야 한다.
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;
}
line-height : 행간은 문자사이의 공백의 1.5배 보다 커야한다.
글자가 16px이라면, line-height는 24px이상이여야 읽기 편하다. 단위가 없는 비율을 지정한다.
p {
font-size : 1rem;
line-height : 1.5;
}
HID(HUMAN INTERFACE DEVICE) 관점에서 인터페이스를 바라보기.
어떤 요소에 키보드 접근성을 지원하게 한다면?
- 그 요소가 포커스를 받을 수 있어야 함.
- 요소가 화면에 보여야 함.
- 요소의 현재 포커스 상태도 눈에 보여야 함.