[11주차] Design System과 UI Prototyping

07. Design System과 UI Prototyping

    1) Design System과 UI Prototyping의 개념

    2) 프로토타이핑의 종류와 사례

 

08. UI Prototyping #1 - web

     1) 워크플로우와 웹 프로토타이핑의 이해

     2) 웹 프로토타이핑 도구

 

 

 

---

7-1. Design System과 UI Prototyping의 개념

 

Design System

재사용 가능한 구성 요소의 조합

스타일 가이드를 포함하는 UI 구성요소의 집합

불필요한 디자인의 중복성 감소

시각적 일관성 부여

제품에서 공유되는 철학이나 어워드를 대규모로 관리

 

Atomic Design : 디자인 시스템이 갖고 있는 계층적 구성 요소

 

<디자인 시스템이 필요한 이유>

- 디자이너마다 다르게 디자인 작업을 해서 나오는 비생산적이고 비일관적인 디자인 방지

- 디자인과 관련된 다양한 경우에 규칙(디자인 토큰)을 만드는 것

- Single Source of Truth : 조직 내 공동의 컴포넌트 유지

 

<디자인 재활용의 장점> 

- 제작에서의 생산성, 효율성 증대

- 디자인의 일관성 유지

- 효율적인 유지, 관리, 보수

- 고객이 기업의 일관성을 느낌

 

Custom UI : 그때 그때 최적화 시켜서 따로 만드는 것

 

 

Prototyping

새로운 제품/서비스/시스템을 실제로 사용하는 것과 같은 경험을 제공해 줄 수 있는 구체화된 결과물

최종 결과물이 존재하기 전에 만들어지는 디자인의 표현

완성될 제품의 인터랙션을 표현하여 문제점을 예상/검토하는 등에 쓰이는 모형

생산 적용 가능성, 기능 작동성 등을 검토하기 위한 모형

 

<프로토타이핑의 용도>

Mock up : 외관 디자인을 중심으로 하는 전통적인 의미의 제품 디자인 분야를 중심으로 광범위하게 사용

Model : 프로토타입과 유사한 의미로 사용

Rough Mock-up : 스티로폼, 골판지, 등으로 외형을 만드는 것

디자이너의 머릿속에만 존재하는 결과물을 가시화하여 확인/평가할 수 있게 해주는 도구

 

MVP(Minimum Viable Product)

최소 기능 제품, 비물질적인 것을 주로 다루는 서비스 디자인 분야에서 사용

MVP를 통해 최종제품이 담고 있어야 될 핵심가치를 테스트

제품보다는 사업 아이디어에 대한 테스트·확인에 사용

100% 완성보다 제품이 갖춰야 할 여러 가지 고려사항들을 전부 다루는 것이 중요

 

 

 

7-2. 프로토타입의 종류 및 사례

 

디자인 분야별 프로토타입의 종류

 

        ↑           시각 디자인 : 상호작용이 가능한 시각적 결과물, 웹/앱 디자인

 인터랙션     제품 디자인 

        ↓           공간 디자인 : 시각 디자인의 웹/앱 디자인에 비해 표현이 어려움

 

<Feature 범위에 따른 프로토타입의 종류>

수평적 프로토타입: 제품, 앱, 웹이 갖고 있는 여러 가지 기능 범주 (스코프) 를 다 다루는 것

수직적 프로토타입: 한 가지 Feature라도 좁고 깊게 다루어 완성도를 높게 하는 것

 

<Fidelity에 따른 프로토타입 종류>

Low-Fi: 단순, 저렴, 빠른 제작 / 손으로 제작하거나 아날로그 작업

- 장점: 빠른 착수 가능, 상상의 여지가 큼, 넓은 범위의 스코프 검토 가능

- 단점: 완성도가 낮아 최종 품질 X, 평가에 대한 품질을 보장 X, 쓰이지 않는 중간 산출물

Hi-Fi: 고가, 높은 완성도, 최종 단계 / 컴퓨터 작업

- 장점: 완성도가 높아 충분한 사용경험 전달, 최종적인 작업물이 될 수 있음

- 단점: 만드는데 시간/비용이 높음, 프로토타입의 완결성에 집팍, 전체 앱 검토 어려움, 초기단계 적용 부적합

 

 

 

 

---

 

8-1. 워크플로우와 웹 프로토타이핑의 이해

 

Design System

워크플로우: 한 개의 태스크를 순차적인 조작절차로 나타내는 것

 

 

Prototyping

최종 제품을 완성하기 전 테스트 하는 것

신속성과 환성도의 사이 합의점을 찾는 것 between LF and HF

실 제품의 실패 리스크를 줄이는 것이 목표

 

<웹 디자인 설계 - HTML>

1. HTML 

- 웹 페이지를 만드는 표준 마크업 언어

- 텍스트 처리, 정의 및 표현을 위해 설계

- 텍스트 파일 내에서 레이아웃과 스타일을 모두 규정하는 코드 지정

 

2. CSS

- 마크업 언어(Markup Language)로 작성된 문서의 표현을 설명하는데 사용되는 스타일 시트를 작성하는 언어

- 디자인 시 많은 유연성 확보

- 특히 UI 디자인 시 프로토타이핑 하는 데 도움

 

3. Javascript

- 웹 페이지 동작을 위해 컴퓨터 측에서 사용

- 웹 문서를 다이내믹하게 만들 수 있음

- 웹 브라우저에서 실행되기 때문에 서버에 큰 부담 주지 않음

- HTML 페이지 내에 포함될 수 있어 사용 및 개발의 편리함