프로덕트 디자인 입문 - ch1, 2

UI 디자인이란-

사용자 인터페이스, 즉 사용자가 화면에서 볼 수 있는 모든 그래픽을 통칭하며

심미성 / 논리와 효율성 / 디자인 툴 활용능력 / 디지털 환경의 이해가 필요

[1] 심미성

아름답게 만드는 것보다는 브랜드의 전략에 따라 목표 고객에 적합한 톤앤매너 복잡한 기능의 정돈 등을 브랜딩과 연결할 수 있음 ➡️ 심미성을 고려한다면 브랜드 경험과 신뢰도에 직결

[2] 논리와 효율성

조직과 팀의 목표를 이해하고 돋보이는 디자인보다는 효율성 면에서 레퍼런스 등을 이용하여 작업 필요

[3] 디자인 툴 활용 능력	[4] 디지털 환경의 이해
피그마, 어도비XD, 프로토파이, 프레이머, 스케치 등 다양한 툴 중 현재 상황을 고려해 적합한 툴을 선정하고 활용해야 함	벡터 / 비트맵 같은 이미지 표현 방식, 모바일과 데스크톱의 차이점, 안드로이드와 IOS 차이를 바탕으로 공통 UI 컴포넌트의 구조와 인터랙션등을 설계하여 반복 작업의 최소화, 프로토타입을 현실감있게 제작

---

디자인 툴

- 툴보다 중요한 것은 논리, 구조적인 생각과 표현 능력

➡️ 툴의 변화 과정을 확인하여 특성 파악 및 언제라도 바꿀 수 있는 능력 요구

[1] 스케치	[2] 어도비 XD
- 피그마 나오기 전 자주 사용됨 - 강력한 UI 디자인 및 플러그인 제공 - 맥에서만 사용 가능, 유료 - 로컬 클라이언트 기반 ➡️ 제플린, 앱스트랙트와 같은 협업 툴 동반 필수	- UI 디자인과 프로토타이핑 기능 우수 - 어도비의 다른 툴과 호환성 - 컴포넌트 기능이 미흡하며 패스드로잉에는 부적합 + 패스드로잉 : 점과 선을 이용해 세밀하게 그리는 것 - 클라우드 기반 협업 기능은 유료
[3] 프로토파이	[4] 프레이머
- 프로토타입을 제작할 때의 프로토타이핑 툴 - XD, 피그마, 스케치에서도 프로토타이핑을 지원하나 UI 디자인을 우선으로 하다보니 섬세한 작업은 할 수 없음 - 디자인 툴에서 완성한 디자인을 프로토파이에서 실제 디지털 제품과 유사하게 만들 수 있음	- 코드를 입력해 프로토타이핑할 수 있는 툴 - 코딩 몰라도 UI 드로잉, 디자인 기능 적용 가능 - 디자이너가 UI 개발 로직을 개발자와 협업한다면 하나의 컴포넌트를 디자인과 개발에 모두 활용할 수 있음 + 디자인 페이지를 바로 랜딩 페이지로 만드는 기능 추가 ex) 토스의 디자인 시스템 활용 사례

---

프로덕트 디자인

실체가 있는 제품 디자인이 아닌,

제품과 서비스, 웹, 앱 등의 디지털 제품을 기획 및 디자인 하는 것을 말함

디지털 제품의 맥락 이해 및 설계

➡️ 시각 디자인 외에도 기획, UX, 개발 커뮤니케이션 등

+ UI/UX 디자이너 이외에도 프로덕트 디자이너, 플랫폼 디자이너의 직무

- 사용자 이해	- 데이터와 비즈니스 이해
사용자의 편의 고민 ➡️ 더 좋은 문제의 정의, 알맞은 해결책 서비스 변경 시에도 이해가 필요 ➡️ 가장 거부감을 주지 않는 UI는 이미 익숙한 UI인지 심리를 고려하여 가설을 세우고, 개선안을 지속적인 테스트 필요 팀원과 이해관계자의 의견 경청 - 다양한 관점에서의 서비스, 구현 난이도 및 대안을 고민	디자이너에게도 데이터에 기반한 사고력 요구 - 디자인 업데이트의 효과를 정량적 데이터로 측정 가능 수집한 데이터로 가설 설정하고 제품 개선 시에 재방문율, 구매 전환율과 같은 주요 지표 발견 가능

---

모바일 기기 디자인 환경

픽셀(px, picture element) - 디지털 산출물의 비율과 선명도를 나타냄 / dpi(dots per inch)의 단위

어떤 기기를 쓰더라도 유사한 서비스 경험을 제공하도록 노력하려면

사용자가 많이 쓰는 화면 해상도 기준으로 디자인해야함

- 기준 해상도를 잡고 기기에 맞추어 조정

보편적 OS: https://gs.statcounter.com/

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

시니어 타깃 서비스를 디자인 한다면 구형 안드로이드 기기의 보편적 해상도에 맞추어 작업

가설 세우고 검증된다면 기기를 기준으로 놓고 디자인

➡️ 불필요한 업무량을 줄이며 고화질 데이터 출력하기 어려운 환경에서도 최적화된 이미지

 

✔️ 모바일 UI 디자인 시

픽셀 단위와 1배수 단위의 구분 필요

디자인한 애셋을 특정 픽셀로만 지정한다면 화질이 떨어지는 애셋 출력

+ 애셋; 디자인의 자원, 자산이 되는 모든 그래픽 요소의 통칭

➡️ 1배수로 디자인하되 모바일 기기에서는 2~4배수 사이의 밀도를 지원할 것

IOS	안드로이드
- 사용하는 해상도 종류 비교적 적음 ➡️ 안정적 UI 디자인 구현 가능 - 터치 버튼 수 적지만 제스처 위주 인터랙션 많음 - pt(point) 단위 사용, 3배수의 애셋 출력	- 다양한 기기에서 사용, 해상도 제각각 - 하단 네비게이션 바와 같은 버튼을 조작함 - dp(density independent pixels), sp(scale independent pixels) 단위 사용, 4배수까지의 애셋 출력

---

피그마의 장점?

디자인 시스템 뿐 아니라 기획, PPT, 애니메이션, 이미지 제작 등에 폭넓은 활용 가능- 쉬운 협업 ; 웹 기반이므로 링크로 접근할 수 있음, 직관적인 피드백 가능- 올인원 디자인툴 ; UX 디자인 이외에도 가장 많이 사용하는 디지털 툴- 효율성 ; 컴포넌트와 디자인 시스템의 개념으로 애셋의 체계적 관리 가능 ➡️ 반복되는 요소들의 재사용- 드로잉 가능한 벡터 기반 툴 ; 벡터는 점, 선, 면으로 이루어진 오브젝트, 위치와 색상 값을 기억하므로 이미지를 확대해도 깨지지 않음, 단순한 오브젝트를 저장하는 데 효과적.     + 비트맵 ; 가로, 세로 픽셀 수와 색상값을 일일이 기억하여 화면 깨짐이 발생하는 이미지, PNG, JPG✔️ 다양한 기기를 대상으로 하는 UI 디자인은 해상도와 무관한 벡터 기반 툴로 디자인하는 것이 좋음. 일러스트레이터같은 드로잉툴의 사용 없이 모든 애셋의 제작 가능, 비트맵 타입의 애셋 관리에도 효과적

---

https://figma.com/

Figma: The Collaborative Interface Design Tool

---