사물 을 바라보 는 눈 : : ' mobile ' 카테고리 의 글 목록 
 BLOG ARTICLE mobile | 10 ARTICLE FOUND 
 2014 . 06 . 29 Android L ( Material design ) 에서 디자이너 가 알 아 두 면 좋 은 내용 들 
 2013 . 09 . 26 앱 디자인 의 한계 
 2013 . 05 . 31 안드로이드 사이드 메뉴 UI 
 2013 . 03 . 25 안드로이드 제조사 가 메뉴 키를 빼 야 하 는 이유 ( 빼 지 못하 는 이유 ) 
 2012 . 12 . 29 3 일 간 사용 해 본 넥서스 10 사 용기 ( 2 ) 
 2012 . 06 . 06 나인 패치 꼼수 로 5 / 6 / 5 디 코딩 을 막 아 보 자 ( 3 ) 
 2012 . 05 . 25 모바일 그래픽 ( GUI ) 디자이너 를 위한 클라우드 환경 세팅 
 2012 . 01 . 28 1988 년 2 월 29 일 생 은 몇 명 ? 
 2012 . 01 . 21 565 필터 와 나 인 패치 딜레마 ( 1 ) 
 2012 . 01 . 20 GUI 디자이너 가 알 아야 할 RGB _ 565 디 코딩 과 ARGB _ 8888 디 코딩 
 Android L ( Material design ) 에서 디자이너 가 알 아 두 면 좋 은 내용 들 
 mobile 2014 . 06 . 29 23 : 13 
 http : / / developer . android . com / preview / material / index . html 
 에 나온 내용 들 을 중심 으로 , 디자이너 들 이 알 아 두 면 좋 을 내용 들 을 추려 본다 . 
 * The Android L Developer Preview supports drawable tinting : you can define bitmaps as an alpha mask and tint them using a color resource . You create these assets only once and color each instance to match your theme . Drawables also now support specifying most XML properties as theme attributes . 
 Tinting 을 위한 컬러 리소스 로 비트맵 이미지 를 활용 할 수 있 게 됐 다 . 기존 에 는 컬러 값 을 코드 로 지정 하 고 , 그것 을 불러다 사용 했 는데 , 이제 비트맵 이미지 에 투명도 나 컬러 를 입혀서 그걸 가지 고 Tinting 작업 을 할 수 있 다 ( 전체 적 인 브랜드 컬러 를 유지 하 는 게 가능 ) . 옐로우 톤 으로 유지 하 던 전체 디자인 을 비트맵 이미지 하나 바꿈 으로써 그린 톤 으로 바꿔 버릴 수 있 다는 얘기 . 
 * Bitmap -> Primary color libraryThe Android L Developer Preview Support Library includes a color extraction library that lets you automatically extract prominent colors from a bitmap image . 
 예전 에 어떤 앱 에서 , 앨범아트 의 가장 주된 색상 을 뽑 아다가 앨범 제목 텍스트 에 입히 는 것 을 보 았 는데 , 대략 그런 내용 이 다 . 비트맵 이미지 에서 가장 대표 적 인 색 을 하나 뽑아내 주 는 라이브러리 가 탑재 됐 단 얘기 . 
 * Specify the elevation of your views to cast appropriate shadows . 
 material 디자인 에 깊이 ( depth 라고 쓰 지만 정확 하 게 는 높이 가 더 맞 지 싶 다 ? ) 개념 이 들어왔 다는 얘기 는 익히 도 는 소문 대로 . 근데 이 깊이 를 지정 하 면 그림자 모양 이 조금 씩 달라져서 , 화면 에서 멀 고 가깝 고 의 느낌 이 달라짐 . 
 * Rounded corner 
 css 의 border - radius 처럼 Round corner 값 을 지원 ( 이건 이미 있 었 음 ) . 
 You can also create outlines in your code using the methods in the Outline class , and you can assign them to views with the View . setOutline method . 
 역시 css 의 border 속성 처럼 outline 도 지원 하 기 시작 한다는 거 . 
 이렇게 되 면 , 왠만 한 카드 타입 , 박스 타입 의 디자인 들 은 비트맵 으로 구성 된 나인 패치 없이 도 그려낼 수 있 게 됨 . css 의 초기 버전 쯤 지원 한다는 얘기 ? 
 * Cliping views 
 Clip a view to its outline area using the View . setClipToOutline method ( round , rounded rect ) 
 이미지 클 리핑 역시 지원 되 는데 , 사각형 ( 이걸 클립 핑이 라고 봐야 하나 ? ) , 원형 , 둥근 모서리 사각형 등등 을 지원 한다고 함 . 
 구독 하 기 사물 을 바라보 는 눈 
 Android L , DESIGN , Material , 디자인 , 안드로이드 
 앱 디자인 의 한계 
 mobile 2013 . 09 . 26 10 : 55 
 현재 의 앱 디자인 은 과거 웹 디자인 을 테이블 로 짜 던 시절 과 거의 비슷 하 다 . 모든 이미지 의 shadow 를 포토샵 에서 잘라 내 서 나 인 패치 형태 의 테이블 에 한 귀퉁이 씩 짜넣 던 그 시절 . 이 답답 함 때문 에 모바일 웹 디자인 이 차라리 편한 것 같 다 . 적어도 레이아웃 에서 shadow 를 고민 하 지 않 아도 되 니까 . 
 언제 쯤 이 면 앱 디자인 에서 도 CSS 가 구현 하 는 수준 의 언어 기반 렌더링 이 가능 해질 지 . ... 
 CSS , shadow , 나 인 패치 , 레이아웃 , 앱 디자인 , 웹 디자인 
 안드로이드 사이드 메뉴 UI 
 mobile 2013 . 05 . 31 10 : 51 
 구글 이 사이드 메뉴 를 공식 적 인 UI 로 가져오 면서 , Google Earth 에 첫 적용 을 했 는데 ( google shopper 도 있 지만 국내 에서 다운로드 가 되 지 않 음 ) , 구체 적 인 가이드 가 아직 발표 되 지 않 은 관계 로 일일이 화면 을 뜯 어서 분석 해 보 기 로 한다 . 
 왼쪽 부터 , 평상시 , 눌렀 을 때 , 펼쳐진 사이드 메뉴 . 
 사이드 메뉴 쪽 버튼 을 눌렀 을 때 눌린 영역 을 측정 해 보 니 가로 97 px , 세로 96 px 로 나온다 . xhdpi 환경 에서 스크린 캡쳐 를 했 기 때문 에 대략 48 dp 임 을 알 수 있 는데 , 가로 가 한 픽셀 차이 나 는 것 은 잘 모르 겠 다 . 
 저 문제 의 햄버거 아이콘 이 실존 하 는 것 인지 알아보 기 위해 , apk 를 뜯 어 이미지 리소스 를 확인 해본다 . ic _ drawer . png 라고 있 다 . 이 아이콘 의 크기 는 xhdpi 폴더 에서 가로세로 32 px . 즉 16 dp 의 크기 다 . 
 구글 어스 의 캡쳐 화면 에 이미지 리소스 를 갖 다 얹 어 보 면 딱 나온다 . 앱 아이콘 이랑 살짝 부대 낀다 . 
 그리고 이것 이 사이드 메뉴 가 펼쳐졌 을 때 , 햄버거 아이콘 이 왼쪽 으로 스윽 빠진 모습 . 이때 의 가로 폭 은 21 px 이 나오 는데 , 역시 딱 떨어지 는 dp 가 아니 어서 아쉽 다 . 
 대략 16 dp 에서 10 dp 로 뒷걸음질 하 는 걸로 보 고 6 dp 만큼 애니메이션 이 있 다고 보 면 될 거 같 다 . 
 앱 아이콘 과 크기 위치 를 분석 해 보 면 , 앱 아이콘 은 32 dp 수준 으로 들어가 고 우측 에 4 dp 정도 공간 을 비워 주 는 듯 하 다 . 좌측 햄버거 아이콘 이랑 은 적당히 겹치 는 양상 . 그저 라이브러리 가 있 나 보 다 한다 . 
 그리고 마지막 으로 하나 ! 
 hdpi 폴더 안 에 들 어 있 는 icon _ dev . png 는 대체 무엇 ? ???? ㅎㅎㅎ 
 android , Earth , Google , guide , Hamberger , Menu , Side , UI , 구글 , 사이드 메뉴 , 안드로이드 , 어스 , 햄버거 
 안드로이드 제조사 가 메뉴 키를 빼 야 하 는 이유 ( 빼 지 못하 는 이유 ) 
 mobile 2013 . 03 . 25 11 : 30 
 안드로이드 4 . 0 디자인 가이드라인 에 분명 메뉴 키를 빼 라 했 지만 , 제 조사 들 은 최신 제품 에 여전히 메뉴 키를 고수 하 고 있 다 . 아마도 하위 버전 호환 성 때문 에 울 며 겨자 먹 기 로 메뉴 버튼 을 가져가 는 것 같 은데 , 최신 안드로이드 앱 에서 는 하드웨어 메뉴 키가 존재 하 는 것 만 으로 도 사용 성 에 엄청난 타격 을 입 는다 . 
 ▲ LG 옵티머스 G pro ( 왼쪽 ) 와 삼성 갤럭시 노트 II ( 오른쪽 ) 의 하드웨어 키 
 결론 부터 말 하 면 , 화면 에 보여야 할 액션 오버 플로우 ( action overflow ) 버튼 이 사라지 는 현상 인데 , 아래 그림 과 같 다 . 똑같 은 화면 인데 오른쪽 스크린 에 는 버튼 이 아예 없 다 . 하드웨어 메뉴 키를 누르 란 소리 다 . 
 *' 액션 오버 플로우 ( action overflow ) ' 는 액션 바를 사용 하 는 안드로이드 4 . 0 이상 의 앱 들 에서 , 공간 이 부족 해서 나오 지 못하 는 액션 아이템 들 을 한 데 모아 놓 는 버튼 이 다 . 구글 기본 앱 은 물론 이 고 , 4 . 0 이상 의 기본 가이드라인 을 준수 하 는 앱 이 라면 대다수 가 사용 하 고 있 다 . 
 ▲ 하드웨어 키가 없 는 안드로이드 ( 왼쪽 ) 하드웨어 메뉴 키가 있 는 안드로이드 ( 오른쪽 ) 
 물론 하드웨어 메뉴 키를 누르 면 동일 한 기능 이 작동 하 기 때문 에 , 기능 자체 가 없 거나 하 는 것 은 아니 지만 . 메뉴 키 자체 가 available 하 다는 사실 을 알려 줄 수 없 으니 사용 성 에 있 어서 는 정말 치명 적 이 라고 할 수 밖 에 . 
 제 조사 가 이런 선택 을 할 수 밖 에 없 는 이유 에 는 아마도 여러 가지 이유 가 있 을 텐데 … 
 1 ) 그 동안 사용 하 던 하드웨어 홈 버튼 을 포기 할 수 없 어서 . 
 ( 하드웨어 홈 버튼 은 사용 성 에 좋 은 선택 이 니 어느 정도 이해 함 ) 
 2 ) 하드웨어 홈 버튼 을 그대로 사용 하 자니 , 소프트웨어 키 를 사용 할 수 없 음 . ( 중복 됨 ) 
 3 ) 뒤 로 가 기 버튼 도 하드웨어 키로 처리 
 4 ) 홈 버튼 을 하드웨어 로 중앙 에 박 았 다면 , 이제 남 은 자리 는 한 자리 . 여기 에 ‘ 멀티태스킹 버튼 ’ 을 넣 을 것 인가 ? ‘ 메뉴 버튼 ’ 을 넣 을 것 인가 ? 
 5 ) 안드로이드 2 . x 대 에서 는 액션 바를 사용 하 지 않 으니 , 메뉴 키를 사용 해야 하 는 상황 이 생기 면 어딘가 에 메뉴 키가 존재 해야 함 . 소프트웨어 키 영역 이 아예 존재 하 지 않 기 때문 에 , 울 며 겨자 먹 기 로 하드웨어 키로 존재 해야 함 . 
 6 ) 따라서 , 남 은 공간 에 ‘ 멀티태스킹 ’ 같이 좋 은 버튼 놔두 고 ‘ 메뉴 버튼 ’ 을 넣 을 수 밖 에 . 
 아마도 이런 고민 의 결과 가 아닐까 싶 다 . ( 이런 고민 을 하 기 는 했 겠 지 ? ) 
 하드웨어 키 를 사용 하 지 않 는 경우 에 도 이런 하위 호환 성 을 위해서 소프트웨어 키 영역 에 ‘ 메뉴 버튼 ’ 을 넣 어서 처리 하 는 경우 가 있 다 . 하지만 이건 어디 까지 나 소프트웨어 키 를 쓰 는 경우 니까 . 지 들 맘대로 넣 었 다 뺐 다가 되 겠 지 . 
 ▲ 소프트웨어 키 를 사용 하 는 경우 하위 호환 을 위해 임시 로 배치 하 는 메뉴 키 ( 아우 궁색 해 보여 ) 
 더 큰 문제 는 이런 액션 오버 플로우 버튼 의 사라지 는 현상 을 간단 한 옵션 처리 등 으로 막 을 방법 이 없 다는 것 이 다 . 안드로이드 디자인 가이드라인 에서 는 단지 ‘ 한 화면 에 메뉴 키가 2 개 나 존재 할 수 없 다 ’ 라는 ( 이것 들 아 , 하드웨어 키 는 화면 에 없 단 말 이 다 ! ) 이유 로 허용 하 지 않 고 있 다 . 
 내 가 제조사 라면 어떻 게 했 을까 ? 
 메뉴 키가 사용 가능 한 경우 하드웨어 메뉴 키가 깜빡 거려 주 는 ? 혹은 라이팅 을 더 세 게 좀 넣 어 주 는 방법 ? 혹은 메뉴 키 라이팅 이 붉 은 색 으로 변해 ? 뭐 그런 식 으로 라도 처리 하 지 않 는 이상 . 누구 도 이 화면 에서 메뉴 키를 쓸 수 있 다는 걸 알 수 가 없 을 것 이 다 . 
 결론 은 이런 디자인 가이드 를 만든 안드로이드 가 나쁘 다는 식 의 결론 을 내릴 수 밖 에 . 
 액션 오버플로 버튼 을 항상 뜨 도록 허하 라 ! 허하 라 ! 
 Action , g , LG , Overflow , 갤럭시 , 노트 , 메뉴 버튼 , 메뉴 키 , 삼성 , 안드로이드 , 액션 , 오버플로 , 오버 플로우 , 옵티머스 , 제 조사 , 프로 
 3 일 간 사용 해 본 넥서스 10 사 용기 
 mobile 2012 . 12 . 29 16 : 52 
 - 300 dpi 가 넘 는 해상도 와 10 . 1 인치 스크린 . 확실히 책 보 기 에 편하 다 . 넥 7 도 고민 하 다가 관 둔 것 이 결국 a 4 사이즈 pdf 읽 기 가 어렵 다는 판단 이 었 는데 , 이 점 은 확실 한 듯 . 
 - 안드로이드 가 가지 는 장점 : 터치 인터페이스 와 마우스 + 키보드 인터페이스 를 모두 사용 가능 . 블 투 마우스 + 블 투 키보드 + 윈도 원격 접속 을 사용 하 면 그냥 윈도 노트북 이 되 어 버림 . 
 - 가격 이 싸 다 . ( 그러나 국내 에서 배송 대행 시키 고 , 필름 붙이 고 케이스 달 고 이래저래 하 면 그냥 아이패드 가격 이나 별 차이 가 없 다 ) 
 - 잦 은 freezing 현상 . 포럼 에서 도 자주 얘기 되 고 있 고 , 안드로이드 업그레이드 로 어떻게 좀 나아지 겠 지 . .. 하 는 분위기 . 사흘 새 서너 번 먹통 됨 . 내 뽑 기 운 이 안 좋 은가 . 
 - 터치 움직임 을 따라오 지 못하 는 display frequency . 가로 로 길 게 놓 고 쓸 때 는 위아래 스크롤 이 크 게 거슬리 지 않 는데 , 세로 로 놓 고 위아래 스크롤 할 때 에 는 주사 방향 이 좌 -> 우 또는 우 -> 좌 가 되 기 때문 에 화면 울렁임 이 심한 편 . 핀터 레스 트 같이 이미지 를 많이 사용 하 는 앱 들 에서 쉽 게 발견 할 수 있 음 . 
 - 전 면부 에 로고 나 라벨 이 전혀 없 기 때문 에 하드웨어 버튼 찾 기 가 힘 듦 . 매번 네 귀퉁이 를 다 더듬 어서 야 하드웨어 버튼 찾 을 수 있 음 –> 사진 보 면 일부러 왼쪽 위 귀퉁이 에 스티커 를 붙여 놓 았 음 . 이거 붙이 고 훨씬 편해짐 . 
 - 세로 그립 을 하 면 조도 센서 를 손 으로 가리 게 되 는 경우 가 종종 생김 . 이상 하 게 화면 이 어두워 진다 싶 더니 . .. 이게 손 으로 센서 를 가린 거 였 음 . 
 10 , 10 . 1 인치 , 10 인치 , 300 dpi , android , Nexus , nexus 10 , 넥서스 , 넥서스 10 , 안드로이드 , 해상도 
 나인 패치 꼼수 로 5 / 6 / 5 디 코딩 을 막 아 보 자 
 mobile 2012 . 06 . 06 15 : 33 
 이전 포스팅 에서 ( http : / / zamar . tistory . com / 162 ) 한 번 얘기 한 적 있 는 ‘ 5 / 6 / 5 디 코딩 ’ 이슈 . 32 bit 이미지 로 아무리 만들 어도 , 기기 에서 256 컬러 로 강제 로 다운 시켜 버리 는 현상 이 다 . 이렇게 되 면 넓 은 면적 에 그라 데 이 션 이 들어간 부분 이나 , 그 라데 이 션 이 있 는 나인 패치 들 은 아주 절망 적 인 계단 현상 을 볼 수 있 다 . 
 이게 딱히 방법 이 없 어서 그 동안 깨 나 골치 를 썩였 는데 , 나 인 패치 에 꼼수 를 조금 부리 면 기기 에서 강제 로 디 코딩 하 는 것 을 막 을 수 있 다 . 
 안드로이드 는 이미지 에 투명도 가 조금 이 라도 들어가 면 , transparency 를 구현 하 기 위해서 32 bit 이미지 로 디 코딩 을 하 게 되 는데 , 이걸 활용 하 는 것 이 다 . 
 디자이너 : 안드로이드 님 여기 방금 만든 따끈 한 나인 패치 입니다 . 그 라데 이 션 들어가 있 으니 조심히 다뤄 주 세요 . 
 안드로이드 : 엇 ? 이 이미지 는 그라 데 이 션 이 조금 있 긴 하 지만 … 보 자 … 여긴 투명도 가 없 잖아 . 뭐 이런 거 따위 에 32 bit 디 코딩 을 해서 아까운 메모리 를 쓰 나 . 됐 어 ! 너 는 그냥 256 컬러 로 디 코딩 해 줘 버리 겠 다 ! 
 디자이너 : 흑흑흑 … 내 그 라데 이 션 안습 ㅠㅠ 
 자 , 아래 의 방법 으로 안드로이드 를 속이 고 , 32 bit 디 코딩 을 쟁취 하 자 . 
 ▲ 이것 이 원본 나인 패치 
 ▲ 맨 위 에 한 픽셀 만 뜯 어 내 자 . delete 해서 아예 지워 버린다 . 
 ▲ 여기 가 핵심 . 방금 잘라 낸 곳 과 거의 비슷 한 컬러 로 
 100 % 가 아닌 99 % 불 투명도 로 채워 넣 는다 . 
 ▲ 99 % 불 투명도 로 채워 넣 어서 원래 나 인 패치 와 비슷 하 게 만들 어 진 나인 패치 
 디자이너 : 안드로이드 님 여기 방금 만든 따끈 한 나인 패치 입니다 . 한번 보 시 죠 . 
 안드로이드 : 흠 . 보 자 , 흔한 나인 패치 따위 인 거 같 은 … 헛 ? 투명도 가 있 잖아 ? 어이쿠 . 그럼 32 bit 디 코딩 해 줘야지 . 옛다 . 
 디자이너 : 오예 ! 땡큐 땡큐 ~~ 나이스 그 라데 이 션 ! 
 256 , 5 / 6 / 5 , 565 , 9 patch , android , banding , Gradation , 계단 , 그 라데 이 션 , 나 인 패치 , 디 코딩 , 안드로이드 
 모바일 그래픽 ( GUI ) 디자이너 를 위한 클라우드 환경 세팅 
 mobile 2012 . 05 . 25 19 : 14 
 아 … 왜 진작 클라우드 를 쓸 생각 을 안 했 을까 . 
 바보 같이 맨날 캡쳐 화면 을 메일 로 보내 고 있 었 네 . 하 여 , 오늘 세팅 해 놓 은 환경 을 소개 . 나 와 같 은 바보 가 또 안 생기 길 . 
 iOS 환경 
 iOS 는 iCloud 로 아주 심플 하 게 해결 할 수 있 습니다 . 
 1 ) 우선 iCloud 제어판 을 PC 에 설치 합니다 . 
 http : / / www . apple . com / kr / icloud / setup / pc . html 
 2 ) 설치 후 iCloud 제어판 에서 ‘ 사진 스트림 ’ 을 활성 화 합니다 . 
 3 ) 기본 적 으로 다운로드 폴더 와 업로드 폴더 가 생깁니다 . 위치 바꿔 주 시 고 싶 으시 면 바꾸 시 구요 . 
 자 . 세팅 끝 ! 
 이제 iOS 디바이스 에서 화면 캡쳐 를 하 면 자동 으로 ‘ 다운로드 ’ 폴더 에 캡쳐 한 이미지 가 쏙 ! 
 그리고 그래픽 툴 에서 만든 시안 을 ‘ 업로드 ’ 폴더 에 쏙 넣 으면 iOS 디바이스 에 스르르 ~ 하 고 나타날 겁니다 . 
 Android 환경 
 안드로이드 는 한 방 으로 해결 되 는 클라우드 서비스 가 없 어서 부득 이 2 가지 를 섞 어서 쓰 겠 습니다 . 
 I . Android to PC 
 1 ) 화면 캡쳐 
 화면 을 캡쳐 하 는 툴 은 제각각 알 아서 쓰 실테 지만 , 저 는 마켓 에서 ‘ Screenshot UX ’ 라는 걸 다운 받 았 습니다 . 
 PNG 포맷 으로 화질 손상 없이 캡쳐 가 되 는 점 이 좋 네요 . 또 , SDcard 안 에 DCIM 폴더 하위 로 캡쳐 된 이미지 를 경로 설정 할 수 있 어서 좋 습니다 . ( 이게 돼야 dropbox 를 쓸 수 있 다는 … ) 
 2 ) PC 로 자동 전송 
 안드로이드 기기 에서 찍 은 사진 이나 캡쳐 화면 을 자동 으로 PC 에 보내 주 는 툴 이 몇몇 있 습니다 . 제 가 사용 해 본 것 들 중 에 이게 되 는 클라우드 가 sugarsync 와 dropbox 인데요 , 편의 성 으로 나 안정 성 으로 나 dropbox 가 낫 습니다 . 
 드 랍 박스 를 실행 하 면 , 중간 에 ‘ uploads ’ 탭 이 있 는데요 , 카메라 로 찍 은 사진 을 자동 으로 바로 바로 올려 버리 는 세팅 이 있 습니다 . 환경 설정 들어가 면 Camera Upload 관련 설정 이 있 습니다 . 
 기본 적 으로 SDcard 안 에 있 는 DCIM 폴더 밑 을 자동 으로 보냅니다 . 따라서 , 1 ) 번 에서 의 캡쳐 프로그램 이 DCIM 밑 으로 이미지 를 저장 하 지 않 으면 소용없 습니다 . 
 3 ) PC 에서 받 기 ! 
 dropbox 가 좋 은 건 새로 이미지 를 싱크 하 면 자동 으로 버블 팁 이 떠서 어떤 사진 이 들어왔 다는 걸 표시 해 주 는 겁니다 . 또 버블 팁 을 누르 면 자동 으로 사진 을 열 어 주 죠 . ( sugarsync 의 경우 이 기능 이 부재 해서 결국 버렸 습니다 . 안정 성 도 별로 고 ) 
 II . PC to Android 
 드 랍 박스 가 upload 까지 완벽 하 게 지원 해 주 면 참 좋 겠 는데 ! !!! 그게 좀 문제 가 있 습니다 . 바로 이런 거 죠 . 
 좋 은 화질 안 좋 은 화질 
 ▲ 왼쪽 은 원본 이미지 / 우측 은 모바일 에서 dropbox 앱 으로 열 었 을 때 
 dropbox 앱 에서 싱크 된 이미지 를 열 면 화질 저하 가 일어납니다 . 전송 된 사진 의 퀄리티 문제 가 아니 라 , 드 랍 박스 뷰어 의 문제 죠 . 이렇게 되 면 또 이 이미지 를 SDcard 에 어디 저장 해서 봐야 하 는 데 그러 면 이게 다 무슨 짓 . 
 1 ) N 드라이브 설치 
 드 랍 박스 외 에 uCloud 도 써 봤 지만 원본 화질 을 제대로 재현 해 주 지 못하 는 현상 + 풀 스크린 지원 못 함 ㅠㅠ 
 해서 그냥 N 드라이브 로 선택 . full screen 에 원본 화질 재현 해 줘서 굿 . 
 ▲ 전체 화면 및 원본 화질 재현 이 되 는 클라우드 군요 ! 짝짝 짝 ~ 
 2 ) N 드라이브 폴더 에 시안 투 척 
 이건 뭐 … 포토샵 에서 여기 로 세이브 하 시 면 되 겠 습니다 . 자동 으로 폰 에 동기 화 되 겠 죠 ? 
 Additional tip . 
 파일 탐색기 에 ‘ 즐겨찾기 ’ 에다 가 이 클라우드 관련 폴더 들 을 정리 해 놓 으면 좋 습니다 . 
 작업 결과물 투척 하 기 에 도 , 캡쳐 화면 꺼내 오 기 에 도 굿 ! 
 android , dropbox , GUI , icloud , ios , N 드라이브 , ScreenShot , sync , 그래픽 , 동기 화 , 드 랍 박스 , 스크린 샷 , 아이 클라우드 , 아이 팟 , 아이폰 , 안드로이드 , 캡쳐 , 클라우드 
 1988 년 2 월 29 일 생 은 몇 명 ? 
 mobile 2012 . 01 . 28 11 : 05 
 미 로니 에서 는 생일 과 관련 된 뱃지 를 나눠 주 거나 관련 된 이벤트 를 만들 기 때문 에 . 가입 할 때 생일 을 받 는 부분 이 있 다 . ( 옵션 ) 
 입력 하 지 않 을 수 도 있 기 때문 에 그냥 스킵 하 고 가입 할 수 있 는데 , 이럴 때 디폴트 생년월일 이 들어가 게 된다 . 
 문제 는 이 디폴트 생년월일 이 너무 평범 하 면 다른 유저 들 의 진짜 생일 과 구분 할 수 없 게 된다는 것 … 
 해서 고민 끝 에 1988 년 2 월 29 일 을 디폴트 로 넣 기 로 했 다 . 
 여기 에 는 두 가지 이유 가 있 는데 
 1 . 사용 성 
 2 . DB 필터링 
 현재 미 로니 를 주로 사용 하 는 유저 가 10 대 후반 에서 30 대 초반 까지 인데 , 이 사람 들 이 80 년 생 에서 90 년 생 사이 다 . 
 그럼 디폴트 생년월일 을 너무 생뚱맞 은 1900 등 으로 만들 어 버리 면 카운터 를 +, - 하 면서 자기 생년 찾 기 가 무척 힘들 어 진다 . 해서 적어도 8 , 90 년 생 들 이 자기 생년 찾 기 에 어렵 지 않 도록 만들 어 주 는 것 이 1988 년 의 의미 . 
 그리고 2 월 29 일 은 앞 에서 말 한 것 처럼 , DB 에서 생일 을 입력 한 유저 와 그렇 지 않 은 유저 를 필터링 하 는 데 쓰인다 . 
 88 년 , db , 가입 , 데이터베이스 , 생년월일 , 생일 , 윤달 , 이벤트 , 회원 가입 
 565 필터 와 나 인 패치 딜레마 
 mobile 2012 . 01 . 21 00 : 36 
 앞글 에서 말 한 문제 를 해결 하 기 위해 … 
 16 비트 컬러 로 ( 라고 적 고 256 칼라 라고 부른다 ) 이미지 파 레트 를 고쳐 볼라고 하 니 , 흔히 말 하 는 5 / 6 / 5 필터 를 사용 해야 하 는 상황 이 됐 다 . 5 / 6 / 5 필터 는 telegraphics 라는 데 서 무료 로 제공 하 고 있 는데 , 모바일 GUI 하 는 사람 들 은 다 알 고 있 던 툴 인 듯 . ( 나 만 몰랐 어 ㅠ _ ㅠ ) 
 이 5 / 6 / 5 필터 를 사용 하 면 dithering 을 통해서 그 라데 이 션 같 은 많 은 계조 가 필요 한 것 들 을 눈 에 거슬리 지 않 게 16 비트 컬러 로 낮춰 준다 . 
 언뜻 눈 으로 보 면 별반 차이 가 없 다 . 그러 라고 필터 를 만든 거 겠 지만 … 
 그러나 확대 해서 보 면 대략 이런 차이 … ( 보일 런지 ? ???) 
 오케이 . 여기 까진 좋 았 다 . 
 근데 문제 는 안드로이드 에서 버튼 따위 를 만들 때 많이 쓰 는 나인 패치 ( nine - patch ) 에 이 필터 를 먹이 기 시작 하 면서 딜레마 가 생겨 버렸 다 . 
 왼쪽 에 보이 는 것 이 원본 나인 패치 고 , 오른쪽 이 5 / 6 / 5 필터 를 먹인 나인 패치 다 . 문제 는 나 인 패치 에서 늘어나 는 영역 이 붉 은 색 으로 박스 쳐 놓 은 저 한 픽셀 이 라는 데 있 다 . ( 늘어나 는 픽셀 의 범위 를 더 지정 할 수 도 있 지만 , 해결책 이 되 지 못한다 . ) 
 보 시 다시피 5 / 6 / 5 필터 는 그라 데 이 션 을 사방팔방 모자이크 를 하 면서 dithering 을 하 기 때문 에 , vertical 한 픽셀 만 잡 아서 늘이 면 진정 한 의미 의 dithering 이 되 었 다고 볼 수 가 없 다 . 
 엄청난 그 라데 이 션 깨 짐 현상 ㅠ _ ㅠ 
 그 결과 는 아래 와 같 다 . 
 앞서 도 말 했 지만 , 늘어나 는 영역 을 두어 픽셀 정도 같이 잡 아 놔도 , 늘어난 영역 에 픽셀 들 이 반복 해서 채워지 는 개념 이 아니 라서 . 이 문제 가 해결 이 안 된다 . 
 차라리 HTML / CSS 처럼 stretch 가 아닌 fill 의 개념 으로 nine - patch 를 만들 수 있 다면 , 좋 겠 는데 . 고건 좀 아쉽 다 . ( 근데 이거 도 또 다른 문제 를 불러일으킬 듯 ) 
 안드로이드 에서 도 tile 형태 로 이미지 를 만들 어 낼 수 있 음 ! ( 그렇 다고 5 / 6 / 5 문제 가 쉽 게 해결 되 지 는 않 음 ) 
 5 - 6 - 5 , 5 / 6 / 5 , 565 filter , 9 패치 , dithering , Gradation , nine - patch , rgb _ 565 , telegraphics , 나 인 패치 
 GUI 디자이너 가 알 아야 할 RGB _ 565 디 코딩 과 ARGB _ 8888 디 코딩 
 mobile 2012 . 01 . 20 17 : 16 
 왼쪽 캡쳐 는 HTC evo 4 G + 에서 캡쳐 한 미 로니 화면 이 고 , 오른쪽 캡쳐 는 LG 옵티머스 LTE 로 캡쳐 한 화면 . 물론 둘 의 해상도 는 qHD 와 HD 로 차이 가 좀 나 지만 , 이 문제 의 핵심 은 32 bit 컬러 구현 을 하 느냐 , 16 bit 컬러 구현 을 하 느냐 의 차이 로 귀결 됨 . 
 소프트웨어 상 에서 png 를 어떻게 decoding 해내 느냐 의 차이 로 볼 수 있 는데 , decoder 를 어떤 것 을 쓰 느냐 에 따라 다르 다 . PNG 디 코딩 은 뭐 여러 가지 방법 으로 가능 한데 , 우리 CTO 님 께서 는 ARGB _ 8888 로 디 코딩 하 라고 짜 놓 은 것 을 , 제 조사 에서 강제 로 RGB _ 565 로 디 코딩 해버려서 나타나 는 현상 이 라고 볼 수 있 다 . ( 삼성 갤 스 . 갤 스투 . 에스 케이 w 에서 는 정상 작동 . LG 옵티머스 LTE 와 삼성 갤럭시 s 2 HD LTE 두 모델 에서 나타나 는 현상 ) 
 16 Bit Bitmap : # RRRRRGGGGGGBBBBB ( RGB _ 565 ) 
 24 Bit Bitmap : # RRRRRRRRGGGGGGGGBBBBBBBB ( RGB _ 888 ) 
 32 Bit Bitmap : # A A A A A A A ARRRRRRRRGGGGGGGGBBBBBBBB ( ARGB _ 8888 ) 
 지금 까지 nexus one 이랑 htc 폰 들 만 가지 고 테 스팅 을 해 오 다 보 니 , 이런 차이 를 발견 하 지 못했 던 것 같 다 . 이 이미지 소스 들 을 다 고칠라 니 아 . . 답답 하 구만 . 우선 나 인 패치 는 그냥 두 고 넙대 대한 그 라데 이 션 들 만 좀 손 댔 는데 , 나 인 패치 는 언제 다 고치 나 ㅠ _ ㅠ 
 16 BIT , 32 bit , android , argb _ 8888 , decoding , GUI , HTC evo 4 g , Optimus LTE , PNG , rgb _ 565 , 디 코딩 , 컬러 
 COPYRIGHT ⓒ woore , ALL RIGHTS RESERVED . CONTACT BLOGGER . 
 designer ' s viewpoint 
 by woore 
 생각 ( 47 ) 
 일상 의 디자인 ( 78 ) 
 들여다보 다 ( 107 ) 
 도구 와 팁 ( 22 ) 
 --- Select Archive --- 2014 / 11 ( 1 ) 2014 / 08 ( 1 ) 2014 / 06 ( 2 ) 2014 / 05 ( 1 ) 2014 / 04 ( 1 ) 
 TODAY 8 | YESTERDAY 10