웹 접근성(디지털 접근성)은 흔히 a11y로 줄여서 표기합니다.장애가 있는 사람들도 웹사이트와 웹 앱을 의미 있고 동등하게 이용할 수 있도록 설계하고 개발하는 것을 말합니다.많은 팀이 접근성을 "챙기면 좋은 배려" 정도로 생각합니다.시간 여유가 있으면 하고, 일정이 빠듯하면 미루는 항목이요.그런데 이건 배려의 문제가 아니라 숫자로 증명되는 비즈니스 문제에 가깝습니다. 놓치는 사용자 규모, 놓치는 매출만 생각해도 그렇습니다.이렇게 들으면 뭔가 별도로 배워야 할 새로운 기술처럼 느껴지실 수도 있는데,사실 접근성은 새로운 무언가를 더하는 작업도 아닙니다.오히려 우리가 이미 쓰고 있는 HTML, CSS, 그리고 디자인 판단들을 '누구나 쓸 수 있는가'라는 기준으로 다시 점검하는 일에 가깝습니다.왜 중요한가? -..

Web Animations API(이하 WAAPI)는 자바스크립트로 애니메이션을 정교하게 제어할 수 있는 표준 웹 API입니다.이것이 낯설다해도 걱정하지 마세요.사실 WAAPI는 새로운 무언가를 더하는 기술이 아닙니다.오히려 각자 따로 놀던 CSS, JS, SVG의 애니메이션 방식을 하나의 통일된 방식으로 묶기 위해 만들어진 API입니다.기존 애니메이션 방식들은 왜 통합이 필요했을까?1. CSS 애니메이션 / 트랜지션@keyframes spin { ... }div { animation: spin 2s infinite; }장점 : 간단하고 성능 좋음단점 : JS로 세밀하게 제어하기 매우 어려움 2. SVG 애니메이션SVG 전용 애니메이션 문법CSS와 문법도 다르고 JS 제어도 다름일부 브러우저 지원 불완전..

유튜브의 부드러운 버튼 인터렉션을 어떻게 구현했을까 하는 궁금증에유튜브를 사용하며 개발자도구를 살펴보다가낯선 html태그를 발견했습니다. 사진을 보시면 ytd(유튜브) 접두어로 시작하는 커스텀 태그들이 보입니다. ... ... 이걸로 보아 유튜브는 프론트엔드를 구현할 때표준 브라우저 기술인 Web Components를 사용하여 구현했다는 것을 알 수 있습니다.Web Components란?리액트는 UI단위들을 컴포넌트라는 단위로 만들어두고 재사용하는 것을쉽게 만들어주는 라이브러리입니다.특히 UI에 보여줄 데이터를 상태(state)에 저장해놓으면이 상태가 변할 때마다 UI가 자동으로 업데이트된다는 아주 강력한 기능을 가지고 있죠.이를 JS만으로 구현한다면 리액트로 3줄만에 끝날 것을 아마 20-30줄..

웹 컴포넌트를 만드는 3가지 표준이 있습니다 :HTML 템플릿 ()사용자 정의 요소Shadow DOM이들을 조합하면 재사용 가능하고 캡슐화 된 컴포넌트를 만들 수 있어요. (React 없이도!) 웹 컴포넌트를 이용해서 위와 같은 rating컴포넌트를 만들어보겠습니다. 웹 컴포넌트 만들기 1. template 제작컴포넌트를 만들때 요소를 사용합니다 요소는 DOM에 미리 정의해놓는 HTML 조각입니다.html상 존재하더라도 기본적으로 화면에 표시되지는 않습니다.화면에 표시되게 하려면 JS로 DOM에 삽입해줘야 합니다.클론 및 삽입할 수 있는 HTML 구조를 선언할 때 사용합니다. 일단 기본 템플릿 먼저 만들어봅시다.HTML코드와 CSS를 아래와 같이 짜봅시다. Rate your expe..

오늘은 개발자 뿐만 아니라 디자이너, 기획자 모두에게 유익한"이미지에 대한 이해"를 코스요리로 준비했습니다. 순서대로 읽는 것이 가장 좋습니다.본에피티~🥗 에피타이저먼저 이미지의 대분류인 래스터 vs 벡터에 대해 알아보며 입맛을 돋우어 보겠습니다. 🧑🏻‍🍳 침샘 자극 포인트 :왜 벡터이미지는 확대/축소해도 깨지지 않을까?근데 왜 래스터이미지를 사용하는걸까? SVG는 무조건 가볍다? 과연 그럴까?"SVG가 제일 가볍지 않나요?"👉 이 말, 정답일까요?제가 웹개발을 하면서 기획자에게 들은 질문입니다.✅ 정답 : 경우에 따라 달라요!SVG가 항상 제일 가볍다?아닙니다. 이미지의 종류에 따라 다릅kasts91.tistory.com🥩 메인 요리이미지 포맷 별 이해를 통해각 포맷으로 인코딩 될때 어떤 일..

앞선 글에서는 서술적 문법(Descriptive syntaxes)을 통해브라우저에게 이미지 선택을 맡기는 방식을 다뤘습니다.(이전 글 보기) 이번 글에서는 반대로, 개발자가 직접 이미지 선택을 지시하는 방식을 소개합니다.바로 태그를 이용한 지시형 문법(Prescriptive syntaxes)입니다.지시형 문법의 목표?로딩 최적화 ❌ → 이건 브라우저에게 맡기는 게 더 효율적입니다.조건별 UI 제공 ✅ → 브라우저 환경에 따라 다른 이미지를 보여주는 게 목적입니다. 👉 예시 상황 :뷰포트 크기 별 이미지 레이아웃을 다르게 보여주기사용자의 브라우저 언어에 맞는 이미지를 자동으로 보여주기 (ko이면 한국어 이미지, en이면 영어이미지)사용자 시스템 컬러(다크모드, 브라이트모드)에 따라 다른 이미지 보여주기..