7주차) 04 - 01 - 디자이너와 협업하기

디자이너와 협업하기

• 색상
  • Primary Color, Service Identity Color 
  • 메인 컬러(Main Color), 키 컬러(Key Color), 브랜드 컬러(Brand Color)
  • 프로덕트 내에서 다양한 요소에 사용이 되고 있다.
• Color Pallet
  • Color를 어떤 목적으로 쓸 것인지 용도는 어떤 용도인지 어떤 기능을 할 때 이 컬러들을 주로 사용해야 하는지 정의해 두는 것이다.

• GUI 디자인 가이드 라인
  • 전체 스타일들에 대해서 정의한 문서이다.
  • 컬러에 대한 정의, Typography 텍스트에 대한 정의도 한다.
  • Layout guideline, UI guideline, Icon style에 대한 정의도 한다.
  • 제플린이라는 툴을 많이 사용한다. 수정 부분에 대한 코멘트를 남길 수 있고 담당자를 멘션 하는 기능도 있다.
• 디자인 시스템
  • 대표적으로 구글에서 나온 Material Design guideline, IOS에서 나온 Human Interface guideline이 있다.
  • OS를 사용하는 그 환경에 맞춰서 각각 OS에 설치되는 프로그램들이 이런 규칙을 지켜서 디자인되거나 사용 환경을 제공했으면 좋겠어라고 하는 가이드라인을 정의해둔 사이트이다.
  • 크게 style guide, component library로 분류를 한다.
    • 스타일 가이드 - 타이포그래피에 대한 정의, 컬러에 대한 팔레트, 간격은 어떻게 할 건지 전반적인 디자인에서 사용될 요소들에 대한 스타일을 정의
    • 컴포넌트 라이브러리 - 공통으로 사용하는 요소(버튼, 리스트 타입, 카드 UI 등)들을 정의하는 것, 모션, 접근성, 내비게이션도 정의한다.
  • 효율성, 일관된 UI, 생산성 때문에 디자인 시스템이 필요하다.
    • 기획, 디자인, 개발 생산성을 향상하고 비용을 절감할 수 있다.
    • 일괄된 브랜드 정체성과 높은 사용성 유지할 수 있다.
    • 업데이트도 빠르고 효율적이다.
• 이미지 파일 종류와 특성
  • Lossless 손실이 없는 - image를 압축해도 이미지 손실이 발생하지 않는다.
  • Lossy 손실되는 - image를 압축할 경우 이미지 손실이 발생하고 반복해서 압축할 경우 점점 이미지 손실이 발생한다.
  • Indexed Color - Color map으로 제한된 색상 256가지 팔레트 색상으로만 지정할 수 있다.
  • Direct Color - 제작자가 직접 선택하지 않은 수천 가지의 색상을 저장할 수 있는 속성이다.
  • 반응형이 중요해지면서 벡터 파일을 요구하는 것이 많아졌다.

파일	BMP	GIF	JPEG	PNG	SVG
속성	Lossless, Indexedand Direct	Lossless, Indexed	Lossy, Direct	Lossless, Direct	Lossless, Vector
특징	Bit들의 Map으로 아주 오래된 파일 형태이고 파일 사이즈가 크다.	무손실 압축 방식이지만 최대 256가지의 색상만 사용할 수 있다. 파일 사이즈는 BMP보다 작다.	인간의 눈으로 확인할 수 없는 부분을 제거한 손실 압축 방식, 수천 가지의 컬러 팔레트를 가지고 있다.	수천가지의 팔레트를 가지고 잇으면서 무손실 압축 방식, GIF나 JPEG파일보다 파일 사이즈가 크다.	픽셀 대신 라인과 곡선으로 이루어졌다. 파일 사이즈는 작은편이지만 디자인 복잡도에 따라 달라진다.
활용	윈도우 프로그램이나 초기 application에서 사용했으나 최근에는 잘 사용하지 않는다.	애니메이션 투명한 것을 표현 가능하다. 로고나 선을 그리는거에 적합하다.	적은 파일 사이즈와 좋은 퀄리티 표현, 사진이나 그라데이션 표현에 좋다.	Alpha transparency 지원, 일부 영역 투명처리 가능, 아이콘 배너같은 영역에 파일 활용한다.	애니메이션 적용도 다양한 해상도 대응에 적합, 단 Flat&Simple Design 결과물에 적합하다.

• 디자인 용어 
  • Affordance 
    • 사용자들한테 사용법을 알려주지 않아도 자연스럽게 행동을 할 수 있게끔 유도하는 것
    • 예) 필드를 다 채웠을 경우 버튼을 활성화시키는 것
• 디자이너와 협업하기
  • PM/PO는 요구사항을 전달한다. - 추구하는 목적, 필요한 기능, 고려해야 하는 제약, 요구사항은 개인적인 견해가 아니어야 한다.
  • 개발과 디자인 사이에서 다지인 결과물이 정해진 리소스와 일정 안에서 가능한지 항상 고려하고 교통정리를 해줘야 한다.
  • 시스템 상황 변경에 대한 표현도 디자인이 되어야 한다. PM/PO가 정의해서 반드시 디자이너에게 전달해야 한다.
  • 선 경청 후 협의 - 디자인 결과물이 의도와 다르게 디자인된 경우 디자이너의 관점/철학을 물어보고 의도를 파악해야 한다. PM이 정의한 목적이 잘 전달이 안된 경우이거나 디자이너가 다양한 안으로 확장한 것일 수도 있다.