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

둘 다 벡터이미지로 작업된 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 를 추구하는 수 밖에 ㅠㅠ

웹을 떠난 지 한참 있다가 근 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 컬러

회사 사진실 입구. 사진에 영향을 주는 빛을 조금이라도 차단하기 위해 비상구까지 검정 폼보드로 가려놓는 세심함.