[8주차] OS에 따른 디자인 & 실전 피그마 (2)

1. OS에 따른 디자인

   1) OS란 무엇인

   2) UI 프로젝트의 이해

 

2. 실전 피그마 part.4

---

1-1. OS란 무엇인가

 

 

Operating System

운영체제: 컴퓨터 혹은 컴퓨터화 된 디바이스의 하드웨어, 소프트웨어 자원을 관리

                 컴퓨터 프로그램에 대한 공통 서비스를 제공

하드웨어: 중앙처리장치, 램, 모니터, 마우스, 키보드, 저장장치, 등으로 구성

                 프로세스, 메모리, 저장장치, 입력장치, 출력장치, 등 포함

OS: 시작은 군사적인 목적이었음.

       - 지속 가능한 통신시설을 만들기 위해 개발한 인터넷

       - 포탄에 탄도를 계산하기 위해 개발한 오퍼레이팅 시스템

 <하는 일>

① 프로그램 간 정보 공유 : 클립보드

② 멀티태스킹 : 사용자가 하던 일을 멈추고 다른 작업을 할 때에도 운영체제가 그 일을 유지하거나 지속적으로 연장

③ 사용자 인터페이스 제공 : WIMP - 사용자가 컴퓨터와 인터랙션 하는 스타일을 정의

     <OS에 따른 UI 디자인> 

        · 타켓 디바이스의 OS의 특성
        · 디자인 철학과 원칙
        · 어떤 OS를 대상으로 하는지 파악

 

 

 

 

 

1-2. 모바일 OS

 

 

모바일 OS

모바일 기기에 들어가는 오퍼레이팅 시스템

Apple의 iOS : Walled Garden

iOS 장치에서 실행할 수 있는 모든 모바일 앱 및 서비스를 규제

 - 하드웨어와 소프트웨어를 자신들이 원하는 방향으로 최적화할 수 있다는 장점

 - 너무 폐쇄적이라는 단점

애플워치 OS, 아이패드 OS, 등 장치별 모바일 OS 출시

Google : 오픈소스인 Android OS

리눅스 커널에서 실행하는 가장 대표적인 오픈소스 플랫폼

운영체제의 새로운 버전과 소스도 공개

	Apple		Google
기술 전략	완성도 높은 기술		혁신 기술
생태계 전략	폐쇄적 생태계 독자적인 생태계 선택적 협력		협력적 생태계 개방을 통한 다양한 참여자
주 수익원	하드웨어의 판매		서비스 무료 제공 후 광고 수익 창출
디자인 시스템	HIG	어플리케이션 디자이너나 개발자에게 권장사항을 제공하는 소프트웨어 개발문서 인터페이스를 보다 직관적이고 학습 가능하고 일관성 있게 만들어서 사용자의 경험을 개선	디자인 스프린트	구글만의 디자인 방법론 사용자와 함께 아이디어 디자인 프로토타이핑 후 테스트
			Material Design	그리드 기반의 레이아웃 반응형 애니메이션과 트랜지션 그래픽 간의 간격 빛과 그림자를 통한 연출
			구성 요소	포커싱 된 상태, 선택된 상태 활성화 & 비활성화 오류, 호버, 클릭, 드래그

 

 

모바일 OS가 하는 일

스마트폰에 내장된 모뎀과 이동통신을 통해 인터넷에 연결 가능

모바일 앱 스토어에서 새로운 응용 프로그램 다운로드

모바일 운영체제의 인터페이스 디자인 원칙이 중요

e.g. 기본 모바일 웹 브라우저, 기본 이메일 어플리케이션, 캘린더 어플리케이션,
       연락처 라이브러리, 위치 공유를 위한 GPS센서

 

OS 전쟁

Apple - iOS

Google - 스텔란티스, 혼다, 볼보, 제너럴모터스, 르노-닛산

자체 OS - 폭스바겐, 현대, 메르세데스-벤츠, 토요타, 테슬라

 

 

 

 

 

 

 

 

 

2. 실전 피그마 part.5 - 버튼 배리언츠 구성하기

 

리소스 도구 - Plugins 탭 - Feather icons - 플러그인 선택

벡터와 레이어를 모두 선택한 후 Ctrl + E 해서 통합함

Ctrl + Shift + O 해서 Outline Stroke를 통해 선을 면으로 전환 / Ctrl + R 하여 레이어 이름 Vector 로 전환

 

 

모든 아이콘 프레임 설정 후 Create Components 아이콘 의 Create Multiple Components 선택

 

F 클릭해 프레임으로 감싼 다음 Ctrl + R 눌러 프레임 이름 'Icon'으로 설정

 

 

T : 텍스트 (버튼 입력) , Shirt + A : 오토 레이아웃 설정 , Ctrl + R : 프레임 이름 'button'

 

Appearance 창에서 conor radius 설정, 버튼 색상 변경 및 아이콘 불러오기, 아이콘 색상 ffffff 설정

버튼 프레임 선택 후 Alt 누른 상태에서 드래그하여 총 8개의 버튼 생성

색상 변경.

 

Create Components Set 구성 후 가독성을 위해 프레임을 ffffff 색상으로 채움 / position 창에서 위의 이름대로 각각 type 과 state 채움