최근 웹사이트 기획의 경향이 다 이런지는 모르겠는데 요새 하는 프로젝트마다 전부 한두개의 html문서 안에서 모든 정보를 비동기식으로 불러다 처리하는 식으로 기획됐다. 쉽게 말하면 페이지끼리 하이퍼링크로 연결돼서 매 화면마다 정해진 정보만을 보여주는 고전적 웹사이트 형식이 아니라 마치 런타임 위에서 돌아가는 응용프로그램(앱)처럼 한 화면에서 웹사이트의 모든 정보에 접근 가능하도록 기획했다는 것.

이런걸 보면 인터넷의 혁신이라고 불리던 데이터를 가진 문서끼리의 연결 즉, 하이퍼링크고 나발이고 깡그리 무시하고 한페이지에서 원하는 정보를 다 불러다 쓰는 식이 대세가 된건데.. 이게 좋은지 나쁜지는 난 모르겠다. 다만 이런 작업을 통해 한가지 느낀 사실은 웹페이지를 이렇게 앱처럼 만들면 페이지 별로 사용자 유입 통계 혹은 접속자의 활동 통계를 내는 일이 거지같이 힘들어진다는 정도?

뭐.. 정확한 통계가 없어서 콕 찍어서 이렇다고 단정할 수는 없겠지만 아무튼 모던 웹사이트들에서 비동기식으로 데이터를 불러오는데 대한 니즈가 늘고 있는 느낌은 확실히 든다.

그리고 근미래의 웹사이트에서 Javascript는 과연 무엇까지 할수 있을지 그것도 갑자기 궁금해지네.


WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,

Opentype/CFF(.otf 확장자)와 Truetype(.ttf 확장자)는 데스크톱 환경에서 사용 가능한 두 가지 대표적인 모던 폰트 포맷입니다. 둘은 서로 전혀 다른 별개의 포맷임에도 불구하고 OT/CFF와 TT폰트는 많은 공통점이 있습니다. 두 포맷의 가장 큰 차이는 외곽선 포맷이 다르다는 점입니다. 또한 그 외곽선을 래스터라이즈 하는 방법도 다릅니다.

OT/CFF폰트의 글리프 아웃라인은 큐빅 베지어 패턴인 반면에 TT폰트는 쿼드라틱 베지어로 구성됩니다.

큐빅 베지어(왼쪽)와 쿼드라틱 베지어(오른쪽)에서 비슷한 곡선을 그렸을 때의 비교

저는 타입 디자이너들이 큐빅 베지어를 선호한다고 봅니다. 큐빅 베지어는 조작하기에 쉽고 쿼드라틱 베지어에 비해 적은 점의 갯수로 다양한 곡선을 표현할 수 있기 때문입니다. TrueType 포맷의 디자인들은 그 태생인 포스트스크립트 아웃라인을 기초로 하여 TrueType으로 변환되는 과정을 거칩니다. 만약 이 변환 과정에서 어떤 문제가 발생한다면 결과물의 아웃라인이 의도와는 다르게 변형될 수 있습니다.

만약 위에 언급한 차이점만이 OpenType/CFF폰트와 TTF의 차이점이라면 다른 이들을 설득할 만한 요소가 아니었을 겁니다. 하지만 보통 OT/CFF 폰트 파일이 TrueType과 비교해 20%~50%정도 적은 용량을 차지한다면 어떨까요? 호기심이 생길만 한가요? 물론 이 점이 그렇게 중요하다 여기지 않을 수도 있습니다. 왜냐하면 최근 저장 장치는 폰트 파일을 담기에는 부족함이 없고 폰트 파일은 대개 프로젝트의 여러 요소 중 가장 용량을 덜 차지하는 것이 사실이니까요. 특히 프린트용 해상도의 이미지나 비디오 파일 그리고 여러 포맷의 아트워크 파일들에 비교하면 폰트 파일의 용량은 정말 보잘것 없습니다.

그렇지만 웹 페이지와 같이 제한된 적은 용량을 사용해야만 하는 환경이라면 용량이 적은 폰트 파일이 필요하다는 사실에 동의할 수 밖에 없을 것입니다. 특히나 10,000자 이상이 들어가서 파일의 용량이 5-10메가바이트씩 나가는 CJK(중국어, 일본어, 한국어) 폰트를 써야 한다면 그 크기가 신경쓰이게 될 것입니다.

그럼 어떤 점이 OT/CFF폰트를 작게 만들까요? 그 이유 중 한 가지는 외곽선을 단순한 방법으로 저장하는 것입니다. 다른 이유는 TrueType 폰트에 비해 힌팅 정보가 차지하는 정보량이 적기 때문입니다. 힌팅을 할 때 두 폰트(OT/CFF와 TrueType)는 그 방식이 서로 다릅니다. 넓은 의미에서 TrueType힌팅에서는 각 폰트에 “정보(intelligence)”를 넣어주어야 합니다. 반면에 OpenType/CFF폰트에서는 이 정보가 기본적으로 래스터라이저(rasterizer, 외곽선 형태로 구성된 문자나 도형을 점의 집합으로 변환해 주는 소프트웨어)에 들어 있습니다. 즉 TT폰트는 글리프를 렌더링하기 위해 픽셀 단위로 매우 구체적인 정보를 입력해 두어야 합니다. 그렇기 때문에 TT폰트의 래스터라이저는 단순히 렌더링 순서 정도만을 제시하는 “바보같은(dumb)” 인터프리터 역할을 합니다. 반면에 OT/CFF폰트는 각 글리프의 일반적인 정보만 제공하고 래스터라이저가 글자를 화면에 렌더링하기 위한 최적의 처리를 수행합니다. 확실히 OT/CFF와 TT폰트가 취하는 방식 모두는 장단점이 있습니다. TrueType은 래스터화하는 과정에서 제어할 수 있는 수단이 많은 반면에 높은 비용이 발생하게 됩니다. TT폰트의 힌팅 작업을 정교하게 하는 일은 노동 집약적이면서 높은 숙련도를 가진 전문가들을 많이 필요로 합니다. 반면에 OT/CFF폰트의 힌팅에는 TT폰트의 1/10정도의 소요 시간만이 들고 작업자들에게 필요한 경험도 훨씬 적습니다. 또한 래스터라이저에 정보가 담겨 있다는 점은 래스터라이저가 발전할 수록 별도의 업데이트 없이 모든 폰트가 발전된 래스터라이저의 혜택을 고스란히 누릴 수 있다는 사실을 의미합니다.

OT/CFF포맷이 힌팅의 제어에 있어서 제한적이라는 사실은 특정한 종류의 응용프로그램이나 장치에 사용하기에 단점으로 작용합니다. 하지만 픽셀 밀도가 비약적으로 상승한 최근 스크린들에서 폰트 힌팅에 거의 신경쓰지 않는 Mac OS X이나 iOS를 생각해 보면 앞으로 힌팅은 그렇게 중요한 작업이 아닐 것입니다.

요약하자면 OpenType/CFF폰트가 TrueType에 비해 가지는 두 가지 비교 우위는 첫째, 작은 파일 사이즈이고 둘째, 안티알리아싱이 가능한 환경에서 글자를 렌더링하기 위해 힌팅에 들여야 하는 노력이 적은 점입니다. 

이 두가지 사항을 제외하면 나머지는 같다고 볼 수 있습니다. 하지만 간혹 OT/CFF파일이 TrueType에 비해 장점이 많은데도 왜 대중적이지 않은가에 대해 묻는 사람이 있어서 왜 그런지에 대해 답하겠습니다. 첫째로 TrueType포맷은 OpenType보다 훨씬 오랜 역사를 가지고 있기 때문입니다. OT/CFF가 대략 10년정도 된 반면에 TT폰트는 1980년대에 처음 소개되었습니다. 두번째로는 레거시 디스플레이 모드와 관련 있습니다. 안티알리아싱이 불가능한 환경이라면 TrueType은 OT/CFF에 비해 더 나은 해결책이 될 수 있습니다. TrueType이 가지고 있는 정교한 힌팅 정보 때문입니다. 마지막으로 역사적인 이유입니다. Windows와 Mac OS와 같은 메이저 운영체제가 OT/CFF를 지원함에도 TrueType에 더 많은 투자가 이루어지고 있습니다. 따라서 응용프로그램이나 운영체제에서 폰트를 테스트 할 때 OpenType/CFF를 주로 고려하는 경우는 드뭅니다.

* 본 번역은 원문 전문이 아닌 일부만 번역한 버전입니다. 원문의 저작권은 원문 게시자에 있습니다.

원문: The Benefits Of OpenType/CFF Over TrueType


WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,

UX 디자이너가 되기 위해 포트폴리오는 아주 중요한 역할을 한다. 몇 년 전에 비해 우리나라도 UX 디자인에 대한 관심이 많아졌고 UX디자이너가 되려는 사람들도 많아졌음. 그래서 핵심만을 말하면서도 인사 담당자의 눈에 띄는 UX포트폴리오를 만드는 것이 더 중요해짐. 얼마 전 본 칼럼에 UX포트폴리오 작성 tip에 관한 글을 봤기에 공유하겠음.



UX포트폴리오 작성 가이드 tip

(원제: How Much UX have You Put into Your UX Portfolio?)


UX 시장이 넓어지는 지금, UX디자이너를 뽑는 인사담당자는 자신들이 원하는 직무에 꼭 맞는 인재를 찾기 위해 많은 노력을 하고 있다. 수 많은 안좋은 UX포트폴리오들을 보면서 당신이 어떻게 하면 좋은 UX포트폴리오를 만들 수 있을지 몇 가지 tip을 주고자 한다.



1. 넓이와 깊이

보는 사람이 당신의 디자인 경험의 넓이와 깊이에 대해 가늠할수 있도록 할 것.

당신은 모바일 앱 기획에 많이 관여했는가? 웹사이트에서 특히 커뮤니티 사이트에 경험이 많은가? 당신의 특화된 지점은 무엇인가.

만약 특화되지 않고 다양한 일을 경험했다면 오히려 쇼케이스처럼 죽 늘어놓고 당신의 능력의 다양함을 자랑할것.


(편집 주) 자신이 어느 부분에 특화 되었는지도 모르는 경우가 있는데, 큰 그림에서 포트폴리오를 관통하는 하나의 메세지는 필요하다는 뜻. 이게 없는 '늘어 놓기만 하는' 포트폴리오를 종종 본다.


2. 큐레이팅

자기 작업을 큐레이션 하는 능력을 보여줄 것.(큐레이션 능력을 자기 포트폴리오에서조차 발휘하라는 뉘앙스) 큐레이션 능력을 보여주는건 프로젝트에서 가장 중요한 점이 무엇인지 이해하고 있다는 것을 시사한다.

아무도 당신이 그린 와이어프레임 30장을 보고싶어하지 않으므로 4-9개의 주요 작업을 보여주되, 마일스톤(전환점, 기념비)이 될만한 작업을 중간중간 끼워넣을 것. 뭐 예를들자면 이 방향으로 가다가 당신의 어떤 의견이나 작업을 계기로 다른 길을 발견했다 등.

끝으로 인사담당자를 짜증나게 하지 말자. 인사결정권자의 주의를 끄는건 운이 좋아봤자 몇 분이기 때문에 구구절절한 얘길 길게 하지 않아야 한다. 가장 중요한 프리젠테이션 시작 후 첫 2분을 드롭박스나 메일에서 파일 다운로드하는데 써버린다면 넌 이미 끝났엉ㅋ


(편집 주) 많이 하는 실수 중 하나로, 자신의 모든 결과물을 마치 보고서처럼 늘어놓는 포트폴리오가 많다. 포트폴리오에 애정이 있는 자신을 제외하고 누구의 눈에 그것이 들어올까.


3. 내러티브

포트폴리오 또한 당신의 경력이다. 디자이너로서 당신의 스토리가 무엇인지 설명해라. (단, 스크린샷 등 이미지가 아닌 언어를 사용해서.) 무슨 일을 했고 어떻게 해결책을 찾았는지. 이러한 서사에는 플로우라는 것이 필요한데 플로우는 '소개-주로 한 일-결론' 순서로 이어진다


4. 프로세스 워크

프로세스워크는 당신이 한 일의 핵심이다. (작업 과정중의 날 것 그대로) 그러니까 당연히 보여주자. 화이트보드를 찍은 사진이나 포스트잇이 덕지덕지 붙은 벽채, 와이어프레임 스케치, 만들어낸 퍼소나 이런 것들이 있다면 보여줘라! 정돈된 게 아니라 중간에 거칠거칠한 과정들을 어느 정도 보여줘야 '아 이놈이 일해봤구나' 싶은 줄 안다.


(편집 주) 날 것들을 몽땅 꺼내놓고 보여주라는 이야기가 아니고, 서사와 대응되는 프로세스 워크들을 함께 보여주면 효과가 더 크다는 뜻이다.


[화룡점정]

포트폴리오 포맷을 결정하고 나면 당신에게 몇 가지 옵션이 있다. 

웹사이트로 만들거나, Behance같은 프로젝트 보여주는 서비스를 쓰거나, PDF를 만들거나 어떤 포맷이던 장단점이 있다. 그런데 당신이 뭘 고르든 가장 훌륭한 '사용자 경험'이 되도록 할 것을 기억하라. 아래에 몇가지 요령을 소개한다.


도입부

- 그래픽이나 색을 통해서 시선을 잡아끌자. 비주얼 경험이 있다, 혹은 내가 디자이너다! 라는 점을 어필해라

- 인트로에선 그래픽이나 색 같은 아이캐치로 시선을 끌거나 아니면 자기소개를 하라


핵심 본문(meat and potatoes)

쇼케이스 하기위해서 일반적으로 3개 정도의 프로젝트가 필요하다. PDF는 3-5개정도가 적절하며 만약 5개 이상을 보여주려면 웹사이트 포맷으로 가는게 좋다. 프로젝트 브리프부터 최종 결과물까지 도달한 과정을 보여주자.


- 고용 담당자는 프로세스 워크를 보고 싶어 할 것이다. 스케치나 와이어프레임이나 프로세스 흐름을 보여줄만한 결과물을 넣자. IA(information architecture)도 과정의 일부라면 가차 없이 넣어라. 

- 서사와 그림은 서로 잘 어울리는 재료들이다. 사용자들의 행동을 예측하여 작업한 무언가가 있다면 거기에 와이어프레임을 덧붙여 줘라. 

- 프로세스를 진행하면서 도전했던 것, 어려웠던 것, 가로막혔던 것을 이야기해라.

- 가능하다면 마지막 결과물은 이미지로 보여줘라. 단, 비주얼디자인/코딩은 자기가 한 게 아닐 경우 주석으로 달아둘 것.


정리(wrap it up)

- 포트폴리오 리뷰를 들어준 사람들에게 감사인사를 해라.

- 자기 인적사항을 다시 한 번 이야기할 것.



원문 : http://uxmag.com/articles/how-much-ux-have-you-put-into-your-ux-portfolio


WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,

늘 "사용성"을 부르짖지만 정작 쓰는 사람을 상대로 무언가 해본 적 있는지.
나도 사용자 중 하나니까 괜찮다고? 반은 맞고 반은 틀렸다.
미안하지만 사용성 평가를 위한 실험재료로 당신은 낙제다.
당신에게서 쓸모있는 데이터를 얻을 확률은 낮다.

당신 역시 사용자이긴 하지만 시스템의 구조를 모두 알지 않는가.
사용성 평가는 일종의 롤플레잉 게임과 같다. 피험자에게 퀘스트를 주고 클리어 하는 과정을 지켜보며 그를 혼란스럽게 만드는 요소를 찾아내야 한다.
하지만 시스템의 설계자인 당신은 전혀 헤매지 않고 시스템을 탐험할 가능성이 매우 높다. 따라서 설계자는 사용성 평가 도구로 가치가 없다.

우린 매일 쪼들리며 일을 하고 있어 그런 것을 수행할 비용과 시간이 없다고? 그럴거면 아예 사용성이라는 말을 하지 마라.


WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,

UX(User Experience) 라는 말을 누가 처음 했는지는 까먹었는데 (논문 쓸때 어디서 읽었었는데... 제이콥 닐슨.. 은 아닌 것 같고. 하여간에 아는 분이 리플 주시길 제이콥 닐슨 친구 도널드 노먼이 한 말이라고 함) 이걸 그냥 사용자 경험이라는 직역투로 번역하면 이해하기가 너무 힘든 것 같음.


1년 정도 요 괴상한 단어에 대해 불만 투성이로만 살다가 얼마 전 아침에 샤워를 하는 동안 마법의 단어인 마냥 남발되는 이 몹쓸놈의 말을 어떻게 쉽게 고칠 수 없을까 본격적으로 고민을 했음.

곰곰히 머리를 이리저리 굴리다 보니 대충 얼버무려 UX라 하면 '사람이 제품이나 서비스를 사용하며 겪는 느낌'을 말하는 것이라고 할 수도 있을 것 같았음. 그래서 이걸 다시 적당히 멋지게 줄여 보니 '사용감(내지는 쓰는 느낌)'이라는 말로 대체가 가능할 것 같다는 생각이 듬.


따라서 결론은 UX디자인 = 사용감 디자인 = 쓰는 느낌을 디자인하는 일.


쓰는 느낌, 즉 UX를 향상시키기 위해 소재를 개선하거나 UI를 개선하거나 심지어는 사용(자의 만족)감을 향상시키기 위해 브랜딩까지도 이 영역에 포함시켜 오만 노력을 기울이니, 이쯤 되면 훌륭한 대체어가 될 수 있지 않을까 자체평가를 해 봄. 그리고 사용자 경험이라는 묘한 단어보다 오히려 명쾌하지 않나 싶기도 함.


뭐 아니면 말고.


WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,

Adobe Illustrator를 사용하다 보면 간혹 정렬이 안된다던지, 원하는 위치에 오브젝트가 정확하게 이동하지 않는 등, 스냅이 이상하게 걸리는 경우가 있다. (주로 RGB 색상 모드일 때 그렇다)

이럴 때 우선 체크할 사항은 Transform(shift+F8) > Align New Objects to Pixel Grid 옵션을 꺼 주는 것이다.



끝.


WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,

wallpaper - heart

design 2012. 7. 22. 21:49

오늘 아침 만든 월페이퍼.

그냥 심플하게 만듬...



해상도: 2560X1440




WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,
아이북스 아서로 만든 여러 실험용 전자교과서가 하나둘 보인다. 소감은 마치 PC초창기에 난립하던 엉성한 교육용 소프트웨어들과 흡사한 느낌. 세련되고 아니고의 문제가 아니라 그냥 플랫폼만 PC에서 태블릿으로 옮겨온 기분이 든다. 

이러한 전자교과서의 '엉성함'을 개선하기 위해서는 시각적 세련됨을 가져야 함은 당연하고 전자책이 자랑하는 쌍방향 인터랙션의 추가가 절실하다. 일방적, 선형적인 정보 전달자로서 책의 역할은 아날로그 책의 세계에서 이미 수천년간 이루어져 왔다. 전자책을 기존의 책처럼 일방적인 정보 전달매체로 만들 생각이라면 비싼 돈을 들여 전자화 시킬 필요 없다. 차라리 종이책을 찍는 쪽이 기존의 경험을 이어가고 익숙함을 불러일으키기에 훨씬 좋다. 

생각해 보자. 종이책의 일반적인 형태인 코덱스 스타일이 거의 2천년을 살아남은 형태라는 사실은 그것이 얼마나 사람의 읽기에 편한 제본 방식인지를 말해주는 증거이다. 전자책처럼 화면으로 글을 읽는 행위의 역사는 길어야 60년, 대중화 된 지는 기껏해야 30년 남짓이다. 똑같이 일방적 정보 전달 방식을 취한다면 당연히 종이+코덱스 스타일 쪽의 경쟁력이 높으며 전자책처럼 읽는 방식이나 조작에 익숙해지기 위한 시간을 투자할 필요도 없다. 전자책 기획자들은 독자들이 종이책과 똑같은 내용을 굳이 전자책 포맷으로 읽어야 하는 이유에 대해 고려해야 한다.

다시 돌아와 말하자면 '상호작용'은 전자책이 종이책과 차별화 될 만큼 중요한 능력이다. 여기서의 '상호작용'은 단순히 화면의 물체를 손으로 누를 때 어떻게 움직이냐와 같은 기계-인간 사이의 일차적 상호작용을 말하지 않는다. 이는 교사와 학생, 저자와 독자, 출판사와 독자처럼 사람-사람의 직접 의사소통을 가능케 하는 능력을 말하며, 이는 종이책이 수행할 수 없는 전자책만의 능력이라 할 수 있다. 따라서 이를 가능케 하려면 서버와 클라이언트를 가진 전자책 모델이 필요하다.

명심하자. 디씨질이 심심이랑 노는것보다 재미있는 이유는 그것이 병신같던 아니던 바로 사람-사람의 의사소통이 이루어지기 때문이다. 마찬가지로 전자책에서 책을 통한 사람 사이의 의견 교환 혹은 내용에 대한 다양한 해석을 교환할 수 있는 통로를 제공한다면 독자 역시 차별성을 느끼고 그러한 점이 전자책의 매력이 될 수 있을 것이다.

WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,


책의 생김새는 누가 정의했고 무엇이 책의 바른 형태인가는 누가 결정하는가?
전자책에 관심을 기울이며 가장 최근에 드는 의문은 이러했다.
 
새로운 미래의 시작은 기존의 생각을 깨는 것에서부터 시작하고 책의 미래 역시 그러하다.
전자책의 시대에서 책이 독자에게 정보를 제공하는 물리적 방식이나 지면을 전환하는 방법은 더이상 코덱스의 형태를 따라야 할 의무가 없다.
간혹 전자책을 '책같지 않아서 이상하다'고 말하는 이가 있지만 그것은 그들의 편견일 뿐 앞으로 다가올 책의 형태는 지금 우리가 이상하다고 여기는 그 모습일 수 있다.

현재 전자책이 우리에게 느끼게 하는 형태적 이질감은 더이상 '이상한'형태가 아닌 '색다른'형태로 받아들임이 옳다.

WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,

나나 프로젝트 6

design 2010. 9. 14. 14:57

나나 6권 서점에 9월 1일자로 나왔었네..
이미 서점에 들어갔는데 우린 왜 책 안주시나요 ㅠㅠ



빨리 주세요 현기증 난단 말이에요..



아무튼 지난 두달간 이거 디자인하느라 뼈빠지게 고생한 민X2, 박X2, 황, 안, 그리고 나도.. 수고했습니다.
조만간 우리끼리 책거리 할때 봐요!

WRITTEN BY
artfrige
베이스 연주는 건강에 좋습니다
,