[0228_본캠프 9일차]

✔️ 4주차 내용 복습 및 정리

 

1. 디자인 툴 & 종류

일반적으로 디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램

 

 

 

<인터페이스 디자인 툴>

 

• 디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴
• 피그마, 스케치, XD

📌 인터페이스 디자인 툴은 주로 벡터 방식을 기반

인터페이스 디자인은 다양한 디바이스 화면에 대응해야 할 때가 많다.
디자인한 화면을 여러 크기로 늘리고 줄여도 문제가 없도록 하기 위한 목적

 

 

 

<그래픽 디자인 툴>

 

• 비주얼 그래픽 이미지를 만들 때 사용하는 툴
• 주로 사진을 편집하거나 일러스트를 그려서 원하는 이미지 제작
• 포토샵, 일러스트레이터

 

 

<3D 그래픽 디자인 툴>

 

• 3차원의 그래픽을 만들 때 사용하는 툴
• 시네마 4D, 블렌더

 

 

<3D 그래픽 디자인 툴>

 

• 그래픽 리소스를 활용해서 영상을 만들거나 촬영한 영상을 편집할 때 사용하는 툴
• 프리미어, 애프터이펙트

 

 

 

2. 비트맵과 벡터

 

<비트맵 이미지>

• 비트 정보를 가진 픽셀이 모여 만들어진 이미지
• 카메라로 찍은 사진이나 컴퓨터상에서 주고받는 이미지의 대부분
• 대표적인 비트맵 이미지 파일 확장자 : .jpeg, .jpg, .png, .gif

☑️  비트맵 이미지의 장점
• 픽셀 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교하게 이미지를 표현

☑️ 비트맵 이미지의 단점
• 이미지 안의 픽셀 수가 많을수록 품질이 좋아지지만, 용량도 함께 커짐
• 이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상이 생김

 

 

 

<벡터 이미지>

• 그래픽을 수학적인 함수 공식으로 표현한 것
• 점과 점을 연결해 선을 만들고, 선과 선을 연결해 면을 만드는 방식으로 이미지를 그림
• 대표적인 벡터 이미지 파일 확장자 : .svg, .eps, .ai

☑️  벡터 이미지의 장점
• 벡터 이미지는 좌표계(x.y)의 점으로 표현하는 것이기 때문에 이미지를 줄이거나 키워도 손상이 생기지 않음
• 좌표가 적힌 텍스트 파일로 저장되기 때문에 비트맵과 비교해 용량이 매우 적음

☑️ 벡터 이미지의 단점
• 색 표현에 한계가 있어 사진 같은 이미지 그래픽의 섬세한 작업은 어려움
• 그래픽의 모양을 좌표로 저장하기 때문에 복잡한 이미지를 벡터로 만들면 파일 용량이 매우 커질 수 있음
• 사용하는 곳에 따라 호환성에 문제가 생길 수도 있음

 

 

 

3. 피그마, 스케치 그리고 XD

📌 피그마, 스케치, XD의 주요 공통 기능

• 벡터 기반
• 그래픽 편집 간단한 Lo-fi 프로토타이핑
• dev mode를 통한 그래픽 → 코드 변환

 

 

 

4. 피그마 프로토타이핑, 프로토파이, 프레이머

 

<피그마 프로토타이핑>

피그마로 만든 화면을 가지고 간단하게 인터렉션을 만들어볼 수 있다

 

• 화면을 피그마로 디자인했다면 파일을 내보내거나 불러오는 과정 없이 간편하게 프로토타입을 만들 수 있는 것이 큰 장점
• 하지만 실제 데이터를 넣거나 복잡한 애니메이션은 피그마 프로토타이핑 기능으로는 구현하기가 어려움

☑️ 피그마 프로토타이핑의 특징

•  디자인 → 프로토타이핑으로의 빠른 전환
•  간편한 경로 연결

 

 

 

<프로토파이>

코딩 없이 실제 제품과 비슷한 수준의 프로토타입을 만들 수 있다는 것이 큰 장점

 

• 실제 코드로 개발하는 제품과 거의 유사한 수준의 인터랙션을 구현
• 눈에 보이는 GUI를 클릭해서 작업할 수 있어 코드가 어려운 디자이너도 편리하게 사용

☑️ 프로토파이의 특징

• Hi-fi 수준의 기능
• Conditions (조건부 트리거)

 

 

 

<프레이머>

코드 기반으로 실제 제품과 가장 유사한 수준으로 프로토타입을 만들 수 있다

 

• 프레이머는 Hi-fi 프로토타입으로 코드 기반의 툴
• 인터페이스 디자인 툴의 기능도 함께 제공해서 디자인부터 프로토타이핑까지 한 번에 할 수 있음
• 만든 프로토타이핑을 실제 제품으로 배포까지 가능

☑️ 프레이머의 특징

• 재사용성
• CMS

 

---

오늘은 디자이너가 사용하는 툴에 대해서 배웠다. 기존에 알고 있었던 툴 외에도 정말 다양한 툴들이 있었다.

하나를 깊게 파서 잘해야 할지 여러 가지를 두루두루 할 줄 알아야 할지...

그냥 다 잘하는 게 정답이다. 그래야 나를 쓰겠지..