넥서스4 안드로이드 5.0 롤리팝 업데이트 – 식겁했던 업데이트

2014. 12. 13. | 0 comments

관련 글 : 넥서스7 (2013) 안드로이드 5.0 롤리팝 업데이트 느낌 및 변화
넥서스7 (2013) 안드로이드 롤리팝 5.0.1 업데이트 - 동영상 재생 문제 해결?

 

구글 계정 오류로 정상적인 사용 불가… 추가 업데이트가 나와도 설치 못할 지경
공장초기화라도 해야 하나 식겁… 겨우겨우 안전모드를 통해 해결

 

태블릿과 달리 휴대폰은 갑자기 뭔가 큰 변화를 주기가 꺼려집니다. 대규모 시스템 업데이트를 한다던가, 여러 가지 설정을 왕창 바꾸는 것에 조심스럽죠. 아무래도 기본적으로 '전화기' 이고, 늘 갖고 다니는 것이기 때문에 더욱 그렇습니다. 일상생활에서 휴대폰에 의지하는 부분이 큰 이유도 있겠죠.

넥서스4에 안드로이드 5.0 롤리팝 OTA가 왔지만 한동안 내버려 둔 이유가 그것입니다. 휴대폰이 제대로 작동하지 않을 경우 내 생활에 미칠 영향이 꽤 크다는 거죠. 아침에 기상알람이 울리지 않는다면? 서울버스 앱을 쓸 수 없다면? 업무용 OTP가 작동하지 않는다면? 연락용 메신저가 먹통이라면? 아니 그 전에, 전화도 문자도 안 된다면? 상상만 해도 끔찍하겠죠.

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.

jQuery와 CSS를 이용한 간단한 팝업 레이어

2014. 12. 11. | 0 comments

HTML 문서 내에서 팝업 레이어를 띄울 때 여러 가지 방법을 쓸 수 있다. 자바스크립트로 일일이 만들 수도 있고, jQuery UI나 jQuery Tools 같은 통합 라이브러리나 전용 플러그인도 많다. 효과나 기능도 무척 다양해서 입맛대로 골라 쓰면 된다.

내 경우엔 jQuery Tools를 애용했었는데, 가장 처음 접한 라이브러리이기도 하고 필요로 하는 기능들이 대부분 구현되어 있었기 때문이다. 특히 홈페이지의 데모와 코드설명이 쉽고 간단하게 되어있어 많은 도움이 되었다.

최근에는 정말 간단한 팝업 레이어 기능만 필요하기 때문에 그냥 jQuery로 직접 레이어를 열고 닫는 식으로 쓰고 있다. 정리와 기록 차원에서 적어둔다.

 

HTML

<div id="overlay_t"></div>
<div id="popup_layer">팝업레이어의 내용</div>

#overlay_t 는 팝업 레이어가 열릴 때 배경으로 열리는 반투명 레이어다. 기존 문서를 반쯤 어둡게/밝게 처리해서 팝업 레이어의 주목도를 높인다.

#popup_layer 안에는 팝업 레이어의 내용을 넣는다.

 

CSS

#overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}

#popup_layer { width:400px; margin-bottom:30px; background:#fff; border:solid 1px #ccc; position:absolute; top:260px; left:50%; margin-left:-200px; box-shadow: 0px 1px 20px #333; z-index:100; display:none;}

#overlay_t 는 주로 반투명 검정색으로 많이 쓰기 때문에 배경색과 투명도를 지정해야 한다. z-index는 팝업레이어보다 한 단계 낮게 설정.

#popup_layer 는 대강 모양만 잡아주자. 배경색 지정을 까먹으면 레이어 안의 요소들만 둥둥 떠다니게 되니까 주의. 높이값(top)은 jQuery로 잡을테니 대충 넣자.

 

jQuery

$( document ).ready(function() {
       $('.trigger').click(function(){
        $('#popup_layer, #overlay_t').show();
        $('#popup_layer').css("top", Math.max(0, $(window).scrollTop() + 100) + "px");
        // $('#popup_layer').css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
    });
    $('#overlay_t, .close').click(function(e){
        e.preventDefault();
        $('#popup_layer, #overlay_t').hide();
    });
});

트리거를 클릭하면 팝업 레이어와 반투명 배경을 보이게 한다(show). 팝업 레이어의 높이값은 '현재 보고있는 화면에서 상단 100px 아래'에 위치하도록 설정했다. 주석 처리된 부분은 '현재 보고있는 화면 높이값에서 레이어의 높이값/2 한 값을 뺀' 위치에 오도록 설정한 것이다. 만약 현재 보고있는 화면의 위치와 상관없이 HTML 문서 전체 높이값을 기준으로 레이어를 띄운다면, 그냥 CSS에서 top 값을 지정해주면 된다.

팝업 레이어의 뒤에 위치한 반투명 레이어를 클릭하면 반투명 레이어와 팝업 레이어가 둘 다 사라지도록 설정했다. .close라는 클래스를 가진 버튼을 클릭해도 닫히도록 했다. 팝업 레이어 안에 '닫기'나 'x' 란 이름으로 닫기 버튼을 만들어두면 된다.

 

데모

트리거

 

 

 

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.

넥서스7 (2013) 안드로이드 롤리팝 5.0.1 업데이트 - 동영상 재생 문제 해결?

2014. 12. 7. | 0 comments

관련 글 : 넥서스7 (2013) 안드로이드 5.0 롤리팝 업데이트 느낌 및 변화

지난 12월 3일, 구글 안드로이드 개발자 홈페이지의 '넥서스 기기용 팩토리 이미지' 웹페이지에 롤리팝 5.0.1 업데이트가 올라왔습니다. 전체 넥서스 기기에 적용된 건 아니고 넥서스9(WiFi), 넥서스7(2013, WiFi), 넥서스10 모델에만 올라왔네요.

버전 5.0.1, 빌드번호는 LRX22C로 셋 다 동일합니다. 마침 얼마 전 넥서스7 2세대를 롤리팝으로 업데이트한 뒤 자잘한 문제에 시달렸던 터라, 새 업데이트가 무척 기대되었습니다.

 

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.

넥서스7 (2013) 안드로이드 5.0 롤리팝 업데이트 느낌 및 변화

2014. 11. 25. | 0 comments

관련 글 : 넥서스7 (2013) 안드로이드 4.4 킷캣 업데이트 느낌 및 변화
넥서스7(2013), 넥서스4에 안드로이드 4.4 킷캣 업데이트 후 좀 더 써보니...

 

저는 두 대의 구글 넥서스 기기를 사용하고 있습니다. 스마트폰인 넥서스4와 태블릿인 넥서스7 (2013, 뉴 넥서스7, 넥서스7 2세대)이 그것이죠. 이중 넥서스7 2세대에 안드로이드 5.0 롤리팝 OTA가 왔습니다. 저번 킷캣 때와 비슷한 타이밍에 왔네요. 넥서스4는 저번과 마찬가지로 한참 뒤에나 올 것 같습니다.

관련 스크린샷과 간단한 사용기를 트위터/구글플러스에 올렸는데, 그것들을 모아봤습니다.

 

 

▲ 롤리팝 업데이트 후... 부팅 애니메이션이 바뀌었습니다. 네 개의 동그라미가 빙글빙글 돌다가 마지막에 android 로고를 보여주고 사라집니다.

 

▲ 킷캣 때는 기존의 달빅 런타임과 새로운 ART 런타임 둘 중에서 선택해 쓸 수 있었죠. 롤리팝에서는 ART 런타임만 쓸 수 있습니다. 때문에 업그레이드 후 처음 부팅 시 앱 최적화 작업이 필요합니다. 설치된 앱은 더 많아졌는데 최적화 작업시간은 덜 걸리네요. 킷캣 때에 비해 최적화 작업이 살짝 빨라진 느낌입니다.

 

▲ 기본 글꼴이 나눔고딕에서 본고딕으로 변경되었습니다. 구글의 Noto Fonts 프로젝트에 포함된 글꼴입니다. 한글 글꼴인 본고딕의 경우 구글/어도비/산돌 커뮤니케이션이 힘을 합쳐 만들었습니다.

 

▲ 특정 사이즈에서 특정 글꼴이 마치 비트맵 폰트처럼 애매하게 보이는 경우도 발견했습니다. 킷캣에서 쓰였던 나눔고딕에 비해, 첫인상이 굉장히 딱딱하다는 느낌을 받았습니다. 아무래도 나눔고딕이 좀더 둥글둥글하기 때문에 상대적으로 그렇게 느꼈겠죠. 일주일 정도 지나고 나니 꽤 적응되어 어색한 느낌이 많이 줄었습니다.

 

▲ 특정 형식의 파일에 대한 기본 앱을 지정하지 않았을 때, 앱 연결 화면. 버튼이 아니라 텍스트로만 표현되어 약간 불편할 수도 있습니다. 또한 킷캣 때는 앱의 이름을 터치하면 '한 번만' 버튼을 터치했을 때와 똑같이 작동되었는데, 롤리팝에서는 이게 먹히질 않습니다. '한 번만' 이나 '항상' 버튼 둘 중에서 골라야 합니다.

 

▲ 카메라 촬영음과 스크린샷 촬영음이 변경되었습니다. 기존엔 '쨘!!!' 하는 느낌이었다면 이번엔 '또롱!' 하는 느낌입니다. 롤리팝 공개와 함께 구글 카메라 앱도 업데이트 되었는데, 넥서스7 2세대와 넥서스4 둘 다 최신 버전의 구글 카메라 앱을 쓰고 있으면서도 카메라 촬영음은 다릅니다. 따라서 카메라 촬영음은 앱이 아니라 운영체제를 따라가는 듯 하네요.

 

▲ 노티바 부분이 눈에 띄게 바뀌었습니다. 일단 노티바 메뉴를 여는 방법부터 달라졌는데요, 킷캣 시절엔 태블릿 화면의 왼쪽 상단을 슬라이드하면 노티바 내용이, 오른쪽 상단을 슬라이드하면 환경설정 메뉴가 떴었죠. 폰에서는 한 손가락 / 두 손가락으로 각각 표시됐었고요. 롤리팝에서는 폰과 같은 방법으로 열립니다. 좌우 상관없이 한 손가락으로 슬라이드하면 노티바, 두 손가락으로 슬라이드하면 환경설정. 그리고 한가지 방법이 더 추가되어, 한 손가락으로 노티바를 연 상태에서 또 슬라이드하면 다시 환경설정이 열립니다. 2중으로 열린달까...

노티바 환경설정 부분도 꽤 많이 바뀌었습니다. 밝기 슬라이드는 기존처럼 자동밝기/수동밝기로 구분되지 않고, 모두 자동밝기입니다. 즉 자동으로 밝기가 변하되, 그 기준점을 선택하는 거죠. 와이파이 설정 버튼도 바뀌었습니다. 기존엔 와이파이 버튼을 누르면 설정화면으로 이동, 길게 누르면 와이파이 켜기/끄기로 작동했었죠. 롤리팝에선 와이파이 아이콘을 누르면 켜기/끄기로 작동하고, 아이콘 아래의 와이파이 이름을 누르면 설정화면으로 이동하게 됩니다.

하단의 비행기모드 / 화면방향 / 위치 / 화면전송(크롬캐스트) 등의 아이콘은 따로 설정하는 게게 아니라, 최근에 사용했거나 자주 쓰는 것들을 자동으로 보여주게 됩니다. 위 스크린샷에선 화면방향(세로) 아이콘이 가운데에 있는데, 지금 태블릿을 열어보니 오른쪽으로 옮겨져 있네요. 설마 자주 왔다갔다 하진 않겠죠?

 

 

 

▲ 롤리팝 업데이트 후, 일부 넥서스 모델에서 동영상 재생이 제대로 안될 수도 있습니다. 유튜브, 웹(mp4), 동영상 플레이 앱, 트위터 움짤(mp4) 등이 제대로 표시되지 않게 됩니다. 안드로이드오픈 소스 프로젝트의 이슈트래커에도 등록되었는데 확실한 해결책은 아직 요원한 상태입니다(그새 댓글이 엄청 달렸군요).

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.

안드로이드 태블릿용 크롬 브라우저에서 구글이 빼먹은 것

2014. 10. 27. | 0 comments

플레이스토어에서 크롬 브라우저를 다운받으면 스마트폰과 태블릿에서도 PC와 비슷하게 크롬 브라우저를 쓸 수 있습니다. PC용 크롬과 탭/북마크도 동기화 되고, 속도도 빠르죠. 각 스마트폰 제조사에서 기본으로 넣어둔 스톡 브라우저에 비해 열 수 있는 탭의 수도 훨씬 많습니다. 사실 시험 삼아 100개가 넘는 탭을 열어봤지만 어디가 끝인지 알 수 없었어요.

 

폰에서 작동되는 크롬은 굉장히 심플한 메뉴 구성을 보여줍니다. 주소입력창, 탭 버튼, 점 세개짜리 메뉴 버튼. 화면이 넓은 태블릿에서는 좀더 여유 있는 구성을 볼 수 있습니다. PC용 크롬처럼 각 페이지마다 탭이 따로 표시되고, 앞/뒤로 버튼, 새로고침 버튼, 북마크 버튼, 음성검색 버튼이 늘 화면에 표시되죠. 그런데 여기서 구글이 하나 빼먹은 게 있습니다.

바로 현재 열려진 탭의 갯수를 보여주는 '탭 버튼' 인데요, 사실 태블릿에선 열려진 페이지들의 탭이 늘 표시되기 때문에 필요 없을 것 같기도 합니다. 탭 표시 영역에서 스크롤도 되기 때문에 폰에서처럼 따로 탭을 늘여놓을 필요도 없어 보입니다. 그런데 여기에 심각한 문제가 있었습니다.

 

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.