프로젝트 옐로우핑거 소개 연구실 문의하기
contact@yellow-finger.com
02.2205.4128
5 open source tips to reduce waste in web design
웹 디자인의 낭비를 줄이는 5가지 오픈 소스 팁
5 open source tips to reduce waste in web design
Achieve zero waste web design with these open source tools and tips.
이러한 오픈 소스 도구와 팁으로 제로 웨이스트 웹 디자인을 달성하십시오.
요약 :)
"제품"이 손에 쥘 수 있는 실제를 의미했을 때 저는 제품 디자인에서 경력을 시작했습니다.

15년 전 디지털 디자인 분야에 뛰어들었을 때 저는 환경에 영향을 미치지 않으면서 사람들의 삶에 가치를 더하는 디지털 제품을 디자인하는 일에 흥분했습니다.

그들은 에너지를 낭비하지 않았고, 낭비되는 포장도 없었고, 삶이 끝날 때 매립지에서 쓰레기로 끝나지 않았습니다.
더보기→

출처.
Tom Greenwood. (2022.04.21). @eatwholegrain. 5 open source tips to reduce waste in web design. 2022.06.15. https://opensource.com/article/22/4/zero-waste-web-design
"제품"이 손에 쥘 수 있는 실제를 의미했을 때 저는 제품 디자인에서 경력을 시작했습니다. 15년 전 디지털 디자인 분야에 뛰어들었을 때 저는 환경에 영향을 미치지 않으면서 사람들의 삶에 가치를 더하는 디지털 제품을 디자인하는 일에 흥분했습니다. 그들은 에너지를 낭비하지 않았고, 낭비되는 포장도 없었고, 삶이 끝날 때 매립지에서 쓰레기로 끝나지 않았습니다. 따라서 디지털 제품이 낭비라는 사실을 나중에 알고 놀랐습니다. 이 기사에서는 낭비 없는 사고 방식을 디지털 디자인 및 개발에 적용하는 것이 사람과 지구를 위해 더 나은 인터넷을 만드는 데 어떻게 도움이 되는지 탐구합니다. 쓰레기는 정상이 아니다 마음에 들지 않더라도 대부분의 사람들은 쓰레기를 일상의 일부로 받아들이는 것이 맞다고 생각합니다. 그러나 폐기물은 정상이 아닙니다. 자연에서는 자원이 낭비되지 않으며 모든 것이 가치가 있습니다. 우리가 지금 너무 당연하다고 생각하는 폐기물의 유형은 비교적 새로운 개념입니다. 1980년대까지 매립지에 쌓이는 폐기물은 이미 전 세계적인 문제였습니다. Daniel Knapp은 무언가를 해야 한다고 결정했습니다. 그는 쓰레기 매립장이나 소각장에 아무 것도 가지 말아야 한다는 Total Recycling의 개념을 생각해 냈습니다. 그는 쓰레기 제로( Zero Waste ) 라는 용어 를 목표로 만들고 Urban Ore라는 구조 작업을 공동 설립했습니다. 모든 유형의 쓰레기가 매립지에서 어떻게 전환되어 지역 사회에서 재사용될 수 있는지를 보여주는 실제 실험이었습니다. Knapp의 이니셔티브는 어느 정도 성공을 거두긴 했지만 전 세계적인 폐기물 문제는 계속해서 커져갔고 2000년대 중반에 점점 더 많은 사람들이 쓰레기 제로 생활 방식을 살기 위해 자신의 손으로 물건을 가져가기 시작했습니다. 이 개념은 낭비 없이 살기 위해 노력한 경험을 공유하고 다른 사람들에게 영감을 준 Bea Johnson 및 Lauren Singer 와 같은 블로거에 의해 대중화되었습니다 . 이것이 웹 디자인에 어떻게 적용됩니까? 몇 년 전 저는 웹 제품이 환경에 영향을 미치는지 여부를 이해하기 위한 연구에 착수했습니다. 나는 내가 발견한 것에 충격을 받았다. 전체적으로 볼 때 인터넷은 데이터 센터, 통신 네트워크 및 수십억 개의 최종 사용자 장치에 전력을 공급하는 데 필요한 엄청난 양의 전기 덕분에 전 세계 항공 산업보다 매년 더 많은 탄소 배출량을 생산합니다. 모든 장비를 제조하고 유지 관리해야 한다는 사실은 말할 것도 없습니다. 인터넷은 가상이 아니라 매우 물리적입니다. 그런 다음 우리 팀 은 이 문제에 대한 인식을 높이는 데 도움이 되는 웹사이트용 탄소 계산기를 개발했습니다. 우리는 수백만 개의 웹 페이지를 테스트하고 인기를 얻으면서 패턴을 식별했습니다. 가장 에너지 효율적인 웹사이트는 1990년대처럼 보이는 웹사이트였으며 많은 새로운 웹사이트는 오염도가 매우 높았습니다. 기본 기능과 모양에도 불구하고 초기 웹 사이트는 파일 크기가 작고 컴퓨팅 성능이 거의 필요하지 않아 매우 효율적이었습니다. 컴퓨터가 더욱 강력해지고 인터넷 속도가 빨라짐에 따라 웹 사이트는 점점 더 부풀려졌고 컴퓨터 하드웨어의 발전으로 인한 이점이 잠식되었습니다. 그 결과, 현대 웹은 10년 전보다 더 빠르지 않고 훨씬 더 오염되어 있습니다. 제로 웨이스트 라이프스타일을 사는 사람들에 대한 내셔널 지오그래픽의 기사에서 저널리스트 스티븐 리히(Stephen Leahy)는 이전의 가정과 달리 "이들은 히피 지망생이 아니라 현대적인 미니멀리즘 라이프스타일을 수용하는 사람들입니다. 그들은 돈과 시간을 절약하고 삶을 풍요롭게 한다고 말합니다. 살아." 제로 웨이스트 사고방식을 디지털 디자인에 적용한다면? 사람들의 시간과 돈을 절약하고 삶을 풍요롭게 하는 현대적이고 미니멀한 웹을 만드는 데 도움이 될까요? 그럴 수 있다고 생각합니다. 1. 사진은 천 마디 말보다 그림은 천 단어를 말하지만 사실 그림은 1000단어의 텍스트보다 훨씬 더 많은 데이터를 사용하고 저장, 전송 및 렌더링에 더 많은 에너지를 사용합니다. NielsenNorman Group의 연구에 따르면 웹사이트 방문자는 콘텐츠와 관련이 없는 이미지를 완전히 무시하고 웹사이트의 일반 스톡 사진을 문자 그대로 공간과 데이터 낭비로 만듭니다. 이미지를 신중하게 사용하고 진정으로 가치를 더하는 디자인에만 포함하는 것이 좋습니다. 디자인에 사진을 포함시키더라도 사진을 사용하는 방법은 종종 낭비가 될 수 있습니다. 예를 들어 이미지 크기와 파일 크기와 관련하여 대략 제곱 법칙이 있습니다. 너비와 높이를 두 배로 늘리면 파일 크기가 거의 네 배가 됩니다. 그리고 이는 큰 이미지 파일을 로드하여 작게 표시 하는 대신 올바른 크기의 이미지를 로드하는 코드를 작성했다고 가정합니다 . 필요하지 않은 디테일의 형태로 이미지 내에서 낭비를 찾을 수도 있습니다. 이미지의 일부를 흐리게 처리하여 세부 사항을 제거하거나, 피사계 심도가 얕은 사진을 사용하거나, 일반 배경에서 개체를 촬영하거나, 흑백 이미지를 사용하는 것은 이미지 파일 크기를 줄이는 몇 가지 방법일 뿐입니다. 세부 사항이 필요하지 않으면 낭비입니다. 이미지를 효율적으로 디자인하더라도 이미지 파일 자체에는 여전히 잠재적인 낭비가 있습니다. 이미지 편집 응용 프로그램 에서 인덱스 색상을 사용하면 시각적 품질 손실 없이 이미지 파일에서 불필요한 데이터를 제거할 수 있습니다. 2. 현명하게 파일 형식을 선택하십시오 보다 효율적인 파일 형식을 사용할 수도 있습니다. 예를 들어 WebP 이미지 파일 은 일반적으로 JPEG보다 30% 작고 AVIF 이미지 파일은 JPEG 크기의 약 절반입니다. SVG와 같은 벡터 그래픽은 웹사이트에서 사진에 대한 훨씬 더 효율적인 대안이 될 수도 있습니다. 디자인 파일에서 불필요한 레이어를 제거하고 벡터 경로를 단순화하여 SVG 파일을 최적화할 수 있습니다. SVG 파일의 크기는 디자인 파일을 정리하는 데 몇 분만 투자하면 97%까지 줄일 수 있습니다. 3. 비디오 자동 재생 중지 자동 재생 비디오는 다른 콘텐츠 유형보다 훨씬 더 많은 데이터와 에너지를 소비합니다. New York Times 기자인 Brian Chen은 웹상의 자동 재생 비디오의 재앙에 대한 기사에서 "데이터 요금제를 소모하고 배터리를 빨아들이는 동안 주의를 요한다"고 말했습니다. 그들은 사용자의 데이터 계획(따라서 돈)을 낭비하고 에너지를 낭비하며 웹 페이지 속도를 늦춥니다. 비디오를 드물게 사용하고 사용자가 선택할 수 있도록 재생 버튼을 두십시오. 4. 낭비 없는 글꼴 시스템 글꼴은 디자이너에게 인기가 없을 수 있지만 이미 모든 사용자의 장치에 있으므로 로드할 필요가 없으므로 낭비가 없습니다. 예를 들어 여행 웹 사이트는 시스템 글꼴을 사용하여 사용자에게 효율적인 사용자 경험을 제공할 수 있습니다. 사용자 중 다수는 해외에 있고 느리고 값비싼 로밍 데이터를 사용할 수 있습니다. font-family CSS 속성 은 호스트 시스템에 이미 설치된 글꼴을 지정하는 데 사용할 수 있는 몇 가지 일반 패밀리 이름을 제공합니다 . serif sans-serif cursive system-ui 웹 글꼴을 사용하는 경우 낭비를 찾는 가장 쉬운 위치는 웹 사이트에서 사용하지 않는 글꼴 파일의 문자를 식별하는 것입니다. 예를 들어, 일부 글꼴은 수천 개의 문자를 제공하지만 영어는 약 100자만 필요합니다. 글꼴 파일을 가져와 대상 언어에서 사용되지 않는 문자를 제거할 수 있는 온라인에서 사용할 수 있는 글꼴 하위 설정 도구가 많이 있습니다. 사용할 글꼴을 선택할 때 브라우저는 CSS 목록의 첫 번째 글꼴에서 멈추지 않습니다. 글꼴 선택은 실제로 한 글꼴에 특정 글리프가 없는 경우 목록의 다른 글꼴이 해당 글리프를 제공할 수 있다는 가정하에 웹페이지의 각 문자에 대해 수행됩니다. 특수 문자 집합에 대한 글꼴이 필요하다는 것을 알고 있는 경우 기본 글꼴 선택을 시스템 글꼴로 설정한 후에만 해당 글꼴을 추가하십시오. 이미지와 마찬가지로 효율적인 파일 형식을 사용하여 더 많은 데이터를 저장할 수 있습니다. WOFF2 글꼴 파일은 WOFF 파일보다 약 30%, TTF 파일보다 최대 75% 작을 수 있습니다. 5. 코드에서 낭비 찾기 CSSstats.com 도구 를 사용하면 실제로 CSS 파일에 있는 내용을 시각화하고 동일한 스타일을 얼마나 자주 복제하는지 확인할 수 있습니다. 이 낭비를 보면 정리하는 데 도움이 될 수 있으며 반복 가능한 스타일로 모듈식 디자인 언어를 구현하면 장기적으로 깨끗하고 효율적인 CSS를 유지하는 데 도움이 될 수 있습니다. 라이브러리, 프레임워크 또는 추적 스크립트를 선택할 때 그것이 정말로 필요한지, 더 작은 대안이 있는지 자문해야 합니다. 예를 들어 jQuery는 30kb에 불과하지만 전체 웹 페이지를 30kb 미만으로 구축할 수 있습니다. 추가를 피할 수 있으면 추가해야 합니다. 마찬가지로 기본 Google Analytics 추적 스크립트는 17kb이지만 오픈 소스 Plausible Analytics 와 같은 대안 은 1kb 미만이며 사람들의 개인 정보를 존중하도록 설계되었습니다. 또한 일부 프로그래밍 언어는 작업을 수행할 수 있는 에너지 효율성 측면에서 다른 언어보다 더 낭비적입니다. JavaScript 는 PHP보다 7배 더 에너지 효율적입니다. 학습할 새로운 언어와 향후 프로젝트를 위해 지정할 기술을 결정할 때 이 점을 염두에 두어야 합니다. 웹에서 낭비를 줄이는 것은 모두에게 좋습니다. 웹 프로젝트에서 낭비를 제거하려면 세부 사항에 약간의 추가 주의가 필요한 것이 사실이지만 그렇게 하면 환경에 더 좋을 뿐만 아니라 더 빠르고 접근하기 쉬운 사용자 경험을 제공하는 웹 경험을 만들 수 있습니다. 누가 그것을 원하지 않습니까? 따라서 Urban Ore에서 다음과 같은 질문을 스스로에게 던져야 합니다. " 당신이 제로 웨이스트를 원하지 않는다면 얼마나 많은 웨이스트를 원하시나요?"