7. Design System과 UI Prototyping
Design System과 UI prototyping의 개념
: UI디자인의 구체적인 결과물 제작에 관한 방법이자 도구
Design system
- 재사용 가능한 구성요소의 조합
- 스타일 가이드를 포함하는 UI 구서용소의 집합
- 불필요한 디자인의 중복성 감소
- 시각적 일관성 부여
- 제품에서 공유되는 철학이나 어워드를 대규모로 관리
ex) 구글의 material design, IBM의 carbon design
Atomic Design : 디자인시스템이 갖고 있는 계층적 구성요소
- Atoms(낱개의 이미지, 아이콘...) - Molecules(버튼이 있는 필드...) - Organisms (디자인 패턴과 유사) - Templates - pages
디자인 시스템이 필요한 이유 : 디자이너마다 다르게 디자인 작업을 할 수 있기에 비생산적, 비일관적 디자인이 나올 수 있기 때문
- 디자인에 관한 다양한 경우에 규칙을 만들어 통일
- single source of truth : 한가지 소스를 사용, 조직 내 공동 컴포넌트 유지
- 디자인 재활용
*Custom UI : 그때그때 디자인을 최적화해 따로 만드는 것
Prototyping
: 제품의 원형 또는 시제품
- 제품을 실제로 사용하는 것과 같은 경험을 제공해줄 수 있는 구체화된 결과물
- 완성될 제품의 인터랙션을 표현해 문제점을 예상/검토에 쓰이는 모형
- 생산 적용 가능성, 기능 작동성 등을 검토하기 위한 모형
용도
- Mock-up : 전통적인 의미의 제품디자인 분야 중심
ㄴ Rough Mock-up: 손으로 직접 외형을 만든 것
- Model(모형) : 프로토타입과 유사
MVP (Minimum viable product): 최소 기능 제품
- 최종제품이 담고 있어야 할 핵심가치를 테스트
- LEAN Process에서 프로토타입에 해당. 제품보다는 사업 아이디어에 대한 테스트/확인
- 빠르게 테스트 후 개선
프로토타입의 종류 및 사례
디자인 분야에 따라
1) 시각 디자인
- 상호작용이 가능한 시각적 결과물. 최종본과 구분이 어려울 만큼 완성도 높은 결과물
- 웹/앱디자인
- 피그마, 어도비 XD...
2) 제품 디자인
- soft/더미 mock-up
- 피지컬 컴퓨팅
3) 공간 디자인
- 표현이 어려움
Feature 범위에 따라
1) 수평적 프로토타입
- 제품이 갖고 있는 여러 기능 범주를 다 다루는 것
2) 수직적 프로토타입
- 한가지 faeture라도 좁고 깊게 다루어 완성도를 높게 하는 것
Fidelity에 따라
1) Low-Fi
- 단순, 저렴, 빠른 제작
- 상상의 여지가 큼. 넓은 범위 검토
- 평가 품질 보장 불가
- 시간낭비일 수도
2) Hi-Fi
- 고가, 높은 완성도, 최종단계
- 전체의 큰 피처를 검토하는 걸 방해할 소지가 있음
프로토타이핑의 사례
1) 경험 프로토타이핑 : 사용상황, 행동, 느낌을 구현
- 일종의 더미 목업
2) 하드웨어 제품 디자인
3) Keyboard hacking
4) Paper(L-F) Prototyping
UI Prototyping Tools
- page : 프로젝트 초반. 동선 확인 위주, 제한된 인터랙션, 학습 난이도 낮음
- object : 프로젝트 중후반, 마이크로/정교한 인터랙션. 학습 난이도 높음
8. UI Prototyping #1 - web
워크플로우와 웹 프로토타이핑의 이해
워크플로우 : 한 개의 태스크를 순차적인 조작절차로 나타내는 것
- 높은 추상성 제시: 텍스트, 도형, 연결선으로만 각 단계를 나타냄
- 낮은 추상성 : 포토샵, 일러스트레이터, ppt 등의 표현 툴 사용
ㄴ 와이어프레임 형태 워크플로우로 추상성을 옅게 함
*웹 기반 브라우저 장점 : 쉬운 협업, 어디서든 사용
프로토타이핑
- 실제품의 실패 리스크를 줄이기 위해 최종제품 완성 전 테스트
- 신속성과 완성도 사이 합의점 찾기
웹 프로토타이핑
- 툴 이해 및 상황에 따라 적절한 툴 선택
웹 디자인 설계
- HTML : 웹페이지의 표준 마크업 언어. 텍스트 처리, 정의 및 표현을 위해 설계
웹 프로토타이핑 도구
1) HTML
- 기본이 이해를 통해 Hi-Fi 프로토타입 만들 수 있음
2) CSS
- 마크업 언어로 작성된 문서의 스타일 시트 작성
- 디자인 시 만흥ㄴ 유연성 확보
- 캐시 가능: W3C에서 사양 유지 관리. 페이지 간 로딩속도 개선
3) JS
- 웹페이지 동작을 위해 컴퓨터 측에서 사용
- 웹 문서를 다이내믹하게 만들 수 있음
- 웹 브라우저에서 실행 -> 서버에 큰 부담 주지 않음