IT/모바일
앱에서 배터리 수명을 개선하는 5가지 방법 : 모바일 UI를 최대한 활용하기 위한 팁과 트릭
제공 : 한빛 네트워크
저자 : Meghan Blanchette
역자 : 오자현
원문 : 5 ways to improve battery life in your app
편집자 노트: Mobile HTML5는 프론트 엔드 엔지니어이자 잘 알려진 연사인 Estelle Weyl의 책입니다. 이 책은 당신을 더 강력한 웹 개발자로 만들기 위해 SVG, Canvas, 및 모바일 장치에 적합하게 맞춰진 CSS3에 대한 관례를 포함한 실제로 해볼 수 있는 예제로 가득합니다. 아래 발췌된 부분에서, Estelle은 모바일 웹 앱에서 배터리 수명을 개선하기 위해 당신이 할 수 있는 다섯 가지 쉬운 일들을 보여줄 것입니다. 이 책 전반에 걸쳐, 그녀가 제공하는 팁은 이런 기술에 대한 그녀의 실제 경험에서 온 것입니다.
항상 벽에 매여있는 데스크톱 컴퓨터나, 일반적으로 움직이지 않는 사용자가 사용하는 랩톱 컴퓨터와 다르게, 이동하는 사용자는 장치를 온종일 충전하지 않습니다. 이동하는 사용자는 장치가 재충전 사이에 적어도 24시간 유지되기를 기대합니다.
사용자는 통화와 GPS 사용이 배터리 전원을 소모하는 것을 알고 있습니다. 그러나 웹 서핑을 위해 브라우저를 사용하고 있다고 생각한다면, 어떤 웹사이트가 다른 사이트보다 배터리를 더 빠르게 소모할 것으로 생각하지 않을 것입니다. 우리 코드의 전력 소비를 관리하는 것은 개발자로서 우리의 일입니다.
당신은 전원이 연결되지 않은 랩톱에서 CPU 사용이 배터리를 소모하는 것을 알고 있을 것입니다. CPU 사용은 모바일 장치에서도 효과적으로 배터리를 소모하게 합니다. 당신의 랩톱을 빨리 돌게 하거나, 따뜻하게 만들거나 컴퓨터의 팬을 돌게 하는 무엇이든 모바일 장치(만일 전원에 연결되어 있지 않다면)의 배터리도 소모하게 할 것입니다. 방어적으로 코딩하세요: 모바일 장치 사용자들이 전원에 연결되어 있지 않다고 생각하세요.
코드의 에너지 소비를 관리하기 위하여, 우리는 CPU 사용을 관리할 필요가 있습니다. 리플로(reflow) 를 피하세요. 자바스크립트의 크기와 동작 모두를 최소화하세요. 불필요한 AJAX 호출로 계속해서 무선을 깨우지 마세요. 애니메이션을 위해, 자바스크립트보다는 항상 CSS를 사용하세요. 그리고 WebGL을 지원하는 장치의 마케팅팀이 그들의 장치가 최적화되어 있다고 주장할지라도, 모바일 장치에서 WebGL을 제공하지 마세요. 적어도 아직은 아닙니다. WebGL 배터리 성능은 개선되고 있습니다.
어두운색을 사용하세요
디자인에 밝은색을 사용할수록 화면은 더 밝아져야 합니다. AMOLED 화면을 사용하는 휴대전화는 화면이 밝아질수록, 더 많은 에너지를 사용하고, 배터리를 소모합니다. AMOLED, 또는 능동형 유기 발광 다이오드, 화면은 빛이 나는 유기 중합물의 얇은 층으로 구성되어 있습니다. 백라이트가 없어 화면은 매우 얇아질 수 있습니다. 검은 화소는 실제로 꺼져 배터리 수명을 절약합니다. 이러한 비 LCD 화면 장치에서는 밝은색이 표시되는 동안 어두운색이 표시되는 것보다 더 많은 에너지를 소모합니다.
물론, 배터리 소비 외에도 응용 프로그램 디자인에 사용되는 색을 결정하는데 영향을 미치는 문제들이 있습니다. 다만 웹사이트가 소비하는 에너지가 어떤 장치에서는 디자인에 사용된 색에 의해 크게 달라질 수 있다는 것을 알아두세요. 색이 배터리 소비에 영향을 미치는 유일한 기능은 아닙니다. 배경 이미지, 전경 이미지, 비디오, 오디오, 애니메이션과 같은 미디어 요소와 자바스크립트 모두 배터리 소모에 원인이 됩니다. 할 수 있다면 어두운색을 선택하세요. 그럴 수 없다면 다른 기능에서 에너지를 최적화하세요.
JPEG을 사용하세요
PNG 대신 JPEG을 사용하세요. JPEG이 이미지를 더 잘 압축하고, 빠르게 렌더링할 수 있어서 에너지가 좀 더 절약됩니다.
이미지 렌더링은 에너지를 소비합니다. 이것은 사이트의 이미지 개수, 크기 및 형식에 따라, 사용된 에너지의 상당한 비율을 차지할 수 있습니다. 이미지를 렌더링하기 위해 사용된 에너지는 그려진 이미지의 개수와 크기에 비례합니다. JPEG은 GIF나 PNG보다 렌더링하는데 에너지를 덜 사용합니다: "누가 내 배터리를 죽였는가: 모바일 브라우저 전력 소비 분석" 연구에 의하면, JPEG이 모든 이미지 크기에서 가장 에너지 효율적입니다.
JPEG을 사용하여, 배터리 수명을 절약할 수 있을 뿐만 아니라, 메모리 사용을 줄이고 다시 그리기 속도를 높일 수 있습니다. 당신이 사용하는 이미지 포맷의 형식은 이미지를 생성하는 동안 에너지 소비에 영향을 줍니다. 이 영향은 이미지가 다른 크기로 다시 그려질 때에도 되풀이됩니다. 앞에서 언급한 것과 같이, 밝은색은 디스플레이가 확장되는 동안에도 더 많은 에너지를 소비합니다. 우리가 이미지 렌더링 비용에 관해 이야기할 때는, 정적인 이미지가 표시될 때의 에너지 비용뿐 아니라, 장치 디코딩, 크기 조정 및 이미지 그리기에 관해 이야기하는 것입니다.
자바스크립트를 줄이세요
래스터 이미지는 가장 대역폭을 많이 먹고, 모든 이미지는 메모리를 많이 먹지만, 메모리 소비와 배터리 소모의 유일한 원인은 아닙니다. 자바스크립트도 마찬가지입니다! 배터리 전력과 메모리 사용량을 절약하기 위해, 자바스크립트의 크기와 동작 모두를 최소화하세요.
브라우저가
저자 : Meghan Blanchette
역자 : 오자현
원문 : 5 ways to improve battery life in your app
편집자 노트: Mobile HTML5는 프론트 엔드 엔지니어이자 잘 알려진 연사인 Estelle Weyl의 책입니다. 이 책은 당신을 더 강력한 웹 개발자로 만들기 위해 SVG, Canvas, 및 모바일 장치에 적합하게 맞춰진 CSS3에 대한 관례를 포함한 실제로 해볼 수 있는 예제로 가득합니다. 아래 발췌된 부분에서, Estelle은 모바일 웹 앱에서 배터리 수명을 개선하기 위해 당신이 할 수 있는 다섯 가지 쉬운 일들을 보여줄 것입니다. 이 책 전반에 걸쳐, 그녀가 제공하는 팁은 이런 기술에 대한 그녀의 실제 경험에서 온 것입니다.
항상 벽에 매여있는 데스크톱 컴퓨터나, 일반적으로 움직이지 않는 사용자가 사용하는 랩톱 컴퓨터와 다르게, 이동하는 사용자는 장치를 온종일 충전하지 않습니다. 이동하는 사용자는 장치가 재충전 사이에 적어도 24시간 유지되기를 기대합니다.
사용자는 통화와 GPS 사용이 배터리 전원을 소모하는 것을 알고 있습니다. 그러나 웹 서핑을 위해 브라우저를 사용하고 있다고 생각한다면, 어떤 웹사이트가 다른 사이트보다 배터리를 더 빠르게 소모할 것으로 생각하지 않을 것입니다. 우리 코드의 전력 소비를 관리하는 것은 개발자로서 우리의 일입니다.
당신은 전원이 연결되지 않은 랩톱에서 CPU 사용이 배터리를 소모하는 것을 알고 있을 것입니다. CPU 사용은 모바일 장치에서도 효과적으로 배터리를 소모하게 합니다. 당신의 랩톱을 빨리 돌게 하거나, 따뜻하게 만들거나 컴퓨터의 팬을 돌게 하는 무엇이든 모바일 장치(만일 전원에 연결되어 있지 않다면)의 배터리도 소모하게 할 것입니다. 방어적으로 코딩하세요: 모바일 장치 사용자들이 전원에 연결되어 있지 않다고 생각하세요.
코드의 에너지 소비를 관리하기 위하여, 우리는 CPU 사용을 관리할 필요가 있습니다. 리플로(reflow) 를 피하세요. 자바스크립트의 크기와 동작 모두를 최소화하세요. 불필요한 AJAX 호출로 계속해서 무선을 깨우지 마세요. 애니메이션을 위해, 자바스크립트보다는 항상 CSS를 사용하세요. 그리고 WebGL을 지원하는 장치의 마케팅팀이 그들의 장치가 최적화되어 있다고 주장할지라도, 모바일 장치에서 WebGL을 제공하지 마세요. 적어도 아직은 아닙니다. WebGL 배터리 성능은 개선되고 있습니다.
어두운색을 사용하세요
디자인에 밝은색을 사용할수록 화면은 더 밝아져야 합니다. AMOLED 화면을 사용하는 휴대전화는 화면이 밝아질수록, 더 많은 에너지를 사용하고, 배터리를 소모합니다. AMOLED, 또는 능동형 유기 발광 다이오드, 화면은 빛이 나는 유기 중합물의 얇은 층으로 구성되어 있습니다. 백라이트가 없어 화면은 매우 얇아질 수 있습니다. 검은 화소는 실제로 꺼져 배터리 수명을 절약합니다. 이러한 비 LCD 화면 장치에서는 밝은색이 표시되는 동안 어두운색이 표시되는 것보다 더 많은 에너지를 소모합니다.
물론, 배터리 소비 외에도 응용 프로그램 디자인에 사용되는 색을 결정하는데 영향을 미치는 문제들이 있습니다. 다만 웹사이트가 소비하는 에너지가 어떤 장치에서는 디자인에 사용된 색에 의해 크게 달라질 수 있다는 것을 알아두세요. 색이 배터리 소비에 영향을 미치는 유일한 기능은 아닙니다. 배경 이미지, 전경 이미지, 비디오, 오디오, 애니메이션과 같은 미디어 요소와 자바스크립트 모두 배터리 소모에 원인이 됩니다. 할 수 있다면 어두운색을 선택하세요. 그럴 수 없다면 다른 기능에서 에너지를 최적화하세요.
JPEG을 사용하세요
PNG 대신 JPEG을 사용하세요. JPEG이 이미지를 더 잘 압축하고, 빠르게 렌더링할 수 있어서 에너지가 좀 더 절약됩니다.
이미지 렌더링은 에너지를 소비합니다. 이것은 사이트의 이미지 개수, 크기 및 형식에 따라, 사용된 에너지의 상당한 비율을 차지할 수 있습니다. 이미지를 렌더링하기 위해 사용된 에너지는 그려진 이미지의 개수와 크기에 비례합니다. JPEG은 GIF나 PNG보다 렌더링하는데 에너지를 덜 사용합니다: "누가 내 배터리를 죽였는가: 모바일 브라우저 전력 소비 분석" 연구에 의하면, JPEG이 모든 이미지 크기에서 가장 에너지 효율적입니다.
JPEG을 사용하여, 배터리 수명을 절약할 수 있을 뿐만 아니라, 메모리 사용을 줄이고 다시 그리기 속도를 높일 수 있습니다. 당신이 사용하는 이미지 포맷의 형식은 이미지를 생성하는 동안 에너지 소비에 영향을 줍니다. 이 영향은 이미지가 다른 크기로 다시 그려질 때에도 되풀이됩니다. 앞에서 언급한 것과 같이, 밝은색은 디스플레이가 확장되는 동안에도 더 많은 에너지를 소비합니다. 우리가 이미지 렌더링 비용에 관해 이야기할 때는, 정적인 이미지가 표시될 때의 에너지 비용뿐 아니라, 장치 디코딩, 크기 조정 및 이미지 그리기에 관해 이야기하는 것입니다.
자바스크립트를 줄이세요
래스터 이미지는 가장 대역폭을 많이 먹고, 모든 이미지는 메모리를 많이 먹지만, 메모리 소비와 배터리 소모의 유일한 원인은 아닙니다. 자바스크립트도 마찬가지입니다! 배터리 전력과 메모리 사용량을 절약하기 위해, 자바스크립트의 크기와 동작 모두를 최소화하세요.
브라우저가
최신 콘텐츠