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이면 영어이미지)사용자 시스템 컬러(다크모드, 브라이트모드)에 따라 다른 이미지 보여주기..

웹에서 이미지 로딩은 성능과 사용자 경험에 큰 영향을 줍니다.같은 이미지를 어떻게 제공하느냐에 따라 페이지 속도, 데이터 사용량, 화면 품질이 달라집니다.이미지 최적화를 위해 두 가지 문법 접근 방식이 있습니다:Descriptive Syntax (서술적 문법)→ 브라우저에게 여러 후보 이미지를 제공하고, 브라우저가 스스로 선택하게 맡김.Prescriptive Syntax (명령적 문법)→ 개발자가 직접 조건을 지정하고, 어떤 이미지를 써야 할지 명시적으로 지시.이 글에서는 효율적인 로딩을 위해 꼭 알아야 하는 서술적 문법 (Descriptive Syntax)에 대해 설명하겠습니다.Descriptive Syntax란?서술적 문법은 간단히 말해 :브라우저야, 이미지 후보들은 내가 줄게. 어떤 걸 쓸지는 네가..