외국 블로그들에는 간혹 나온 내용인데, 국내 블로그엔 검색해도 잘 안 나와서 여기 적습니다.

둘 다 벡터이미지로 작업된 round box 입니다.

위에 것은 pixel 에 정확하게 맞아들어가서 지저분한 아웃라인이 생기지 않는 반면, 아래 것은 픽셀 사이에 어중간하게 벡터라인이 걸친 관계로 아웃라인이 지저분해졌습니다.

▲ 벡터라인이 픽셀 사이에 어중간하게 걸친 예

 

▲ 벡터라인이 픽셀에 정확하게 맞아들어간 예

 

방법을 몰랐을 때는, 정확하게 벡터라인 맞춘다고 일일이 포인트 잡아서 커서키로 밀거나 마우스로 낑낑거려서 맞추곤 했는데. 그럴 필요 없습니다. 옵션이 있거든요.

 

설정에 가셔서, Grid 옵션을 위 그림처럼 맞춰주면 픽셀기준으로 그리드 설정이 됩니다.
( View > Snap to > Grid ) 로 그리드스냅도 먹어야겠죠.

이렇게 하면 zoom scale 100% 일때는 벡터라인을 어떻게 그려도 pixel 에 정확하게 맞아듭니다. 하지만, zoom scale 을 확대하기 시작하면 이마저도 해법이 아니죠.

해서, 또 하나의 옵션이 바로 이 Snap to Pixels 입니다.
벡터 이미지를 그릴 때, snap to pixels 에 체크를 해놓으면 zoom 을 어느 상태로 해놓아도 pixel 에 정확하게 맞아들어가는 vector 를 그릴 수 있습니다.

 

물론, 이건 포토샵에서 벡터를 그릴 때 얘기고, 일러스트에서 벡터를 그려서 가져오면 답은 안 나옵니다. 세밀하게 pixel perfect 를 추구하는 수 밖에 ㅠㅠ

AND

저의 블로그도 하루 100 분 정도는 오시니... 

다운로드 링크는 http://mrn.li/Rd

 
AND

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

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

DSC_8378

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

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

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

DSC_8379

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

 

DSC_8386

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

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

 

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

 

DSC_8380

블루투스를 활성화 한 다음

 

DSC_8383

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

 

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

AND

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

 

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

ICO 파일 포맷은 마이크로소프트 윈도의 아이콘에 쓰이는 그림 파일 포맷이다. 헤더의 인증 바이트가 다른 것만 제외하고는 컴퓨터 커서에 쓰이는 CUR 파일 포맷과 비슷하다.
ICO 파일은 여러 크기와 색 깊이를 가진, 하나 이상의 작은 그림을 담고 있다.

 

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


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

 

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

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

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

>icobundl –o combined.ico *.ico

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

iconbundle 다운받는 곳

 

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

 

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

AND

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

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

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

POST
▲ html 과 css 로만 만든 버튼


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

1. 같은 스타일의 (대량의) 버튼들을 코드 한 두줄로 색이나 shadow 등을 바꿀 수 있어 효율적
2. vector 이미지와 같이 사용자 브라우저의 확대 축소에 전혀 문제가 되지 않는다.
3. 비트맵 이미지보다 훨씬 적은 용량으로 버튼 이미지 구현 가능

 

 

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

 

1. Rounded Box

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

border-radius:10px;



2. Gradient Overay 

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

<!-- chrome, safari -->
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #a6cd2f), color-stop(1, #6e9102) );

<!-- mozilla --> 

background:-moz-linear-gradient(top, #a6cd2f, #6e9102);

<!-- IE -->
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#a6cd2f', EndColorStr='#6e9102', GradientType=0);

 

3. Stroke 

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

border-style: solid;

border-width: 1px;

border-color: #555;


(이거 다 합쳐서 한 줄로도 쓸 수 있다. border: 1px solid #555; )

 


4. Inner Shadow 

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

box-shadow:inset 0px 2px 0px rgba(255, 255, 255, .75)


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 값 옆에 콤마(,)를 찍고 추가해줘야 중복 적용이 된다. 

box-shadow:inset 0px 2px 0px rgba(255, 255, 255, .75), inset 0px 0px 2px rgba(255, 255, 255, .75);




6. Drop Shadow 

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

box-shadow: inset 0px 2px 0px rgba(255, 255, 255, .75), inset 0px 0px 2px rgba(255, 255, 255, .7), 0px 3px 3px rgba(0,0,0, .3);


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


AND

나도 수 많은 블로그 글들에서 간신히 간신히 조각 조각 정보들을 모아 이 위업을 달성하였으니, 만인에게 이롭도록 여기 적도록 한다.

48시간 동안 삽질에 삽질을 거듭하고
파티션을 날려먹고, 초죽음까지 갔다가 이제 겨우 겨우 살려냈으니.
아래와 같이 하면 된다.

오늘은 너무 피곤한 관계로 간략 버전만 적는다.

1. 그냥 단일 파티션으로 OS X LION 을 설치한다.

2. 부트캠프로 WINDOWS 를 설치한다. 이 때, 보통 c드라이브 잡듯이, 운영체제 들어갈 정도만 잡아서 파티션 하면 된다. (나의 경우 80G 정도만 잡았음)

3. 윈도 설치후에 다시 맥으로 온다.

4. 맥에 잡아놓았던 파티션을 둘로 나눈다. 이 때, 맥 OS를 설치한 파티션을 윈도파티션처럼 적은 양만 잡는다 (나는 70G 정도). 그러고 나머지 용량을 exFAT 방식으로 파티션한다.

5. 재부팅하면 윈도부트섹터가 날아가 버려서 윈도 부팅이 안 돼. 그러므로, 부팅할때 윈도 CD를 넣고 옵션키를 눌러 부팅하면 윈도 CD로 진입가능. 
여기서 '시동복구' 를 해주면 부트섹터가 살아남.

6. 윈도 - 라이언 - 데이터하드 이렇게 3개의 파티션이 해맑게 웃고 있음. 완료. 
AND


혹시라도 이 글이 '용눈이 오름'의 입구를 찾는 사람들에게 조금이나마 도움이 되었으면 하는 마음으로 포스팅.

애 들쳐업고 가파른 능선을 오르다 토하지 말고. 완만한 능선으로 가시길.


가파른 쪽도 입구가 아니라고는 할 수 없지만,
여성분이나 아이를 동반한 가족이라면 무척 어려운 입구.

완만한 입구쪽에는 소들이 방목되어 있으므로 한가로이 풀을 뜯고있는 수십여마리의 소가 보이지 않는다면, 일단 의심. 또, 당신의 네비게이션이 mappy 라면, 네비가 알려준 입구는 '가파른 입구' 임.
AND


사실 이게 심증만 있다가 물증이 없어서 고민하던 문제인데, 이번에 필드테스트(?)를 통해서 확실하게 알 수 있었다. 회사마다 제공하는 회선에 분명 속도 차이가 있다.

우리가 쓰고 있는 100메가 광랜이라는 게, 어지간해서는 동네 안에서 큰 차이가 없다. 특히 아파트에 사는 경우면, 이게 uplus 회선이든, SK브로드밴드, qook 따질 거 없이 거의 다 비슷한 수준을 보인다.

인터넷 속도측정은 여기저기서 할 수가 있는데, 가장 널리 쓰이는 사이트가

http://speed.nia.or.kr/

image

한국정보화진흥원에서 제공하는 인터넷 속도측정 사이트다.
근데, 생각보다 브라우저 최적화가 안 돼서 그런지 나는 여러번 튕겨나가서 저 사이트 대신

http://www.benchbee.co.kr/

image

에서 제공하는 인터넷 속도측정을 주로 사용.

각 통신사에서도 홈페이지에 가면 속도측정 서비스를 제공하고 있지만, 자기네가 서비스하고 측정도 자기네가 한다면, 신뢰할 수 있는지 의문이 들어서 패스.

 

1. 왜 인터넷 속도측정과 youtube/my_speed 는 다를까?

그러다가 요 며칠 사이에 발견한 놀라운 속도측정 사이트가 하나 생겼으니 이름하야 유튜브 속도측정.
http://www.youtube.com/my_speed

image

맨 왼쪽에 보이는 노란색 막대가 현재 내 유튜브의 품질을 결정하는 속도다. (오늘 SK브로드밴드로 바꾸기 전까지 1.38 을 기록하다가 지금 현재 5.39 라는 놀라운 변화)

아직도 명쾌하지 않은 것이, 분명 위에 두 사이트로는 속도 측정할 때 95메가니 100메가니 충분히 나오는데, 유투브 속도는 제각각이다. 우리집에서 측정할 때는 1.38 을 찍더니, 처가집에 가면 2.56 이 나오고. 옆집 AP에 물리면 2.87 이 나오고. 결국 인터넷 회사별 & 지역별로 이런 차이가 생긴다는 사실.

참고로 1.38 정도면 720p 동영상도 도무지 끊겨서 제대로 볼 수가 없다.

 

2. 우리동네에서 어느 회사가 빠를까?

그러나 인터넷에서 검색해보면, 어느 회사가 절대적으로 빠르다고 평가할 수는 없는 듯. 어떤 사람은 uplus –> SKB 해서 득봤다고 하고, 어디는 그렇게 해서 오히려 느려졌다고도 하고. 동네마다 다른 거 같다. 그래서 결국 직접 필드 테스트를 하기로 결정.

스마트폰 브라우저에 아래 보이는 준비물 사이트를 심어서 아파트 단지를 한 바퀴 돌면서, 랜덤하게 걸리는 오픈된 AP로, 각 인터넷 회사마다 youtube.com/my_speed 를 어느 정도 찍는지 확인했다.

아직까지 무선 공유기를 별 생각없이 오픈 해놓은 집들이 다행히(?) 많이 있어서 이런 실험이 가능했지만, 동네마다 공개된 AP를 찾기 어렵다면 쉽지 않을 수도 있다.

1) http://www.whatismyip.com/ 
방금 스마트폰이 덥석 물은 이 AP 의 IP 주소를 알아내는 데 사용

image

2) http://whois.nida.or.kr/
1번에서 알아낸 아이피를 여기에 집어넣으면 어느 회사 인터넷인지 알 수 있다.
a. 케이티와이파잉
b. 에스케이브로드밴드주식회사
c. 엑스피드
뭐 이런 식으로 나온다.

image

3) http://www.youtube.com/my_speed
그 다음에는 유투브 속도측정. 한달 평균치를 내기 때문에 보통 같은 회사는 거의 비슷한 수치를 보여준다.

image

 

3. 실험결과 (용인/신갈)

우리 아파트 통로를 위아래로 한번 훑고, 동과 동사이를 지나다니면서 1층 근처에서 뿜어져 나오는 AP 들을 물려서 확인해본 결과 각 회사마다 youtube 평균 속도는 아래와 같았다.

image

실험결과, 우리 지역에서는 SK 브로드밴드의 회선품질이 가장 좋은 것으로 나타났고, KT 는 거의 대동소이한 수준. 그러나 바로 직전까지 사용하던 LG회선은 거의 바닥이었다. 하지만 지역마다 차이가 있을 수 있기 때문에, 이 결과가 어디에서나 통용될 수는 없고, 그래서 동네마다 확인이 필요한지도 모르겠다.

AND

AdThwart - 버전: 1.0.20

파이어폭스의 Adblock Plus 필터를 이용해 광고를 제거합니다. 광고와 작별 인사를, 브라우저에는 쾌적함을!

 

AutoPager Chrome - 버전: 0.6.1.32

구글 검색 결과를 스크롤만으로 페이지 넘김 없이 봅니다.

 

Chrome Pig - 버전: 0.9.7.4

구글메일 확인기능, 마우스제스쳐, 웹페이지에 막혀있는 우클릭/글자선택/이미지복사를 풀어주는 기능, 편리한 사전검색 기능, IE 브라우져로 URL열기, 웹페이지 스크린샷, 윈도우 바탕화면 변경, 로그인폼 자동 채우기, 유튜브 가사검색과 반복재생, 웹페이지 스타일 변경 및 플래시/이미지 숨기기, 웹페이지 번역, 웹으로 문서 바로보기 기능을 가지고 있습니다.

 

Chromed Bird - 버전: 1.9.6.4

Chromed Bird is a Twitter extension that allows you to follow your timelines and interact with your Twitter account.

 

Facebook for Google Chrome - 버전: 2.0.9

Extension which lets you read your Facebook news feed and wall. You can also post status updates.

 

Facebook Photo Zoom - 버전: 1.1008.4.1

The best way to view photos on Facebook!

 

goo.gl URL Shortener - 버전: 0.5.7

Shorten url with goo.gl, the Google URL shortenerPrint Plus - 버전: 0.3Print only what matters! Make quick selections on a page and print only relevant sections of a web page. Save ink and paper!

 

RSS 구독 확장 프로그램(Google 제공) - 버전: 2.1.2

클릭 한번으로 툴바에 구독을 추가합니다.

 

YouTube Downloader - 버전: 1.5.6.2

다운로드하는 YouTube 동영상


AND

프로이 기본 셋팅이 1초씩이나 되어서 뷰 돌릴때마다 시간 아깝다는 생각은 들고. 그렇다고 아예 옵션 꺼버리면 가끔 뷰 돌아가는게 잘 이해가 안 되기도 해서. 이 셋팅값을 바꾸고 싶은데, config.pro 에 아예 집어넣어버릴 수 있다. 맨 아랫줄에

max_animation_time 0.1

이거 한 줄 추가하면 0.1 초만에 뷰를 돌려줌.
 
AND