[아티클] 주목받는 친환경 UX/UI 디자인

2024. 3. 28. 11:46기록/UXUI 스터디

https://ditoday.com/%EB%94%94%EC%9E%90%EC%9D%B8%EC%9C%BC%EB%A1%9C-%EC%A7%80%EA%B5%AC%EB%A5%BC-%EC%A7%80%ED%82%A8%EB%8B%A4%EA%B3%A0-%EC%A3%BC%EB%AA%A9-%EB%B0%9B%EB%8A%94-%EC%B9%9C%ED%99%98%EA%B2%BD-ux/

 

“디자인으로 지구를 지킨다고?” 주목 받는 친환경 UX 디자인 - DIGITAL iNSIGHT 디지털 인사이트

친환경 UX 디자인의 특징과 실제 사례

ditoday.com

 

제목부터 흥미로워서 읽은 아티클이다.

좋은 내용들을 담고 있어서 바로 요약글을 포스팅한다.

 


 

1. 친환경 UX/UI 디자인이란?

- 지속 가능한 UX 디자인을 의미한다.

- 친환경 UX 디자인이 적용된 제품 서비스는, 사용성은 물론 제품이나 서비스, 사용자의 환경에 미치는 탄소 발자국을 최소화 하기 위해 노력한다.

- 1960년~70년대 환경 운동 이후, 실물 친환경 제품에 비해 디지털 제품 서비스의 탄소 배출과 에너지 소비는 인지도가 낮다.

- 이를 해결하기 위해 등장한 것이 친환경 UX 디자인이다.

- 실제 온라인 특정 사이트인 '웹사이트 카본' 에 의하면, 웹페이지 하나를 볼 때마다 평균적으로 이산화탄소 1.76g이 배출된다.

  (이는 10만 페이지의 웹사이트를 방문할 경우, 내연기관 자동차의 1년 탄소 배출량과 비슷한 양이다.)

 

 

2. 대표적인 친환경 UX

- 친환경 UX 디자인의 가장 대표적인 방법은 UI 디자인 개선이다.

- 간소화와 탐색에 최적화된 UX/UI디자인은 사용자의 과업을 빠르게 완수하게 하여 인터넷 및 전력 사용을 줄일 수 있다.

- 다크모드는 아몰레드 디스플레이 기준 최대 63%까지 줄여 배터리 및 모니터 화면 전력 소모에 도움이 된다.

- 폰트는 웹사이트에 타입 1개를 줄일 때마다 웹사이트 무게를 최대 250kb까지 줄일 수 있다.

- 구글 폰트, 온라인 폰트 호스팅 업체를 사용하거나, WOFF 파일 확장자를 사용하면 웹사이트 무게를 더욱 줄일 수 있다.

- 위의 이론들을 직접 적용하고 배울 수 있는 사이트 : https://sustainablewebdesign.org/

 

 

3. 이미지와 영상을 최소화 하는 선택

- 탄소 배출량을 줄이기 위해 인터넷 사용량 비중을 줄이는 것이 좋다.

- 그래서 많은 전력을 사용하는 이미지와 동영상을 최소화 하는 것만으로도 유의미한 결과를 낼 수 있다.

- 비네타 그린우드 홀그레인 디지털 회계 총괄은, SVG 그래픽을 이용한다면 이미지 크기를 축소하는데 도움이 되며, 압축 도구로 이미지 크기를 축소하는 것이 좋다고 설명했다.

- 대표적으로 포르마판타스마(https://formafantasma.com/) 웹사이트가 해당 선택을 한 대표 주자이다.

  : 이미지 없이 흰 배경에 검은색/파란색의 텍스트만으로 이루어져 있다.
  : 불필요한 HTTP 요청을 피하기 위해, 기본 시스템 폰트인 Arial과 Times New Roman 을 사용하고 있다.

  : 이미지가 필요한 제품 설명 페이지에서도 낮은 해상도로 보여주며, 호버하면 보고 있는 이미지의 크기를 노출한다.

  (이는 사용자가 원치 않는 이미지의 콘텐츠 로딩을 피할 수 있는 선택지를 제공한 것이다.)

 

 

4. 효율적인 개발 구조

- 깔끔하고 효율적인 웹코딩은 필요한 리서스 처리 능력을 줄일 수 있다.

  (불필요한 스크립트를 제거하고, 코드를 줄이고, 케싱 방식을 최적화하는 방식)

- 이미지, 동영상 로딩에 많은 에너지가 요구된다면, CDN에 저장하는 방법으로 탄소 배출을 줄일 수 있다.

- CDN은 분산된 서버를 하나로 묶는 기술로, 적은 양의 에너지로 데이터 저장 공간을 최적화할 수 있다.

- 재생 에너지 회사인 클리어스톤 에너지(https://www.clearstoneenergy.com/) 가 대표적인 예시이다.

  : 실제로 고품질 코딩과 최적화된 리소스 처리로 이미지를 적극 사용하고 있지만 평균 웹사이트보다 66% 낮은 탄소 배출량을 유지하고 있다.

 

- 개편하기에 서비스가 방대할 경우, 재생 에너지만으로 서버를 구동하는 호스팅 업체를 이용하는 방법도 있다.

- 대표적인 기업은 구글이다.

  : 전 세계 구글 데이터 센터 전력의 재셍 에너지화, 자체 풍력&태양광 잘전소 건설로 서버 무탄소를 지속하고 있다.

  : 2030년까지 전 세계 모든 구글 데이터 센터, 클라우드 리전, 캠퍼스를 상시 무탄소 에너지로 운영한다는 목표를 내걸었다.

 

 

5. 사용성도 함께해야 한다.

- UX디자이너는 친환경에 매몰되서 사용성을 소홀히 해서는 안된다.

- 지나치게 친환경에 집중해서 아름답지 않고, 사용성이 떨어지는 디자인은 사용자의 참여를 낮춰 존재의의를 잃어버릴 수 있다.

- 잘못하면 초기 단계에서 친환경 UX 디자인은 불편한 것이다 라는 잘못된 고정관념을 형성할 수도 있다.

- 포르마 판타스마와 협업한 스튜디오 블란코는 '인터넷 서핑으로 인한 에너지 소비와 탄소 배출을 최소화하도록 설계했지만, 내러티브 목적과 UX 최적화, 이상적인 페이지 속도 및 세련된 미학에 소홀하지 않도록 고려했다' 라고 말했다.

- 웹사이트의 기본적인 목적에 충실해야 한다.

 

 


 

친환경 UX라는 것이 구체적으로 어떤 것을 의미하는지 궁금했는데, 그것에 대해 자세하게 설명되어 있어 이해가 잘 되었다.

결과적으로 UX 업계에서 중요하게 여기는 요소들이 이어져 있다고 생각되었다.

(대표적으로 힉의 법칙, 테슬러의 법칙이 떠올랐다.)

 

최소화된 플로우와 사용자가 필요/검색하고자 하는 정보를 빠르게 인지할 수 있도록 명확성을 주는 설계가 결과적으로는 친환경 UX와 이어진다는 것을 깨달았다.

사실 아티클에 나온 것처럼, 그 동안 디지털 프로덕트가 환경에 많은 영향을 줄 것이라고는 생각하지 못했다. 

이 아티클 덕분에 간결하고 직관적인 사용성을 제공하는 것이 얼마나 중요하다는 것을 더 폭 넓은 관점에서 이해를 할 수 있게 되었다.

 

물론 체류 시간이 중요한 프로덕트와 도메인도 존재한다.

이 경우에는 환경을 함께 고려할 때, 어떻게 풀어나가는 것이 최적일지에 대해서 충분한 고민이 필요할 것이다.

하지만 마지막에도 나온 것처럼, 프로덕트의 기본적인 목적에 충실해야 한다는 것이 가장 중요한 이념이다.

그렇기 때문에 웹사이트를 제공하는 목적에 충실하되, 가능한 부분에서 친환경을 함께 고려할 수 있는 UX를 설계한다면 그것이 가장 좋은 선택이 되지 않을까, 라고 생각된다.