비전공자들을 위한 디자인 상식

비전공자들을 위한 디자인 상식
디자인 툴과 이미지 편

포토샵? JPEG? RGB?
그게 도대체 뭐야?

로고 디자인을 의뢰하려는데 무엇을, 어떻게 요구해야 할지 몰라 곤란한 경험이 있지는 않으셨나요?
디자이너들에게는 익숙하고 매일 접하는 용어들이 클라이언트에게는 다소 생소하게 느껴지는 순간들이 종종 있습니다. 디자이너가 사용하는 툴들의 차이점은 무엇이고, 파일 포맷은 어떤 게 있는지. 이번 글에서는 디자인 작업 시에 비전공자들이 접할 수 있는 각종 용어들을 소개해봅니다.

1. 디자이너의 영원한 친구, Adobe

이제는 고유명사가 되어버린 포토샵을 비롯해, 일러스트레이터, 인디자인 등등 수많은 Adobe 프로그램들은 디자이너라면 누구나 사용하는 툴이지만, 비전공자들에게는 어떤 프로그램이 무엇을 위한 것인지 헷갈릴 수도 있습니다. 디자이너들이 일반적으로 가장 많이 활용하는 Adobe 툴들의 각 목적과, 장단점에 대해 알아봅시다.

포토샵(Photoshop)

디지털 드로잉과 사진 보정 및 합성 등, 광범위한 이미지 제작을 위한 툴

장점: 색감 보정, 필터 효과, 이미지 왜곡 등, 벡터 기반의 프로그램들이 지원하지 않는 다양한 기능이 있어 원하는 이미지를 쉽게 제작할 수 있습니다. (Adobe 소프트웨어 중에는 전문 포토그래피 보정 툴인 Lightroom도 있습니다.)
단점: 비트맵 기반이기 때문에 로고와 같이 여러 사이즈로 사이즈 조정(scaling)이 필요한 디자인 작업에는 적합하지 않습니다.
확장자: *.psd

일러스트레이터(Illustrator)

로고, 포스터, 패키징 등 다양한 디자인 작업을 위한 툴

장점: 벡터 기반의 프로그램으로 이미지를 확대하거나 축소해도 포토샵과 같은 픽셀화 현상이 일어나지 않기 때문에 자유자재로 그래픽을 확대 혹은 축소할 수 있습니다.
단점: 디자인에 활용되는 이미지를 보정하기에는 기능이 한정적이며 삽입되는 이미지가 많아질수록 파일 용량이 급격하게 커지고 느려지기 때문에, 이미지가 많이 삽입되는 편집물에는 적합하지 않습니다.
확장자: *.ai

인디자인(InDesign)

편집 디자인을 위한 툴

장점: 잡지, 책과 같은 편집물에 특화된 툴로 일러스트레이터와 같은 벡터 기반 프로그램이지만, 일러스트레이터에서는 제공하지 않는 칼럼 생성, 페이지 수 표시 등등 편집 디자인에 필요한 수많은 기능을 포함합니다. 또한 일러스트레이터보다 비교적 가벼워 많은 이미지를 삽입해도 버벅거림이 적습니다.
단점: 그래픽 요소들을 인디자인 내에서 작업하기에는 기능이 한정적이라 일러스트레이터와 함께 작업을 해야 효율을 높일 수 있습니다.
확장자: *.indd (cs4 이후 인디자인 파일은 *. idml를 사용)

애프터 이펙트(After Effects)

모션그래픽을 비롯한 영상 제작을 위한 툴

장점: 그래픽 요소들에 모션을 주는 것과 같이 일반적인 영상 편집 툴에서는 할 수 없는 영상 제작을 위한 툴입니다. 일러스트와 포토샵을 불러와 이미지와 그래픽 요소에 모션을 줄 수 있으며, Cinema 4D를 이용하여 3D 요소 또한 삽입할 수 있습니다.
단점: 다양한 이미지와 그래픽 요소가 영상에 들어가게 되면 렌더링에 문제가 생겨, 다른 툴들에 비해 높은 사양의 컴퓨터를 요구합니다.
확장자: *.aep

프리미어 프로(Premiere Pro)

컷 편집, 영상 보정을 위한 툴

장점: 간단한 영상 보정 및 빠른 컷 편집을 위한 수많은 기능들로 구성되어 있어 별다른 디자인 경험 없이도 쉽게 영상 제작을 할 수 있습니다.
단점: 애프터 이펙트와 같이 다양한 그래픽 요소를 다루기에는 기능들이 매우 한정적입니다.
확장자: *.prproj

2. RGB vs. CMYK

이미지의 컬러 모드 (Color Mode)

모니터에서 본 색상 하고 인쇄할 때의 색상이 달라 당황하신 적이 있나요? 이미지의 컬러 모드를 이해하면 이런 현상이 왜 발생하는지 알 수 있습니다. 이미지를 어떤 상황에 사용할지를 고려하고 디자이너에게 작업 요청을 하면 예상치 못한 상황을 방지할 수 있습니다.

RGB(Red, Green, Blue)

RGB는 빛의 삼원색인 Red, Green, Blue를 합성하여 색을 만드는 이미지 모드입니다.

장점: 색을 합성할수록 밝아지는 RGB의 특성상, 디지털 환경에서 매우 선명한 이미지를 제작할 수 있습니다.
단점: 인쇄 시에는 빛을 합성하는 것이 아닌, 잉크를 사용하기 때문에 모니터에서 보이는 선명한 색상을 인쇄할 수 없다는 치명적인 단점이 있습니다. 이를 방지하기 위해 Pantone Color와 같이 별색을 지정해 특수 잉크로 인쇄하여 여러 환경에서도 같은 색을 유지할 수 있습니다.

CMYK(Cyan, Magenta, Yellow, Black)

CMYK는 Cyan, Magenta, Yellow, Black 색의 잉크를 섞어 색을 만드는 이미지 모드입니다.

장점: 실제 출력되는 인쇄물과 가장 근접한 색을 볼 수 있다는 것이 장점입니다.
단점: RGB와 비교하여 색이 다소 탁하게 표현되는 것이 단점이며, 형광색처럼 CMYK로 표현할 수 없는 밝은 색상들은 인쇄할 수 없습니다.

+추가 정보

컬러는 브랜드 아이덴티티 구축에 있어 가장 중요한 부분임으로 어떠한 환경에서도 일관된 색상을 유지하는 것이 중요합니다. 이를 위해 별색(spot color)을 지정하여 브랜드 컬러를 관리하곤 합니다.
어떤 색상을 사용해야 할지 고민되신다면 컬러 커뮤니케이션 회사, Pantone 사이트에서 RGB 값과 CMYK값를 입력하여 가장 유사한 별색을 검색할 수 있습니다.

3. 이미지의 화질을 결정하다.
해상도 (Resolution)

디자인을 작업을 하고 이미지를 내보낼 때, 이미지의 크기와 더불어 중요한 요소가 하나 있다면, 바로 이미지의 해상도입니다. 해상도는 이미지의 파일 크기와 화질에 큰 영향을 끼치기 때문에 디자이너에게 이미지 작업을 요청할 때 명시해주면 좋습니다.

DPI vs PPI

이미지의 해상도를 결정하는 단위에는 크게 DPI와 PPI가 있습니다.
DPI(Dots per Inch)는 실제 크기 1인치 당 점이 몇 개 들어가는 가를 나타내며, PPI(Pixel Per Inch)는 1인치당 몇 개의 픽셀이 들어가는지를 나타냅니다. 두 단위 모두 단위길이당 찍힌 점의 개수라는 점에서 맥락은 같지만 PPI는 Display unit으로, DPI는 Printing Unit으로 사용됩니다. DPI가 높아지면 인쇄 시에 보다 "선명한 이미지" 출력이 가능하고, PPI가 높아지면 한 공간에 표현할 수 있는 데이터의 양이 많아져 "세밀한 표현"이 가능해집니다.

권장하는 상황별 해상도

인쇄물: 300 DPI(PPI)
인쇄물에서는 사이즈가 지정되어 있기 때문에 해상도가 결정되어 있는 디지털 환경과 달리 DPI값이 높을수록 선명한 이미지를 출력할 수 있습니다. 일반적인 이미지는 150 DPI, 전문적인 이미지 출력을 위해서는 300 DPI로 이미지를 내보내는 것을 권장합니다. 이보다 해상도가 높아질 경우에는 프린터가 이미지를 처리하는 시간이 길어질 수 있습니다.

웹: 72 DPI(PPI)
웹 환경에서는 인쇄물만큼의 높은 DPI를 요구하지 않는데, 이는 해상도가 정해져 있는 모니터에서 높은 해상도는 큰 의미가 없고 큰 파일 용량은 페이지 로딩 속도를 지연시키기 때문입니다. 초기 모니터들의 해상도가 72 DPI였기 때문에 아직 이 값을 웹 이미지 해상도의 표준으로 많이 사용하고 있습니다.

4. 이미지의 종류,
확장자 (​File Extension)

이미지에는 수많은 확장자가 있으며 각 파일 유형마다 파일의 크기와, 화질, 색상 표현, 압축방식, 호환성이 다르기 때문에 이미지를 저장하기 위해 반드시 알아야 할 정보입니다. 가장 많이 활용되는 5가지의 이미지 확장자를 살펴보면서 각 확장자들의 장점은 무엇인지, 단점은 무엇인지 알아봅시다.

JPEG (*.jpeg, *.jpg)

장점: RGB와 CMYK를 둘 다 지원하며 이미지 제작자가 쉽게 파일의 크기와 화질을 쉽게 조절할 수 있어 가장 많이 활용되는 이미지 확장자 중 하나입니다.
단점: 투명 이미지를 지원하지 않으며, 압축률을 높일수록 이미지 화질이 손상된다는 단점이 있습니다.

PNG (*.jpeg, *.jpg)

장점: 비손실 압축방식으로 이미지의 화질 손상 없이 파일의 크기를 줄여줍니다. 이미지의 모든 컬러 정보를 보존하기 때문에 디자인 작업에 용이하며, 이미지에 문자나 날카로운 경계가 있는 경우에 JPEG보다 선명하다는 장점이 있어 특히 웹에서 많이 활용됩니다.
단점: GIF 같은 애니메이션을 지원하지 않고, JPEG와 GIF보다 용량이 큽니다.

GIF (*.gif)

장점: 하나의 파일에 여러 비트맵을 저장하여 다중 애니메이션을 구현할 수 있어 짧은 영상 대신 많이 활용되기도 합니다.
단점: 8비트 256색으로 제한돼 다른 확장자들과 비교하여 표현할 수 있는 색이 매우 한정적입니다.

TIFF (*.tiff, *.tif)

장점: 어도비와 MS가 동시 개발하여 운영체제 상관없이 사용하기 용이한 확장자입니다. 여러 컬러 모드를 저장할 수 있고, 레이어 정보를 보존하기 때문에 Photoshop을 TIFF로 저장하면 다시 Photoshop으로 열어 레이어를 수정할 수 있습니다.
단점: 이미지에 많은 정보가 살아있는 만큼, 다른 확장자에 비해 용량이 매우 큽니다.

SVG (*.svg)

장점: 래스터화 된 다른 이미지 확장자와 달리 벡터 기반인 SVG는 이미지의 손상 없이 크기를 마음대로 조절할 수 있으며, 코딩을 통해 이미지를 수정할 수 있다는 강력한 장점이 있습니다. 로고 작업의 경우, SVG를 사용하면 매번 다양한 사이즈의 이미지를 내보내지 않고 하나의 파일로 대응할 수 있습니다. (SGV를 활용해 브랜드 가이드를 구축한 예시: https://standards.site/)
단점: 몇몇 구형 웹브라우저에서 SVG를 지원하지 않는 경우가 있으며, 비트맵 이미지를 지원하지 않는다는 치명적인 한계가 있습니다.