인클루시브 디자인패턴 1

이수빈·2024년 6월 16일
1

Html, Css, JS

목록 보기
8/14
post-thumbnail

인클루시브 디자인

  • 인쇄물이 아닌 웹에 알맞는 디자인적 사고는 무엇일까? 인클루시브 디자인이다. 이는 모든 사용자를 포괄 할 수 있는 디자인적 사고방식을 의미한다.

  • 단순히 화면에 출력하는 것 뿐만 아니라 사용자가 처한 상황을 다각도로 고려하는 사고방식.

버튼을 예로 들면?

  • 하나의 버튼을 다음과 같이 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 핸들링 방법

  1. 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;
  1. 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>
  1. 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) 관점에서 인터페이스를 바라보기.

  • 어떤 요소에 키보드 접근성을 지원하게 한다면?

  • 그 요소가 포커스를 받을 수 있어야 함.
  • 요소가 화면에 보여야 함.
  • 요소의 현재 포커스 상태도 눈에 보여야 함.
  • 포커스를 받았을 때 기본 스타일을 수정 할 수도 있다.
profile
응애 나 애기 개발자

0개의 댓글

관련 채용 정보