2024.02.29(목)
내일배움캠프 본캠 8일차 학습일지
✨시작하면서
벌써 9일차입니다.
공휴일은 쉬는 내배캠의 일정에 따라 내일은 쉬는 날입니다. 쉬니까 좋기도 한데 그동안 습관 들여놓은 것이 아까워 내일도 짧게 나마 공부를 진행할 예정입니다. 그리고 토요일마다 디자인학원도 다니게 되어서 매주가 짧아질거 같습니다. 주중에 12시간 수업듣고, 토요일에 학원이라... 쉽지 않은 일정이지만 미래를 위해 해내보겠습니다.
📍학습내용
오늘은 개인적으로 제가 제일 좋아하는 프로토타입에 대해서 다루는 수업입니다. 시각적으로 휙휙 바뀌는게 느껴져서 디자인하는 보람이 커서 좋아합니다.
☑️4-1 디자인툴
👉디자인 툴이란?
- 일반적으로는 디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램을 디자인 툴 이라고 말함
- 아주 강력한 무기
- 좋은 디자이너는 상황에 따라 툴을 잘 활용해야합니다
디자인 툴의 종류 4가지
👉1. 인터페이스 디자인 툴
- 디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴
- 벡터 방식을 기반으로 두기 때문에 여러 크기의 디바이스에서 사용가능함
👉2. 그래픽 디자인 툴
- 비주얼 그래픽 이미지를 만들 때 사용
- 흔히 사진편집, 일러스트 그리기 등이 있음
👉3. 3D그래픽 디자인 툴
- 3차원의 그래픽을 만들 때 사용
👉4. 모션 그래픽 디자인 툴
- 그래픽 리소스를 활용해 영상은 만들거나 편집할 때 사용
번외. 비트맵 vs 벡터
1) 비트맵 : 비트 정보를 가진 픽셀이 모여 만들어진 이미지를 뜻 함
- 대표적인 확장자로는 .jpeg, .jpg, .png, .gif가 있음
| 비트맵 이미지의 장점 | 비트맵 이미지의 단점 |
|---|---|
| 픽셀 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교하게 이미지를 표현가능 | 이미지안의 픽셀 수가 많을수록 퀄은 올라가지만, 용량도 커짐 |
| 핸드폰 카메라에서 찍는 사진처럼 쉽게 만들 수 있음 | 이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상이 발생 |
2) 벡터 이미지 : 그래픽을 수학적인 함수 공식으로 표현함
- 대표적인 확장자로는 .svg, .eps, .ai가 있음
| 벡터 이미지의 장점 | 벡터 이미지의 단점 |
|---|---|
| 좌표계(x,y)의 점이기 때문에 스케일을 변동해서 손상이 안 생김 | 색 표현의 한계로 섬세한 그래픽 작업이 어려움 |
| 좌표로 이뤄진 텍스트 파일이기에 저장 용량이 매우 적은 편 | 좌표로 저장하기 때문에 복잡하나 이미지를 벡터로 만들면 파일용량이 커짐 |
☑️4-2 피그마, 스케치, XD
👉1. 피그마
- 클라우드 기반, 멀티 플랫폼의 지원으로 동시작업이 가능함
- 전 세계에서 가장 많이 쓰는 인터페이스 툴
- 클라우드에 저장해 인터넷이 가능하다면 언제든지 수정 가능!
- 테스크탑, 구글 크롬에서도 가능!
🔗피그마 공식사이트 바로가기
👉2. 스케치
- 피그마 전에 최강자였던 툴이지만 피그마한테 짐
- 애플만 지원하고, 다른 플랫폼을 지원할 계획이 없다고 함😥
🔗스케치 공식사이트 바로가기
👉3. 어도비XD
- 어도비에 익숙한 사람이라면 별 어려움 없이 적응 가능함
- 하지만 기본적으로 로컬파일로 저장해서, 다수의 사람과 작업하기엔 조금 불편함
🔗XD공식사이트 바로가기
☑️4-3 프로토타이핑 툴
👉프로토타이핑 툴이란?
- 화면의 움직임, 인터랙션을 구현할 수 있도록 도와주는 툴
- 사용자테스트 + 팀원들에게 효과적으로 디자인을 공유하고 싶을 때
- 구현정도에 따라 Lo-fi 프로토타이핑 툴과 Hi-fi 프로토타이핑 툴로 나뉨
| Lo-fi(Low fidelity)프로토타이핑 | Hi-fi(High fidelity)프로토타이핑 툴 |
|---|---|
| 시각적으로 강조하지 않은 와이어프레임수준으로 움직이는 프로토타입 | 최종제품과 유사한 수준으로 구현한 프로토타입 |
| 펜과 종이로 그려서 테스트하거나, 클릭과 화면전환으로 구현된 단순한 프로토타입이 포함됨 | 색상과 텍스트 스타일 등의 비주얼과 인터렉션의 움직임 모두 실제 제품 컨셉과 유사해야함 |
👉인터랙션 디자인이란?
- 제품에서 말하는 인터렉션은 사용자가 제품을 사용하면서 반응을 주고 받는 것
- 인터렉션 디자인은 사용자가 제품을 사용하면서 적절한 반응을 주고받은 것을 말함
💡인터렉션 예시
- 화면 로딩 중이나, 다운 기다리고 있을 때 화면이 멈춰있으면 사용자가 핸드폰이 멈춘 줄 알고 당황하니까 적절한 애니메이션을 넣는 것
👉프로토타입이 중요한 이유 -> 인터랙션 디자인의 테스트를 위해
- 디자인은 멈춘 화면이기에 사용자가 제품을 이용하는 과정을 표현X
- UX는 멈춘 화면이 아니라 서로 상호작용하는 과정에서 생겨나는 경험임
- 사용자가 어려움 없이 화면 간을 이동하고, 원하는 기능을 찾고 잘 이용하는지 보려면 동작하는 프로토타입으로 테스트하는 것이 좋음
☑️4-4 피그마 프로토타이핑, 프로토파이, 프레이머
👉1. 피그마 프로토타이핑
- 화면을 피그마로 디자인했다면 파일을 내보내거나 불러오는 과정없이 쉽게 만들 수 있음
- 하지만 실제 데이터를 넣거나 복잡한 애니메이션은 구현하기 어려움
✏️ 피그마 프로토타이핑의 특징
-
단순한 동작을 시연할 때 좋음
-
페이지이동, 팝업, 모달을 노출하는 정도의 수준이면 편하게 사용 가능함
-
한 피그마 파일 안에서 동시에 프로토타이핑 전환 가능
-
간편한 경로 연결(클릭과 드래그앤 드롭으로 연결가능)
🔗피그마 프로토타이핑 공식 사이트 바로가기피그마 프로토타이핑은 어떤 상황에서 쓰면 좋을까요?
- 피그마툴로 만든 화면을 가지괴 단순하나 동작을 시연할 때
- 알람, 팝업 등 복잡하지 않은 인터렉션을 구현할 때
👉2. 프로토파이
- 실제 코드로 개발하는 제품과 거의 유사한 인터랙션 구현가능
- 눈에 보이는 GUI를 클릭해 코드가 어려운 디자이너도 편리하게 사용가능
✏️ 프로토파이의 특징
- Hi-fi 수준의 기능
- Lo-fi 수준인 피그마와 비교되는 특징, 프로토파이는 실제 환경과 유사한 수준으로 구현 가능함
- 키패드로 텍스트를 입력하거나, 전송하는 것 처럼 할 수 있음
- 🔗예제 프로토타입 사용해보기
- Conditions (조건부 트리거)
- Conditions는 특정 상황일 때 이동하거나 색상이 변하는 등의 기능
- 이 기능을 통해 실제와 매우 유사하게 동작 가능
- 🔗예제 프로토타입 사용해보기
프로토파이는 어떤 상황에서 쓰면 좋을까요?
- 코드는 잘 모르더라도 다양한 애니매이션과 인터랙션을 구현하고 싶을 때
👉3. 프레이머
- Hi-fi 프로토타입으로 코드 기반의 툴
- 디자인부터 프로토타이핑까지 한번에 가능
- 만든 프로토타이핑을 실제 제품으로 배포가능
✏️ 프레이머의 특징
-
1. 재사용성
- 1) 코드 재사용성
- 프레이머는 개발언어인 React를 기반로 되어있음
- 코드를 활용해 프로토타입을 만든 후 개발자와 공유해 원할한 소통 가능
- 2) 컴포넌트 재사용성
- 특정 애니메이션이나 조건을 정의한 컴포넌트를 여러번 사용가능함
- 1) 코드 재사용성
-
2. CMS
- Content Management System의 약자로 콘텐츠 관리 시스템
- 콘텐츠를 작성하고, 데이터를 관리할 수 있음
- 사이트를 분석할 수 있는 Analytics 기능도 제공하기 때문에 방문자 수와 어떤 경로로 들어왔는지를 확인 할 수 있음
- 프레이머 공식사이트 바로가기
프레이머는 어떤 상황에서 쓰면 좋을까요?
- 실제 제품과 거의 같은 수준의 프로토타입을 만들어야할 때
- 코드를 다루는데 익숙하면서, 혼자서 디자인-개발을 해보고 싶을 때
