TIL-4

1. 디자인 툴

• 제품을 만들기 위해 각자 다른 전문적인 능력을 갖춘 사람들이 모인 팀을 지칭.

1. 디자인 툴이란?

• 디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램.

디자인 툴의 종류

• 인터페이스 디자인 툴
  1) 디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴.
  2) 대표적으로 피그마, 스케치, xd
  3) 다양한 디바이스에 대응해야 하기 위해 인터페이스 툴은 주로 백터 방식으로 기반함.
  
  
• 그래픽 디자인 툴
  1) 그래픽 이미지를 만들 때 사용하는 툴.
  2) 편집하거나 일러스트를 그려서 원하는 이미지를 만듬.
  3) 대표적으로 포토샵, 일러스트레이터
  
  
• 3D 그래픽 디자인 툴
  1) 3차원의 그래픽을 만들 때 사용하는 툴
  2) 대표적으로 시네마 4D, 블렌더
  
  
• 모션 그래픽 디자인 툴
  1) 그래픽 리소스를 활용해서 영상을 만들거나 촬영한 영상을 편집할 때 사용하는 툴.
  2) 대표적으로 프리미어, 애프터이펙트

2. 비트맵과 백터의 이해

• 비트맵 이미지

  • 비트 정보를 가진 픽셀이 모여 만들어진 이미지.
  • 픽셀 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교하게 이미지를 표현.
  • 이미지 안의 픽셀 수가 많을수록 품질이 좋아지지만, 용량도 함께 커짐.
  • 이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상이 생김.

• 백터 이미지

  • 그래픽을 수학적인 함수 공식으로 표현한 것.
  • 점과 점을 연결해 선을 만들고, 선과 선을 연결해 면을 만드는 방식.
  • 이미지를 줄이거나 키워도 손상이 생기지 않음.
  • 좌표가 적힌 텍스트 파일로 저장되기 때문에 비트맵과 비교해 용량이 매우 적음.
  • 색 표현에 한계가 있어 사진 같은 이미지 그래픽의 섬세한 작업은 어려움.
  • 복잡한 이미지를 벡터로 만들면 파일 용량이 매우 커질 수 있음.
  • 사용하는 곳에 따라 호환성에 문제 생길 수 있음

2. 피그마, 스케치, XD

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

1. 피그마

• 피그마는 전 세계에서 가장 많이 쓰는 인터페이스 툴.
• 클라우드 기반, 멀티 플랫폼 지원으로 여러 사용자가 동시에 파일을 열고 편집할 수 있는 것이 피그마의 가장 큰 특징이자 장점.

2. 스케치

• 피그마 이전까지 가장 많이 쓰고, 인기 있는 인터페이스 디자인 툴
• 개인의 로컬 컴퓨터 기반으로 동작하기 때문에 안정적이라는 장점
• MacOS 기반

3. 어도비XD

• 어도비 Creative Cloud 플랜을 구독한다면 추가 비용을 없이 무료로 사용할 수 있음.
• 파일을 클라우드 형태로도 저장할 수 있지만, 기본적으로는 로컬 파일로 저장하는 방식이라 여러 사람이 다 함께 작업하기는 좋지 않음.

3. 프로토타이핑 툴

1. 프로토타이핑 툴이란?

• 화면의 움직임이나 인터랙션을 구현할 수 있도록 도와주는 툴.
• 주로 제품을 실제로 개발하지 않고 아이디어나 컨셉을 테스트하기 위해 사용.
• 사용자 테스트뿐만 아니라 팀원들에게 디자인을 효과적으로 공유하고 싶을 때도 활용.
• 구현 정도에 따라 Lo-fi 프로토타이핑 툴과 Hi-fi 프로토타이핑 툴로 나뉨.

2. 인터렉션 디자인

• 주로 제품에서 말하는 인터랙션은 사용자가 제품을 사용하면서 반응을 주고받는 것을 말함.
• 인터랙션 디자인은 사용자가 제품을 사용하면서 적절한 반응을 주고받고 막힘없이 서로 간에 소통하는 것을 도움.
• 프로토타입이 중요한 이유 > 인터랙션 디자인을 테스트하기 위해

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

1. 피그마 프로토타이핑

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

  특징

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

2. 프로토파이

• 코딩 없이 실제 제품과 비슷한 수준의 프로토타입을 만들 수 있다는 것이 큰 장점.
• 눈에 보이는 GUI를 클릭해서 작업할 수 있어 코드가 어려운 디자이너도 편리하게 사용.

  특징

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

3. 프레이머

• 프레이머는 Hi-fi 프로토타입으로 코드 기반의 툴.

• 인터페이스 디자인 툴의 기능도 함께 제공해서 디자인부터 프로토타이핑까지 한 번에 할 수 있음.

• 만든 프로토타이핑을 실제 제품으로 배포까지 가능.

  특징

  • 재사용성
    • 코드 재사용성
    • 컴포넌트 재사용성
  • CMS
    • Content Management System의 약자로 콘텐츠 관리 시스템이라는 뜻.
    • CMS 기능을 통해 콘텐츠를 작성하고 데이터를 관리할 수 있음.
    • CMS에 등록한 데이터를 이용해 리스트나 상세 화면에 노출되도록 활용할 수 있음.
    • 배포된 화면을 분석할 수 있는 Analytics 기능도 제공하기 때문에 방문자 수와 어떤 경로로 들어왔는지 등을 확인할 수 있음.