8-Point 그리드 시스템



출처 : https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632#.oh33ss65e

*왜 px단위가 아닌 pt단위인지는 https://brunch.co.kr/@blackindigo-red/18를 참고하세요 :)

디자이너라면 웹 사이트나 잡지, 모바일 앱 등 무엇을 디자인하든 간에 ‘그리드’라는 용어를 들었을 것입니다. 

모든 종류의 콘텐츠는 ‘그리드’라는 시스템을 이용해 배치됩니다. 
우리는 가로 그리드를 사용하여 콘텐츠의 내용을 정렬하고 세로 그리드를 사용하여 텍스트 본문을 세로로 정렬합니다. 

소프트 그리드와 하드 그리드는 우리가 이 시스템을 얼마나 엄격하게 준수하는지 설명합니다. 
저는 브린 잭슨 (Bryn Jackson)이 8pt 그리드 시스템에 대해 열렬히 이야기한 것을 듣고 관심을 가지게 되었고, 8pt 시스템이 내 디자인에 어떤 이점을 줄 수 있는지 알아보기로 했습니다. (참고: [Spec](https://spec.fm/specifics/8-pt-grid)


8pt 시스템을 사용하지 않고서도 그리드를 잘만 쓰고 있었는데...


저는 Bootstrap이나 Foundation과 같은 디자인 시스템을 사용하여 웹 디자인을 시작했고, 심지어 유사한 시스템을 직접 만들려고 시도한 적이 있었습니다.

그러나 중요한 것을 깨닫지 못했습니다. 버튼과 같은 컴포넌트들을 페이지에 따라 개별적으로 배치하면 그 한 페이지는 아름답게 보일 수 있겠지만, 더 큰 레이아웃의 측면에서 전반적인 디자인이 저하된다는 것이었습니다.


통일된 그리드가 없다면 유지보수가 어렵고, 프로덕트의 전반에 걸쳐 만족스러운 구성을 지속하기 어렵기 때문입니다.


디자인 아이디어를 사용하여 몇 가지 요소를 미세하게 다르게 만들 수는 있습니다.

하지만 일관된 그리드 시스템이 없이는 디자인 팀과 개발팀이 같은 비전을 공유할 수 없고, 요소들의 간격 관계를 정의하는 시스템이 없으면 서비스의 일관성을 유지하기가 어렵습니다.


여기에서는 8pt 그리드 시스템과 공간,컴포넌트의 크기에 따라 임의의 숫자를 사용하는 보편적인 디자인 그리드 시스템을 비교해 볼 수 있습니다.




왜 인터페이스에서 일관성이 유지되어야 하는가?

물론 꼭 일관성을 유지할 필요는 없습니다.

하지만 전문적이고 신뢰할 수 있는 사이트의 디자인을 원한다면 일관성을 유지해야 합니다. 온라인 쇼핑을 할 때, 구매를 클릭하고 신용 카드 입력 양식이 사이트와 다르게 보일 경우 약간의 망설임을 경험한 적이 있을 것입니다. 작은 일관성 들은 우리 서비스를 오래 지속하게 합니다.


왜 Bootstrap이나 이와 유사한 시스템들로는 부족한가?

Bootstrap은 설계자 / 개발자가 콘텐츠 및 사용자 경험에 집중할 수 있도록 하는 독창적인 컴포넌트 라이브러리입니다. 이를 통해 수많은 웹 사이트의 품질을 높였습니다.

그러나 일관된 측정 단위가 없으면 특히 두 명 이상의 디자이너가 있는 프로젝트에서 페이지 간의 레이아웃에 대한 불일치가 발생할 수 있습니다.


우리가 Pivotal(역주:글쓴이가 일하는 회사)에서 자체 브랜드 아이덴티티를 구축 할 때 우리는 우리만이 가진 고유한 컴포넌트와 레이아웃을 만들었습니다. 하지만 최근 UI 시스템을 통합하는 프로젝트를 하는 동안 제품의 모든 부분에서 브랜딩이 약간씩 다르다는 사실을 발견했습니다.

이 프로젝트에서 브랜딩의 전반적인 개념은 동일했지만 전 세계의 각 팀에서 UI를 구축하는 부분에서 실행이 약간씩 달랐습니다. 왜 이렇게 된 걸까요?



그들 중 누구도 잘못된게 아닙니다.  

스타일 뒤에 있는 규칙을 명확하게 설명 할 수 있는 시스템이 없기 때문에 각 컴포넌트들이 다른 높이와 패딩을 가지고 있게 된 것입니다.


이런 상황에서 솔루션은 8pt 그리드 시스템이 될 수 있습니다. 페이지 요소의 크기를 조정하고 간격을 늘리려면 8pt 씩 증가시킵니다. 나에게 이것은 높이나 너비, 여백 또는 패딩이 8pt 씩 증가한다는 것을 의미합니다.




왜 8pt인가?

다양한 크기의 디바이스가 출시되고 픽셀의 밀도들이 계속 증가하면서 디자이너가 에셋을 쌓는 과정이 더욱 복잡해졌습니다. 크기나 여백의 요소에 8과 같은 짝수를 사용하면 다양한 장치를 쉽고 일관되게 조정할 수 있습니다.
1.5 배 해상도의 디바이스들은 홀수를 깨끗이 렌더링하는 데 어려움을 겪습니다.

예를 들어 5px를 1.5x로 스케일링하면 반 화소가 오프셋 됩니다.




그렇다면 그 많은 짝수 중에 왜 6이나 10이 아니고 8인가?

인기 있는 화면 크기 대다수는 8로 나눌 수 있으며 이 숫자는 화면에 쉽게 들어맞습니다.

8씩 증분하여 6 포인트 시스템과 같은 변수로 바꿀 수도 있고, 10 포인트 시스템보다더 많은 양의 옵션을 제공합니다. "시스템"은 따라 하기 쉽고 반복하기 쉬운 경우에만 좋습니다.


8pt 시스템을 통해 얻을 수 있는 가치는 무엇인가?

- 디자이너 : 효율적인 시스템. 요소들끼리 퀄리티가 저해되지 않고, 디자인 리듬을 유지하면서 의사 결정을 최소화할 수 있습니다.
- 팀의 경우 : 디자이너와 개발자 간의 쉬운 의사소통 시스템 (픽셀 때문에 번거로울 필요가 없음). 개발자가 매번 측정하지 않고도 8pt 단위로 쉽게 생각할 수 있습니다.
- 사용자 : 일관된 느낌을 주어 신뢰할 수 있는 브랜드라는 느낌을 줄 수 있습니다. 또한, 원하는 장치에서 흐릿한 반 화소 오프셋이 없습니다.


어떻게 적용할 수 있나?

다음은 디자이너와 개발자를 위한 8pt 그리드 구현에 대한 몇 가지 기사입니다.

Bryn Jackson’s 8-Point Grid: 8pt 그리드의 정의에서 구현에 이르는 가장 포괄적인 가이드입니다.
Sketch Workflow — 8 point Soft Grids: 그의 Sketch를 이용한 워크플로우에 대한 글은 8pt 그리드 구현을 시작하기에 훌륭한 가이드입니다. 또한 그는 www.nudg.it의 제작자이기도 합니다.
Google Material Design — Metrics & keylines article: 8pt 그리드 구현에 대한 예와 설명을 위한 또 다른 훌륭한 자료입니다.
Intuit’s Harmony Design System은 반응형에 대한 좋은 설명서이기도 하면서 그리드의 기초, 픽셀 수를 왜 계산하는지를 설명합니다. 

https://medium.com/@_bklmn/8pt-gui-templates-ed8798badab3#.xybw016yz 8pt 매테리얼 디자인에 대한 템플릿과 가이드를 제공합니다.

 

이해 관계자들의 다양한 관점


쉽게 말해 아들이 그네를 만들어 달라고 가정한다면?

각 포지션에 따른 이해

공감갑니다.




이미지 출처 : http://www.wysiwygventures.com/how-projects-really-work/


 


 

 콘텐츠에 사용된 폰트 저작권 침해 문제

-폰트와 저작권-

 

박종률 법무법인 현 변호사∙변리사 

출처 : http://koreancontent.kr/1925 

 

 

디자이너들은 한번쯤 느껴봤을 폰트 사용에 있어서의 고민입니다.

 

 

다운로드 ▼

 

폰트파일에대한저작권바로알기(편집본)[1].pdf

 

 

 

 

--------------------------------------------------------------------------------------------------

 

폰트 사용에 대해 모든 디자이너가 한번쯤 고민했던 문제였던 것 같아

얼마전 제 페북에 내용이 좋아 공유했던 글을 블로그로 옮깁니다.

자주 들여다 보는 카페에서도 심심찮게 볼 수 있는 폰트 저작권 질문들에 조금은 도움이 될까 생각해봅니다.

 

--------------------------------------------------------------------------------------------------

 

 

이번 칼럼의 주제는 게임, 광고, 홈페이지 등의 콘텐츠에 사용되는 폰트의 저작권 침해 문제입니다.

 

 

과거 3~4년 전부터 폰트 저작권 보유 회사들이 몇몇 법무법인을 대리인으로 앞세워 내용증명을 발송하고 합의를 거부하는 업체들을 상대로 형사고소를 하는 사건들이 유행처럼 발생하여 왔습니다. 이 칼럼을 읽고 계신 분들께서도 이러한 폰트 저작권 침해에 관한 법적 문제를 직간접적으로 겪어보셨거나 지인을 통해 들어보셨을 것입니다. 다행스럽게도 폰트 저작권 보호에 대한 사회적 인식이 강화되었기 때문인지, 최근에 이르러서는 월말이나 분기말쯤 되어서야 비로소 기업체들로부터 폰트 저작권 문제에 관한 자문 의뢰가 들어올 정도로 그 빈도가 상당히 낮아지고 있는 추세입니다.

 

 

그런데, 자문 의뢰를 받은 기업체들의 사안을 들여다보면, 폰트 저작권 침해의 소지가 없음에도 불구하고, 법무법인이 이를 구분하지 아니하고 내용증명을 보낸 사안들이 간혹 있어왔습니다. 개인적으로는 해당 법무법인의 변호사가 저작권법의 법리를 몰랐다거나 아니면 이를 잘 알고 있음에도 불구하고 합의금을 받아 낼 목적으로 무차별적으로 내용증명을 보냈다고 생각하고 싶지는 않습니다. 아마도 그 법무법인은 직원을 통해 저작권 침해의 의심이 가는 업체들에게 기계적으로 내용증명을 발송하고 합의를 진행하는 등의 업무를 처리하다 보니, 그 법무법인의 변호사가 미처 사안을 정확하게 확인하지 못했을 가능성이 높습니다.

 

 

문제는 지식재산권 전문 변호사의 적절한 법률 조언을 받지 못하는 소규모 업체들이합의금 명목으로 XX원을 배상하지 아니하는 경우 민형사상 조치를 취하겠다는 취지의 내용증명을 받게 되면, 당황한 업체의 담당자들은 일단 인터넷 검색을 해보게 됩니다. 물론, 인터넷으로 검색된 자료들의 대부분은 폰트 저작권 침해에 해당하는 사례들로 넘쳐나고 있습니다. 그리고, 이러한 내용을 확인한 업체들은 자신들이 무조건 저작권 침해로 민형사상 책임을 져야 하는 것으로 오해를 하고 일단 합의를 하게 됩니다.

 

 

제가 이번 칼럼을 쓰게 된 목적은, 미력하나마 제 칼럼을 접한 업체들이 이후에 폰트 저작권 문제에 관한 내용증명을 받게 되더라도 자신의 법적 책임 여부를 잘못 판단하는 우를 범하게 되는 안타까운 사정을 막기 위함입니다.

 

 

먼저, 용어 및 기본 법리를 간략하게 정리해보겠습니다.

 

 

흔히 폰트(font) 또는 서체(글자체, typeface)라고 하는 폰트 도안(또는 서체 도안) 그 자체에는 예외적인 경우가 아닌 한 저작권이 인정되지 아니합니다. 그런데, 폰트 파일(file)은 일종의 컴퓨터프로그램에 해당하기 때문에, 폰트 파일에는 저작권이 인정되고 있습니다.

 

 

그리고, 소프트웨어를 무단 복제하는 행위가 저작권 침해행위에 해당하는 것과 마찬가지로, 폰트 파일을 인터넷을 통해 무단으로 다운로드하여 복제하거나 블로그에 올려서 배포, 전송하는 행위는 저작권 침해행위에 해당합니다. 여기까지는 저작권법에 대한 문외한이라도 간단한 인터넷 검색을 통해 쉽게 알아낼 수 있는 내용입니다.

 

 

그런데, 쟁점은 폰트 파일을 사용하여 만든 결과물이 저작권 침해물인지, 그 결과물을 사용하는 행위가 저작권 침해행위인지 여부에 있습니다. 게임 내에 표시되는 대화들, 광고물에 표시된 문구들, 홈페이지의 각종 문구들, 기업의 BI∙CI 이미지 등이 폰트 파일이 사용된 대표적인 결과물로 볼 수 있습니다.

 

 

그리고, 위 쟁점에 관한 결론을 살펴보기에 앞서서 저작권법의 내용을 확인해볼 필요가 있습니다. 저작권법은 허락 없이 저작물을 사용하는 행위를 모두 처벌하고 있지는 아니한다는 점이 중요합니다. 오히려, 저작권법은 복제, 배포, 공중송신 등의 태양을 열거하면서 저작권 침해행위를 한정하고 있습니다. 따라서, 폰트 파일을 사용하고 결과물을 만드는 행위 또는 그 결과물을 사용하는 행위가 저작권법에서 한정하고 있는 침해행위 중 하나에 해당하지 아니하면, 더 이상 저작권 침해의 문제는 발생하지 아니하는 것입니다.

 

 

그러나, 비용 등의 현실적인 문제로 인하여 지식재산권 전문 변호사의 적절한 법률 자문을 받지 못한 소규모 업체들로서는, 자신이 폰트 파일을 무단으로 사용했다는 사실이 확인되면 무조건 저작권 침해로 민형사상 책임을 부담해야 하는 것으로 오해를 하고 있습니다. 내용증명을 보내는 일부 법무법인에서도 굳이 이런 오해를 나서서 해명하고 있지 않기 때문에, 합의금을 받아낼 목적으로 이러한 오해를 이용하고 있다는 비난을 받기도 합니다.

 

 

위와 같은 문제점들은 이미 지식재산권 전문가들 사이에서 수 차례 문제 제기가 되어 왔고, 문화체육관광부와 한국저작권위원회 역시 자료(“폰트 파일에 대한 저작권 바로 알기”)를 통해 이 점을 지적하고 있는 바, 이하에서는 위 자료에서 제시된 대표적인 사례를 중심으로 살펴보겠습니다.

 

 

웹디자이너(A)가 의뢰인 회사(B)의 홈페이지를 제작하는 과정에서 무단으로 폰트 파일을 이용하였습니다. 그런데, 그 이용된 결과물이 이미지 형태로 홈페이지에 삽입되어 있다면, 의뢰인 회사(B)는 홈페이지를 통해 그 이미지를 사용하였더라도 폰트 파일에 대한 저작권을 침해하였다고 보기 힘듭니다. 폰트 파일을 기초로 제작된 이미지 자체 및 그 이미지의 사용행위가 저작권을 침해한 것은 아니기 때문입니다(, 이미지 자체 또는 그 이미지 사용행위는 저작권법에서 한정적으로 금지하고 있는 폰트 파일에 대한 복제, 공중송신 등의 행위에 해당되지 아니함). 이는 로고, 컨텐츠, 광고물 제작에 폰트 파일이 이용된 사례에도 마찬가지로 적용될 수 있습니다.

 

 

다만, 위와 같은 사례에 있어서 그 결과물이 폰트 파일 자체를 복제하거나 이용에 제공하게 된다면, 웹디자이너(A)는 물론 의뢰인 회사(B)에게도 저작권 침해의 문제가 발생하게 됩니다. 폰트 파일이 웹 폰트(web font) 형식으로 변환되어 홈페이지 서버에 저장되는 방식으로 홈페이지에 이용되는 경우가 그 대표적인 예입니다. 게임상에 표시되는 대화의 디스플레이 방식 역시 게임 내에 저장된 폰트 파일을 이용하는 형태가 많습니다.

 

 

그렇기 때문에, 의뢰인 회사(B)는 웹디자이너(A)와 계약을 체결하면서 계약서에 저작권 문제에 관한 면책 조항, 진술 및 보증 조항을 포함시키는 방식으로 법률 리스크를 상당 부분 감소시킬 수 있습니다. 하지만, 실무상 폰트 저작권 문제가 발생하게 되면 당사자 사이에 계약서가 없거나 있더라도 그 내용이 매우 미비한 경우가 대부분이기 때문에, 의뢰인 회사(B)는 저작권 리스크에 고스란히 노출되고 있다는 점이 안타까운 현실입니다.

 

 

마지막으로, 이미 폰트 저작권 문제는 수 년 전부터 일부 법무법인의 사업모델화 되었다는 소문이 들려올 정도인데, 어느 기사에 따르면 2011 36천여 건, 2012 45천여 건에 이를 정도로 관련 분쟁이 연 평균 30% 이상 급증하고 있다고 합니다. 안타까운 점은, 위와 같은 수치에 앞에서 살펴본 바와 같이 저작권 침해와 무관하나 지식재산권 전문 변호사의 적절한 조력을 받지 못하여 무조건 합의금을 지급하는 사례가 포함되어 있다는 것입니다.

 

 

나아가, 지면을 고려하여 본 칼럼에서는 생략하였지만, 폰트 파일을 둘러싼 분쟁에는 약방의 감초처럼 공정거래 이슈가 대두됩니다.

 

 

언론 보도에 따르면, 공정거래위원회는 2011년부터 일부 법무법인과 폰트 저작권 업체가 정품 소프트웨어를 판매하는 과정에서 불공정 거래행위 민원이 상당수 제기돼 저작권 업체와 법무법인들을 상대로 불공정 거래행위 여부를 조사해왔다고 합니다.

 

 

또한, “정품 SW 강매, 과도한 합의금 요구, 형사 고소 취하 조건으로 제품 강매 등은 저작권법에 근거해 규제할 수 없어 저작권 위반자에게 낱개가 아닌 고가의 패키지 상품을 구매토록 하는 강제구매 등 불공정행위 소지에 대해 공정거래위원회가 해법을 내놓을 예정이라는 2013년도 언론 보도도 접할 수 있으나, 그 이후에 어떠한 의미 있는 해법이 제시되었는지는 의문입니다.

 

 

저 역시 지식재산권을 전문분야로 하는 변호사로서 폰트 파일에 관한 저작권은 마땅히 보호받아야 함에는 전적으로 동의합니다. 다만, 사안을 불문하고 저작권 침해를 앞세워 합의를 강요하는 방식의 권리 행사에는 문제의 소지가 있기 때문에 이에 대응하는 적절한 대책이 필요합니다. 법무법인의 내용증명 앞에서 침묵할 수 밖에 없는 소규모 업체들이 바로 분쟁의 피해자가 될 수 있기 때문입니다.

 

 

끝으로, 내용증명을 받은 업체들로서도 내용증명을 받은 후 무조건 합의를 서두르지 말라고 조언하고 싶습니다. 지식재산권 전문 변호사의 자문에 따라 저작권 침해 여부를 확인하고 단계적으로 대응하는 것이 필요하고, 합의 절차 역시 상황에 따라서는 적절하게 통제되어야 합니다. 자신에게 적대적인 권리자의 주장이 과연 정당한 것인지 검증하지 아니한다는 것은 결국 스스로의 방어권을 포기하고 이용당하는 상황을 초래하게 되기 때문입니다.

 

 

 

 

포토샵 파일 포멧

 

 



Photoshop (PSD, PDD)
포토샵 파일의 고유포맷으로 새로 만든 이미지의 초기값 파일 포맷, 포토샵에서 지원하는 모든 모드에서 저장가능, 2.5 이후 버전부터 저장 과정중에 자동압축됩니다. 이미지의 복잡정도에 따라 자동으로 압축되며 이미지의 손상은 전혀 없습니다.

BMP (BMP, RLE, DIB)
DOS와 윈도우 호환용 컴퓨터를 위한 표준 윈도우 비트맵 이미지 포맷입니다. 저장시 나타나는 옵션 대화상자에서 IBM PC호환 기종의 시스템 운영체제에 따라 Microsoft Window나 OS/2포맷인지를 설정하고 이미지의 심도는 24비트까지 설정합니다. 인터넷을 하다가 웹에 있는 BMP 이미지를 저장 할 때 파일 이름을 xxx.jpg 로 바꿔주면 jpg 파일로 다운로드가 가능합니다. 단, 용량에는 차이가 없습니다.

Camera raw (TIF, CRW(캐논), NEF(니콘), RAF, ORF)
Camera raw 플러그인을 사용 해야하며 이 데이터는 카메라의 ccd나 cmos로부터 받은 비트를 포함하고있습니다. 포토샵에 있는 플러그인 Camera Raw로 변환하고 저장이 됩니다.

cineon (CIN, SDPX, DPX, FIDO)
코닥에 의해서 개발되었습니다. 이 채널당 10비트를 가지고있고 이 방식으로 저장을 하면 이미지 손상없이 원본 그대로 cineon 디지털 필름시스템에서 사용할수있습니다.

Compuserve GIF (GIF)
통신상의 전송속도를 향상시키기 위한 방안으로 개발되어 통신표준으로 자리잡게 되었습니다. 현재는 인터넷상의 이미지 포맷으로 많이 사용되고 있고 압축률은 좋은편이나 256컬러밖에 지원하지 않습니다. 투명한 영역을 만든 후 Save for Web 명령으로 RGB이미지를 GIF포멧으로 저장할 수 있도록 해줍니다. Bitmap, Grayscale, Indexed Color모드를 지원합니다.

Photoshop EPS (EPS)
Photoshop DCS1.0 (EPS)
Photoshop DCS2.0 (EPS)
EPS TIFF prewiew (EPS)

벡터이미지나 비트맵 이미지에서 사용할 수 있는 포맷으로 Illustrator, Pagemaker, QuarkXpress등의 편집프로그램으로 파일을 보낼 때 사용되는 포맷입니다. 전문 그래픽 출력장치를 위해 최적화된 파일 포맷으로 주용도는 4도 원색분판입니다.
Preview : 편집프로그램에서 보이는 이미지 보기
Encoding : 출력을 위한 데이터 전송 코드 이미지는 보통 바이너리(Binary)를 사용합니다.
Include Halftone Screen : 프린트할때 Page Setup 대화상자에서 설정한 도트게인 항목포함 여부 항목
PostScript Color Management : 포스트 스크립트 프린트나 출력기 사용시 이미지 색상을 자동으로 변환하지 않고 출력할 경우 사용
Include Vector Data : 벡터 데이타의 래스터화 여부 항목
Image Interpolation(보관법) : 인터폴레이션 사용 여부

Filmstrip (FLM)
Adobe Premiere에서 만들어진 애니메이션이나 무비에 사용되는 파일포맷입니다. 프리미어에서 만들어진 Filmstrip파일을 포토샵에서 받아들여 수정하거나 리터칭하여 다시 Filmstrip파일로 프리미어에 보낼 수 있는 포맷입니다.

JPEG (JPG, JPEG, JPE)
이 포맷은 1986년 ISO와 CCITT가 공동으로 만든 컬러 정지 화상의 국제표준 압축방식입니다. 이 파일의 가장 큰 장점은 그래픽 이미지를 저장했을 때 가장 큰 압축률을 자랑하며 256칼라의 GIF와는 달리 jpeg는 RGB 이미지를 그대로 보존합니다. 단, 약간의 이미지 손상은 있지만 파일의 크기가 작아야 하는 웹이나 온라인 서비스 상의 사진이나 이미지 등에 일반적으로 사용되는 포맷입니다.

Large document format (PSB)
포토샵과 이미지레디 사이를 변환합니다. 이미지레디의 장점은 웹을 위한 이미지작업입니다.만약 이미지레디에서 할 수 없는 작업이 있다면 포토샵에서 할수있습니다. 포토샵에서 작업한 파일은 PSD로 저장하는게 제일 좋지만 최대 활용가능한 사이즈는 2기가이고 그 이상으로 작업을 해야할때 PSB파일로 저장할수있습니다.

Generic PDF (PDE, PDP, AI)
Photoshop PDF (PDF, PDP)
Acrobat touchup image (PDF, AI, PDP)
문서 파일의 한 형태로, 화면으로 보거나 탐색하고 다른 사람과 주고 받기에 적합하게 만들어진 포멧입니다. 화면에 보이는 그대로 인쇄할 수 있으므로 출판에 적합합니다. 특히 인쇄 상태 그대로를 컴퓨터에서 보여주므로 전자책과 CD출판 등 디지털 출판에 적합합니다. 문서에 암호를 걸어 비밀을 보장하므로 공문서나 중요한 문서를 온라인으로 배달해도 안전하고 어도비사에서 무료로 배포하는 애크로뱃 리더를 다운로드받아 설치한 후 사용할 수 있습니다.

Generic EPS (AI3, AI4, AI5, AI6, AI7, AI)
AI파일은 벡터방식의 파일포맷입니다. 때문에 EPS는 원하는 해상도로 불러들일 수 있습니다.

PCX (PCX)
PCX포맷은 IBM페인트 프로그램으로 유명한 Zsoft사의 PC Paintbrush와의 파일교환을 위해 만들어진 포맷입니다.

Photo CD (PCD)
코닥 포토CD파일을 열 수 있습니다. 포토CD디스크로부터 높은 해상도를 불러들일 수 있습니다.

Photoshop RAW (RAW)
이미지 픽셀의 정보를 바이트의 열로 구성하여 시스템에 유동적으로 사용할 수 있는 파일 포맷입니다.

PICT file ( PCT, PICT)
매킨토시 표준 그래픽 포맷입니다. RGB이미지를 PICT포맷으로 저장 할 때 16비트나 32비트 컬러를 선택할 수 있고 32비트 설정시 JPEG 압축이 가능합니다.

Pixar ( PXR)
Pixar포맷은 pixar이미지 컴퓨터와 파일을 교환하기 위해 특별히 고안되었고 Pixar 워크스테이션은 3차원 이미지와 애니메이션을 위해 사용되는 고급 그래픽 응용프로그램을 위해 만들어졌습니다.

PNG ( PNG)
GIF와 마찬가지로 인터넷에서 이미지 파일로 사용하는 포맷으로 이미지를 점차적으로 보여주는 인터레이스 방식을 지원합니다. 이미지의 손상이 없고 압축률도 좋으며, 24비트의 이미지를 갖습니다.

Scitex CT ( SCT)
scitex사 컴퓨터와의 파일 교환을 위해 사용되는 포맷입니다.

Targa (TGA, VDA, ICB, VST)
Truevision사에서 제공하는 Targa와 Vista 비디오 보드를 사용하는 MS-DOS색상 응용 프로그램에 의해 지원됩니다.  TGA 포맷은 24비트 이상의 컬러는 물론 안티알리아싱이 적용된 32비트 컬러를 표현할 수 있는 막강한 기능을 제공합니다.

TIFF (TIF, TIFF)
매킨토시와 IBM PC, 워크스테이션 등 이미지 파일 저장용으로 많이 사용하고 거의 모든 그래픽 소프트웨어가 이 포맷을 지원합니다. 이미지의 손실이 없는 LZW, ZIP압축을 지원하고 투명영역을 보존합니다. 단 LZW는 채널을 보존하고 ZIP은 채널을 잃어버립니다. 월등한 압축률을 자랑하는 JPEG를 지원하지만 채널을 사용했을 경우에는 사용할 수 없습니다.

Wireless bitmap ( WBMP, WBM)
모바일 장비에 적합한 그래픽 형식. 이동 장비의 제한된 메모리를 사용하여 무선 응용 환경에 적합하도록 그래픽 정보를 표현하는 이미지 형식입니다. 이미지는 픽셀, 팔레트 구조, 압축, 애니메이션 등 부호화 정보를 가진 형태를 정의하는 필드에 의해 정해지며, JPEG, GIF, BMP 등의 이미지를 WBMP 이미지로 변환하기 위해서는 비트 깊이, 팔레트 사용 여부, 가비지값 유무 등을 고려하여 픽셀의 RGB 값과 명암 단계값을 계산하고, 이미지 배경과 물체의 명암 단계값 평균이 같아지도록 임계값을 결정합니다. 임계값이 결정되면 픽셀의 명암 단계값과 다시 비교하여, 명암 단계값이 작으면 검은색으로 표현하고 크면 흰색으로 표현한합니다.

all formats
저장방식에 상관없이 모든 확장자명의 파일을 보여줍니다. 위의 확장자명으로 지정해두면 해당확장자만 볼 수 있으나 all formats로 해두면 모든 파일을 볼수있습니다.

 

 

XHDPI

 

이미지는 360*530px로 되어 있으며 DP개념을 도입하여 최신 스마트폰에 맞춘 XHDPI의 화면 레이아웃을 구성한다.

 

[web]모바일 웹(APP) 디자인 가이드

 

안드로이드 기준으로 설명하고 있고 반드시 정해진 규칙에 따라야 하는 것은 아니나

    기본적인 가이드를 따르면 훨씬 보기 좋은 디자인을 만드는데 도움이 될 수 있다.

 

 

  • 기기 및 디스플레이
  1. 다양한 높이와 너비를 지원하기 위해 레이아웃을 유연하게 작업한다.
  2. 화면의 크기에 맞추어 레이아웃을 최적화 한다.
  3. 여러 종류의 화면해상도 리소스를 제공해야 한다.

 

 

 

  • 테마
  1. 일관적인 스타일을 적용할 수 있도록 안드로이드가 제공하는 3가지 시스템 테마                     (아이스크림 샌드위치)
  2. 3개의 테마를 기준으로 수정한 디자인(스타일) 적용 가능 

 

 

  • 터치 피드백
  1. 터치 및 제스처 결과를 강조하고 가능과 불가능 액션을 표시
  2. 다양한 상태를 알려주는 터치 피드백 디자인

 

  • 길이 및 격자
  1. 터치할 수 있는 UI는 48DP단위를 기준으로 한다. (약 9mm)
  2. 터치 스크린의 추천크기 7-10mm 손으로 원하는 행동 수행 가능
  3. 각 UI 요소간 공백은 8DP로 설정

 

 

  • 아이콘_런처
  1. 런처 아이콘의 크기는 48*48DP이며, XHDPI의 경우 96*96px로 제작한다.
  2. 구글 플레이에서 런처 아이콘은 512*512px이다.
  3. 사용자가 입체감을 느낄 수 있도록 정면의 약간 위에서 본 3D형태의 뚜렷한 실루엣을 사용한다.

 

  • 아이콘_액션 바
  1. 새로고침 같이 일반적으로 사용되는 아이콘은 이미 정의되어 지정된 아이콘을 사용한다.         (개발자 사이트에서 다운로드 가능)

 

 

  1. 액션바 아이콘영역은 32*32DP 이며 표시영역은 24*24DP이다.

 

 

  1. 뚜렷한 형태로 평면적이고 단순한 형태로 만들고 긴 형태는 45도 회전한다.

 

 

 

  • 아이콘_작은 아이콘, 컨텍스트 아이콘
  1. 작은 아이콘영역은 16*16DP 이며 표시영역은 12*12DP이다.

 

 

  1. 평면적이고 단순한 형태로 만들고 긴 형태는 45도 회전한다.

 

 

  1. 배경에 잘 대조되는 색을 사용하고 색을 통하여 구분한다

 

 

  • 아이콘_알림
  1. 알림 아이콘영역은 24*24DP 이며 표시영역은 22*22DP이다.
  2. 평면적이고 단순한 형태로 만들고 긴 형태는 45도 회전한다.
  3. 알림 아이콘은 반드시 전체가 흰색으로 되어야 한다. 시스템에서 아이콘을 어둡게 하거나 축소한다.

 

 

 

 

 

+ Recent posts