Inspiration

디자이너를 위한 3가지 게임.

Demomo 2014. 7. 29. 17:41

Mark MacKay 라는 프로그래머가 작업한 디자이너를 위한 3가지 게임이 있다.

꼭 디자이너가 아니더라도 색과 조형미, 타이포 그라피에 대한 감각을 가지고 있다면 재미있게 즐길 수 있는 게임들이다.

하나씩 소개해 보도록 한다.


1. Kerntype (a kerning game)


Kerntype 소개에 앞서 Kerning(커닝)이란 무엇인가에 대해 알아보자.


커닝(kerning)은 자간을 오히려 좁혀서 두 글자의 간격을 음수로 하면서 보기 좋게 하는 과정을 말한다. A와 V를 붙이는 과정이 그 예이다.

출처 : http://ko.wikipedia.org/wiki/%EC%BB%A4%EB%8B%9D

한글 위키의 설명이 부족하다면 다음의 링크를 참고한다.

영문 위키 : http://en.wikipedia.org/wiki/Kerning

Adobe Indesign 도움말 : http://helpx.adobe.com/kr/indesign/using/kerning-tracking.html


Kerntype은 일련의 주어진 텍스트를 보기 좋게 간격을 조절하면서 폰트 제작자의 의도에 맞는 보기 좋은 값을 찾아 점수를 받는 게임이다.



Kerntype의 첫 화면이다. 파란색으로 선택되어 있는 글자를 키보드의 좌우방향키를 사용하여 움직여 적당한 위치에 가져다 놓으면 게임이 시작된다.




A와 V를 움직인 후 확인버튼을 눌러 나온 결과이다.




다양한 폰트가 예제로 나오고 있다.




거의 정확한 커닝을 맞춘 화면. 


총 10개의 문제를 풀고 평균값을 알려준다.

http://type.method.ac/







2. Shape Type (a letter shaping game)


폰트의 형태를 유추하여 적절한 모양을 잡는 게임이다.







보라색 작은 원을 잡아당겨 적절한 모양을 갖추면 된다.


http://shape.method.ac/





3. Color (a color matching game)

색상을 맞추는 게임이다. 총 6가지 (HUE, Saturation, Complementary, Analogous, Triadic, Tetradic)의 방법으로 색상을 맞추면 된다.


색공간의 개념을 알고 시작하면 좋다.

색의 3속성인 색상(hue), 명도(lightness), 채도(chroma)를 3차원 공간의 각각의 축으로 형성된 색 공간은 컬러 디자인이나 컬러 공학 등의 학문 또는 산업분야에서 컬러를 다루는 데 있어서 기본적으로 이해하여야 할 개념이다.


빨강, 노랑, 초록, 파랑, 보라 등으로 구분되는 색을 나타내는 색상(hue)은 색 공간을 지구로 비유할 경우 적도 상에서 경도 즉, 색상각(hue angle)으로 표현, 0도~360도의 범위를 가지며, 시계 방향으로 변화된다. 또한 이 색 공간은 대응색(opponent color) 관계를 쉽게 나타낸다. 대응색 관계란 명도 축을 기준으로 대칭의 위치에 있는 두 색의 관계를 말하며 서로 보색 관계에 있을 나타낸다.


모든 색들의 밝고 어둠을 나타내는 명도(lightness)는 색 공간을 지구로 비유할 경우 남극과 북극을 연결하는 축으로서 남극을 검정색, 북극을 흰색으로 하며 그 사이에는 회색들로 배열된다.


모든 색들의 깨끗한 정도를 나타내는 채도(chroma, saturation)는 색 공간의 명도축을 0으로 하고 적도에 가까이 갈수록 커진다.


색 공간의 중요한 용도 가운데 하나는 색차 계산(color difference)이다. 이는 색 공간에 존재하는 두 점 즉, 두 색들 사이의 거리를 계산하여 공학적으로 활용한다. 예를 들면 컬러 영상 분할(color image segmentation)은 CIELAB 색 공간에서 색차 계산 결과를 이용하여 CIELAB 색 공간에서 영상 분할이 이루어져야 한다. 그러나 간혹 컬러 영상 분할에 관한 연구 논문들 중에는 RGB 데이터를 바탕으로 색차 계산한 결과를 가지고 RGB 데이터로 영상분할을 한 논문들이 발견되곤 하는데 이는 치명적인 오류에 해당된다. 왜냐하면 컬러 영상 장비에서 다루는 RGB는 시각의 RGB가 아니고 단지 코드에 불과할 뿐 아니라 균등색 공간(uniform color space)도 아니기 때문에 공학적인 계산은 의미가 없을 뿐만 아니라 부정확하기 때문이다.


또, 다른 색 공간의 응용에는 색감에 따른 색의 배열이나 배치(grouping)가 있다. 각종 산업 디자인에 흔히 쓰이고 있는 색감 즉, 따뜻한 색, 차가운 색 등의 배열이나 배치는 CIELAB 색 공간에서 좌표로 다룰 경우 개념이 분명해질 뿐만 아니라 정확성이 보장된다. 그러나 CIELAB 색 공간은 CIEXYZ 색 공간으로 변환한 다음 다시 RGB나 CMY 데이터로 변환해야 하는 필수적인 과정이 있다. 문제는 이러한 과정이 쉽거나 단순하지 않다는 데 있다. 이는 색 이론을 적용함으로써 해결할 수 있다.

출처 : http://ko.wikipedia.org/wiki/%EC%83%89_%EA%B3%B5%EA%B0%84









총 6가지 타입의 게임이지만 룰은 동일하다. 게임이 시작된 후 부채꼴 모양의 게이지가 사라지기 전에 게이지와 배경색을 일치시켜서 클릭하면 된다.


http://color.method.ac/





위의 3가지 게임을 만든 Mark MacKay에게 고마운 마음을 전하면서 그의 웹사이트를 소개하고 글을 마무리 한다.




http://duopixel.ca/