ㅣ플러스 엑스 UI 강의 후기 04ㅣ
02강_03 요약
확정된 시안으로 구체적인 디자인을 만드는 프로세스를 알려줄게.
시안 확정 이후 설계 -> 디자인 -> 개발이 순차적으로 이루어 짐. 많은 협업으로 스케쥴 관리가 필요
이때 디자이너의 일정은 세 가지로 나누어 일정을 짜고 작업 한다.
- 페이지 디자인
- 피드백 반영
- 가이드
다수의 디자이너가 카테고리 단위로 나누어 작업함.
일관된 디자인 작업을 위해서 먼저 Common Design Style Guide를 세운다.
프로젝트 설계 단계에서 틀을 만들고 디자인 진행에 따라 업데이트 하면서 관리함.
[Common Design Style Guide]
‘폰트, 컬러, 그리드, UI 콤퍼넌트’
- 폰트 스타일 가이드: 폰트명, 영문, 한글, 사용 크기
- 타이틀 폰트 / 본문용 폰트 사용에 따라 분류하기 (폰트 굵기, 크기, 자간, 행간 표기)
[컬러 가이드]
- 베이직 컬러 / 포인트 컬러 .. 선정.
- 위계를 나타내는 컬러 사용 (명도차이를 줌)
ex) 블랙 —— 화이트 사이 그레이 톤을 80%, 60%, 40%, 20%, 5% 로 나누고,
80%~30%까지 텍스트 컬러로 사용/ 20%,5%는 라인 컬러로 사용
- 스타일 가이드로 미리 지정
- 그리드 가이드: 전체적인 화면의 일관성을 만들어 줌
메인 그리드 정하고 -> 서브 그리드 작업
* 최대한 여러 페이지를 테스트 하면서 진행해야 함. 꼭 그리드에 다 맞춰야 하는 건 아님. 명확한 원칙에 따라 다변적 변화 가능.
[UI 콤포넌트]
콤포넌트 관리 디자이너 한 명이 있고 히스토리 관리 하면서 디자인함
“시각적 사용성”
페이지 디자인
[화면 설계서 해석]
- 화면 구성, 기능, 데이터 서비스 전반적으로 정의 된 문서
- 카테고리별로 디자인 됨.
- 와이어 프레임.
- 디스크립션 설명 (화면정보,상태별 케이스, 팝업 및 오류 상황별 케이스 확인, 팝업 UI디자인 시 다양한 케이스 확인 하고 최소값과 최대 케이스 확인, 문구 양 확인)
[Page Design의 규칙 생성]
-페이지 뎁스에 디자인 규칙 생성 방법 : 엡 사용시 하나의 화면이 아닌 여러 페이지 뎁스를 사용함. 사용자가 어떤 뎁스에 있는지 인지 할 수 있도록 뎁스 별로 사용성 규칙을 다르게 만들면 서비스 구조를 쉽게 파악 할 수 있다.
Ex) 홈, 서브페이지, 디테일페이지 페이지별 디자인 규칙을 다르게 정해서 각 뎁스별로 시각적 정보를 다르게 하여 사용자가 본인이 어디에 있는지 알 수 있게 함.
[디자인의 강약 조절]
- 중요한 콘텐츠 강조
- 콘텐츠의 그룹화
- 완성도 높은 디자인
페이지 내에서 이미지, 글 강약 조절은 콘텐츠 소비 흐름을 도와줌. 시각적 정보를 쉽게 소비할 수 있도록 도와줌.
“ 디자인 가이드&팔로우 업”
[디자인 개발 가이드]
개발자와 소통 할 때 디자인 한 것에 대해 화면에 어떻게 구현될지 고민하고 디자인의도가 개발자에게 전달되도록 가이드를 만들어야 한다.- - 텍스트 최대치 박스 고려
- 텍스트 간의 마진 정의 (요소를 모두 콤퍼넌트 하면 옵셔널 요소를 가려서 사용 할 수 있음.)
- 이미지 리소스를 최소화 할 수 있는 방향으로 가이드 제안 해야 함.
- 디자인 UI 요소의 트렌지션 가이드 설정 ex) 스크롤 시 상단헤더가 사라진다.
- 페이지 전환 트렌지션 가이드 ex) 뎁스 진입에 따른 트렌지션 구현 가이드
디자인 가이드는 시각적으로 매력적 이면서 기능적으로 사용자 중심의 인터페이스여야 한다.
마이크로 인터렉션 사용자가 디지털 환경에서 프로덕트와의 상호작용 의미. 사용자 경험 올려주는 효과가 있음 -> 브랜드 아이덴티티가 전달 될 수 있도록 모션설정. 사용자 액션에 대한 피드백, 로딩 증에 마이크로 인터렉션 적용
[운영가이드]
- 썸네일, 배너, 일러스트, 아이콘 등 지속적으로 운영되어야할 요소들이 운영 될 수 있도록 도와준다.
서비스에서 운영될 디자인 요소 제작 가이드
UI가 콘텐츠를 담는 그릇이라면 그릇에 담기는 이미지를 담아줘야 한다.
콘텐츠가 일괄적으로 운영되어야 함. 전체적인 브랜드 아이덴티티가 지속 가능하도록 해야함.
*고려해야할 점
- 이미지 사이즈 : 해상도 대응을 위해 1배수로 작업 함. 1배수 이미지 그대로 작업 가이드를 할 경우 고해상도 디바이스에서 이미지 화질이 저하되어 보임. 실제로 콘텐츠에 노출될 이미지를 고려하여 사이즈를 지정해 줘야 한다. 1배 수 작업 기준 사이즈로 2배수나 3배수 사이즈로 운영가이드 제작해야함.너무 큰 사이즈 일 경우 퍼포먼스문제가 생길 수 있기때문에 실제테스트를 진행해보고 적절한 사이즈를 지정해야 함.
- 이미지에 폰트가 포함된 경우: UI 폰트와 일관성을 위해 폰트의 종류, 사이즈, 자간 행간, 컬러 지정 방법 가이드 /. 이미지 배치 가이드. / 시스템과함꼐 사용 시 충돌 되지 않도록 가이드 ex) 돌아가는 베너 중 이미지와 글 배치
[🌰인사이트]
● 뎁스에 따른 레이아웃 변화
- 디바이스 화면안에서 이동하며 정보를 얻는 앱서비스의 특성상 이동 경로, 현재 있는 위치를 알기 어렵다. 서비스 뎁스별 레이아웃을 다르게 하면 차이를 느끼게 되어 사용자가 어느 위치에있는지 가늠 할 수 있도록 한다.
●이미지 운영가이드 제작시 실제 적용될 이미지 사이즈를 제안
- 작업용 이미지 사이즈가 아닌 서비스 운영시에 사용 될 이미지 사이즈를 지정한다. 해상도는 테스트를 통해 앱상에서 문제가 없는 (해상도 저하, 퍼포먼스 오류)지 확인 해야 한다.
●트렌지션 가이드
- 화면전환 효과 가이드
- 트렌지션 관련 지식 https://brunch.co.kr/@lain/4 참고
[🌞 목표]
▶ 트렌지션 레퍼런스를 조사 한다. 구현하고자 하는 트렌지션을 선정하고 개발자에게 전달 할 수 있다.
▶ Common Design Style Guide을 공부 한다. 추후 서비스를 만들때나 포폴을 만들때 스스로 스타일 가이드를 구축 할 수 있다.
▶ 마이크로 인터렉션을 구축하고 만들 수 있다. 이를 구현하기 위해 에프터 이펙트나 로티 등 적합한 툴을 선정하여 툴을 익힌다. 간단한 모션은 직접 만들고 서비스에 적용 할 수 있다.
▶ 운영가이드 제작 시 위의 가이드에 따라 제작하여 운영에 필요한 정보를 빠짐없이 포함된 문서를 작성한다.
'디자인 > UIUX' 카테고리의 다른 글
| [UI 디자인 기초] 해상도 (0) | 2023.07.24 |
|---|---|
| [UI 디자인 프로세스] 2 - 04. PR 페이지 만들기 (0) | 2023.07.22 |
| [UI 디자인 프로세스] 2 - 02. UI제안 프로세스 (0) | 2023.07.20 |
| [UI 디자인 프로세스] 2-01. 업무 프로세스 (0) | 2023.07.19 |
| 2023 Google material 새로운 기능 Carousel (0) | 2023.05.23 |
