기획자와 디자이너, 개발자 간의 협업을 원활하게 하기 위한 미니 세미나 자료.

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

3. RGB
필
CMYK 그레디언트
트랜스폼 스트로크 벨런스 JPEG
언두
딤 처리 오피
클리핑 가이드
페이지 오퍼시티
패턴
픽셀 해상도 스프라이트
레이어
GIF
멀쥐
콘트라스트 심볼 랩
그리드
그룹
트랜스페어런씨
BG 오브젝트
마스크
인벌트
샤픈 퍼지
블러
크롭 트림 리두
인벌스 블랜드 패쓰
PNG

4. RGB
필
CMYK 그레디언트
트랜스폼 스트로크 벨런스 JPEG
언두
딤 처리 오피
클리핑 가이드
페이지 오퍼시티
패턴
픽셀 해상도 스프라이트
레이어
GIF
멀쥐
콘트라스트 심볼 랩
그리드
그룹
트랜스페어런씨
BG 오브젝트
마스크
인벌트
샤픈 퍼지
블러
크롭 트림 리두
인벌스 블랜드 패쓰
PNG

5. 기쁘군요..
우리가 소통할 수 있으니...
오늘은 기분 좋은 날이오~

6. RGB Mode CMY
vs
?

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

8. 콘트라스트
Contrast
?

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

10. 크롭 vs 트림
Cut
?

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

12. 블러Focing샤픈
vs
?

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

14. 인벌스 vs 인벌트
inversion
?

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

16. 멀지 vs 플래튼
Combine
?

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

18. 누끼
抜き
?

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

20. 패쓰
Path
?

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

22. 오브젝트
Object
?

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

24. 심볼
Symbol ?

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

26. 컴포넌트
Components
?

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

28. 레이어
Layers
?

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

30. 딤 Dim
처리
?

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

32. 그룹
Group
?

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

34. 페이지
Pages
?

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

36. 오퍼시티
Opacity
?

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

38. 트랜스페어런시
Transparency
?

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

40. PNG vs GIF
Format
?

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

42. 마스크
Mask
?

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

44. BG
Backgrounds
?

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

46. FG
foregrounds
?

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

48. 픽셀
Pixel
?

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

50. 픽셀 종횡비
Pixel Aspect Ratio
?

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

52. 앤티에일리어싱
anti-aliasing
?

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

54. DPI vs PPI
Resolution
?

55. DPI란? <1인치 안에 포함되는 점의 개수>를 의미
합니다. 반면 PPI란? <1인치 안에 포함되는 픽셀
의 개수>를 말하죠. 점과 픽셀은 같지 않기 때문에
DPI와 PPI 역시 다릅니다. 스크린의 경우는 픽셀
이 사용되기 때문에 프린트의 점과는 해상도가 다
DPI vs PPI
릅니다.
Resolution
RGB 색상 정보 = 1pixel
CMYK중, C 색상 = 1dot
CMYK중, M 색상 = 1dot
CMYK중, Y 색상 = 1dot
CMYK중, K 색상 = 1dot
1,440DPI = 1440/4 = 360 PPI

56. Apple기기는 PPI로 사용하여 화면 해상도를
처리합니다.
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

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

58. ANDROID DPI
160 density (mdpi) 320x480
240 density (hdpi) 480x800
DP Density-independent Pixels
SP Scale-independent Pixels (글자에 활용)
dp = px / 3 * 2 480px / 3 * 2 = 320dp
160 240

59. 처음에 hdpi로 제작을 했다면,
ldpi는 50% 축소
mdpi는 66.7% 축소,
xhdpi는 133% 확대(또는 mdpi를 200% 확대)

61. 스프라이트
Sprites
?

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

63. http://bitly.com/SvK2I7