BLOG ARTICLE DESIGN | 4 ARTICLE FOUND

  1. 2014.06.29 Android L (Material design) 에서 디자이너가 알아두면 좋은 내용들
  2. 2012.12.06 itunes 기프트 카드의 놀라운 포장
  3. 2012.11.21 신분당선 열차정보 화면의 숫자는 뭐다?
  4. 2012.10.26 design by logos 1

Android L (Material design) 에서 디자이너가 알아두면 좋은 내용들

mobile 2014. 6. 29. 23:13

http://developer.android.com/preview/material/index.html

에 나온 내용들을 중심으로, 디자이너들이 알아두면 좋을 내용들을 추려본다.


* The Android L Developer Preview supports drawable tinting: you can define bitmaps as an alpha mask and tint them using a color resource. You create these assets only once and color each instance to match your theme. Drawables also now support specifying most XML properties as theme attributes.
Tinting을 위한 컬러 리소스로 비트맵 이미지를 활용할 수 있게 됐다. 기존에는 컬러값을 코드로 지정하고, 그것을 불러다 사용했는데, 이제 비트맵 이미지에 투명도나 컬러를 입혀서 그걸 가지고 Tinting 작업을 할 수 있다(전체적인 브랜드 컬러를 유지하는게 가능). 옐로우톤으로 유지하던 전체 디자인을 비트맵 이미지 하나 바꿈으로써 그린톤으로 바꿔버릴 수 있다는 얘기.

*Bitmap -> Primary color libraryThe Android L Developer Preview Support Library includes a color extraction library that lets you automatically extract prominent colors from a bitmap image.
예전에 어떤 앱에서, 앨범아트의 가장 주된 색상을 뽑아다가 앨범 제목 텍스트에 입히는 것을 보았는데, 대략 그런 내용이다. 비트맵이미지에서 가장 대표적인 색을 하나 뽑아내주는 라이브러리가 탑재됐단 얘기. 

* Specify the elevation of your views to cast appropriate shadows.
material 디자인에 깊이(depth 라고 쓰지만 정확하게는 높이가 더 맞지 싶다?)개념이 들어왔다는 얘기는 익히 도는 소문대로. 근데 이 깊이를 지정하면 그림자 모양이 조금씩 달라져서, 화면에서 멀고 가깝고의 느낌이 달라짐.

*Rounded corner

<shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="rectangle">    <solid android:color="#42000000" />    <corners android:radius="5dp" /></shape>

css의 border-radius 처럼 Round corner 값을 지원(이건 이미 있었음).


 *outline
You can also create outlines in your code using the methods in the Outline class, and you can assign them to views with the View.setOutline method.
역시 css의 border  속성처럼 outline 도 지원하기 시작한다는 거. 

이렇게되면, 왠만한 카드타입, 박스타입의 디자인들은 비트맵으로 구성된 나인패치 없이도 그려낼 수 있게 됨. css의 초기버전쯤 지원한다는 얘기?

*Cliping views
Clip a view to its outline area using the View.setClipToOutline method (round, rounded rect)
이미지 클리핑 역시 지원되는데, 사각형(이걸 클립핑이라고 봐야하나?), 원형, 둥근모서리 사각형 등등을 지원한다고 함.


저작자표시 비영리 변경금지
AND

itunes 기프트 카드의 놀라운 포장

들여다보다 2012. 12. 6. 13:07

image     image

image

 

보통 블리스터(blister)포장이라고 하면, 제품 형상대로 찍어낸 투명 PET에 종이를 접착시켜서 만들거나, PET 자체만으로 앞뒤를 감싸고 중간에 설명하는 종이 정도를 끼워넣는 방식인데, iTunes 기프트 카드를 감싸고 있던 이 포장은 나름 신선한 충격이었다.

분리수거를 할 목적으로 종이에 붙어있던(붙어있다고 생각했던) PET재질을 잡아당기는 순간, 어이없이 깔끔하게 분리가 되어버리는 것이 아닌가. 플라스틱을 가운데 넣어놓은 상태로 앞뒤로 종이만 접착을 해놓은 것이었다. 종이와 플라스틱이 직접적으로 접착되지 않으니 힘만 주면 깔끔하게 분리가 되는 것.

분리수거까지 이런 세심한 디테일을 보여주는 애플이 대단하다는 생각도 들고. 내가 여태 블리스터 포장을 많이 안 봐서 이런게 신기한건가 싶기도 하고.

AND

신분당선 열차정보 화면의 숫자는 뭐다?

들여다보다 2012. 11. 21. 10:42

 

5나 6, 많아봐야 12 같은 두 자리 숫자가 나오길래 내심 출발시각이나, 출발까지 내가 기다려야 하는 시간 정도면 좋겠다고 생각했다. 그러나 불길한 예감은 늘 맞아들지.

 

 

대체 열차편성번호 같은 걸 일반 이용객이 봐야 할 이유가 뭔지 누가 좀 알려주세요.
이 거지같은 정보디자인이 언제부터 표준 비슷하게 자리잡아서 너도나도 따라하고 있는지 모르겠지만. 제발좀 싹다 바꿔버리고 싶은 심정.

AND

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

티스토리툴바