직장 4년 넘게 다니고 이직했는데, 여직 가족들이랑 제대로 휴가를 못 지낸채로 일하고 있던 터라 간만에 큰 여행을 가기로 결심을 했다.

리조트에서 푹 쉬다 오는 여행이다보니, 아무래도 숙소 안에서 볼 책이나 영화, 음악 등등을 챙겨야 하는데, 집에 노트북도 없고, 예전처럼 노트북을 빌려주는 ‘회사’에서도 퇴직했고. 해서, 내 스마트폰에 mhl 케이블 조합을 고민하게 됐다.

mhl 이란, 일반적으로 충전용도로 쓰는 micro USB 단자에서 HDMI 출력을 지원하는 표준을 말한다. 과거 LG에서 나온 스마트폰 몇 종들이 미니 HDMI 단자를 따로 갖고 있는 것에 비해, 단자가 하나로 통합된 것이 장점이다. 사진에서 보듯이,

1. mhl 케이블과 스마트폰이 한번 연결되고
2. mhl 케이블에서 HDMI 케이블이 한번 더 연결되고
3. mhl 케이블에 전원공급 (이것도 micro USB 로 된 모델이 많아서, 그냥 스마트폰 충전기를 쓰면 됨) 이 한번 연결된다.

현재 국내에서 mhl 표준을 지원하는 폰을 구하려면, 갤럭시 s2 가 가장 보편적이고, htc 에서 나온 다수 모델 들도 mhl 을 지원한다. 사진 속에 나오는 모델은 htc EVO 4G+

mhl 케이블을 이용해서 TV의 HDMI 단자로 연결하자 상단표시줄에 HDMI 로고가 등장

 

화면이 미러링 되는 것을 확인할 수 있다. 미로니를 실행시켜 아델의 음악을 듣는 중.
TV 소리가 화장실 스피커로도 나와서 숙소 전체에서 사운드 충만!!!

MHL 케이블로 미러링 상태에서 사용 모습

 

하지만 HDMI 케이블이 무작정 긴 것도 아니고, mhl 케이블에는 따로 전원도 물려줘야해서, TV 가까이에서만 붙어 조작하기엔 좀 어려움이 있다. 해서, 함께 가져간 블루투스 키보드를 무선 리모컨 삼아 영화를 보는 것도 성공.

 

블루투스를 활성화 한 다음

 

영화를 감상! 블루투스 키보드는 일종의 무선 리모컨 역할을 하는 셈.

 

mhl 케이블이 아직 널리 알려지지 않았고, 또 지원하는 단말도 아직은 적은 편이지만 조만간 거의 표준으로 자리잡고 나면, 활용도가 제법 높아질 것으로 예상된다.

파비콘(favicon)은 웹브라우저의 탭에 표시되는 사이트 고유의 아이콘을 말한다.

 

이 favicon 을 만들어볼 요량으로 여기저기 찾아보니, 우선 이 파비콘의 포맷은 .ICO 파일.
이 ICO 파일의 위키백과를 찾아보면 아래와 같은 정의가 나온다.

 

처음엔 이 사실을 모르고 favicon 이 그저 16x16 픽셀로 이루어진 이미지 인줄 알았다.
그냥 16x16 pixel 의 favicon 만 넣으면 위에서 보는 것같이 일반적인 브라우저에서는 별 탈이 없지만, 아래처럼 모바일 브라우저에서는 도트가 보일만큼 해상도가 떨어진다는 문제가 있다. 브라우저 환경이 꼭 PC만 있으란 법은 아니니 이것도 해결해야할 숙제 ㅠㅠ

▲ 돌핀에서 열었을 때의 모습. 아래는 facebook 의 favicon

 

해서 또 구글링을 하다보니, .ico 파일 안에는 여러 크기의 다양한 아이콘파일을 통합하는 기능이 있다는 것이다.

지난번 5/6/5 문제로 한번 도움을 받은 telegraphics 라는 회사에서, 아이콘(.ico) 파일을 번들링하는 툴을 역시 제공하고 있는 것을 발견! 칭찬해줄 만한 회사인 듯.

GUI를 지원하는 프로그램은 아니지만, 커맨드 라인에서 한 줄 뚝딱 치면 모든 ico 파일을 하나로 통합해준다.

통합할 모든 .ico 파일을 iconbundl 과 함께 한 곳에 몰아놓고, 위 명령을 실행하면 combined.ico 라는 파일이 생성된다. 이 파일 하나로 favicon 을 쓰면, 다양한 크기의 favicon 을 같이 운용할 수 있는 것!!!

iconbundle 다운받는 곳

 

이런 방법을 통해서 16x6 외에도, 24x24, 32x32, 64x64 와 같은 다양한 favicon 들을 하나로 묶을 수 있다. 아래는 결과.

 

(돌핀에서 요구하는 픽셀값이랑 1:1 매칭이 되는 것 같진 않아서, 딱히 클리어하진 않다만)

웹을 떠난 지 한참 있다가 근 10년 만에 돌아왔더니, CSS가 눈부시게 발전해버렸다.
어제는 미로니에 들어갈 버튼 하나를 디자인하면서, 포토샵에서 만든 이미지를 끼워 맞춰보다가, CSS3를 심층적으로 탐구하게 되었는데, 오… 이 것이 물건이로세.

아무튼, 그 결과는 아래와 같다.

위 이미지는 온전히 <div>에 CSS3로 스타일만 먹여서 만든 버튼이다. 이미지 파일은 1px 도 들어가지 않았으며, 그라데이션부터 외곽선, drop shadow 와 inner shadow, inner glow 모두를 CSS로만 완성한 것이다. 굳이 캡쳐를 한 것은 이 코드가 일부 브라우저(아마도 IE)에서는 위와 같이 렌더링 되지 않을 수도 있기 때문. 실제 코드로 만든 <div>는 아래와 같다.
 

물론, 아직까지는 포토샵으로 만질 수 있는 시각적 효과가 훨씬 엄청난 것이지만, 요 정도의 버튼 이미지 구현은 웹을 하든 앱을 하든 자주 있는 일이다 보니, 아래와 같은 장점이 있다.

 

그럼 각 단계별로 포토샵 effect 와 CSS 가 어떻게 같은 역할을 하는지 살펴보자.

 

1. Rounded Box

포토샵에서는 아예 처음부터 박스의 round 값을 정하고 들어가야 해서, 나중에 고치기가 애매한 부분인데, CSS에서는 이마저도 얼마든지 조정 가능하다. <div> 의 외곽을 얼마나 round 처리하는지를 정한다.

2. Gradient Overay 

각 브라우저마다 그라데이션은 명령어가 다르다. 해서, 세 줄 다 써놓아야 한다.

 

3. Stroke 

포토샵의 stroke는 <div> 의 border 에 해당한다. 해서, 이 border 에 아래와 같은 효과들을 주면 됨.

 


4. Inner Shadow 

여기서 포토샵보다 CSS가 더 좋은 한 가지는 multiple shadow 가 적용 가능하다는 점. 포토샵에서는 외곽 번짐효과라고 볼 수 있는 네 가지 - drop shadow, outer glow, inner glow, inner shadow 외에는 추가로 쓸 수 있는 shadow 가 없지만, CSS에서는 무한정 추가 가능하다.
사실상 outer glow 나 inner glow 도 distance 0 인 shadow와 마찬가지이기 때문에, shadow 라는 개념 하나만으로도 이 모든 효과를 표현할 수 있다.

inset : 그림자를 <div> 안 쪽에 적용하겠다는 얘기
0px : 우측으로 distance
2px : 하단으로 distance
0px : blur 먹는 정도
rgba(255, 255, 255, .75) : 각각 R, G, B, alpha 값을 이야기함




5. Inner Glow 

inner glow 의 경우, 앞에서 말한 바와 같이, distance 0 인 inner shadow 와 같다고 보면 된다. 추가로 shadow 를 지정할 때에는 앞서 작성한 box-shadow 값 옆에 콤마(,)를 찍고 추가해줘야 중복 적용이 된다. 




6. Drop Shadow 

Box-shadow 스타일이 사실 여기서부터 출발한 것이다. 역시 추가로 지정해줘야 하며, 이 때에는 inset 을 빼주면 <div> 바깥쪽으로 그림자가 생긴다.


0px : 우측으로 distance
3px : 하단으로 distance
3px : blur 먹는 정도
rgba(0,0,0, .3) : 투명도 30%를 가지는 black 컬러

원래는 얼마전까지 정류장 안내를 요런 LED로 했었는데,

경기도에서인지, 아니면 용인시에선지 차안에 이런 LCD디스플레이를 앞 뒤로 두 개 달아서 정류장 안내를 시작했다.

마치 지하철의 그것을 보는 것 같아서, 나름 괜찮다고 생각이 들었음.

이전 정류장과, 다음 정류장도 미리 볼 수 있어서 좋고. LED는 흘러가는 텍스트다보니 찾기가 쉽지 않고.

회식하러 강남의 음식점엘 갔더니, 기본안주(?) 같은 것으로 나온 이 것. 이 것은 인절미다.

오뚜기에서 나온 햇반 – 오뚜기밥

우연히 밥을 먹다가, 발견한 이 용기디자인은 facet pattern 정도로 보이지만, 이걸로 밥을 먹고나면 그 비밀을 알게 된다.

바로 밥그릇에 붙은 밥풀을 손 쉽게 긁어먹을 수 있다는 점!!!!

(찍은 사진이 좀 이런거라… 클릭해서 확대를 해보시던지요 ㅡ,.ㅡ)

용기가 곡면으로 되어 있는 것보다, 면이 끊어져 있으면 숟가락의 엣지와 딱딱 붙으면서 밥풀을 떼내기가 훨씬 쉽다.

이런 의도(?)를 가지고 디자인을 한 것일까?

미로니에서는 생일과 관련된 뱃지를 나눠주거나 관련된 이벤트를 만들기 때문에. 가입할 때 생일을 받는 부분이 있다. (옵션)
입력하지 않을 수도 있기 때문에 그냥 스킵하고 가입할 수 있는데, 이럴 때 디폴트 생년월일이 들어가게 된다.
문제는 이 디폴트 생년월일이 너무 평범하면 다른 유저들의 진짜 생일과 구분할 수 없게 된다는 것…

해서 고민 끝에 1988년 2월 29일을 디폴트로 넣기로 했다.
여기에는 두 가지 이유가 있는데

1. 사용성
2. DB 필터링

현재 미로니를 주로 사용하는 유저가 10대 후반에서 30대 초반까지인데, 이 사람들이 80년생에서 90년생 사이다.
그럼 디폴트 생년월일을 너무 생뚱맞은 1900 등으로 만들어버리면 카운터를 +, -  하면서 자기 생년 찾기가 무척 힘들어진다. 해서 적어도 8,90년생들이 자기 생년 찾기에 어렵지 않도록 만들어 주는 것이 1988년의 의미.

그리고 2월 29일은 앞에서 말한 것처럼, DB에서 생일을 입력한 유저와 그렇지 않은 유저를 필터링 하는데 쓰인다.

앞글에서 말한 문제를 해결하기 위해…

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 문제가 쉽게 해결되지는 않음)

왼쪽 캡쳐는 HTC evo4G+ 에서 캡쳐한 미로니 화면이고, 오른쪽 캡쳐는 LG 옵티머스 LTE 로 캡쳐한 화면. 물론 둘의 해상도는 qHD 와 HD 로 차이가 좀 나지만, 이 문제의 핵심은 32bit 컬러 구현을 하느냐, 16bit 컬러구현을 하느냐의 차이로 귀결됨.

  

소프트웨어상에서 png 를 어떻게 decoding 해내느냐의 차이로 볼 수 있는데, decoder 를 어떤 것을 쓰느냐에 따라 다르다. PNG 디코딩은 뭐 여러가지 방법으로 가능한데, 우리 CTO님께서는 ARGB_8888 로 디코딩하라고 짜놓은 것을, 제조사에서 강제로 RGB_565 로 디코딩해버려서 나타나는 현상이라고 볼 수 있다. (삼성 갤스. 갤스투. 에스케이w 에서는 정상작동. LG 옵티머스 LTE와 삼성 갤럭시s2 HD LTE 두 모델에서 나타나는 현상)

16Bit Bitmap : #RRRRRGGGGGGBBBBB (RGB_565)
24Bit Bitmap : #RRRRRRRRGGGGGGGGBBBBBBBB (RGB_888)
32Bit Bitmap : #AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB (ARGB_8888)

지금까지 nexus one 이랑 htc 폰들만 가지고 테스팅을 해오다보니, 이런 차이를 발견하지 못했던 것 같다. 이 이미지 소스들을 다 고칠라니 아.. 답답하구만. 우선 나인패치는 그냥 두고 넙대대한 그라데이션들만 좀 손댔는데, 나인패치는 언제 다 고치나 ㅠ_ㅠ

스타트업 시작한 지 일주일이 지났다.
초반이라 이것 저것 세팅할 일도 많고, 일 자체를 잘 모르다보니 아직 몸에 익지 않은 탓에 좀 무리하는 것도 있다. 그래도 출퇴근은 내가 알아서 할 수 있어서 심적으론 여유가 있는데. 알게 모르게 스트레스도 있는지 어제부턴 속이 탈이나서 또 고생.

새로이 스타트업을 시작할 사람들에게 도움이 되는 포스팅을 좀 생각해봐야겠다.