BLOG ARTICLE logos | 1 ARTICLE FOUND

  1. 2012.10.26 design by logos 1

design by logos

생각 2012. 10. 26. 21:38
요즘 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만 줄이지" 라고 얘기하면, 과연 이 작업을 다시 시작해야 할까?

▲ 이런 느낌?


내가 rhino 3d 로 작업을 했다면, 아마 n 시간을 들인 만큼 처음부터 n 시간을 투입해야 하겠지만, pro-e 나 solidworks 를 썼으면 (그리고 관계적 디자인을 매우 잘 설계했다면) 수치하나만 조절하면 모든 형상들이 re-generated 된다. 


css작업도 마찬가지다. 워낙에 사용자가 마주할 환경이 다이나믹 한 것이 웹이다보니, 그 예측못할 수 많은 상황에 responsive 하게 디자인되려면, 이런 관계적 설계를 디자인에 많이 도입해야 한다. 가령 화면은 가로폭이 1024px이 될 수도, 700px 이 될 수도 있기 때문에, 어떠한 상황에서도 이상하게 보이지 않을만큼의 flexibility 가 요구된다. 글상자의 폭을 무작정 700px로 맞춰놓아버리면 이런 상황에 대처하기가 어렵다. 여백이 남거나, 화면이 잘리게 된다.
그러니 화면폭에 맞추어서 몇% 수준으로 설정한다던지, 폭을 꽉 채운 상태로 가장자리로부터 얼마간의 padding 을 준다는 식의 관계적 설계를 해놓는것이다. 이렇게 하면 글상자의 크기는 언제나 화면에 종속되게 되므로, 내가 원하는 모양새를 유지하기가 쉽다.

마지막으로 이게 재미있는 이유는 내가 좋아하는 'high-effectiveness'를 추구할 수 있기 때문이다. 다만 몇 kb의 용량을 줄이려고 이미지 사용이 꺼려지는 웹디자인에서 css는 축복이다. 글자 몇 줄이면 몇 kb에 달하는 그라데이션도 해결할 수 있고, animation 도 가능하다. 물론 이걸 다 rendering해주는 브라우저가 있으니 감사한 일이지만, 디자이너는 이미지 용량 줄인다고 고생 안 해서 좋고, 또 아무리 확대를 해도 깨지지 않을 robust한 visual 을 가지게 되니 좋다. 애니메이션 만든다고 플래시 삽질을 안 해서 좋고, 다 만들어놓고 수정한다고 그래픽 툴 버벅대며 열 필요도 없다. 결국 시간을 버는 셈이다.

물론, 이 작업이 가지는 여러 어려움들이 여전히 산재해 있는 것은 사실이고, 개선의 여지도 무지하게 많다는 것을 인정하지만.
결국 디자인이 logos(말)로 다 가능하다는 것이, 조금씩이나마 증명되는 것 아닌가 하는 생각이 든다.



AND