책정리

---

스매싱 북. 2

저자

스매싱 매거진 지음

출판사

웹액츄얼리코리아 | 2014-06-12 출간

카테고리

컴퓨터/IT

책소개

웹 디자인 전문 출판사 웹액츄얼리는 가장 영향력 있는 글로벌 웹...

---

- 그래픽 디자인은 산업혁명 이후 커뮤니케이연 요구에 대한 자연스런 반응으로, 대량생산의 산물을 당시 팽창하고 있던 소비사회에 판매할 목적으로 고안됨. 이런 관점에서 그래픽 디자인은 광고를 지원하기 위한 창조적 행위로 이해할 수 있음. 이것은 완벽한 정의는 아니지만 모든 그래픽 디자인에 적용되는 가장 중요한 요소를 암시한다 할 수 있음. 그것은 바로 커뮤니케이션이다. 그래픽 디자인은 그것이 어떤 형태던 궁극적으로는 시각적 커뮤니케이션 활동임. 이는 타이포그래피, 일러스트, 형태, 색상 등 다양한 요소를 통해 실현됨. 그러나 보는 이에게 정보를 효과적으로(때로는 즉각적으로) 전달해야 한다는 커뮤니케이션 목적은 변하지 않음
- 타이포그래피가 콘텐츠에 기여하도록 하려면 브링허스트가 말했듯이 글의 내적 논리 속에서 타이포그래피의 외적 논리를 발견해야 한다. 서로 다른 서체에는 서로 다른 의미가 내표됨. 그러므로 서체를 신중하게 선택하지 않으면 혼합된 메시지를 전달하게 됨
- 단어를 말할 때 어조, 성량, 어미의 변화가 단어의 의미와 직접 관련있는 것처럼, 컬러, 타이포그래피, 일러스트의 선택은 디자인이 전달하는 의미와 관련있음. 더욱이 당신이 의식적으로 선택했든, 무의식적으로 선택했든 상관없이 그 요소들은 의미에 영향을 끼칠 것이다. 색상 팔레트는 우리가 무엇인가를 해석하는 방식에 항상 영향을 미치며, 모든 서체는 스타일, 두께, 함축성, 맥락을 통해 디자인에 의미를 부여함. 따라서 우리는 디자인에서 하는 모든 것에 유념해야 함. 그 어떤 것도 임의대로 해서는 안되며, 모든 요소는 의미에 관한 위대한 교향곡을 창조하기 위해 서로 조화롭게 작용해야 함. 그렇지 않으면 디자인의 목소리는 불협화음을 일으키고 웹사이트의 효율성도 저해될 가능성이 높음.
- 좋은 디자인은 눈에 보이지 않는다. 디자인이 눈에 들어온다면 그것은 잘못 만들어졌을 뿐이다. (자레트 스풀) 디자인이 보이지 않는다고 이야기하는 것은 우리가 강력한 시각매체로 생각해왔던 디자인 자체의 본질을 부정하는 것처럼 들림. 나아가 인터랙션을 위한 디자인 개념까지 더해지면 혼란은 한층 가중됨. 사용자 인터페이스는 단순히 고정된 그래픽이나 메시지가 아님. 사용자가 직접 사용하는 하나의 제작물이다. 시각디자인 자체에 감탄하려고 웹사이트를 방문하거나 애플리케이션을 실행시키는 사람은 거의 없음. 사용자에게는 특정한 기대와 목적이 있고, 그것이 즉시 충족되지 않으면 웹사이트 접속 후 몇초 이내에 다른 곳으로 이동하고 만다. 그러므로 디자인은 필요한 정보를 쉽게 찾을 수 있는 곳에 두어야 하고, 사용자가 몰두해서 좀더 오래 머물며 자세히 들여다보고 싶게 만들어야 함. 디자인의 의미는 잘못 회자되고 있음. 기업들은 대부분 겉으로만 보이는 껍데기를 만드는 것이 디자이너의 역할이라고 이해한다. 그들은 디자이너들에게 깊이라고는 없는 혹하게 하는 겉치레의 눈요기를 만들어달라고 의뢰한다. 디자인은 당연히 그 이상의 것이다. 인터랙션 디자인은 형태가 기능을 만난 것으로 묘사될 때가 많다. 보이지 않는 디자인은 사용자에게 의미있는 형태, 그리고 직관적인 기능, 이 두가지의 결합이다. 우리는 인터페이스가 직관적이라고 묘사되는 것을 듣곤 함. 이 동작은 직관적으로 느껴지지 않아. 그 애플리케이션의 상호작용은 아주 직관적이야 라는 식이다. 직관적이라는 말은 일반적으로 배우거나 사용하기에 쉽다는 정도로 정의됨. 본래 직관적이란 의미는 그것을 사용할 때 아무런 생각을 거치지 않아도 된다는 뜻. 직관적 인터페이스, 심지어 보이지 않는 인터페이스야말로 가장 완벽한 인터페이스라고 할 수 있음.
- 애플리케이션의 구조 (리치 인터페이스 디자인: 웹 인터랙션의 75가지 패턴)
* 창작 : 새로운 콘텐츠를 만들거나 수정해야 할 때 적합한 구조 (블로깅, 일러스트레이션, 코딩, 사진편집, 도표 그리기)
* 절차 : 체계화된 방법으로 정보를 제공해야 할 때 적합한 구조 (제품배열, 설정이나 설치, 등록양식, 세금납부, 여행예약, 체크아웃 등
* 정보 : 정보를 탐색, 비교, 이해해야 할때 적합한 구조. 예를 들어 뉴스읽기, 계기판, 미디어 플레이어, 온라인 상점 등
- 웹기술을 사용하는 또 다른 일반적 이유는 수정작업 없이도 여러 플랫폼에서 모바일앱을 실행할 수 있기 때문. iOS, 안드로이드, 기타 플랫폼은 웹킷 기반의 브라우저를 사용하기 때문에 HTML5, CSS3 등 기타 웹기술은 브라우저에서 원활히 작동함. 구식 브라우저에서는 둥근 모서리 효과, 드롭섀도 효과, 텍스트 드로섀도 효과, 그래디언트, 애니메이션 효과 등 대부분이 출입금지 당함. 하지만 모바일 웹 앱을 구축할 때는 무엇이든 다 사용할 수 있음. 이런 장점에도 불구하고 왜 많은 사람은 브라우저 모바일 앱을 구축하는 것을 꺼리는 것일까?
* 판매의 어려움 : 구글과 애플은 스토어를 통해 앱을 판매할 수 있는 간편한 방법을 제공. 모바일 웹 앱 판매는 유통과 결제가 전적으로 개발자에게 달려 있어 훨씬 어려움
* 사용자와의 연결의 어려움 : 사용자가 더 많은 앱을 원할 때는 휴대폰 스크린을 터치해서 플랫폼에 내장된 앱스토어를 불러오면 됨. 이렇게 함으로써 사용자는 잘 분류되어 있고 인기도에 따라 정렬된 수만개의 앱에 접근할 수 있음. 하지만 웹앱에는 이런 직접적인 접근법이 없음
* 성능문제 : 네이티브 앱은 성능 면에서 웹앱을 능가. 브라우저에서 HTML페이지를 실행하는 일은 컴파일된 네이티브 코드를 실행하는 것만큼 빠르지 않고, 메모리도 효율적으로 사용할 수 없음
* 부족한 위젯 : iOS와 안드로이드 프레임워크에는 기본 UI요소가 많이 포함되어 있음. 하지만 당신이 모바일 웹 앱을 만들려고 하면 자신만의 프레임워크를 작동시켜야 함. 모바일 웹앱을 위한 좋은 프레임워크가 다소 있지만 네이티브 프레임워크에 비해서는 아직 부족
- 아름다운 UI디자인을 만드는 비결은 사실주의다. 화면 속 2D사물을 3D사물 공간에 있는 것처럼 보이게 하는 것 말이다. 그것에는 현실에서 발견할 수 있는 입체감, 표면의 특징, 울퉁불퉁한 성질이 있다. 이런 갓아의 3D사물은 마치 당신의 책상 위에 놓여 있는 물체처럼 하이라이트와 그림자를 가졌다. 2D물체를 3D처럼 보이게 하기 위해서는 물체가 화면에서 튀어나온 것처럼 생각하도록 관람자의 눈을 속이면 되는데, 빛 효과를 조작함으로써 그렇게 할 수 있다. 인터페이스를 디자인할 때는 마치 광원이 스크린 꼭대기에서 모든 텍스터, 위젯, 버튼을 비추고 있는 것처럼 만들어야 함. 이 광원이 무엇을 어떤 순서로 비추는지에 따라 그림자와 하이라이트가 생김. 광원이 비치지 않으면 둥근버튼을 납작해보일 것임. 그레이디언트, 하이라이트, 그림자는 이런 눈속임에서 중요한 역할을 맡음
- 즉, 와이어프레임이란 반복적인 디자인 과정을 통해 아이디어를 만들어내고 탐색하고 개선하고 프로세스를 말한다. 그것은 디자이너, 관계자, 사용자가 함께 아이디어에 대한 의견을 나누고, 승인하는 것을 목적으로 하는 과정이다. 와이어프레임 단계, 즉 웹사이트의 골격을 보여주는 문서작업 단계에서는 인터랙션 디자인, 내비게이션 디자인, 인포메이션 디자인이 모두 통합됨
- 디자인 프로세스에서 흔히 빠지기 쉬운 함정 중 하나가 기존에 하고 있던 구상을 마치지 않고 또 다시 새로운 구상을 시작하는 것이다. 이것을 아이디어 투 아이디어 신드롬이라 한다. 어떤 아이디어에 회의를 느끼면 흥미를 잃을 수 있다. 이때 되돌아가는 가장 쉬운 방법이 또 다른 아이디어를 구상하기 시작하는 것이다. 이번에는 좀더 낫기를 기대하면서. 당신이 별 생각없이 아이디어를 탐색하던 중이었다면 이렇게 해도 전혀 문제가 없지만 중요한 아이디어였다면 머릿속에서만 아이디어를 만들고 지우기를 반복하지 말고 반드시 실제로 스케치를 해야 한다. 당신이 창조적 유형의 사람이라면 아마도 이 증상을 겪어 보았을 것이다. 새로운 아이디어를 생각해내는 일은 흥미진진하고 구상에도 도움이 된다. 하지만 한가지 아이디어에 끈기있게 매달려 고민하는 것도 중요하다. 그렇지 않으면 처음에 가졌던 흥미가 모두 좌절로 변할수도 있음. 아이디어에 영감을 받아 스케치를 했지만, 결국 그 핵심을 장악하는 데는 실패해서 미완성 스케치만 산더미 처럼 남게 된다면 말이다. 디자인 프로세스에 많은 사람을 동참시키고 구체적인 피드백을 받도록 하라. 이것은 당신이 과정을 끝까지 헤치고 나갈 수 있게 해주고 창조성과 실행 사이에서 균형을 잡을 수있게 해준다.
- 테스트가 끝난 다음에는 결과를 분석하고, 그룹화하고, 순위를 매기도록 한다. 순위를 매기는 것은 두가지 이유에서 중요함. 첫째, 어떤 피드백은 지나치게 주관적이거나 편향될 수 있고, 둘째, 모든 문제를 시간내에 항상 고칠 수 없기 때문이다. 잠재적인 문제점에 대해 세가지 핵심요소를 토대로 우선순위를 정하자. 즉, 빈도, 영향, 지속성에 따르도록 한다. 빈도는 문제점을 발견하는 사람들의 수와 관련이 있다. 영향은 문제의 심각성과 그것이 사용자의 작업에 얼마나 강하게 영향을 끼치는지 하는 정도와 관련됨. 지속성은 문제가 또 반복될 것인가 하는 질문이다. 문제점들의 우선순위를 결정하고 나면 가장 급박한 문제에 먼저 집중할 수 있음. 하지만 현실적인 예상을 세우는 것이 좋음. 시간과 예산상 제약에 끌려 다니다보면 우선순위가 낮은 문제는 웹사이트가 오픈한 후까지 기다려야 할 수도 있음. 특히 클라이언트가 그 문제들을 중요하게 생각하지 않으면 그마저도 불가능할 수 있음. 그렇다 해도 사용자의 이익을 옹호하도록 하자. 비록 클라이언트가 그것을 중요치 않다고 여기고 자원투자를 꺼리다고 해도 말이다.
- 당신이 전문적인 웹 개발자나 디자이너가 되고 싶다면, 그리고 동료와 선배로부터 존경받고자 한다면 프로페셔널이 되어야 하며, 당신이 만들고 있는 것에 자부심을 가져야 함. 명심해야 할 것은 당신이 만든 작업물을 유지보수하는 것은 당신만이 아니라, 당신만큼의 지식과 기술이 없는 사람이기도 하다는 사실. 대부분의 경우 그들은 당신이 짠 코드를 어지럽혀 놓을 것임. 회사에서는 유지보수 담당자에게 충분한 비용을 지불하지 않을 것이고 퀄러티도 기대하지 않을 것임.
- 웹사이트를 이미지로 만들지 않는 한 모든 브라우저에서 똑같이 보이는 화면은 없다. 구식 브라우저에서 최신의 근사한 기술을 강제로 잘 보이게 하려고 하느니 웹사이트의 본래 모습을 감싸안는 편이 나음. 코드에 질식당해 허덕대는 일 없이 자기가 보여줄 수 있는 것을 브라우저에게 허용하는 웹의 모습 말이다. IE6에서 단일한 파란색으로 보이던 텍스트 상자가 웹킷 브라우저나 파이어폭스에서 아름다운 그레이디언트도 처리되고 둥근 모서리와 그림자 효과가 있는 상자로 보여도 그것은 버그가 아님. 그것은 웹이 실제 작동하는 방식이다. 물리적 제품은 사용자에 맞게 변형시킬수는 없다. 그러나 웹에서는 가능하다. 우리는 웹이 이런 면을 불평하기보다 기회로 삼고 활용해야 한다.
- 힌팅, 혹은 스크린 최적화란 디지털 디스플레이에서 폰트의 가독성을 최대한 조절하는 과정을 말함. 윈도우에서는 아주 많은 시간과 노동이 요구됨. 맥OS는 폰트에 포함된 힌팅 설정을 무시하고 애플이 적합하다고 여기는 렌더링 방식대로 텍스트 아웃라인을 렌더링함. 힌팅은 지루하고 시간소모가 많기 때문에 전체 폰트의 99%, 심지어 상업적 폰트들조차 힌팅기능이 아예 없거나 자동보정이 적용되어 있음. 때문에 언제나 좋은 결과가 나오지는 않음. 리처드 루터는 "힌팅은 점차 사라질 문제다"라고 주장. IE9는 MS의 새로운 텍스트 렌더링 엔진인 다이렉트 라이트를 사용. 다이렉트 라이트는 텍스트를 렌더링할 때 이차원 부분픽셀, 안티 앨리어싱 방식을 사용. 더 중요한 사실은 스크린 하드웨어가 급속히 발달한다는 것. 선명하고 깨끗한 326dpi해상도를 가지는 레티나 디스플레이는 게임의 규칙을 바꿔버림. 1년전만 해도 상상할 수 없었던, 인쇄물보다 높은 해상도를 지원하는 고해상도 장비와 스크린 장비를 보게 되는 것도 시간문제. 존 탄은 "이것은 결코 인쇄물과의 경쟁은 아니다"라고 지적. "그러나 웹타이포그래피의 잠재력이 인쇄물을 추월하는 시기가 언제쯤일지 눈에 보이는 듯하다." 하지만 그전까지는 디자이너와 제작사 모두 자신들의 폰트가 모든 운영체제와 브라우저에서 잘 구현되도록 하기 위해 타입페이스와 힌팅과 다양한 플랫폼에서의 실험을 계속해야 함. 고해상도 스크린이 계속 나오는 환경에서 올리버 라이헨슈타인은 새로운 스크린 폰트는 시급한 당면과제라고 여기고 있음. 기존의 핵심 웹폰트들은 저해상도인 모니터에서 작은 크기로 보았을 때는 괜찮아 보이지만 고해상도 스크린에서 보기에는 형편없음. 올리버는 "대부분의 버다나 서체의 표준사이즈는 현재 스크린 해상도에서는 이미 구식이다"라고 지적. 버다나체는 구형 모니터에서는 아름답게 보임. 하지만 현재는 사이즈 대부분이 사용하기엔 너무 작거나 너무 진함.
* 서브픽셀 : 화면의 한 픽셀은 부분 픽셀로 구성하여 가로폭이 3배인 비트맵을 만든 후, 각 부분의 픽셀의 컬러명암에 따라 비중을 곱해 값을 결정하여 글자를 표현하는 기법. 실제 해상도를 가로 방향으로 3배를 한 것에는 못미치지만 그에 유사한 정도의 부드러운 글자출력을 얻음
* 앤티앨리아싱 : 저해상도에서 나타나는 계단식 모서리를 부드럽게 만들어 외곽선을 깔끔하게 보이게 하는 렌더링 기술
- 사람이 상호작용을 할 때에는 사회적 상호작용의 규칙과 지침을 따름 사회적 상호작용이 어떠해야 할 것이라는 기대가 있으므로 누군가 그런 기대를 깨뜨리면 불편함을 느낌. 온라인에서도 마찬가지. 우리는 웹사이트를 방문하거나 애플리케이션을 사용하면서 그것이 우리에게 어떻게 반응할 것인지, 상호작용은 어떻게 될지 추정함. 이런 기대는 많은 부분 우리가 사람들과 상호작용 할 때와 비슷함. 웹사이트가 반응을 안하거나 로딩이 너무 오래걸리면 마치 대화중인 상대가 나를 쳐다보지 않거나 무시하는 것과 비슷하게 느껴짐. 어떤 웹사이트가 상호작용 흐름에서 너무 일찍 개인정보를 요구한다면 누군가가 지나치게 가까워지려 해서 불편한 것과 같음. 단계에서 단계로 넘어갈 때 나의 정보를 저장하지 않는 웹사이트는 서로 구면이라는 것을 기억하지 못하는 상대와도 같음. 인터페이스를 디자인할 때는 내가 어떤 상호작용을 구축하고 있는지를 생각해 보아야 함. 그것들이 실제 사람들의 상호작용과 어떻게 닮았는지를 생각하고, 사회적 상호작용의 규칙을 어기지 않도록 해야함
- *구뇌는 음식, 성, 위험에 대한 환경을 끊임없이 탐색. 따라서 음식, 매력적인 사람이나 무서운 장면에 대한 이미지, 애니메이션 혹은 동작들이 사람들의 시선을 끈다.
* 몇초 이상 관심을 끌고 싶다면 중뇌를 활용해야 한다. 이야기, 사람들의 얼굴 사진, 특히 어떤 감정을 보여주는 것들을 이용해서 할 수 있다.
* 사람은 이야기를 통해 정보를 가장 잘 처리한다. 짧더라도 가능한 한 많은 이야기를 이용해야 함
* 사람은 다른 사람의 사진, 특히 매력적인 사람이나 옷, 나이, 기타 신체조건이 비슷한 사람의 사진에 자연스레 끌린다
* 활용하기에 가장 좋은 사진은 카메라를 똑바로 쳐다보는 인물사진. 사진은 얼굴을 확인할 수 있을만큼 커야한다
* 사람들은 비록 무의식적으로 결정을 내리지만 자신이 왜 그런 결정을 했는지 자신과 다른 사람에게 설명할 수 있는, 합리적인 이유가 필요하다. 이것이 진짜 이유가 아닐 수도 있지만 이유를 갖는 것은 중요하다. 사람들이 당신의 서비스, 도구나 지원을 선택해야하는, 설득력 있는 주장을 내세워라
- 최소한의 충족과 관련한 가이드 라인.
* 운영자는 방문자가 모든 페이지를 읽기를 바라지만 사실 대부분의 시간 동안 방문자들이 하는 것은 새 페이지들을 한번씩 보고 텍스트의 일부를 훑어본 후에, 제일 먼저 눈이 가는 흥미로운 링크나 찾고 있던 것과 대충 비슷한 링크를 클릭하는 것. 보통은 쳐다보지도 않는 페이지가 더 많음.
* 사람들은 지름길을 찾고 있음. 사람은 어떤 일을 더 신속하게 더 적은 단계를 거쳐 할 수 있는 방법을 찾는다. 특히 반복적인 일이라면 더욱 그러함. 하지만 지름길을 생각해내기가 쉽지 않다면 기존에 하던 방식대로 할 것임. 특이해 보이지만 이는 노력이 얼마나 들지 인지하는 문제로 귀결됨. 지름길을 찾는데 너무 많은 노력이 들 것 같으면 사람들은 해오던 오랜 습관을 고수할 것임.
* 기본값을 제공하라. 기본값은 방문자에게 요구되는 수고를 덜어줌. 예컨대 웹의 입력양식에 이름과 주소가 자동으로 기입되면 사용자는 노력을 덜해도 됨다. 기본값을 제공할 때 위험요소는 사용자가 가끔씩 신경쓰지 않는 바람에 자신도 모르게 틀린 정보를 승인할 수도 있음. 이 또한 노력이 얼마나 요구되는지로 귀결됨. 기본값을 변경하는 데 상당한 노력이 든다면 기본값 제공에 대해 다시 생각하고 싶을 것이다. 사람은 가능한 한 적은 노력으로 업무를 수행하고 싶어하지만 그렇다고 지루해지고 싶어하지도 않음. 이 두가지 충동을 설명하는 것이 사람들이 참여하는 웹사이트를 만드는 열쇠.
- ePUB는 07년 말 국제디지털출판포럼에서 있었던 이북포럼에서 소개된 새로운 오픈 이북 규약. 문서의 구조와 컨텐츠를 구현하기 우해 XHTML1.1을 사용하며, 콘텐츠 테이블을 만드는 데는 XML, 레이아웃과 포매팅을 위해서는 이펍 메타 데이터와 스타일시트(CSS2.0의 일부)를 사용. 이 규약은 종전의 오픈 이북출판 규약 OEBPS를 대체하기 위해 등장. 어도비, 애플, 구글, 마이크로소프트, 노키아, 휴렛패커드, 소니 등을 포함한 150개 이상의 주요 기업에서 이 규약을 지원. 이 규약은 소스파일 포맷과 최종 사용자 포맷 모두에 활용가능한데, 이를 통해 출판사와 전환 공급자가 생산과 유통에 같은 파일을 사용할 수 있음. 책의 파일 전체는 보통 집파일 형태로 압축되지만 확장자는 epub로 바뀜. 모든 이폅 사용 이북리더는 압축된 컨텐츠도 읽어들일 수 있어야 함. 이펍은 또한 png, jpeg, gif, svg등의 이미지 파일 형식도 지원. 이펍파일에서는 텍스트를 유니코드 UTF-8 혹은 UTF-16으로 인코딩해야 함. 이펍의 핵심적 특징은 DRM사용이 가능하다는 것.
- 모비포켓 이북 포맷은 07년 이펍에 의해 대체된 종전의 오픈 이북출판 규약에 기반을 두고 있음. 모비포켓은 컨텐츠의 저장과 표시에 XML과 XHTML을 사용. 모비포켓이라는 이름은 모비포켓 SA사에서 따왔음. 이곳은 모비포켓 리더, PDA를 위한 무료 이북리더, 스마트폰, 모바일 운영체제(심비안, 윈도우 모바일, 팜OS, 웹OS, 자바미, 블랙베리, 사이온, 아마존 킨들) 등을 제작하는 회사임. 마이크로소프트 윈도나 맥OS X가 작동되는 데스크톱 컴퓨터용 리더도 있음. 아마존 킨들의 경우 킨들에서 읽을 수 있는 포맷으로 변환시켜주는 소프트웨어를 사용하지 않으면 이펍으로 포맷된 책을 인식못함
- PDF는 원래 등록상표가 붙은 규약이었으나 08년부터 무료가 됨. 어도비사에서 개발한 것으로 최초에는 출판인쇄가 가능한 문서를 저장하고 편집하기 위한 규약으로 제작됨. PDF문서는 많은 전자책 리더 화면에서 읽힐 수 있음.