라이브러리 없이 성능과 접근성을 동시에 잡는 법

라이브러리 없이 성능과 접근성을 동시에 잡는 법

순수 CSS 아트와 WebAssembly 브라우저 도구—두 실증 사례가 보여주는 '웹 표준만으로 Core Web Vitals를 극한까지 끌어올리는' 설계 철학

순수 CSS WebAssembly Lighthouse 접근성 Core Web Vitals 브라우저 퍼스트 lazy-loading 웹 표준 설계
광고

외부 의존 없이 얼마나 멀리 갈 수 있을까

프레임워크와 AI 도구가 넘쳐나는 시대에, 역설적으로 가장 설득력 있는 프론트엔드 사례들은 종종 '아무것도 추가하지 않은' 프로젝트에서 나온다. 최근 dev.to에 공개된 두 프로젝트—순수 CSS 아트 랜딩 페이지 Taste of Punjab와 80개 이상의 브라우저 기반 유틸리티 모음 EazyStudio—는 웹 표준 기술만으로 성능과 접근성을 극한까지 끌어올릴 수 있다는 사실을 각자의 방식으로 증명한다.

CSS 한 줄이 이미지 한 장을 대체할 때

Taste of Punjab는 펀자브의 음식 문화를 주제로 한 랜딩 페이지인데, 놀라운 점은 페이지 전체에 이미지 파일이 단 하나도 없다는 것이다. 황금빛 밀밭, 흙집 침대(charpai), 8개의 음식 카드, 6단계 '농장에서 식탁까지' 타임라인—모든 시각 요소가 순수 CSS로 직접 그려진 일러스트다. Vite와 바닐라 JavaScript(ES6)만을 스택으로 선택하고, 외부 이미지 에셋과 아이콘 라이브러리를 완전히 배제했다.

결과는 수치로 증명됐다. Lighthouse 점수는 성능 97, 접근성 100, Best Practices 100, SEO 100. 이미지 최적화나 lazy-loading 전략 없이도 이 수치가 가능한 건, 애초에 로드할 이미지 자체가 없기 때문이다. 키보드 접근성과 reduced-motion 지원까지 챙겼다는 점에서, 이 프로젝트는 퍼포먼스 최적화와 접근성이 사실상 같은 방향을 바라보고 있음을 보여준다.

브라우저를 서버 삼아 80개 도구를 운영하는 설계

EazyStudio의 출발점은 단순한 불편함이었다. PDF 하나 압축하려다 회원가입 요구, 광고 폭격, 서버 업로드라는 세 가지 장벽을 연달아 맞닥뜨린 경험. 해법으로 선택한 건 '브라우저 퍼스트' 아키텍처였다. PDF 처리에는 PDF.js와 pdf-lib, 이미지 작업에는 Canvas API와 WebAssembly(WASM) 모듈, 배경 제거에는 클라이언트 사이드 WASM 기반 세그멘테이션 모델을 적용했다. 파일이 서버에 닿지 않으니 프라이버시 문제도, 업로드 왕복 지연도, 스토리지 비용도 없다.

기술적 도전은 WASM 모듈의 초기 로딩 비용이었다. 해결책은 정직하게 단순했다—lazy-loading. 특정 도구를 처음 사용하는 순간에만 해당 WASM 모듈을 불러온다. 서비스 워커로 이후 캐싱을 처리하고, WASM을 사전 컴파일해 응답 시간을 줄였다. 80개 도구 중 지금 쓰지 않는 도구의 비용은 사용자가 절대 치르지 않는 구조다.

'공짜'가 진짜 공짜일 때 생기는 신뢰

이 프로젝트가 기술 이상의 인사이트를 주는 건 제품 철학 측면에서다. 개발자는 런칭 후 사용자 반응을 통해 몇 가지를 학습했다고 밝혔다. 사람들이 회원가입을 예상보다 훨씬 더 싫어한다는 것, '무료'라는 단어가 잠긴 기능 하나로 인해 즉시 불신으로 전환된다는 것, 그리고 3초 이상 걸리는 도구는 기능적으로 완벽해도 '망가진' 것으로 느껴진다는 것. 이 세 가지 관찰은 사실 Core Web Vitals가 측정하려는 것과 정확히 겹친다—로딩 속도, 인터랙션 반응성, 시각적 안정성.

두 사례가 함께 가리키는 설계 철학

두 프로젝트의 공통 언어는 '제거'다. Taste of Punjab는 이미지를 제거했고, EazyStudio는 서버 의존성을 제거했다. 그 결과로 얻은 건 단순히 높은 Lighthouse 점수가 아니라, 불필요한 레이어가 없는 구조 자체가 최적화로 이어지는 설계다.

AI 도구가 코드 생성을 가속화하는 지금, 이런 사례는 중요한 대조점을 제공한다. 빠르게 생성된 코드가 반드시 빠르게 동작하는 코드는 아니다. 오히려 레이어를 추가할수록—라이브러리, 서버 요청, 외부 에셋—개발자가 통제할 수 없는 성능 변수가 늘어난다. 순수 웹 표준 접근법은 그 변수를 최소화하는 선택이다.

전망: 제약이 설계를 만든다

웹 기술 스택이 복잡해질수록, 오히려 '이걸 빼도 되는가'를 묻는 설계 감각이 더 희귀해지고 가치 있어진다. React Server Components나 Partial Prerendering 같은 최신 기술도 결국 '필요한 것만, 필요한 때에 전달한다'는 철학의 연장선에 있다. Taste of PunjabEazyStudio가 보여준 건, 그 철학이 최신 프레임워크 없이도 이미 구현 가능하다는 사실이다.

제약은 창의성을 막는 조건이 아니라 설계 결정을 선명하게 만드는 조건이다. 무엇을 추가할지보다 무엇을 제거할지를 먼저 묻는 습관—그것이 성능과 접근성을 동시에 잡는 설계의 출발점이다.

출처

더 많은 AI 트렌드를 Seedora 앱에서 확인하세요