63

KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

  • Upload
    kth-

  • View
    1.097

  • Download
    5

Embed Size (px)

Citation preview

Page 1: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
Page 2: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

1D, 그들만의 언어. 알고 보면 쉽습니다.

Page 3: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

트랜스페어런씨

페이지

마스크

클리핑

블러 샤픈

패턴

심볼

언두

리두

멀쥐

스트로크

트랜스폼

퍼지

그레디언트벨런스RGB

레이어콘트라스트 오브젝트

오피 해상도딤 처리

스프라이트

가이드

그리드

패쓰

그룹

크롭 트림

픽셀

BG

오퍼시티

블랜드인벌스

인벌트

CMYK

PNG

GIF

JPEG

Page 4: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

트랜스페어런씨

페이지

마스크

클리핑

블러 샤픈

패턴

심볼

언두

리두

멀쥐

스트로크

트랜스폼

퍼지

그레디언트벨런스RGB

레이어콘트라스트 오브젝트

오피 해상도딤 처리

스프라이트

가이드

그리드

패쓰

그룹

크롭 트림

픽셀

BG

오퍼시티

블랜드인벌스

인벌트

CMYK

PNG

GIF

JPEG

Page 5: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

기쁘군요..우리가 소통할 수 있으니...

오늘은 기분 좋은 날이오~

Page 6: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

RGB vs CMYMode ?

Page 7: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

RGB란? <빛의 3원색>을 의미하며, CMY는 염료의 3원색입니다. 프린트 상에서는 CMYK라고 하는데 이 때 K는 검정(blacK)을 말합니다. 이론 상으로는 C+M+Y 3원색을 섞으면 검정 색이 나와야 하지만, 실제 그렇지 못하기 때문에 K 염료가 따로 있습니다. RGB보다 CMY의 색 표현력이 떨어지기 때문에 출력 시 색이 탁 하게 나옵니다. RGB vs CMY

Mode

Page 8: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

콘트라스트Contrast ?

Page 9: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

콘트라스트는 <대비, 차이>를 말합니다. 색상/명도/채도/형태 등 대비는 자주 사용되는 디자인 요소입니다.

콘트라스트Contrast

Page 10: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

크롭 vs 트림Cut ?

Page 11: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

크롭은 <불필요한 부분을 잘라낸다>는 의미입니다. 디자이너는 크롭을 이용하여 이미지의 불필요한 부분을 잘라낼 수 있습니다. 트림 역시 잘라낸다는 것에서 크롭과 같지만, 가장 자리를 잘라내는데 사용한다는 점에서 크롭과 다릅니다.

크롭 vs 트림Cut

Page 12: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

블러 vs 샤픈Focing ?

Page 13: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

블러는 <희미한 형체>를 말합니다. 디자이너는 블러 효과를 이용하여 사물을 희미하게 만들 수 있습니다. 샤픈은 블러와 반대로 형체를 뚜렷하게 만들어 주는 것을 말합니다. 인물 사진의 경우, 뚜렷한 인상을 만들기 위해 눈, 코, 입에 샤픈을 주기도 합니다.

블러 vs 샤픈Focing

Page 14: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

인벌스 vs 인벌트inversion ?

Page 15: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

인벌트와 인벌스는 <뒤집다, 거꾸로 하다>로 같은 의미를 지닌 용어들입니다. 하지만 디자이너에게 있어 인벌트와 인벌스는 사용 용도가 다릅니다. 인벌트는 반전 효과로, 인벌스는 선택 영역을 뒤집는 것을 이야기합니다.

인벌스 vs 인벌트inversion

Page 16: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

멀지 vs 플래튼Combine ?

Page 17: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

멀지는 <합병하다, 합치다> 의미이며 디자인에서는 레이어를 합칠 때 이 용어를 사용합니다. 플래튼 이미지 역시 비슷한 역할을 하지만, 플래튼은 평평하게 하다 라는 의미로 한 장으로 만들어 준다는 점에서 멀지와 차이점이 있습니다.

멀지 vs 플래튼Combine

Page 18: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

?누끼抜き

Page 19: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

누끼란? 일본어로 <제거>라는 뜻을 의미합니다. 이미지를 합성하기 좋게 오려내는 것을 말하죠.일반적으로 누끼는 노가다로 통합니다.

누끼抜き

Page 20: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

패쓰Path ?

Page 21: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

패쓰란? <만들어 생긴 작은 길>을 말합니다. 개발자는 <경로>로 알고 사용하지만, 디자이너에게 패쓰는 펜 툴로 딴 오브젝트를 말합니다.

패쓰Path

Page 22: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

오브젝트Object ?

Page 23: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

오브젝트란? <객체>를 말합니다. 우리 주변에서 찾아볼 수 있는 모든 것들은 모두 객체입니다. 개발자가 이야기 하는 객체가 프로그래밍을 위한 모듈의 집합이라면, 디자이너가 이야기 하는 객체는 심볼/컴포넌트에 가깝습니다.

오브젝트Object

Page 24: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

심볼Symbol ?

Page 25: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

심볼은 <상징물> 등의 뜻을 가지고 있지만, 그래픽 디자인에서 심볼은 재사용 가능한 그래픽 오브젝트를 말합니다.

심볼Symbol

Page 26: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

컴포넌트Components ?

Page 27: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

컴포넌트란? <요소를 구성하는 요소>로 패턴을 토대로 실제 사용되는 구성품이라고 볼 수 있습니다. 디자이너는 라이브러리에 패턴을 만들어 놓고 컴포넌트를 끌어 사용합니다.

컴포넌트Components

컴포넌트

패턴 라이브러리

Page 28: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

레이어Layers ?

Page 29: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

레이어란? <투명한 막>으로 투명한 시트지라고 볼 수 있습니다. 디자이너는 다수의 레이어를 겹쳐 합성물을 만들어 냅니다. 웹 어플리케이션에서는 화면 위에 떠있는 오브젝트를 레이어라고 부르기도 합니다.

레이어Layers

Page 30: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

딤 처리Dim ?

Page 31: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

딤이란? <어둑한, 흐릿한>등의 의미로 화면을 흐릿하게 하거나, 어둑하게 하는 것을 말합니다. 웹 어플리케이션에서 화면을 뿌옇게 처리하고 레이어를 띄울 때, 딤 처리 또는 딤드(dimmed) 한다고 이야기 합니다.

딤 처리Dim

Page 32: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

그룹Group ?

Page 33: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

그룹이란? <한데 묶은 무리>를 의미합니다. 디자이너에게 그룹은 레이어를 묶은 폴더를 말합니다. 보다 정확히는 레이어 그룹이라고 해야 맡겠지만, 일반적으로 생략하여 그룹이라 부르는 것이죠.

그룹Group

Page 34: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

페이지Pages ?

Page 35: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

페이지란? <낱장의 종이>를 의미하며 책의 경우 와 유사하지만, 웹 어플리케이션에서는 사용자가 보는 각각의 화면을 가리킵니다.

페이지Pages

Page 36: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

오퍼시티Opacity ?

Page 37: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

오퍼시티란? <불투명도>를 의미하며 투명한 정도라고 이해할 수 있습니다. 오피라고도 부르는 경우도 있지만, 정확한 용어는 오퍼시티입니다. 디자인 결과물 합성 시 자주 사용합니다. 개발자 단에서는 0-1 사이의 실수를 사용하지만, 디자이너는 0-100% 단위를 사용합니다.

오퍼시티Opacity

Page 38: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

트랜스페어런시Transparency ?

Page 39: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

트랜스페어런시란? <투명한>을 의미하며 배경을 투명하게로 이해할 수 있습니다. 트랜스페어런트(Transparent)로 사용되기도 하며, 둘은 같은 의미라고 보면 됩니다. 주로 PNG, GIF 이미지 처리시 사용되는 용어입니다.

트랜스페어런시Transparency

Page 40: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

PNG vs GIFFormat ?

Page 41: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

PNG는 JPEG, GIF와 함께 웹에서 자주 사용되는 그래픽 이미지 포멧입니다. 손실 압축 방식인 JPEG와 비교하여 비 손실 압축 방식이 적용되기 때문에 텍스트가 포함된 이미지 저장 시, 텍스트를 보다 깔끔하게 표현해주는 장점이 있습니다. GIF와 비교하면 압축률이 높고, 8비트 알파 채널을 지원하기 때문에 보다 깔끔하게 투명 영역을 그려주는 장점이 있습니다. 색상 표현력도 좋고요.

PNG vs GIFFormat

Page 42: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

마스크Mask ?

Page 43: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

마스크란? <가린다> 의미로 오브젝트의 일부를 감추는 것을 말합니다. 디자이너는 이를 마스킹한다고 부르는데 크게 2가지 마스킹이 있습니다. 레이어 마스크, 클리핑 마스크이며, 그리고 마스크는 래스터(비트맵), 벡터 마스크로 하위 분류됩니다.

마스크Mask

Page 44: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

BGBackgrounds ?

Page 45: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

BG란? <배경>을 의미하는 축약어 입니다. 디자이너는 배경과 관련된 것을 BG라 줄여 이야기 하는 성향이 있습니다.

BGBackgrounds

배경 색

Page 46: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

FGforegrounds ?

Page 47: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

FG란? <전경>을 의미하는 축약어 입니다. 전경과 관련된 것을 FG라 줄여 이야기 하지만 국내 디자이너는 이 용어를 자주 사용하지는 않습니다.

FGforegrounds

전경 색

Page 48: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

?픽셀Pixel

Page 49: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

픽셀이란? <화면을 구성하는 최소 단위>을 의미합니다. 픽셀은 위치 좌표 값 뿐만 아니라, 색상 정보까지 가지고 있다는 점에서 점(dot)과 다릅니다.

픽셀Pixel

Page 50: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

?픽셀 종횡비Pixel Aspect Ratio

Page 51: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

픽셀 에스펙트 레이시오란? <픽셀의 가로/세로 비율>을 의미합니다. 매체의 포멧에 따라 이는 다릅니다. 웹의 경우는 정 사각형, 영상의 경우는 포멧에 따라 비율이 달라집니다.

픽셀 종횡비Pixel Aspect Ratio

1:1 0.91:1 1.09:1

Page 52: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

?앤티에일리어싱anti-aliasing

Page 53: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

앤티에일리어싱이란? <비트맵 방식의 이미지 처리 시, 거친 현상을 줄이기 위해 주변 색을 유사한 색으로 매끄럽게 처리>하는 것을 의미합니다.

앤티에일리어싱anti-aliasing

Page 54: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

DPI vs PPIResolution ?

Page 55: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

DPI란? <1인치 안에 포함되는 점의 개수>를 의미합니다. 반면 PPI란? <1인치 안에 포함되는 픽셀의 개수>를 말하죠. 점과 픽셀은 같지 않기 때문에 DPI와 PPI 역시 다릅니다. 스크린의 경우는 픽셀이 사용되기 때문에 프린트의 점과는 해상도가 다릅니다.

DPI vs PPIResolution

RGB 색상 정보 = 1pixelCMYK중, C 색상 = 1dotCMYK중, M 색상 = 1dotCMYK중, Y 색상 = 1dotCMYK중, K 색상 = 1dot

1,440DPI = 1440/4 = 360 PPI

Page 56: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

Device Resolution PPI Aspect Ratio

iPhone 3GS 320 x 480 163 ppi 3:2

iPhone 4/4S 640 x 960 326 ppi 3:2

iPhone 5 640 x 1136 326 ppi 16:9

iPad 1/2 768 x 1024 132 ppi 4:3

iPad New 1536 x 2048 264 ppi 4:3

iPad Mini 768 x 1024 163 ppi 4:3

Apple기기는 PPI로 사용하여 화면 해상도를 처리합니다.

Page 57: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

Android에서는 밀도(Density)로 화면 해상도를 처리하며, mdpi, hdpi가 주류를 이룹니다.

Page 58: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

ANDROID DPI160 density (mdpi) 320x480240 density (hdpi) 480x800

DP Density-independent PixelsSP Scale-independent Pixels (글자에 활용)

dp = px / 3 * 2

160 240

480px / 3 * 2 = 320dp

Page 61: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

스프라이트Sprites ?

Page 62: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

스프라이트Sprites

스프라이트는 <쪽 화면> 이라는 뜻으로 여러 장으로 쪼개진 이미지를 한 장의 이미지 판으로 만들어주는 것을 말합니다.

Page 63: KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈

http://bitly.com/SvK2I7