지속 가능한 웹 디자인

웹도 탄소를 낸다

인터넷은 전기로 돌고, 그 전기의 상당 부분은 여전히 화석 연료로 만든다. 데이터 센터, 통신망, 사용자 기기가 모두 전기를 쓴다. 그런데 웹페이지는 해마다 무거워진다. 개발자가 할 수 있는 일은 생각보다 많고, 그 일은 성능·사용자 경험 개선과 거의 같다.

측정할 수 없으면 줄일 수 없다

에너지 사용량을 직접 재기는 어렵다. 대신 쓸 수 있는 대리 지표가 있다.

지표	보는 곳
전송 데이터	개발자 도구 Network 탭의 transferred 값(압축 후 실제 전송량), WebPageTest
클라이언트 CPU·메모리	브라우저 작업 관리자, Performance 패널
서버 자원	`top` 같은 시스템 모니터
탄소 환산	Website Carbon Calculator 같은 도구가 전송량을 CO2 추정치로 바꿔 준다

줄이는 방법

1. 만들지 않은 기능이 가장 가볍다

가장 성능 좋고, 접근하기 쉽고, 관리하기 쉬운 기능은 처음부터 만들지 않은 기능이다. (Heydon Pickering)

새로 만들거나 개편할 때 페이지의 요소마다 "이게 어떤 가치를 주나?"를 묻는다. 사이드바가 있어야 한다는 관습 때문에 넣은 사이드바는 빈 공간을 채울 뿐이다.

이 원칙을 극단까지 민 예가 WordPress 테마 「Susty」다. 메뉴조차 별도 페이지로 빼서 첫 페이지 전송량이 10KB도 안 된다. 실서비스 모범이 아니라 어디까지 덜어낼 수 있는지 보여 주는 실험이다.

2. 요청 하나하나를 의심한다

흔한 요청	물어볼 것
jQuery 전체	몇 줄의 DOM 조작이면 네이티브 JS로 충분하지 않나
캐러셀	이미지가 정말 다 필요한가. 사용자 대부분이 캐러셀에 주목하지 않는다는 조사(Should I Use A Carousel?)가 있다. 강한 이미지 하나로 줄일 수 있나
이미지	더 효율적인 형식(AVIF·WebP)과 알맞은 크기로 주고 있나(반응형 이미지)
웹 폰트	내려받은 폰트를 다 쓰나. 시스템 폰트 목록으로 대신할 수 없나
유튜브 임베드	재생하지 않아도 수 MB를 받는다. 링크나 클릭 후 로드로 바꿀 수 없나
CMS 기본 스크립트	WordPress 이모지 감지 스크립트처럼 쓰지 않는 기능을 끌 수 있나
분석 도구	"오늘 6명이 페이스북에서 왔다"는 숫자로 무엇을 결정하나. 쓰지 않는 분석은 무게와 개인정보 문제만 남긴다

3. CSS도 바이트다

쓰지 않는 CSS를 걷어내는 도구(PurgeCSS)로 CSS를 259KB에서 9KB로 줄인 사례가 있다.
div와 클래스를 남발하기보다 요소 선택자와 상속을 활용하면 HTML·CSS가 함께 준다.
HTML·CSS·JS는 늘 압축(minify)하고, 이미지는 늘 최적화하고, 점진적으로 렌더링되게 한다.

4. 서버 쪽에서 할 일

항목	내용
압축	텍스트 자원은 Brotli(또는 gzip)로 항상 압축한다
서버 캐시	Nginx FastCGI 캐시, WordPress 캐시 플러그인으로 매 요청마다 PHP·DB를 돌리지 않는다
HTTPS + HTTP/2·HTTP/3	연결 수립을 줄이고, 서비스 워커 같은 기술을 쓸 수 있게 된다(PWA와 서비스 워커 캐시 전략)
재생 에너지 호스팅	호스팅을 재생 에너지로 옮기는 것이 개발자가 줄 수 있는 가장 큰 영향 중 하나다. The Green Web Foundation이 친환경 호스트 목록을 관리한다

피할 수 없는 배출은 탄소 상쇄를 고려할 수 있지만, 나무가 탄소를 흡수하는 기간은 100년 단위라 지금 배출을 줄이는 대안은 아니다. 먼저 줄이고, 남는 것을 상쇄한다.

지속 가능성 = 좋은 웹

지속 가능한 웹 디자인을 실천하면 따라오는 것:

더 나은 성능
더 나은 사용성
더 나은 접근성
더 낮은 서버 부하
더 나은 검색 엔진 최적화

방문자가 많은 사이트일수록 효과가 커진다. W3C Sustainable Web Interest Group이 펴내는 「Web Sustainability Guidelines(WSG)」(2026년 기준 Draft Note)는 이 원칙들을 UX·개발·호스팅·비즈니스 항목별 지침으로 정리한다. 환경을 이유로 한 양보가 아니라 원래 해야 할 웹 모범 사례다.

정리

에너지 사용은 전송량·CPU·서버 자원으로 어림한다.
가장 가벼운 기능은 만들지 않은 기능이다. 요소마다 존재 이유를 묻는다.
jQuery·캐러셀·웹 폰트·임베드 영상·분석 스크립트를 의심한다.
서버 압축·캐시, 재생 에너지 호스팅까지 챙긴다.
지속 가능한 웹은 곧 빠르고 접근하기 쉬운 웹이다.

버그 제보