지속 가능한 웹 디자인이란 무엇입니까? 세상에 친숙하고 비즈니스에 좋은 웹을 디자인하는 방법.

오늘 온라인 세계가 "빠르지"고 놀랍게도 "무겁다"고 생각한 적이 있습니까? 우리는 아름다운 웹 사이트를 가지고 있습니다. 애니메이션이 풍부한 고해상도 비디오가 있지만 웹 사이트가 완료되기 전에 때로는 ... 때로는 ... 우리는 비밀리에 실수로 소셜 미디어를 쟁기질합니다.

이 문제는 사용자의 "속도"또는 "인내"에 관한 것이 아니라 보이지 않는 "비즈니스 비용"과 세계가 클릭 할 때마다 지불하는 "환경 비용"을 결코 생각하지 않을 "비용"을 숨 깁니다. 그러나 현대 비즈니스가 알아야 할 중요한 전략입니다!

인생의 실제 문제

당신이 수십만 바트를 위해 웹 사이트에 투자 한 비즈니스 소유자라고 상상해보십시오. 웹 사이트는 매우 아름답습니다. 함수는 완료되지만 끝없는 문제가 발생합니다.

• 고객은 특히 모바일을 열 때 불행히도 판매 기회를 잃게됩니다.
• 대부분의 사람들이 웹 다운로드가 완료되기 전에 기다릴 수없고 닫을 수 없기 때문에 Bookce Rate (반환 속도)가 높습니다
• 귀하의 웹 사이트는 각 디스플레이에서 많은 리소스 (대역폭)를 사용하기 때문에 매년 호스팅 및 CDN (Content Delivery Network)이 더 비쌉니다
• 좋은 콘텐츠를 만들었음에도 불구하고 움직이지 않습니다 핵심 웹 생명력 좋지 않기 때문에 웹 로딩 속도 때문일 수 있습니다

이러한 문제는 기술적 인 것처럼 보이지만 실제로 사용자 경험과 비즈니스 비용에 직접적인 영향을 미치는 "필요한 것보다 무겁다"는 웹 사이트의 "증상"입니다.

삽화 프롬프트 :

사용자의 이미지는 과민성으로 모바일 화면을보고 있습니다. 로딩 아이콘이 있습니다. 화면에서 회전하십시오. 측면의 바운스 속도 그래프가 더 높습니다. 그리고 날아가는은 아이콘은 고객과 비용의 속도가 느려집니다.

그 문제가 발생한 이유는 무엇입니까?

대부분의 웹 사이트가 "무거운"및 "폐기물 에너지"인 이유는 복잡한 문제가 아닙니다. 그것은 과거에 인기가 있었던 설계 개념, "The More Good"로 인해 웹 사이트를 생성합니다.

• 대형 이미지로 가득 차게 : 컴프레스트 나 웹 프 또는 avif 같은 시대에 적합한 형식을 압축하거나 사용하지 않고 고해상도 이미지 파일 (.png, .jpeg, 100%품질)을 사용하십시오 .
• 사용자 정의 글꼴 및 외부 스크립트를 너무 많이 사용하십시오. 웹 페이지가로드 할 때마다 브라우저는 렌더 블로킹 리소스 (Render-Blocking Resources) 웹 페이지를 직접 차단해야합니다.
• 블로 된 코드 : 중복 또는 삭제되지 않는 코드 HTML, CSS 및 JavaScript는 웹 사이트의 전체 크기가 불필요하게 증가하게하는 중복되지 않은 부품을 삭제하지 않습니다.
• 무거운 비디오 및 애니메이션에 의존 : 비디오 배경 또는 복잡한 애니메이션이 아름답게 보입니다. 그러나 웹 사이트가 서버와 사용자 측면을 처리하는 데 매우 높은 에너지를 사용해야한다는 것은 중요한 요소입니다.

이 모든 구성 요소는 "과도한 지방"과 같아 웹 사이트를 외롭고 느리게 만들고 처음에는 이야기 한 모든 문제의 원인이 있습니다.

삽화 프롬프트 :

간단한 인포 그래픽 이미지는 "Fat"에 큰 이미지 아이콘, 비디오 파일, 얽힌 코드 및 많은 글꼴이 있다는 웹 사이트의 구조를 보여줍니다. 뜨거울 때까지 열심히 작동하는 서버를 가리 킵니다 (담배를 피우십시오)

남은 경우 어떤 영향을 미칩니 까?

"무거운"웹 사이트가 있고 환경 친화적이지 않은 것은 약간의 문제가 될 수 있지만 장기적으로는 "비즈니스"와 "세계"모두에 더 큰 영향을 미칩니다.

비즈니스 영향 :

• 비용 증가 : 웹 사이트가 많을수록 많은 정보를 사용합니다. 호스팅 서비스와 CDN이 훨씬 높아질 것입니다.
• 경쟁 기회 상실 : 당시 사용자가 경쟁 업체보다 웹 사이트가 1-2 초 늦지 않으면 속도를 기대할 때 고객을 경쟁 업체로 영원히 잃는 것을 의미 할 수 있습니다.
• 전환율이 낮음 : 웹 사이트가 느려지는 순간마다 주문 또는 연락 속도가 크게 떨어집니다.
• 브랜드 이미지 파괴 : 느리고 어려운 웹 사이트는 나쁜 경험을 만들고 사용자의 눈에 브랜드가 중단되지 않게 만듭니다.

세계에 미치는 영향 :

• 탄소 배출 증가 : 인터넷은 세계 최대의 탄소 방출제 중 하나입니다! 서버에서 화면으로 전송되는 모든 데이터에는 전 세계 데이터 센터에서 막대한 전력이 필요합니다. 지속 가능한 웹 디자인 커뮤니티 의 원칙에 따르면
• 사용자 측면에 에너지 낭비 : 중재 웹, 강제 CPU 및 사용자 장치의 배터리. (모바일과 컴퓨터 모두) 이유에 따라 에너지 낭비 인 더 열심히 작동해야합니다.

이 문제를 무시하는 것은 물을 여는 것과 다르지 않습니다. 돈의 형태와 환경 영향

삽화 프롬프트 :

왼쪽 이미지는 전환율을 보여주는 그래프이며 수익이 감소합니다. 더 높은 호스팅 송장과 함께 오른쪽은 뜨겁게 보이는 세상입니다. 데이터 센터의 연기 굴뚝이 있으며, 이는 무거운 웹 사이트에서 연결되어 있습니다.

해결책이 있습니까? 그리고 어디에서 시작해야합니까?

지속 가능한 웹 디자인 의 원칙 으로이 문제를 직접 해결할 수 있다는 것입니다 .이 웹 사이트는 웹 사이트를 "지루한"것이 아니라 웹을 만드는 것입니다. 모든 차원에서 "효율"(효율성)

즉시 시작할 수있는 주요 원칙은 다음과 같습니다.

1. 단순성 (Lean & Clean Design)을 강조하는 디자인 : 기본 웹 페이지의 모든 요소가 실제로 필요한지 아닌지 스스로에게 물어보십시오. 디자인은 간단하고 복잡하지 않으며 편안하고 사용하기 쉬운 것처럼 보일뿐만 아니라 복잡합니다. 또한 파일의 크기를 줄이는 데 도움이됩니다.
2. 스마트 미디어 최적화 :
   • 그림 : 업로드하기 전에 항상 이미지 압축 도구를 사용하십시오.
   • 올바른 형식을 선택하십시오 : 양질의 품질을 제공하는 새로운 형식, 웹 또는 AVIF로 전환하지만 파일은 JPEG 또는 PNG보다 훨씬 작습니다.
   • 게으른 로딩 기술 사용 : 화면 아래 이미지 또는 비디오를 설정하십시오. (아직 보이지 않음) 사용자가 미끄러짐만으로로드
3. 효과적인 작문 (효율적인 코드) :
   • HTML, CSS, JavaScript를 최소화 : 코드 파일에서 불필요한 간격과 문자를 삭제하여 파일 크기를 줄입니다.
   • 사용되지 않은 코드 제거 : 실행되지 않은 CSS 또는 JS를 정기적으로 확인하고 제거하십시오.
4. 캐싱 전략을 사용하여 유용합니다. 웹 사이트 현금을 만드는 것은 웹 사이트의 "기억"구성 요소의 사용자 레일을 주문하는 것입니다. 그가 다시 돌아 오면 다음 방문에서 웹 사이트가 훨씬 더 빨리 다운로드 할 수있게하여 모든 것을 다시 다운로드 할 필요가 없습니다.
5. 녹색 호스팅 서비스 제공 업체 : 데이터 센터 운영에서 재생 에너지 (재생 가능 에너지)를 사용하는 서비스 제공 업체를 찾고 있습니다.

가장 좋은 시작은 웹 사이트에서 전체 사진을 압축하기 시작하는 것과 같이 가장 쉬운 지점에서 가장 먼저해야합니다. 이것은 웹 페이지의 속도와 크기 측면에서 즉시 볼 수있는 "빠른 승리"입니다. 약간의 조언을 원한다면 지속 가능성을위한 웹 디자인 매뉴얼을보십시오. 우리의 완전한 버전

삽화 프롬프트 :

Infigurafic 요약 각 구성 요소의 문제를 해결하는 5 가지 방법 : 1), 램프 아이콘 (단순), 2) 이미지 아이콘+깃털 (Light), 3) Icon+Broom (Clean), 4) 아이콘+기어 (캐싱), 5)

성공했던 실제의 예

명확 해지려면 "온라인 상점에서 수제 제품 판매"의 예를 제시하고 싶습니다.

원래 문제 : 이 가게의 원본 웹 사이트는 매우 아름답습니다. 전체 화면 이미지를 사용하십시오. 비디오 데모가 있습니다. 그러나 그 결과 웹 사이트가 매우 느리게로드 (평균 8-10 초)로 이동 전화를 사용하는 고객이 대부분의 호스팅 가치에 가까워지고 있습니다. 추가 된 제품 수에 따르면

지침에 따라 문제를 해결하는 방법. 지속 가능한 웹 디자인 :

1. 분해 검사. 그림 : 팀은 모든 제품 이미지 파일을 .png에서 .webp 및 압축 파일로 변환했습니다. 첫 페이지의 전체 이미지 크기가 70% 이상 감소했습니다.
2. 비디오를 작은 애니메이션으로 변경하십시오. 무거운 비디오를 사용하는 대신 일부 애니메이션의 경우 수십 번 더 작은 Lottie 파일 (벡터 애니메이션)을 사용하도록 전환했습니다.
3. 코드 업데이트 : 서비스를 사용했습니다. 코드를 정리하고 (코드 정리)를 설정하고 적절한 캐싱을 설정하는 웹 개발 전문가
4. 녹색 호스팅으로 전환 : 100% 청정 에너지 정책을 발표 한 호스팅 서비스를 사용하기 위해 이사했습니다.

놀라운 결과 :

• 페이지로드 시간은 2.5 초로 줄었습니다.
• Bookce 비율은 45%감소했습니다.
• 고객이 경험이 좋고 원활한 경험을 가지고 있기 때문에 전환율이 20% 증가했습니다
• 월간 호스팅 비용은 30%감소했습니다.

이것은 지속 가능한 웹 디자인이 단순히 "좋은 행위"일뿐 만 아니라 "지능적인 투자"라는 증거이며, 이는 엄청난 비즈니스 수익을 제공합니다.

삽화 프롬프트 :

온라인 상점 웹 사이트의 사진 인 첫 번째 장면 화면은 느린로드 화면과 낮은 변환 그래프를 보여줍니다. 전환 그래프와 판매가 명확하게 상승하는 판매와 함께 완전하고 아름답고 화면을 표시 한 후.

따르고 싶다면 어떻게해야합니까? (즉시 사용할 수 있음)

여기에서 많은 사람들이 자신의 웹 사이트를 향상시키기 시작하고 싶습니다. 당신은 기다릴 필요가 없습니다! 이것은 즉시 확인하고 수행 할 수있는 간단한 점검 목록입니다.

1. 속도와 크기를 확인하십시오. 현재 웹 : Google Pagespeed Insights 또는 Gtmetrix와 같은 무료 도구를 사용하여 웹 사이트가 현재 웹 크기의 양과 다운로드하는 데 걸리는 시간을 확인하십시오.
2. 그림부터 시작하십시오 (저급 과일) :
   • TinypNG 또는 Squosh.App과 같은 온라인 도구를 사용하여 웹 사이트에서 사용할 수있는 이미지를 녹화하십시오.
   • 플러그인을 사용하거나 설정하여 이미지 파일을 자동으로 Webp로 변환하십시오.
3. 글꼴과 스크립트 탐색 :
   • 몇 가지 유형의 사용자 정의 글꼴을 사용하고 있습니까? 필요한 1-2 유형 만 줄일 수 있습니까? 또는 시스템 글꼴 (기계에 부착 된 표준 글꼴) 사용을 고려하십시오.
   • 사용되지 않은 추적 스크립트 나 플러그인이 있는지 확인하십시오. 있으면 즉시 제거하십시오.
4. 잡기 활성화 : CMS의 설정을 확인하거나 브라우저 캐싱이 이미 활성화되었는지 여부를 호스팅하십시오. 여전히 서둘러 사용하십시오.
5. 디자인에 중요한 질문을하십시오. 웹 페이지를보고 "이 배경 비디오가 정말로 필요한가요?" 또는 "우리는 GIF 대신 스틸 이미지로 이야기를 말할 수 있습니까?" 이러한 질문은 더 많은 효율성으로 디자인하는 데 도움이 될 것입니다. Awwwards 와 같은 주요 웹 사이트는 아름답고 지속 가능한 많은 웹 사이트를 편집했습니다.

이 작은 단계를 수행하면 웹 사이트에 큰 변화가 있습니다.

삽화 프롬프트 :

위의 목록에 따라 5 가지 주요 주제와 함께 아름다운 체크리스트 이미지, 이해하기 쉬운 이미지. 명확한 아이콘으로 독자는 즉시 자신의 웹 사이트를 확인하기위한 지침으로 사용할 수 있습니다.

사람들이 궁금해하는 경향이있는 질문과 정해진 답변

Q : 지속 가능한 디자인이 내 웹 사이트를 "지루한"또는 "너무 매끄럽게"보이게할까요?

답 : 사실이 아닙니다! 지속 가능한 디자인은 "지루한"것을 의미하는 것이 아니라 "고양이 디자인", 최소 스타일 디자인, 여유 공간 사용 (공백) 및 눈에 띄는 타이포그래피의 선택은 지속 가능하고 현대적인 디자인의 핵심입니다 . 아름답고 효과적인 웹 사이트를 만드는 데 도움이 될 것입니다.

Q : Green Hosting은 일반 호스팅보다 훨씬 비쌉니까?

답변 : 현재 가격은 크게 다르지 않습니다. 또한 대역폭에서 절약 할 수있는 비용을 고려할 때 웹을 부드럽게 만들어 감소하는 대역폭에서 절약 할 수 있으며 녹색 호스팅을 선택하는 것은 장기보다 훨씬 가치가있을 수 있습니다.

Q : 웹 사이트의 환경 영향을 어떻게 측정합니까?

답변 : 웹 사이트 탄소 계산기와 같은 평가에 도움이되는 무료 온라인 도구가 있습니다. URL을 추가하십시오. 이 도구는 귀하의 웹 사이트가 대략 출시 한 탄소의 양을 계산합니다. 개선 전후를 측정하는 좋은 방법입니다.

질문 : 지속 가능한 웹 디자인은 트렌드 일 뿐이며 통과 되었습니까?

답 : 이것은 웹의 미래입니다! 디지털 세계를 주도하는 3 가지 중요한 것들과 일치하기 때문에 : 1) 속도가 필요한 사용자의 기대, 2) SEO에 영향을 미치는 핵심 웹 생명의 중요성, 3) 글로벌 환경 인식 추세. 오늘의 적응은 장기적으로 비즈니스에 이점을 제공하는 것입니다.

삽화 프롬프트 :

이미지 아이콘, 내부에 물음표가있는 전구와 명확한 답변이 있는데, 다양한 질문에 대한 솔루션이 전달됩니다.

이해하기 쉬운 요약 + 노력하고 싶어

이 시점에서 우리는 지속 가능한 웹 디자인이 먼 문제가 아니라는 것을 알 수 있습니다. 그러나 실질적인 연습이며 "4 마리의 새와 함께 한 샷"이 혜택을 제공합니다.

1. 사용자에게 적합 (더 나은 UX) : 웹 사이트 사용이 더 빠르게 사용하기 쉽습니다.
2. 비즈니스에 적합합니다 (더 나은 비즈니스) : 전환율을 추가하고 비용을 줄이며 SEO 혜택을 제공합니다.
3. 더 나은 (더 나은 행성) : 탄소 배출량을 줄이고 에너지를 절약하는 데 도움이됩니다.
4. 이미지 (더 나은 브랜드)에 적합합니다. 브랜드가 고객 과이 세상 모두를 돌보는 것을 보여줍니다.

열쇠는 "할 수있는 모든 것을 압축"에서 "가장 필요한 것만으로 선택하는 것"입니다.

비즈니스의 성장을 당기기 위해 느리고 무거운 웹 사이트를 기다리지 마십시오. 오늘부터 웹 사이트의 "체중 감량"을 시작할 때입니다. 이미지 압축과 같은 간단한 문제로 시작하여 첫 번째 단계로 간주됩니다!

귀하의 웹 사이트가 아름답고 빠르며 환경 친화적이며 놀라운 비즈니스 결과를 창출하기를 원하십니까? Vision X Brain의 전문가 팀과 상담하십시오. 귀하의 비즈니스와 함께 지속 가능하고 성장하는 웹 사이트를 만들도록 도와 드리겠습니다.

‍