요즘 css작업을 거의 맨날 하면서 여러가지 생각이 드는데, 무엇보다도 '재미'를 느끼는 작업이라 즐겁다. 이게 소위 말하는 design by numbers 에 제법 근사한 작업인데, processing 이나 flash AS 만큼의 visual expression을 목표로 하는 것은 아니지만, 원하는 것들을 그려내는데 큰 무리가 없다.

사실 웹이라는 것은 상당부분 정보를 전달하고, 사용자와 인터랙션을 하는데 목적이 있기 때문에 디테일한 그래픽에 꼭 의존할 필요는 없다. 되려, 웹표준에 의거하자면, 이미지가 하나도 없어도 웹을 사용하는데 문제가 없도록 만들어야 한다. 적당히 영역을 긋고, 그 위에 정보(글자)를 올리고, 버튼을 만들고, 그걸 누름직하게 만들어주고 하는 작업들은 이제 css만으로도 충분하다.

과거 포토샵에서 해야만 가능했던 온갖 shadow 효과, gradation 같은 것들이 이제 코딩으로 모두 해결이 되니까, 포토샵 없이도 상당부분의 이미지는 만들어낼 수가 있다. 또 코딩은 언제라도 그 수치를 조절할 수 있기 때문에, 픽셀 기반의 노동이 가져오는 비가역성으로부터 자유할 수 있어서 좋다. 또, 복제와 재사용이 용이하다는 점도, 이미지 소스 의존도를 최대한 낮추고 싶게 만드는 매력이 있다. (이것은 또 하나의 문제를 초래하게 될테지만, 그건 나중에 얘기하기로 하고)

둘째로, 이 작업이 재밌는 이유는 '상대값에 의한 관계적 디자인' 이 가능하기 때문이다. 이건 꼭 css라서 라기보다는 html + CSS 의 조합이라고 봐야하겠다.
parametric design 이란 용어자체는 사실 design by numbers 와 거의 동일한 얘기지만, 이 용어를 많이 쓰던 곳은 제품디자이너들의 3D modeling 툴에서다. 내가 애용하는 rhino 3d 같은 디자인 툴이 이런 parametric design 을 지원하지 못하는 ㅠㅠ 싼 툴이고, 고급 툴로 갈수록 이런 parametric design 을 철저하게 지원하고 있다. parametric design이 가능한 툴을 썼을 때, 비로소 이러한 '상대값 기반의 관계적 디자인' 이 가능해지는데, 예를 들면 이런거다.

휴대폰을 디자인 한다고 했을때, 가로 60mm, 세로 120mm 에 두께가 9mm 인 형상을 만든다고 치자. (보통 실무에서는 왠 종일 걸려야 형상을 만들어낼 수 있다.) 그런데 최종 결정권자가 와서는 "이거 두께를 0.5mm만 줄이지" 라고 얘기하면, 과연 이 작업을 다시 시작해야 할까?

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