::capt'nSilver 보물섬 탐험

이 블로그 검색

::디지털 디자인 3 | 서울

날짜: 6월 05, 2009

가장 많이 본 글

::짜투리 시간 15분간 짬짬이 만든 폰트 'Inter'를 Mozilla와 GitHub에서 사용하기 까지.

. 웹사이트에서 쓰는 폰트는 보기에 이쁘고 쓰기 편하게 하는 데 중요한 요소이다. 올바른 폰트를 써야 사용자가 기분좋아지기 때문에, 웹서비스와 웹사이트는 폰트를 고르는데 신중을 기할 수 밖에 없고, Firefox를 개발한 Mozilla는 브랜드 리플래시의 일환으로 오픈소스 폰트인 'Inter'를 쓰기로 했다. 사실 Inter는 웹디자이너가 짜투리 시간에 만든 폰트이고, 개발자가 어떻게 개발을 하게 됐는지, Inter가 어떤 면에서 뛰어난지를 알아보겠다 The birth of Inter Figma에서 디자이너로 재직 중인 Ramus Andersson 씨는 주로 Roboto라는 폰트를 사용했지만, Roboto는 외관 등에 사용 규정이 있어서 문자 크기를 줄이면 가독성이 나빠진다는 문제가 있다. Andersson은 “작은 문자라도 편하게 읽을 수 있는 폰트는 없을까”하며 찾아봤지만, 결국엔 ‘없다’고 결론을 내렸다. 그래서 만들어진게 Inter라는 얘기다. Andersson씨는 타이포그래피에 있어 백지상태였고, 취미로 몇 번 정도 흉내내 본 것이 다였다. 그래서 프로젝트를 시작할 당시에는 ‘다 만들 때까지 1년 정도 걸리겠지’라며 가볍게 생각했지만, 막상 시작하고 보니 5년 이상, 완전히 끝낼 때까지 10년이 걸리는 프로젝트였다는 걸 깨달았다고 한다. Andersson씨가 주로 사용하는 건 라틴문자라서 프로젝트는 처음에 우선 라틴 문자 만들기부터 시작했다. 가장 일반적인 라틴 문자 200 문자부터 착수했다. Inter는 듀얼 라이센스이며, 이는 키릴 문자와 그리스 문자 중 상당수를 Roboto에서 차용해 디자인했기 때문이다. Andersson씨에 따르면 Roboto는 소문자 x의 높이 ‘엑스 하이트’와 대문자 기준선 ‘캡 하이트’의 비율이 훌륭해, 이 점을 Inter는 답습하고 있다. 이 대문자와 소문자의 밸런스는 Apple San Francisco와 Helvetica에도 통한다. 엑스 하이트가 캡 하이트의 딱 3/4 높...

제1회: linear workflow에 대해서 | 첫 번째

fieldjam DesignViz Essence 제1회: linear workflow에 대해서 | 첫 번째 번역: capt'nSilver | 조성우 이번부터 당분간 칼럼을 쓰게 된 filedjam의 하야시다 히데유키( 林田豪元 )라고 합니다. 건축 판에서 CG제작 일을 주로 하고 있습니다. 여기에서는 3ds Max 테크닉만이 아니라 design visualization을 진행하는 중에 알아두면 편리한 것들을 여러 각도에서 다뤄보도록 하겠습니다. 처음에는 들어보신 적도 있으실지 모르지만 linear workflow라는 것에 대해 몇 차례 나눠 다루도록 하겠습니다. gamma에 대해 우선은 실눈을 뜨시고 다음 이미지를 봐주십시오. LCD인 경우에는 보는 각도에 따라 달라지기 때문에 되도록 정면에서 봐주십시오. 주변에 있는 회색 부분과 가장 잘 들어맞는 것이 디스플레이 감마 값입니다(대체로입니다). 감마가 뭐야? 잘 모르겠고 귀찮은 것 이라는 분들도 손해보진 않을 테니 잠시만 참아주시기 바랍니다. 감마란 입력정보와 출력정보 사이 밸런스입니다. 글로는 이해하기 어렵기 때문에 그림이 필요합니다. 모니터에 표시된 감마 값이 1.0일 경우 이렇습니다. 감마 1.0인 환경을 linear space라고 부르며, 입력된 정보는 그대로 출력됩니다. 확실히 이상적이지만 있을 수는 없습니다. 왜냐하면 보통은 다음과 같이 되기 때문입니다. 아주 어둡습니다. 감마 값을 2.2로 한 것은 windows 환경에서 모니터는 2.2가 많기 때문입니다. 감마 값이 1.0을 넘으면 곡선이 아래쪽으로 볼록해집니다. 모니터에 한해서는 반드시 이런 변환이 행해져 표시됩니다. 이럴 경우에 최대값과 최소값은 변함이 없지만 중간 값이 꾹 눌리게 되어 커다란 문제입니다. 여기에서 미리 밝혀 둔 데이터를 모니터에 보내고 상쇄하여 linear space에서 표시하기를 시행합니다. 이렇게 하면 만든 이미지 정보를...

Powered by Blogger

::capt'nSilver 보물섬 탐험

이 블로그 검색

::디지털 디자인 3 | 서울

댓글

댓글 쓰기