지속 가능한 웹 디자인 : 환경 친화적 인 웹을 디자인하는 방법.

아름다운 웹 사이트, 빨리로드 ...하지만 당신이 그것을 모르고 세상을 파괴하고 있다는 것을 알고 있습니까?

비즈니스 소유자, 마케팅 담당자 또는 웹 사이트 개발자로서 우리는 모두 "가장 아름다운"웹 사이트 "와"가장 쉬운 용도 "의 생성에 사로 잡혀 있습니다. 복잡한 코드 작성 및 고성능 서버를 선택하지만 우리 자신에게 묻지 않은 한 가지 질문이 있습니다.

우리는 디지털 세계가 깨끗하다고 생각하는 경향이 있습니다. 불편하고 환경에 영향을 미치지는 않지만 실제로 누군가가 우리 웹 사이트를 방문 할 때마다 서버는 전 세계를 다루는 인터넷 네트워크를 통해 처리하고 데이터를 보내기 위해 에너지가 필요합니다. 이러한 에너지의 대부분은 여전히 화석 연료 연소에서 생산됩니다. 이것이 지구 온난화의 주요 원인입니다. 이것은 모든 부하와 모든 스트리밍을 클릭 할 때마다 숨겨져있는 "보이지 않는 문제"입니다.

삽화를위한 프롬프트 : 한쪽의 이미지는 아름다운 현대 웹 사이트를 보여주는 컴퓨터 화면입니다. 반사의 다른 쪽은 분화구입니다. 공장은 연기를 공개하고 있습니다. 디지털 세계의 숨겨진 영향을 전달합니다

왜 "아름다운 웹 사이트"가 실수로 "범죄자 파괴"가 된 이유.

이 문제는 다른 사람의 나쁜 의도로 인해 발생하지 않습니다. 그러나 웹에 익숙한 "무지"와 "관행"에 의해 발생하며, 눈이 볼 수있는 결과에만 초점을 맞 춥니 다. 우리 웹 사이트를 열렬한 탄소 릴리스로 만드는 소스가 무엇인지 봅시다.

• 이미지와 비디오는 필요한 것 이상입니다. 웹 사이트가 아름답고 명확하기를 원합니다. 따라서 올바른 형식을 압축하거나 사용하여 큰 이미지 파일을 업로드하여 모든 웹 페이지가 에너지를 사용하여 훌륭한 데이터 전송으로 전송합니다.
• 완전하고 복잡한 코드 : 플러그인, 외부의 스크립트 또는 무질서한 CSS를 사용하여 브라우저가 처리에서 더 열심히 작동하고 모든 프로세스가 모든 전력을 사용하는 웹 페이지를 표시합니다. 디스플레이 블로그 (렌더 블로킹 리소스) 더 많은 리소스. 코드가 얼마나 중요한지 이해할 것입니다
• 빛을 강조하는 디자인 : 화면은 밝은 색상을 보여줍니다. 특히 OLED 화면의 흰색은 어두운 또는 검은 색 디스플레이보다 더 많은 에너지를 사용합니다. 다크 모드의 사용은 단순한 아름다운 트렌드 이상입니다. 그러나 그것은 지속 가능한 설계의 일부입니다. 어두운 모드의 단점은 공부하기가 흥미 롭습니다.
• 에너지가있는 데이터 센터 : 서비스를 임대 한 서버는 하루 24 시간을 열어야하며 장치가 너무 뜨거워지지 않도록 거대한 냉각 시스템이 필요합니다. 모두 좋은 전원입니다

위험처럼 보이는 웹 사이트를 결합했을 때 이러한 요소는 지구 환경 문제의 일부로 밝혀졌습니다.

삽화를위한 프롬프트 : 간단한 인포 그래픽 이미지는 웹 사이트 (그림, 코드, 비디오)의 구성을 보여주고 에너지 사용의 기원을 설명하기 위해 발전소와 CO2 기호를 가리키는 화살표가 있습니다.

지구 온난화를 제외하고 남은 경우 브랜드도 "뜨거운"것입니다.

웹 사이트의 환경 영향을 무시하면 세계에 영향을 줄뿐만 아니라 비즈니스에 직접적인 영향을 미칩니다.

• 세계에 달려 있지 않은 브랜드의 이미지 : 현재 전세계 소비자, 특히 밀레니엄 세대 및 Gen Z 그룹은 브랜드의 지속 가능성과 사회적 책임에 매우 중요합니다. 환경에주의를 기울이지 않고 여전히 비즈니스를 수행하는 브랜드는 구매에 직접 영향을 줄 수있는 "구식"및 "이기적인"것으로 보일 수 있습니다.
• 경쟁 이 치열한 시장에서 "환경 친화적 인 웹 사이트"이야기에 대한 이야기는 뛰어난 판매 포인트가되어 경쟁 업체와 차이를 만들 수 있습니다. 이 문제가 시장의 이점을 버리는 것과 동등하게 만드는 경우
• 더 높은 숨겨진 비용 : 무겁고 재미있는 웹 사이트는 느리게로드하고 사용자에게만 나쁜 경험을 제공 할뿐만 아니라 대역폭의 높은 비용과 불필요하게 호스팅 할 수 있습니다.
• SEO 순위는 더 나빠질 수 있습니다. Google은 페이지 속도 및 사용자 경험에 큰 중요성을 부여합니다. 큰 파일과 부피가 큰 코드로 인해 천천히로드되는 웹 사이트. 트래픽과 판매에 영향을 미치는 줄을 줄이는 경향이 있습니다. 마지막으로, 브랜드를 반영하는 조직 웹 사이트를 만들고 긍정적 인 영향을 미칩니다. 따라서 지속 가능성을 포함한 모든 차원을 살펴 봐야합니다.

우리 웹 사이트가 환경의 일부가되도록 브랜드의 기회와 브랜드의 명성을 점차적으로 허용하는 것과 다르지 않습니다. 천천히 부식되었습니다.

그림을위한 프롬프트 : 반대 방향으로 2 개의 그래프 이미지 1 라인은 상승하는 탄소 방출을 보여주는 그래프입니다. 다른 줄은 내려진 고객 (브랜드 신뢰)의 자신감을 보여주는 그래프입니다.

"아이디어"에서 "행동"으로 시작하십시오. 귀하의 웹 사이트를 녹색으로 변경하는 것은 어렵지 않습니다.

좋은 소식은 웹 사이트를 환경 친화적이거나 지속 가능한 웹 디자인 것이 어렵거나 멀지 않습니다. 그것은 다양한 기술을 사용하고 사용하는 방법의 변화입니다. 현명하게 사용되는 점에서 시작할 수 있습니다.

1. 효율성을 강조하는 설계 (효율성 우선 디자인) :

• 클린 코드 : 코드 HTML, CSS, JavaScript를 최대한 깨끗하고 단단하게 작성하십시오. 불필요한 스크립트 사용을 줄입니다.
• 이미지 최적화 : 업로드 및 형식으로 전환하기 전에 매번 이미지 , Webp 또는 AVIF와 같은 최신 이미지 는 고품질을 제공하지만 파일은 JPEG 또는 PNG보다 작습니다.
• 게으른로드 : 화면 아래의 이미지 또는 비디오를 설정하십시오. 사용자가 처음에는 불필요한 데이터로드를 줄이기 위해 연기했을 때 다운로드

2. 세계에 관심이있는 UX/UI (녹색 UX/UI) :

• 다크 모드 : 어두운 모드로 디자인은 대안입니다. OLED 화면의 힘을 줄이는 데 실제로 도움이 될 수 있습니다.
• 시스템 폰트 : 많은 웹 글꼴을로드하는 대신 시스템 글꼴과 함께 제공되는 표준 글꼴을 사용하면 데이터 전송을 줄이고 웹 다운로드를 더 빨리 다운로드 할 수 있습니다.
• 모션 사용을 줄이기 : 불필요하게 에너지 사용자이기 때문에 불필요하게 애니메이션 또는 자동 재생 비디오를 줄입니다.

3. 녹색 기술 선택 (녹색 기술) :

• 녹색 호스팅 : 데이터 센터 운영에서 재생 가능한 에너지를 명확하게 알리는 웹 호스팅을 선택하십시오.

지속 가능한 웹 선언 과 일치하며 전 세계의 개발자와 디자이너가 보유한 지침입니다. 관점을 조정 하고이 작은 지점에서이를 수행하는 것이 가장 중요한 첫 단계입니다.

삽화를위한 프롬프트 : 아름다운 인포 그래픽, 지속 가능한 웹 디자인을 요약하고, 효율적인 디자인, 녹색 UX, 쉽게 이해되는 구성 요소가있는 녹색 기술의 3 가지 주요 주제로 나뉩니다.

실제 예 : 유기농 기본이 웹 사이트가 성공할 수 있도록 "옷을 벗다".

더 명확하게보기 위해 "유기농 기본"의류 브랜드의 예를 살펴 보는데,이 브랜드는 주요 심장으로서 지속 가능성을 중요하게 여기는 브랜드입니다. 그들은 단지 제품을 멈추지 않습니다. 그러나이 철학도 자신의 웹 사이트에 적용했습니다

유기농 기본 사항은 웹 사이트의 "낮은 충격"버전을 만들었습니다. 사용자 방문 이이 모드를 열도록 선택할 수있을 때 발생한 일은 다음과 같습니다.

• 불필요한 요소 절단 : 무거운 비디오 및 스크립트 이미지가 꺼내고 실제로 필요한 정보 만 남습니다.
• 필요할 때 정보를 다운로드하십시오. 제품 이미지는 마우스 (호버)를 가리킬 때까지 표시되지 않습니다.
• 놀라운 결과 : 일반 버전 웹 사이트에 비해 CO2 릴리스를 70%로 줄인다는 것을 발견했습니다

이 사례는 지속 가능한 웹 디자인이 단순한 이론이 아니라는 좋은 증거입니다. 그러나 그것은 할 수 있고 실제로 그것을 측정 할 수있는 일이며 실제로 고객에게 전송되는 브랜드의 결정과 성실함을 보여줍니다. 기억에 남는 차이를 만듭니다

삽화에 대한 프롬프트 : 비교 이미지. 일반 버전과 낮은 충격 버전 사이의 유기적 기본 웹 사이트 화면은 강력한 단순성을 보여줍니다.

즉시하십시오! 점검 목록 웹 사이트를 "깨끗한"및 "녹색"으로 변경합니다.

웹 사이트를보다 환경 친화적으로 만들 준비가 되셨습니까? 이 간단한 체크리스트를 사용하여 즉시 시작할 수있는 가이드 라인으로 사용해보십시오.

1. 현재 탄소 발자국 : 웹 사이트의 현재 상태를 이해하여 웹 사이트 카본 계산기 웹 사이트 URL을 넣으려고 노력하십시오. 귀하의 웹 사이트가 얼마나 많이 출시되는지 봅시다.
2. 지방 수술 :
   • Tinypng 또는 Squosh와 같은 도구를 사용하여 모든 이미지 파일을 압축하십시오.
   • 형식 웹 또는 AVIF로 변환합니다
   • 게으른 하중을 모든 이미지로 설정하십시오.
3. 집을 청소하고 코드를 구성하십시오.
   • 사용되지 않은 JavaScript 또는 CSS를 점검하고 삭제하십시오.
   • 파일 크기를 높이기 위해 도구를 사용하여 도구를 사용하십시오.
4. 디자인 검토 (UX/UI) :
   • 다크 모드 옵션 추가를 고려하십시오. 귀하의 웹 사이트에 밝은 배경이있는 경우
   • 필요하지 않은 경우 사용자 정의 글꼴 사용을 검토하고 감소하십시오.
   • 닫기 자동 비디오 재생 (자동 재생)
5. 새로운 온실을 찾고 :
   • 정보를 검색하고 재생 가능 에너지를 사용하는 녹색 호스팅 서비스 제공 업체로 이동하는 것을 고려하십시오.

이 체크리스트에서 시작하여 큰 변화를 일으킬 수 있습니다. 이러한 개선은 세상에 좋지 않습니다. 또한 사용자와 SEO의 경험에 직접적인 영향을 미치는 웹 사이트가 더 빠르게 다운로드 할 수 있도록 도와줍니다. 이해하는 UX/UI 디자인 팀이 있으면 이 프로세스가보다 쉽고 효과적으로 가능합니다.

삽화를위한 프롬프트 : 각 항목에 아이콘이있는 아름다운 체크리스트 이미지 (예 : 아이콘, 탄소 스케일, 이미지 최적화 이미지 아이콘)가 쉽고 매력적입니다.

모든 질문을 명확하게하십시오! 질문 응답 지속 가능한 웹 디자인

우리는 이것이 많은 사람들에게 새로운 일 수 있음을 이해합니다. 따라서이 질문에 대답하기 위해 가장 일반적인 질문을 작성합니다.

질문 : 환경 친화적 인 웹 사이트는 웹 사이트가 매력적이지 않은 것처럼 보이게 할 것입니다.
답 : 사실이 아닙니다! 지속 가능한 웹 디자인은 웹 사이트를 지루하거나 공허하게 보이게한다는 의미는 아니지만 "스마트 디자인"은 사용자의 아름다움이나 좋은 경험을 줄이지 않고 자원을 줄이는 방법을 찾기 위해 창의성을 사용하는 것입니다. 단순성 (미니멀리즘)과 효율성 (효율성)은 매우 강력한 형태로 아름답습니다.

질문 : 이와 같은 웹 생성 비즈니스 비용을 실제로 줄일 수 있습니까?
답 : 정말! 웹 사이트 파일이 더 작을 때 데이터 전송량 (대역폭)이 줄어들어 장기간 호스팅 서비스로 이어질 수 있습니다. 또한 로딩이 빠른 웹 사이트는 전환율을 높이고 바운스 율을 줄이는 데 도움이되며, 이는 비즈니스 수익에 직접적인 이점을 제공합니다.

질문 : 개발자가되어야합니다. 이렇게하려면?
답 : 필요하지 않습니다. 모두가 참여할 수 있습니다. 디자이너는 에너지를 절약하는 색상과 레이아웃을 사용하도록 선택할 수 있습니다. 컨텐츠는 업로드하기 전에 이미지 최적화를 선택할 수 있습니다. 조직 웹 사이트를위한 웹 사이트를 찾는 등 지속 가능성에주의를 기울이는 대행사 또는 호스트의 서비스를 선택할 수 있습니다 그것은 이해 하고이 조언을 직접 줄 수 있습니다.

Q : 고객이나 사용자 가이 문제에 실제로 관심이 있습니까?
답 : 매일 더 관심이 있습니다! 많은 사무실의 보고서에 따르면 현대 소비자는 사회적, 환경 적 책임을 표현하는 브랜드를 지원할 준비가되어 있다고합니다. 귀하의 웹 사이트에 관심이있는 커뮤니케이션은 평가할 수없는 브랜드 사랑과 장기적인 충성도를 만드는 것입니다.

삽화를위한 프롬프트 : 쉽고 흥미로운 이해를 위해 각 질문의 답변을 요약 한 짧은 메시지로 이미지 아이콘, 물음표 (?) 및 올바른 마크 (✓)

이제 "웹 사이트"를 세상과 비즈니스와 "친절한"것으로 변경해야합니다.

지속 가능한 웹 디자인 이 단순한 트렌드가 아니라 모든 사람이 적응 해야하는 디지털 세계의 창조의 "다음 진화"와 동일한 이미지를 보았습니다 비즈니스 목표를 세상에 완벽하고 지능적인 책임을 통합하는 방법입니다.

환경 친화적 인 웹 사이트를 만드는 것은 Win-Win-Win에서 상황을 만들어내는 것입니다 (에너지 및 탄소 릴리스 감소), 사용자 (빠른로드 웹 사이트, 사용하기 쉬운) 및 비즈니스 (더 나은 브랜드 이미지, 비용 절감, 전환율 증가) 에 적합합니다 "정말 좋다"

귀하의 웹 사이트가 더 이상 아름답지만 무자비한 비즈니스 도구가되지 않도록하십시오. 오늘부터 시작하십시오. 우리가 하나씩 사용하기 위해 제공하는 체크리스트를 사용하십시오. 당신의 좋은 의도를 세상에 전달하십시오. 그리고 오늘날 세계 투자는 미래에 비즈니스의 지속 가능한 성장을위한 투자라는 것을 알게 될 것입니다.

귀하의 웹 사이트는 아름답지만 "스마트"및 "세계에 대한 책임"도 원하십니까? UX/UI 전문가 팀과 웹 사이트 개발 팀에 문의하십시오. 비즈니스 결과를 생성 할뿐만 아니라 웹 사이트를 만들도록 도와 줄 준비가되었습니다. 또한이 세상에 동시에 긍정적 인 영향을 미칩니다.

삽화를위한 프롬프트 : 강력한 마지막 그림은 컴퓨터 코드로 배경으로 자라는 작은 나무를 들고있는 손 이미지와 지속 가능성과 함께 제공되는 비즈니스의 성장을 전달하는 비즈니스 그래프입니다.

‍